/* Eden Autonomous: page styles. The engine (scrollcraft.css) is untouched; this
   file sets the tokens and styles the page's own markup. Same system as On The
   Go (Geist light, 2px corners, paper plates, one Index control), recoloured
   from Eden's own boards and made softer: grounds grade into each other. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-wght.woff2") format("woff2-variations"),
       url("../fonts/geist-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* Grounds, sampled from the boards and the night render. */
  --pearl: #F3F1F4;
  --white: #F8F7F9;
  --silver: #E7E6EB;      /* tray disc, lifted */
  --lilac-g: #ECE7F0;     /* tray lilac, lifted to a ground */
  --night: #1D1722;       /* night sky into plum wall */
  /* The six iridescence moods: the median colour of each photograph. */
  --m0: #ECEDEF; --m1: #E5E6E1; --m2: #F0EDE4; --m3: #AD94B1; --m4: #6E5364; --m5: #465073;

  --ink: #2A1F2D;
  --ink-soft: #5E5263;
  --ink-n: #EEE9F0;       /* on night */
  --ink-n-soft: #B9AFC0;
  --orchid: #6E4A6B;      /* the one accent, from the board's plum chip: on light */
  --orchid-lt: #CDB4D8;   /* the same hue on night */
  --paper: #F8F6F7;
  --plate-ink: #2A1F2D;
  --plate-soft: #605466;

  --sc-canvas: var(--pearl);
  --sc-surface: #FFFFFF;
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--orchid);
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 290 20% 20%;

  --r-obj: 2px;
  --r-ui: 3px;
  --bar-h: 60px;
  --fade: 22vh;           /* how far one ground grades into the next */
  --ease-dream: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-obj: 0 1px 2px hsl(var(--sc-shadow-color) / 0.16), 0 22px 44px -24px hsl(var(--sc-shadow-color) / 0.45);
}

/* Grounds. Each section grades in from the one before it over --fade, so the
   page moves like light rather than cutting. Restate `color`, or text keeps the
   ink it inherited from <body>. */
.g-pearl  { --g: var(--pearl); }
.g-white  { --g: var(--white); --from: var(--lilac-g); }
.g-silver { --g: var(--silver); --from: var(--pearl); }
.g-lilac  { --g: var(--lilac-g); --from: var(--silver); }
.g-night  { --g: var(--night); --from: var(--pearl);
            --sc-ink: var(--ink-n); --sc-ink-soft: var(--ink-n-soft); --sc-accent: var(--orchid-lt); --sc-shadow-color: 280 40% 3%; }
.g-from-night { --from: var(--night); }
:is(.g-pearl, .g-white, .g-silver, .g-lilac, .g-night) {
  background: linear-gradient(to bottom, var(--from, var(--g)) 0, var(--g) var(--fade)) var(--g);
  color: var(--sc-ink);
}
.g-night [data-sc-stage] { background: var(--night); }

body { background: var(--pearl); color: var(--ink); font-weight: 350; }
.sc-grain { opacity: 0.025; z-index: 70; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 90;
  background: var(--paper); color: var(--plate-ink); padding: 10px 14px; border-radius: var(--r-ui);
  transform: translateY(-160%); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }

/* Dreamier entrances than the engine default: a longer, softer rise. */
[data-sc-in], [data-sc-stagger] > * { transition-duration: 1.4s; transition-timing-function: var(--ease-dream); }

/* ---------------------------------------------------------------- type */
.h2 {
  font-family: var(--sc-font-display);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.9rem);
  font-weight: 270;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}
.g-night .h2 { font-weight: 300; }
.lede { font-size: var(--sc-t-lg); font-weight: 330; line-height: 1.5; letter-spacing: -0.01em; max-width: 42ch; margin: 1.6rem 0 0; text-wrap: pretty; }
.body { color: var(--sc-ink-soft); max-width: 58ch; margin: 1.1rem 0 0; line-height: 1.72; text-wrap: pretty; }
.g-night .body { letter-spacing: 0.006em; line-height: 1.76; }
.label {
  display: inline-block;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0;
}
figcaption { font-size: 0.82rem; line-height: 1.5; color: var(--sc-ink-soft); margin-top: 0.85rem; }
figcaption .label { margin-right: 0.7em; }

