/* =========================================================================
   KITANO_STUDIO — William Kitano
   Layout is authored on the PORTFOLIO.pdf artboard (2560 × 1440).
   Every measurement is expressed in design pixels × var(--u), so the page
   keeps the exact proportions of the PDF at any 16:9-ish viewport.
   ========================================================================= */

@font-face { font-family: "Satoshi"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../../00_BRAND/satoshi_font_family/Satoshi-Light.woff") format("woff"); }
@font-face { font-family: "Satoshi"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../00_BRAND/satoshi_font_family/Satoshi-Regular.woff") format("woff"); }
@font-face { font-family: "Satoshi"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../../00_BRAND/satoshi_font_family/Satoshi-Medium.woff") format("woff"); }
@font-face { font-family: "Satoshi"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../../00_BRAND/satoshi_font_family/Satoshi-Bold.woff") format("woff"); }

/* contact-form line colour (.field__input): registered so it can fade */
@property --lc { syntax: "<color>"; inherits: false; initial-value: #c1c1c1; }

:root {
  /* palette */
  --c-ink:    #15171c;
  --c-slate:  #323944;
  --c-steel:  #425166;
  --c-yellow: #ffa227;
  --c-silver: #c1c1c1;
  --c-white:  #ffffff;

  /* 1 design px (PDF artboard is 2560 × 1440) */
  --u: min(calc(100vw / 2560), calc(100vh / 1440));
  --sidebar: calc(var(--u) * 360);

  /* type scale, straight from the PDF */
  --fs-label: calc(var(--u) * 19.15);   /* Satoshi Bold  – intro CTA (intro unchanged)  */
  --fs-tag:   max(10px, calc(var(--u) * 19.15));   /* Satoshi Medium – every label: MENU · ALL PROJECTS · HIGHLIGHTED PROJECTS · PREV / NEXT · CLOSE · SOUND ON / OFF */
  --fs-nav:   calc(var(--u) * 22.54);   /* Satoshi Light – nav links / project meta     */
  --fs-body:  calc(var(--u) * 28.17);   /* Satoshi Light – intro paragraph             */
  --fs-h2:    calc(var(--u) * 38.30);   /* Satoshi Bold  – project title               */
  --fs-h1:    calc(var(--u) * 49.25);   /* Satoshi Bold  – intro headline              */

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* expo-like, soft landing */
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --t-hover:  .25s;
}

/* ---------- base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
}
p, h1, h2, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; transition: color var(--t-hover) ease; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* GLOBAL RULE — every hover / active state is yellow */
a:hover, a:focus-visible, a:active, button:hover, button:focus-visible { color: var(--c-yellow); }
:focus-visible { outline: 1px solid var(--c-yellow); outline-offset: 4px; }

/* text selection — brand yellow highlight, near-black (#15171c) text, everywhere */
::selection { background: var(--c-yellow); color: var(--c-ink); text-shadow: none; }

/* Brand SVGs (00_BRAND) are inlined as a sprite in index.html so they work
   from file:// in Chrome too, and fill with `currentColor` (hover → yellow) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  display: block;
  width: 100%; height: auto;
  fill: currentColor;
  overflow: visible;
  transition: fill var(--t-hover) ease;
}
.icon--logotext  { aspect-ratio: 480 / 31.33; }
.icon--behance   { aspect-ratio: 113.15 / 21; }
.icon--instagram { aspect-ratio: 135.68 / 30; }
.icon--whatsapp  { aspect-ratio: 130.66 / 25; }

/* masked text lines used by the native text animations */
.line { display: block; overflow: hidden; }
.line__in { display: block; will-change: transform; }

/* =========================================================================
   01 · INTRO  (PDF page 01)
   ========================================================================= */
.intro {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--c-ink);
  cursor: pointer;
  outline: none;
}
.intro__panel { display: flex; width: calc(var(--u) * 1440); height: calc(var(--u) * 480); }
.intro__box   { position: relative; flex: 0 0 50%; height: 100%; }

.intro__box--brand { background: var(--c-yellow); display: grid; place-items: center; color: var(--c-ink); }
/* PDF p.01 (updated): wordmark 480 wide, centred in the yellow block */
.intro__logo { display: block; position: relative; width: calc(var(--u) * 480); }

/* letter-roll wordmark (intro + Home top-right), built by main.js from the
   sprite: every letter is a column of 3 copies, clipped by the svg box */
.roll-logo { overflow: hidden; aspect-ratio: 480 / 35.33; margin: calc(-2 / 480 * 100%) 0; }   /* padded viewBox (main.js), same size and place as before */
/* (no will-change on the letters: Safari would paint each one in its own clipped layer) */

.intro__box--text  { background: var(--c-slate); padding: 0 calc(var(--u) * 104); }

/* baselines (from box top): 113 / 179 · 245 / 289 / 333 · 399 */
.intro__title {
  margin-top: calc(var(--u) * 61.04);
  font-weight: 700; font-size: var(--fs-h1); line-height: calc(var(--u) * 66);
  color: var(--c-white); letter-spacing: 0;
}
.intro__body {
  margin-top: calc(var(--u) * 19.12);
  font-weight: 300; font-size: var(--fs-body); line-height: calc(var(--u) * 44);
  color: var(--c-white);
}
.intro__cta {
  margin-top: calc(var(--u) * 37.89);
  font-weight: 700; font-size: var(--fs-label); line-height: 1;
  letter-spacing: .01em; color: var(--c-yellow);
}
.intro__cta .line__in { padding-bottom: .15em; margin-bottom: -.15em; }
.intro__title .line__in, .intro__body .line__in { white-space: nowrap; }

body:not(.is-intro) .intro { pointer-events: none; }
.intro.is-gone { display: none; }

/* =========================================================================
   02 · MAIN  (PDF pages 02 / 03)
   ========================================================================= */
.app {
  position: fixed; inset: 0;
  display: flex;
  visibility: hidden;
}
body:not(.is-intro) .app { visibility: visible; }

/* ---------- sidebar ------------------------------------------------------- */
.sidebar {
  position: relative; z-index: 5;
  flex: 0 0 var(--sidebar);
  height: 100%;
  background: var(--c-slate);
}
/* no MENU label (PDF p.02): Home sits on the top line, baseline 86 = HIGHLIGHTED PROJECTS */
.sidebar__nav { padding: calc(var(--u) * 58) 0 0 calc(var(--u) * 50); }

.label {
  font-weight: 500; font-size: var(--fs-tag); line-height: 1;
  letter-spacing: .01em; color: var(--c-yellow);
}
.label--projects { margin-top: calc(var(--u) * 91.75); color: var(--c-white); }   /* ALL PROJECTS ↓ — white */
.label__arrow { letter-spacing: 0; }

.menu { margin-top: calc(var(--u) * 29.1); }
.sidebar__nav > .menu:first-child { margin-top: 0; }

/* desktop: hovered entry = white + underline; the active / open entry keeps its yellow */
@media not ((max-width: 820px) or (max-aspect-ratio: 1/1)) {
  .menu a:hover, .menu a:focus-visible {
    color: var(--c-white);
    text-decoration: underline; text-decoration-thickness: max(1px, calc(var(--u) * 1.6)); text-underline-offset: .22em;
  }
  .menu a.is-current:hover, .menu a.is-current:focus-visible,
  .menu a[aria-expanded="true"]:hover, .menu a[aria-expanded="true"]:focus-visible { color: var(--c-yellow); }
}
.menu li { display: block; font-size: 0; line-height: 0; }
.menu a {
  display: inline-block; vertical-align: top;
  font-weight: 300; font-size: var(--fs-nav); line-height: calc(var(--u) * 40);
  letter-spacing: .01em; color: var(--c-white);
}
.menu a.is-current { color: var(--c-yellow); }
.menu a[data-section].is-current, .menu .lvl1.is-current { color: var(--c-yellow); }

/* Digital Series accordion (PDF p.08) — 40-unit lines, indents of 3 / 6 spaces */
.menu .submenu {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease-out);
}
/* categories / groups expand on click / tap (main.js · .is-xopen), one per level —
   same behaviour on desktop and phones; the current page's section opens on arrival */
.menu .submenu.is-xopen { grid-template-rows: 1fr; }
.submenu__in, .sub-items > ul { overflow: hidden; min-height: 0; }
.menu .submenu:not(.is-xopen) .submenu__in { visibility: hidden; transition: visibility 0s .7s; }
.menu .sub-items {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease-out);
}
.menu .sub-group.is-xopen .sub-items { grid-template-rows: 1fr; }
.menu .sub-group:not(.is-xopen) .sub-items > ul { visibility: hidden; transition: visibility 0s .7s; }
.menu .lvl1 { padding-left: calc(var(--u) * 19.61); }
.menu .lvl2 { padding-left: calc(var(--u) * 39.22); }

.menu__arrow { display: none; }
.menu a.is-current .menu__arrow { display: inline; }

/* + / − cue after each category and group; − while its list is open */
.menu a[data-section]::after, .menu .sub-group > .lvl1::after {
  content: "+"; display: inline-block; margin-left: .4em;
  color: var(--c-silver); font-weight: 300;
}
.menu a[data-section][aria-expanded="true"]::after,
.menu .sub-group > .lvl1[aria-expanded="true"]::after { content: "\2212"; }   /* minus sign: same width as + */
/* open category / group = active → yellow (like the current page) */
.menu a[data-section][aria-expanded="true"], .menu .sub-group > .lvl1[aria-expanded="true"] { color: var(--c-yellow); }

/* wordmark at the foot of the sidebar — every page but Home (PDF p.04/05) */
.sidebar__logo {
  position: absolute;
  left: calc(var(--u) * 50); bottom: calc(var(--u) * 67);
  width: calc(var(--u) * 256);
  color: var(--c-steel);
  opacity: 0; visibility: hidden;
  transition: opacity .8s var(--ease-out), visibility .8s, color var(--t-hover) ease;
}
body.is-panel .sidebar__logo { opacity: 1; visibility: visible; }

/* the PDF separators: a hairline 257 design-px long */
.menu .sep { position: relative; height: calc(var(--u) * 40); }
.menu .sep::before {
  content: ""; position: absolute; left: 0;
  top: calc(var(--u) * 21);
  width: calc(var(--u) * 257);
  /* whole pixels only: a fractional thickness (e.g. 1.1 px) drew some lines 1 px and others
     2 px depending on where they landed — every line is now identical */
  height: 1px;
  height: max(1px, round(calc(var(--u) * 1.6), 1px));
  background: var(--c-steel);   /* #425166 */
}

.menu-toggle { display: none; }

/* ---------- stage --------------------------------------------------------- */
.stage {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  background: var(--c-ink);
}

.eyebrow {
  position: absolute; z-index: 3;
  left: calc(var(--u) * 70); top: calc(var(--u) * 70.05);
  font-weight: 500; font-size: var(--fs-tag); line-height: 1;
  letter-spacing: .04em; color: var(--c-yellow);
  pointer-events: none;
}
.eyebrow__arrow { letter-spacing: 0; }

.brand {
  position: absolute; z-index: 3;
  top: calc(var(--u) * 66); right: calc(var(--u) * 70);
  width: calc(var(--u) * 480);
  color: var(--c-slate);
}

/* ---------- orbit (tilted donut) ----------------------------------------- */
/* ring centre in the PDF: x 1436 · y 683 on the 2560 × 1440 artboard        */
/* the Home screen never scrolls: a finger swipe spins the ring instead of being taken by Safari
   as a page pan (which cancels the drag on iPhone — the desktop emulator never shows this) */
.view--home { touch-action: none; }
.orbit {
  position: absolute; z-index: 1;
  left: calc((1436 - 360) / 2200 * 100%);
  top: calc(683 / 1440 * 100%);
  width: 0; height: 0;
}

.orbit__core {
  position: absolute;
  left: calc(var(--u) * -77); top: calc(var(--u) * -71.8);
  width: calc(var(--u) * 150); height: calc(var(--u) * 143.58);
  pointer-events: none;
}
.core { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .7s var(--ease-out); }
.core--gray { opacity: 0; }
.orbit.has-active .core--color { opacity: 0; }
.orbit.has-active .core--gray  { opacity: 1; }

.tile {
  position: absolute; left: 0; top: 0;
  width: calc(var(--u) * 360); height: calc(var(--u) * 240);
  margin: calc(var(--u) * -120) 0 0 calc(var(--u) * -180);
  will-change: transform;
  backface-visibility: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tile:focus-visible { outline: none; }

/* container: grows 360×240 → 480×320 on hover (PDF page 03) */
.tile__frame {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--c-slate);
  transform: scale(1);
  transition: transform .9s var(--ease-out);
  will-change: transform;
}
/* image: subtle zoom inside the growing container */
.tile__media {
  position: absolute; inset: 0;
  transform: scale(1);
  transition: transform 1.2s var(--ease-out);
}
.tile__media img {
  position: absolute;
  /* left / top / width / height come from the PDF crop data (main.js) */
  transition: filter .7s var(--ease-out);
  user-select: none; -webkit-user-drag: none;
}

.tile.is-active .tile__frame { transform: scale(1.3333); }
.tile.is-active .tile__media { transform: scale(1.07); }

/* everyone else steps back: greyscale + dimmed (PDF page 03) */
.orbit.has-active .tile:not(.is-active) .tile__media img { filter: grayscale(1) brightness(.42); }

/* ---------- project info (bottom-left) ----------------------------------- */
.project-info {
  position: absolute; z-index: 3;
  left: calc(var(--u) * 70); bottom: calc(var(--u) * 68.4);
  pointer-events: none;
}
.project-info__title {
  font-weight: 700; font-size: var(--fs-h2); line-height: 1;
  color: var(--c-white);
}
.project-info__meta {
  margin-top: calc(var(--u) * 12.95);
  font-weight: 300; font-size: var(--fs-nav); line-height: 1;
  color: var(--c-white);
}
.project-info .mask {
  position: relative; display: block; overflow: hidden;
  height: 1.25em; margin: -.125em 0;  /* room for ascenders/descenders, no layout shift */
  white-space: nowrap;
}
.project-info .mask > span { display: block; line-height: 1.25em; will-change: transform; }
.project-info .mask > span.is-leaving { position: absolute; left: 0; top: 0; }

/* ---------- GET IN TOUCH + copyright (bottom-right, PDF p.02) ------------- */
/* label type (Medium) · baselines 1328.9 / 1368.9 · right edge 70 from the side */
.touch {
  position: absolute; z-index: 3;
  right: calc(var(--u) * 71.5); bottom: calc(var(--u) * 67.4);
  text-align: right;
  font-weight: 500; font-size: var(--fs-tag); line-height: 1; letter-spacing: .04em;
  transition: opacity .5s var(--ease-out);
}
.touch__link { display: inline-block; color: var(--c-white); }
.touch__arrow { letter-spacing: 0; }
/* rest: white · hover: underlined only · click: yellow */
.touch__link:hover, .touch__link:focus-visible {
  color: var(--c-white);
  text-decoration: underline; text-decoration-thickness: max(1px, calc(var(--u) * 1.6)); text-underline-offset: .22em;
}
.touch__link:active { color: var(--c-yellow); }
.touch__copy { margin-top: calc(var(--u) * 20.85); color: var(--c-steel); }   /* #425166 */

/* ---------- views (hash routes: #home · #about) -------------------------- */
.view { position: absolute; inset: 0; }
.view[hidden] { display: none; }

/* =========================================================================
   04 · ABOUT ME  (PDF page 04)
   white panel 360→1320 · portrait 1320→2560 · text column at x 430
   ========================================================================= */
.about { display: flex; z-index: 4; }

.about__panel {
  position: relative;
  flex: 0 0 calc(var(--u) * 960);
  height: 100%;
  background: var(--c-white);
  color: var(--c-ink);
}
.about__text { padding: calc(var(--u) * 56.13) 0 0 calc(var(--u) * 70); }

/* baseline 143.3 */
.about__title {
  font-weight: 700; font-size: calc(var(--u) * 98.5); line-height: 1;
  letter-spacing: .01em;
}
.about__title .line { padding: .05em 0 .26em; margin: -.05em 0 -.26em; }

/* baselines 239.3 + n × 47.32 ; one blank line between paragraphs */
.about__p {
  font-weight: 300; font-size: calc(var(--u) * 33.8); line-height: calc(var(--u) * 47.32);
}
.about__title + .about__p { margin-top: calc(var(--u) * 48); }
.about__p + .about__p     { margin-top: calc(var(--u) * 47.32); }
.about__p .line__in { white-space: nowrap; }

/* e-mail — baseline 1365.6, underline at 1372 */
.about__contact {
  position: absolute;
  left: calc(var(--u) * 70); bottom: calc(var(--u) * (70.62 - 8));
  font-weight: 700; font-size: calc(var(--u) * 32.83); line-height: 1;
}
.about__contact .line { padding-bottom: calc(var(--u) * 8); }
.link-ul { display: inline-block; position: relative; color: var(--c-ink); }
.link-ul::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(var(--u) * -3.94);
  height: max(1px, calc(var(--u) * 2.63));
  background: currentColor;
}
/* hover: colour only (yellow) — same weight, same place; nothing moves, so the
   text is never re-rendered in a different (heavier-looking) way */
.link-ul:hover, .link-ul:focus-visible { color: var(--c-yellow); }
.link-ul__arrow { display: inline-block; }

.about__media {
  position: relative; margin: 0;
  flex: 1 1 auto; height: 100%;
  overflow: hidden;
}
/* PDF: 1240 × 1860 placed at y −130 → cover, 31 % from top */
.about__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 31%;
}

