@import url('../theme/tokens.css');
@import url('../theme/header.css');
@import url('../theme/menu.css');
@import url('../theme/buttons.css');
@import url('../theme/glass.css');

/*
 * Series pages take the color of their home page section, so the colors work as a map of the site.
 * The colors come from tones.generated.css (one rule per series). A page with no entry there
 * keeps the default cream look, because every variable below has a fallback.
 *
 * Depends on the color variables declared in the site's Custom CSS (:root): --em-bg, --em-ink,
 * --em-muted, --em-line and --em-body.
 */

html[data-series] {
  --em-bg-alt: var(--series-bg-alt, var(--em-paper-warm));
  --em-bg: var(--series-bg, #faf8f5);
  --em-ink: var(--series-fg, #1c1a18);
  --em-muted: var(--series-muted, #5b544c);
  --em-line: var(--series-line, #e6e1da);
  --em-body: var(--series-body, #3a352f);
}

/* Squarespace paints each section on a layer of its own */
html[data-series] .section-background {
  background-color: var(--em-bg) !important;
}

/* The paintings sit directly on the page color; the white border around each is part of the image */
html[data-series] .th-work {
  background: none;
  padding: 0;
}

/* The mobile menu: its overlay takes the page color, and the open/close button is drawn with plain bars */
html[data-series] .header-menu-bg {
  background-color: var(--em-bg) !important;
}
html[data-series] .header-burger-btn .burger-inner > div {
  background-color: var(--em-ink) !important;
}

/* The small arrow beside a menu entry that opens a list */
html[data-series] .header-dropdown-icon svg {
  stroke: var(--em-ink) !important;
}

/* The Previous / Next links at the bottom of the page */
html[data-series] .item-pagination-prev-next {
  color: var(--em-muted) !important;
}
html[data-series] .item-pagination-title {
  color: var(--em-ink) !important;
}

/* A painting's picture and title on a series page link to the painting's own page. */
html .th-work > a.th-img { position: relative; display: block; }
html .th-work > a.th-img img { display: block; }
/* The title keeps the title's own type: the site styles the links in a caption as small uppercase text, which must not reach it */
html .th-work .th-cap b a { padding: 0; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; text-decoration: none; }
html .th-work .th-cap b a::before,
html .th-work .th-cap b a::after { content: none; }
html .th-work b a:hover { text-decoration: underline; text-underline-offset: var(--em-space-2xs); }
html .th-work > a.th-img:focus-visible, html .th-work b a:focus-visible { outline: var(--em-stroke) solid currentColor; outline-offset: var(--em-space-2xs); }

/*
 * The second tone of a series' family (--em-bg-alt, a deeper shade of the same hue) colors secondary surfaces.
 * The Previous / Next bar at the bottom of a page uses it, so it sits on the page color without disappearing into it.
 */
html[data-series] .item-pagination {
  background-color: var(--em-bg-alt) !important;
  border-top: var(--em-hairline) solid var(--em-line);
}
html[data-series] .item-pagination .item-pagination-icon svg,
html[data-series] .item-pagination .item-pagination-icon svg * {
  stroke: var(--em-ink) !important;
}