/* ------------------------------------------------------------ the bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: flex-end; align-items: center;
  padding: 14px var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__index {
  display: inline-flex; align-items: baseline;
  background: rgb(248 246 247 / 0.94); color: var(--plate-ink);
  border: 0; border-radius: var(--r-ui);
  padding: 9px 13px;
  font: inherit; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;
  box-shadow: 0 0 0 1px rgb(42 31 45 / 0.1);
  cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .bar__index:hover { background: #fff; } }
.bar__index:active { transform: scale(0.98); }
.bar :focus-visible, .index :focus-visible { outline-color: var(--orchid); }

/* ----------------------------------------------------------- the index */
.index {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(24rem, 92vw); height: 100dvh; max-height: none; max-width: none;
  padding: 18px 22px 24px; border: 0;
  background: var(--paper); color: var(--plate-ink);
  box-shadow: 0 0 0 1px rgb(42 31 45 / 0.08), 0 30px 80px -20px rgb(20 12 24 / 0.5);
  overflow-y: auto;
  transition: transform var(--sc-d-slow) var(--sc-ease-drawer), opacity var(--sc-d-base) var(--sc-ease-out),
              overlay var(--sc-d-slow) allow-discrete, display var(--sc-d-slow) allow-discrete;
  transform: translateX(0); opacity: 1;
}
.index:not([open]) { transform: translateX(104%); opacity: 0; }
@starting-style { .index[open] { transform: translateX(104%); opacity: 0; } }
.index::backdrop { background: rgb(29 23 34 / 0.45); }
.index__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.index__title { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; color: var(--plate-soft); }
.index__close {
  border: 0; background: transparent; color: var(--plate-ink); font: inherit; font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 10px; border-radius: var(--r-ui); cursor: pointer;
  box-shadow: 0 0 0 1px rgb(42 31 45 / 0.16);
}
.index__close:active { transform: scale(0.98); }
/* Back to the portfolio home; sits beside Close. */
.index__actions { display: flex; gap: 8px; }
.index__home {
  color: var(--plate-ink); text-decoration: none; font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: normal;
  padding: 8px 10px; border-radius: var(--r-ui);
  box-shadow: 0 0 0 1px rgb(42 31 45 / 0.16);
}
.index__list { list-style: none; margin: 0; padding: 0; }
.index__list a {
  display: grid; grid-template-columns: 56px 2em 1fr; align-items: center; gap: 14px;
  padding: 10px 4px; color: inherit; text-decoration: none;
  border-top: 1px solid rgb(42 31 45 / 0.1);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
.index__list img { width: 56px; height: 40px; object-fit: cover; border-radius: var(--r-obj); }
.index__no { font-variant-numeric: tabular-nums; color: var(--plate-soft); font-size: 0.78rem; }
.index__name { font-weight: 400; letter-spacing: -0.005em; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .index__list a:hover { background: rgb(42 31 45 / 0.05); } }

/* -------------------------------------------------------------- plates */
.plate {
  background: var(--paper);
  color: var(--plate-ink);
  border-radius: 4px;
  padding: clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px);
  box-shadow: 0 1px 2px rgb(20 12 24 / 0.16), 0 34px 80px -30px rgb(20 12 24 / 0.55);
  --sc-accent: var(--orchid);
  --sc-ink-soft: var(--plate-soft);
}
.plate__title {
  font-size: clamp(2.6rem, 1.3rem + 4vw, 5rem);
  font-weight: 270;
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: var(--ink);
  margin: 0.75rem 0 0;
  text-wrap: balance;
}
.plate__sub { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.12rem); line-height: 1.52; max-width: 34ch; margin: 1.05rem 0 0; color: #3D3240; text-wrap: pretty; }
.plate__meta {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin: 1.35rem 0 0; padding-top: 1rem; border-top: 1px solid rgb(42 31 45 / 0.14);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plate-soft);
}
.plate__meta span:not(:last-child)::after { content: "·"; margin: 0 0.7em; color: var(--orchid); }

