/*
  Layout is measured from the Figma file (1440 × 1024 desktop frame).
  --u is one Figma pixel scaled to the current viewport width, so the
  wireframe keeps the same proportions on any desktop size.

  --p (0 → 1) is the scroll progress of the header collapse, set by script.js.
  --a (0 → 1) is per card: 1 = the expanded (hovered) project.
*/

/* ABC Monument Grotesk (Edu license, Dinamo) — web files only */
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("assets/fonts/ABC%20Monument%20Grotesk%20Edu/ABCMonumentGroteskEdu-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("assets/fonts/ABC%20Monument%20Grotesk%20Edu/ABCMonumentGroteskEdu-RegularItalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("assets/fonts/ABC%20Monument%20Grotesk%20Edu/ABCMonumentGroteskEdu-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("assets/fonts/ABC%20Monument%20Grotesk%20Edu/ABCMonumentGroteskEdu-MediumItalic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("assets/fonts/ABC%20Monument%20Grotesk%20Edu/ABCMonumentGroteskEdu-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("assets/fonts/ABC%20Monument%20Grotesk%20Edu/ABCMonumentGroteskEdu-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* --even (0 → 1) is on .projects: 1 = no project open, so all five share the width equally */
@property --even {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --a {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --u: calc(100vw / 1440);
  --p: 0;

  --ink: #3d3d3d;      /* all text */
  --paper: #fff;
  --rule: #3d3d3d;     /* header line */
  --media: #d9d9d9;   /* image / video placeholder */
  --text-box: #f2f2f2; /* text placeholder */
  --guide: red;

  --font: "ABC Monument Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Figma measurements: start (p = 0) → collapsed header (p = 1) */
  --margin: calc(15 * var(--u));                        /* page side margin (was 30 in Figma) */
  --gap: calc((10 - 5 * var(--p)) * var(--u));          /* 10 → 5   */
  --card-min: calc((155 - 95 * var(--p)) * var(--u));   /* 155 → 60 */
  --media-open: 0.656;                                  /* 323/492 and 621/947 */
  --media-closed: calc(0.656 - 0.472 * var(--p));       /* 0.656 → 0.184 */

  --ease: cubic-bezier(0.65, 0, 0.35, 1);

  /* Smallest card text (narrow cards): 8px at the top → 3pt once scrolled, with 4pt line spacing */
  --text-min: calc(8px - 4px * var(--p));        /* 8px → 3pt (4px) */
  --lh-min: calc(var(--text-min) * 1.3333);      /* → 4pt (5.333px) at 3pt */
  --dur: 0.7s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- scroll + sticky stage ---------- */

.scroller {
  /* script.js sets --collapse-distance: the scroll it takes to shrink the header */
  height: calc(100vh + var(--collapse-distance, 455px));
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* ---------- header ---------- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-h, 523px);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}

.statement {
  position: absolute;
  left: calc(var(--margin) + 2 * var(--u));
  top: var(--statement-top, 283px);
  width: calc(853 * var(--u));
  margin: 0;
  font-size: calc((64 - 34 * var(--p)) * var(--u));     /* 64 → 30 */
  line-height: 1.094;                                   /* 70 / 64 */
  font-weight: 400;
}

.statement .rest {
  opacity: clamp(0, 1 - var(--p) * 2.2, 1);
}

/* The bunny is taller than a line of text, so it sits in a zero-height slot
   that only reserves its width, and is drawn over the text. Line spacing
   stays even across all three lines. */
.bunny-slot {
  display: inline-block;
  position: relative;
  width: 2.815em;          /* width of the drawn bunny */
  height: 0;               /* adds nothing to the line height */
  margin: 0 -0.2em 0 0.078125em; /* at 64px text: 5px after "research"; "enthusiast" pulled in 16px */
}

/* bunny_hop.mp4 (1074 × 486) has white space around the drawing (drawing ≈ x 40–1032, y 62–445).
   Sized so the drawing is 1.085em tall (79% of the original 1.37em),
   vertically centered where the old SVG sat. */
.bunny {
  position: absolute;
  display: block;
  left: -0.113em;          /* 40px of white space on the left */
  bottom: -0.393em;        /* drawing bottom 0.28em below the baseline, plus 41px of white space */
  height: 1.376em;         /* 486 / 383 × 1.085em */
  aspect-ratio: 1074 / 486;
}

.bunny__video {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply; /* white video background disappears into the page */
  opacity: 0.75;
  pointer-events: none;    /* not clickable, no play / pause */
}

.bunny__video::-webkit-media-controls,
.bunny__video::-webkit-media-controls-start-playback-button { display: none !important; }

/* Invisible hover areas, in % of the video frame (1074 × 486), measured from the animation */
.bunny__hit { position: absolute; }
.bunny__hit--rabbit { left: 3.63%; top: 8.64%; width: 67.13%; height: 83.33%; }   /* x 39–760, y 42–447 */
.bunny__hit--hole   { left: 70.95%; top: 61.73%; width: 25.14%; height: 29.63%; } /* x 762–1032, y 300–444 */

/* Hover label (rabbit, hole, "Enya", "Pan"), positioned at the cursor by script.js */
.hover-label {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  padding: 1px 5px;
  font-family: var(--font);
  font-size: 9pt;
  line-height: 1.3;
  border: 1px solid;
  white-space: pre;        /* keeps line breaks in data-label */
  pointer-events: none;
  visibility: hidden;
}

.hover-label--gray  { color: #767885; background: #e9eaf0; border-color: #767885; } /* rabbit, hole */
.hover-label--green  { color: #5e9900; background: #d8f184; border-color: #5e9900; line-height: 9pt; padding-block: 2px; } /* "Enya" (+1px top/bottom) */
.hover-label--blue-stacked { color: #0062ff; background: #d8e7ff; border-color: #0062ff; line-height: 9pt; padding-block: 2px; } /* "designer" */
.hover-label--purple { color: #c107ff; background: #faebff; border-color: #c107ff; line-height: 9pt; padding-block: 2px; } /* "Pan" (+1px top/bottom) */

.hover-label.is-visible { visibility: visible; }

/* ---------- cursor ----------
   The usual cursor, except over a project's cover (and the Archive film), where big purple text
   takes its place (.text-cursor, placed by script.js; Figma frame "cursor-hover"). */
@media (hover: hover) and (pointer: fine) {
  body.has-text-cursor, body.has-text-cursor * { cursor: none !important; }
}

.text-cursor {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  font-family: var(--font);
  font-size: 40px;
  line-height: 30px;
  color: #c107ff;
  white-space: pre;
  pointer-events: none;
  visibility: hidden;
}
body.has-text-cursor .text-cursor { visibility: visible; }
.text-cursor[data-kind="play"],
.text-cursor[data-kind="pause"] { color: #e1f1ab; }
.text-cursor[data-kind="click"] { color: #0062ff; }

/* Figma: 14px links centred at x 1211.5 / 1288 / 1367; the current page is 20px. The boxes touch
   (1173.5 → 1407.5), each centred on its link. All three sit on one baseline; the row is centred
   on the middle of "Enya Pan" in the scrolled-down Work header (y 33.5), and sits there on every page. */
.nav {
  position: absolute;
  top: calc(33.5 * var(--u));
  right: calc(32.5 * var(--u));
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  font-size: max(12px, calc(14 * var(--u)));
}

.nav a { text-align: center; line-height: normal; }
.nav__work    { width: calc(76 * var(--u)); }
.nav__archive { width: calc(77 * var(--u)); }
.nav__about   { width: calc(81 * var(--u)); }

.nav a[aria-current="page"] { font-size: max(16px, calc(20 * var(--u))); }

/* ---------- projects (accordion) ---------- */

.projects {
  position: absolute;
  top: var(--header-h, 523px);
  bottom: calc(10 * var(--u));
  left: var(--margin);
  right: var(--margin);
  display: flex;
  gap: var(--gap);
  --even: 0;
  transition: --even var(--dur) var(--ease);
}

.projects.is-even { --even: 1; }

.card {
  --a: 0;
  flex: calc(var(--a) + var(--even)) 0 var(--card-min);
  min-width: 0;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  transition: --a var(--dur) var(--ease);
  outline-offset: 4px;

  /* Height of the main image (thumbnail):
     - narrow card: a share of the card's height (--media-closed), +30px at the top of the page
       so it matches the open card's thumbnail
     - open card at the top of the page: 65.6% of the card's height (Figma top frame) + 30px
     - open card once scrolled: locked to the Figma shape 1150 × 621 (54cqi = 54% of the card's width),
       so the thumbnail is never cropped, whatever the window's proportions
       (a project can set its own shape with --open-media, e.g. Machine Orthography's side-by-side pair) */
  --media-h: calc(
    (1 - var(--a)) * (var(--media-closed) * 100% + (1 - var(--p)) * 30px)
    + var(--a) * ((1 - var(--p)) * (var(--media-open) * 100% + 30px) + var(--p) * var(--open-media, 54cqi))
  );

  /* each card scrolls on its own, but only once the header has collapsed */
  overflow-y: hidden;
  scrollbar-width: none;
}

.card::-webkit-scrollbar { display: none; }

body.is-collapsed .card { overflow-y: auto; }

.card.is-open { --a: 1; }

.card__media {
  flex: none;
  height: var(--media-h);
  background: var(--media);
  overflow: hidden;
  position: relative;
}

.card__media img,
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two images side by side as the thumbnail (Archive: Machine Orthography) */
.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.435cqi;              /* 5px at 1150 */
  height: 100%;
}

/* Samsung thumbnail (Figma "samsung" frame): the video sits on the frame's pale background,
   877 × 659 at x 137, y -50 of the 1150 × 621 cover. That cover fills the box like object-fit: cover,
   so k = the larger of width / 1150 and height / 621. */
.card__media:has(.media--samsung) { background: #f3f4fa; }
.card__media .media--samsung {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: max(57.304cqi, 106.12%);   /* 659k */
  aspect-ratio: 1460 / 1096;
  transform: translate(-50%, -54.7%);  /* top = cover centre − (310.5 + 50)k */
  object-fit: fill;
}

.card__media .placeholder-label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: clamp(var(--text-min), 7.1cqi, 11px);
  color: #8a8a8a;
  white-space: nowrap;
}

.card__info {
  /* fills the rest of the visible card; extra content scrolls in below */
  flex: none;
  height: max(0px, calc(100% - var(--media-h) - 15 * var(--u)));
  margin-top: calc(15 * var(--u));
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(12 * var(--u));
  overflow: hidden;
  transition: opacity 0.3s;
}

/* Text placeholders: light gray boxes, as in the Figma draft */
.text-box {
  background: var(--text-box);
  padding: clamp(3px, 6.5cqi, 10px);
  min-width: 0;
  overflow: hidden;
  hyphens: none;           /* words wrap whole, never split or hyphenated */
  font-size: clamp(var(--text-min), 8.4cqi, 13px);
  line-height: clamp(var(--lh-min), 11.32cqi, 17.55px);  /* 1.35 × 13 */
}

.text-box h2 {
  margin: 0 0 6px;
  font-size: clamp(var(--text-min), 11cqi, 17px);
  font-weight: 400;
  line-height: clamp(var(--lh-min), 12.06cqi, 18.7px);   /* 1.1 × 17 */
}

.text-box p { margin: 0; }
.text-box .label { color: #8a8a8a; font-size: clamp(var(--text-min), 7.1cqi, 11px); line-height: clamp(var(--lh-min), 9.58cqi, 14.85px); margin-bottom: 4px; }

/* Only the summary box shows while a card is narrow */
.text-box--meta { display: none; }

/* Expanded card at the starting header: summary sits in the left ~72% (491 / 680) */
@container (min-width: 420px) {
  .card__info { grid-template-columns: 491fr 189fr; }
}

/* Expanded card once the header has collapsed: three boxes (640 / 225 / 225) */
@container (min-width: 900px) {
  .card__info { grid-template-columns: 640fr 225fr 225fr; }
  .text-box--meta { display: block; }
}

/* ---------- scrollable project content (lorem placeholders for now) ---------- */

.card__more {
  flex: none;
  display: grid;
  gap: calc(12 * var(--u));
  margin-top: calc(12 * var(--u));
  padding-bottom: calc(12 * var(--u));
  transition: opacity 0.3s;
}

.card__more .text-box p + p { margin-top: 0.8em; }

.more__media {
  background: var(--media);
  aspect-ratio: 16 / 9;
  position: relative;
}

.more__media--tall { aspect-ratio: 4 / 5; }

.more__media .placeholder-label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: clamp(var(--text-min), 7.1cqi, 11px);
  color: #8a8a8a;
  white-space: nowrap;
}

.more__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(12 * var(--u));
}

@container (min-width: 420px) {
  .more__row { grid-template-columns: 1fr 1fr; }
}

/* ---------- project with real content (in-case-of-loss) ----------
   Measured from the Figma frame "in-case-of-loss" (1150px wide = the open card on the scrolled page).
   Sizes scale with the card's width (cqi = 1% of it), never below 8px. */

.card--case .card__info.case {
  display: flex;
  flex-direction: column;
  height: auto;                         /* text flows on; the card scrolls */
  overflow: visible;
  margin-top: clamp(4px, 2.17cqi, 25px);
  gap: clamp(3px, 2.087cqi, 24px);
}

.case__overview,
.case__text {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3px, 2.087cqi, 24px);
  padding-inline: 1.739cqi;             /* 20px left / right at 1150 (images stay full width) */
}

@container (min-width: 700px) {
  /* inside the 20px padding: title 702 | Timeline 130 (starts at 722) | Scope 278 (starts at 852) */
  .case__overview { grid-template-columns: 702fr 130fr 278fr; gap: 0; align-items: end; }
  /* statement 648 (+54 space) | RISD DP 403 starting at 722, lined up with Timeline (+5 space) */
  .case__text     { grid-template-columns: 702fr 408fr; gap: 0; }
  .case__statement { padding-right: 4.696cqi; }
  .case__context   { padding-right: 0.435cqi; }
}

/* Archive: the text under the title, in columns (widths, gaps and the space down to the images
   in Figma px, --s = 1px at 1150) */
.case__notes {
  --s: 0.08696cqi;
  display: grid;
  gap: calc(4 * var(--s));
  padding-inline: 1.739cqi;
  margin-bottom: calc((var(--after) - 24) * var(--s));   /* the images already sit 24 below */
}
.case__notes-cols { display: flex; align-items: flex-start; gap: calc(var(--gap) * var(--s)); }
.case__note {
  flex: none;
  width: calc(var(--w) * var(--s));
  display: grid;
  gap: calc(4 * var(--s));
}
.case__note[style*="--before"] { margin-left: calc((var(--before) - var(--gap)) * var(--s)); }
.case__link { text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }

body:not(.is-collapsed) .card--case .case__notes,
.card:not(.is-open) .case__notes { display: none; }

/* Archive: the timeline sits at the right, from x 988 */
@container (min-width: 700px) {
  .page-archive .card .case__overview { grid-template-columns: 968fr 142fr; align-items: start; }
}

/* Archive covers placed like their Figma crop, in the open card */
.card.is-open .card__media img.media--crop {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  transform-origin: 0 0;
  transform: rotate(var(--r));
  object-fit: fill;
}

/* "RISD GRAPHIC DESIGN DEGREE PROJECT" sits just above the title (Figma: -4px gap) */
.case__heading .case__label { margin: 0 0 calc(-1 * clamp(1px, 0.348cqi, 4px)); }

.case__title {
  margin: 0;
  /* top of page: 16pt / 24px open, 14pt / 20px narrow → scrolled: Figma 26px, shrinking with the card */
  font-size: calc((1 - var(--p)) * (18.667px + var(--a) * 2.667px) + var(--p) * clamp(var(--text-min), 2.261cqi, 26px));
  line-height: calc((1 - var(--p)) * (20px + var(--a) * 4px) + var(--p) * clamp(var(--lh-min), 2.783cqi, 32px));
  font-weight: 400;
}

.case__label {
  margin: 0 0 clamp(1px, 0.35cqi, 4px);
  /* top of page: 12px open (same as the full project view) / 6px narrow → scrolled: Figma 12px, shrinking with the card */
  font-size: calc((1 - var(--p)) * 6px * (1 + var(--a)) + var(--p) * clamp(var(--text-min), 1.043cqi, 12px));
  line-height: calc((1 - var(--p)) * 10px * (1 + var(--a)) + var(--p) * clamp(var(--lh-min), 1.739cqi, 20px));
  text-transform: uppercase;
}

.case__value {
  margin: 0;
  /* top of page: 12pt / 22.333px open, 7pt narrow → scrolled: Figma 16px, shrinking with the card */
  font-size: calc((1 - var(--p)) * (9.333px + var(--a) * 6.667px) + var(--p) * clamp(var(--text-min), 1.391cqi, 16px));
  line-height: calc((1 - var(--p)) * (11.667px + var(--a) * 10.667px) + var(--p) * clamp(var(--lh-min), 1.739cqi, 20px));
}

/* Top of the page: only the name, timeline and scope. The statement, DP text and images
   appear once the header has collapsed into the full project view. */
body:not(.is-collapsed) .card--case .case__text,
body:not(.is-collapsed) .card--case .case__assets,
body:not(.is-collapsed) .card--case .dx,
body:not(.is-collapsed) .card--case .sx { display: none; }

/* Top of the page: name, timeline and scope line up along their top edge */
body:not(.is-collapsed) .card--case .case__overview { align-items: start; }

/* "What is loss if not an absence?" — home page (top) view only.
   Open: same as the artist statement body (14px / 20px). Narrow: 8pt (10.667px). */
.case__tagline {
  margin: 0;
  font-size: calc(10.667px + var(--a) * 3.333px);
  line-height: calc(15.238px + var(--a) * 4.762px);
}

body.is-collapsed .case__tagline { display: none; }
.card:not(.is-open) .case__tagline { display: none; } /* only on the hovered project */

/* open card: tagline sits under the title, in the title's column */
@container (min-width: 700px) {
  .case__heading { grid-column: 1; grid-row: 1; }
  .case__tagline { grid-column: 1; grid-row: 2; margin-top: 8px; }
  body:not(.is-collapsed) .card--case .case__meta { grid-row: 1 / span 2; } /* so the title's row is only as tall as the title */
}

/* Narrow card at the top of the page:
   title, the tagline 5px below it, then timeline and scope 10px below that */
@container (max-width: 699px) {
  body:not(.is-collapsed) .card--case .case__overview {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  body:not(.is-collapsed) .card--case .case__heading { order: 1; }
  body:not(.is-collapsed) .card--case .case__tagline { order: 2; margin-top: 5px; }
  body:not(.is-collapsed) .card--case .case__meta { order: 3; }
  body:not(.is-collapsed) .card--case .case__heading + .case__meta { margin-top: 10px; }
  body:not(.is-collapsed) .card--case .case__meta + .case__meta { margin-top: 8px; }
}

.case__body {
  margin: 0;
  font-size: clamp(var(--text-min), 1.217cqi, 14px);
  line-height: clamp(var(--lh-min), 1.739cqi, 20px);
  hyphens: none;           /* words wrap whole, never split or hyphenated */
}

.case__body + .case__body { margin-top: clamp(var(--lh-min), 1.739cqi, 20px); } /* one blank line between paragraphs */

/* Text + image collage layout (mkwrl): 20 | text 545 | 40 | collage 531 | 14 empty.
   Collage: two stacked images (241 wide, 10 apart) and a tall image (267), 16 apart, bottom-aligned,
   sitting 83px lower than the text's top edge. */
@container (min-width: 700px) {
  .case--collage .case__text { grid-template-columns: 545fr 531fr; gap: 3.478cqi; padding-right: 1.217cqi; } /* 20 | 545 | 40 | 531 | 14 */
  .case--collage .case__statement { padding-right: 0; }
  .case--collage .case__collage { padding-top: 7.217cqi; }
}

.case__collage {
  display: flex;
  align-items: flex-end;
  gap: 3.013%;                          /* 16 / 531 */
}

.case__collage-stack {
  display: flex;
  flex-direction: column;
  gap: 0.87cqi;                         /* 10px at 1150 */
  width: 45.39%;                        /* 241 / 531 */
}

.case__collage-stack .case__collage-img { aspect-ratio: 241 / 141; }

.case__collage > .case__collage-img {
  width: 50.28%;                        /* 267 / 531 */
  aspect-ratio: 267 / 338;
}

.case__collage-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--media);
  pointer-events: none;
}

/* extra space after the artist statement, before the assets (50px at 1150 wide) */
.case__text { margin-bottom: clamp(4px, 4.348cqi, 50px); }

/* "assets go here": 01 → 20, stacked with no gap */
.case__assets {
  display: flex;
  flex-direction: column;
  margin-top: clamp(3px, 2.087cqi, 24px);
  padding-bottom: calc(12 * var(--u));
}

.case__asset {
  display: block;
  width: 100%;
  height: auto;                         /* width / height attributes keep the aspect ratio */
  background: var(--media);             /* gray until the file loads */
  pointer-events: none;
}

/* Buttons in a project (Archive): same look as the header's "Scroll to view" */
.case__cue {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  background: none;
  color: #3d3d3d;
  font: inherit;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  cursor: pointer;
}

.case__cue svg { flex: none; }

/* "Scroll to view": next to the title, 16px after it */
.case__title-row { display: flex; align-items: center; gap: calc(16 * 0.08696cqi); }
.card:not(.is-open) .case__scroll,
body:not(.is-collapsed) .case__scroll { display: none; }   /* the film shows only once scrolled down */

/* A video the viewer plays: Mute above its right corner, and the cursor reads "Play" over it */
.case__player { position: relative; }

.case__player-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 1.739cqi 8px 0;  /* above the film, 20px in from its right edge (Figma) */
}

/* A video still loading: its tiny poster frame, blurred (see "blurred preview" in script.js).
   clip-path keeps the blur inside the video's box. */
video, img { transition: filter 0.4s; }
video.is-preview,
img.is-preview {
  filter: blur(16px);
  clip-path: inset(0);
}
img.is-preview { background: center / cover no-repeat; } /* the tiny copy (set in script.js) */

/* ---------- project with its own layout (dx-app) ----------
   Measured from the Figma frame "dx-app" (1150 wide). --s is 1px at 1150 and scales with the card;
   text never goes below --text-min / --lh-min and never above its Figma size. */

.case--body { --s: 0.08696cqi; }
.card--case .case--body {
  gap: calc(28 * var(--s));             /* bottom of the 2-line Scope → Context (40 below the title) */
}

@container (min-width: 700px) {
  /* inside the 20px padding: title 625 | Timeline 141 (starts at 645) | Scope 344 (starts at 786) */
  .case--body .case__overview { grid-template-columns: 625fr 141fr 344fr; }
  body.is-collapsed .case--body .case__overview { align-items: start; }
}

/* Project 1's password box, until it's unlocked */
.dx-lock {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
}
.dx-lock__row { display: flex; align-items: center; gap: calc(8 * var(--s)); margin-top: calc(8 * var(--s)); }
.dx-lock__input {
  font: inherit;
  color: #3d3d3d;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  padding: calc(6 * var(--s)) calc(10 * var(--s));
}
.dx-lock__field { position: relative; display: flex; }
.dx-lock__input { width: calc(260 * var(--s)); min-width: 0; background: none; padding-right: calc(10 * var(--s) + 24px); }
/* eye icon inside the field: open = password hidden (click to show), closed = shown */
.dx-lock__eye {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(10 * var(--s) + 22px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #3d3d3d;
  cursor: pointer;
}
.dx-lock__eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.dx-lock__eye[aria-pressed="false"] .dx-lock__eye-closed,
.dx-lock__eye[aria-pressed="true"] .dx-lock__eye-open { display: none; }
.dx-lock__input:focus { outline: 2px solid #0062ff; outline-offset: 1px; }
/* same look as the "Scroll to view" button in the header */
.dx-lock__button {
  flex: none;
  padding: 0 5px;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  background: none;
  color: #3d3d3d;
  font: inherit;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  cursor: pointer;
}
.dx-lock__button:disabled { opacity: 0.5; cursor: progress; }
.dx-lock__error { color: #e5291e; }

.dx {
  --t12: clamp(var(--text-min), calc(12 * var(--s)), 12px);
  --t14: clamp(var(--text-min), calc(14 * var(--s)), 14px);
  --t18: clamp(var(--text-min), calc(18 * var(--s)), 18px);
  --t20: clamp(var(--text-min), calc(20 * var(--s)), 20px);
  --t24: clamp(var(--text-min), calc(24 * var(--s)), 24px);
  --l18: clamp(var(--lh-min), calc(18 * var(--s)), 18px);
  --l20: clamp(var(--lh-min), calc(20 * var(--s)), 20px);
  --l22: clamp(var(--lh-min), calc(22 * var(--s)), 22px);
  --l30: clamp(var(--lh-min), calc(30 * var(--s)), 30px);
  --green: #5e9900;  --green-bg: #e1f1ab;
  --purple: #c107ff; --purple-bg: #faebff;
  --blue: #0062ff;   --blue-bg: #d8e7ff;
  --gray-bg: #e9eaf0;
  --cyan-bg: #ebfbfc;

  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--s));
  padding: 0 calc(20 * var(--s)) calc(66 * var(--s));   /* 66px of space after Takeaways */
  font-size: var(--t14);
  line-height: var(--l20);
  hyphens: none;
  overflow-x: clip;                     /* in a narrow card, words too long for their box are cut, never split */
}

.dx * { min-width: 0; }

:where(.dx) :where(p, h3, ul) { margin: 0; } /* no specificity, so the spacing rules below win */
.dx strong { font-weight: 500; }
.dx .case__label { margin: 0; }

.dx-green  { color: var(--green); }
.dx-purple { color: var(--purple); }
.dx-blue   { color: var(--blue); }

/* label, then text, 4px apart */
.dx-stack { display: flex; flex-direction: column; }
.dx-stack > :where(* + *) { margin-top: calc(4 * var(--s)); }
.dx-wide { max-width: 90.72%; }        /* 1007 / 1110 */

.dx-lead { font-size: var(--t18); line-height: var(--l22); }
.dx-heading { font-size: var(--t24); line-height: var(--l30); font-weight: 400; }
.dx-text p + p, .dx-caption p + p, .dx-after-blank { margin-top: 1lh; } /* one blank line */

/* The Problem (1005 wide), then 40 below: Opportunity (457) | 56 | Goal and Guardrail (492) */
.dx-split {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--s));
  max-width: 90.54%;                    /* 1005 / 1110 */
}
.dx-side {
  display: grid;
  grid-template-columns: minmax(0, 457fr) minmax(0, 492fr);
  column-gap: calc(56 * var(--s));
  align-items: start;
  min-height: calc(199 * var(--s));     /* the Figma row's height */
}
.dx-side__col { display: flex; flex-direction: column; gap: calc(24 * var(--s)); }

.dx-num-box {
  display: flex;
  gap: calc(20 * var(--s));
  padding: calc(10 * var(--s)) calc(16 * var(--s));
  background: var(--gray-bg);
  border-radius: calc(4 * var(--s));
}
.dx-num { flex: none; font-weight: 500; font-size: var(--t20); line-height: var(--l20); color: #767885; }
.dx-num-box .dx-lead + p { margin-top: calc(6 * var(--s)); }

.dx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--s)); width: 68.66%; } /* 690 / 1005 */
.dx-stack > .dx-pair { margin-block: calc(14 * var(--s)) calc(10 * var(--s)); }
.dx-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--s)); }
.dx-stack > .dx-trio { margin-top: calc(14 * var(--s)); }
.dx-arrows { display: flex; justify-content: space-between; padding: calc(4 * var(--s)) calc(150 * var(--s)); } /* Figma: 150 in from each side */
.dx-arrows svg { display: block; width: calc(16 * var(--s)); height: calc(16 * var(--s)); }