/* =========================================================================
   05 · SHORT CLIPS  (PDF page 05)
   white info card 360→1320 · scrollable 16:9 clip list 1320→2560
   ========================================================================= */
.page { display: flex; z-index: 4; }

.page-panel {
  position: relative;
  flex: 0 0 calc(var(--u) * 960);
  height: 100%;
  background: var(--c-white);
  color: var(--c-ink);
}
.card { padding: calc(var(--u) * 57.63) calc(var(--u) * 40) 0 calc(var(--u) * 70); }

/* title: baselines 143.3 / 238.8 (leading .97) */
.card__title {
  font-weight: 700; font-size: calc(var(--u) * 98.5); line-height: calc(var(--u) * 95.5);
  letter-spacing: .01em;
}
/* masks for the line reveal: room above for accents and below for descenders
   (98.5 type on a 95.5 leading would otherwise clip g / p / y) */
.card__title .line { padding-bottom: .26em; margin-bottom: -.26em; }   /* bottom only: stacked negative margins would collapse */
.card__title, .about__title { display: flow-root; }   /* keep the masks' negative margins inside the title */
/* meta: --tl = number of title lines (set per card) */
.card__meta {
  margin-top: calc(var(--u) * (56.62 + .5 * var(--tl, 2)));   /* baseline = 143.3 + 96 × title lines */
  font-weight: 700; font-size: calc(var(--u) * 32.83); line-height: 1;
}
.card__meta .line { padding-bottom: .15em; margin-bottom: -.15em; }
/* body: first baseline = meta + 96 · leading 48 · one blank line between blocks */
.card__p {
  font-weight: 300; font-size: calc(var(--u) * 33.8); line-height: calc(var(--u) * 48);
}
.card__meta + .card__p { margin-top: calc(var(--u) * 55.21); }
.card__p + .card__p    { margin-top: calc(var(--u) * 48); }
.card__p .line__in, .card__title .line__in { white-space: nowrap; }