/* Disclosure on the two AI renders: bottom right of the image, small, soft. */
.ai-tag {
  position: absolute; z-index: 5; margin: 0; pointer-events: none; text-align: right;
  font-size: 0.66rem; font-weight: 450; line-height: 1.2; letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.94); text-shadow: 0 1px 2px rgb(14 8 18 / 0.6);
}
/* A soft shadow centred on the tag only, so it reads on pale upholstery as well
   as on the night floor (measured: 4.5:1 or better at every scroll position).
   It lives inside the image frame, so the print's edge trims it. */
.ai-scrim {
  position: absolute; z-index: 4; pointer-events: none;
  width: 340px; height: 84px;
  background: radial-gradient(closest-side, rgb(16 9 20 / 0.74) 46%, rgb(16 9 20 / 0.4) 74%, transparent);
}

/* ------------------------------------------------------------ 1. eden */
/* No `position` on the stage: the engine makes it sticky, and a plain
   `position` here would silently unpin it. Sticky still anchors children. */
.hero-stage {
  height: 100vh; height: 100svh; overflow: clip;
  background: var(--pearl);
  --k: 0;                                   /* 0 full bleed .. 1 framed print */
  --it: calc(var(--bar-h) + 3vh); --ix: 6vw; --ib: 25vh;   /* the print's insets */
  /* The tag rides the print's bottom-right corner, but never below the top of
     the title plate (--pt, set by site.js on phones, where the plate is full
     width). */
  --tb: max(calc(var(--k) * var(--ib) + 16px), var(--pt, 0px));
}
.hero__frame {
  position: absolute; inset: 0;
  clip-path: inset(calc(var(--k) * var(--it)) calc(var(--k) * var(--ix)) calc(var(--k) * var(--ib)) calc(var(--k) * var(--ix)) round calc(var(--k) * 2px));
  background: var(--night);
}
.hero__frame picture, .hero__img { display: block; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 50% 58%; transform: scale(calc(1.06 - var(--k) * 0.06)); will-change: transform; }
.hero__light {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 4%, rgb(222 206 240 / 0.10), transparent 70%),
    linear-gradient(to top, rgb(20 12 24 / 0.32), transparent 34%);
}
.hero__ai { right: calc(var(--k) * var(--ix) + var(--sc-gutter)); bottom: var(--tb); }
.hero__aiscrim { right: calc(var(--k) * var(--ix) + var(--sc-gutter) - 100px); bottom: calc(var(--tb) - 35px); }
.hero__plate {
  position: absolute; z-index: 6;
  left: var(--sc-gutter); bottom: clamp(26px, 7vh, 80px);
  width: min(32rem, 44vw);
  transform: translate3d(0, calc(var(--k) * -2vh), 0);
}

/* ------------------------------------------------------------ 2. brief */
.brief { padding-block: clamp(6rem, 12vw, 11rem); }
.brief__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 7vw, 7.5rem); align-items: start; }
.keys {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin: 1.8rem 0 0;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orchid);
}
.keys span:not(:last-child)::after { content: "·"; margin: 0 0.75em; color: var(--ink-soft); }
.facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem;
  margin: 2.4rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--sc-hairline-strong);
}
.facts dt { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-ink-soft); }
.facts dd { margin: 0.3rem 0 0; font-weight: 400; line-height: 1.5; }
.facts__wide { grid-column: 1 / -1; }
.obj { margin: 0; }
.obj img { width: 100%; height: auto; border-radius: var(--r-obj); box-shadow: var(--shadow-obj); }
.brief__photo { padding-top: 0.6rem; }

/* ---------------------------------------------------------- 3. surreal */
.surreal { padding-block: calc(var(--fade) + clamp(3rem, 6vw, 5rem)) clamp(6rem, 11vw, 10rem); }
/* A symmetric grid: six equal squares, one gap in both directions, centred,
   with the heading centred over it. */