.dx-tint {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--s));
  padding: calc(10 * var(--s)) calc(16 * var(--s));
  border-radius: calc(4 * var(--s));
}
.dx-tint--roomy { padding: calc(15 * var(--s)) calc(20 * var(--s)); }
.dx-tint--green  { background: var(--green-bg);  --tint: var(--green); }
.dx-tint--purple { background: var(--purple-bg); --tint: var(--purple); }
.dx-tint--blue   { background: var(--blue-bg);   --tint: var(--blue); }
.dx-tint__title  { font-weight: 500; font-size: var(--t12); line-height: var(--l20); text-transform: uppercase; color: var(--tint); }
.dx-tint__lesson { font-weight: 500; color: var(--tint); }

.dx-outline {
  padding: calc(10 * var(--s)) calc(16 * var(--s));
  border: 1px solid var(--ink);
  border-radius: calc(4 * var(--s));
}

.dx-goal {
  padding: calc(10 * var(--s)) calc(16 * var(--s));
  background: var(--green-bg);
  border-radius: calc(4 * var(--s));
}

.dx-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--s)); }
.dx-stack > .dx-principles { margin-top: calc(16 * var(--s)); }

/* six phones on a pale cyan band */
.dx-strip {
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--s));
  padding: calc(36 * var(--s)) calc(50 * var(--s));
  background: #edfcfd;
}
.dx-stack > .dx-strip { margin-top: calc(10 * var(--s)); }
.dx-strip .dx-phone { width: calc(149 * var(--s)); }