/* "This clip on Instagram ↗" — baseline 1205.9 (PDF p.26: above the project navigator), underline × 2.63 */
.card__link {
  position: absolute;
  left: calc(var(--u) * 70); bottom: calc(var(--u) * (70.62 - 8 + 158.7));
  font-weight: 700; font-size: calc(var(--u) * 32.83); line-height: 1;
}
.card__link .line { padding-bottom: calc(var(--u) * 8); }
.card__link .line + .line { margin-top: calc(var(--u) * 7.17); }   /* stacked links: baselines 1317.6 / 1365.6 */

/* list */
.clips__list {
  position: relative;
  flex: 1 1 auto; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: var(--c-ink);
}
.clips__list::-webkit-scrollbar { display: none; }

.clip {
  position: relative; display: block;
  width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  background: var(--c-ink);
  -webkit-tap-highlight-color: transparent;
}
.clip:focus-visible { outline: 1px solid var(--c-yellow); outline-offset: -1px; }
.clip-info { display: none; }   /* per-clip info: phones only */
.only-mob { display: none; }   /* phone-only text variants (TAP TO ENTER, ↓) */

/* grey / dimmed for inactive clips (animated on the wrapper) */
.clip__media {
  position: absolute; inset: 0;
  filter: grayscale(1) brightness(.5);
  transition: filter .8s var(--ease-out);
}
.clip.is-active .clip__media { filter: none; }
.clip video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;           /* no native video UI, the tile handles the click */
}
/* light unsharp mask (#clipSharpen in index.html) on the active, full-colour
   clip only — the 720p files are upscaled here, this restores some crispness */
