/* Home (vision §E1). The art leads: one lit original, then the wall it hangs on, then quiet bands on the
   umber wall. Asymmetric splits on the 12-column grid; nothing sits on a painting; the light falls on the
   wall only. The Step back (stage, wall, sequence) lives in css/v3/features/stepback.css; the Lamp
   controls (lamp.js createLampControls) are styled at the end of this file. */
/* A fallback for the hero headline only. The display cut of Fraunces (opsz 52–144) is far narrower than
   its text cut, which fonts.css's "Fraunces Fallback" matches: in that fallback "Crowds, trees," is up to
   37% wider and re-breaks, and the whole hero jumps when Fraunces arrives. Scaled to 80%, Georgia (or the
   system serif) is never wider than the display cut, so the three lines hold; line boxes are a fixed
   0.94 em, so nothing moves on the swap. */
@font-face {
  font-family: "Fraunces Hero Georgia";
  src: local("Georgia"), local("Gelasio");
  size-adjust: 80%;
  ascent-override: 122.3%; /* Fraunces' own ascent and descent (0.978 / 0.255 em), so the baseline holds */
  descent-override: 31.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Hero Serif";
  src: local("Noto Serif"), local("NotoSerif-Regular"), local("Times New Roman"), local("Times"), local("Liberation Serif"), local("DejaVu Serif");
  size-adjust: 80%;
  ascent-override: 122.3%;
  descent-override: 31.9%;
  line-gap-override: 0%;
}