.dx-phone {
  display: block;
  flex: none;
  width: calc(170 * var(--s));
  height: auto;
  aspect-ratio: 1 / 2;
  object-fit: cover;
  pointer-events: none;
}

/* Solution components: text (412) | 122 | phone panel (576) */
.dx-components { display: flex; flex-direction: column; gap: calc(10 * var(--s)); }
.dx-row {
  display: grid;
  grid-template-columns: minmax(0, 412fr) minmax(0, 576fr);
  column-gap: calc(122 * var(--s));
  align-items: start;
}

.dx-panel {
  display: flex;
  gap: calc(30 * var(--s));
  padding: calc(30 * var(--s)) calc(26 * var(--s)) calc(30 * var(--s)) calc(36 * var(--s));
  background: var(--cyan-bg);
  border-radius: calc(4 * var(--s));
}
.dx-panel--roomy { gap: calc(40 * var(--s)); padding-right: calc(38 * var(--s)); }
.dx-panel--half  { gap: calc(40 * var(--s)); padding-right: calc(54 * var(--s)); }

/* captions sit at the bottom of the panel, beside the phone */
.dx-caption {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: var(--t12);
  line-height: var(--l18);
}
.dx-caption--spread { justify-content: space-between; }
.dx-caption--gap p + p { margin-top: calc(40 * var(--s)); }