.surreal__head { max-width: 40rem; margin-inline: auto; text-align: center; }
.surreal__head .body { margin-inline: auto; }
.sgrid { --gap: clamp(0.75rem, 1.6vw, 1.25rem); max-width: 62rem; margin: clamp(2.6rem, 5vw, 4rem) auto 0; }
.sgrid__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
}
.sgrid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-obj); box-shadow: var(--shadow-obj); }
.sgrid figcaption { text-align: center; margin-top: 1.4rem; }

/* The breath before the peak, and the settle after it. */
.band { height: 34vh; }
.band--dawn { background: linear-gradient(to bottom, var(--night), #4A3F52 34%, #A69EAD 66%, var(--m0)); }
.band--dusk { height: 24vh; background: linear-gradient(to bottom, var(--m5), var(--night)); }

/* ----------------------------------------------------- 4. iridescence */
.irid-stage {
  height: 100vh; height: 100svh; overflow: clip;
  --ground: var(--m0); --ink-i: var(--ink);
  background: var(--ground); color: var(--ink-i);
  transition: color 600ms var(--sc-ease-out);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "word photo" "plate photo";
  column-gap: clamp(2rem, 5vw, 6rem);
  padding: calc(var(--bar-h) + 4vh) var(--sc-gutter) 6vh;
}
/* Light across a pearl: a broad soft band that crosses the ground at each
   change of mood. It sits under the photographs and the type. */
.irid__sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 30%, rgb(255 255 255 / 0.26) 44%, rgb(232 220 246 / 0.22) 50%, rgb(214 236 230 / 0.16) 56%, transparent 70%);
  background-size: 260% 100%;
  background-position: var(--sx, 120%) 0;
  opacity: var(--so, 0);
  mix-blend-mode: soft-light;
}
.irid__words { grid-area: word; position: relative; z-index: 1; align-self: center; min-height: 1.2em; font-size: clamp(4.2rem, 1.6rem + 7.4vw, 10rem); }
.irid__word {
  position: absolute; left: 0; top: 50%; margin: 0;
  font-size: 1em; font-weight: 240; line-height: 1; letter-spacing: -0.055em;
  transform: translate3d(0, -50%, 0);
  opacity: 0;
  will-change: opacity, transform;
}
.irid__photos {
  grid-area: photo; position: relative; z-index: 1; align-self: center; justify-self: end;
  list-style: none; margin: 0; padding: 0;
  width: min(100%, 64svh); aspect-ratio: 1;
}
.irid__photos li { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.irid__photos figure { margin: 0; height: 100%; }
.irid__photos picture, .irid__photos img { display: block; width: 100%; height: 100%; }
.irid__photos img { object-fit: cover; border-radius: var(--r-obj); box-shadow: 0 2px 4px rgb(20 12 24 / 0.12), 0 40px 80px -36px rgb(20 12 24 / 0.55); }
.irid__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.irid__plate { grid-area: plate; position: relative; z-index: 1; align-self: end; width: min(30rem, 100%); padding: 20px 24px 22px; }
.irid__lede { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--plate-soft); max-width: 40ch; }
.chips { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.chips li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chips .chip { display: block; height: 16px; border-radius: 1px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(42 31 45 / 0.12); }
.chips li::after { content: ""; display: block; height: 2px; margin-top: 1px; background: var(--orchid); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-dream); }
.chips li.is-on::after { transform: none; }
.chips__n { font-size: 0.64rem; font-weight: 450; letter-spacing: 0.02em; color: var(--plate-ink); overflow: hidden; text-overflow: ellipsis; }
.chips__h { font-size: 0.6rem; font-variant-numeric: tabular-nums; color: var(--plate-soft); letter-spacing: 0.02em; }