.clip.is-active video { filter: url(#clipSharpen); }

/* SOUND OFF / ON — baseline 30 above the clip's bottom, 30 from its right edge */
.clip__sound {
  position: absolute;
  right: calc(var(--u) * 29.2); bottom: calc(var(--u) * 27.5);
  font-weight: 500; font-size: var(--fs-tag); line-height: 1;
  letter-spacing: .01em; color: var(--c-white);
  text-shadow: 0 0 calc(var(--u) * 14) rgba(21, 23, 28, .45);
  opacity: 0; transform: translateY(35%);
  transition: opacity .35s ease, transform .5s var(--ease-out);
  pointer-events: none; user-select: none;
}
.clip__sound b { font-weight: 500; color: var(--c-yellow); }
.clip:hover .clip__sound,
.clip:focus-visible .clip__sound,
.clip.is-unmuted .clip__sound { opacity: 1; transform: none; }

/* =========================================================================
   06 · PORTRAITS  (PDF page 06)
   same info card · gallery = justified rows, edge to edge, 1240 wide
   (04_PORTRAITS/PREVIEW_GALLERY.webp)
   ========================================================================= */

.pgal {
  position: relative;
  flex: 1 1 auto; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: var(--c-ink);
}
.pgal::-webkit-scrollbar { display: none; }
.pgal__row { display: flex; }
/* flex-grow = aspect ratio → every image in a row gets the same height, no crop */
.pgal__item {
  position: relative; display: block;
  flex: var(--ar) 1 0%;
  aspect-ratio: var(--ar);
  padding: 0; border: 0; margin: 0;
  overflow: hidden;
  background: var(--c-slate);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pgal__item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity .6s ease;
}
.pgal__item:hover img { transform: scale(1.025); }
.pgal__item:focus-visible { outline: 1px solid var(--c-yellow); outline-offset: -1px; }
.pgal__item.is-opened img { opacity: 0; transition: none; }

/* =========================================================================
   08 · DIGITAL SERIES  (PDF page 08)
   same info card (title line 1 = series in silver) · carousel on the right:
   slide window 960 × 1440 centred, PREV / NEXT 30 from the section edges
   ========================================================================= */
.card__title .is-parent { color: var(--c-silver); }

.carousel {
  position: relative;
  flex: 1 1 auto; height: 100%;
  overflow: hidden;
  background: var(--c-ink);
  touch-action: pan-y;
  transition: background-color .6s ease;      /* e.g. into / out of the white Biohax page: no flash */
}
.carousel__viewport {
  position: absolute; top: 0; bottom: 0; left: 50%;
  aspect-ratio: var(--car-ar, 2 / 3);
  max-width: 100%;
  transform: translateX(-50%);
  overflow: hidden;
}
.carousel__slide { position: absolute; inset: 0; will-change: transform; }
.carousel__slide img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
/* scroll mode (First Concepts, PDF p.22): one tall image filling the 1240-wide
   section, scrolled only — no carousel, no full screen */
.pscroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pscroll::-webkit-scrollbar { display: none; }
.pscroll > img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.carousel.is-scroll .carousel__viewport,
.carousel.is-scroll .carousel__btn { display: none; }
.carousel[data-series="biohax-carousels"] { background: var(--c-white); }   /* transparent artwork → fully white page (desktop + phones) */
/* smooth image loading (main.js smoothImages): not-yet-loaded images stay invisible, then fade in */
img.is-pending { opacity: 0 !important; }
img.is-revealing { transition: opacity .6s ease !important; }

/* "← PREV" / "NEXT →" — label size / weight (Medium), white; hover → yellow · no shadow */
/* hit area = the whole vertical band (full carousel height × button width); text stays centred */
.carousel__btn {
  position: absolute; z-index: 2;
  top: 0; bottom: 0;
  display: flex; align-items: center;
  font-weight: 500; font-size: var(--fs-tag); line-height: 1;
  letter-spacing: .01em; color: var(--c-white);
  padding: calc(var(--u) * 3.6) calc(var(--u) * 14) 0;   /* 3.6 top = the old 1.8 nudge below centre */
}
.carousel__btn--prev { left:  calc(var(--u) * (30 - 14)); }
.carousel__btn--next { right: calc(var(--u) * (30 - 14)); }

/* =========================================================================
   PROJECT NAVIGATOR  (PDF p.26) — foot of the white panel, 960 × 150, two
   halves. Rest: steel with white type · hover: that half yellow, ink type
   (no underline). Labels always Medium 21.89, baseline 81.8 into the bar.
   ========================================================================= */
.pnav {
  position: absolute; z-index: 5;
  left: 0; bottom: 0;
  width: calc(var(--u) * 960); height: calc(var(--u) * 150);
  display: flex;
}
.pnav__btn {
  flex: 1 1 50%;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: calc(var(--u) * 3.2);
  background: var(--c-steel); color: var(--c-white);
  font-weight: 500; font-size: calc(var(--u) * 21.89); line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
  -webkit-tap-highlight-color: transparent;
}
.pnav__btn:hover, .pnav__btn:focus-visible, .pnav__btn.is-pressed {
  background: var(--c-yellow); color: var(--c-ink);
}
.pnav__btn, .pnav__btn * { font-weight: 500; text-decoration: none; }   /* every state: Medium, never underlined */
.pnav__btn:focus-visible { outline: none; }

/* =========================================================================
   CONTACT  (PDF p.02 / 03 / 04) — full screen on slate: white card 960 x
   1140 + side column 360 x 1140, centred. Side, top to bottom: RETURN HOME
   (steel, 110) · logos (ink, 260) · yellow, with the toy standing bottom-
   right, its flame reaching over the card. Sent (p.04): the whole block
   shrinks to 370 tall — no logo, no toy.
   Text is placed on the PDF baselines (Satoshi: ascent 1.01 · descent .24 em,
   so with line-height 1 the baseline sits .885 em below the box top).
   ========================================================================= */
.contact {
  position: fixed; inset: 0; z-index: 12;
  background: var(--c-ink);                       /* brand black */
  color: var(--c-ink);
}
.contact__wrap {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 1320); height: calc(var(--u) * 1140);
  transform: translate(-50%, -50%);
}
.contact.is-sent .contact__wrap { height: calc(var(--u) * 370); }
.contact__card {
  position: absolute; left: 0; top: 0;
  width: calc(var(--u) * 960); height: 100%;
  background: var(--c-white);
}
.contact__card > *, .contact__form > *, .contact__done > * { position: absolute; left: calc(var(--u) * 70); }
.contact__form, .contact__done { inset: 0; left: 0; }
.contact__logo { display: block; z-index: 2; top: calc(var(--u) * 80); width: calc(var(--u) * 300); color: var(--c-silver); }   /* above the full-card form layer (gets the hover); not a link: always light grey */
.contact__title {
  top: calc(var(--u) * 148.4);                       /* baseline 235 (20 above the PDF: the form sits clear of the toy) */
  margin: 0; font-weight: 700; font-size: calc(var(--u) * 98.5); line-height: 1; letter-spacing: .01em;
  white-space: nowrap; outline: none;
}
.contact__title .line { padding: .05em 0 .26em; margin: -.05em 0 -.26em; }
.contact__check {
  display: inline-block; width: .57em; height: .51em; vertical-align: .02em; margin-left: .07em;
  fill: none; stroke: var(--c-yellow); stroke-width: 8; stroke-linecap: square; stroke-linejoin: miter;
}
/* fields: label baseline, then the typed text 52 below, line 5.5 under it */
.field { width: calc(var(--u) * 820); }
.field:nth-of-type(1) { top: calc(var(--u) * 311.05); }   /* label baselines 339 / 499 / 659 */
.field:nth-of-type(2) { top: calc(var(--u) * 471.05); }
.field:nth-of-type(3) { top: calc(var(--u) * 631.05); }
.field__label {
  display: block;
  font-weight: 700; font-size: calc(var(--u) * 32.83); line-height: 1;
}
.field__label .line { padding-bottom: .2em; margin-bottom: -.2em; }
.field__input {
  display: block; width: 100%;
  margin: calc(var(--u) * 8.12) 0 0;                 /* label box bottom → text box top (text baseline = label baseline + 57) */
  padding: 0; border: 0; border-radius: 0; outline: none;
  font: inherit; font-weight: 300; font-size: calc(var(--u) * 33.8); line-height: calc(var(--u) * 64);   /* roomier than the PDF (52): reads like a ruled typing box */
  height: calc(var(--u) * 64);
  color: var(--c-ink); caret-color: var(--c-yellow);
  /* the body-text line: menu-divider weight (1.6), 12.5 under the baseline;
     colour --lc: silver · yellow when the field is missing · fades out
     as soon as the field is clicked into or holds text (lines only on blank fields) */
  --lc: var(--c-silver);
  background: linear-gradient(to bottom, transparent calc(var(--u) * 57.5), var(--lc) 0,
    var(--lc) calc(var(--u) * 59.1), transparent 0) 0 0 / 100% calc(var(--u) * 64) repeat-y;   /* line 12.5 under the baseline, clear of descenders */
  transition: --lc .3s ease;
  -webkit-appearance: none; appearance: none;
}
.field.is-invalid .field__input { --lc: var(--c-yellow); }
.field .field__input:focus, .field .field__input:not(:placeholder-shown) { --lc: rgba(193, 193, 193, 0); }
.field__input::placeholder { color: var(--c-silver); opacity: 1; }
textarea.field__input {
  height: calc(var(--u) * 192);                      /* 3 lines of 64: the last line (abs 1006) stays clear of the toy's face */
  resize: none; overflow-y: auto; scrollbar-width: none;
  background-attachment: local;
}
textarea.field__input::-webkit-scrollbar { display: none; }
.field__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--c-white) inset; -webkit-text-fill-color: var(--c-ink); }
.contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.contact__status {
  top: calc(var(--u) * 1016.9);                      /* baseline 1036, under SEND */
  font-weight: 500; font-size: calc(var(--u) * 21.89); line-height: 1; color: var(--c-steel);
}
/* SEND → — baseline 979: the gap from the last message line to the letters is 1.5 x the field gap (100 vs 67) · hover / focus: yellow + underline (PDF p.03) */
.contact__send {
  top: calc(var(--u) * 951.45);
  font-weight: 700; font-size: calc(var(--u) * 32.83); line-height: 1; color: var(--c-ink);
  padding: 0;
}
.contact__send::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(var(--u) * -3.94); height: max(1px, calc(var(--u) * 2.63));
  background: currentColor; opacity: 0; transition: opacity var(--t-hover) ease;
}
.contact__send:hover, .contact__send:focus-visible { color: var(--c-yellow); }
.contact__send:hover::after, .contact__send:focus-visible::after { opacity: 1; }
.contact__send:focus-visible { outline: none; }
.contact__form.is-sending .contact__send { color: var(--c-silver); pointer-events: none; }
/* sent (PDF p.04): title baseline 139 · text baselines 243 / 295 */
.contact.is-sent .contact__title { top: calc(var(--u) * 52.4); }
.contact__p {
  top: calc(var(--u) * 205);
  width: calc(var(--u) * 760);                       /* breaks after "message and", as in the PDF */
  font-weight: 300; font-size: calc(var(--u) * 33.8); line-height: calc(var(--u) * 52);
}
.contact__done[hidden], .contact__form[hidden] { display: none; }
.contact.is-sent .contact__logo, .contact.is-sent .contact__fig { display: none; }