/* Offer at a glance: text (378) | 46 | table (686) */
.dx-offer {
  display: grid;
  grid-template-columns: minmax(0, 378fr) minmax(0, 686fr);
  column-gap: calc(46 * var(--s));
  align-items: center;
}
.dx-components > .dx-halves { margin-top: calc(14 * var(--s)); } /* 24 below the table row */
.dx-table {
  display: grid;
  grid-template-columns: minmax(0, 172fr) minmax(0, 249fr) minmax(0, 249fr);
  gap: calc(4 * var(--s)) calc(8 * var(--s));
  font-size: var(--t12);
  line-height: var(--l20);
}
.dx-th { font-style: italic; padding-left: calc(5 * var(--s)); }
.dx-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(30 * var(--s));
  padding: 0 calc(5 * var(--s));
  border: 1px solid var(--gray-bg);
  border-radius: calc(4 * var(--s));
}
.dx-cell--feature { background: var(--gray-bg); font-weight: 500; font-size: var(--t14); }

.dx-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(20 * var(--s)); }

.dx-list { padding-left: calc(21 * var(--s)); }

.dx-takeaways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--s)); padding-right: calc(14 * var(--s)); }
.dx-stack > .dx-takeaways { margin-top: calc(10 * var(--s)); }

/* ---------- Samsung (Figma frame "samsung", 1150 wide) ----------
   Same --s scale as dx-app: 1px at 1150, shrinking with the card. */

