/* wenxinin.com — fixes layered on top of the v1 stylesheet (assets/index-ekJAlw2g.css). */

/* ---------- Typeface: Albert Sans (OFL, self-hosted variable font), closest free match to Buck's Mabry Pro Light ---------- */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/albert-sans-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/albert-sans-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/fonts/albert-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/fonts/albert-sans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* ---------- one typeface everywhere: Albert Sans (replaces Avenir Next, Space Mono, Bitcount and Georgia) ---------- */
:root {
  --font-body-local: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono-local: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif-local: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
}
html, body, button, input, textarea, .home-intro h2, .home-intro p { font-family: var(--font-body-local); }
.home-intro .intro-name { font-family: var(--font-body-local) !important; font-weight: 700; letter-spacing: -0.02em; }
.r-note { font-family: var(--font-body-local); font-style: italic; }

/* ---------- playground: wall of small things under the toy stage ---------- */
.pg-hint { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; white-space: nowrap; pointer-events: none; }
.pg-wall { padding: 72px clamp(16px, 4vw, 48px) 120px; display: grid; gap: 72px; }
.pg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid #e3e3e3; }
.pg-head h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.pg-head span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.pg-grid { display: grid; gap: 16px; }
.pg-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pg-grid-stickers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pg-grid-icons { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.pg-item { margin: 0; display: grid; gap: 8px; }
.pg-item video, .pg-item img { width: 100%; display: block; background: #f3f3f1; }
.pg-item video { aspect-ratio: 9 / 16; object-fit: cover; }
.pg-sticker, .pg-icon { aspect-ratio: 1; object-fit: contain; padding: 12%; box-sizing: border-box; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pg-item:hover .pg-sticker, .pg-item:hover .pg-icon { transform: scale(1.08) rotate(-3deg); }
.pg-item figcaption { font-size: 13px; color: #6b6b6b; }
@media (max-width: 900px) { .pg-grid-6, .pg-grid-stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pg-grid-6, .pg-grid-stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-hint { top: 72px; font-size: 11px; } }
.playground-page { height: auto; min-height: 100svh; overflow: visible; display: block; }
.playground-page .contact-stage { height: calc(100svh - 32px); min-height: 520px; overflow: hidden; }

/* ---------- moving previews on Work cards ---------- */
.video-preview-frame { position: relative; overflow: hidden; }
.video-preview-frame > .preview-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; opacity: 0; transition: opacity .5s; z-index: 2; }
.video-preview-frame > iframe.preview-motion { min-width: 0; min-height: 0; max-width: none; aspect-ratio: auto; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.video-preview-frame.is-moving .preview-motion { opacity: 1; }
.video-preview-frame .preview-badge, .video-preview-frame .preview-overlay { z-index: 3; }

/* ---------- Work pages: title row is always the same height, so the category tabs never move ---------- */
@media (min-width: 761px) {
  .listing-page .work-title-row, .listing-hero:not(.text-hero) .work-title-row { position: relative; display: block; min-height: calc(clamp(38px, 4.6vw, 72px) * 0.96); }
  .listing-hero:not(.text-hero) .work-title-row h1 { white-space: nowrap; line-height: .96; }
  .listing-hero:not(.text-hero) .work-title-row p { position: absolute; right: 0; bottom: 0; width: min(460px, 38%); margin: 0; }
}

/* About: no intro line under the title any more, so drop the reserved hero height */
.about-page .listing-hero { min-height: 0; }

/* ---------- home: social icons under the intro ---------- */
.home-intro { z-index: 3; }
.home-intro .home-social { pointer-events: auto; display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.home-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink, #080808); transition: background-color .2s, color .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.home-social a:hover, .home-social a:focus-visible { background: #e9edf8; transform: translateY(-2px); }
.home-social svg { width: 22px; height: 22px; display: block; }
@media (max-width: 760px) { .home-intro .home-social { gap: 10px; margin-top: 8px; } .home-social a { width: 36px; height: 36px; } .home-social svg { width: 20px; height: 20px; } }

/* About: more breathing room under the ABOUT WENXIN title */
.about-page .listing-hero { padding-bottom: clamp(56px, 7vw, 112px); }
/* About: the dotted vertical rail starts at the first experience row, not above the heading */
.about-page .about-body::before { top: var(--rail-top, 0px); }

/* Work + About: more room between the nav and the big page title */
.listing-hero { padding-top: clamp(64px, 7vw, 112px); }
@media (max-width: 760px) { .listing-hero { padding-top: 44px; } }

/* Optical alignment: at display size the title's first letter has a wide left side-bearing,
   so nudge it left to line up with the small tab labels underneath */
.listing-hero:not(.text-hero) h1 { margin-left: -0.055em; }

/* ---------- Product uses the Motion grid ---------- */
.listing-page-product .preview-grid {
  max-width: 1460px; margin: 0 auto; padding-left: clamp(42px, 5vw, 72px); padding-right: clamp(42px, 5vw, 72px);
}
@media (max-width: 760px) {
  .listing-page-product .preview-grid { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Illustration series viewer ---------- */
.series-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 12, 12, .94); color: #fff; display: grid; grid-template-rows: 1fr auto; }
.sv-stage { margin: 0; min-height: 0; display: grid; place-items: center; padding: 64px clamp(56px, 8vw, 120px) 16px; }
.sv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sv-bar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 12px clamp(20px, 4vw, 48px) 24px; }
.sv-title { margin: 0; font-size: 18px; font-weight: 500; }
.sv-meta, .sv-count { margin: 4px 0 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.sv-intro { position: absolute; left: clamp(20px, 4vw, 48px); bottom: 88px; max-width: min(520px, 40vw); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); white-space: pre-line; pointer-events: none; }
.sv-close { position: absolute; top: 16px; right: 16px; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: #fff; color: #080808; font: 500 12px/1 var(--font-body-local); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.sv-nav:hover { background: rgba(255,255,255,.2); }
.sv-prev { left: clamp(8px, 2vw, 32px); } .sv-next { right: clamp(8px, 2vw, 32px); }
@media (max-width: 760px) { .sv-intro { display: none; } .sv-stage { padding: 56px 12px 8px; } .sv-nav { top: auto; bottom: 18px; transform: none; } .sv-prev { left: auto; right: 72px; } .sv-next { right: 16px; } .sv-bar { padding-right: 140px; } }

/* Motion + Product: title and tabs share the card grid's container, so they line up with the reel / first card */
.listing-page-motion .listing-hero, .listing-page-product .listing-hero, .listing-page-illustration .listing-hero {
  max-width: 1460px; margin-left: auto; margin-right: auto; box-sizing: border-box;
  padding-left: clamp(42px, 5vw, 72px); padding-right: clamp(42px, 5vw, 72px);
}
@media (max-width: 760px) {
  .listing-page-motion .listing-hero, .listing-page-product .listing-hero, .listing-page-illustration .listing-hero { padding-left: 18px; padding-right: 18px; }
}

/* Illustration: same centred container and side margins as Motion; the gallery rows rescale to fit */
.listing-page-illustration .illustration-gallery {
  max-width: 1460px; margin-left: auto; margin-right: auto; box-sizing: border-box;
  padding-left: clamp(42px, 5vw, 72px); padding-right: clamp(42px, 5vw, 72px);
}
@media (max-width: 760px) { .listing-page-illustration .illustration-gallery { padding-left: 18px; padding-right: 18px; } }

/* Illustration > Installations: one clear hierarchy instead of mixed case / alignment / weights */
.listing-page-illustration .illustration-section-heading { text-align: left; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 28px; }
.listing-page-illustration .illustration-install-title { text-transform: none; font-size: 20px; font-weight: 500; letter-spacing: -0.005em; margin: 0 0 6px; }
.listing-page-illustration .illustration-install-medium { text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: .06em; margin: 0 0 18px; }
.listing-page-illustration .illustration-install-desc { font-size: 15px; font-weight: 400; line-height: 1.65; color: rgba(8, 8, 8, .64); max-width: 72ch; }

/* ---------- each page title is followed by its object from the home page ----------
   Upright, and sized from each image's visible outline so the object spans exactly
   cap height: its top meets the top of the capitals and its bottom sits on the baseline.
   --h = image height, --drop = transparent padding below the object, --pad = padding on its left. */
.listing-hero h1 .title-object {
  display: inline-block; width: auto; height: var(--h);
  vertical-align: calc(-1 * var(--drop)); margin: -.3em 0 0 calc(.24em - var(--pad));
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 100%;
  pointer-events: auto; user-select: none;
}
.listing-hero h1 .title-object:hover { transform: translateY(-.06em) scale(1.06); }
.title-object-motion       { --h: .7375em; --drop: .0214em; --pad: .019em; }
.title-object-product      { --h: .987em;  --drop: .111em;  --pad: .131em; }
.title-object-illustration { --h: .817em;  --drop: .0328em; --pad: .0885em; }
.title-object-about        { --h: .767em;  --drop: .0427em; --pad: .027em; }
.about-page .listing-hero h1.about-title { align-items: baseline; }
.about-page .listing-hero h1.about-title .title-object { margin-left: calc(-1 * clamp(1.5rem, 9vw, 7rem) + .24em - var(--pad)); margin-top: 0; position: relative; top: var(--drop); }

/* ---------- phone mockups inside a work card (iPhone 16 Pro style, drawn in CSS) ---------- */
.video-preview-frame > .phone-row {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  perspective: 1400px; perspective-origin: 50% 40%;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #eef0f4 0%, #dfe3ea 100%);
}
.phone {
  --w: 22.5%;
  position: relative; flex: 0 0 auto; width: var(--w); aspect-ratio: 1 / 1.869; box-sizing: border-box;   /* close to iPhone; screen is sized so a 9:16 clip loses ~5% at each side */
  margin: 0 1.2%; padding: calc(var(--w) * .022); border-radius: 19% / 10.2%;
  /* natural titanium: brushed edge with a soft specular highlight */
  background: linear-gradient(135deg, #e7e3dc 0%, #b9b4ab 18%, #f4f1ec 34%, #a7a199 52%, #d9d5ce 70%, #8f8a83 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.7), inset 0 0 0 1.5px rgba(0,0,0,.18),
    0 2px 3px rgba(20, 24, 32, .18), 0 24px 40px -14px rgba(20, 24, 32, .45), 0 46px 60px -30px rgba(20, 24, 32, .35);
  transform-style: preserve-3d;
  transform: translateY(var(--lift, 0)) translateZ(var(--z, 0)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.phone:nth-child(1) { --ry: 14deg;  --s: .92; --lift: 2%;  z-index: 1; }
.phone:nth-child(2) { --ry: 0deg;   --s: 1;   --lift: -2%; z-index: 2; }
.phone:nth-child(3) { --ry: -14deg; --s: .92; --lift: 2%;  z-index: 1; }
.preview-card:hover .phone { --lift: -5%; }
.preview-card:hover .phone:nth-child(1), .preview-card:hover .phone:nth-child(3) { --lift: -1%; }
.ph-screen {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;
  border-radius: 17.6% / 9.4%; background: #000; padding: 3.4%;          /* thin black bezel ring */
}
.ph-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 14.6% / 7.4%; background: #111; }  /* fills the screen; a 9:16 clip loses ~5% at each side */
.ph-island {
  position: absolute; top: 2.4%; left: 50%; width: 30%; height: 3.3%; transform: translateX(-50%); z-index: 2;   /* true-to-device size, tucked high so in-app text below stays clear */
  border-radius: 999px; background: #000; box-shadow: inset -9% 0 0 -3% #10131a;
}
.ph-island::after { content: ""; position: absolute; right: 12%; top: 50%; width: 15%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2a3550 0 25%, #0b0e15 60%); }
.ph-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 31%, rgba(255,255,255,0) 100%); }
.ph-btn { position: absolute; display: block; width: 1.8%; border-radius: 2px; background: linear-gradient(90deg, #8f8a83, #d8d4cd 60%, #9d9890); }
.ph-action   { left: -1.4%;  top: 17%; height: 4.4%; }
.ph-vol-up   { left: -1.4%;  top: 25%; height: 8%; }
.ph-vol-down { left: -1.4%;  top: 35%; height: 8%; }
.ph-power    { right: -1.4%; top: 28%; height: 12%; }
.video-preview-frame.has-phones > .preview-cover-image { visibility: hidden; }
@media (max-width: 760px) { .phone { --w: 24%; margin: 0 1%; } }

/* Cards that paint a cropped clip onto a canvas (see v1.js data-preview-crop): the canvas is what shows */
.video-preview-frame > .preview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; }
.video-preview-frame.has-canvas > video.preview-motion { opacity: 0 !important; }
.video-preview-frame.has-canvas > .preview-cover-image { opacity: 0; }

/* Work cards with data-preview-fit="contain": whole clip in the middle, blurred copy behind */
.video-preview-frame.fit-contain > video.preview-motion { object-fit: contain; z-index: 3; }
.video-preview-frame.fit-contain > video.preview-ambient {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; pointer-events: none;
  filter: blur(22px) saturate(1.1) brightness(.96); transform: scale(1.15);
}
.video-preview-frame.fit-contain > .preview-badge, .video-preview-frame.fit-contain > .preview-overlay { z-index: 4; }

/* ---------- Nav after buck.co: no rules or boxes; the current page is simply greyed out ---------- */
.top-nav { border-bottom: 0; background: rgba(255, 255, 255, .92); }
.nav-link.is-current, .nav-group:hover .nav-link.is-current { background: transparent; }
.nav-link { color: #080808; transition: color .2s; }
.nav-link.is-current { color: #8a8a8a; }
.nav-link:not(.is-current):hover, .nav-group:hover > .nav-link:not(.is-current) { color: #080808; }

/* Category tabs follow the same rule: current one greyed, no underline */
.work-category-filter a::after { display: none; }
.work-category-filter a { color: #080808; }
.work-category-filter a.is-active, .work-category-filter a[aria-current="page"] { color: #8a8a8a; pointer-events: none; }
.work-category-filter a:not(.is-active):hover { color: #8a8a8a; }
/* No rolling text: one static label per nav item */
.nav-link span + span { display: none; }
.nav-link span, .nav-link:hover span, .nav-link:focus-visible span,
.nav-group:hover .nav-link span, .nav-group:focus-within .nav-link span { transform: none !important; transition: none; }
/* "Selected" means under the pointer: hover/focus turns a label grey, everything else stays black (current page included) */
.nav-link, .nav-link.is-current { color: #080808; }
.nav-link:hover, .nav-link:focus-visible, .nav-group:hover > .nav-link, .nav-group:focus-within > .nav-link { color: #8a8a8a !important; }
.work-category-filter a, .work-category-filter a.is-active, .work-category-filter a[aria-current="page"] { color: #080808; pointer-events: auto; }
.work-category-filter a:hover, .work-category-filter a:focus-visible { color: #8a8a8a; }

/* ==========================================================================
   Type system: 6 sizes, 3 weights (300 text / 400 labels / 700 titles) in Albert Sans.
   Display 66 · H1 40 · H2 28 · H3 20 · Body 15 · Small 13  (sizes at 1440px; big ones scale down on small screens)
   This layer wins over the v1 stylesheet on purpose (!important), so every text style maps to one of the six.
   ========================================================================== */
:root {
  --fs-display: clamp(38px, 4.6vw, 72px);
  --fs-h1: clamp(26px, 2.8vw, 40px);
  --fs-h2: clamp(22px, 1.95vw, 28px);
  --fs-h3: clamp(17px, 1.4vw, 20px);
  --fs-body: 15px;
  --fs-small: 13px;
}

/* Display — page titles (unchanged size, weight 700) */
.listing-hero h1 { font-size: var(--fs-display) !important; font-weight: 700 !important; }

/* H1 — home introduction, project titles */
.home-intro h2 { font-size: var(--fs-h1) !important; font-weight: 300 !important; }
.home-intro .intro-name, .home-intro .intro-dot { font-weight: 700 !important; }      /* "Wenxin." keeps its 1.2em accent */
.project-sidebar h1, .project-sidebar h1[class] { font-size: var(--fs-h1) !important; font-weight: 300 !important; line-height: 1.08 !important; }

/* H2 — section headings */
.about-block-heading, .illustration-section-heading,
.project-page :is(.project-info-grid h2, .project-process h2) {
  font-size: var(--fs-h2) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.01em;
}

/* H3 — work names, sub-section headings */
.illustration-install-title, .pg-head h2,
.project-page :is(.project-process-copy h3, .project-process-step h3, .project-credit-item h3),
.next-project strong {
  font-size: var(--fs-h3) !important; font-weight: 400 !important; line-height: 1.3 !important; text-transform: none !important;
}

/* Body — running text */
.illustration-install-desc, .about-profile-copy p, .preview-overlay span, .preview-overlay p,
.project-page :is(.project-sidebar-overview p, .project-info-intro, .project-process p, .project-process-copy p,
  .project-credit-item p, .project-readme-list, .project-readme-list li, .project-info-grid dd) {
  font-size: var(--fs-body) !important; font-weight: 300 !important; line-height: 1.6 !important;
}

/* Small — nav, labels, captions, tables, meta (anything that used to be 10–14px) */
.nav-link, .work-category-filter a, .fall-label,
.listing-hero p, .preview-info p, .preview-info span, .preview-badge,
.illustration-board-caption, .illustration-board-caption *, .illustration-item figcaption, .illustration-item figcaption *,
.illustration-install-medium, .illustration-lightbox-close, .series-badge,
.about-section-label, .about-table-head span, .about-preview-card span, .about-preview-card p, .about-preview-notes li, .about-preview-src,
.about-row-meta :is(p, span), .about-row-company :is(p, span), .about-row-position :is(p, span), .about-row-main :is(p, span), .about-fact :is(span, p, a),
.page-carousel-counter, .contact-channel span, .contact-channel a,
.project-back-link, .project-sidebar-meta, .project-sidebar-meta *, .project-sidebar-link, .next-project span,
.project-media-caption :is(p, span, a), .project-metrics-table :is(th, td), .project-metrics-note,
.reusable-prompt-panel summary, .reusable-prompt-panel summary *, .reusable-prompt-content pre, .reusable-prompt-content > a,
.pg-head span, .pg-item figcaption, .pg-hint, .project-page :is(dt, figcaption, small, .project-info-grid dl) {
  font-size: var(--fs-small) !important; line-height: 1.5;
}
/* Small weights: 400 for text, 500 for labels/emphasis, 700 only for the falling-object labels */
.nav-link, .work-category-filter a, .preview-info p, .preview-info span,
.illustration-board-caption, .illustration-item figcaption, .illustration-install-medium, .about-preview-notes li,
.about-row-meta :is(p, span), .about-row-company span, .about-row-position span, .project-sidebar-meta *, .project-media-caption span,
.project-metrics-table td, .project-metrics-note, .reusable-prompt-content pre, .pg-item figcaption, .pg-head span, .contact-channel a { font-weight: 300 !important; }
.illustration-board-caption p, .illustration-item figcaption p, .illustration-board-caption span, .illustration-item figcaption span,
.series-badge, .about-section-label, .about-table-head span, .about-preview-src, .about-preview-card span,
.about-row-company p, .about-row-position p, .project-back-link, .project-sidebar-link, .project-media-caption :is(p, a),
.project-metrics-table th, .reusable-prompt-panel summary, .reusable-prompt-content > a, .contact-channel span, .preview-badge,
.project-page :is(dt) { font-weight: 400 !important; }
.fall-label { font-weight: 700 !important; }
.project-page strong, .project-page b { font-weight: 700 !important; }
.project-page :is(figcaption span, li > span, .outfit-builder-process-heading span) { font-size: var(--fs-small) !important; font-weight: 400 !important; }
.series-nav, .page-carousel-btn { font-weight: 300 !important; }   /* ‹ › arrow buttons: icons, not text */
.project-page :is(dl > div > dd) { font-size: var(--fs-h3) !important; font-weight: 400 !important; }   /* campaign impact numbers */

/* ---------- Nav: taller bar, labels vertically centred, Body size (15px) ---------- */
:root { --nav-h: 72px; }
.top-nav { height: var(--nav-h); }
.nav-link { height: var(--nav-h); display: flex !important; align-items: center; font-size: var(--fs-body) !important; letter-spacing: .02em; }
.nav-link span { position: static !important; }
.listing-page, .text-page, .project-page { padding-top: var(--nav-h) !important; }
.project-reference-layout, .project-sidebar, .project-content { height: calc(100vh - var(--nav-h)) !important; }
.project-sidebar, .about-experience-label { top: var(--nav-h) !important; }
.playground-page .contact-stage { height: calc(100svh - var(--nav-h)); }
@media (max-width: 760px) {
  :root { --nav-h: 96px; }                       /* two rows of 48px on phones, as before */
  .nav-link { height: 48px; }
}

/* ==========================================================================
   Nav after buck.co: 3vw side margin, sentence-case labels. (Page layout keeps the 1460px container.)
   ========================================================================== */
:root { --gutter: max(18px, 3vw); --nav-h: 96px; }

/* nav: margins match the page, sentence-case labels at H3 size */
.top-nav { padding: 0 var(--gutter); box-sizing: border-box; }
.nav-link { padding: 0 !important; font-size: var(--fs-h3) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 300 !important; }

@media (max-width: 760px) {
  :root { --nav-h: 96px; }
  .top-nav { padding: 0 18px; }
  .nav-link { font-size: var(--fs-body) !important; }
}

/* ---------- Nav backdrop: flat light-blue tint with a crisp bottom edge (no blur, no fade) ---------- */
.top-nav { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.top-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(246, 249, 255, .9);   /* light blue mixed 50% toward white */
}

/* Home intro sits a little lower, clear of the nav's fade */
@media (min-width: 761px) { .home-intro { top: 196px !important; } }

.work-category-filter a { font-size: var(--fs-h3) !important; }   /* tabs match the nav size */
/* Display titles never drop below 56px on laptop-size windows (66px at 1440, 72px max); phones get their own range */
:root { --fs-display: clamp(56px, 4.6vw, 72px); }
@media (max-width: 760px) { :root { --fs-display: clamp(40px, 11vw, 56px); } }

/* nav grew from 72px to 96px, so page titles get 24px less top padding to stay where they were */
.listing-hero { padding-top: clamp(40px, calc(7vw - 24px), 88px) !important; }
.work-category-filter a { text-transform: none !important; letter-spacing: 0 !important; }   /* sentence case, like the nav */
.work-category-filter { gap: 10px clamp(28px, 3vw, 44px) !important; }

/* Buck-like lightness: base text is Light (300) */
html, body { font-weight: 300; }
/* stragglers that the v1 stylesheet set to 500: running text -> 300, labels -> 400 */
.about-row-main p, .fifa-structured-copy p, .project-page li > p, .project-page figcaption > p { font-weight: 300 !important; }
.next-project span, .next-arrow { font-weight: 400 !important; }
/* the " :)" after Wenxin stays upright — slanted, the colon and bracket lean apart and read as a typo */
.home-intro .intro-dot { font-style: normal !important; margin-left: .06em; }
/* "Wenxin :)" now matches the rest of the line: same size, weight and style as "Hey! I'm" */
.home-intro .intro-name, .home-intro .intro-dot { font-size: 1em !important; font-weight: inherit !important; font-style: normal !important; letter-spacing: normal !important; margin-left: 0; }
/* Roco project: more air between categories, each opened by a hairline */
.project-detail-roco-kingdom-ui-motion .project-process-block + .project-process-block { margin-top: clamp(64px, 7vw, 112px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(8, 8, 8, .1); }
/* Playground hint sits clear of the 96px nav bar */
.pg-hint { top: calc(var(--nav-h) + 40px) !important; }
@media (max-width: 520px) { .pg-hint { top: calc(var(--nav-h) + 20px) !important; } }

/* ==========================================================================
   Home v3 (2026-10-07, after Michal's review): reel as the hero, one clear intro,
   selected work right below, free time + contact at the end. Text never moves.
   ========================================================================== */
.home-page { padding-top: 0 !important; }
.home-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #000; color: #fff; display: flex; align-items: flex-end; }
.home-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.home-hero-copy { position: relative; z-index: 2; width: 100%; max-width: 1460px; margin: 0 auto; box-sizing: border-box; padding: 0 var(--gutter) clamp(48px, 8vh, 96px); }
.home-hero-copy h1 { margin: 0 0 18px; font-size: var(--fs-display) !important; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.home-hero-lede { margin: 0; max-width: 760px; font-size: var(--fs-h2) !important; font-weight: 300; line-height: 1.3; }
.home-hero-meta { margin: 14px 0 0; max-width: 760px; font-size: var(--fs-body) !important; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.78); }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.home-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff; font: inherit; font-size: var(--fs-body) !important; font-weight: 400; cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s; }
.home-btn:hover, .home-btn:focus-visible { background: rgba(255,255,255,.16); }
.home-btn-solid { background: #fff; color: #080808; border-color: #fff; }
.home-btn-solid:hover, .home-btn-solid:focus-visible { background: #e9edf8; }

/* nav over the dark reel: white labels, no tint; back to normal once the page scrolls past the hero */
.home-page:not(.is-past-hero) .top-nav::before { background: transparent; }
.home-page:not(.is-past-hero) .nav-link { color: #fff !important; }
.home-page:not(.is-past-hero) .nav-link:hover, .home-page:not(.is-past-hero) .nav-link:focus-visible { color: rgba(255,255,255,.65) !important; }
.home-page .top-nav::before { transition: background-color .25s; }

.home-work { padding-top: max(clamp(56px, 7vw, 104px), calc(var(--nav-h) + 16px)); scroll-margin-top: 0; }
.home-section-head { max-width: 1460px; margin: 0 auto; box-sizing: border-box; padding: 0 clamp(42px, 5vw, 72px); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home-section-head h2 { margin: 0; font-size: var(--fs-h1) !important; font-weight: 700; }
.home-section-head a, .home-free a, .home-contact a { color: #080808; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.home-section-head a:hover, .home-free a:hover, .home-contact a:hover { color: #8a8a8a; }
.home-section-head a { font-size: var(--fs-h3) !important; font-weight: 300; white-space: nowrap; }

.home-free, .home-contact { max-width: 1460px; margin: 0 auto; box-sizing: border-box; padding: clamp(48px, 6vw, 88px) clamp(42px, 5vw, 72px) 0; }
.home-contact { padding-bottom: clamp(64px, 8vw, 120px); }
.home-section-label { margin: 0 0 12px; font-size: var(--fs-small, 13px) !important; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: #6b6b6b; }
.home-free-text, .home-contact-text { margin: 0; max-width: 900px; font-size: var(--fs-h2) !important; font-weight: 300; line-height: 1.35; }
.home-contact-social { display: flex; gap: 18px; margin: 18px 0 0 -8px; }
.home-contact-resume { margin: 14px 0 0; font-size: var(--fs-body) !important; }

@media (max-width: 760px) {
  .home-hero { min-height: 520px; }
  .home-hero-copy { padding: 0 18px 40px; }
  .home-hero-lede { font-size: var(--fs-h3) !important; }
  .home-section-head, .home-free, .home-contact { padding-left: 18px; padding-right: 18px; }
  .home-section-head { flex-wrap: wrap; }
}

/* Home hero: "see my work" is a thin arrow at the bottom centre (no pill); it fades once the page scrolls */
.home-hero-copy { padding-bottom: clamp(104px, 14vh, 150px); }
.home-scroll-cue { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 36px); z-index: 3; transform: translateX(-50%); display: grid; place-items: center; width: 56px; height: 72px; color: #fff; transition: opacity .3s, color .2s; }
.home-scroll-cue svg { width: 18px; height: 40px; display: block; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.home-scroll-cue:hover svg, .home-scroll-cue:focus-visible svg { transform: translateY(6px); }
.home-scroll-cue:hover, .home-scroll-cue:focus-visible { color: rgba(255,255,255,.7); }
.home-page.is-scrolled .home-scroll-cue { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .home-hero-copy { padding-bottom: 104px; } }

/* Home hero: one sentence per line */
.home-hero-lede, .home-hero-meta { max-width: 1120px; }
.home-hero-lede > span, .home-hero-meta > span { display: block; }
.home-hero-meta { line-height: 1.6; }

/* Home hero: contact icons in the white pill; reel player (play/pause · progress · sound) at bottom right */
.home-hero-social { display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 0 10px; border-radius: 999px; background: #fff; }
.home-hero-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #080808; transition: background-color .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.home-hero-social a:hover, .home-hero-social a:focus-visible { background: #e9edf8; transform: translateY(-2px); }
.home-hero-social svg { width: 22px; height: 22px; display: block; }

.reel-player { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(104px, 14vh, 150px); display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px; border-radius: 999px; color: #fff;
  background: rgba(20, 20, 24, .42); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.reel-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background-color .2s; }
.reel-btn:hover, .reel-btn:focus-visible { background: rgba(255,255,255,.16); }
.reel-btn svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.reel-player .i-play, .reel-player.is-paused .i-pause { display: none; }
.reel-player.is-paused .i-play { display: inline; }
.reel-player .i-sound, .reel-player.is-muted .i-muted { display: inline; }
.reel-player .i-muted, .reel-player.is-muted .i-sound { display: none; }
.reel-track { display: flex; flex-direction: column; gap: 7px; width: 150px; }
.reel-title { font-size: var(--fs-small, 13px) !important; font-weight: 400; line-height: 1; white-space: nowrap; }
.reel-bar { position: relative; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.reel-progress { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }

@media (max-width: 760px) {
  .home-hero-copy { padding-bottom: 168px; }
  .reel-player { left: 18px; right: auto; bottom: 96px; height: 46px; }
  .reel-track { width: 120px; }
  .home-hero-social { height: 48px; }
}

/* Reel player is now just the sound switch: one round glass button */
.reel-player { width: 52px; height: 52px; padding: 0; gap: 0; justify-content: center; }
.reel-player .reel-btn { width: 52px; height: 52px; }
.reel-player .reel-btn svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .reel-player { left: auto; right: 18px; bottom: 40px; width: 48px; height: 48px; } .reel-player .reel-btn { width: 48px; height: 48px; } .home-hero-copy { padding-bottom: 104px; } }

/* Home hero: project names in the intro link to their case studies */
.home-hero-copy p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(255,255,255,.55); transition: text-decoration-color .2s, color .2s; }
.home-hero-copy p a:hover, .home-hero-copy p a:focus-visible { text-decoration-color: #fff; color: #fff; }
.home-hero-social a { text-decoration: none !important; }
.home-hero-lede > span + span { margin-top: .15em; }
/* Home hero: lede a touch smaller and full width, so each sentence stays on one line on laptop/desktop */
.home-hero-lede { max-width: none; font-size: clamp(17px, 1.62vw, 24px) !important; }

/* Home nav: the dark bar appears as soon as the page starts to scroll (not only past the hero) */
.home-page.is-scrolled .top-nav::before { background: rgba(0, 0, 0, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.home-page.is-scrolled.is-past-hero .top-nav::before { background: rgba(246, 249, 255, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Home: illustration strip under the work grid ("I also draw.") */
.home-illus { max-width: 1460px; margin: 0 auto; box-sizing: border-box; padding: clamp(56px, 7vw, 104px) clamp(42px, 5vw, 72px) 0; }
.home-illus-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home-illus-head a { color: #080808; font-size: var(--fs-h3) !important; font-weight: 300; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.home-illus-head a:hover { color: #8a8a8a; }
.home-illus-awards { margin: 10px 0 0; font-size: var(--fs-body) !important; font-weight: 300; color: #8f8f8f; }
.home-illus-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.home-illus-item { display: block; color: inherit; text-decoration: none; }
.home-illus-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #111; border-radius: 4px; }
.home-illus-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.home-illus-item:hover .home-illus-img img, .home-illus-item:focus-visible .home-illus-img img { transform: scale(1.04); }
.home-illus-cap { display: block; margin-top: 10px; font-size: var(--fs-small, 13px) !important; font-weight: 400; color: #8f8f8f; }
@media (max-width: 1000px) { .home-illus-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .home-illus { padding-left: 18px; padding-right: 18px; } .home-illus-head { flex-wrap: wrap; } .home-illus-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* Illustration strip, take 2: never crop the artwork. Two justified rows: every piece keeps its own
   aspect ratio and composition; widths follow the ratio (--ar) so each row shares one height. */
.home-illus-row { display: flex; gap: 16px; margin-top: 16px; }
.home-illus-head + .home-illus-awards + .home-illus-row { margin-top: 28px; }
.home-illus-item { flex: var(--ar) 1 0; min-width: 0; }
.home-illus-img { aspect-ratio: auto; background: transparent; border-radius: 0; }
.home-illus-img img { height: auto; object-fit: contain; transition: opacity .25s; }
.home-illus-item:hover .home-illus-img img, .home-illus-item:focus-visible .home-illus-img img { transform: none; opacity: .82; }
@media (max-width: 760px) { .home-illus-row { flex-direction: column; gap: 20px; margin-top: 20px; } .home-illus-item { flex: none; } }

/* Illustration, take 3: two endless rows drifting at a constant speed — top row left→right, bottom row
   right→left. Uncropped (fixed row height, natural widths). Each row holds its set twice and slides by
   exactly one set, so the loop has no seam. Never pauses on hover; reduced motion gets a still, swipeable row. */
.illus-marquees { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; overflow: hidden; }
.illus-marquee { overflow: hidden; --h: clamp(180px, 22vw, 300px); }
.illus-marquee-track { display: flex; width: max-content; animation: illus-left var(--dur, 80s) linear infinite; will-change: transform; }
.illus-marquee[data-dir="right"] .illus-marquee-track { animation-name: illus-right; }
.illus-marquee-set { display: flex; gap: 16px; padding-right: 16px; }
.illus-marquee-item { display: block; flex: none; height: var(--h); }
.illus-marquee-item img { display: block; height: 100%; width: auto; transition: opacity .25s; }
.illus-marquee-item:hover img, .illus-marquee-item:focus-visible img { opacity: .82; }
@keyframes illus-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes illus-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .illus-marquee { overflow-x: auto; }
  .illus-marquee-track { animation: none; }
  .illus-marquee-set[aria-hidden="true"] { display: none; }
}

/* Carousel arrows: the "›" text glyph sat low and left in its circle (font metrics), so draw the chevron
   in CSS, optically centred; the focus ring only shows for keyboard focus */
.series-nav { font-size: 0 !important; }
.series-nav::before { content: ""; width: 9px; height: 9px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; box-sizing: border-box; }
.series-next::before { transform: translateX(-2px) rotate(45deg); }
.series-prev::before { transform: translateX(2px) rotate(-135deg); }
.series-nav:focus { outline: none; }
.series-nav:focus-visible { outline: 2px solid #080808; outline-offset: 2px; }

/* 3x3 award: just the 3x3 logo itself (original black wordmark), bottom-right of the artwork */
.illus-marquee-item { position: relative; }
.award-logo { position: absolute; right: 14px; bottom: 14px; z-index: 4; height: auto; pointer-events: none; }
.illus-marquee-item .award-logo { width: 15%; max-width: 64px; }
.series-carousel .award-logo { width: clamp(56px, 6vw, 88px); right: 20px; bottom: 20px; }
/* 3x3 logo sits top-left of the Google piece */
.award-logo, .series-carousel .award-logo { right: auto; bottom: auto; left: 14px; top: 14px; }
.series-carousel .award-logo { left: 20px; top: 20px; }
/* Carousel page count: fixed-height pill with the numbers centred both ways */
.series-badge { display: inline-flex !important; align-items: center; justify-content: center; height: 26px; padding: 0 10px !important; line-height: 1 !important; box-sizing: border-box; }
/* 3x3 logo: a bit larger and set in from the corner */
.series-carousel .award-logo { width: clamp(72px, 7.5vw, 112px); left: 4%; top: 6%; }
.illus-marquee-item .award-logo { width: 18%; max-width: 80px; left: 5%; top: 8%; }
/* the row rule ".illus-marquee-item img { height: 100% }" also caught the logo and stretched it to the full row
   height (the SVG then drew itself in the vertical middle) — the logo keeps its own height */
.illus-marquee-item .award-logo { height: auto; }
/* "I also draw." uses the same size and weight as the hero intro lines */
.home-illus-head .home-free-text { font-size: clamp(17px, 1.62vw, 24px) !important; font-weight: 300; line-height: 1.3; }


/* Home below the reel is light again, like the rest of the site. The reel melts into black at its bottom edge,
   then the work section opens with a tall black → deep blue → sky → pale cyan → white blend (icy palette Wenxin picked) */
.home-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); }
.home-hero-copy, .home-scroll-cue, .reel-player { z-index: 3; }
.home-page .home-work { background: linear-gradient(to bottom, #000 0, #0b1430 90px, #2b4a8f 200px, #8fb6ea 320px, #d6f0fb 420px, #fff 520px) no-repeat; padding-top: 360px !important; }
.home-page .home-work .preview-grid { background: transparent; }
@media (max-width: 760px) { .home-page .home-work { padding-top: 260px !important; background: linear-gradient(to bottom, #000 0, #0b1430 60px, #2b4a8f 140px, #8fb6ea 220px, #d6f0fb 290px, #fff 360px) no-repeat; } }
/* Hero: "TikTok" set as the TikTok wordmark (white, no note icon) so it reads clearly over the reel */
.home-hero-lede .inline-logo { display: inline-block; height: .78em; width: auto; vertical-align: -.04em; margin: 0 .02em; }
/* Home: wider two-up project grid (and the sections below share its edges), still with a clear white margin each side */
.home-page .preview-grid { max-width: 1760px; padding-left: max(24px, 4.2vw); padding-right: max(24px, 4.2vw); column-gap: clamp(20px, 2vw, 36px); }
.home-page .home-illus { max-width: 1760px; padding-left: max(24px, 4.2vw); padding-right: max(24px, 4.2vw); }
@media (max-width: 760px) { .home-page .preview-grid, .home-page .home-illus { padding-left: 18px; padding-right: 18px; } }
/* the handwritten signature closes every page — on case studies it sits at the end of the scrolling content column */
.project-content > .page-end { display: grid; background: transparent; }
/* Hero contact: four separate white circles instead of one shared pill */
.home-hero-social { background: transparent; padding: 0; height: auto; gap: 10px; }
.home-hero-social a { width: 48px; height: 48px; background: #fff; }
.home-hero-social a:hover, .home-hero-social a:focus-visible { background: #e9edf8; }
@media (max-width: 760px) { .home-hero-social a { width: 44px; height: 44px; } }
/* Home: the black → white blend is alive — soft blue / sky / pale-cyan light drifts sideways through it */
.home-page .home-work { position: relative; isolation: isolate; }
.home-page .home-work > * { position: relative; z-index: 1; }
.home-page .home-work::before {
  content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 520px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(70, 110, 220, .75), rgba(70, 110, 220, 0)),
    radial-gradient(closest-side, rgba(140, 190, 250, .7), rgba(140, 190, 250, 0)),
    radial-gradient(closest-side, rgba(40, 70, 170, .7), rgba(40, 70, 170, 0)),
    radial-gradient(closest-side, rgba(200, 236, 252, .8), rgba(200, 236, 252, 0));
  background-repeat: no-repeat;
  background-size: 55% 60%, 50% 55%, 45% 50%, 60% 45%;
  filter: blur(30px);
  animation: home-blend-flow 14s ease-in-out infinite alternate;
}
@keyframes home-blend-flow {
  0%   { background-position:  -10% 35%, 110% 60%,  30% 20%,  70% 95%; }
  33%  { background-position:  40% 45%,  60% 70%,  -5% 25%, 105% 90%; }
  66%  { background-position:  90% 30%,  10% 65%,  75% 15%,  30% 100%; }
  100% { background-position: 115% 40%, -10% 55%, 105% 25%,   0% 92%; }
}
@media (max-width: 760px) { .home-page .home-work::before { height: 380px; top: 20px; } }
@media (prefers-reduced-motion: reduce) { .home-page .home-work::before { animation: none; } }
/* About title: no broccoli, "ABOUT WENXIN" with a normal word space, and less air before Experience */
.about-page .listing-hero h1.about-title { gap: 0 .32em; }
.about-page .listing-hero { padding-bottom: clamp(24px, 3vw, 48px) !important; }

/* Home ends with the illustration rows and the signature (the link columns were removed as too busy) */
.home-page .page-end { min-height: 0; padding: clamp(40px, 5vw, 72px) 0 36px; }
/* The blend's colour slowly wanders through the cool range — teal, cyan, blue, indigo, violet — instead of staying blue.
   The base gradient moves into ::after so it can shift hue with the drifting light without touching the cards. */
.home-page .home-work { background: #fff !important; }
.home-page .home-work::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 520px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #000 0, #0b1430 90px, #2b4a8f 200px, #8fb6ea 320px, #d6f0fb 420px, #fff 520px);
  animation: home-blend-hue 26s ease-in-out infinite;
}
.home-page .home-work::before { animation: home-blend-flow 14s ease-in-out infinite alternate, home-blend-hue-blur 26s ease-in-out infinite; }
@keyframes home-blend-hue {
  0%, 100% { filter: hue-rotate(0deg); }
  25% { filter: hue-rotate(-38deg); }
  50% { filter: hue-rotate(28deg); }
  75% { filter: hue-rotate(52deg); }
}
@keyframes home-blend-hue-blur {
  0%, 100% { filter: blur(30px) hue-rotate(0deg); }
  25% { filter: blur(30px) hue-rotate(-38deg); }
  50% { filter: blur(30px) hue-rotate(28deg); }
  75% { filter: blur(30px) hue-rotate(52deg); }
}
@media (max-width: 760px) { .home-page .home-work::after { height: 360px; background: linear-gradient(to bottom, #000 0, #0b1430 60px, #2b4a8f 140px, #8fb6ea 220px, #d6f0fb 290px, #fff 360px); } }
@media (prefers-reduced-motion: reduce) { .home-page .home-work::after, .home-page .home-work::before { animation: none; } }
/* Hero contact circles: smaller and further apart */
.home-hero-social { gap: 16px; }
.home-hero-social a { width: 38px; height: 38px; }
.home-hero-social svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .home-hero-social { gap: 14px; } .home-hero-social a { width: 36px; height: 36px; } }

/* Home blend, take 7 (after the Oyre / Solwy references): black at the top, then one smooth, eased black → navy →
   steel blue → icy white curve (28 stops, no visible bands). The reel eases into pure black and the blend starts from that black, mostly black and glowing icy white with only a faint grey-blue between with film grain, melting into white. The reel eases into black first, so there is
   no seam. */
.home-hero::after { height: 300px; background: linear-gradient(to bottom, rgba(0,0,0,0.000) 0%, rgba(0,0,0,0.007) 5%, rgba(0,0,0,0.028) 10%, rgba(0,0,0,0.061) 15%, rgba(0,0,0,0.104) 20%, rgba(0,0,0,0.156) 25%, rgba(0,0,0,0.216) 30%, rgba(0,0,0,0.282) 35%, rgba(0,0,0,0.352) 40%, rgba(0,0,0,0.425) 45%, rgba(0,0,0,0.500) 50%, rgba(0,0,0,0.575) 55%, rgba(0,0,0,0.648) 60%, rgba(0,0,0,0.718) 65%, rgba(0,0,0,0.784) 70%, rgba(0,0,0,0.844) 75%, rgba(0,0,0,0.896) 80%, rgba(0,0,0,0.939) 85%, rgba(0,0,0,0.972) 90%, rgba(0,0,0,0.993) 95%, rgba(0,0,0,1.000) 100%); -webkit-mask-image: none; mask-image: none; }
.home-page .home-work::after {
  top: 0; height: 400px; left: 0; right: 0; transform: none; animation: none;
  background:
    linear-gradient(180deg, rgb(0,0,0) 0px, rgb(1,1,2) 11px, rgb(2,3,7) 21px, rgb(4,6,12) 32px, rgb(8,11,20) 42px, rgb(10,14,25) 53px, rgb(13,17,30) 63px, rgb(16,21,36) 74px, rgb(20,26,43) 84px, rgb(25,33,52) 95px, rgb(32,40,61) 106px, rgb(39,49,71) 116px, rgb(48,58,82) 127px, rgb(57,68,94) 137px, rgb(67,79,107) 148px, rgb(77,90,119) 158px, rgb(88,102,131) 169px, rgb(98,112,143) 179px, rgb(109,124,154) 190px, rgb(121,136,165) 201px, rgb(133,148,176) 211px, rgb(145,159,187) 222px, rgb(156,170,196) 232px, rgb(166,180,205) 243px, rgb(176,189,212) 253px, rgb(186,198,219) 264px, rgb(195,206,225) 274px, rgb(204,213,230) 285px, rgb(211,220,234) 296px, rgb(219,227,239) 306px, rgb(227,233,243) 317px, rgb(233,238,246) 327px, rgb(238,242,248) 338px, rgb(243,246,250) 348px, rgb(248,250,253) 359px, rgb(252,253,254) 369px, rgb(255,255,255) 380px);
  
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  filter: none;
}
.home-page .home-work::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 400px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; opacity: .7; animation: none; filter: none; transform: none; background-size: 220px 220px; background-repeat: repeat; background-position: 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%, #000 70%, transparent 100%); }
@media (max-width: 760px) {
  .home-page .home-work::after { height: 280px; background: linear-gradient(180deg, rgb(0,0,0) 0px, rgb(1,1,2) 7px, rgb(2,3,7) 14px, rgb(4,6,12) 22px, rgb(8,11,20) 29px, rgb(10,14,25) 36px, rgb(13,17,30) 43px, rgb(16,21,36) 51px, rgb(20,26,43) 58px, rgb(25,33,52) 65px, rgb(32,40,61) 72px, rgb(39,49,71) 79px, rgb(48,58,82) 87px, rgb(57,68,94) 94px, rgb(67,79,107) 101px, rgb(77,90,119) 108px, rgb(88,102,131) 116px, rgb(98,112,143) 123px, rgb(109,124,154) 130px, rgb(121,136,165) 137px, rgb(133,148,176) 144px, rgb(145,159,187) 152px, rgb(156,170,196) 159px, rgb(166,180,205) 166px, rgb(176,189,212) 173px, rgb(186,198,219) 181px, rgb(195,206,225) 188px, rgb(204,213,230) 195px, rgb(211,220,234) 202px, rgb(219,227,239) 209px, rgb(227,233,243) 217px, rgb(233,238,246) 224px, rgb(238,242,248) 231px, rgb(243,246,250) 238px, rgb(248,250,253) 246px, rgb(252,253,254) 253px, rgb(255,255,255) 260px);  }
}

/* Hero: lighter overall shade so the bottom of the reel isn't so dark (the fade to black now only takes the last quarter) */
.home-hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.5) 100%); }
/* About › Skills: core tools as monochrome icons with their names (Simple Icons, simple-icons@13.21.0); tools without an
   icon stay as a short text line under them */
.tool-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 26px; }
.tool-icons li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; }
.tool-icons img { width: 26px; height: 26px; display: block; opacity: .88; }
.tool-icons span { font-size: 12px !important; font-weight: 400; color: #6b6b6b; text-align: center; line-height: 1.2; }
.tool-more { margin: 14px 0 0 !important; font-size: 13px !important; color: #8a8a8a !important; }
/* the About table's own list styles (bullets, stacked items) must not apply to the icon row */
.about-row-main .tool-icons { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: flex-start; gap: 18px 26px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; }
.about-row-main .tool-icons li { display: flex !important; flex-direction: column; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; min-width: 64px; }
.about-row-main .tool-icons li::before, .about-row-main .tool-icons li::marker { content: none !important; display: none !important; }
.about-row-main .tool-more { text-align: left; }
.about-row-main .tool-text { margin: 14px 0 0 !important; }

/* the blend is already white where the first project row begins (cards start at 360px / 260px on phones) */
.home-page .home-work::after { -webkit-mask-image: none; mask-image: none; }
/* About › Skills, take 2: every tool and skill as an icon. Brand favicons are shown in greyscale to stay monochrome;
   tools without a usable public logo get a lettered tile in the same style as the Adobe marks; skills use Lucide line icons */
.tool-icons img.is-logo { filter: grayscale(1) contrast(1.05); border-radius: 6px; opacity: .9; }
.tool-mono { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: #1a1a1a; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1; opacity: .88; }
.about-row-main .tool-icons li { max-width: 104px; }
.about-row-main .tool-icons span { word-break: normal; }
.tool-icons img.is-logo-light { filter: grayscale(1) brightness(.5) contrast(2.4); opacity: .9; }
/* About › Skills, take 3: one consistent unit. Every mark sits centred in the same 44px light tile at the same size,
   lettered marks are dark-on-light like the rest, and every item has the same width so rows line up as a grid */
.about-row-main .tool-icons { display: grid !important; grid-template-columns: repeat(auto-fill, 96px); gap: 20px 8px !important; justify-items: center; }
.about-row-main .tool-icons li { width: 96px; max-width: none; min-width: 0; gap: 9px; }
.tool-icons li > img, .tool-icons li > .tool-mono {
  box-sizing: border-box; width: 44px !important; height: 44px !important; padding: 11px; border-radius: 11px;
  background: #f2f2f2; object-fit: contain; opacity: 1;
}
.tool-icons img.is-logo { border-radius: 11px; padding: 11px; }
.tool-icons img.is-logo, .tool-icons img.is-logo-light { background: #f2f2f2; }
.tool-mono { display: grid; place-items: center; color: #1a1a1a; font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
.tool-icons span { font-size: 12px !important; line-height: 1.25; }
@media (max-width: 760px) { .about-row-main .tool-icons { grid-template-columns: repeat(auto-fill, 84px); } .about-row-main .tool-icons li { width: 84px; } }
/* the tile is its own element, so greyscale/darkening filters touch only the mark, never the tile */
.tool-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #f2f2f2; }
.tool-icons .tool-tile > img, .tool-icons .tool-tile > .tool-mono { width: 22px !important; height: 22px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; object-fit: contain; }
.tool-icons .tool-tile > img.is-logo { border-radius: 4px !important; }
.tool-icons .tool-tile > .tool-mono { display: grid; place-items: center; width: auto !important; font-size: 12px; }
/* Hero: no fade while the page rests at the top — the black fade at the reel's foot appears as you start to scroll
   (--reel-fade-h, its height: 0 at rest, easing up to 160px over the first ~70px of scroll, set in v1.js;
   the bottom edge is always solid black so the join with the section below never shows) */
.home-hero::after { opacity: 1; height: var(--reel-fade-h, 0px); will-change: height; }
/* Hero text a size down: title, intro lines (and "I also draw.", which matches them), small print */
.home-hero-copy h1 { font-size: clamp(40px, 3.6vw, 56px) !important; margin-bottom: 14px; }
.home-hero-lede, .home-illus-head .home-free-text { font-size: clamp(15px, 1.36vw, 20px) !important; }
.home-hero-meta { font-size: 13px !important; }
/* Hero text sits higher: more space under the copy block (the scroll arrow keeps its place at the bottom) */
.home-hero-copy { padding-bottom: clamp(150px, 22vh, 230px) !important; }
@media (max-width: 760px) { .home-hero-copy { padding-bottom: 140px !important; } }
/* the round sound switch stays level with the contact circles */
.reel-player { bottom: calc(clamp(150px, 22vh, 230px) - 7px); }
@media (max-width: 760px) { .reel-player { bottom: 133px; } }
/* Case-study covers for Game Template System and Mome Flow use the same moving preview as their home cards */
.project-feature-media > .project-cover-preview { width: 100%; }
/* blend fades out once the join has scrolled under the nav (--blend-o, set in v1.js) */
.home-page .home-work::after, .home-page .home-work::before { opacity: var(--blend-o, 1); }
.home-page .home-work::before { opacity: calc(var(--blend-o, 1) * .7); }
/* Hero: the sound switch moves up next to the name (replacing the ":)"), same size and look as the contact circles */
.home-hero-title { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.home-hero-title h1 { margin: 0 !important; }
.reel-player.is-inline { position: static; width: auto; height: auto; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.reel-player.is-inline .reel-btn { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #080808; transform: translateY(.06em); }
.reel-player.is-inline .reel-btn:hover, .reel-player.is-inline .reel-btn:focus-visible { background: #e9edf8; }
.reel-player.is-inline .reel-btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .reel-player.is-inline .reel-btn { width: 36px; height: 36px; } .home-hero-title { gap: 14px; } }
/* Hero: darker shade so the intro reads over bright frames — overall dim, a little deeper behind the text (left, lower) */
.home-hero-shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.46) 45%, rgba(0,0,0,.62) 100%);
}
.home-hero-copy { text-shadow: 0 1px 14px rgba(0,0,0,.35); }
/* Hero buttons (contact circles + sound switch): frosted glass — translucent white, blur, faint rim, white icons.
   No focus ring on mouse click; a clear one for keyboard focus. */
.home-hero-social a, .reel-player.is-inline .reel-btn {
  background: rgba(255, 255, 255, .14); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: background-color .2s, box-shadow .2s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.home-hero-social a:hover, .reel-player.is-inline .reel-btn:hover {
  background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); transform: translateY(-2px);
}
.reel-player.is-inline .reel-btn:hover { transform: translateY(.06em) translateY(-2px); }
.home-hero-social a:focus, .reel-player.is-inline .reel-btn:focus { outline: none; }
.home-hero-social a:focus-visible, .reel-player.is-inline .reel-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* no grain anywhere on the home page: the blend below the reel is a clean gradient */
.home-page .home-work::before { content: none !important; display: none !important; animation: none !important; }
/* Hero shade, take 3: keep the reel clear and vivid — only a light overall dim, plus a soft local shadow behind the
   text block (lower left) so the intro stays readable */
.home-hero-shade {
  background:
    radial-gradient(ellipse 62% 58% at 18% 72%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.1) 45%, rgba(0,0,0,.22) 100%);
}
.home-hero-copy { text-shadow: 0 1px 10px rgba(0,0,0,.25); }
/* Hero shade, take 4: one even dim across the whole reel (no local patch), between the earlier light and heavy versions */
.home-hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.36) 50%, rgba(0,0,0,.46) 100%); }

/* Local soft darkening behind the hero copy — wide feathered ellipse, layered over the even dim */
.home-hero-shade { background:
  radial-gradient(ellipse 64% 58% at 28% 62%, rgba(0,0,0,0.300) 0%, rgba(0,0,0,0.294) 8%, rgba(0,0,0,0.278) 17%, rgba(0,0,0,0.253) 25%, rgba(0,0,0,0.222) 33%, rgba(0,0,0,0.187) 42%, rgba(0,0,0,0.150) 50%, rgba(0,0,0,0.113) 58%, rgba(0,0,0,0.078) 67%, rgba(0,0,0,0.047) 75%, rgba(0,0,0,0.022) 83%, rgba(0,0,0,0.006) 92%, rgba(0,0,0,0.000) 100%),
  linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.36) 50%, rgba(0,0,0,.46) 100%); }
@media (max-width: 760px) { .home-hero-shade { background:
  radial-gradient(ellipse 110% 50% at 35% 64%, rgba(0,0,0,0.300) 0%, rgba(0,0,0,0.294) 8%, rgba(0,0,0,0.278) 17%, rgba(0,0,0,0.253) 25%, rgba(0,0,0,0.222) 33%, rgba(0,0,0,0.187) 42%, rgba(0,0,0,0.150) 50%, rgba(0,0,0,0.113) 58%, rgba(0,0,0,0.078) 67%, rgba(0,0,0,0.047) 75%, rgba(0,0,0,0.022) 83%, rgba(0,0,0,0.006) 92%, rgba(0,0,0,0.000) 100%),
  linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.36) 50%, rgba(0,0,0,.46) 100%); } }

/* fit-contain cards: the cover is the clip's first frame, shown whole (no static stand-in) */
.video-preview-frame.fit-contain > .preview-cover-image { object-fit: contain; }

/* ==========================================================================
   Rich's review (2026-10-14) — round 1
   ========================================================================== */
/* Nav: one slim row — the handwritten signature on the left (home), three links on the right.
   It slides away while you scroll down and comes back as soon as you scroll up. */
:root { --nav-h: 64px; }
@media (max-width: 760px) { :root { --nav-h: 56px; } }
.top-nav { display: flex !important; align-items: center; justify-content: space-between; grid-template-columns: none !important;
  height: var(--nav-h) !important; padding: 0 var(--gutter) !important; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.top-nav.is-tucked { transform: translateY(-100%); }
.nav-brand { display: block; line-height: 0; transition: opacity .2s; }
.nav-brand img { display: block; width: auto; height: 24px; }
.nav-brand:hover, .nav-brand:focus-visible { opacity: .6; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav-link { height: auto !important; font-size: var(--fs-body) !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.nav-link.is-current { color: #8a8a8a !important; }
@media (max-width: 760px) { .top-nav { padding: 0 18px !important; } .nav-brand img { height: 18px; } .nav-links { gap: 18px; } .nav-link { font-size: 14px !important; } }
/* over the dark reel the signature turns white, like the links */
.home-page:not(.is-past-hero) .nav-brand img { filter: invert(1); }
.home-page.is-scrolled:not(.is-past-hero) .nav-brand img { filter: invert(1); }


/* Home hero: the handwritten signature is the headline, then two short lines (who + best work). On the home page the
   nav's small signature waits until you scroll, so the mark never shows twice. */
.home-hero-sig { line-height: 0; }
.home-hero-sig img { display: block; width: clamp(220px, 24vw, 380px); height: auto; filter: invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.25)); }
.home-hero-lede > span:first-child { font-size: clamp(22px, 2.2vw, 32px); font-weight: 400; margin-bottom: .25em; }
.home-hero-title { gap: 22px; margin-bottom: 22px; align-items: flex-end; }
.home-hero-title .reel-player.is-inline .reel-btn { transform: none; }
.home-page:not(.is-scrolled) .nav-brand { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .home-hero-sig img { width: 200px; } }
/* Work grid: the title sits under each card all the time; hover only starts the moving preview — no dark scrim
   sliding over the image (it repeated the visible info, and its 8px slide flashed a strip at the top) */
.preview-overlay { display: none !important; }
.preview-info { display: flex !important; align-items: baseline; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
.preview-title { margin: 0; font-size: var(--fs-h3) !important; font-weight: 400; line-height: 1.3; color: #080808; }
.preview-info p { color: #8a8a8a; }
.preview-card .video-preview-frame { transition: opacity .25s; }
.preview-card:hover .preview-title { color: #8a8a8a; }

/* Case studies: one column instead of a sticky left sidebar + scrolling right pane. The project header (title, year,
   short overview) opens the page, the work comes right after it, and the details/credits move to the end.
   The details' repeat of the overview is dropped. No click-to-zoom anywhere. */
.project-reference-layout { display: block !important; height: auto !important; }
.project-sidebar { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
  border: 0 !important; border-image: none !important; box-sizing: border-box; max-width: 1492px; margin: 0 auto;
  padding: clamp(36px, 4.5vw, 72px) clamp(26px, 3vw, 56px) clamp(28px, 3vw, 44px) !important;
  display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 112px); row-gap: 16px; align-content: start; }
.project-sidebar > * { grid-column: 1; }
.project-sidebar > .project-back-link { grid-column: 1 / -1; justify-self: start; }
.project-sidebar > .project-sidebar-overview { grid-column: 2; grid-row: 2 / span 6; align-self: start; }
.project-sidebar > .project-sidebar-overview p:first-child { margin-top: 0; }
.project-sidebar h1, .project-sidebar h1[class] { font-size: var(--fs-display) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -0.02em; }
.project-content { height: auto !important; overflow: visible !important; overscroll-behavior: auto !important; box-sizing: border-box; max-width: 1492px; margin: 0 auto;
  display: flex !important; flex-direction: column; padding-top: 0 !important; }
.project-content > * { max-width: 100%; }
.project-content > .project-info-grid { order: 40; }
.project-content > .next-project { order: 90; }
.project-content > .page-end { order: 99; }
.project-info-intro { display: none !important; }
.project-feature-media { width: 100% !important; margin-bottom: 0 !important; }
.illustration-lightbox { display: none !important; }
@media (max-width: 760px) {
  .project-sidebar { grid-template-columns: 1fr; padding: 28px 18px 20px !important; }
  .project-sidebar > .project-sidebar-overview { grid-column: 1; grid-row: auto; }
}
.project-page, .project-page-reference { height: auto !important; min-height: 100vh; overflow: visible !important; }
.project-sidebar-overview { max-width: 600px; }
.project-page .project-sidebar-overview p { font-size: var(--fs-h3) !important; line-height: 1.45 !important; color: #080808; margin: 0 0 .6em; }
/* Illustration: two pieces per row at most (rows are re-split in v1.js), each row capped at ~82% of the window height
   and centred; nothing opens on click any more. Deep links from the home strip land on the piece itself. */
.illustration-row { justify-content: center; }
.illustration-image-link, .series-slide { cursor: default !important; }
.illustration-item, .illustration-board { scroll-margin-top: 32px; }
/* FIFA: one plain sentence under the film names every piece of the campaign; each name jumps to its section */
.project-overview-line { margin: 0; max-width: 980px; font-size: clamp(17px, 1.6vw, 24px) !important; font-weight: 300; line-height: 1.45; color: #080808; }
.project-overview-line a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(8,8,8,.3); transition: text-decoration-color .2s; }
.project-overview-line a:hover, .project-overview-line a:focus-visible { text-decoration-color: #080808; }
.project-process-block[id] { scroll-margin-top: 24px; }
/* Card text: title, then the year / client line; on hover that line gives way to a one-sentence description
   (both share one grid cell, so nothing below moves). The image itself stays clean — no scrim. */
.preview-info { display: grid !important; grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
.preview-info > p, .preview-info > .preview-desc { grid-area: 2 / 1; transition: opacity .25s; }
.preview-info > .preview-desc { opacity: 0; color: #080808; font-size: var(--fs-body) !important; font-weight: 300; line-height: 1.45; max-width: 100%; }
.preview-card:hover .preview-info > p, .preview-card:focus-visible .preview-info > p { opacity: 0; }
.preview-card:hover .preview-desc, .preview-card:focus-visible .preview-desc { opacity: 1; }
.preview-card:hover .preview-title { color: #080808; }
@media (hover: none) { .preview-info > p { opacity: 0; } .preview-info > .preview-desc { opacity: 1; color: #6b6b6b; } }
/* Sound switch lines up with the middle of the signature's letters, not its bottom (the "y" tail hangs below) */
.home-hero-title { --sig-w: clamp(220px, 24vw, 380px); align-items: flex-start !important; }
.home-hero-sig img { width: var(--sig-w); }
.home-hero-title .reel-player.is-inline { margin-top: calc(var(--sig-w) * 98 / 480 * .42 - 19px); }
@media (max-width: 760px) { .home-hero-title { --sig-w: 200px; } .home-hero-title .reel-player.is-inline { margin-top: calc(var(--sig-w) * 98 / 480 * .42 - 18px); } }
/* Hero intro: the short two lines show first (Rich); hovering them — or tapping "More about me" — opens the full intro
   (Michal). One smooth move: the short text fades out, the block glides to the new height (it grows upward, since the
   hero copy sits on the bottom), then the full text fades in. Both texts are pinned to the block's bottom edge, so
   nothing jumps; v1.js sets the block's height in px so it can transition. */
.hero-intro { position: relative; height: auto; transition: height .55s cubic-bezier(.22, 1, .36, 1); }
.hero-intro.is-ready .hero-intro-short, .hero-intro.is-ready .hero-intro-full { position: absolute; left: 0; right: 0; bottom: 0; }
.hero-intro-short, .hero-intro-full { transition: opacity .22s ease, visibility 0s linear .22s; }
.hero-intro-full { opacity: 0; visibility: hidden; }
.hero-intro.is-open .hero-intro-short { opacity: 0; visibility: hidden; }
.hero-intro.is-open .hero-intro-full { opacity: 1; visibility: visible; transition: opacity .35s ease .24s, visibility 0s; }
.hero-intro:not(.is-open) .hero-intro-short { transition: opacity .35s ease .24s, visibility 0s; }
.hero-intro:not(.is-ready) .hero-intro-full { display: none; }
.hero-intro-full .home-hero-lede > span:first-child { font-size: inherit; font-weight: 300; margin-bottom: 0; }
.hero-intro-more { margin-top: 12px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.72); font: inherit; font-size: var(--fs-small) !important;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); }
.hero-intro-more:hover { color: #fff; }
.hero-intro-more:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .hero-intro, .hero-intro-short, .hero-intro-full { transition: none !important; } }
.hero-intro-more:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .hero-intro-full .hero-intro-more { display: none; } }
/* Hero back to the earlier scale: the signature is about as tall as the old "Hey, I'm Wenxin" title, and the first
   line is the same size as the other intro lines */
.home-hero-title { --sig-w: clamp(190px, 17.5vw, 270px); margin-bottom: 14px; gap: 18px; }
.hero-intro-short .home-hero-lede > span:first-child { font-size: inherit; font-weight: 300; margin-bottom: 0; }
@media (max-width: 760px) { .home-hero-title { --sig-w: 180px; gap: 14px; } }
/* Intro glide, take 2 — softer: a longer ease-in-out height move, and the two texts overlap instead of waiting for
   each other. The incoming text rises 6px out of a light blur; the outgoing one sinks and blurs a little as it fades. */
.hero-intro { transition: height .72s cubic-bezier(.45, 0, .15, 1); }
.hero-intro-short, .hero-intro-full { will-change: opacity, transform, filter;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease, visibility 0s linear .3s; }
.hero-intro-full { transform: translateY(6px); filter: blur(4px); }
.hero-intro.is-open .hero-intro-short { transform: translateY(-4px); filter: blur(3px); }
.hero-intro.is-open .hero-intro-full, .hero-intro:not(.is-open) .hero-intro-short { transform: none; filter: none;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1) .16s, transform .7s cubic-bezier(.22, 1, .36, 1) .16s, filter .55s ease .16s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .hero-intro-short, .hero-intro-full { transform: none !important; filter: none !important; } }
/* Nav labels match the hero intro text size */
.nav-link, .top-nav .nav-link { font-size: clamp(15px, 1.36vw, 20px) !important; font-weight: 300 !important; }
@media (max-width: 760px) { .nav-link, .top-nav .nav-link { font-size: 15px !important; } }
/* Nav signature scales with the nav labels (same clamp), sized so its letters read at the labels' weight and height;
   nudged down a touch so the letters (not the "y" tail) sit level with the text */
.nav-brand { font-size: clamp(15px, 1.36vw, 20px); }
.nav-brand img { height: 1.6em; transform: translateY(.13em); }
@media (max-width: 760px) { .nav-brand { font-size: 15px; } }

/* Spider-Man case study, cleaned up: the two finished templates open the page side by side, the campaign numbers sit
   in one row under them, the process steps read across in columns, the seven concepts are one even grid of identical
   tiles, and the facts are a short three-column list. */
.spider-finals { display: flex !important; justify-content: center; gap: clamp(16px, 2.5vw, 40px); }
.spider-final-clip { margin: 0; flex: 0 1 auto; }
.spider-final-clip video { display: block; height: min(78vh, 760px); width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #000; }
.spider-impact { border-top: 1px solid rgba(8,8,8,.12); border-bottom: 1px solid rgba(8,8,8,.12); padding: 22px 0; }
.spider-impact dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.spider-impact dl > div { min-width: 0; }
.spider-impact dt { margin: 0 0 6px; font-size: var(--fs-small) !important; font-weight: 400; color: #8a8a8a; }
.spider-impact dd { margin: 0; font-size: var(--fs-h2) !important; font-weight: 400; line-height: 1.1; color: #080808; }
/* process steps across, not a tall stack */
.project-detail-tiktok-ep-spider-verse .project-process-intro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px !important; }
/* concepts: four across, identical tiles, short captions */
.project-detail-tiktok-ep-spider-verse .spider-concept-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
.project-detail-tiktok-ep-spider-verse .spider-concept-card:last-child { grid-column: auto !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start; gap: 14px; }
.project-detail-tiktok-ep-spider-verse .spider-concept-image { aspect-ratio: 4 / 3; background: #f2f2f2; border-radius: 6px; }
.project-detail-tiktok-ep-spider-verse .spider-concept-image img { object-fit: contain; }
.spider-concept-card figcaption strong { font-weight: 400 !important; font-size: var(--fs-body) !important; color: #080808; }
.spider-concept-card figcaption p, .spider-concept-credit { font-weight: 300 !important; font-size: var(--fs-small) !important; }
.spider-synthesis-flow strong { font-weight: 400 !important; font-size: var(--fs-body) !important; }
.spider-synthesis-flow li:last-child strong { font-weight: 700 !important; }
/* facts: three short columns */
.project-detail-tiktok-ep-spider-verse .project-info-grid dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.project-detail-tiktok-ep-spider-verse .project-fact-column { display: contents; }
/* credit headings are labels, not links */
.project-credit-item h3 { text-decoration: none !important; }
@media (max-width: 900px) {
  .project-detail-tiktok-ep-spider-verse .project-process-intro, .project-detail-tiktok-ep-spider-verse .spider-concept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .spider-impact dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .spider-finals { gap: 10px; }
  .spider-final-clip { flex: 1 1 0; min-width: 0; }
  .spider-final-clip video { height: auto; width: 100%; }
  .project-detail-tiktok-ep-spider-verse .project-process-intro, .project-detail-tiktok-ep-spider-verse .project-info-grid dl { grid-template-columns: 1fr !important; }
}
.project-detail-tiktok-ep-spider-verse .project-process-step { display: flex !important; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0 !important; }
.project-detail-tiktok-ep-spider-verse .project-process-step::before { display: none !important; }
.project-detail-tiktok-ep-spider-verse .project-process-step p { margin: 0 !important; }

/* Case-study header, take 2 (editorial): back link, then the title across the full width on as few lines as possible,
   then one row under a hairline — small facts on the left (discipline, year, campaign link), the overview on the right
   as a single readable column. Everything starts on the same top line. */
.project-sidebar { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: clamp(16px, 2vw, 32px) !important; row-gap: 0 !important;
  padding-top: clamp(28px, 3.5vw, 56px) !important; padding-bottom: clamp(36px, 4vw, 64px) !important; }
.project-sidebar > * { grid-column: 1 / -1; }
.project-sidebar > .project-back-link { grid-row: 1; margin-bottom: clamp(18px, 2vw, 28px); text-transform: none !important; font-weight: 400 !important; color: #8a8a8a !important; }
.project-sidebar > .project-back-link:hover { color: #080808 !important; }
.project-sidebar > h1 { grid-row: 2; margin: 0 0 clamp(28px, 3vw, 48px) !important; max-width: 16ch; text-wrap: balance; }
.project-sidebar > h1 span { display: inline; }
.project-sidebar > h1 span + span::before { content: " "; }
.project-sidebar > .project-sidebar-meta, .project-sidebar > .project-sidebar-link { grid-column: 1 / span 3; }
.project-sidebar > .project-sidebar-meta { grid-row: 3; align-self: start; border-top: 1px solid rgba(8,8,8,.14); padding-top: 14px;
  display: flex !important; flex-direction: column; gap: 2px; text-transform: none !important; color: #8a8a8a !important; }
.project-sidebar > .project-sidebar-link { grid-row: 4; justify-self: start; margin-top: 12px; text-transform: none !important; font-size: var(--fs-small) !important; letter-spacing: 0 !important; }
.project-sidebar > .project-sidebar-overview { grid-column: 5 / span 7 !important; grid-row: 3 / span 3 !important; max-width: 640px;
  border-top: 1px solid rgba(8,8,8,.14); padding-top: 14px; }
.project-page .project-sidebar-overview p { margin: 0 0 .55em !important; line-height: 1.5 !important; }
.project-page .project-sidebar-overview p:last-child { margin-bottom: 0 !important; }
@media (max-width: 760px) {
  .project-sidebar > .project-sidebar-meta, .project-sidebar > .project-sidebar-link, .project-sidebar > .project-sidebar-overview { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .project-sidebar > .project-sidebar-overview { margin-top: 20px; border-top: 0; padding-top: 0; }
}
.project-page .project-sidebar-overview p { max-width: none !important; width: auto !important; }
.project-sidebar > h1 { max-width: none; }
.project-sidebar-overview { gap: 0 !important; max-width: 640px !important; }
/* FIFA › Style Frame Iterations: the three rounds side by side in one row, read left to right; caption under each */
.fifa-style-iterations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px) !important; align-items: start; }
.fifa-style-iteration { display: flex !important; flex-direction: column-reverse; gap: 14px !important; }
.fifa-style-iteration:not(:last-child)::after { display: none !important; }
.fifa-style-iteration img { border-radius: 4px; }
.fifa-style-iteration figcaption { display: block !important; }
.fifa-style-iteration figcaption span { display: block; margin-bottom: 4px; font-size: var(--fs-small) !important; font-weight: 400 !important; text-transform: none !important; color: #8a8a8a; }
.fifa-style-iteration figcaption strong { display: block; margin-bottom: 4px; font-size: var(--fs-body) !important; font-weight: 400 !important; color: #080808; }
.fifa-style-iteration.is-final figcaption strong::after { content: none !important; }
.fifa-style-iteration figcaption p { font-size: var(--fs-small) !important; font-weight: 300 !important; color: #6b6b6b; }
@media (max-width: 760px) { .fifa-style-iterations { grid-template-columns: 1fr; gap: 28px !important; } }
.fifa-style-iteration .fifa-structured-copy { display: block !important; }
.fifa-style-iteration img { aspect-ratio: 2400 / 1263; object-fit: cover; }

/* FIFA page hierarchy: the campaign is six pieces. Each piece after the film opens as a clear chapter — a hairline,
   a small number, a big name and one grey line — and its work follows. The film's and the template's process sit in
   closed "How it was made" folds, so the page reads as work first, text only on request. */
.fifa-chapter { display: flex !important; flex-direction: column; gap: clamp(18px, 2vw, 28px) !important;
  margin-top: clamp(48px, 6vw, 96px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid rgba(8,8,8,.14); }
.fifa-chapter::before { content: attr(data-n); font-size: var(--fs-small); color: #8a8a8a; letter-spacing: .04em; margin-bottom: -10px; }
.fifa-chapter > .project-process-copy { display: flex !important; flex-direction: column; gap: 8px; max-width: 760px; }
.fifa-chapter > .project-process-copy h3 { font-size: var(--fs-h1) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.01em; margin: 0 !important; }
.fifa-chapter > .project-process-copy p { font-size: var(--fs-body) !important; color: #6b6b6b !important; margin: 0 !important; }

.process-fold { border-top: 1px solid rgba(8,8,8,.14); border-bottom: 1px solid rgba(8,8,8,.14); }
.process-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; padding: 18px 0; }
.process-fold > summary::-webkit-details-marker { display: none; }
.process-fold > summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 300; line-height: 1; color: #080808; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.process-fold[open] > summary::after { transform: rotate(45deg); }
.process-fold-title { font-size: var(--fs-h3); font-weight: 400; color: #080808; }
.process-fold-hint { font-size: var(--fs-small); color: #8a8a8a; }
.process-fold > summary:hover .process-fold-title { color: #8a8a8a; }
.process-fold-body { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); padding: 12px 0 clamp(36px, 4vw, 56px); }
@media (max-width: 760px) { .process-fold-hint { display: none; } }
#ep-template .project-asset-frame, #ep-template .project-media-stack > * { margin-left: auto; margin-right: auto; }

/* Every case study: the finished pieces are chapters (hairline, number, big name, one grey line, then the work);
   the process sits in one closed "How it was made" fold just before the project details. Same look as FIFA. */
.case-chapter { display: flex !important; flex-direction: column; gap: clamp(18px, 2vw, 28px) !important;
  padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid rgba(8,8,8,.14); margin-top: clamp(24px, 3vw, 48px); }
.case-chapter[data-n]::before { content: attr(data-n); font-size: var(--fs-small); color: #8a8a8a; letter-spacing: .04em; margin-bottom: -10px; }
.case-chapter > .project-process-copy { display: flex !important; flex-direction: column; gap: 8px; max-width: 760px; }
.case-chapter > .project-process-copy h3, .case-chapter > h2:first-child, .case-chapter > header h2 { font-size: var(--fs-h1) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.01em; margin: 0 !important; text-transform: none !important; }
.case-chapter > .project-process-copy p { font-size: var(--fs-body) !important; color: #6b6b6b !important; margin: 0 !important; }
.project-content > .process-fold.is-end { order: 30; margin-top: clamp(24px, 3vw, 48px); }
/* Roco's old hairline between blocks is replaced by the chapter rule */
.project-detail-roco-kingdom-ui-motion .case-chapter + .case-chapter { border-top: 1px solid rgba(8,8,8,.14) !important; padding-top: clamp(20px, 2vw, 28px) !important; margin-top: clamp(48px, 6vw, 96px) !important; }
/* Game Template case study: its title sits one level deeper, inside the first block */
.case-chapter.game-template-case-studies > .project-process-block:first-child > .project-process-copy { display: flex !important; flex-direction: column; gap: 8px; max-width: 760px; }
.case-chapter.game-template-case-studies > .project-process-block:first-child > .project-process-copy h3 { font-size: var(--fs-h1) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.01em; margin: 0 !important; }
.case-chapter.game-template-case-studies > .project-process-block:first-child > .project-process-copy p { font-size: var(--fs-body) !important; color: #6b6b6b !important; margin: 0 !important; }
/* Case-study header without the category/year line: title, then the overview straight under it (left-aligned, no
   rule), and the campaign link after the overview where a page has one */
.project-sidebar > .project-sidebar-overview { grid-column: 1 / span 8 !important; grid-row: 3 !important; border-top: 0 !important; padding-top: 0 !important; }
.project-sidebar > .project-sidebar-link { grid-column: 1 / -1 !important; grid-row: 4 !important; margin-top: 18px; }
@media (max-width: 760px) { .project-sidebar > .project-sidebar-overview { grid-column: 1 / -1 !important; margin-top: 0; } }
/* Case-study overview reads as one paragraph: its sentences run on instead of sitting on separate lines */
.project-page .project-sidebar-overview { display: block !important; max-width: 760px !important; }
.project-page .project-sidebar-overview p { display: inline !important; margin: 0 !important; }
.project-page .project-sidebar-overview p + p::before { content: " "; }

/* Quieter structure: no chapter numbers and no rules between chapters — space alone separates the pieces; the
   process fold is a single plain text toggle with no lines around it */
.fifa-chapter, .case-chapter { border-top: 0 !important; padding-top: 0 !important; margin-top: clamp(64px, 8vw, 128px) !important; }
.fifa-chapter::before, .case-chapter::before { content: none !important; }
.project-detail-roco-kingdom-ui-motion .case-chapter + .case-chapter { border-top: 0 !important; padding-top: 0 !important; }
.fifa-chapter > .project-process-copy p, .case-chapter > .project-process-copy p { max-width: 560px; }
.process-fold { border: 0 !important; }
.process-fold > summary { padding: 6px 0; display: inline-flex; gap: 10px; }
.process-fold > summary::after { margin-left: 0; font-size: 18px; }
.process-fold-title { font-size: var(--fs-body); color: #6b6b6b; }
.process-fold > summary:hover .process-fold-title { color: #080808; }

/* ==========================================================================
   Case-study type scale — three sizes only, one typeface, sentence case:
     Heading 28px / 700  — chapter and section titles, campaign numbers
     Body    15px / 300  — all running text; item titles use the same size at 500
     Small   13px / 400  — labels, times, captions, credits lines
   Everything inside the content area is reset to Body first, then promoted or demoted.
   ========================================================================== */
.project-page .project-content :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, strong, b, em, span, small, figcaption, td, th, a, summary, label, pre, code, div) {
  font-size: 15px !important; line-height: 1.6 !important; letter-spacing: 0 !important; text-transform: none !important; }
.project-page .project-content :is(p, li, dd, td, figcaption, span, em, a, div) { font-weight: 300 !important; }
.project-page .project-content :is(h3, h4, h5, h6, strong, b, th) { font-weight: 500 !important; color: #080808 !important; }
/* Heading */
.project-page .project-content :is(.case-chapter > .project-process-copy h3, .fifa-chapter > .project-process-copy h3,
  .case-chapter.game-template-case-studies > .project-process-block:first-child > .project-process-copy h3,
  .project-process > h2, .project-process-block > .project-process-copy h3, .project-info-grid > h2, .spider-impact dd) {
  font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: #080808 !important; }
/* Small */
.project-page .project-content :is(dt, small, figcaption span, .spider-concept-credit, .spider-concept-card figcaption > span, .spider-synthesis-flow span,
  .fifa-style-iteration figcaption > span, .project-credit-item p, .project-media-caption *, .page-carousel-counter, .series-badge,
  .process-fold-title, pre, code, table td:first-child, .project-metrics-note, li > span:first-child:not(:only-child)) {
  font-size: 13px !important; font-weight: 400 !important; }
.project-page .project-content .process-fold-title { color: #6b6b6b !important; }
@media (max-width: 760px) {
  .project-page .project-content :is(.case-chapter > .project-process-copy h3, .fifa-chapter > .project-process-copy h3,
    .case-chapter.game-template-case-studies > .project-process-block:first-child > .project-process-copy h3,
    .project-process > h2, .project-process-block > .project-process-copy h3, .project-info-grid > h2, .spider-impact dd) { font-size: 24px !important; }
}
/* Section headings sit above their content across the full width, so a title stays on one line */
.project-page .project-process, .project-page .project-process-copy { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; }
.project-page .project-process > h2, .project-page .project-process-copy > h3 { white-space: normal; max-width: none !important; }
.project-page .project-process-copy > p { max-width: 640px; }
.project-page .project-info-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 18px !important; }
.project-page .project-info-grid > h2 { align-self: start; }

/* Fewer text styles, not just fewer sizes. In case-study content there are exactly four looks:
   heading (28/700 black) · item title (15/500 black) · text (15/300 dark grey) · label (13/400 light grey).
   Lists that were laid out as label | title | description tables become simple stacked items with no rules. */
.project-page .project-content :is(p, li, dd, td, figcaption, em) { color: #4a4a4a !important; }
.project-page .project-content :is(dt, small, .spider-concept-credit, .spider-concept-card figcaption > span, .spider-synthesis-flow span,
  .fifa-style-iteration figcaption > span, .fifa-ep-template-decisions li > span, li > span:first-child:not(:only-child), table td:first-child) { color: #8a8a8a !important; }
.project-page .project-content .case-chapter > .project-process-copy p, .project-page .project-content .fifa-chapter > .project-process-copy p { color: #4a4a4a !important; }

/* FIFA › Design Process: three decisions side by side, each label / title / text stacked, no lines */
.fifa-ep-template-process { border-top: 0 !important; padding-top: 0 !important; }
.fifa-ep-template-decisions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 3vw, 40px) !important; border: 0 !important; }
.fifa-ep-template-decisions li { display: flex !important; flex-direction: column; gap: 6px !important; border: 0 !important; padding: 0 !important; }
.fifa-ep-template-decisions .fifa-structured-copy { display: flex !important; flex-direction: column; gap: 6px; }
/* Final storyboard is a section of its own: same heading as the others, text under it, beats without dividers */
.fifa-ep-storyboard figcaption { display: flex !important; flex-direction: column; gap: 10px !important; }
.project-page .project-content .fifa-ep-storyboard figcaption > strong { font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: #080808 !important; }
.fifa-ep-storyboard figcaption > p { max-width: 640px; }
.fifa-ep-storyboard-beats { border: 0 !important; gap: clamp(16px, 2vw, 32px) !important; }
.fifa-ep-storyboard-beats li, .fifa-ep-storyboard-beats li + li { border: 0 !important; padding: 0 !important; margin: 0 !important; gap: 6px !important; }
@media (max-width: 760px) { .fifa-ep-template-decisions { grid-template-columns: 1fr !important; } }
/* one grey for all text, one lighter grey for all labels (the leftovers had six slightly different greys) */
.project-page .project-content :is(p, li, dd, td, figcaption, em, span, a, caption, label):not(pre, pre *, .reusable-prompt-content > a, .reusable-prompt-content > a *) { color: #4a4a4a !important; }
.project-page .project-content :is(h1, h2, h3, h4, h5, h6, strong, b, th) { color: #080808 !important; }
.project-page .project-content :is(dt, small, figcaption span, .spider-concept-credit, .spider-concept-card figcaption > span, .spider-synthesis-flow span,
  .fifa-style-iteration figcaption > span, .project-credit-item p, .project-media-caption, .project-media-caption *, .page-carousel-counter, .series-badge,
  .process-fold-title, table td:first-child, .project-metrics-note, li > span:first-child:not(:only-child), .fifa-ep-template-decisions li > span) { color: #8a8a8a !important; }
.project-page .project-content .spider-synthesis-flow li:last-child strong { font-weight: 500 !important; }
.project-page .project-content .process-fold > summary:hover .process-fold-title { color: #080808 !important; }
.project-page .project-content .case-chapter.game-template-case-studies > .project-process-block:first-child > .project-process-copy p { color: #4a4a4a !important; }
/* End of a case study: no rules under the details or above "Next project" — space separates them */
.project-page .project-info-grid, .project-page .project-credit-grid { border-top: 0 !important; border-bottom: 0 !important; border-image: none !important; }
.project-page .next-project { border-top: 0 !important; border-bottom: 0 !important; border-image: none !important; margin-top: clamp(32px, 4vw, 64px); }
/* Names never split across lines (e.g. "Spider-Man: / Brand New Day"); paragraphs avoid ragged short last lines */
.nb { white-space: nowrap; }
.project-page :is(.project-sidebar-overview, .project-content) p { text-wrap: pretty; }
/* Credits read like Project Details: role as the small grey label, names as normal text; protected names (.nb) never
   change size or colour inside a line */
.project-page .project-content .nb { font: inherit !important; color: inherit !important; }
.project-page .project-content .project-credit-item h3 { font-size: 13px !important; font-weight: 400 !important; color: #8a8a8a !important; margin: 0 0 4px !important; }
.project-page .project-content .project-credit-item p { font-size: 15px !important; font-weight: 300 !important; color: #4a4a4a !important; }
main.project-page .project-content .project-info-grid .project-credit-item > p { font-size: 15px !important; font-weight: 300 !important; color: #4a4a4a !important; }
main.project-page .project-content .project-info-grid .project-credit-item > h3 { font-size: 13px !important; font-weight: 400 !important; color: #8a8a8a !important; }
main.project-page .project-content .project-info-grid span.nb, main.project-page .project-content p span.nb, main.project-page .project-sidebar span.nb { font: inherit !important; color: inherit !important; }
/* "My role" — one line right under the intro: small grey label, then the role in normal text */
.project-sidebar > .project-role { grid-column: 1 / span 8 !important; grid-row: 4 !important; margin: 14px 0 0; font-size: var(--fs-h3) !important; font-weight: 300; line-height: 1.5; color: #080808; }
.project-role > span { display: inline-block; margin-right: 12px; font-size: 13px; font-weight: 400; color: #8a8a8a; }
.project-sidebar > .project-sidebar-link { grid-row: 5 !important; }
@media (max-width: 760px) { .project-sidebar > .project-role { grid-column: 1 / -1 !important; } }
.project-page .project-sidebar > .project-role { max-width: none !important; white-space: nowrap; }
@media (max-width: 760px) { .project-page .project-sidebar > .project-role { white-space: normal; } }
/* Case-study title a size down; "My role" label is the same size as the role text, just grey */
.project-page .project-sidebar > h1, .project-page .project-sidebar > h1[class] { font-size: clamp(32px, 3.4vw, 52px) !important; line-height: 1.08 !important; }
.project-page .project-sidebar > .project-role > span { font-size: inherit !important; font-weight: inherit !important; color: #8a8a8a; margin-right: .5em; }
/* Case-study intro: one sentence per line, no gap between lines (sentences wrap only if they are longer than the column) */
.project-page .project-sidebar-overview p { display: block !important; margin: 0 !important; }
.project-page .project-sidebar-overview p + p::before { content: none !important; }
.project-page .project-sidebar > .project-sidebar-overview { grid-column: 1 / -1 !important; max-width: 980px !important; }
.project-page .project-sidebar-overview p { text-wrap: balance; }
.project-page .project-sidebar > .project-role > span { color: inherit !important; margin-right: .3em; }
/* FIFA: the showcase film closes the page as the last chapter, with its "how it was made" fold right after it */
.fifa-film-chapter > .project-feature-media { margin: 0 !important; }
/* Section descriptions: one sentence per line, no gaps, wide enough that most sentences fit on one line */
.project-page .project-content .project-process-copy > p { display: block; margin: 0 !important; max-width: 980px !important; text-wrap: balance; }
.project-page .project-content :is(.fifa-chapter, .case-chapter) > .project-process-copy, .project-page .project-content .case-chapter.game-template-case-studies > .project-process-block:first-child > .project-process-copy { max-width: 980px !important; }
.project-page .project-content :is(.fifa-chapter, .case-chapter) > .project-process-copy p { max-width: 980px !important; }
/* FIFA › Stickers fits in one screen: both sticker grids are 4 across × 6 down, and the mockup in the middle is exactly
   as tall as the grids. Tile size --t is the smaller of what the window height and width allow. */
@media (min-width: 761px) {
  .fifa-sticker-composition {
    --g: 8px;
    --t: min(124px, calc((76vh - 5 * var(--g)) / 6), calc((min(100vw, 1492px) - 2 * clamp(26px, 3vw, 56px) - 2 * var(--g) - 6 * var(--g) - 40px * .5613) / (8 + 6 * .5613)));
    --h: calc(6 * var(--t) + 5 * var(--g));
    display: flex !important; justify-content: center; align-items: center; gap: calc(2 * var(--g)) !important;
  }
  .fifa-sticker-side { display: grid !important; grid-template-columns: repeat(4, var(--t)) !important; grid-auto-rows: var(--t); gap: var(--g) !important; }
  .fifa-sticker-item { width: var(--t); height: var(--t); }
  .fifa-sticker-hero { flex: none; height: var(--h); aspect-ratio: 842 / 1500; border-radius: 10px; }
  .fifa-sticker-hero .project-media-element, .fifa-sticker-hero .project-media-element.is-portrait { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

/* Project details + credits sit right under the intro again, before the work — as one compact fact sheet:
   no "Project Details" / "Credits" headings, every fact a small grey label over its value, four across,
   credits continuing on the same grid. */
.project-page .project-content > .project-info-grid { order: -1 !important; margin: 0 !important; padding: 0 !important; }
.project-page .project-content > .project-info-grid > h2 { display: none !important; }
.project-page .project-content > .project-info-grid + .project-info-grid { margin-top: calc(-1 * clamp(40px, 5vw, 72px) + 20px) !important; }
.project-page .project-info-grid .project-info-body, .project-page .project-info-grid dl { width: 100%; }
.project-page .project-info-grid dl, .project-page .project-credit-list {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px 24px !important; margin: 0 !important; }
.project-page .project-info-grid .project-fact-column { display: contents !important; }
.project-page .project-info-grid .project-fact-item, .project-page .project-credit-item { display: flex !important; flex-direction: column; gap: 4px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.project-page .project-info-grid dd { margin: 0; display: flex; flex-direction: column; }
@media (max-width: 900px) { .project-page .project-info-grid dl, .project-page .project-credit-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.project-page .project-content > .project-info-grid + .project-info-grid { margin-top: -22px !important; }
.project-page .project-content > .project-info-grid:last-of-type { margin-bottom: clamp(24px, 3vw, 48px) !important; }
/* FIFA card: its clip is on pure white, so it melted into the page — tint the card a shade lighter than the nav bar
   (nav ≈ #f6f9ff) and multiply the clip over it, so the clip's white takes on the tint */
.preview-card-tiktok-ep-fifa-world-cup .video-preview-frame { background: #f9fbff !important; }
.preview-card-tiktok-ep-fifa-world-cup .video-preview-frame > video, .preview-card-tiktok-ep-fifa-world-cup .video-preview-frame > .preview-cover-image { mix-blend-mode: multiply; }

/* Case-study header, tidied: intro sits close under the title; "My role" is the first cell of the fact grid (same
   label/value pattern as every other fact, its value slightly stronger); multi-value facts read on one line. */
.project-page .project-sidebar > h1 { margin-bottom: clamp(14px, 1.4vw, 22px) !important; }
.project-page .project-sidebar { padding-bottom: clamp(28px, 3vw, 44px) !important; }
.project-page .project-info-grid dd { flex-direction: row !important; flex-wrap: wrap; }
.project-page .project-info-grid dd > span + span::before { content: "\00a0·\00a0"; }
main.project-page .project-content .project-info-grid .project-fact-role dd, main.project-page .project-content .project-info-grid .project-fact-role dd span { color: #080808 !important; font-weight: 500 !important; }
.project-page .project-info-grid .project-fact-role { grid-column: span 2; }
/* multi-value facts flow as text: "A · B · C", wrapping like a sentence (the dot stays at the end of a line) */
.project-page .project-info-grid dd { display: block !important; }
.project-page .project-info-grid dd span { display: inline !important; }
.project-page .project-info-grid dd > span + span::before { content: none !important; }
.project-page .project-info-grid dd > span:not(:last-child)::after { content: " ·"; margin-right: .35em; }
.project-page .project-info-grid dd > span:not(:last-child)::after { content: "\00a0·" !important; }
.project-page .project-info-grid dd > span:not(:last-child)::after { margin-right: 0 !important; }
@media (max-width: 760px) { .project-page .project-info-grid .nb { white-space: normal !important; } }
.project-page .project-info-grid .project-fact-role { grid-column: auto !important; }
.project-page .project-info-grid dl, .project-page .project-credit-list { align-items: start; grid-auto-flow: row; }
/* fix: the black cover image sat under the multiplied clip and blacked it out (footage only showed through the white
   title letters). The cover is never under the clip now: it is hidden while the clip runs, and it is not multiplied. */
.preview-card-tiktok-ep-fifa-world-cup .video-preview-frame > .preview-cover-image { mix-blend-mode: normal !important; }
.preview-card-tiktok-ep-fifa-world-cup .video-preview-frame.is-moving > .preview-cover-image { visibility: hidden; }
/* "How it was made" sits right under the work above it (16px), not after a full section gap; its "+" is the same grey */
.project-page .project-content > .process-fold, .project-page .project-content > .process-fold.is-end { margin-top: -26px !important; }
.project-page .process-fold > summary::after { color: #8a8a8a; }
.project-page .process-fold > summary:hover::after { color: #080808; }
.project-page .project-content { row-gap: 42px !important; gap: 42px !important; }
/* FIFA › EP Template: the template and two creator videos made with it (TikTok's own player), side by side at one height */
.ep-row { display: flex; justify-content: center; gap: clamp(16px, 2vw, 32px); }
.ep-clip { margin: 0; flex: 0 1 auto; display: flex; flex-direction: column; gap: 10px; }
.ep-frame { height: min(70vh, 640px); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #000; }
.ep-frame > video, .ep-frame > iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.project-page .project-content .ep-clip figcaption, .project-page .project-content .ep-clip figcaption a { font-size: 13px !important; color: #8a8a8a !important; text-decoration: none; }
.project-page .project-content .ep-clip figcaption a:hover { color: #080808 !important; }
@media (max-width: 760px) { .ep-row { gap: 8px; } .ep-clip { flex: 1 1 0; min-width: 0; } .ep-frame { height: auto; width: 100%; } }

/* Facts, take 3 — a quiet two-column table instead of a 4-up grid: label on the left (fixed width), value on the
   right, one row per fact, credits continuing the same table. Every value uses the same style (role included);
   multi-item values only break between items, never inside one. */
.project-page .project-info-grid dl, .project-page .project-credit-list { display: block !important; max-width: 920px; }
.project-page .project-info-grid .project-fact-item, .project-page .project-credit-item {
  display: grid !important; grid-template-columns: 140px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 5px 0 !important; }
.project-page .project-info-grid .project-fact-item > dt, .project-page .project-credit-item > h3 { margin: 0 !important; }
.project-page .project-info-grid dd > span, .project-page .project-credit-item > p { white-space: nowrap; }
.project-page .project-credit-item > p { white-space: normal; }
main.project-page .project-content .project-info-grid .project-fact-role dd, main.project-page .project-content .project-info-grid .project-fact-role dd span { color: #4a4a4a !important; font-weight: 300 !important; }
.project-page .project-content > .project-info-grid + .project-info-grid { margin-top: -42px !important; }
@media (max-width: 760px) {
  .project-page .project-info-grid .project-fact-item, .project-page .project-credit-item { grid-template-columns: 100px minmax(0, 1fr); column-gap: 14px; }
  .project-page .project-info-grid dd > span { white-space: normal; }
}
.project-page .credits-fold { margin: 0 !important; }
.project-page .credits-fold > summary { padding: 5px 0; }
.project-page .credits-fold[open] > .project-credit-list { margin-top: 6px !important; }
/* EP row: template on its own, then the two fan videos as a pair — left-aligned, one row, a wider gap between groups */
.ep-row { justify-content: flex-start !important; align-items: flex-start; gap: clamp(40px, 5vw, 88px) !important; }
.ep-fans { display: flex; gap: clamp(12px, 1.4vw, 20px); }
.ep-frame { height: min(62vh, 560px) !important; }
@media (max-width: 760px) { .ep-row { gap: 16px !important; } .ep-fans { flex: 2 1 0; min-width: 0; gap: 8px; } .ep-fans .ep-clip { flex: 1 1 0; min-width: 0; } .ep-row > .ep-clip { flex: 1 1 0; } }
/* labels never wrap; the label column is wide enough for the longest credit role */
.project-page .project-info-grid .project-fact-item, .project-page .project-credit-item { grid-template-columns: 200px minmax(0, 1fr) !important; }
.project-page .project-info-grid dt, .project-page .project-credit-item > h3 { white-space: nowrap; }
@media (max-width: 760px) { .project-page .project-info-grid .project-fact-item, .project-page .project-credit-item { grid-template-columns: 1fr !important; row-gap: 2px; } }
/* no signature footer any more: pages end on "Next project" / the last section with a calm bottom margin */
.project-page .next-project { margin-bottom: clamp(48px, 6vw, 96px); }
.home-page .illus-marquees { margin-bottom: clamp(56px, 7vw, 112px); }
/* bottom breathing room lives inside the white page (a margin escaped it and showed the beige body colour) */
.home-page .illus-marquees { margin-bottom: 0 !important; }
.project-page .next-project { margin-bottom: 0 !important; }
main.home-page { padding-bottom: clamp(56px, 7vw, 112px) !important; }
main.project-page { padding-bottom: clamp(48px, 6vw, 96px) !important; }
/* fold toggles: the "+" is drawn at the same size as its label and centred on the text line */
.project-page .process-fold > summary { align-items: center !important; }
.project-page .process-fold > summary::after { font-size: 1.15em !important; line-height: 1 !important; font-weight: 300; display: inline-block; transform-origin: 50% 50%; }
.project-page .process-fold > summary .process-fold-title { line-height: 1.2 !important; }
/* "+" is the same size as its label (13px), sits on the same baseline, and is nudged so its centre meets the
   label's optical centre (measured: +0.05em) */
.project-page .process-fold > summary { font-size: 13px !important; align-items: baseline !important; gap: .55em !important; }
.project-page .process-fold > summary::after { font-size: 1em !important; transform: translateY(.05em); }
.project-page .process-fold[open] > summary::after { transform: translateY(.05em) rotate(45deg); }
/* TYR storyboard: both boards cropped to their content and shown at one shared height, so tops and bottoms line up */
.tyr-board-row { display: flex; gap: clamp(12px, 1.6vw, 24px); align-items: flex-start; }
.tyr-board-row > img { flex-basis: 0; min-width: 0; width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .tyr-board-row { flex-direction: column; } .tyr-board-row > img { flex-basis: auto; } }
/* Spider-Man opener uses the EP row: the two templates as a pair, a wider gap, then the creator video */
.spider-finals.ep-row { display: flex !important; justify-content: flex-start !important; }
.spider-finals .ep-frame > video { object-fit: cover; }
/* Spider-Man opener holds five clips (two templates + three creators) in one row: each clip is sized from the
   available width so the row never overflows */
.spider-finals .ep-frame { height: min(62vh, 560px, calc((min(100vw, 1492px) - 2 * clamp(26px, 3vw, 56px) - 140px) / 5 * 16 / 9)) !important; }
@media (max-width: 760px) {
  .spider-finals.ep-row { flex-wrap: wrap !important; row-gap: 20px !important; }
  .spider-finals .ep-fans { flex: 1 1 100% !important; }
  .spider-finals .ep-frame { height: auto !important; width: 100% !important; }
}
/* facts table: label and value share one size (15px); the label is told apart by grey alone. The credits toggle
   in the label column matches. */
main.project-page .project-content .project-info-grid dt,
main.project-page .project-content .project-info-grid .project-credit-item > h3,
main.project-page .project-content .credits-fold > summary,
main.project-page .project-content .credits-fold .process-fold-title { font-size: 15px !important; font-weight: 300 !important; line-height: 1.6 !important; }
main.project-page .project-content .credits-fold > summary { padding: 5px 0 !important; }
/* (higher priority than the earlier "small label" rule, via an id in :is) */
main.project-page .project-content :is(.project-info-grid dt, .project-info-grid .project-credit-item > h3, .credits-fold > summary, .credits-fold .process-fold-title, #_label_15) {
  font-size: 15px !important; font-weight: 300 !important; line-height: 1.6 !important; }
main.project-page .project-content :is(.project-credit-item > p, .project-credit-item > h3, #_credit_row) { margin: 0 !important; line-height: 1.6 !important; }
main.project-page .project-content .project-credit-item { padding: 5px 0 !important; row-gap: 0 !important; }
/* ADID › Final Delivery: five photos — three across on top, the last two share the second row at half width each */
.adid-delivery-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 14px !important; }
.adid-delivery-grid > .project-asset-frame { grid-column: span 2; margin: 0 !important; width: auto !important; }
.adid-delivery-grid > .project-asset-frame:nth-child(n+4) { grid-column: span 3; }
.adid-delivery-grid > .project-asset-frame img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.adid-delivery-grid > .project-asset-frame:nth-child(n+4) img { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .adid-delivery-grid { grid-template-columns: 1fr 1fr !important; } .adid-delivery-grid > .project-asset-frame, .adid-delivery-grid > .project-asset-frame:nth-child(n+4) { grid-column: span 1; } .adid-delivery-grid > .project-asset-frame:first-child { grid-column: span 2; } }
.adid-delivery-grid > .project-asset-frame { aspect-ratio: 4 / 3; height: auto !important; overflow: hidden; }
.adid-delivery-grid > .project-asset-frame:nth-child(n+4) { aspect-ratio: 2 / 1; }
.adid-delivery-grid > .project-asset-frame img { aspect-ratio: auto !important; height: 100% !important; }

/* Round arrow buttons (page carousels + illustration series): no text glyphs — a chevron drawn from two 1.5px
   strokes, sized to the button, and shifted against its own point so its visual centre sits on the circle's centre. */
.page-carousel-btn, .series-nav { font-size: 0 !important; color: transparent !important; }
.page-carousel-btn { position: relative; }   /* series arrows stay absolute: they sit on the image edges */
.page-carousel-btn::before, .series-nav::before {
  content: "" !important; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; box-sizing: border-box;
  border-top: 1.5px solid #080808; border-right: 1.5px solid #080808; }
/* next: chevron points right — rotate, then pull it left by a third of its width so the arrow's mass is centred */
.page-carousel-btn[aria-label*="Next"]::before, .series-next::before {
  transform: translate(-50%, -50%) translateX(-3.2px) rotate(45deg) !important; }
.page-carousel-btn[aria-label*="Prev"]::before, .series-prev::before {
  transform: translate(-50%, -50%) translateX(3.2px) rotate(-135deg) !important; }
.page-carousel-btn:hover::before, .page-carousel-btn:focus-visible::before { border-color: #fff; }
/* Tap to Escape › Editable Art System: both columns share one top and one bottom. The asset grid is 5 × 2 (ten
   pieces, no empty cell); the scene box stretches to the grid's height and shows the scene whole inside it. */
@media (min-width: 761px) {
  .tap-escape-asset-layout { align-items: stretch !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important; gap: 24px !important; }
  .tap-escape-environment, .tap-escape-asset-library { display: flex !important; flex-direction: column; gap: 12px !important; }
  .tap-escape-environment figcaption, .tap-escape-asset-intro { min-height: 0 !important; }
  .tap-escape-environment > div { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; }
  .tap-escape-environment img { width: 100%; height: 100% !important; object-fit: contain; }
  .tap-escape-asset-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; }
}
@media (min-width: 761px) {
  /* the scene image no longer sets the column height — the asset grid does; the scene fills that box */
  .tap-escape-environment > div { position: relative; }
  .tap-escape-environment > div > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; }
}
/* Outfit Builder: process headings use the same two columns as the summary next to the video (320px | gap 72px | text),
   so every paragraph starts on one vertical line; the leftover step-number column is dropped */
@media (min-width: 761px) {
  .project-page .outfit-builder-process-heading { grid-template-columns: 320px minmax(0, 1fr) !important; column-gap: 72px !important; row-gap: 6px !important; }
  .project-page .outfit-builder-process-heading > span { display: none !important; }
  .project-page .outfit-builder-process-heading > h4 { grid-column: 1 !important; margin: 0 !important; }
  .project-page .outfit-builder-process-heading > p { grid-column: 2 !important; max-width: none !important; }
}
@media (max-width: 760px) {
  .project-page .outfit-builder-process-heading { grid-template-columns: minmax(0, 1fr) !important; }
  .project-page .outfit-builder-process-heading > span { display: none !important; }
  .project-page .outfit-builder-process-heading > h4, .project-page .outfit-builder-process-heading > p { grid-column: 1 !important; }
}

/* Game Template › Latest Game Flows: each game = name | description on the Outfit Builder columns, then one row of
   its gameplay video + the step-by-step screens, at one height. No step numbers, no dashed rules. */
.project-page .latest-game-flow { border-top: 0 !important; padding-top: 0 !important; gap: 18px !important; }
.project-page .latest-game-flow-list { gap: clamp(48px, 6vw, 88px) !important; }
.project-page .latest-game-flow figcaption > span { display: none !important; }
@media (min-width: 761px) {
  .project-page .latest-game-flow figcaption { grid-template-columns: 320px minmax(0, 1fr) !important; column-gap: 72px !important; }
  .project-page .latest-game-flow figcaption > strong { grid-column: 1 !important; }
  .project-page .latest-game-flow figcaption > p { grid-column: 2 !important; max-width: none !important; }
}
@media (max-width: 760px) { .project-page .latest-game-flow figcaption { grid-template-columns: 1fr !important; } .project-page .latest-game-flow figcaption > * { grid-column: 1 !important; } }
.latest-game-flow-row { display: flex !important; align-items: stretch; gap: 1.4%; }
.latest-game-flow-video { flex: 0.5625 1 0; min-width: 0; width: 100%; aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: 8px; background: #000; display: block; align-self: center; }
.latest-game-flow-screens { flex-basis: 0; min-width: 0; }
.latest-game-flow-screens img { width: 100%; height: auto; display: block; }
/* COMOTION shows its process openly (no fold) */
.project-content > .process-open { order: 30; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
/* fold toggles: no browser focus box on mouse click; a soft ring only for keyboard focus */
.process-fold > summary:focus { outline: none; }
.process-fold > summary:focus-visible { outline: 2px solid rgba(8,8,8,.25); outline-offset: 4px; border-radius: 4px; }
/* COMOTION's open process starts with the same space as any other section, and its sections are spaced like chapters */
.project-content > .process-open { margin-top: clamp(64px, 8vw, 128px) !important; gap: calc(clamp(64px, 8vw, 128px) + 42px) !important; }
/* Illustration + About titles match the case-study titles: no decorative object, sentence case, same size and spacing */
.listing-hero h1, .about-page .listing-hero h1.about-title { font-size: clamp(32px, 3.4vw, 52px) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; text-transform: none !important; margin-left: 0 !important; }
.listing-hero h1 .title-object { display: none !important; }
.about-page .listing-hero h1.about-title { display: block !important; gap: 0 !important; }
.listing-hero { padding-top: clamp(28px, 3.5vw, 56px) !important; padding-bottom: clamp(28px, 3vw, 44px) !important; min-height: 0 !important; }
.listing-page-illustration .listing-hero .work-title-row, .about-page .listing-hero .work-title-row { min-height: 0 !important; }
.about-page .listing-hero h1.about-title span { text-transform: none !important; }
/* Illustration + About share the case studies' left edge (clamp(26px, 3vw, 56px) inside the 1492px container) */
.listing-page-illustration .listing-hero, .about-page .listing-hero,
.listing-page-illustration .illustration-gallery {
  max-width: 1492px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
  padding-left: clamp(26px, 3vw, 56px) !important; padding-right: clamp(26px, 3vw, 56px) !important; }
@media (max-width: 760px) { .listing-page-illustration .listing-hero, .about-page .listing-hero, .listing-page-illustration .illustration-gallery { padding-left: 18px !important; padding-right: 18px !important; } }
/* About: a short personal intro under the title, styled like the case-study intros (one sentence per line) */
.about-intro { margin-top: clamp(14px, 1.4vw, 22px); max-width: 980px; }
.about-intro p { margin: 0; font-size: var(--fs-h3) !important; font-weight: 300; line-height: 1.5; color: #080808; }
.about-intro .nb { white-space: nowrap; }
main .about-intro p span, main .about-intro .nb { font: inherit !important; text-transform: none !important; letter-spacing: inherit !important; color: inherit !important; }
main .about-intro p { font-size: clamp(17px, 1.4vw, 20px) !important; }

/* About: every table starts on the title's left edge; experience preview sits on the right */
@media (min-width: 761px) {
  .about-page .about-body:before { display: none; }
  .about-page .about-body .about-table { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; padding: 0 43px 0 21px; }
  .about-page .about-body .about-table > * { grid-column: 1; }
  .about-page .about-body .about-table > .about-section-label:not(.about-experience-label) { display: none; }
  .about-page .about-body .about-experience-list { grid-column: 1; grid-row: 1; }
  .about-page .about-body .about-experience-label { grid-column: 2; grid-row: 1; padding-left: 0; padding-right: 0; }
}

/* Case-study end: Next Project closes the page with a short margin; hover tint gets breathing room */
main.project-page { padding-bottom: 24px !important; }
main.project-page .project-content { padding-bottom: 0 !important; }
main.project-page .next-project { padding: 24px 24px 28px !important; margin-inline: -24px; width: calc(100% + 48px); max-width: none; }
@media (max-width: 760px) {
  main.project-page .next-project { min-height: 0 !important; padding: 20px 18px 24px !important; margin-inline: -18px; width: calc(100% + 36px); }
}

/* Case-study header: two sizes only — the title, and 15px for everything else */
main.project-page .project-sidebar :is(.project-back-link, .project-sidebar-link, .project-sidebar-overview p, #_x) {
  font-size: 15px !important; line-height: 24px !important; font-weight: 300 !important; letter-spacing: 0 !important;
}
main.project-page .project-sidebar :is(.project-back-link, #_x) { color: #8a8a8a !important; }
main.project-page .project-sidebar :is(.project-sidebar-overview p, #_x) { color: #4a4a4a !important; }
main.project-page .project-sidebar :is(.project-sidebar-link, #_x) { color: #080808 !important; }

/* Next Project hover: nav blue, full-bleed across the window */
main.project-page .next-project { margin-inline: 0 !important; width: 100% !important; padding-inline: 0 !important; background: transparent !important;
  box-shadow: 0 0 0 100vmax transparent; clip-path: inset(0 -100vmax); transition: background .18s, box-shadow .18s !important; }
main.project-page .next-project:is(:hover, :focus-visible) { background: #f6f9ff !important; box-shadow: 0 0 0 100vmax #f6f9ff; }
@media (max-width: 760px) {
  .ep-row:not(.spider-finals) .ep-frame { height: auto !important; width: 100% !important; }
  .ep-fans:has(> .ep-clip:only-child) { flex: 1 1 0 !important; }
}

/* About: hero and tables share the nav gutter at every width (no centred max-width on the hero) */
@media (min-width: 761px) {
  .about-page .listing-hero.text-hero { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  .about-page .about-body .about-table { padding: 0 var(--gutter) 0 calc(var(--gutter) - 22px) !important; }
}

/* No-break spans take their parent's colour and weight, so headings stay one colour */
.nb { color: inherit !important; font-weight: inherit !important; }
main.project-page .project-content :is(h1, h2, h3, h4, strong) :is(span, #_x) { color: inherit !important; font-weight: inherit !important; }

/* Wide screens: home and case studies sit on the nav gutter instead of a centred column */
@media (min-width: 761px) {
  main.project-page :is(.project-sidebar, .project-content) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  main.home-page .home-hero-copy { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  main.home-page .preview-grid { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}
@media (min-width: 761px) {
  main.home-page .home-illus,
  main.listing-page :is(.listing-hero, .illustration-gallery) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}

/* About previews: one 16:9 frame for every card, whole image/video shown (no crop) */
.about-page .about-preview-card :is(img, video) { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: contain !important; background: #f6f9ff; }

/* About: preview starts on the YEAR / COMPANY / POSITION line */
@media (min-width: 761px) {
  .about-page .about-body .about-experience-section .about-experience-label { padding-top: calc(clamp(26px, 4vw, 48px) + 14px + clamp(20px, 2vw, 30px) + 20px) !important; }
}

/* No grey frames around media */
.about-page .about-preview-card :is(img, video) { border: 0 !important; background: transparent !important; object-position: left top !important; }
.lyric-concept-card, .game-template-ui-standard { border: 0 !important; }

/* About: three life photos under the intro */
.about-life { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); max-width: 980px; margin-top: clamp(28px, 3vw, 44px); }
.about-life img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 10px; }
@media (max-width: 760px) {
  .about-life { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
  .about-life::-webkit-scrollbar { display: none; }
  .about-life img { scroll-snap-align: start; }
}

/* About life photos as loose cards on one ground line (v1.js makes them draggable) */
.about-life.is-playground { display: block !important; position: relative; overflow: visible !important; margin-right: 0 !important; padding-right: 0 !important; max-width: 980px; }
.about-life.is-playground img { position: absolute; left: 0; bottom: 0; width: clamp(104px, 18%, 184px); transform-origin: 50% 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; box-shadow: 0 14px 28px -18px rgba(8, 8, 8, .45); will-change: transform; }
.about-life.is-playground.is-dragging img { cursor: grabbing; }
@media (max-width: 760px) { .about-life.is-playground img { width: 30%; } }

/* About life photos: polaroid pile (v1.js + Matter.js) */
.about-life.is-pile { display: block !important; position: relative; overflow: visible !important; margin-right: 0 !important; padding-right: 0 !important; max-width: 980px; touch-action: pan-y; }
.about-life.is-pile img { position: absolute; left: 0; top: 0; box-sizing: border-box; aspect-ratio: auto; padding: 6px; background: #fff; border-radius: 2px; object-fit: cover; box-shadow: 0 1px 2px rgba(8, 8, 8, .12), 0 10px 24px -10px rgba(8, 8, 8, .35); cursor: grab; user-select: none; -webkit-user-drag: none; will-change: transform; transform: translate(0, -200vh); }
.about-life.is-pile.is-dragging, .about-life.is-pile.is-dragging img { cursor: grabbing; }
.about-life.is-pile { max-width: none !important; }

/* About skills: the table uses the full row (no preview beside it) and each tool group sits on one line */
@media (min-width: 761px) {
  .about-page .about-body .about-skills-table > * { grid-column: 1 / -1 !important; }
}
@media (min-width: 761px) {
  /* same first column as the other tables, so the icons start on their text line */
  .about-page .about-body .about-skills-table .about-row { grid-template-columns: minmax(150px, .78fr) minmax(240px, 1.5fr) minmax(200px, 1.18fr) 396px !important; }
  .about-page .about-body .about-skills-table .about-row > .about-row-main { grid-column: 2 / -1 !important; }
  /* one even grid for every tool row: same column pitch, icon and label on the column's left edge */
  .about-page .tool-icons { display: grid !important; grid-template-columns: repeat(auto-fill, 120px) !important; gap: 22px 0 !important; width: 100% !important; max-width: none !important; }
  .about-page .tool-icons > li { width: 120px !important; min-width: 0 !important; max-width: none !important; align-items: flex-start !important; }
  .about-page .tool-icons span { white-space: nowrap !important; text-align: left !important; }
}
.about-life.is-pile { margin-top: clamp(20px, 2vw, 28px) !important; }

/* Illustration: older pieces and the installations wait in folds at the end */
.illustration-gallery .illus-fold { margin-top: clamp(40px, 5vw, 72px); }
.illustration-gallery .illus-fold + .illus-fold { margin-top: 0; border-top: 0; }
.illustration-gallery .illus-fold > summary .process-fold-title { font-size: 15px; font-weight: 500; color: #080808; }
.illustration-gallery .illus-fold-body { display: grid; gap: inherit; padding: 8px 0 clamp(32px, 4vw, 56px); }
.illustration-gallery .illus-fold .illustration-section-heading { display: none; }
/* photos tuck up under the intro; the tallest one may overlap the last line a little. The empty stage lets clicks through to the text */
.about-life.is-pile { margin-top: clamp(-72px, -5vw, -36px) !important; pointer-events: none; z-index: 1; }
.about-life.is-pile img { pointer-events: auto; }

/* COMOTION: my intro breakdown pages shown large, two across */
main.project-page .project-block-style-guide .project-media-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { main.project-page .project-block-style-guide .project-media-stack-grid { grid-template-columns: 1fr !important; } }

/* Case-study videos fit on one screen: height never more than the viewport minus nav and breathing room; width follows */
main.project-page .project-feature-media { max-width: min(100%, calc((100vh - 150px) * 16 / 9)) !important; }
main.project-page .project-feature-media .video-preview-frame { max-width: 100% !important; }
main.project-page .project-content .project-asset-frame:has(> iframe:not([src*="tiktok"])),
main.project-page .project-content .project-asset-frame:has(> video:not(.is-portrait)) { max-width: min(100%, calc((100vh - 150px) * 16 / 9)); }
main.project-page .project-content .project-asset-frame:has(> video.is-portrait),
main.project-page .project-content .project-asset-frame:has(> iframe[src*="tiktok"]) { max-width: min(100%, calc((100vh - 150px) * 9 / 16)); }
main.project-page .project-feature-media:has(.video-preview-frame) { max-width: min(100%, calc((100vh - 150px) * 5 / 3)) !important; }
main.project-page.project-detail-fifa-world-cup-rebrand-atlanta .project-block-screensaver .project-asset-frame,
main.project-page.project-detail-tiktok-ep-fifa-world-cup .project-media-stack-grid .project-asset-frame { max-width: min(100%, calc((100vh - 150px) * 9 / 16)) !important; }

/* Transcendent Severance thesis process: column counts sized to each set */
main.project-page .project-block-thesis-motifs .project-media-stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
main.project-page :is(.project-block-thesis-rebuild, .project-block-thesis-production) .project-media-stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
main.project-page .project-block-thesis-production .project-media-element { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 760px) {
  main.project-page :is(.project-block-thesis-motifs, .project-block-thesis-rebuild, .project-block-thesis-production) .project-media-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* capped videos sit in the middle of the column, not on the left edge */
main.project-page .project-feature-media,
main.project-page .project-content .project-media-stack:not(.project-media-stack-grid) > .project-asset-frame:is(:has(> iframe), :has(> video)),
main.project-page.project-detail-fifa-world-cup-rebrand-atlanta .project-block-screensaver .project-asset-frame,
main.project-page.project-detail-tiktok-ep-fifa-world-cup .project-media-stack-grid .project-asset-frame { margin-left: auto !important; margin-right: auto !important; }

/* Case studies: media groups sit in the middle of the column; only the text stays on the left edge */
main.project-page .project-content :is(.ep-row, .project-media-stack, .tyr-board-row) { justify-content: center !important; }
main.project-page .project-content .project-media-stack-grid > .project-asset-frame { width: 100%; justify-self: center; } /* fills its cell; if capped for height, sits in the cell's middle */

/* Wide screens: sections span the column (text stays on the left edge); media groups keep their 1380px measure, centred */
main.project-page .project-content > :is(section, details) { width: 100% !important; max-width: none !important; }
main.project-page .project-content :is(.project-media-stack, .ep-row, .tyr-board-row, .lyric-concept-grid, .adid-delivery-grid) { width: 100%; max-width: 1380px; margin-left: auto !important; margin-right: auto !important; }
/* single videos fill the column (up to their one-screen cap) instead of shrinking to the player's default size */
main.project-page .project-content .project-media-stack:not(.project-media-stack-grid) > .project-asset-frame { width: 100% !important; }
main.project-page .project-content .project-media-stack:not(.project-media-stack-grid) > .project-asset-frame > iframe { width: 100% !important; height: auto; aspect-ratio: 16 / 9; }
main.project-page .project-content .project-media-stack:not(.project-media-stack-grid) { grid-template-columns: minmax(0, 1fr) !important; }

/* Illustration page opens straight on the work (title kept for screen readers only) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main.listing-page .illustration-gallery { padding-top: clamp(24px, 3vw, 40px) !important; }
main.project-page .project-block-thesis-rebuild .project-media-stack-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
main.project-page .project-block-thesis-pattern .project-media-stack-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 760px) {
  main.project-page :is(.project-block-thesis-rebuild, .project-block-thesis-pattern) .project-media-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* One video size everywhere: every lead / single video shares the same width (1120px max), never taller than the screen allows */
main.project-page { --video-w: min(100%, 1120px, calc((100vh - 150px) * 16 / 9)); }
main.project-page .project-content section.project-feature-media,
main.project-page .project-content .project-media-stack:not(.project-media-stack-grid) > .project-asset-frame:is(:has(> iframe), :has(> video)) { width: 100% !important; max-width: var(--video-w) !important; margin-left: auto !important; margin-right: auto !important; }
main.project-page .project-block-thesis-motifs .project-media-stack-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
main.project-page .project-block-thesis-motifs .project-media-element { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 760px) { main.project-page .project-block-thesis-motifs .project-media-stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* inside folds too: sections span the column so their media can centre */
main.project-page .project-content :is(.process-fold-body, .process-open) > :is(section, div, figure) { width: 100% !important; max-width: none !important; }
/* a lone item in a multi-column grid takes the whole row (and centres), instead of sitting in the left column */
main.project-page .project-content .project-media-stack-grid > .project-asset-frame:only-child { grid-column: 1 / -1; max-width: var(--video-w); }
/* fold toggles ("How it was made +", "Team credits +", …) sit in the middle of the page */
main.project-page .process-fold > summary, .illustration-gallery .illus-fold > summary { justify-content: center !important; }
main.project-page .process-fold > summary::after, .illustration-gallery .illus-fold > summary::after { margin-left: 0 !important; }
main.project-page .process-fold > summary, .illustration-gallery .illus-fold > summary { display: flex !important; width: 100% !important; box-sizing: border-box; }
/* COMOTION team style guide (reference only): small, four across */
main.project-page .project-block-style-guide-full .project-media-stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { main.project-page .project-block-style-guide-full .project-media-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Footer easter egg (Rich's review): a quiet line at the very end of the home page leads to the playground */
.home-page .page-egg { display: flex; justify-content: center; padding: clamp(28px, 3vw, 44px) 0 0; }
.page-end-egg { font-size: 13px !important; font-weight: 300; color: #9a9a9a !important; text-decoration: none; transition: color .2s; }
.page-end-egg:hover, .page-end-egg:focus-visible { color: #080808 !important; }
/* lead videos show the whole frame: the box follows the clip's own shape (e.g. Roco's wide 2.16:1 shop clip) instead of cropping to 16:9 */
main.project-page .project-content section.project-feature-media:has(> video) { aspect-ratio: auto !important; height: auto !important; }
main.project-page .project-content section.project-feature-media > video { width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; position: static !important; }

/* Playground easter egg: a little row of painted veggies at the very bottom of the home page */
.home-page .page-egg { padding: clamp(40px, 5vw, 72px) 0 0 !important; }
.veggie-egg { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 28px); text-decoration: none; padding-bottom: 6px; }
.veggie-egg img { height: calc(var(--h) * clamp(44px, 5vw, 72px)); width: auto; display: block; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.veggie-egg:hover img, .veggie-egg:focus-visible img { transform: translateY(-6px) rotate(-4deg); }
.veggie-egg:hover img:nth-child(even), .veggie-egg:focus-visible img:nth-child(even) { transform: translateY(-9px) rotate(5deg); }
.veggie-egg img:nth-child(2) { transition-delay: .03s } .veggie-egg img:nth-child(3) { transition-delay: .06s } .veggie-egg img:nth-child(4) { transition-delay: .09s } .veggie-egg img:nth-child(5) { transition-delay: .12s } .veggie-egg img:nth-child(6) { transition-delay: .15s }
.veggie-egg-hint { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); white-space: nowrap; font-size: 13px; font-weight: 300; color: #8a8a8a; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.veggie-egg:hover .veggie-egg-hint, .veggie-egg:focus-visible .veggie-egg-hint { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (hover: none) { .veggie-egg-hint { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .veggie-egg img { transition: none; } }
/* veggie egg v2: equal-size veggies, a quiet line underneath that ends with the snail */
.veggie-egg { flex-direction: column; align-items: center; gap: 14px !important; }
.veggie-row { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); }
.veggie-row .veg { width: clamp(40px, 4vw, 52px); height: clamp(40px, 4vw, 52px); display: grid; place-items: center; }
.veggie-row .veg img { --h: 1; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.veggie-egg:hover .veg img, .veggie-egg:focus-visible .veg img { transform: translateY(-6px) rotate(-5deg); }
.veggie-egg:hover .veg:nth-child(even) img, .veggie-egg:focus-visible .veg:nth-child(even) img { transform: translateY(-8px) rotate(5deg); }
.veggie-row .veg:nth-child(2) img { transition-delay: .03s } .veggie-row .veg:nth-child(3) img { transition-delay: .06s } .veggie-row .veg:nth-child(4) img { transition-delay: .09s } .veggie-row .veg:nth-child(5) img { transition-delay: .12s }
.veggie-egg .veggie-egg-hint { position: static !important; transform: none !important; opacity: 1 !important; display: inline-flex; align-items: flex-end; gap: 6px; font-size: 13px; color: #9a9a9a; transition: color .2s; }
.veggie-egg:hover .veggie-egg-hint, .veggie-egg:focus-visible .veggie-egg-hint { color: #080808; }
.veggie-snail { height: 16px !important; width: auto !important; transition: transform 1.2s ease; }
.veggie-egg:hover .veggie-snail { transform: translateX(10px); }
/* a row holding one clip uses the standard video size, centred */
main.project-page .project-content .project-media-row:has(> .project-asset-frame:only-child) { justify-content: center; }
main.project-page .project-content .project-media-row > .project-asset-frame:only-child { flex: 0 1 var(--video-w) !important; max-width: var(--video-w) !important; margin: 0 auto; }
main.project-page .project-content .project-media-row[style*="max-width"] { width: 100%; }
/* veggie egg v3: snail-sized veggies, all the same height on one baseline */
.veggie-egg { gap: 10px !important; }
.veggie-row { align-items: flex-end !important; gap: 12px !important; }
.veggie-row .veg { width: auto !important; height: 22px !important; display: block !important; }
.veggie-row .veg img { width: auto !important; height: 22px !important; object-fit: contain; }
.veggie-egg:hover .veg img, .veggie-egg:focus-visible .veg img,
.veggie-egg:hover .veg:nth-child(even) img, .veggie-egg:focus-visible .veg:nth-child(even) img { transform: translateY(-4px) !important; }
.veggie-snail { height: 18px !important; }
/* veggie egg v4: the veggies hop one after another like a loading bar; the snail crawls along after the text */
@keyframes veg-load { 0%, 60%, 100% { transform: translateY(0); } 20% { transform: translateY(-7px); } 35% { transform: translateY(0) scaleY(.92); } 45% { transform: translateY(0) scaleY(1); } }
.veggie-row .veg img { animation: veg-load 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.veggie-row .veg:nth-child(2) img { animation-delay: .16s; } .veggie-row .veg:nth-child(3) img { animation-delay: .32s; }
.veggie-row .veg:nth-child(4) img { animation-delay: .48s; } .veggie-row .veg:nth-child(5) img { animation-delay: .64s; }
.veggie-egg:hover .veg img, .veggie-egg:focus-visible .veg img { animation-duration: .9s; }
@keyframes snail-crawl { 0% { transform: translateX(0) scaleX(1); } 25% { transform: translateX(3px) scaleX(1.08); } 50% { transform: translateX(6px) scaleX(1); } 75% { transform: translateX(9px) scaleX(1.08); } 100% { transform: translateX(12px) scaleX(1); } }
@keyframes snail-path { 0%, 8% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
.veggie-snail { transform-origin: 0 100%; animation: snail-crawl 1.8s steps(8) infinite alternate; }
.veggie-egg:hover .veggie-snail { transform: none; animation-duration: .9s; }
@media (prefers-reduced-motion: reduce) { .veggie-row .veg img, .veggie-snail { animation: none !important; } }
/* the line centres under the veggies on its own; the snail trails after it without shifting the centre */
.veggie-egg .veggie-egg-hint { position: relative !important; display: inline-block !important; }
.veggie-egg .veggie-snail { position: absolute; left: 100%; bottom: 1px; margin-left: 8px; }
/* the snail is its own looping walk (animated webp); no extra motion. Text centres on its own. */
.veggie-snail, .veggie-egg:hover .veggie-snail { animation: none !important; transform: none !important; }
.veggie-egg .veggie-egg-hint { left: auto !important; }
main.project-page .project-content .project-subcopy { margin-top: clamp(20px, 2vw, 32px); }
/* the profile-card editor recording is tall: keep it inside one screen */
main.project-page .project-content .project-media-row > .project-asset-frame:only-child:has(video[data-src*="ue-editor-2"]) { flex-basis: min(100%, calc((100vh - 150px) * 1.31)) !important; max-width: min(100%, calc((100vh - 150px) * 1.31)) !important; }
/* Roco event pages: equal columns so every row splits on the same line; frames share one shape per row */
main.project-page .event-grid .project-asset-frame { flex: 1 1 0 !important; aspect-ratio: 2.16; overflow: hidden; }
main.project-page .event-grid .project-media-row:last-child .project-asset-frame { aspect-ratio: 1.34; }
main.project-page .event-grid .project-asset-frame > video { width: 100%; height: 100%; object-fit: cover; }
/* Playground fits one screen: stage fills what the footer leaves, no scroll needed */
.playground-page { height: 100svh !important; min-height: 0 !important; display: flex !important; flex-direction: column; overflow: hidden !important; }
.playground-page .contact-stage { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
.playground-page .contact-footer { flex: 0 0 auto; }
/* About tools: each label centred under its icon */
@media (min-width: 761px) {
  .about-page .tool-icons > li { width: 44px !important; align-items: center !important; }
  .about-page .tool-icons span { text-align: center !important; }
}
@media (min-width: 761px) { .about-page .tool-icons { justify-items: start !important; } }
/* the first thing after the intro + details starts at the same distance on every case study */
main.project-page .project-content > .project-info-grid + .fifa-chapter { margin-top: 0 !important; }
main.project-page .project-content > .project-credit-grid:not(:has(details)) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
main.project-page .project-content > .project-credit-grid { margin-bottom: 0 !important; }
main.project-page .project-content > section.project-info-grid.project-credit-grid { margin-bottom: 0 !important; }
/* home: the veggie line closes the page with a short margin */
main.home-page { padding-bottom: 36px !important; }
/* Spider-Man results: no rule lines above/below the numbers */
main.project-page .spider-impact, main.project-page .spider-impact * { border-top: 0 !important; border-bottom: 0 !important; border-image: none !important; box-shadow: none !important; }
main.project-page .spider-impact::before, main.project-page .spider-impact::after { display: none !important; }

/* Step strips: no dashed rules — each step is a pale blue block */
main.project-page :is(.spider-synthesis-flow, .fifa-showcase-timeline, .lyric-decision-grid, .tap-escape-principles, .game-template-workflow-strip) { border: 0 !important; border-image: none !important; gap: 10px !important; }
main.project-page :is(.spider-synthesis-flow, .fifa-showcase-timeline, .lyric-decision-grid, .tap-escape-principles, .game-template-workflow-strip) > li {
  border: 0 !important; border-image: none !important; background: #f2f6ff !important; border-radius: 10px; }
main.project-page :is(.spider-synthesis-flow, .fifa-showcase-timeline, .lyric-decision-grid, .tap-escape-principles, .game-template-workflow-strip) > li::before { display: none !important; }
main.project-page .outfit-builder-process-stage { border: 0 !important; border-image: none !important; background: none !important; border-radius: 0; }
/* Team credits belongs to the details block: its toggle stays on the left text line */
main.project-page .credits-fold > summary { justify-content: flex-start !important; }

/* Roco friends: Unreal editor recording on the left, the three shipped clips stacked on the right, one row of equal height */
main.project-page .project-content .project-media-row.friends-split { container-type: inline-size; display: flex; gap: 16px; align-items: flex-start; max-width: min(1380px, calc((100vh - 150px) * 2.58)); width: 100%; margin: 0 auto; }
main.project-page .project-content .friends-split > .project-asset-frame { flex: 1 1 0 !important; max-width: none !important; margin: 0 !important; }
/* stack width W solves: (row - 16 - W) / 1.3115 = W * 1.6447 + 16, so both sides end on the same line */
main.project-page .project-content .friends-split > .friends-stack { flex: 0 0 calc((100cqw - 36.98px) / 3.157); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
main.project-page .project-content .friends-split .project-asset-frame { width: 100%; }
main.project-page .project-content .friends-split .project-asset-frame > video { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 760px) { main.project-page .project-content .project-media-row.friends-split { flex-direction: column; } main.project-page .project-content .friends-split > .friends-stack, main.project-page .project-content .friends-split > .project-asset-frame { flex: none !important; width: 100%; } }

/* Outfit Builder process: no tint, no dashed rules, no grey frames — whitespace separates the steps */
main.project-page .outfit-builder-case-study .outfit-builder-case-summary { border-top: 0 !important; border-bottom: 0 !important; border-image: none !important; }
main.project-page .outfit-builder-case-study :is(.outfit-builder-process-media, .outfit-builder-process-media *, .game-case-video) { border: 0 !important; box-shadow: none !important; background-color: transparent !important; }

/* ATL for All film has letterbox bars baked in — crop them by over-sizing the 16:9 player inside a ~1.9:1 frame */
main.project-page .project-content .project-asset-frame:has(> iframe[src*="1068514559"]) { position: relative; aspect-ratio: 1.92 / 1; overflow: hidden; background: transparent !important; }
main.project-page .project-content .project-asset-frame > iframe[src*="1068514559"] { position: absolute; left: 0; top: 50%; width: 100% !important; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); }

/* Mixed portrait + landscape grids: every video frame fills its column so the cards line up */
main.project-page .project-content .project-media-stack-grid:has(> .project-asset-frame > video:not(.is-portrait)):has(> .project-asset-frame > video.is-portrait) > .project-asset-frame:not(:only-child):is(:has(> video), :has(> iframe)) { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Slim case study: design iterations (problem → change → why → impact), generated by slim-app/docs/iterations.py.
   Two text sizes only: body for everything, h4 at body size in bold. */
.project-detail-slim .slim-chapter { margin-top: 2.2em; max-width: 640px; }
.project-detail-slim .slim-chapter h4 { font-size: var(--fs-body); font-weight: 700; margin: 0; }
.project-detail-slim .slim-goal { color: #6b6b6b; margin: 0.2em 0 0 !important; }
.slim-iterations { list-style: none; margin: 0.6em 0 0; padding: 0; }
.slim-iterations li { padding: 0.9em 0; }
.slim-iterations li + li { border-top: 1px solid #ececec; }
.slim-iterations p { margin: 0.15em 0 0 !important; display: grid; grid-template-columns: 4.8em 1fr; }
.slim-iterations .slim-iter-title { display: block; font-weight: 700; margin: 0 0 0.25em !important; }
.slim-iterations p span { color: #9a9a9a; }
/* Before / after screenshots: two phone screens side by side, small caption under each. */
.slim-iterations .slim-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 460px; margin: 0.6em 0 0.9em; }
.slim-iterations .slim-shots figure { margin: 0; }
.slim-iterations .slim-shots img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 22px rgb(0 0 0 / 0.08); }
.slim-iterations .slim-shots figcaption { margin-top: 0.4em; color: #9a9a9a; text-align: center; }

/* Savor: the app screen by screen — a map, then each screen's versions as a sideways strip. */
.savor-screens { margin-top: clamp(40px, 5vw, 72px); }
.savor-screens > h3 { margin: 0; }
.savor-screens > p { max-width: 640px; color: #6b6b6b; }
.savor-map { list-style: none; counter-reset: m; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 0; margin: 1.2em 0 0; }
.savor-map li { counter-increment: m; background: #f4f4f1; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.savor-map li b::before { content: counter(m, decimal-leading-zero) "  "; color: #9a9a9a; font-weight: 400; }
.savor-map li span { color: #6b6b6b; }
.savor-screen { margin-top: clamp(36px, 4vw, 56px); }
.savor-screen-head { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px !important; }
.savor-screen-head span { color: #6b6b6b; }
/* Versions wrap onto new rows instead of scrolling sideways, so no screenshot is ever cut off. */
.savor-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 22px; padding: 4px 0 14px; }
.savor-v { margin: 0; position: relative; min-width: 0; }
.savor-v:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 40%; color: #c4c4c0; }
.savor-v img { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.07), 0 10px 26px rgb(0 0 0 / 0.08); }
.savor-v.is-now img { box-shadow: 0 0 0 2px #151515, 0 10px 26px rgb(0 0 0 / 0.12); }
.savor-v figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.savor-v figcaption .savor-when { color: #9a9a9a; }
.savor-v figcaption .savor-why { color: #6b6b68; }
.project-page .project-content .savor-v figcaption span { font-size: 13px !important; line-height: 1.4; }
/* Wide screens: a single version reads beside its picture. (Titles sit above each strip.) */
@media (min-width: 900px) {
  .savor-strip:has(> .savor-v:only-child) { grid-template-columns: minmax(0, 560px); }
  .savor-strip:has(> .savor-v:only-child) .savor-v { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
  .savor-strip:has(> .savor-v:only-child) .savor-v figcaption { margin-top: 6px; max-width: 380px; }
}

/* Savor case study: real app recordings in phone frames */
.savor-phones { display: grid; gap: clamp(16px, 3vw, 44px); justify-content: center; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px); background: radial-gradient(60% 70% at 50% 85%, #e3f2bd 0%, rgba(227,242,189,0) 70%), #eeeeec; border-radius: 4px; }
.savor-phones-1 { grid-template-columns: minmax(0, 300px); }
.savor-phones-2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
.savor-phones-3 { grid-template-columns: repeat(3, minmax(0, 300px)); }
.savor-phones-4 { grid-template-columns: repeat(4, minmax(0, 240px)); }
.savor-phone { margin: 0; }
/* The bezel sits outside the screen, so the recording keeps its own 390:844 frame — nothing cropped, nothing drawn over it. */
.savor-phone-screen { position: relative; padding: clamp(6px, .8vw, 10px); border-radius: clamp(30px, 3.6vw, 46px); background: #111; box-shadow: 0 24px 50px rgb(0 0 0 / .16); }

.savor-phone video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: contain; border-radius: clamp(24px, 2.9vw, 37px); background: #000; }
.savor-phone figcaption { margin-top: 14px; font-size: 14px; line-height: 1.4; color: #6b6b68; text-align: center; }
.savor-hero .savor-phones { padding-top: clamp(36px, 6vw, 80px); }
/* Phones: a row of two or three becomes a swipeable strip, each phone 62% wide and snapping to
   the centre; a single phone sits at the same size; captions stay small. */
@media (max-width: 760px) {
  .savor-phones-2, .savor-phones-3, .savor-phones-4 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; justify-content: start; gap: 14px; padding-inline: 19%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .savor-phones-2::-webkit-scrollbar, .savor-phones-3::-webkit-scrollbar, .savor-phones-4::-webkit-scrollbar { display: none; }
  .savor-phones .savor-phone { scroll-snap-align: center; }
  .savor-phones-1 { grid-template-columns: minmax(0, 62%); }
  .savor-phones .savor-phone figcaption { font-size: 13px !important; line-height: 1.35 !important; }
}

/* Savor: the web version in a light browser frame */
.savor-web { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 4vw, 56px); background: radial-gradient(60% 70% at 50% 85%, #e3f2bd 0%, rgba(227,242,189,0) 70%), #eeeeec; border-radius: 4px; }
.savor-browser { margin: 0; }
.savor-browser:first-child { grid-column: 1 / -1; max-width: 860px; justify-self: center; width: 100%; }
@media (max-width: 760px) { .savor-web { grid-template-columns: 1fr; padding: 16px; } }
.savor-browser-bar { display: flex; gap: 6px; padding: 10px 12px; background: #e2e2df; border-radius: 12px 12px 0 0; }
.savor-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9c9c5; }
.savor-browser video { display: block; width: 100%; aspect-ratio: 1280 / 800; background: #000; border-radius: 0 0 12px 12px; box-shadow: 0 24px 50px rgb(0 0 0 / .14); }
.savor-browser figcaption { margin-top: 12px; font-size: 14px !important; color: #6b6b68; text-align: center; }
/* Savor: four key decisions, before → now with the reasoning */
.savor-keys { margin-top: clamp(48px, 6vw, 88px); }
.project-page .project-content .savor-keys > h3 { margin: 0 0 12px; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2; }
.savor-keys > p { max-width: 640px; color: #6b6b6b; }
.savor-key { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(32px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); background: #f4f4f1; border-radius: 24px; }
.savor-key-shots { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.5vw, 20px); }
.savor-key-shots figure { margin: 0; width: min(200px, 42%); }
.savor-key-shots video { display: block; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 10px 24px rgb(0 0 0 / .08); }
.savor-key-shots .is-now video { box-shadow: 0 0 0 2px #151515, 0 14px 30px rgb(0 0 0 / .14); }
.savor-key-shots img { display: block; width: 100%; border-radius: 22px; box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 10px 24px rgb(0 0 0 / .08); opacity: .85; }
.savor-key-shots .is-now img { opacity: 1; box-shadow: 0 0 0 2px #151515, 0 14px 30px rgb(0 0 0 / .14); }
.savor-key-shots figcaption { margin-top: 8px; font-size: 12px !important; color: #8a8a86; text-align: center; }
.savor-key-arrow { color: #b4b4b0; font-size: 22px !important; }
.savor-key-copy h4 { margin: 0 0 12px; font-size: 22px !important; font-weight: 700 !important; }
.savor-key-copy p { margin: 0 0 10px; color: #4a4a47; }
.savor-key-copy p span { display: block; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; color: #9a9a96; margin-bottom: 2px; }
.savor-screens-fold { margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 760px) { .savor-key { grid-template-columns: 1fr; } }

/* Savor: information architecture, entry flow then the five tabs with their pages and sheets */
.savor-ia { margin: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.project-page .project-content .savor-ia > h3 { margin: 0 0 12px; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2; }
.savor-ia > p { max-width: 640px; color: #6b6b6b; }
.ia-entry { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; }
.ia-entry span { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 14px; background: #f4f4f1; font-weight: 600 !important; }
.ia-entry span.is-dashed { background: none; outline: 1.5px dashed #c4c4c0; outline-offset: -1.5px; }
.ia-root { position: relative; display: flex; justify-content: center; margin-top: 22px; }
.ia-root::before { content: ""; position: absolute; top: -22px; left: 50%; height: 22px; border-left: 1.5px solid #d6d6d2; }
.project-page .project-content .savor-ia .ia-root span { display: flex; flex-direction: column; align-items: center; padding: 10px 22px; border-radius: 999px; background: #151515; color: #fff !important; font-weight: 600 !important; }
.project-page .project-content .savor-ia .ia-root small { font-weight: 400 !important; font-size: 12px !important; color: rgb(255 255 255 / .65); }
.ia-entry small { font-weight: 400 !important; font-size: 12px !important; opacity: .6; }
.ia-entry b { color: #b4b4b0; font-weight: 400 !important; }
.ia-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding-top: 22px; }
.ia-tabs::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 22px; border: 1.5px solid #d6d6d2; border-bottom: 0; border-radius: 12px 12px 0 0; }
.ia-tabs::after { content: ""; position: absolute; top: -22px; left: 50%; height: 22px; border-left: 1.5px solid #d6d6d2; }
.ia-tab { position: relative; background: #f4f4f1; border-radius: 18px; padding: 14px 14px 16px; }
.ia-tab::before { content: ""; position: absolute; top: -22px; left: 50%; height: 22px; border-left: 1.5px solid #d6d6d2; }
.ia-tab:nth-child(1)::before, .ia-tab:nth-child(3)::before, .ia-tab:nth-child(5)::before { display: none; }
.ia-l1 { margin: 0 0 10px !important; display: flex; flex-direction: column; }
.ia-l1 b { font-size: 18px !important; }
.ia-l1 span { font-size: 13px !important; color: #8a8a86; }
.ia-tab ul { list-style: none; margin: 0; padding: 0; }
.ia-l2 > li { margin-top: 10px; font-weight: 600 !important; font-size: 14px !important; }
.ia-l2 > li > span, .ia-l2 ul li > span { margin-right: 6px; }
.ia-l2 ul { margin: 6px 0 0 4px; padding-left: 12px; border-left: 1.5px solid #dcdcd8; }
.ia-l2 ul li { margin-top: 5px; font-weight: 400 !important; font-size: 13px !important; color: #4a4a47; }
.savor-ia i { display: inline-block; font-style: normal; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .03em; padding: 1px 6px; border-radius: 6px; vertical-align: 1px; white-space: nowrap; }
.savor-ia i.ia-page { background: #151515; color: #fff; }
.savor-ia i.ia-sheet { background: #dfe9f7; color: #2d5b9a; }
.savor-ia i[class~="ia-in"] { background: #ecf3d8; color: #557024; }
.savor-ia i[class~="ia-full"] { background: #f4e2d6; color: #8a4b22; }
.ia-legend { display: flex; gap: 8px; margin-top: 14px !important; }
@media (max-width: 900px) {
  .ia-tabs { grid-template-columns: 1fr 1fr; padding-top: 0; }
  .ia-tabs::before, .ia-tabs::after, .ia-tab::before { display: none; }
}
@media (max-width: 520px) { .ia-tabs { grid-template-columns: 1fr; } }

/* IA: a tiny real-screen thumbnail after each line; tap to see it full size */
.ia-thumb { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.ia-thumb img { width: 15px; height: 32px; object-fit: cover; object-position: top; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .14); transition: transform .15s; }
.ia-thumb:hover img { transform: scale(1.25); }
.ia-entry .ia-thumbs { display: flex; gap: 6px; margin: 6px 0 4px; font-style: normal; }
.ia-entry .ia-thumb { margin: 0; }
.ia-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgb(20 20 20 / .55); backdrop-filter: blur(6px); cursor: zoom-out; }
.ia-lightbox[hidden] { display: none; }
.ia-lightbox img { max-height: 86vh; max-width: 90vw; border-radius: 22px; box-shadow: 0 30px 60px rgb(0 0 0 / .35); }

/* Savor › In Figma, design system, accessibility */
.savor-figma, .savor-spec, .savor-a11y { margin-top: clamp(48px, 6vw, 88px); }
.project-page .project-content :is(.savor-figma, .savor-spec, .savor-a11y) > h3 { margin: 0 0 12px; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; }
:is(.savor-figma, .savor-spec) > p { max-width: 640px; }
.project-page .project-content .savor-figma > p a { color: #080808 !important; font-weight: 500 !important; text-decoration: underline; text-underline-offset: 3px; }
.savor-figma figure { margin: 24px 0 0; }
.savor-figma .ia-thumb { display: block; width: 100%; margin: 0; cursor: zoom-in; }
.savor-figma .ia-thumb img { width: 100%; height: auto; object-fit: contain; border-radius: 4px; box-shadow: none; }
.savor-figma .ia-thumb:hover img { transform: none; }
.project-page .project-content .savor-figma figcaption { margin-top: 8px; font-size: 13px !important; font-weight: 400 !important; color: #8a8a8a !important; }
.savor-figma-pair { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(16px, 2vw, 32px); align-items: start; }
@media (max-width: 760px) { .savor-figma-pair { grid-template-columns: 1fr; } }
.savor-a11y ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 20px 0 0; padding: 0; list-style: none; }
.savor-a11y li { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) { .savor-a11y ul { grid-template-columns: 1fr; } }
.savor-spec .game-template-ui-standard-list { margin-top: 28px; }
.savor-spec .ia-thumb.game-template-ui-standard-media { display: block; width: 100%; margin: 0; padding: 0; cursor: zoom-in; }
.savor-spec .ia-thumb img { width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.savor-spec .ia-thumb:hover img { transform: none; }
.ia-lightbox.is-wide { overflow-x: auto; justify-content: flex-start; padding: 0 4vw; }
.ia-lightbox.is-wide img { max-width: none; max-height: none; height: min(92vh, 849px); width: auto; border-radius: 12px; flex: none; }

/* Savor › Native iOS: the whole film, then the parts in rows of four */
.savor-native .savor-phones + .savor-phones { margin-top: clamp(16px, 2vw, 24px); }