/* side column: RETURN HOME · brand logos (x1.21 of the old Home ones) · yellow */
.contact__side {
  position: absolute;
  left: calc(var(--u) * 960); top: 0;
  width: calc(var(--u) * 360); height: 100%;
  display: flex; flex-direction: column;
  background: var(--c-ink); overflow: hidden;      /* ink, not yellow: no light hairline where the blocks meet the edges */
}
.contact__home {
  position: relative; flex: none;
  height: calc(var(--u) * 110);
  display: flex; align-items: center; justify-content: center;
  padding-bottom: calc(var(--u) * 0.4);              /* baseline 62 */
  background: var(--c-steel); color: var(--c-white);
  font-weight: 500; font-size: calc(var(--u) * 21.89); line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
  -webkit-tap-highlight-color: transparent;
}
/* hover (PDF p.03): yellow, ink — no underline; the same look while clicked */
.contact__home:hover, .contact__home:focus-visible, .contact__home:active {
  background: var(--c-yellow); color: var(--c-ink);
}
.contact__home:focus-visible { outline: none; }
.contact__links { position: relative; flex: none; height: calc(var(--u) * 260); background: var(--c-slate); }   /* #323944 */
.contact__links li { position: absolute; left: 50%; transform: translateX(-50%); }   /* centred, like RETURN HOME */
.contact__links a { display: block; color: var(--c-steel); }   /* rest #425166 */
.contact__links li:nth-child(1) { top: calc(var(--u) * 59);  width: calc(var(--u) * 137); }
.contact__links li:nth-child(2) { top: calc(var(--u) * 111); width: calc(var(--u) * 164); }
.contact__links li:nth-child(3) { top: calc(var(--u) * 171); width: calc(var(--u) * 158); }
/* rest #425166 · hover white · click yellow */
.contact__links a:hover, .contact__links a:focus-visible { color: var(--c-white); }
.contact__links a:active { color: var(--c-yellow); }
.contact__art { flex: 1 1 auto; background: var(--c-yellow); }
/* the toy: the 404 cut-out at .4625 of its 404 size (PDF p.02: 1184-wide frame, right / bottom flush) */
.contact__fig {
  position: absolute; z-index: 3;
  left: calc(var(--u) * 802); top: calc(var(--u) * 508.7);
  width: calc(var(--u) * 518); height: auto;
  pointer-events: none; user-select: none;
}