/* ------------------------------------------------- 5. lustrous materials */
.lustre-stage { height: 100vh; height: 100svh; display: flex; align-items: center; overflow: clip; }
.lustre-stage { --lead-w: min(26rem, 74vw); --rail-gap: clamp(3.5rem, 7vw, 8rem); }
.lustre__lead {
  position: absolute; z-index: 1; left: var(--sc-gutter); top: calc(50% + var(--bar-h) / 2);
  width: var(--lead-w);
  transform: translate3d(var(--lx, 0px), -50%, 0);
}
.rail { align-items: center; gap: var(--rail-gap); padding: calc(var(--bar-h) + 1vh) var(--sc-gutter) 0 calc(var(--sc-gutter) + var(--lead-w) + var(--rail-gap)); }
.rail > * { flex: 0 0 auto; }
.kind { --ah: min(48svh, 440px); display: flex; flex-direction: column; gap: 1.1rem; }
.kind__name {
  margin: 0; padding-bottom: 0.8rem; border-bottom: 1px solid var(--sc-hairline-strong);
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); font-weight: 270; letter-spacing: -0.025em; line-height: 1.1;
}
.kind__row { display: flex; align-items: flex-start; gap: clamp(0.7rem, 1.2vw, 1.2rem); }
.art { margin: 0; will-change: opacity, transform; }
.art img { display: block; height: var(--ah); width: auto; max-width: none; border-radius: var(--r-obj); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 26px 50px -26px rgb(0 0 0 / 0.8); }
.art figcaption { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.art__who { font-size: 0.9rem; font-weight: 400; color: var(--sc-ink); letter-spacing: 0.005em; }
.art__mat { font-size: 0.74rem; color: var(--sc-ink-soft); }

/* --------------------------------------------------- 6. pattern ideation */
.ideation { padding-block: calc(var(--fade) + clamp(3rem, 6vw, 5rem)) clamp(5rem, 9vw, 8rem); }
.ideation__head { max-width: 46rem; }
.ideation__photo { margin-top: clamp(2.6rem, 5vw, 4rem); }
.ideation__photo figcaption a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .ideation__photo figcaption a:hover { color: var(--orchid); } }

/* ----------------------------------------------------------- 7. patterns */
.patterns { --fade: 14vh; padding-block: calc(var(--fade) + clamp(2rem, 4vw, 3rem)) clamp(5rem, 9vw, 8rem); }
.pset + .pset { margin-top: clamp(4.5rem, 9vw, 8rem); }
.pset__name { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.7rem); font-weight: 270; letter-spacing: -0.03em; line-height: 1.08; max-width: 22ch; }
.pset__head .body { margin-top: 0.7rem; }
.pset__row { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: clamp(0.9rem, 2vw, 1.8rem); }
.pset__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pset__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pset__row li { will-change: transform; }
.pset__row figure { margin: 0; }
.pset__row img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-obj); }
.pset__row--3 img { background: #fff; box-shadow: 0 0 0 1px rgb(42 31 45 / 0.07), var(--shadow-obj); }
.pset__row--4 img { box-shadow: var(--shadow-obj); }

/* ------------------------------------------- 8. colour and material palette */
.tray-act { --fade: 14vh; padding-block: calc(var(--fade) + clamp(2rem, 4vw, 3rem)) clamp(5.5rem, 10vw, 9rem); }
.tray-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.2rem, 4.5vw, 3.6rem); }
.tray-head { max-width: 46rem; }
.tray-wrap { position: relative; }
/* The tray is cut out of the board's white margin, so it rests on the page on
   a soft, fuzzy shadow. */
