/* "gallery": an alternate child theme on the Fluid base v2
   (spec _docs/plans/base-v2.md §16). A Didone display over a quiet grotesk;
   the images carry the colour, the accent is kept for actions. Fonts:
   themes/fonts/bodoni.css (or dist/fluid-fonts-bodoni.min.css). Link after
   the base: fluid.min.css, then this file. Dark mode adds 30 to heading
   weights (base), but the lede's light weight (350) sits under Bodoni Moda's
   400 floor, so it never reached the lede: the low-resolution rule at the end
   sets it (680, a token). */
@layer reset, tokens, base, layouts, components, themes, utilities;

@layer themes {
  :root {
    --font-heading: "Bodoni Moda Variable", Didot, "Bodoni MT", "Noto Serif Display", P052, Georgia, serif;
    --font-body: "Hanken Grotesk Variable", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
    --accent: oklch(46% 0.22 266);          /* ultramarine (Klein); white on it ≈ 7.6:1 */
    --neutral-tint: oklch(50% 0.006 85);    /* gallery white: a breath of warmth so photos read true */
    --display-max: 12rem;
    --measure: 62ch;
    --container-content: 90rem;
    --space-section: clamp(5rem, 3rem + 8.889vi, 11rem);         /* 80 → 176 */
    --space-gutter: clamp(2.5rem, 0.667rem + 8.148vi, 8rem);   /* both sides: 20 → 64px a side */
    --toc-font: var(--font-body);
    --toc-dock-font: var(--font-body);
    /* Nav links tracked like the labels; on a narrow bar the base squeezes
       the tracking down to the minimum before the links wrap. */
    --nav-tracking: 0.12em;
    --nav-tracking-min: 0.04em;
  }

  .eyebrow { color: var(--color-text-muted); }   /* one label voice; the accent is kept for actions */

  /* The label voice reaches the UI. */
  :is(button, .button), :is(.nav__link, .nav__dropdown-link), .toc a {
    font-size: var(--step--2);
    font-weight: 600;
    text-transform: uppercase;
  }
  :is(button, .button), .toc a { letter-spacing: 0.12em; }   /* nav links: --nav-tracking above */
  /* The compact nav's panel (fluid-nav.min.css) sets its links in the
     reading size; this file's label size above would win over it. */
  @supports selector(:popover-open) {
    @container nav (max-width: 40rem) {
      .nav[data-nav~="compact"] .nav__panel .nav__link { font-size: var(--step-1); }
    }
  }

  blockquote {
    font: italic 400 var(--step-3) / 1.15 var(--font-display);
    border: 0;
    padding: 0;
    text-indent: -0.42em;
  }
  /* The hanging open quote goes on the first paragraph, so it hangs in the
     margin instead of standing on a line of its own; the testimonial adds
     its own quote marks. */
  blockquote:not(.testimonial__quote) > :first-child::before { content: "\201C"; }

  .hero__headline, .display { line-height: 0.92; letter-spacing: -0.02em; }
  /* Bodoni's long descender (~0.25em) hangs below a 0.92 line: room under it. */
  .hero__headline, .display { padding-block-end: 0.12em; }

  /* The dock's two rows differ by face and size, not only by position. */
  .toc[data-toc-mode="dock"] .toc__fold > ol > li > a {
    font: 400 var(--step-0) / 1.2 var(--font-display);
    text-transform: none;
    letter-spacing: 0;
  }
  figcaption { max-inline-size: 48ch; }

  /* Bodoni Moda's display cut (opsz 72) loses its hairlines on 1x (non-Retina)
     screens and at phone sizes: there, the font's own sturdier optical sizes
     and heavier weights. Retina desktops keep the fine display cut. Neil,
     2026-10-29, on a 27" 2560x1440 LED Cinema Display: two steps heavier than
     the first fix ("err on the side of readable; a site can go lighter").
     A site goes lighter by setting the two weights lower (floor 400). */
  :root {
    --gallery-lowres-weight: 650;        /* headlines and section heads */
    --gallery-lowres-lede-weight: 680;   /* lede, pull quote, blockquote */
  }
  @media (max-resolution: 1.5dppx), (max-width: 40rem) {
    :root { --weight-display: var(--gallery-lowres-weight); }   /* h3 +100; +30 in dark */
    .display, .hero__headline { font-variation-settings: "opsz" 14; }
    h2, h3 { font-variation-settings: "opsz" 9; }
    :is(.lede, .pullquote) {
      font-weight: calc(var(--gallery-lowres-lede-weight) + var(--_dark-weight));
      font-variation-settings: "opsz" 6;
    }
    blockquote {
      font-weight: calc(var(--gallery-lowres-lede-weight) + var(--_dark-weight));
      font-variation-settings: "opsz" 9;
    }
    /* The low optical sizes are spaced for small text: tighten them back
       (Neil: "too much white space between the letters"). */
    .display, .hero__headline { letter-spacing: -0.045em; }
    h2 { letter-spacing: -0.035em; }
    h3 { letter-spacing: -0.03em; }
    :is(.lede, .pullquote), blockquote { letter-spacing: -0.03em; }
    /* The wordmark set in the display face gets the same sturdier cut. */
    .nav__brand {
      font-weight: calc(var(--gallery-lowres-weight) + var(--_dark-weight));
      font-variation-settings: "opsz" 9;
      letter-spacing: -0.025em;
    }
  }
}