.card--case .case--samsung { gap: calc(24 * var(--s)); }   /* overview → Background */

@container (min-width: 700px) {
  /* inside the 20px padding: title 474 | Timeline 125 | Scope 124 | Role 125 | Team 262 */
  .case--samsung.case--body .case__overview { grid-template-columns: 474fr 125fr 124fr 125fr 262fr; }
  /* Team runs a few px past its 262 column in Figma rather than wrapping */
  body.is-collapsed .case--samsung .case__value { white-space: nowrap; }
}

.sx {
  display: flex;
  flex-direction: column;
  font-size: clamp(var(--text-min), calc(14 * var(--s)), 14px);
  line-height: clamp(var(--lh-min), calc(20 * var(--s)), 20px);
  hyphens: none;
  overflow-x: clip;
}
.sx * { min-width: 0; }
:where(.sx) :where(p) { margin: 0; }
.sx .case__label { margin: 0; }

/* Background text 701 | 50 | city animation 323, sitting 8 above the text's last line */
.sx-intro {
  display: flex;
  align-items: flex-end;
  gap: calc(50 * var(--s));
  padding: 0 calc(20 * var(--s));
  margin-bottom: calc(60 * var(--s));   /* space after the last Background paragraph, before the cover band */
}
.sx-text { flex: 0 1 calc(704 * var(--s)); display: flex; flex-direction: column; gap: calc(4 * var(--s)); }
.sx-text p + p { margin-top: 1lh; }   /* one blank line between paragraphs */
.sx-video {
  display: block;
  flex: none;
  width: calc(323 * var(--s));
  aspect-ratio: 323 / 270;
  object-fit: cover;
  margin-bottom: calc(8 * var(--s));    /* Figma 68, moved 60 down */
  pointer-events: none;
  mix-blend-mode: darken;
}