.tray__shadow {
  position: absolute; left: 4%; right: 4%; top: 10%; bottom: -2%;
  background: rgb(46 30 52 / 0.5);
  border-radius: 6%;
  filter: blur(36px);
  transform: translateY(3%);
}
.tray { position: relative; aspect-ratio: 2000 / 1312; border-radius: 5px; overflow: hidden; }
.tray picture, .tray img { display: block; width: 100%; height: 100%; }
.mark {
  position: absolute; pointer-events: none;
  left: calc(var(--l) * 1%); top: calc(var(--t) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.95), 0 0 0 200vmax rgb(29 23 34 / 0.38);
  opacity: 0;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.mark--round { border-radius: 50%; }
.mark.is-hot { opacity: 1; }
.tray-legend {
  list-style: none; padding: 0; margin: clamp(0.4rem, 1vw, 0.9rem) 0 0;
  columns: 4; column-gap: clamp(1.5rem, 3vw, 3rem);
  font-size: 0.92rem; line-height: 1.45;
}
.tray-legend li {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 2px;
  break-inside: avoid;
  padding: 0.6rem 0 0.7rem; border-top: 1px solid var(--sc-hairline-strong);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.tray-legend .no { font-variant-numeric: tabular-nums; color: var(--orchid); font-size: 0.78rem; letter-spacing: 0.04em; padding-top: 0.12em; }
@media (hover: hover) and (pointer: fine) { .tray-legend li:hover { color: var(--orchid); } }
@media (max-width: 1100px) { .tray-legend { columns: 3; } }

/* ----------------------------------------------------- 9. application */
.application { --fade: 14vh; padding-block: calc(var(--fade) + clamp(2rem, 4vw, 3rem)) clamp(6rem, 11vw, 10rem); }
.application__head { max-width: 46rem; }
.app-fig { margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.app-fig__open { display: block; border-radius: var(--r-obj); cursor: zoom-in; }
.app-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-obj); box-shadow: var(--shadow-obj); }
.app-cap { margin: 1rem 0 0; max-width: 62ch; font-size: 0.86rem; line-height: 1.55; color: var(--sc-ink-soft); }
.app-cap .label, .app-fig figcaption .label { margin-right: 0.7em; }
.app-cap__by { display: inline-block; margin-left: 0.6em; color: var(--ink); font-weight: 450; }

/* ------------------------------------------------------------ 10. credits */
.close-stage {
  height: 100vh; height: 100svh; overflow: clip;
  background: var(--white);
  --k: 1;                                   /* 1 framed print .. 0 full bleed */
  --it: calc(var(--bar-h) + 3vh); --ix: 9vw; --ib: 12vh;
}
.close__frame {
  position: absolute; inset: 0;
  clip-path: inset(calc(var(--k) * var(--it)) calc(var(--k) * var(--ix)) calc(var(--k) * var(--ib)) calc(var(--k) * var(--ix)) round calc(var(--k) * 2px));
}
.close__frame picture, .close__img { display: block; width: 100%; height: 100%; }
.close__img { object-fit: cover; object-position: 50% 55%; transform: scale(calc(1.06 - var(--k) * 0.06)); will-change: transform; }
.close__ai { right: calc(var(--k) * var(--ix) + var(--sc-gutter)); bottom: calc(var(--k) * var(--ib) + 16px); }
.close__aiscrim { right: calc(var(--k) * var(--ix) + var(--sc-gutter) - 100px); bottom: calc(var(--k) * var(--ib) - 19px); }
.credits {
  position: absolute; z-index: 6;
  left: var(--sc-gutter); bottom: clamp(18px, 6vh, 60px);
  width: min(30rem, 40vw);
  opacity: 0;
}
.credits:focus-within { opacity: 1 !important; transform: none !important; }
/* Credits only: the list opens the card, and a hairline sets off the note. */
.credits__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.4rem; margin: 0; }
.credits__list dt { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--plate-soft); }
.credits__list dd { margin: 0.2rem 0 0; font-weight: 400; font-size: 0.92rem; }
.credits__small { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgb(42 31 45 / 0.14); font-size: 0.72rem; line-height: 1.5; color: var(--plate-soft); }