/* =========================================================================
   07 · ACTIVE PHOTO PREVIEW  (PDF page 07) — global full-screen rule
   covers the stage (sidebar stays) · image contained · CLOSE top-right ·
   a click anywhere closes
   ========================================================================= */
.viewer {
  position: absolute; inset: 0; z-index: 20;
  cursor: pointer;
}
.viewer[hidden] { display: none; }
.viewer::before {               /* backdrop, faded separately from the image */
  content: ""; position: absolute; inset: 0;
  background: var(--c-ink);
  opacity: var(--bd, 1);
}
.viewer__img {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  user-select: none; -webkit-user-drag: none;
  will-change: transform;
}
/* CLOSE — Satoshi Bold 21.89 (PDF p.07). Pinned to the stage's top-right
   corner, identical for every image, mirroring the MENU label top-left:
   cap line 70 from the top (same height as MENU), text 50 from the right. */
.viewer__close {
  position: absolute; z-index: 2;
  top: calc(var(--u) * 66.83); right: calc(var(--u) * 50);
  font-weight: 500; font-size: var(--fs-tag); line-height: 1;
  letter-spacing: .01em; color: var(--c-white);
  text-shadow: 0 0 calc(var(--u) * 14) rgba(21, 23, 28, .45);
  padding: calc(var(--u) * 12); margin: calc(var(--u) * -12);
}