/* pale band from the end of the text to the bottom: full-width deck cover image, then the graphics */
.sx-band {
  background: #f3f4fa;
  padding-bottom: calc(220 * var(--s));
}
.sx-img { display: block; width: 100%; height: auto; }
.sx-cover { width: 100%; }
.sx-img--packaging { width: calc(1086 * var(--s)); }
/* Bordered frames with transparent images, so the pale band shows through */
.sx-frame {
  position: relative;
  border: 1px solid #3d3d3d;
  border-radius: calc(20 * var(--s));
  overflow: hidden;
}
.sx-targets { aspect-ratio: 1090 / 238; }
.sx-targets span {
  position: absolute;
  background: url("assets/samsung/web/target-applications-clear.png") no-repeat;
}
/* 770 × 748 (its Figma frame is 16 taller); the image is 734 × 753, 11 in from the left, 10 above the top */
.sx-frame--isometric { width: calc(770 * var(--s)); aspect-ratio: 770 / 748; margin-bottom: calc(16 * var(--s)); }
.sx-frame--isometric .sx-img { position: absolute; left: 1.42%; top: -1.34%; width: 95.35%; height: 100.67%; }
/* 1090 × 497, image filling it */
.sx-frame--automotive { aspect-ratio: 1090 / 497; }
.sx-frame--automotive .sx-img { width: 100%; height: 100%; object-fit: cover; }

.sx-sections {
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--s));
  margin-top: calc(7 * var(--s));
  padding: 0 calc(30 * var(--s));
}
.sx-section { display: flex; flex-direction: column; gap: calc(16 * var(--s)); }
.sx-head { display: flex; justify-content: space-between; align-items: center; }

