@import url('../theme/tokens.css');
@import url('../theme/header.css');
@import url('../theme/menu.css');
@import url('../theme/about.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 .th-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--em-space-2xs) var(--em-space-s); }
/* The price is a small tag in the series' own darker tone, so it belongs to each page's color. Its bottom margin lifts it by half of the Enquire link's underline padding, so the tag and the link's text share one center line. */
html .th-work .th-cap .th-price { margin-bottom: var(--em-space-2xs); padding: var(--em-space-2xs) var(--em-space-xs); border: var(--em-hairline) solid var(--em-line); border-radius: var(--em-radius-item); background: var(--em-bg-alt); color: var(--em-ink); font-size: var(--em-text-xs); font-weight: var(--em-weight-medium); line-height: 1; letter-spacing: var(--em-tracking-caps); font-variant-numeric: tabular-nums; white-space: nowrap; }
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;
}

/* The Artist picks page (/paintings/artist-picks) and the Print page (/print) are not series: they take the site's night color. */
html[data-series="artist-picks"],
html[data-series="print"] {
  --series-bg: #14110f;
  --series-bg-alt: #1d1916;
  --series-fg: #faf8f5;
  --series-muted: rgba(250, 248, 245, 0.78);
  --series-line: rgba(250, 248, 245, 0.22);
  --series-body: rgba(250, 248, 245, 0.88);
}
/* and it has no navigation at its foot: neither the links of a series page nor the collection's Previous / Next bar */
html[data-series="artist-picks"] .item-pagination { display: none !important; }
html .th-grid .th-empty { grid-column: 1 / -1; padding-block: var(--em-space-xl); color: var(--em-muted); font-size: var(--em-text-lg); list-style: none; }

/* the star on a painting the artist has marked as a pick hangs off the picture's right edge, near the top: a quarter of it over the painting,
   the rest in the gap beside it (the grid is laid out in columns, which clip anything above the picture) */
html .th-work { --star: 2.25rem; }
html .th-work .th-star { position: absolute; top: var(--em-space-s); right: calc(var(--star) * -0.75); z-index: 1; display: grid; place-items: center; width: var(--star); height: var(--star); border-radius: 50%; background: var(--em-paper); color: var(--em-night); box-shadow: var(--em-shadow-lift); }
html .th-work .th-star svg { width: 62%; height: 62%; fill: currentColor; }
@media (max-width: 40em) { html .th-work .th-star { right: calc(var(--star) * -0.25); } }

/* A work the artist has put on sale: its list price struck through beside the price now, and the percentage as a small tag on the picture */
html .th-work .th-cap .th-price s { margin-right: var(--em-space-2xs); opacity: 0.6; text-decoration-thickness: var(--em-hairline); }
html .th-work .th-cap .th-price b { font-weight: inherit; }
html .th-work > a.th-img .th-sale {
  position: absolute;
  top: var(--em-space-s);
  left: var(--em-space-s);
  z-index: 1;
  padding: var(--em-space-2xs) var(--em-space-xs);
  background: var(--em-ink);
  color: var(--em-bg);
  font: var(--em-weight-medium) var(--em-text-2xs) / 1 var(--em-font-sans);
  letter-spacing: var(--em-tracking-label);
  text-transform: uppercase;
}