/* =========================================================================
   Small / portrait screens — same system, re-proportioned for a phone
   ========================================================================= */
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  :root {
    --u: calc(100vw / 1500);
    --fs-label: max(10px, calc(var(--u) * 26));
    --fs-nav:   max(13px, calc(var(--u) * 34));
    --fs-body:  max(14px, calc(var(--u) * 40));
    --fs-h2:    max(20px, calc(var(--u) * 56));
    --fs-h1:    max(24px, calc(var(--u) * 70));
    --gut: 28px;                                  /* phones: one margin from every screen edge (all 4 sides) */
  }

  .only-desk { display: none; }
  .only-mob  { display: inline; }

  /* intro (phones): one yellow screen, brand-black type, left-aligned block
     centred vertically — wordmark, headline, text, TAP TO ENTER */
  .intro { background: var(--c-yellow); padding: 40px max(28px, 12vw); overflow-y: auto; }
  .intro__panel {
    flex-direction: column; align-items: flex-start;
    width: 100%; max-width: 440px; height: auto;
  }
  .intro__box { flex: none; width: 100%; background: none; }
  .intro__box--brand { display: block; place-items: normal; justify-items: start; aspect-ratio: auto; color: var(--c-ink); }
  .intro__logo { width: min(38.5vw, 187px); }                /* +10 % */
  .intro__box--text { padding: 0; margin-top: 34px; }
  .intro__title { margin-top: 0; font-size: clamp(24px, 7vw, 34px); line-height: 1.3; color: var(--c-ink); }
  .intro__body  { margin-top: 16px; font-size: clamp(14px, 3.8vw, 17px); line-height: 1.6; color: var(--c-ink); }
  .intro__cta   { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--c-ink); }   /* = MENU size, bold */
  .intro__title .line__in, .intro__body .line__in { white-space: normal; }

  /* main: the menu is a full-screen panel (scrolls if a section is long) */
  .sidebar {
    position: fixed; inset: 0; z-index: 20;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .6s var(--ease-out);
  }
  .sidebar.is-open { transform: none; }
  .sidebar__nav { padding: 96px var(--gut) 0; }
  .sidebar .label { font-weight: 500; font-size: 13px; letter-spacing: .06em; }
  .label--projects { margin-top: 36px; }
  .menu { margin-top: 8px; }
  .sidebar__nav > .menu:first-child { margin-top: 0; }
  .menu a { font-size: 20px; line-height: 2.1; }            /* one size for all entries · 42 px rows */
  .menu .sep { height: 14px; }
  .menu .sep::before { top: 6px; width: 100%; height: 1px; }

  /* categories / groups expand on tap (main.js): + / – cue, own open state */
  .menu a[data-section]::after, .menu .sub-group > .lvl1::after {
    content: "+"; display: inline-block; margin-left: .4em;
    color: var(--c-silver); font-weight: 300;
  }
  .menu a[data-section][aria-expanded="true"]::after,
  .menu .sub-group > .lvl1[aria-expanded="true"]::after { content: "\2212"; }   /* minus sign: same width as + */
  /* expanded category / group = active → yellow (like the current page) */
  .menu a[data-section][aria-expanded="true"], .menu .sub-group > .lvl1[aria-expanded="true"] { color: var(--c-yellow); }
  .menu .submenu.is-xopen { grid-template-rows: 1fr; }
  .menu .submenu:not(.is-xopen) .submenu__in { visibility: hidden; transition: visibility 0s .7s; }
  .menu .submenu.is-xopen .submenu__in { visibility: visible; transition: none; }
  .menu .sub-group.is-xopen .sub-items { grid-template-rows: 1fr; }
  .menu .sub-group:not(.is-xopen) .sub-items > ul { visibility: hidden; transition: visibility 0s .7s; }
  .menu .sub-group.is-xopen .sub-items > ul { visibility: visible; transition: none; }

  .sidebar__logo {                                          /* same size and place as the Home logo */
    position: static; display: block; flex: none;
    width: min(55.2vw, 264px); margin: auto auto 0; padding: 40px 0 var(--gut); box-sizing: content-box;   /* +20 %, centred */
    opacity: 1; visibility: visible;
  }

  /* MENU / CLOSE: plain text, flush with the 16 px gutter (no box).
     MENU #425166 (Home: white) · CLOSE white. Letters are split so the
     label can roll away on scroll (same roll as the intro logo, main.js). */
  .menu-toggle {
    display: block; position: fixed; z-index: 30;
    top: calc(var(--gut) - 8px); left: var(--gut);   /* label text sits on the margin (8 px padding = tap area) */
    padding: 8px 0;
    background: none; -webkit-tap-highlight-color: transparent;
    font-weight: 500; font-size: 13px; letter-spacing: .06em; line-height: 1;   /* = MENU / ALL PROJECTS labels (medium) */
    transition: color .35s ease;                     /* the tone change over white / dark fades softly too */
  }
  .menu-toggle .mt { display: inline-flex; overflow: hidden; padding: .15em 0; margin: -.15em 0; }
  .menu-toggle .mt__l { display: inline-block; will-change: transform; }
  .menu-toggle, .menu-toggle:hover, .menu-toggle:focus-visible, .menu-toggle:active { color: var(--c-steel); }
  body.route-home .menu-toggle, body.route-home .menu-toggle:hover,
  body.route-home .menu-toggle:focus-visible, body.route-home .menu-toggle:active { color: var(--c-white); }
  /* over a white background (detected in main.js) → #c1c1c1 */
  body .menu-toggle.on-light, body .menu-toggle.on-light:hover,
  body .menu-toggle.on-light:focus-visible, body .menu-toggle.on-light:active { color: var(--c-silver); }
  body .menu-toggle[aria-expanded="true"], body .menu-toggle[aria-expanded="true"]:hover,
  body .menu-toggle[aria-expanded="true"]:focus-visible, body .menu-toggle[aria-expanded="true"]:active { color: var(--c-white); }

  .stage { flex: 1 1 100%; }
  /* Home (phones): ↓ HIGHLIGHTED PROJECTS top-right, on the MENU line; no wordmark;
     ring 15 % larger again (a local --u, which main.js also reads for the ring
     geometry); dragon a further 15 % on top of that */
  .eyebrow { left: auto; right: var(--gut); top: var(--gut); font-weight: 500; font-size: 13px; letter-spacing: .06em; }
  .brand { display: none; }
  .orbit { left: 50%; top: 47%; --u: calc(100vw / 1500 * 1.3225); }
  .orbit__core { transform: scale(1.3225); }               /* dragon: +15 % twice over the ring */
  /* tapped thumbnail: much larger, nudged back inside the screen (main.js sets --fx / --fy / --fs) */
  .tile.is-active .tile__frame { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 2.04)); }
  .tile { -webkit-user-drag: none; }                       /* mouse in a narrow window: drag spins, never drags the link */
  .project-info { left: var(--gut); bottom: var(--gut); max-width: calc(100% - 2 * var(--gut)); }
  .project-info__meta { margin-top: 6px; }
  /* GET IN TOUCH + copyright: bottom-right on the margins; steps aside while a
     tapped thumbnail shows its title / meta bottom-left */
  .touch { right: var(--gut); bottom: var(--gut); font-size: 13px; letter-spacing: .06em; }
  .touch__copy { margin-top: 10px; }                     /* same size / weight as GET IN TOUCH */
  .touch__link { padding: 8px 0; margin: -8px 0; }        /* taller tap area, same place */
  .touch__link:hover { text-decoration: none; }             /* touch: no sticky underline */
  .orbit.has-active ~ .touch { opacity: 0; pointer-events: none; }


  /* about: one scrolling column, portrait under the text */
  .about { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--c-white); }
  .about__panel { height: auto; padding: 96px var(--gut) 40px; }
  .about__text { padding: 0; }
  .about__title { font-size: 40px; }
  .about__p { font-size: 15px; line-height: 1.45; }
  .about__title + .about__p { margin-top: 22px; }
  .about__p + .about__p { margin-top: 1.45em; }
  .about__p .line, .about__p .line__in { display: inline; white-space: normal; }
  .about__p .line::after { content: " "; }
  .about__p--notes .line { display: block; }
  .sidebar:not(.is-open) { visibility: hidden; transition: transform .6s var(--ease-out), visibility 0s .6s; }
  .about__contact { position: static; margin-top: 32px; font-size: 16px; }
  .about__contact .line { padding-bottom: 6px; }
  .link-ul::after { bottom: -3px; height: 1px; }
  .about__media { height: auto; aspect-ratio: 4 / 5; }

  /* short clips: card on top, clips below, one scrolling column */
  .page { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--c-white); }
  .page-panel { height: auto; padding: 96px var(--gut) 36px; }
  .card { padding: 0; min-height: 0; }
  .card__title { font-size: 34px; line-height: 1.05; }
  .card__meta { margin-top: 14px; font-size: 15px; }
  .card__p { font-size: 15px; line-height: 1.45; }
  .card__meta + .card__p { margin-top: 18px; }
  .card__p + .card__p { margin-top: 1.45em; }
  .card__p .line, .card__p .line__in,
  .card__title .line__in { white-space: normal; }
  .card__p .line, .card__p .line__in { display: inline; }
  .card__p .line::after { content: " "; }
  .card__link { position: static; margin-top: 28px; font-size: 16px; }
  .card__link .line { padding-bottom: 6px; }
  .clips__list { height: auto; overflow: visible; }
  .clip__sound { right: var(--gut); bottom: 14px; font-weight: 500; font-size: 13px; letter-spacing: .06em; opacity: 1; transform: none; }   /* = labels */
  /* short clips on phones: info 05 / clip 05 / info 04 / clip 04 …, all in
     full colour, light sharpen on every clip; tap = sound on / off only */
  .clips .page-panel { display: none; }
  .clips__list { background: var(--c-white); }
  .clip-info { display: block; padding: 40px var(--gut) 22px; color: var(--c-ink); }
  .clip-info:first-child { padding-top: 96px; }
  .clip__media { filter: none; }
  .clip video { filter: url(#clipSharpen); }

  /* portraits */
  .card__p--list .line, .card__p--list .line__in { display: block; }
  .card__p--list .line::after { content: none; }
  .pgal { height: auto; overflow: visible; }
  .viewer { position: fixed; z-index: 40; }

  /* digital series */
  .menu .lvl1 { padding-left: 18px; font-size: 20px; }
  .menu .lvl2 { padding-left: 36px; font-size: 20px; }
  .carousel { height: auto; aspect-ratio: var(--car-ar, 2 / 3); }
  .carousel__viewport { inset: 0; left: 0; transform: none; width: 100%; }
  .carousel.is-scroll { aspect-ratio: auto; height: auto; }
  .carousel.is-scroll .pscroll { position: static; overflow: visible; }
  .carousel__btn { font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--c-white); padding: 0 12px; }   /* full-height band, 12 px each side */
  /* touch: no "sticky" hover — white at rest, yellow only while the finger is down */
  .carousel__btn:hover, .carousel__btn:focus, .carousel__btn:focus-visible { color: var(--c-white); }
  .carousel__btn:active, .carousel__btn.is-pressed { color: var(--c-yellow); }   /* yellow while pressed (class set on touch, main.js) */
  /* tap area runs to the screen edge; the text stays on the margin */
  .carousel__btn--prev { left: 0; padding-left: var(--gut); }
  .carousel__btn--next { right: 0; padding-right: var(--gut); }
  /* full-screen CLOSE: same box, place and type as the menu's CLOSE */
  .viewer__close {
    top: calc(var(--gut) - 8px); left: var(--gut); right: auto; margin: 0;
    padding: 8px 0; background: none; text-shadow: none;
    font-weight: 500; font-size: 13px; letter-spacing: .06em;   /* = MENU / CLOSE */
  }
  .viewer__close, .viewer__close:hover, .viewer__close:focus-visible, .viewer__close:active { color: var(--c-steel); }
  .project-info .mask { white-space: normal; height: auto; min-height: 1.25em; }

  /* project navigator: full width at the very end of the page */
  .pnav { position: static; width: 100%; height: 64px; }
  /* each half paints its colour on below itself too (a shadow: not scrollable): no sub-pixel white line
     under the bar at the very bottom, and no white when the page bounces past its end on iPhone */
  .pnav__btn { padding: 0 8px; font-size: 13px; letter-spacing: .06em; --nb: var(--c-steel); background: var(--nb); box-shadow: 0 63px 0 var(--nb), 0 126px 0 var(--nb); }   /* 2 copies straight below = 126 px, no spill sideways */
  .pnav__btn:hover, .pnav__btn:focus { --nb: var(--c-steel); background: var(--nb); color: var(--c-white); }     /* touch: no sticky hover */
  .pnav__btn.is-pressed, .pnav__btn:active { --nb: var(--c-yellow); background: var(--nb); color: var(--c-ink); }

  /* contact: one scrolling column on slate: card, then RETURN HOME, the dark
     strip with the logos, the yellow panel with the toy; no MENU label */
  body.route-contact .menu-toggle { display: none; }
  .contact { z-index: 25; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--c-ink); }
  /* full-bleed on phones: no slate frame; the column fills the screen (the dark strip grows on tall screens) */
  .contact__wrap, .contact.is-sent .contact__wrap { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; min-height: 100%; padding: 0; display: flex; flex-direction: column; }
  .contact__card { position: relative; flex: none; width: auto; height: auto; padding: calc(30px + env(safe-area-inset-top)) var(--gut) 0; }   /* SEND bar closes the card */
  .contact.is-sent .contact__card { padding-bottom: 34px; }
  .contact__card > *, .contact__form > *, .contact__done > * { position: static; }
  .contact__form, .contact__done { position: static; }
  .contact__logo { display: block; width: min(46vw, 180px); }
  .contact__title { margin-top: 30px; font-size: clamp(30px, 9vw, 40px); }
  .contact__done .contact__title { margin-top: 0; }
  .field { width: auto; margin-top: 22px; }
  .contact__title + .field { margin-top: 26px; }
  .field__label { font-size: 15px; }
  .field__input {
    margin-top: 6px; font-size: 16px; line-height: 42px; height: 42px;      /* 16 px: no zoom on focus (iOS) */
    background-image: linear-gradient(to bottom, transparent 36px, var(--lc) 0, var(--lc) 37px, transparent 0);
    background-size: 100% 42px;
  }
  textarea.field__input { height: 168px; }
  .contact__status { margin-top: 18px; font-size: 13px; line-height: 1.4; }
  .contact__status:empty { display: none; }
  /* SEND: a full-width bar the height of RETURN HOME, closing the card · #c1c1c1, black text · tap: yellow */
  .contact__send {
    display: flex; align-items: center; justify-content: center; gap: .3em;
    position: relative; top: auto; left: auto;
    width: calc(100% + 2 * var(--gut)); height: 64px; margin: 37px calc(-1 * var(--gut)) 0;
    background: var(--c-silver); color: var(--c-ink); font-size: 16px;
    -webkit-tap-highlight-color: transparent;
  }
  .contact__send::after { display: none; }
  .contact__send:hover, .contact__send:focus-visible { background: var(--c-silver); color: var(--c-ink); }   /* touch: no sticky hover */
  .contact__send:active { background: var(--c-yellow); color: var(--c-ink); }
  .contact__form.is-sending .contact__send { background: var(--c-silver); color: var(--c-steel); }
  .contact__p { width: auto; margin-top: 20px; font-size: 15px; line-height: 1.5; }
  .contact__side { position: relative; flex: 1 0 auto; left: auto; top: auto; width: auto; height: auto; overflow: visible; }
  .contact__home { height: 64px; font-size: 13px; letter-spacing: .06em; padding-bottom: 0; }
  .contact__home:hover { background: var(--c-steel); color: var(--c-white); text-decoration: none; }   /* touch: no sticky hover */
  .contact__home:active { background: var(--c-yellow); color: var(--c-ink); }
  /* stacked, as in the desktop column (logo sizes = the old Home ones on phones) */
  .contact__links { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; gap: 10px; height: auto; padding: 26px var(--gut) calc(26px + env(safe-area-inset-bottom)); }
  .contact__links li { position: static; transform: none; }
  .contact__links li:nth-child(1) { width: 73.6px; }
  .contact__links li:nth-child(2) { width: 87.4px; }
  .contact__links li:nth-child(3) { width: 82.8px; }
  .contact__links a { padding: 4px 0; }
  .contact__links a:hover { color: var(--c-steel); }                                 /* touch: no sticky hover */
  .contact__links a:active { color: var(--c-yellow); }
  /* no yellow panel and no toy on phones: the dark logo strip closes the page */
  .contact__art, .contact__fig { display: none; }
}

/* a page address opens that page directly — no intro flash before the script runs */
.is-deep .intro { visibility: hidden; }
/* first load: the intro content waits (invisible) until fonts and script are ready, then its entrance plays */
.is-loading .intro__panel { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tile__frame, .tile__media, .tile__media img, .core, .sidebar { transition-duration: .01s !important; }
}