/* "Light mode" tag beside the first heading */
.sx-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--s));
  padding: 0 calc(5 * var(--s));
  border: 1px solid currentColor;
  border-radius: calc(4 * var(--s));
  font-size: clamp(var(--text-min), calc(12 * var(--s)), 12px);
  line-height: clamp(var(--lh-min), calc(20 * var(--s)), 20px);
  text-transform: uppercase;
}
.sx-badge svg { width: calc(16 * var(--s)); height: calc(16 * var(--s)); flex: none; }
.sx-badge { cursor: pointer; user-select: none; }
.sx-badge--filled { background: #3d3d3d; border-color: #3d3d3d; color: #fff; }   /* "Dark mode" */

.sx-platforms:not(.is-light) .sx-when-light,
.sx-platforms.is-light .sx-when-dark { display: none; }

/* dx-app as a narrow card (scrolled, not hovered): Context, The Problem, the six app screens
   stacked, then Takeaways, all in one column */
@container (max-width: 699px) {
  body.is-collapsed .case--body .dx > :not(.dx-context, .dx-split, .dx-solution, .dx-lessons),
  body.is-collapsed .case--body .dx-split > :not(.dx-problem),
  body.is-collapsed .case--body .dx-arrows,
  body.is-collapsed .case--body .dx-solution > :not(.dx-strip) { display: none; }
  body.is-collapsed .case--body .dx-split { max-width: none; }
  body.is-collapsed .case--body :is(.dx-pair, .dx-trio, .dx-takeaways) {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    padding-right: 0;
  }
  body.is-collapsed .case--body .dx { max-width: none; }
  body.is-collapsed .case--body .dx-context { max-width: none; }
  body.is-collapsed .case--body .dx-strip {
    flex-direction: column;
    align-items: center;
    gap: 8cqi;
    margin-top: 0;
    padding: 8cqi 0;
  }
  body.is-collapsed .case--body .dx-strip .dx-phone { width: 70%; }
}

/* Narrow cards keep their text: sizes above scale down with the card's width
   (cqi = 1% of the card's width) down to --text-min / --lh-min (3pt / 4pt once scrolled). */

/* Every video on the site plays on its own and can't be clicked, paused or given controls */
video { pointer-events: none; }
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; }

/* Files side by side in a project's images (Archive) */
.case__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

/* Archive: images 20px in from both sides; an empty gap between them */
.case__assets--inset { padding-inline: 1.739cqi; }
.case__space { height: calc(var(--space) * 0.08696cqi); }
/* a row of a fixed height (Figma px), the files cropped to fill their columns */
.case__grid--row > * { height: calc(var(--row) * 0.08696cqi); object-fit: cover; }

/* ---------- Archive page (Figma frame "Archive") ----------
   The line sits at 223.75 (11.25 under the headline) and the headline is 29.49px (419 wide) from
   y 148; scrolling collapses
   the header to Work's 68px bar while the headline backspaces to "Enya loves to play." (script.js).
   The eight projects are one open card plus seven 42.5px strips, 5px apart, from x 17 to 21px from
   the right, down to the bottom of the window. The cards always use the scrolled-down sizes (--p: 1). */

@media (min-width: 761px) {
  .page-archive .statement {
    width: calc(419 * var(--u));
    font-size: calc(29.49 * var(--u));
  }

  /* the header eases to its new height as the headline goes from two lines to one and back
     (not while the page loads, so it doesn't slide in from Work's height) */
  .page-archive:not(.is-loading) .site-header { transition: height 0.35s var(--ease); }
  .page-archive:not(.is-loading) .projects { transition: top 0.35s var(--ease); }
  .page-archive .card:not(.is-open) .case__meta,
  .page-archive .card:not(.is-open) .case__text { display: none; } /* timeline and write-up only on the open project */

  /* Not hovered: the cover fills the strip, with the label and title at the bottom of the window
     (a 50px band, enough for a title on four lines) */
  .page-archive .card {
    --strip-text: 50px;
    --media-h: calc((1 - var(--a)) * (100% - var(--strip-text)) + var(--a) * var(--open-media, 54cqi));
  }
  .page-archive .card:not(.is-open) .card__info.case {
    height: calc(var(--strip-text) - 4px);
    margin-top: 4px;
    padding-bottom: 4px;
    justify-content: flex-end;
  }
  .page-archive.is-loading .card,
  .page-archive.is-loading .projects { transition: none; }

  .page-archive .projects {
    --p: 1;
    --text-min: 4px;
    --lh-min: 5.333px;
    --gap: calc(5 * var(--u));
    --card-min: calc(42.5 * var(--u));
    left: calc(17 * var(--u));
    right: calc(21 * var(--u));
    bottom: 0;                /* the projects run to the bottom of the window */
  }
}

/* The headline's line breaks are Work's; while it's being retyped it keeps the last page's shape */
.page-archive .desktop-break,
.page-about .desktop-break,
.statement.is-retyping .desktop-break { display: none; }

/* Archive and About delete words instead of fading them like Work */
.page-archive .statement .rest,
.page-about .statement .rest { opacity: 1; }
.statement:not(.is-ready) [data-seg="designer-dot"],
.statement:not(.is-ready) [data-seg="tinkerer"],
.statement:not(.is-ready) [data-seg="tinkerer-dot"],
.statement:not(.is-ready) [data-seg="storyteller"],
.statement:not(.is-ready) [data-seg="storyteller-dot"] { display: none; } /* About's words, until script.js takes over */

/* Cursor while the headline is backspaced / typed */
.type-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.95em;
  margin-left: 0.04em;
  vertical-align: -0.12em;
  background: #0062ff;
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- About page (Figma frame "About") ----------
   Same small header as Archive ("Enya Pan is" from y 148, line 13.69 under it), no collapse.
   Everything below starts 14 under the line:
   a nested list at 26px from x 20, with L-shaped connectors (24 × 18, 2px);
   Experience from x 641 (205 wide), Education from x 870 (214 wide), and a 261 × 400 photo at x 1141. */