/* --------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  :root { --bar-h: 56px; --fade: 16vh; }
  .bar { padding: 10px var(--sc-gutter); }

  /* The print is taller than wide on a phone, with the plate beneath it. */
  .hero-stage { --it: calc(var(--bar-h) + 6px); --ix: var(--sc-gutter); --ib: 47svh; }
  .hero__img { object-position: 54% 60%; }
  .hero__plate { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: 22px; padding: 20px 20px 18px; }
  .plate__title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .plate__sub { font-size: 0.95rem; }
  .ai-tag { font-size: 0.62rem; }

  .brief__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }

  .sgrid { --gap: 0.6rem; }
  .sgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgrid figcaption { font-size: 0.76rem; }

  .irid-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "word" "photo" "plate";
    row-gap: 2.2svh;
    padding: calc(var(--bar-h) + 1.5svh) var(--sc-gutter) 2.5svh;
  }
  .irid__words { font-size: clamp(3.4rem, 17vw, 5rem); min-height: 1.05em; align-self: start; }
  .irid__photos { justify-self: center; width: min(100%, 40svh); }
  .irid__plate { width: 100%; padding: 14px 16px 16px; }
  .irid__lede { font-size: 0.8rem; margin-top: 0.4rem; }
  .chips { gap: 4px; margin-top: 0.7rem; }
  .chips__h { display: none; }
  .chips__n { font-size: 0.58rem; }

  /* On a phone the intro holds still above the moving wall. */
  .lustre-stage { flex-direction: column; justify-content: center; align-items: stretch; }
  .lustre__lead { position: static; width: auto; transform: none; padding: calc(var(--bar-h) + 1svh) var(--sc-gutter) 0; }
  .lustre__lead .h2 { font-size: 2rem; }
  .lustre__lead .body { font-size: 0.9rem; margin-top: 0.6rem; }
  .kind { --ah: min(38svh, 330px); }
  .rail { gap: 3rem; padding: 3svh var(--sc-gutter) 0; }

  .pset__row--4 { grid-template-columns: 1fr 1fr; }
  .pset__row--3 { gap: 0.6rem; }

  .tray-legend { columns: 2; column-gap: 1.2rem; font-size: 0.8rem; }
  .tray-legend li { padding: 0.42rem 0; grid-template-columns: 2.1em 1fr; }


  .close-stage { --it: calc(var(--bar-h) + 6px); --ix: var(--sc-gutter); --ib: 30svh; }
  .credits { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: 52px; padding: 20px 20px 18px; }
  .credits__list { gap: 0.55rem 1rem; }
  .credits__list dd { font-size: 0.84rem; }
  .credits__small { font-size: 0.68rem; }
}
@media (max-width: 520px) {
  .keys { font-size: 0.62rem; }
}

/* --------------------------------------------------------- reduced motion
   A calm, still page: no pinning, every scene shown at rest. The hero is the
   full-bleed night render; the iridescence act becomes six panels, each on its
   own sampled ground; the credits sit on the day render. */
@media (prefers-reduced-motion: reduce) {
  .sc-act--pinned { height: auto !important; }
  .sc-act--pinned > .sc-stage { position: relative; height: auto; min-height: 100svh; }
  .hero-stage { --k: 0; }
  .close-stage { --k: 0; }
  .credits { opacity: 1; }
  .index, .bar__index, .skip, .mark, .chips li::after { transition: none; }
  [data-sc-in], [data-sc-stagger] > * { transition-duration: 220ms; }

  .irid-stage {
    display: block; min-height: 0; height: auto !important;
    padding: calc(var(--bar-h) + 4rem) var(--sc-gutter) 4rem;
    background: linear-gradient(to bottom, var(--m0), var(--m2) 30%, var(--m3) 50%, var(--m5));
    color: var(--ink);
  }
  .irid__sheen, .irid__words { display: none; }
  .irid__plate { width: min(36rem, 100%); }
  .irid__photos {
    width: 100%; aspect-ratio: auto; margin-top: 2.5rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.6rem);
  }
  .irid__photos li { position: static; opacity: 1; }
  .irid__photos figure { height: auto; background: var(--paper); padding: 8px 8px 12px; border-radius: 3px; box-shadow: 0 20px 40px -26px rgb(20 12 24 / 0.6); }
  .irid__photos picture, .irid__photos img { height: auto; aspect-ratio: 1; }
  .irid__name {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    display: block; margin: 0.6rem 0 0 2px; font-size: 1.15rem; font-weight: 300; letter-spacing: -0.02em; color: var(--ink);
  }
  .chips li::after { transform: none; background: transparent; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .irid__photos { grid-template-columns: 1fr 1fr; }
}