@layer pages {
  /* One rhythm for every band: --section (clamp(64px, 9vw, 160px)) of open wall between one band's
     last line and the next band's eyebrow, and nothing else stacked on it. */
  .home { --section-gap: var(--section); }
  .home .section { padding-block: calc(var(--section-gap) / 2); }
  /* Data that arrives late (slow connections) can land above the screen; scroll anchoring holds what
     the visitor is reading in place, but under html { overflow-x: clip } a clipping body (core.css)
     makes Chromium score that anchoring as a layout shift (CLS 1.0 measured on phones when "Under a
     low light" appeared above). html already clips sideways, so here the body does not. Nothing on this
     page may then reach past the screen's sides (Android Chrome would widen its layout viewport): what
     does (the hero's light, the low light's pool) is clipped by its own band. Not main: a clipping
     ancestor of the late content brings the mis-scored shift back. */
  body { overflow: visible; }
  .home-sb, .home-low { overflow-x: clip; }

  /* ------------------------------------------------------------------ section heads (shared) */
  .home-head { display: grid; gap: var(--space-3); margin-block-end: clamp(40px, 4.5vw, 72px); }
  .home-head__eyebrow { margin: 0; white-space: nowrap; }
  .home-head__title {
    margin: 0;
    font-size: var(--step-4);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  .home-low__copy, .home-prints__copy, .home-doodles__copy, .home-ai__copy, .home-about__lead {
    margin: 0;
    max-inline-size: 34rem;
    color: var(--ink-2);
    font-size: var(--step-0);
    line-height: 1.6;
    text-wrap: pretty;
  }
  /* Text beside art (cols 9–12 or 1–5): eyebrow, title, copy, actions. */
  .home-copy { display: grid; align-content: center; gap: var(--space-5); }
  .home-copy .home-head__title { margin-block-start: calc(var(--space-2) * -1); }
  .home-copy > p:last-child { margin-block-start: var(--space-3); }

  /* ------------------------------------------------------------------ 1. hero */
  .home-hero {
    /* The painting: at most 78svh, leaving room for its label and the lamp row (site-images.mjs
       writes the same arithmetic into the image's sizes). */
    --hang-h: min(78svh, 100svh - var(--header-h) - 11.5rem);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
    min-block-size: calc(100svh - var(--header-h));
    padding-block: var(--space-5) var(--space-8);
  }
  .home-hero__text {
    grid-column: 1 / span 5;
    grid-row: 1;
    container-type: inline-size;
    /* Lifts the words to the painting's centre (the label and lamp row hang below the painting). */
    padding-block-end: 5.5rem;
  }
  .home-hero__title { margin: 0; display: grid; gap: var(--space-5); }
  .home-hero__eyebrow { display: block; }
  .home-hero__eyebrow > span { white-space: nowrap; }
  .home-hero__sep { white-space: pre; }
  /* Where one line may not fit (phones; the narrow text column of 1024–1299 px), two deliberate lines
     without the separator, never a wrap that leaves "·" hanging. Gathering would re-wrap it there, so
     it stays still (effects.css only gathers from 600 px). */
  @media (max-width: 599.98px), (min-width: 1024px) and (max-width: 1299.98px) {
    .home-hero__sep { display: none; }
    .home-hero__eyebrow > span:last-child { display: block; }
  }
  @media (min-width: 1024px) and (max-width: 1299.98px) {
    .home-hero__eyebrow[data-gather] { animation: none !important; }
  }
  .home-hero__headline {
    display: block;
    /* Three lines, set by hand ("Crowds, trees, / villages and / night skies."), sized so the longest
       fits its column (cols 1–5) in Fraunces and in the hero fallback above alike: the lines never
       re-break when the font arrives, so nothing below moves. */
    font-family: "Fraunces", "Fraunces Hero Georgia", "Fraunces Hero Serif", Georgia, serif;
    font-size: clamp(3.25rem, 16.4cqi, 8.75rem);
    line-height: 0.94;
    padding-block-end: 0.08em; /* the descenders of the lit glyphs stay inside the painted box */
    /* The glint rests on "trees, / villages" (home.js then slides it with the lamp, inside the box). */
    --glint-x: 45%;
    --glint-y: 33%;
  }
  /* The only gold on the site besides the signature: base.css's .lit spreads gold-3 so wide that it
     never reads, so here a tight warm highlight sits on two or three words. Both ends stay ≥ 15:1 on
     the wall (gold-3 15.4:1, gesso 15.6:1). North, more contrast, forced colours: plain ink (base.css). */
  @media (forced-colors: none) and (not (prefers-contrast: more)) {
    :root:not([data-light="north"]) .home-hero__headline.lit {
      background-image: radial-gradient(ellipse 30% 46% at var(--glint-x) var(--glint-y),
        var(--gold-3) 0 38%, color-mix(in oklab, var(--gold-3) 50%, var(--ink)) 68%, var(--ink) 100%);
    }
  }
  .home-hero__headline > span { display: block; }
  .home-hero__sub {
    margin: var(--space-6) 0 0;
    max-inline-size: 30rem;
    color: var(--ink-2);
  }
  .home-hero__sub :is([data-count], [data-price]) { color: var(--ink); font-variant-numeric: tabular-nums; }
  .home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin: var(--space-7) 0 0;
  }

  /* The art column: the hang (light layer + plate), its label, the lamp row. --ar is the painting's. */
  .home-art {
    position: relative;
    grid-column: 6 / -1;
    grid-row: 1;
    justify-self: center;
    inline-size: min(100%, var(--hang-h) * var(--ar, 0.8));
  }
  .home-hang { display: grid; margin: 0; }
  .home-hang__frame { position: relative; display: grid; }
  /* The light (pool on the wall + cast shadow) and the plate (the painting) share one cell. They are
     siblings, so the Step back can slide the wall's other paintings between them: the light always
     sits under every painting (vision §I). Same recipe as components/hang.css. */
  .home-hang__light, .home-hang__plate { grid-area: 1 / 1; }
  .home-hang__light { position: relative; z-index: 1; display: grid; pointer-events: none; }
  /* The hero's lamp is the site's first interaction, so its pool is stronger than a hang's: 14% of the
     lamp colour (the label column's words sit above it on their own layer; ink-2 keeps 6.9:1 on its
     brightest part). Lamp light only: none in North light, more contrast or forced colours. */
  .home-hang__light { --hero-pool: transparent; --hero-cast: transparent; }
  :root:not([data-light="north"]) .home-hang__light { --hero-pool: color-mix(in oklab, var(--lamp) 14%, transparent); --hero-cast: rgb(0 0 0 / 0.6); }
  @media (prefers-contrast: more) { :root .home-hang__light { --hero-pool: transparent; --hero-cast: transparent; } }
  .home-hang__light::before {
    content: "";
    grid-area: 1 / 1;
    z-index: -1;
    align-self: unsafe center;
    justify-self: unsafe center;
    inline-size: 240%;
    block-size: 240%;
    background: radial-gradient(closest-side,
      var(--hero-pool) 0 30%,
      color-mix(in oklab, var(--hero-pool) 64%, transparent) 50%,
      color-mix(in oklab, var(--hero-pool) 26%, transparent) 72%,
      transparent);
    translate:
      calc((clamp(-0.3, var(--lamp-x), 1.3) - 0.5) / 2.4 * 100%)
      calc((clamp(-0.3, var(--lamp-y), 1.3) - 0.5) / 2.4 * 100%);
    will-change: translate;
  }
  /* The cast shadow: longer than a hang's (up to 24 px), darkest at the canvas edge. */
  .home-hang__light::after {
    content: "";
    grid-area: 1 / 1;
    box-shadow: 0 0 8px 0 var(--hero-cast), 0 0 34px 2px var(--hang-cast-color);
    translate: clamp(-24px, var(--cast-x) * 4 / 3, 24px) clamp(-24px, var(--cast-y) * 4 / 3, 24px);
    will-change: translate;
  }
  /* Before the lamp swings in (Full motion), the light waits at the upper left, off the canvas. */
  :root.js:not([data-motion="calm"]) .home-hang__frame { --lamp-x: -0.3; --lamp-y: -0.3; --cast-x: 18px; --cast-y: 18px; }
  :root[data-motion="calm"] .home-hang__frame { --lamp-x: 0.2; --lamp-y: 0.15; }

  .home-hang__plate {
    position: relative;
    z-index: 3;
    display: block;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .home-hang__plate picture { display: block; }
  .home-hang__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--ar, 0.8);
    box-shadow: 0 1px 2px var(--hang-contact-color);
  }
  /* Local preview: a pending crop shown as a crop of the same pixels (index.html inline script). */
  .home-hang__plate[data-crop] { overflow: hidden; aspect-ratio: var(--ar, 0.8); box-shadow: 0 1px 2px var(--hang-contact-color); }
  .home-hang__plate[data-crop] .home-hang__img {
    inline-size: calc(100% / var(--crop-w, 1));
    max-inline-size: none;
    aspect-ratio: auto;
    translate: calc(var(--crop-x, 0) * -100%) calc(var(--crop-y, 0) * -100%);
    box-shadow: none;
  }
  .home-hang__draft { position: absolute; inset-block-end: calc(100% + var(--space-2)); inset-inline-start: 0; z-index: 2; white-space: nowrap; }

  /* The museum label (vision §D13), left-aligned to the canvas, 16 px below it: the title, then
     "P0155 · View painting →" (the medium joins once reviewed). */
  .home-hang__label { display: grid; justify-items: start; gap: 4px; margin-block-start: var(--space-4); }
  .home-hang__label .label__line { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
  .home-hang__label .label__link::before {
    content: "·";
    display: inline-block;
    margin-inline: 0.7em;
    color: var(--ink-2);
    font-family: var(--font-ui);
    letter-spacing: 0;
  }
  .home-hang__label .label__link { min-block-size: 0; padding-block: 0; font-size: var(--step--1); text-decoration-line: underline; }

  /* Lamp row: the hint for this visitor's pointer and mode, Move the light (touch), Lamp controls. */
  .home-lamp {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-4);
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--rule);
  }
  .home-lamp__hint { margin: 0; font-size: var(--step--1); line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
  .home-lamp__h { display: none; }
  .home-lamp__h[data-h="fine"] { display: inline; }
  @media (pointer: coarse) {
    .home-lamp__h[data-h="fine"] { display: none; }
    .home-lamp__h[data-h="coarse"] { display: inline; }
    .home-lamp[data-move="on"] .home-lamp__h[data-h="coarse"] { display: none; }
    .home-lamp[data-move="on"] .home-lamp__h[data-h="drag"] { display: inline; }
  }
  /* Lamp off says so first (there is no light to move); then Calm. */
  :root:is([data-motion="calm"], [data-light="north"]) .home-lamp .home-lamp__h { display: none; }
  :root[data-motion="calm"]:not([data-light="north"]) .home-lamp .home-lamp__h[data-h="calm"] { display: inline; }
  :root[data-light="north"] .home-lamp .home-lamp__h[data-h="north"] { display: inline; }
  .home-lamp__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); margin: 0 0 0 auto; }
  .home-lamp__open, .home-lamp__move { min-block-size: 44px; padding-inline: 2px; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
  .home-lamp__open:is(:hover, :focus-visible), .home-lamp__move:is(:hover, :focus-visible) { color: var(--ink); }
  .home-lamp__open > svg { inline-size: 18px; block-size: 18px; margin-inline-end: -2px; }
  .home-lamp:has(.home-lamp__pop:popover-open) .home-lamp__open { color: var(--ink); text-decoration-color: var(--lamp); }
  .home-lamp__move { display: none; }
  .home-lamp__move[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
  @media (pointer: coarse) {
    :root:not([data-motion="calm"]):not([data-light="north"]) .home-lamp__move { display: inline-flex; }
  }
  /* While "Move the light" is on, a drag on the painting moves the light instead of the page. */
  .home-art[data-move="on"] .home-hang__plate { touch-action: none; }
  /* The Lamp controls never cover the painting they light (vision §I). Desktop: beside it, to its
     left, bottom-aligned with it. Below 1024 px: under the lamp row (the painting is above). Both are
     anchored and scroll with the page. Without anchor positioning: the lower left corner of the
     screen (a full-width sheet on phones). */
  .home-art { anchor-name: --home-art; }
  .home-lamp { anchor-name: --home-lamp; }
  .home-lamp__pop.popover {
    inline-size: min(22.5rem, 100vw - 2 * var(--margin));
    max-block-size: min(36rem, 100svh - 2 * var(--space-4));
    overflow: auto;
    padding: var(--space-5);
    text-align: start;
    position: fixed;
    position-area: none;
    inset: auto auto var(--space-5) var(--margin);
    margin: 0;
  }
  @media (max-width: 1023.98px) {
    .home-lamp__pop.popover {
      inset: auto 0 0;
      inline-size: 100%;
      max-inline-size: none;
      max-block-size: 62svh;
      padding: var(--space-5) var(--margin) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
      border-inline: 0;
      border-block-end: 0;
    }
  }
  @supports (position-area: left) {
    .home-lamp__pop.popover {
      position: absolute;
      inset: auto;
      margin: 0;
      max-block-size: none;
      position-try-fallbacks: none;
    }
    @media (min-width: 1024px) {
      .home-lamp__pop.popover { position-anchor: --home-art; position-area: left span-top; margin-inline-end: var(--space-5); }
    }
    @media (max-width: 1023.98px) {
      .home-lamp__pop.popover {
        position-anchor: --home-lamp;
        position-area: bottom span-right;
        inline-size: min(26rem, 100vw - 2 * var(--margin));
        margin-block-start: var(--space-2);
        padding: var(--space-5);
        border-inline: 1px solid var(--edge);
        border-block-end: 1px solid var(--edge);
      }
    }
  }

  @media (max-width: 1023.98px) {
    .home-hero {
      --hang-h: 56svh;
      grid-template-columns: minmax(0, 1fr);
      min-block-size: 0;
      padding-block: var(--space-5) var(--space-8);
      row-gap: var(--space-7);
    }
    .home-art { grid-column: 1; grid-row: 1; justify-self: start; }
    .home-art[data-draft] { padding-block-start: calc(var(--space-6) + var(--space-1)); }
    .home-hero__text { grid-column: 1; grid-row: 2; max-inline-size: 40rem; padding-block-end: 0; }
  }
  @media (max-width: 599.98px) {
    .home-hero { padding-block-start: var(--space-4); row-gap: var(--space-8); }
    .home-lamp { row-gap: var(--space-1); }
    .home-lamp__hint { flex-basis: 100%; padding-block: var(--space-2) 0; }
    .home-lamp__tools { margin-inline-start: -2px; }
    /* Phones: the slab, then the link, always on their own lines (a pair that only just fits would
       re-wrap when the font arrives). */
    .home-hero__ctas, .home-ai__ctas { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  }

  /* ------------------------------------------------------------------ 3. what he keeps painting */
  .home-rows { display: grid; gap: clamp(56px, 6vw, 104px); margin: 0; padding: 0; list-style: none; }
  .home-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .home-row__text {
    grid-column: 1 / span 3;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-3);
    padding-block-start: var(--space-1);
  }
  .home-row__name { margin: 0; font-size: var(--step-2); }
  .home-row__line { margin: 0; max-inline-size: 20rem; color: var(--ink-2); font-size: var(--step-0); line-height: 1.55; text-wrap: pretty; }
  .home-row__all { margin: var(--space-2) 0 0; }
  .home-row__draft { margin: 0; }
  .home-row__strip { grid-column: 4 / -1; min-inline-size: 0; }

  /* A justified strip: five works at one height, widths by their true aspect ratios (site-images.mjs
     writes matching sizes). The wall pool comes up behind a hovered tile (components/tile.css). */
  .home-strip {
    display: flex;
    align-items: flex-start;
    gap: var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .home-strip > li { flex: var(--ar, 1) 1 0%; min-inline-size: 0; }
  .home-strip .tile { --tile-glow: clamp(28px, 1rem + 2.4vw, 56px); }
  .home-strip .tile__img { display: block; box-shadow: 0 1px 2px var(--hang-contact-color); }
  .home-strip .label__title { --label-size: var(--step--1); }

  @media (max-width: 1023.98px) {
    .home-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
    .home-row__text { grid-column: 1; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 0; }
    .home-row__name { grid-column: 1; }
    .home-row__all { grid-column: 2; grid-row: 1; margin: 0; }
    .home-row__line, .home-row__draft { grid-column: 1 / -1; }
    .home-row__strip { grid-column: 1; }
  }
  /* Phones: the strip scrolls sideways at a readable height (native scroll; padding leaves room for
     the tile's pool, which a scroller clips at its padding edge). */
  @media (max-width: 599.98px) {
    .home-row__strip {
      margin-inline: calc(var(--margin) * -1);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      padding: var(--space-4) var(--margin) var(--space-5);
      scroll-padding-inline: var(--margin);
      scroll-snap-type: x proximity;
    }
    .home-row__strip::-webkit-scrollbar { display: none; }
    .home-strip { inline-size: max-content; }
    .home-strip > li { flex: none; inline-size: calc(11.5rem * var(--ar, 1)); scroll-snap-align: start; }
  }

  /* ------------------------------------------------------------------ 4. under a low light */
  .home-low__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-7);
    align-items: center;
  }
  /* A stretch of wall for the light to cross (cols 1–7): the CSS pool sweeps it left to right, 1:1 with
     scroll (lamp.js follow 'scroll' on this box), and the detail's cast shadow swings with it. The whole
     painting hangs at col 1, as tall as the detail, the detail's square marked on it; the detail hangs
     toward the words at 1:1 (the photograph's own pixels: it never grows), its label 16 px below. Where
     the wall is too narrow for both, the detail alone. */
  .home-low__wall {
    --detail-w: 360px;
    --detail-h: 360px;
    grid-column: 1 / span 7;
    position: relative;
    container-type: inline-size;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: start;
    justify-items: start;
    gap: var(--space-4) var(--gutter);
    margin: 0;
  }
  .home-low__whole {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: block;
    block-size: min(var(--detail-h), 100cqw);
    aspect-ratio: var(--ar, 0.8);
    color: inherit;
  }
  .home-low__whole img { display: block; inline-size: 100%; block-size: 100%; box-shadow: 0 1px 2px var(--hang-contact-color); }
  .home-low__mark { position: absolute; box-shadow: 0 0 0 1px var(--gold-3), 0 0 0 2px rgb(0 0 0 / 0.45); pointer-events: none; }
  .home-low__whole:focus-visible { outline-offset: 4px; }
  /* The pool moves by translate only (never top/left), so its sweep is not a layout shift (CLS): the box
     is the wall's own size, so its translate percentages are the wall's (the light's place on it), and
     the light itself is drawn by ::before, centred on the box's top-left corner. */
  .home-low__pool {
    position: absolute;
    inset: 0;
    z-index: 0;
    translate: calc(clamp(-0.3, var(--lamp-x, 0.15), 1.3) * 100cqw) calc(var(--lamp-y, 0.36) * 100%);
    pointer-events: none;
    will-change: translate;
  }
  .home-low__pool::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: calc(var(--detail-w) * 2.6);
    aspect-ratio: 1.25;
    background: radial-gradient(closest-side,
      var(--pool) 0 30%,
      color-mix(in oklab, var(--pool) 60%, transparent) 54%,
      color-mix(in oklab, var(--pool) 22%, transparent) 78%,
      transparent);
    translate: -50% -50%;
  }
  .home-low__plate {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
    inline-size: min(var(--detail-w), 100cqw);
  }
  /* The detail's cast shadow, away from the light. lamp.js's --cast-x assumes the light is measured
     from the centre of its host (the whole wall); the detail hangs off-centre, so the horizontal cast is
     taken from where the pool is relative to the detail itself (cqw = the wall's width). */
  .home-low__plate::before {
    --light-x: calc(clamp(-0.3, var(--lamp-x, 0.15), 1.3) * 100cqw);
    --detail-cx: calc(100cqw - min(var(--detail-w), 100cqw) / 2);
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    box-shadow: 0 0 30px 0 var(--hang-cast-color);
    translate: clamp(-18px, (var(--detail-cx) - var(--light-x)) * 0.06, 18px) clamp(-18px, var(--cast-y), 18px);
    will-change: translate;
  }
  .home-low__plate img { display: block; inline-size: 100%; block-size: auto; box-shadow: 0 1px 2px var(--hang-contact-color); }
  .home-low__label {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    inline-size: min(var(--detail-w), 100cqw);
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--ink-2);
  }
  .home-low__label p { margin: 0; }
  .home-low__label .title { color: var(--ink); font-size: 1.06em; }
  .home-low__text { grid-column: 9 / -1; }
  /* Too narrow for both: the detail alone, at the start of the wall. */
  @container (max-width: 639.98px) {
    .home-low__whole { display: none; }
    .home-low__plate, .home-low__label { grid-column: 1; }
    .home-low__plate::before { --detail-cx: calc(min(var(--detail-w), 100cqw) / 2); }
  }
  @media (max-width: 1023.98px) {
    .home-low__grid { grid-template-columns: minmax(0, 1fr); }
    .home-low__wall, .home-low__text { grid-column: 1; }
    .home-low__text { grid-row: 1; }
  }

  /* ------------------------------------------------------------------ 5. prints */
  .home-prints__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-8);
    align-items: center;
  }
  .home-prints__text { grid-column: 1 / span 5; }
  .home-prints__copy :is([data-price], [data-days], [data-count]) { color: var(--ink); font-variant-numeric: tabular-nums; }
  .home-prints__kit { grid-column: 7 / -1; display: grid; gap: var(--space-7); }
  .home-draft { margin: 0; }

  .home-kit { display: grid; gap: var(--space-5); }
  .home-kit__title {
    margin: 0;
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--rule);
    font: 600 var(--step--2)/1.3 var(--font-ui);
    font-stretch: 100%;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .home-kit__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .home-kit__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-kit__item { display: grid; justify-items: start; align-content: start; gap: var(--space-1); }
  .home-kit__name { margin-block-start: var(--space-3); font: 500 var(--step--1)/1.3 var(--font-ui); color: var(--ink); }
  .home-kit__note { font: 450 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-2); text-wrap: balance; }

  /* Papers: sheets on the wall, their surfaces drawn (never photographed). */
  .home-kit__paper {
    position: relative;
    inline-size: 3.6rem;
    aspect-ratio: 3 / 4;
    background: #f1eee7;
    box-shadow: 0 1px 2px var(--hang-contact-color), 0 0 0 1px light-dark(rgb(0 0 0 / 0.08), transparent);
  }
  .home-kit__paper--lustre {
    background:
      linear-gradient(118deg, transparent 32%, rgb(255 255 255 / 0.9) 47%, transparent 60%),
      linear-gradient(180deg, #f7f5f1, #e7e4dd);
  }
  .home-kit__paper--rag { background: #ece4d3; isolation: isolate; overflow: hidden; }
  .home-kit__paper--rag::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #5c4a33;
    opacity: 0.2;
    -webkit-mask: var(--linen) 0 0 / 120px 120px repeat;
    mask: var(--linen) 0 0 / 120px 120px repeat;
  }
  /* Canvas edges: the front and the right side of a stretched canvas, in oblique view; the stripe runs
     round the corner (image wrap), comes back (mirror wrap), or stops at a solid edge. */
  .home-kit__edge { inline-size: 5.25rem; block-size: auto; aspect-ratio: 64 / 52; overflow: visible; }
  .home-kit__front { fill: #dcd6cb; }
  .home-kit__top { fill: #e8e3da; }
  .home-kit__side { fill: #c6bfb2; }
  .home-kit__sun { fill: #c08a3e; }
  .home-kit__ink { fill: #2d2824; }
  .home-kit__line { fill: none; stroke: rgb(0 0 0 / 0.35); stroke-width: 0.6; stroke-linejoin: round; }
  .home-kit__edge--black .home-kit__side { fill: #151413; }
  .home-kit__edge--black .home-kit__top { fill: #23211f; }
  .home-kit__edge--white .home-kit__side { fill: #f7f5f1; }
  .home-kit__edge--white .home-kit__top { fill: #fdfcfa; }
  /* Frames: a moulding round the print (no mount: none is promised). */
  .home-kit__frame {
    --moulding: #1c1a18;
    display: block;
    inline-size: 3.75rem;
    aspect-ratio: 4 / 5;
    padding: 0.42rem;
    background: var(--moulding);
    box-shadow: 0 1px 2px var(--hang-contact-color), inset 0 0 0 1px rgb(0 0 0 / 0.3);
  }
  .home-kit__frame > span {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(162deg, #c08a3e 0 22%, #dcd6cb 22% 58%, #2d2824 58% 70%, #6f8aa8 70%);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35);
  }
  .home-kit__frame--white { --moulding: #f3f1ec; box-shadow: 0 1px 2px var(--hang-contact-color), inset 0 0 0 1px rgb(0 0 0 / 0.18); }
  .home-kit__frame--natural { background: repeating-linear-gradient(94deg, #c9a679 0 2px, #b8915f 2px 3px, #d0ae83 3px 6px, #bf9967 6px 7px); }
  .home-kit__frame--walnut { background: repeating-linear-gradient(94deg, #5c3f2c 0 2px, #4a3122 2px 3px, #654632 3px 6px, #513727 6px 7px); }

  @media (max-width: 1023.98px) {
    .home-prints__text, .home-prints__kit { grid-column: 1 / -1; }
  }
  @media (max-width: 599.98px) {
    .home-kit__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ------------------------------------------------------------------ 6. daily doodles */
  .home-doodles__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-7);
    align-items: center;
  }
  .home-book { grid-column: 1 / span 7; display: grid; gap: var(--space-4); margin: 0; min-inline-size: 0; }
  .home-doodles__text { grid-column: 9 / -1; }

  /* An open sketchbook: two pages meeting at the spine, on its board. Pages are square (every doodle
     is), so the spread keeps its size before the doodles arrive. */
  .home-book__spread {
    --board: color-mix(in oklab, var(--ink) 9%, var(--ground));
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: clamp(8px, 1vw, 14px);
    background: var(--board);
    box-shadow: 0 1px 2px var(--hang-contact-color);
  }
  .home-book__spread::after {
    /* The gutter's shade where the pages meet the spine. */
    content: "";
    position: absolute;
    inset-block: clamp(8px, 1vw, 14px);
    inset-inline-start: calc(50% - 14px);
    inline-size: 28px;
    background: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.18) 46%, rgb(0 0 0 / 0.26) 50%, rgb(0 0 0 / 0.18) 54%, transparent);
    pointer-events: none;
  }
  .home-book__page {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: #ece7dc;
    color: inherit;
    text-decoration: none;
  }
  .home-book__page img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .home-book__page:focus-visible { outline-offset: 3px; z-index: 1; }
  .home-book__labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    padding-inline: clamp(8px, 1vw, 14px);
    min-block-size: 3.25rem;
  }
  .home-book__labels .label__title { --label-size: var(--step-0); }
  .home-book .draft-note { justify-self: start; }
  @media (max-width: 1023.98px) {
    .home-book, .home-doodles__text { grid-column: 1 / -1; }
  }

  /* ------------------------------------------------------------------ 7. AI Studio */
  .home-ai__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-7);
    align-items: center;
  }
  .home-ai__text { grid-column: 1 / span 4; }
  .home-ai__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
  .home-ai__wall { grid-column: 6 / -1; min-inline-size: 0; }
  .home-ai__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Before the pieces arrive each slot keeps its square and caption lines (no layout shift). */
  .home-ai__slot { display: grid; gap: var(--space-3); align-content: start; }
  .home-ai__slot:empty::before { content: ""; aspect-ratio: 1; background: var(--sunken); }
  .home-ai__slot:empty::after { content: ""; block-size: 4.6rem; }
  /* AI images are pinned flat: square, no light, no shadow, stamped in the caption (never on the image). */
  .home-ai__piece { display: grid; gap: var(--space-3); color: inherit; text-decoration: none; }
  .home-ai__piece img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: contain; background: var(--sunken); }
  .home-ai__cap { display: grid; justify-items: start; gap: 4px; min-block-size: 4.6rem; align-content: start; }
  .home-ai__stamp { display: block; font-size: var(--step--2); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
  .home-ai__stamp .ai-stamp { margin-inline-end: 0.5em; vertical-align: 0.08em; }
  .home-ai__stamp .ai-stamp__text { margin: 0; font: inherit; color: inherit; }
  .home-ai__title { font: 500 var(--step--1)/1.35 var(--font-ui); color: var(--ink); text-wrap: pretty; }
  .home-ai__piece:is(:hover, :focus-visible) .home-ai__title { text-decoration: underline 1px var(--lamp); text-underline-offset: 0.2em; }
  @media (max-width: 1023.98px) {
    .home-ai__text, .home-ai__wall { grid-column: 1 / -1; }
  }
  @media (max-width: 599.98px) {
    .home-ai__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--gutter); }
  }

  /* ------------------------------------------------------------------ 8. about teaser */
  .home-about__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-7);
    align-items: center;
  }
  .home-about__portrait { grid-column: 2 / span 4; }
  .home-about__portrait picture, .home-about__img { display: block; inline-size: 100%; block-size: auto; }
  .home-about__text { grid-column: 7 / -1; display: grid; gap: var(--space-5); }
  .home-about__text .home-head__title { margin-block-start: calc(var(--space-2) * -1); }
  .home-about__quote {
    margin: var(--space-2) 0 0;
    max-inline-size: 26ch;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-3);
    font-weight: 380;
    line-height: 1.2;
    color: var(--ink);
    text-wrap: balance;
  }
  .home-about__quote p { margin: 0; }
  .home-about__cta { margin: var(--space-3) 0 0; }
  @media (max-width: 1023.98px) {
    .home-about__portrait { grid-column: 1 / -1; max-inline-size: 26rem; }
    .home-about__text { grid-column: 1 / -1; }
  }

  /* ------------------------------------------------------------------ the Lamp controls (lamp.js) */
  .lamp-controls { display: grid; gap: var(--space-4); }
  .lamp-controls__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .lamp-controls__title {
    margin: 0;
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .lamp-controls__note { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.45; }
  .lamp-controls__set { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) 0 0; border: 0; border-block-start: 1px solid var(--rule); min-inline-size: 0; }
  .lamp-controls__legend { float: inline-start; inline-size: 100%; padding: 0; margin-block-end: var(--space-2); font: 500 var(--step--1)/1.3 var(--font-ui); color: var(--ink); }
  .lamp-controls__dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); clear: both; }
  .lamp-controls__dir { min-block-size: 40px; padding-inline: var(--space-3); font-size: var(--step--1); }
  .lamp-controls__dir[aria-pressed="true"] { --_bd: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .lamp-controls__set--angle .range { margin-block: calc(var(--space-2) * -1) 0; }
  .lamp-controls__out { font: 450 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-2); }
  .lamp-controls__heights { clear: both; }
  .lamp-controls__heights > label { flex: 1 1 0; }

  /* ------------------------------------------------------------------ forced colours */
  @media (forced-colors: active) {
    .home-hang__light, .home-low__pool, .home-low__plate::before { display: none; }
    .home-kit__paper, .home-kit__edge, .home-kit__frame, .home-book__spread { forced-color-adjust: none; outline: 1px solid CanvasText; }
    .lamp-controls__dir[aria-pressed="true"] { outline: 2px solid Highlight; }
  }
}