/* one screen, no scrolling (phones scroll: the columns stack there, see the small-screen rules) */
html:has(body.page-about),
.page-about { height: 100%; overflow: hidden; }
.page-about .scroller { height: 100vh; }
.page-about .stage { position: relative; height: 100vh; overflow: hidden; }
.page-about .statement { width: calc(700 * var(--u)); font-size: calc(29.49 * var(--u)); } /* wide enough for "… a [visual, data] storyteller" on one line */
.page-about:not(.is-loading) .site-header { transition: height 0.35s var(--ease); }

.about {
  display: flex;
  align-items: flex-start;
  padding: calc(var(--header-h, 194px) + 14 * var(--u)) calc(38 * var(--u)) calc(60 * var(--u)) calc(20 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: calc(32 * var(--u));
}

.about__list {
  flex: none;
  width: calc(621 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(6 * var(--u));
  font-size: calc(24 * var(--u));   /* 18pt */
  line-height: calc(30 * var(--u));
}

.about__list li { position: relative; }
.about__sub { padding-left: calc(54 * var(--u)); }
.about__sub--2 { padding-left: calc(94 * var(--u)); max-width: calc(557 * var(--u)); }

/* the L-shaped connector in front of each sub-line */
.about__sub::before {
  content: "";
  position: absolute;
  left: calc(20 * var(--u) - 1px);
  top: 0;
  width: calc(24 * var(--u));
  height: calc(17 * var(--u));      /* to the middle of the line */
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.about__sub--2::before { left: calc(60 * var(--u) - 1px); }

.about__col { flex: none; }
.about__col--experience { width: calc(205 * var(--u)); margin-right: calc(24 * var(--u)); }
.about__col--education { width: calc(214 * var(--u)); }

.about__photo {
  flex: none;
  width: calc(261 * var(--u));
  height: calc(400 * var(--u));
  margin-left: auto;          /* right edge at 1402, like the nav */
  object-fit: cover;
  display: block;
}

.about__col h2 { margin: 0 0 calc(16 * var(--u)); font: inherit; }
.about__col dl { margin: 0; display: grid; gap: calc(16 * var(--u)); }
.about__col--education dl { gap: calc(24 * var(--u)); }
.about__nested { display: grid; gap: calc(16 * var(--u)); padding-left: calc(16 * var(--u)); }
.about__col dl div:not(.about__nested) { display: grid; gap: calc(4 * var(--u)); }
.about__col dt { font-size: max(12px, calc(14 * var(--u))); line-height: 1.2; }
.about__col dd {
  margin: 0;
  font-size: max(10px, calc(12 * var(--u)));
  line-height: calc(11 * var(--u));
  font-style: italic;
}
.about__nested dd:has(br) { line-height: calc(18 * var(--u)); }

/* ---------- Work ⇄ Archive page change ----------
   The headline shrinks / grows and moves into place, and the header line slides up / down,
   instead of the page jumping (cross-page View Transitions; browsers without them just switch). */

@view-transition { navigation: auto; }

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .statement { view-transition-name: statement; }

  /* each menu word grows / shrinks into place (the one for the new page grows to 20px) */
  .nav a span { display: inline-block; }
  .nav__work span    { view-transition-name: nav-work; }
  .nav__archive span { view-transition-name: nav-archive; }
  .nav__about span   { view-transition-name: nav-about; }
  ::view-transition-old(nav-work),
  ::view-transition-old(nav-archive),
  ::view-transition-old(nav-about) { display: none; }
  ::view-transition-new(nav-work),
  ::view-transition-new(nav-archive),
  ::view-transition-new(nav-about) { animation: none; }   /* scaled by its group, no fade */
  .site-header { view-transition-name: site-header; }

  ::view-transition-group(*) {
    animation-duration: var(--dur);
    animation-timing-function: var(--ease);
  }

  /* The header box animates its height; only the new page's line is drawn, pinned to the
     bottom of the moving box, so the line itself travels instead of fading between two lines. */
  ::view-transition-old(site-header) { display: none; }
  ::view-transition-new(site-header) {
    animation: none;
    background: #fff;           /* white header, not see-through, while it changes height */
    height: 100%;
    object-fit: none;
    object-position: 50% 100%;
  }
}

/* ---------- gutter guides (press "g") ---------- */

body.show-guides .card { outline: 1px solid var(--guide); outline-offset: 0; }
body.show-guides .projects { outline: 1px dashed var(--guide); }

/* ---------- small screens: stacked, no accordion ---------- */

@media (max-width: 760px) {
  :root { --u: 1px; --p: 0 !important; }

  .scroller { height: auto; }
  .stage { position: static; height: auto; overflow: visible; }

  .site-header {
    position: static;
    height: auto;
    min-height: 56px;
    background: var(--paper);
    display: flex;
    flex-direction: column-reverse;
    gap: 64px;
    padding: 16px;
  }

  .statement { position: static; width: auto; font-size: 34px; }
  .statement .rest { opacity: 1; }
  .desktop-break { display: none; }
  .nav { position: static; transform: none; justify-content: flex-end; gap: 10px; }
  .nav a { width: auto; height: auto; padding: 5px 15px; }

  .projects {
    position: static;
    flex-direction: column;
    gap: 32px;
    padding: 16px;
  }

  .card { flex: none; overflow: visible; --a: 1; } /* every card shows at full size on phones */
  .card__media { height: auto; aspect-ratio: 4 / 3; }
  .card__info { height: auto; opacity: 1; }
  .card__more,
  .case__assets { display: none; } /* long project content lives on project pages on phones */

  html:has(body.page-about),
  .page-about { height: auto; overflow: visible; }
  .page-about .scroller,
  .page-about .stage { height: auto; }
  .page-about .statement { font-size: 34px; }
  .about { flex-direction: column; gap: 40px; padding: 8px 16px 48px; }
  .about__list,
  .about__col--experience,
  .about__col--education { width: auto; margin: 0; }
  .about__photo { width: 100%; max-width: 400px; height: auto; margin: 0; }
  .about__col dd { line-height: 1.4; }
}

/* Colophon and © (About), very small, in the bottom-right corner */
.copyright {
  position: fixed;
  z-index: 5;
  right: 20px;
  bottom: 20px;
  margin: 0;
  text-align: right;
  font-size: 8pt;
  line-height: 14px;
  color: var(--ink);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}