@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Italic-var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* =========================================================
   Yi-Chang Lee — portfolio styles
   Tokens first; change colors/type here.
   ========================================================= */
:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --tint: #ecebe6;
  --ink: #151515;
  --ink-2: #4a4a48;
  --muted: #5f5e59;
  --line: #dedcd6;
  --accent: #151515;      /* overridden per project */
  --accent-2: #151515;
  --todo-bg: #fff4c2;
  --todo-ink: #6b5500;

  --f-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Montserrat", ui-sans-serif, system-ui, sans-serif;   /* labels: Montserrat, uppercase + tracked */

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 var(--f-sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow, .meta-line, .section-label, .sec__n, .crumb, .step__n, .pill, .note, .soon, .todo, figcaption {
  font-family: var(--f-mono); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow { color: var(--muted); display: block; margin-bottom: 14px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- pending-content tag ---------- */
.todo {
  display: inline-block; margin-top: 10px; padding: 4px 8px; border-radius: 6px;
  background: var(--todo-bg); color: var(--todo-ink); text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.4;
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.wordmark { font-weight: 600; text-decoration: none; letter-spacing: -0.01em; font-size: 16px; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); font-size: 15px; }
.nav a { text-decoration: none; }
.nav a:not(.btn) { position: relative; padding: 4px 0; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current]::after { transform: scaleX(1); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-size: 15px; font-weight: 500; transition: transform .25s var(--ease), background .25s; }
.btn:hover { transform: translateY(-1px); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); padding: 7px 16px; }
.btn--line:hover { background: var(--ink); color: var(--bg); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(56px, 12vw, 150px); padding-bottom: clamp(48px, 8vw, 96px); }
.hero__title { font-size: clamp(32px, 4.3vw, 60px); line-height: 1.06; letter-spacing: -0.032em; max-width: 24ch; font-weight: 500; }
.hero__sub { margin-top: 28px; max-width: 46ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); }
.hero__cta { margin-top: 36px; }

/* ---------- section label ---------- */
.section-label { color: var(--muted); font-weight: 400; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.section-label--sub { margin-top: 96px; }

/* ---------- logos ---------- */
.logos { padding-bottom: clamp(64px, 9vw, 120px); }
.logos__row { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 48px); }
.logos__group { flex: 3 1 0; min-width: 0; }
.logos__group:last-child { flex: 2 1 0; }
.logos__divider { width: 1px; align-self: stretch; background: var(--line); }
.logos__list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(16px, 2.6vw, 40px); }
.logo { flex: 1 1 0; min-width: 96px; }
.logo img { height: 34px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .85; transition: opacity .3s, filter .3s; }
.logo img:hover { filter: none; opacity: 1; }
.logo__ph { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 64px; border: 1px dashed #c5c2ba; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 15px; text-align: center; padding: 0 10px; line-height: 1.15; }
.logo__ph small { font-family: var(--f-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; margin-top: 3px; }

/* ---------- work grid ---------- */
.work { padding-bottom: clamp(80px, 10vw, 140px); }
.grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px) clamp(20px, 2.5vw, 36px); }
@media (min-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .card--feature { grid-column: 1 / -1; }
  .card--feature .card__link { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; }
}
.card__link { display: block; text-decoration: none; color: inherit; }
.card__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1s var(--ease); }
a.card__link:hover .card__media img { transform: scale(1.025); }
.pill { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.94); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.card__body { padding-top: 18px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.card__title { margin-top: 8px; font-size: clamp(22px, 2.2vw, 28px); display: flex; align-items: baseline; gap: 10px; }
.card--feature .card__title { font-size: clamp(26px, 3vw, 40px); }
.arrow { display: inline-block; transition: transform .35s var(--ease); }
a.card__link:hover .arrow { transform: translateX(6px); }
.card__sum { margin-top: 8px; color: var(--ink-2); max-width: 52ch; }
.stat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stat-chips li { font-size: 13.5px; padding: 4px 11px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.soon { margin-top: 12px; color: var(--muted); }
.note { margin-top: 6px; color: var(--muted); text-transform: none; }

/* ---------- project head ---------- */
.phead { padding-top: clamp(36px, 7vw, 88px); padding-bottom: clamp(36px, 5vw, 64px); }
.crumb { margin-bottom: clamp(28px, 5vw, 56px); }
.crumb a { text-decoration: none; color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.phead__t { font-size: clamp(44px, 9vw, 128px); letter-spacing: -0.045em; line-height: .95; }
.phead__intro { margin-top: 28px; font-size: clamp(18px, 1.8vw, 23px); max-width: 40ch; color: var(--ink-2); line-height: 1.45; }
.phero img { width: 100%; height: auto; }
.pmeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 40px; border-bottom: 1px solid var(--line); margin: 0; }
@media (min-width: 900px) { .pmeta { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pmeta dt { font-family: var(--f-mono); font-size: 14px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pmeta dd { margin: 0; font-size: 17px; line-height: 1.5; }


/* ---------- project body ---------- */
.pbody { padding-bottom: 80px; }
.pbody > * + * { margin-top: clamp(28px, 4vw, 48px); }
.sec { margin-top: clamp(96px, 12vw, 170px) !important; text-align: center; display: grid; justify-items: center; gap: 14px; }
.sec__n { color: var(--accent-2); font-family: var(--f-sans); font-style: italic; text-transform: none; font-size: 17px; letter-spacing: .12em; display: inline-flex; align-items: center; gap: 12px; }
.sec__n span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-size: 13px; letter-spacing: 0; font-family: var(--f-mono); }
.sec__t { font-size: clamp(30px, 4.4vw, 58px); letter-spacing: -0.03em; max-width: 22ch; }
.prose { max-width: 66ch; }
.prose, .numbered, .bullets, .tagset, .quotes, .keywords { margin-inline: auto; }
.prose p + p { margin-top: 1em; }
.prose--lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; letter-spacing: -0.012em; max-width: 36ch; }

.numbered { counter-reset: n; display: grid; gap: 0; max-width: 66ch; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.numbered li::before { content: counter(n, decimal-leading-zero); font-family: var(--f-mono); font-size: 13px; color: var(--accent); padding-top: 3px; }
.bullets { max-width: 66ch; }
.bullets li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); position: relative; }
.bullets li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }

.principles { display: grid; gap: 20px; }
@media (min-width: 900px) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { background: var(--surface); border-radius: var(--radius); padding: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.principle__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font: 500 14px var(--f-mono); }
.principle h3 { margin: 18px 0 10px; font-size: 21px; }
.principle p { color: var(--ink-2); font-size: 16px; }

.tagset ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tagset li { padding: 7px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }

.keywords { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-2); font-style: italic; }

.fig img, .gallery img, .split img, .step__media img { border-radius: var(--radius); width: 100%; }
figcaption { margin-top: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.fig--full { width: 100vw; margin-left: calc(50% - 50vw); }
.fig--full img { border-radius: 0; }
.fig--inset { max-width: 760px; margin-inline: auto; }

.gallery__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .gallery__grid { grid-template-columns: repeat(var(--cols), 1fr); } }
.gallery__item img { aspect-ratio: 3/2; object-fit: cover; height: auto; }
@media (min-width: 700px) { .gallery .gallery__grid:has(.adsr) { grid-template-columns: repeat(3, 1fr); } }
.adsr { background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; padding: 16px; aspect-ratio: 3/2; }
.adsr svg { width: 100%; height: 100%; }
.adsr .ax { stroke: var(--ink); fill: none; stroke-width: 1.5; }
.adsr .env { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke-width: 2.5; stroke-linejoin: round; }
.adsr .guide { stroke: var(--line); stroke-dasharray: 3 4; }
.adsr text { font: 11px var(--f-mono); fill: var(--ink-2); text-anchor: middle; }
.adsr .lab { fill: var(--muted); text-anchor: start; }
.adsr .lab--end { text-anchor: end; }

/* decisions matrix */
.decisions { background: var(--accent); color: #fff; border-radius: calc(var(--radius) + 4px); padding: clamp(22px, 4vw, 48px); }
.decisions__intro { max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); margin-bottom: 28px; color: rgba(255,255,255,.88); }
.decisions__head { display: none; }
.drow { display: grid; gap: 10px; padding: 20px 0; border-top: 1px dashed rgba(255,255,255,.3); transition: background .25s; }
.drow__dim { font-weight: 500; font-size: 18px; }
.drow__opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt { padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.7); font-size: 15px; }
.opt--pick { background: var(--accent-2); color: #1b1300; font-weight: 600; }
.opt--pick::before { content: "✓ "; }
.vs { font: 12px var(--f-mono); color: rgba(255,255,255,.6); }
.drow__why { color: var(--accent-2); font-size: 15px; font-style: italic; line-height: 1.45; }
.drow__res { font-size: 16px; display: flex; gap: 10px; align-items: baseline; }
.drow__arrow { color: var(--accent-2); transition: transform .3s var(--ease); }
@media (min-width: 960px) {
  .decisions__head, .drow { grid-template-columns: 1.1fr 1.7fr 1.3fr 1.6fr; align-items: center; gap: 20px; }
  .decisions__head { display: grid; font: 14px var(--f-mono); text-transform: uppercase; color: rgba(255,255,255,.6); padding-bottom: 12px; }
  .drow { padding: 18px 12px; margin-inline: -12px; border-radius: 10px; }
  .drow:hover, .drow:focus-visible { background: rgba(255,255,255,.07); outline-color: #fff; }
  .drow:hover .drow__arrow, .drow:focus-visible .drow__arrow { transform: translateX(5px); }
}

.split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split .prose { margin-left: 0; } }

.steps { display: grid; gap: clamp(40px, 6vw, 72px); }
.step { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .step { grid-template-columns: 1fr 2fr; gap: 48px; } }
.step__n { color: var(--accent); margin-bottom: 8px; }
.step h3 { font-size: 24px; margin-bottom: 10px; }
.step p:not(.step__n) { color: var(--ink-2); }

.models ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (min-width: 700px) { .models ul { grid-template-columns: repeat(8, 1fr); } }
.models li img { border-radius: 50%; transition: transform .4s var(--ease); }
.models li:hover img { transform: rotate(-12deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .models li:hover img { transform: none; } }

/* hotspots */
.hot { display: grid; gap: 28px; background: #1d1d1f; color: #f2f2f2; border-radius: calc(var(--radius) + 4px); padding: clamp(16px, 3vw, 40px); }
@media (min-width: 900px) { .hot { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; } }
.hot__media { position: relative; }
.hot__media img { width: 100%; height: 100%; object-fit: contain; }
.hot__dot { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.hot__dot span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(240,160,32,.25); transition: transform .25s var(--ease), box-shadow .25s; }
.hot__dot.on span, .hot__dot:hover span { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(240,160,32,.3); }
.hot__side h3 { font-size: 26px; margin-bottom: 16px; }
.hot__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.hot__list button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; width: 100%; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.12); font: 15px var(--f-sans); color: rgba(255,255,255,.75); }
.hot__list button { font-family: var(--f-mono); font-size: 14px; align-items: baseline; }
.hot__list button span { font-family: var(--f-sans); font-size: 17px; }
.hot__list button.on, .hot__list button:hover { color: var(--accent-2); }
.hot__list button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.quotes { display: grid; gap: 18px; }
.quotes blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--accent-2); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; letter-spacing: -0.01em; max-width: 52ch; }

.video { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; }
.video--empty { display: grid; place-content: center; text-align: center; background: var(--tint); color: var(--ink-2); gap: 4px; justify-items: center; max-height: 320px; aspect-ratio: auto; padding: 56px 20px; }

.pnext { padding-block: 48px 96px; border-top: 1px solid var(--line); }
.pnext a { text-decoration: none; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.03em; }
.pnext a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- about ---------- */
.about { padding-top: clamp(40px, 7vw, 88px); padding-bottom: 96px; }
.about__grid { display: grid; gap: 32px; margin: 40px 0 72px; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 1fr 2fr; } }
.about__photo { aspect-ratio: 4/5; background: var(--tint); border-radius: var(--radius); display: grid; place-items: center; padding: 16px; }
.about .btn { margin-top: 8px; }
.missing { padding-block: 120px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--bg); }
.site-footer__in { padding-block: 72px 40px; display: grid; gap: 28px; }
.site-footer__big { font-size: clamp(40px, 7vw, 96px); letter-spacing: -0.045em; line-height: 1; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 17px; }
.site-footer__links a { text-underline-offset: 4px; }
.site-footer__small { font: 14px var(--f-mono); color: #b4b3ae; }
.site-footer :focus-visible { outline-color: var(--bg); }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .logos__row { flex-direction: column; gap: 28px; }
  .logos__divider { display: none; }
  .logos__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .logos__group:last-child .logos__list { grid-template-columns: repeat(2, 1fr); }
  .logo { min-width: 0; }
  .logo__ph { height: 56px; font-size: 13.5px; }
  .nav { gap: 14px; font-size: 14.5px; }
  .btn--line { padding: 6px 12px; }
  .wordmark { font-size: 15px; }
  .hot__list { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .wordmark { max-width: 9ch; white-space: normal; line-height: 1.1; } }



/* =========================================================
   Project pages — rich layouts (Minhand)
   Palette from the portfolio PDF: blue #29486c, yellow #f2b600, navy #142638.
   Contrast: white/blue 9.4:1 · yellow/blue 5.1:1 · yellow/navy 8.4:1 · blue/page 8.7:1.
   Yellow is never used as text on the light page background.
   ========================================================= */
:root {
  --navy: #142638;
  --sh-1: 0 1px 2px rgba(20, 38, 56, .06), 0 10px 28px rgba(20, 38, 56, .10);
  --sh-2: 0 4px 10px rgba(20, 38, 56, .10), 0 22px 50px rgba(20, 38, 56, .18);
  --hl: #ffe08a;
}
h1, h2, h3 { text-wrap: balance; }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.num { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 15px var(--f-sans); letter-spacing: 0; }
.star { color: #d9a300; }
.project em { font-style: normal; font-weight: 600; color: var(--ink); background: linear-gradient(transparent 60%, var(--hl) 60%, var(--hl) 92%, transparent 92%); padding: 0 .1em; }
figcaption { font-size: 15px; }

/* ---------- Cover (after the PDF title page) ---------- */
.cover { background: var(--navy); color: #fff; padding-block: 28px clamp(56px, 6vw, 80px); }
.cover .crumb { margin: 0 0 clamp(24px, 3vw, 36px); }
.cover .crumb a { color: #b9c2cc; }
.cover .crumb a:hover { color: #fff; }
.cover__t { text-align: center; color: var(--accent-2); font-size: clamp(42px, 5.4vw, 76px); font-weight: 700; letter-spacing: .01em; line-height: 1.05; }
.cover__d { text-align: center; margin-top: 12px; color: #b9c2cc; font-weight: 600; letter-spacing: .06em; font-size: clamp(17px, 1.7vw, 23px); }
.cover__card { position: relative; margin-top: clamp(44px, 5vw, 64px); background: linear-gradient(100deg, #b7cde8 0%, #dfe3e8 45%, #f5e6d3 100%); border-radius: clamp(24px, 3vw, 40px); padding: clamp(24px, 4vw, 64px); display: grid; gap: clamp(24px, 3.5vw, 56px); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 40px rgba(170,200,240,.28); color: var(--ink); }
@media (min-width: 960px) { .cover__card { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.cover__q { position: absolute; top: -.62em; font: 800 clamp(70px, 8vw, 120px)/1 Georgia, serif; color: #4fa7cc; }
.cover__q--l { left: clamp(36px, 6vw, 96px); } .cover__q--r { right: clamp(36px, 6vw, 96px); }
.cover__imgs { display: grid; gap: clamp(16px, 2vw, 28px); }
.cover__img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; box-shadow: 10px 14px 24px rgba(20,38,56,.30); }
.cover__intro { color: var(--accent); font-weight: 600; font-size: clamp(18px, 1.65vw, 23px); line-height: 1.6; letter-spacing: .05em; }
.cover__meta { margin: clamp(28px, 4vw, 64px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.cover__meta dt { font-size: 16px; letter-spacing: .06em; color: #3e4650; margin-bottom: 12px; }
.cover__meta dd { margin: 0; display: grid; gap: 4px; font-weight: 600; letter-spacing: .05em; font-size: 17px; color: var(--ink); }
.cover__meta > div:nth-child(1) { grid-row: span 2; }
.cover__date { margin-top: 22px; display: flex; align-items: flex-end; gap: 14px; font-weight: 700; font-style: italic; font-size: clamp(18px, 1.7vw, 23px); letter-spacing: .02em; }
.cover__date span { width: 40px; height: 34px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; }

/* ---------- Project goal (one clear line, after the PDF banner) ---------- */

/* ---------- Section headers ---------- */
.sec { margin-top: clamp(96px, 12vw, 160px) !important; text-align: center; display: grid; justify-items: center; gap: 16px; }
.sec__n { color: var(--accent); font: 600 15px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; }
.sec__t { max-width: 26ch; font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; letter-spacing: .01em; }
.sec--sub { margin-top: clamp(80px, 10vw, 130px) !important; }

/* Why — staggered rounded cards */
.why { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 40px !important; }
@media (min-width: 640px) { .why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .why { grid-template-columns: repeat(4, 1fr); padding-bottom: 40px; } .why__card:nth-child(even) { transform: translateY(40px); } }
.why__card { background: var(--surface); border-radius: 34px; padding: 30px 28px 32px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 18px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.why__card:hover { box-shadow: var(--sh-2); transform: translateY(-6px); }
@media (min-width: 1000px) { .why__card:nth-child(even):hover { transform: translateY(34px); } }
.why__card p { font-size: 17.5px; line-height: 1.5; letter-spacing: .03em; color: var(--accent); }

.how { max-width: 52ch; margin-inline: auto; text-align: center; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.65; letter-spacing: .03em; margin-top: 28px !important; color: #3e4650; }

/* Two principles */
.pr2 { display: grid; gap: 24px; margin-top: clamp(56px, 7vw, 88px) !important; }
@media (min-width: 960px) { .pr2 { grid-template-columns: 1fr 1fr; gap: 32px; } }
.pr2__card { border-radius: 34px; padding: clamp(26px, 3vw, 42px); box-shadow: var(--sh-1); display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pr2__card--a { background: #eaf0f7; }
.pr2__card--b { background: #fbf4e4; }
@media (min-width: 960px) { .pr2__card--a { transform: rotate(-1.2deg); } .pr2__card--b { transform: rotate(1.2deg) translateY(18px); } }
.pr2__card:hover { transform: rotate(0) scale(1.02); box-shadow: var(--sh-2); }
.pr2__t { display: flex; align-items: center; gap: 14px; color: var(--accent); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: .05em; margin-bottom: 26px; }
.dia-t { color: #3e4650; font-size: 16.5px; line-height: 1.65; font-style: italic; letter-spacing: .04em; }
.dia-t b { display: block; color: #2d3138; font-weight: 700; margin-bottom: 4px; }
.p1 { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 10px 24px; align-items: center; }
.p1__fig, .p2__graph, .p2__want { height: auto; }
.p1__fig { width: 100%; }
.p1__tr { grid-column: 1 / -1; margin-top: 10px; }
.p2 { display: grid; grid-template-columns: auto minmax(150px, 1fr); gap: 24px; align-items: center; }
.p2__txt .dia-t { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 960px), (max-width: 560px) { .p2__txt .dia-t { white-space: normal; } }
.p2__ls { display: grid; gap: 4px; margin-bottom: 18px; }
.p2__ls li { white-space: nowrap; font-weight: 700; font-style: italic; font-size: 17px; letter-spacing: .04em; color: #2d3138; }
.p2__l { font-weight: 700; font-style: italic; font-size: 17px; line-height: 1.6; letter-spacing: .05em; color: #2d3138; }
.p2__l + .dia-t { margin-top: 12px; }
.p2__graph { width: 100%; max-width: 240px; justify-self: center; }
.p2__want { width: min(100%, 400px); margin: 24px auto 0; }
@media (max-width: 560px) { .p1, .p2 { grid-template-columns: 1fr; } .p1__fig { max-width: 200px; margin-inline: auto; } .p2__graph { max-width: 240px; margin-inline: auto; } }

/* Animated chevrons */
.chev { display: grid; justify-items: center; gap: 10px; margin: 28px 0 !important; color: var(--accent); }
.chev__i { display: grid; justify-items: center; padding-top: 6px; }
.chev__i i { width: 18px; height: 18px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; border-radius: 2px; transform: rotate(45deg); margin-top: -6px; opacity: .2; }
.chev--up .chev__i { transform: rotate(180deg); }
.chev__l { font-size: 17px; font-weight: 600; letter-spacing: .05em; }
@media (prefers-reduced-motion: no-preference) {
  .chev__i i { animation: chev 1.6s infinite; }
  .chev__i i:nth-child(2) { animation-delay: .2s; } .chev__i i:nth-child(3) { animation-delay: .4s; }
}
@media (prefers-reduced-motion: reduce) { .chev__i i { opacity: .8; } }
@keyframes chev { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }

/* Research */
.research { background: var(--accent); color: #fff; border-radius: 36px; box-shadow: var(--sh-2); overflow: hidden; }
.research__collage { position: relative; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px) 0; }
.research__collage img { width: 100%; border-radius: 20px; }
.pill-o { position: absolute; left: clamp(36px, 5vw, 64px); bottom: -24px; background: var(--accent-2); color: #1d1500; font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: .04em; padding: 13px 26px; border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.research__body { display: grid; gap: 32px; padding: clamp(56px, 5vw, 72px) clamp(24px, 4.5vw, 56px) clamp(32px, 4vw, 52px); }
@media (min-width: 900px) { .research__body { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; } }
.research__eb { font: 600 14px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.research__t { margin-top: 10px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: .02em; }
.research__p { margin-top: 14px; color: #fff; line-height: 1.7; font-size: 16.5px; letter-spacing: .04em; }
.research__kw { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.research__kw li { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--accent-2); color: var(--accent-2); font-size: 15.5px; font-style: italic; letter-spacing: .04em; transition: background .25s, color .25s, transform .25s; }
.research__kw li:hover { background: var(--accent-2); color: #1d1500; transform: translateY(-2px); }

/* Brainstorm — quotes around the sketches (after the PDF), then the conclusion */
.bs { display: grid; grid-template-columns: minmax(0, 1fr); }
.bs__stage { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1100px) { .bs__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr); gap: 16px; width: min(100vw - 48px, 1560px); margin-left: calc(50% - min(50vw - 24px, 780px)); } }
.bs__img { position: relative; }
.bs__img img { width: 100%; }
.pill-d { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #4a4b50; color: #fff; white-space: nowrap; font-size: clamp(15px, 1.5vw, 20px); font-weight: 500; letter-spacing: .06em; padding: 13px 28px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.bs__q { display: grid; gap: clamp(18px, 2.4vw, 34px); font-style: italic; color: #3e4650; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; letter-spacing: .06em; }
.bs__q li { transition: color .25s, transform .3s var(--ease); }
.bs__q li:hover { color: var(--accent); transform: scale(1.04); }
@media (min-width: 1100px) {
  .bs__q { gap: clamp(26px, 3vw, 44px); }
  .bs__q--l { text-align: right; } .bs__q--l li:nth-child(even) { margin-right: 12%; }
  .bs__q--r { text-align: left; } .bs__q--r li:nth-child(even) { margin-left: 12%; }
}
@media (max-width: 1099px) { .bs__img { order: -1; } .bs__q { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; text-align: center; } }
.bs__concl { max-width: 680px; margin-inline: auto; background: var(--accent); color: #fff; border-radius: 32px; padding: 30px 36px; line-height: 1.75; font-size: 17px; letter-spacing: .05em; box-shadow: var(--sh-2); text-align: center; }

/* Wizard of Oz flow */
.oz { display: grid; }
.dashbox { border: 2px dashed rgba(41,72,108,.5); border-radius: 30px; padding: clamp(18px, 2.5vw, 30px); text-align: center; }
.dashbox__l { margin: 0 0 18px; color: var(--accent); font: 600 15px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.dashbox__g { display: grid; gap: 14px; }
@media (min-width: 700px) { .dashbox__g--3 { grid-template-columns: repeat(3, 1fr); } .dashbox__g--2 { grid-template-columns: repeat(2, 1fr); } }
.zoom { overflow: hidden; border-radius: 18px; box-shadow: var(--sh-1); }
.zoom img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .6s var(--ease); }
.zoom:hover img { transform: scale(1.05); }
.dashbox--sm { max-width: 860px; margin-inline: auto; width: 100%; margin-top: 0 !important; }
.decisions { background: var(--accent); color: #fff; border-radius: 32px; padding: clamp(22px, 4vw, 48px); box-shadow: var(--sh-2); }
.decisions__head { color: rgba(255,255,255,.85) !important; font: 600 14px var(--f-sans) !important; letter-spacing: .14em; }
.drow { display: grid; gap: 10px; padding: 20px 0; border-top: 1px dashed rgba(255,255,255,.35); }
.drow__dim { font-weight: 700; font-size: 18px; letter-spacing: .03em; }
.drow__opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt { padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 16px; font-style: italic; letter-spacing: .04em; transition: background .5s var(--ease), color .5s, transform .5s var(--ease); }
.opt--pick::before { content: "✓ "; display: inline-block; opacity: 0; transform: scale(0); transition: opacity .3s .25s, transform .4s .25s var(--ease); }
.drow.lit .opt--pick { background: var(--accent-2); color: #1d1500; font-weight: 700; transform: scale(1.05); }
.drow.lit .opt--pick::before { opacity: 1; transform: scale(1); }
.vs { font: 14px var(--f-sans); color: rgba(255,255,255,.8); }
.drow__why { color: var(--accent-2); font-style: italic; font-size: 16px; line-height: 1.55; letter-spacing: .04em; }
.drow__res { display: grid; gap: 4px; font-size: 16.5px; letter-spacing: .03em; }
.drow__res > span { display: flex; gap: 10px; align-items: baseline; }
.drow__res .star { color: var(--accent-2); }
@media (min-width: 960px) {
  .decisions__head, .drow { grid-template-columns: 1fr 1.6fr 1.3fr 1.6fr; align-items: center; gap: 20px; }
  .decisions__head { display: grid; text-transform: uppercase; padding-bottom: 12px; }
  .drow { padding: 18px 14px; margin-inline: -14px; border-radius: 12px; transition: background .25s; }
  .drow:hover, .drow:focus-visible { background: rgba(255,255,255,.08); outline-color: #fff; }
}

/* Concept: outcomes + sketch wall */
.concept__grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .concept__grid { grid-template-columns: minmax(320px, .85fr) 1.7fr; gap: 56px; align-items: start; } .concept__side { position: sticky; top: 100px; } }
.concept__h { color: var(--accent); font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; letter-spacing: .02em; }
.concept__sub { margin-top: 8px; color: var(--muted); font-size: 16.5px; letter-spacing: .03em; }
.concept__stars { margin-top: 26px; }
.concept__stars li { display: flex; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-style: italic; letter-spacing: .04em; }
.concept__stars li:first-child { border-top: 1px solid var(--line); }
.sketches { display: flex; gap: 14px; align-items: flex-start; }
.sketches__col { flex: 1; display: grid; gap: 14px; min-width: 0; }
.sketch { background: #fff; border-radius: 22px; padding: 10px; box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sketch:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--sh-2); position: relative; z-index: 1; }
.sketch img { width: 100%; border-radius: 14px; }
.concept__out { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 24px; }
@media (min-width: 960px) { .concept__out { grid-template-columns: minmax(320px, .85fr) 1.7fr; gap: 56px; align-items: start; } }
.concept__statement { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; letter-spacing: .01em; font-weight: 600; color: var(--accent); }
.concept__statement b { color: var(--ink); background: linear-gradient(transparent 60%, var(--hl) 60%, var(--hl) 92%, transparent 92%); }
.concept__body { display: grid; gap: 18px 36px; color: #3e4650; line-height: 1.75; font-size: 16.5px; letter-spacing: .03em; }
@media (min-width: 700px) { .concept__body { grid-template-columns: 1fr 1fr; } }

/* Exploded view */
.hot--bleed { background: var(--hot-bg, #1e1e1e); border-radius: 0; padding: 0; display: block; }
.hot--bleed .hot__in { max-width: var(--max); margin-inline: auto; display: grid; gap: 24px; padding-inline: var(--gutter); padding-bottom: 40px; }
@media (min-width: 900px) { .hot--bleed .hot__in { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; padding-bottom: 0; } }
.hot:not(.hot--bleed) .hot__in { display: contents; }
.hot__side h3 { font-size: 28px; font-weight: 700; letter-spacing: .02em; }
.hot__list button { font-family: var(--f-sans); }

/* Annotated photo — thin leader lines from the text, no markers (after the PDF) */
.anno { background: #0d1520; }
.anno__media { position: relative; }
.anno__media img { width: 100%; }
.anno__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.anno__lines path { stroke: #fff; stroke-width: 1.6; fill: none; }
.anno__num { display: none; }
.anno__label { position: absolute; color: #fff; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; letter-spacing: .07em; display: grid; gap: 6px; white-space: nowrap; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.anno__label--mid { transform: translateY(-50%); }
.anno__label--b li { padding-left: 20px; position: relative; }
.anno__label--b li::before { content: "•"; position: absolute; left: 2px; }
.anno__list { display: none; }
@media (max-width: 899px) {
  .anno__label, .anno__lines { display: none; }
  .anno__num { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--accent-2); color: #1d1500; font: 700 14px var(--f-sans); }
  .anno__list { display: grid; gap: 14px; counter-reset: a; padding-block: 24px 32px; color: #fff; font-size: 16px; letter-spacing: .03em; }
  .anno__list li { counter-increment: a; display: grid; grid-template-columns: 30px 1fr; }
  .anno__list li::before { content: counter(a); color: var(--accent-2); font-weight: 700; }
}

/* Video (YouTube cover → player) */
.video { position: relative; aspect-ratio: 16/9; border-radius: 28px; overflow: hidden; background: #000; box-shadow: var(--sh-2); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.video__play img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: brightness(.85); }
.video__play:hover img { transform: scale(1.03); filter: brightness(1); }
.video__btn { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--accent-2); color: #1d1500; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.video__btn svg { width: 36px; height: 36px; margin-left: 4px; }
.video__play:hover .video__btn { transform: scale(1.08); }
.video__play:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -3px; }
.video__cap { position: absolute; left: 24px; bottom: 20px; color: #fff; font: 600 14px var(--f-sans); letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.55); padding: 6px 14px; border-radius: 999px; }

/* Audience bubbles */
.aud { display: grid; gap: 22px; margin-top: clamp(64px, 9vw, 110px) !important; }
.aud__fig { text-align: center; color: var(--muted); font-size: 16px; letter-spacing: .08em; }
.aud__fig svg { width: 110px; height: auto; margin: 0 auto 8px; }
.aud__q { margin: 0; position: relative; background: var(--accent); color: #fff; border-radius: 28px; padding: 24px 30px; font-style: italic; line-height: 1.65; font-size: clamp(16px, 1.3vw, 18px); letter-spacing: .05em; box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.aud__q:hover, .aud__q:focus-visible { transform: scale(1.04); box-shadow: var(--sh-2); outline: none; }
.aud__q em { color: var(--accent-2); background: none; font-weight: 500; font-style: italic; padding: 0; }
@media (min-width: 900px) {
  .aud { grid-template-columns: 1fr 180px 1fr; grid-template-areas: "q1 q1 ." ". fig q2" "q3 q3 ."; align-items: center; gap: 16px 28px; max-width: 1060px; margin-inline: auto; }
  .aud__fig { grid-area: fig; } .aud__q--1 { grid-area: q1; justify-self: end; max-width: 580px; } .aud__q--2 { grid-area: q2; max-width: 380px; } .aud__q--3 { grid-area: q3; justify-self: end; max-width: 640px; }
  .aud__q::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--accent); transform: rotate(45deg); border-radius: 3px; }
  .aud__q--1::after { right: 22%; bottom: -7px; } .aud__q--2::after { left: -7px; top: calc(50% - 9px); } .aud__q--3::after { right: 30%; top: -7px; }
}
.reflect { max-width: 780px; margin: clamp(48px, 6vw, 72px) auto 0 !important; padding: 4px 0 4px 24px; border-left: 4px solid var(--accent); line-height: 1.8; color: #3e4650; font-size: 17px; letter-spacing: .03em; }

/* Photo carousel — each photo casts its own shadow */
.strip { position: relative; background: var(--accent); padding-block: 8px; margin-top: clamp(56px, 7vw, 88px) !important; }
.strip__track { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 28px 22px 44px; }
.strip__track::-webkit-scrollbar { display: none; }
.strip__track:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -3px; }
.strip__track li { flex: none; width: clamp(260px, 30vw, 440px); border-radius: 20px; box-shadow: 0 4px 8px rgba(5,15,30,.25), 0 16px 26px rgba(5,15,30,.35); }
.strip__track img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 20px; }
.strip__nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: #fff; color: var(--accent); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .25s var(--ease); }
.strip__nav:hover { transform: scale(1.08); }
.strip__nav:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.strip__nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.strip__nav--prev { left: clamp(10px, 2vw, 28px); } .strip__nav--next { right: clamp(10px, 2vw, 28px); }
/* (padding handled below) */
@media (max-width: 560px) { .cover__meta { gap: 20px 16px; } .cover__meta dt { white-space: nowrap; font-size: 15px; } .cover__meta dd { font-size: 15.5px; } }

/* ---------- Project header (light) + two-image hero, after the PDF cover ---------- */
.phead2 { background: var(--head-bg, var(--navy)); color: #fff; padding-block: 28px clamp(48px, 5vw, 72px); text-align: center; }
.phead2 .crumb { text-align: left; margin: 0 0 clamp(20px, 3vw, 36px); }
.phead2 .crumb a { color: #b9c2cc; } .phead2 .crumb a:hover { color: #fff; }
.phead2__t { color: var(--head-title, var(--accent-2)); font-size: clamp(44px, 6vw, 84px); font-weight: 700; letter-spacing: .01em; line-height: 1.05; }
.phead2__d { margin-top: 12px; color: var(--head-sub, #b9c2cc); font-weight: 600; letter-spacing: .06em; font-size: clamp(17px, 1.7vw, 23px); }
.phead2__intro { max-width: 58ch; margin: clamp(24px, 3vw, 36px) auto 0; color: #e6ebf1; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; letter-spacing: .04em; }
.phero2 { display: grid; grid-template-columns: 1fr; background: var(--head-bg, var(--navy)); }
@media (min-width: 760px) { .phero2 { grid-template-columns: 1fr 1fr; } }
.phero2 figure { margin: 0; overflow: hidden; }
.phero2 img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 1.2s var(--ease); }
.phero2 figure:hover img { transform: scale(1.03); }
.pmeta2 { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; padding-block: 36px 40px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .pmeta2 { grid-template-columns: repeat(5, max-content); justify-content: space-between; } }
.pmeta2 dt { font-size: 15px; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.pmeta2 dd { margin: 0; display: grid; gap: 4px; font-weight: 600; letter-spacing: .04em; font-size: 16.5px; color: var(--ink); white-space: nowrap; }

/* ---------- Project goal: one line, like the PDF banner ---------- */
.goal { margin-top: clamp(48px, 5vw, 72px); background: var(--accent); color: #fff; border-radius: 999px; padding: clamp(22px, 2.4vw, 34px) clamp(28px, 3.6vw, 56px); box-shadow: 0 8px 18px rgba(41,72,108,.22), 0 28px 60px rgba(41,72,108,.28); }
.goal__row { display: flex; align-items: center; gap: .9em; white-space: nowrap; font-size: 21px; overflow: hidden; }
.goal__k { font-style: italic; font-weight: 500; font-size: 1.75em; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.25); flex: none; }
.goal__dash { flex: none; width: 2.6em; height: 2px; background: #fff; }
.goal__t { color: var(--accent-2); font-style: italic; font-weight: 500; letter-spacing: .03em; text-shadow: 0 2px 10px rgba(0,0,0,.28); }
.goal__row.wrapped { flex-direction: column; align-items: flex-start; white-space: normal; gap: 10px; font-size: 18px; }
.goal__row.wrapped .goal__dash { display: none; }
@media (max-width: 720px) { .goal { border-radius: 32px; } }
@media (min-width: 1100px) {
  .bs__stage { align-items: stretch; }
  .bs__q { display: flex; flex-direction: column; justify-content: space-evenly; padding-block: 4%; }
}

/* round 6 */
.dashbox--pair { width: 100%; max-width: calc((100% - 28px) * 2 / 3 + 14px + 2 * clamp(18px, 2.5vw, 30px) + 4px); margin-inline: auto; }
.phead2__intro { max-width: 62ch; text-wrap: balance; }
.sec__t { max-width: 22em; text-wrap: balance; }
.bs__q li span { white-space: nowrap; }
@media (min-width: 1100px) { .bs__q li span { display: block; } }
.anno__label { text-wrap: nowrap; }
.anno__media { overflow: hidden; }
@media (min-width: 1100px) { .bs__q { font-size: clamp(15px, 1.15vw, 18px); } }

/* Audience: three listeners in the middle, every bubble points at them */
.aud__fig svg { width: 200px; }
@media (min-width: 900px) {
  .aud { grid-template-columns: 1fr 220px 1fr; grid-template-areas: ". q2 ." "q1 fig q3"; gap: 28px 32px; align-items: center; max-width: 1180px; }
  .aud__fig { grid-area: fig; }
  .aud__q--1, .aud__q--2, .aud__q--3 { max-width: none; justify-self: stretch; }
  .aud__q--1 { grid-area: q1; } .aud__q--3 { grid-area: q3; }
  .aud__q--2 { grid-area: q2; justify-self: center; width: max-content; max-width: 420px; text-align: center; }
  .aud__q--1::after { right: -7px; left: auto; top: calc(50% - 9px); bottom: auto; }
  .aud__q--3::after { left: -7px; right: auto; top: calc(50% - 9px); }
  .aud__q--2::after { left: calc(50% - 9px); right: auto; top: auto; bottom: -7px; }
}
.research__collage img { border-radius: 14px; }
@media (min-width: 900px) { .aud__q--2 { max-width: none; white-space: nowrap; } }

/* =========================================================
   Shared case-study components (DualFlip, Byte, Petrol, Side)
   ========================================================= */
.phero2--n1 { grid-template-columns: 1fr !important; }
.phero2--n1 img { aspect-ratio: 16/8; }
@media (min-width: 760px) { .phero2--n3 { grid-template-columns: repeat(3, 1fr); } .phero2--n3 img { aspect-ratio: 4/3; } }
.phead2__award { margin-top: 24px; display: flex; justify-content: center; }
.phead2__award img { width: 110px; height: auto; }
.lead { max-width: 52ch; margin-inline: auto; text-align: center; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.65; letter-spacing: .02em; color: var(--ink-2); margin-top: 28px !important; }

/* Pills / keyword chips */
.pills { text-align: center; }
.pills__l { font: 600 14px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.pills ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pill2 { display: inline-grid; place-items: center; min-width: 96px; height: 96px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .03em; box-shadow: var(--sh-1); transition: transform .35s var(--ease); }
.pill2:hover { transform: translateY(-4px) scale(1.05); }
.pill2--a { background: var(--accent); color: #fff; }
.pill2--b { background: var(--accent-2); color: #1d1500; }

/* Question prompts */
.qs { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.qs li { background: var(--accent-2); color: #1d1500; font-weight: 700; letter-spacing: .03em; padding: 16px 26px; border-radius: 18px; box-shadow: var(--sh-1); }

/* Future map (Now → 2049) */
.fmap { background: var(--surface); border-radius: 32px; padding: clamp(24px, 4vw, 48px); box-shadow: var(--sh-1); overflow: hidden; }
.fmap__axis { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 14px; font-weight: 700; letter-spacing: .06em; margin-bottom: 26px; color: var(--ink); }
.fmap__axis i { height: 2px; background: linear-gradient(90deg, var(--muted), var(--accent-2)); position: relative; }
.fmap__axis .fmap__arrow { background: var(--accent-2); }
.fmap__axis .fmap__arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 12px solid var(--accent-2); border-right: 0; }
.fmap__to, .fmap__lab { color: var(--accent-2); }
.fmap__rows { display: grid; gap: 14px; }
.fmap__row { display: grid; gap: 12px; align-items: center; }
@media (min-width: 900px) { .fmap__row { grid-template-columns: 260px 1fr; gap: 24px; } }
.fmap__q { background: var(--accent-2); color: #1d1500; font-weight: 700; padding: 14px 18px; border-radius: 16px; letter-spacing: .02em; position: relative; }
@media (min-width: 900px) { .fmap__q::after { content: ""; position: absolute; right: -10px; top: calc(50% - 8px); border: 8px solid transparent; border-left: 10px solid var(--accent-2); border-right: 0; } }
.fmap__steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; align-items: center; }
@media (min-width: 900px) { .fmap__steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } .fmap__steps li + li::before { content: "›"; position: absolute; left: -12px; color: var(--muted); } }
.fmap__steps li { position: relative; font-weight: 600; letter-spacing: .04em; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.fmap__steps .is-end { color: var(--accent-2); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .fmap .fmap__steps li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .fmap.go .fmap__steps li { opacity: 1; transform: none; }
  .fmap.go .fmap__row:nth-child(1) li { transition-delay: calc(var(--i, 0) * 0s); }
  .fmap.go .fmap__steps li:nth-child(2) { transition-delay: .12s; } .fmap.go .fmap__steps li:nth-child(3) { transition-delay: .24s; } .fmap.go .fmap__steps li:nth-child(4) { transition-delay: .42s; }
}

/* Photo grids */
.photos__l { margin: 0 0 18px; text-align: center; color: var(--accent-ink, var(--accent)); font: 600 15px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.photos__g { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .photos__g { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .photos__g { grid-template-columns: repeat(var(--cols), 1fr); } }
.photos__g .span-2 { grid-column: span 2; }
.photos .zoom { position: relative; }
.photos .zoom img { aspect-ratio: var(--r, 3/2); }
.zoom--fit img { object-fit: contain !important; background: var(--surface); }
.photos__n { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 14px var(--f-sans); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.photos__c { margin-top: 10px; font-size: 15.5px; font-style: italic; letter-spacing: .03em; color: var(--ink-2); line-height: 1.5; }
.photos__cap { margin-top: 14px; text-align: center; font-size: 15.5px; font-style: italic; color: var(--ink-2); letter-spacing: .03em; }

/* Media + text */
.media { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .media { grid-template-columns: 1.2fr 1fr; gap: 56px; } .media--rev .media__img { order: 2; } }
.media__img img { width: 100%; border-radius: 22px; box-shadow: var(--sh-1); }
.media__img figcaption { margin-top: 10px; color: var(--muted); font-style: italic; }
.media__k { font: 600 14px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); margin-bottom: 10px; }
.media__t { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 14px; color: var(--ink); }
.media__txt p { color: var(--ink-2); line-height: 1.75; font-size: 17px; letter-spacing: .02em; }
.media__txt p + p { margin-top: 1em; }
.media__ls { margin-top: 16px; display: grid; gap: 10px; }
.media__ls li { padding-left: 22px; position: relative; color: var(--ink-2); line-height: 1.6; }
.media__ls li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
.media b, .notes b, .meter b { color: var(--ink); }

/* Process flow chips */
.flow2 { background: var(--accent); color: #fff; border-radius: 32px; padding: clamp(24px, 3.5vw, 44px); box-shadow: var(--sh-2); }
.flow2__l { font: 700 15px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 26px; }
.flow2__s { display: flex; align-items: center; gap: 10px; }
.flow2__c { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; justify-items: center; text-align: center; }
.flow2__br { display: grid; gap: 8px; width: 100%; }
.flow2__n { display: block; width: 100%; background: rgba(255,255,255,.16); border-radius: 18px; padding: 14px 12px; font-weight: 600; letter-spacing: .02em; font-size: 15px; line-height: 1.35; }
.flow2__n.is-end { background: var(--accent-2); color: #1d1500; }
.flow2__note { font-size: 13.5px; font-weight: 600; color: var(--accent-2); line-height: 1.35; }
.flow2__a { flex: none; display: flex; color: var(--accent-2); }
.flow2__a i { width: 9px; height: 9px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); margin-left: -2px; opacity: .25; }
@media (prefers-reduced-motion: no-preference) { .flow2__a i { animation: chev 1.6s infinite; } .flow2__a i:nth-child(2) { animation-delay: .2s; } .flow2__a i:nth-child(3) { animation-delay: .4s; } }
@media (max-width: 860px) { .flow2__s { flex-direction: column; align-items: stretch; } .flow2__a { justify-content: center; transform: rotate(90deg); margin: 4px 0; } }

/* Stats */
.stats { display: grid; gap: 28px; align-items: center; background: var(--surface); border-radius: 32px; padding: clamp(22px, 3.5vw, 44px); box-shadow: var(--sh-1); }
@media (min-width: 900px) { .stats { grid-template-columns: 1.4fr 1fr; } }
.stats__img img { width: 100%; border-radius: 18px; }
.stats__l { display: grid; gap: 28px; }
.stats__l li { display: grid; gap: 4px; }
.stats__n { font-size: clamp(54px, 6vw, 84px); font-weight: 700; line-height: 1; color: var(--accent-2); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stats__n::after { content: " ↑"; font-size: .5em; vertical-align: .55em; }
.stats__u { font-size: 17px; color: var(--ink-2); letter-spacing: .04em; }

/* Background list with "But" */
.bgl { display: grid; gap: 18px; justify-items: start; background: var(--surface); border-radius: 30px; padding: clamp(24px, 3.5vw, 44px); box-shadow: var(--sh-1); }
.bgl__l { display: grid; gap: 10px; counter-reset: b; }
.bgl__l li { counter-increment: b; display: grid; grid-template-columns: 34px 1fr; font-size: 18px; line-height: 1.55; color: var(--ink); }
.bgl__l li::before { content: counter(b) "."; font-weight: 700; color: var(--accent-ink, var(--accent)); }
.bgl__but span { font: 800 15px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); display: inline-flex; align-items: center; gap: 10px; }
.bgl__but span::after { content: "↓"; font-size: 20px; }
.bgl__x { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; line-height: 1.5; color: var(--ink); background: linear-gradient(transparent 60%, var(--hl) 60%, var(--hl) 92%, transparent 92%); display: inline; }

/* Workflow versions (tabs) */
.wf { background: var(--tint, #fdf0e3); border-radius: 32px; padding: clamp(18px, 3vw, 40px); box-shadow: var(--sh-1); }
.wf__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.wf__tabs button { all: unset; cursor: pointer; display: inline-flex; gap: 12px; align-items: center; padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; letter-spacing: .03em; box-shadow: var(--sh-1); transition: background .3s, color .3s, transform .3s var(--ease); }
.wf__tabs button b { font-variant-numeric: tabular-nums; color: var(--accent-ink, var(--accent)); }
.wf__tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.wf__tabs button[aria-selected="true"] b { color: var(--accent-2); }
.wf__tabs button:hover { transform: translateY(-2px); }
.wf__tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wf__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin-bottom: 18px; }
.wf__err { font-size: 18px; font-weight: 600; } .wf__err b { font-size: 30px; color: var(--accent-ink, var(--accent)); margin-left: 6px; }
.wf__v { margin-left: 12px; background: var(--accent); color: #fff; font: 700 13px var(--f-sans); letter-spacing: .12em; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; vertical-align: middle; }
.wf__note { color: var(--ink-2); font-style: italic; }
.wf__steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; counter-reset: s; }
.wf__s { position: relative; display: flex; gap: 10px; align-items: flex-start; background: #6b6d6b; color: #fff; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.35; letter-spacing: .02em; transition: transform .35s var(--ease); }
.wf__s:hover { transform: translateY(-3px); }
.wf__i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.wf__s.is-issue { background: #b3165a; }
.wf__s.is-new { background: #c25a00; }
.wf__s.is-moved { background: #c25a00; outline: 2px dashed #c25a00; outline-offset: 3px; }
.wf__s.is-ok { background: var(--accent); }
.wf__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.wf__legend li { display: inline-flex; align-items: center; gap: 8px; }
.wf__legend li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.wf__legend .is-issue::before { background: #b3165a; } .wf__legend .is-new::before, .wf__legend .is-moved::before { background: #c25a00; } .wf__legend .is-ok::before { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .wf__p.swap .wf__s { animation: pop .45s var(--ease) both; } .wf__p.swap .wf__s:nth-child(n) { animation-delay: calc(var(--k, 0) * 1ms); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* Old → New comparisons */
.cmp { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .cmp { grid-template-columns: repeat(3, 1fr); } }
.cmp__i { background: var(--surface); border-radius: 26px; padding: 18px; box-shadow: var(--sh-1); display: grid; gap: 14px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cmp__i:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.cmp__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.cmp__pair:has(> figure:only-child) { grid-template-columns: 1fr; }
.cmp figure { margin: 0; position: relative; }
.cmp img { width: 100%; border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; }
.cmp figcaption { position: absolute; left: 8px; top: 8px; font: 700 11.5px var(--f-sans); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #fff; color: #333; }
.cmp__new figcaption { background: #c8102e; color: #fff; }
.cmp__arrow { color: var(--accent-ink, var(--accent)); font-weight: 700; }
.cmp__t { font-size: 16.5px; line-height: 1.55; letter-spacing: .02em; color: var(--ink); }

/* Error-rate meter */
.meter { background: var(--surface); border-radius: 30px; padding: clamp(22px, 3.5vw, 40px); box-shadow: var(--sh-1); }
.meter__t { font-weight: 700; font-size: 20px; margin-bottom: 18px; }
.meter__l { display: grid; gap: 14px; }
.meter__l li { display: grid; grid-template-columns: minmax(120px, 160px) 1fr 64px; gap: 14px; align-items: center; font-weight: 600; }
.meter__bar { height: 18px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter__bar i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: #7a7c7a; transform-origin: left; transition: transform 1.1s var(--ease); }
.meter .is-bad .meter__bar i { background: #b3165a; } .meter .is-good .meter__bar i { background: var(--accent); }
.meter__v { font-variant-numeric: tabular-nums; text-align: right; font-size: 18px; }
@media (prefers-reduced-motion: no-preference) { .meter .meter__bar i { transform: scaleX(0); } .meter.go .meter__bar i { transform: scaleX(1); } .meter.go li:nth-child(2) i { transition-delay: .2s; } .meter.go li:nth-child(3) i { transition-delay: .4s; } }
.meter__f { margin-top: 16px; color: var(--ink-2); line-height: 1.6; }

/* Numbered notes */
.notes { background: var(--surface); border-radius: 26px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--sh-1); }
.notes__t { font-weight: 700; font-size: 19px; margin-bottom: 14px; color: var(--ink); }
.notes ol { display: grid; gap: 12px; counter-reset: n; }
.notes li { counter-increment: n; display: grid; grid-template-columns: 30px 1fr; line-height: 1.6; color: var(--ink-2); font-size: 17px; }
.notes li::before { content: counter(n) "."; font-weight: 700; color: var(--accent-ink, var(--accent)); }
.notes em { background: none; color: #b3165a; font-weight: 600; padding: 0; }

/* Personas */
.pers { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pers { grid-template-columns: repeat(3, 1fr); } }
.pers__i { display: grid; gap: 12px; align-content: start; }
.pers__fig { position: relative; height: 230px; display: flex; align-items: flex-end; padding-left: 8px; }
.pers__fig img { height: 200px; width: auto; transition: transform .5s var(--ease); }
.pers__i:hover .pers__fig img { transform: rotate(-3deg) scale(1.04); }
.pers__bub { position: absolute; right: 0; top: 4px; max-width: 62%; background: #4a4b50; color: #fff; font-style: italic; font-size: 15px; line-height: 1.45; padding: 12px 16px; border-radius: 18px; box-shadow: var(--sh-1); }
.pers__bub::after { content: ""; position: absolute; left: 22px; bottom: -8px; width: 16px; height: 16px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.pers__n { color: var(--pc); font-size: 21px; }
.pers__t { background: var(--pc); color: #fff; border-radius: 22px; padding: 18px 20px; line-height: 1.6; font-size: 16px; box-shadow: var(--sh-1); }

/* Pain points */
.pains { position: relative; display: grid; gap: 18px; border: 2px solid var(--accent); border-radius: 30px; padding: clamp(22px, 3.5vw, 40px); }
@media (min-width: 900px) { .pains { grid-template-columns: 220px 1fr 120px; align-items: center; gap: 24px; } }
.pains__l { font-size: 22px; font-weight: 700; color: var(--accent); }
.chev-inline { letter-spacing: -2px; }
.pains ul { display: grid; gap: 10px; font-size: 17.5px; line-height: 1.5; }
.pains b { color: var(--accent); }
.pains__ic { width: 110px; height: auto; justify-self: center; }

/* Pros / cons */
.pc { display: grid; gap: 18px; }
.pc__i { display: grid; gap: 18px; align-items: center; background: var(--accent); color: #fff; border-radius: 30px; padding: clamp(18px, 3vw, 30px); box-shadow: var(--sh-1); transition: transform .4s var(--ease); }
.pc__i:hover { transform: translateX(6px); }
@media (min-width: 900px) { .pc__i { grid-template-columns: 200px 1fr; gap: 32px; } .pc__i:nth-child(even) { grid-template-columns: 1fr 200px; } .pc__i:nth-child(even) .pc__img { order: 2; } }
.pc__img { margin: 0; background: #fff; border-radius: 22px; padding: 14px; text-align: center; }
.pc__img img { max-height: 140px; width: auto; max-width: 100%; margin-inline: auto; }
.pc__img figcaption { margin-top: 8px; color: #222; font-weight: 700; font-style: italic; }
.pc__cols { display: grid; gap: 18px; }
@media (min-width: 640px) { .pc__cols { grid-template-columns: 1fr 1fr; } .pc__cols > div + div { border-left: 2px dashed rgba(255,255,255,.4); padding-left: 22px; } }
.pc__h { font: 700 14px var(--f-sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.pc__h--p { color: #a6f0a6; } .pc__h--p::before { content: "✓"; }
.pc__h--c { color: var(--accent-2); } .pc__h--c::before { content: "☹"; }
.pc ol { display: grid; gap: 6px; counter-reset: c; }
.pc ol li { counter-increment: c; display: grid; grid-template-columns: 24px 1fr; font-size: 16px; line-height: 1.5; }
.pc ol li::before { content: counter(c); font-weight: 700; opacity: .8; }
.pc__take { margin-top: 24px !important; text-align: center; font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; line-height: 1.5; max-width: 44ch; margin-inline: auto; }

/* Product modes (tabs) */
.modes { display: grid; gap: 22px; }
.modes__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.modes__tabs button { all: unset; cursor: pointer; padding: 12px 22px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); font-weight: 600; letter-spacing: .03em; transition: background .3s, color .3s, transform .3s var(--ease); }
.modes__tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.modes__tabs button:hover { transform: translateY(-2px); }
.modes__tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.modes__p { margin: 0; position: relative; border-radius: 30px; overflow: hidden; box-shadow: var(--sh-2); }
.modes__p img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.modes__p figcaption { position: absolute; left: 20px; right: 20px; bottom: 20px; max-width: 520px; background: rgba(255,255,255,.94); color: var(--ink); border-radius: 20px; padding: 18px 22px; line-height: 1.55; box-shadow: var(--sh-1); }
.modes__p figcaption b { display: block; color: var(--accent); font-size: 19px; margin-bottom: 4px; }
@media (max-width: 700px) { .modes__p figcaption { position: static; border-radius: 0; } }
@media (prefers-reduced-motion: no-preference) { .modes__p.swap img { animation: fadeZoom .6s var(--ease) both; } }
@keyframes fadeZoom { from { opacity: .3; transform: scale(1.03); } }

/* Labeled image */
.lbl { margin: 0; }
.lbl img { width: 100%; }
.lbl__l { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.lbl__l li { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; font-size: 15px; }

/* Exhibitions list, artwork headers, pull quote, link */
.shows { display: grid; gap: 10px; max-width: 760px; margin-inline: auto; }
.shows li { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; letter-spacing: .02em; }
.shows__y { font-weight: 700; color: var(--accent-ink, var(--accent)); }
.artw { margin-top: clamp(96px, 12vw, 160px) !important; display: grid; gap: 10px; justify-items: center; text-align: center; }
.artw__k { font: 600 14px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.artw__t { font-size: clamp(32px, 4vw, 54px); max-width: 22em; }
.artw__g { font-style: italic; color: var(--ink-2); font-size: 18px; }
.pull { margin: 0 auto; max-width: 900px; text-align: center; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.45; font-style: italic; color: var(--ink); }
.pull em { background: none; color: var(--accent-ink, var(--accent)); font-weight: 600; padding: 0; }
.xlink { text-align: center; }
.xlink a { display: inline-flex; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; box-shadow: var(--sh-1); }
.xlink a:hover { transform: translateY(-2px); }

/* ---------- Dark theme (Byte to the Ancestors, after its PDF) ---------- */
:root[data-theme="dark"] { --bg: #121113; --surface: #1e1c20; --ink: #f1ede6; --ink-2: #cfc9c0; --muted: #a9a39b; --line: #36323a; --hl: rgba(247,161,70,.35);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45); --sh-2: 0 4px 10px rgba(0,0,0,.5), 0 22px 50px rgba(0,0,0,.6); --accent-ink: var(--accent-2); }
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); }
:root[data-theme="dark"] .btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
:root[data-theme="dark"] .site-footer { background: #000; color: #f1ede6; }
:root[data-theme="dark"] .sec__n { color: var(--accent-2); }
:root[data-theme="dark"] .pmeta2 dd { color: var(--ink); }
:root[data-theme="dark"] .project em { color: var(--ink); }
:root[data-theme="dark"] .wf__tabs button, :root[data-theme="dark"] .modes__tabs button { background: var(--surface); }
:root[data-theme="dark"] .pnext a { color: var(--ink); }
:root[data-theme="dark"] :focus-visible { outline-color: var(--accent-2); }
@media (max-width: 600px) { .pmeta2 { grid-template-columns: 1fr 1fr; } .pmeta2 dd { white-space: normal; } }

.project .pbody { padding-bottom: clamp(72px, 9vw, 120px); }
.project .pbody:has(> .strip:last-child) { padding-bottom: 0; }
.artw + .pull, .shows + .media { margin-top: clamp(40px, 5vw, 64px) !important; }
.notes li span { min-width: 0; }

/* =========================================================
   Round 9 — rebuilt components
   ========================================================= */
:root { --pink: #ff5fae; }

/* Justified rows: photos are never cropped; each keeps its own aspect ratio */
.jrow { display: flex; gap: 14px; }
.jrow + .jrow { margin-top: 14px; }
.jrow__i { min-width: 0; margin: 0; }
.jrow__i img { width: 100%; height: auto; display: block; border-radius: 18px; }
.jrow .zoom img { aspect-ratio: auto !important; object-fit: contain; }
.photos2 { margin-left: 0; margin-right: 0; }
.photos2 .photos__l { margin-bottom: 18px; }
@media (max-width: 640px) { .photos2 .jrow { flex-wrap: wrap; } .photos2 .jrow__i { flex-basis: 100% !important; } }

/* Lightbox */
img.zoomable { cursor: zoom-in; }
img.zoomable:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8, 10, 14, .92); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 24px 8px; animation: lbIn .25s var(--ease); }
.lb[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } }
.lb__f { margin: 0; display: grid; justify-items: center; gap: 14px; max-height: 100%; min-width: 0; }
.lb__f img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb__f figcaption { color: #e8e8e8; font-size: 16px; text-align: center; max-width: 70ch; }
.lb__x, .lb__nav { all: unset; cursor: pointer; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.lb__x { position: absolute; top: 16px; right: 18px; width: 48px; height: 48px; font-size: 34px; line-height: 1; background: rgba(255,255,255,.12); }
.lb__nav { width: 52px; height: 52px; font-size: 40px; background: rgba(255,255,255,.12); justify-self: center; }
.lb__x:hover, .lb__nav:hover { background: rgba(255,255,255,.24); }
.lb__x:focus-visible, .lb__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
html.lb-open { overflow: hidden; }
@media (max-width: 640px) { .lb { grid-template-columns: 44px 1fr 44px; } .lb__nav { width: 40px; height: 40px; font-size: 30px; } }

/* ---------- Byte: meta logos, pills, questions ---------- */
.pmeta2__logos { display: grid; gap: 14px; margin-top: 14px; justify-items: start; }
.pmeta2__logos img { width: auto; max-width: 100%; }
:root[data-theme="dark"] .project em { color: var(--pink); background: none; font-weight: 600; padding: 0; }
.pill2 { box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25); }
.pill2--b { box-shadow: 0 10px 24px rgba(247,161,70,.35), 0 3px 6px rgba(0,0,0,.3); }
.pill2--a { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 55%, transparent), 0 3px 6px rgba(0,0,0,.3); }
.media__link { margin-top: 18px; }
.media__link a { color: var(--accent-ink, var(--accent)); font-weight: 600; text-underline-offset: 5px; }

.stp__p[hidden], .modes__p[hidden], .wf__p[hidden] { display: none !important; }

/* =========================================================
   Round 10 — DualFlip + Byte, rebuilt after the PDFs
   ========================================================= */
/* Project header: left-aligned, one rhythm (8px grid) */
.phead2 { text-align: left; padding-block: 24px clamp(48px, 6vw, 80px); }
.phead2 .crumb { margin-bottom: clamp(32px, 4vw, 56px); }
.phead2__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.22); }
.phead2__t { font-size: clamp(44px, 6.4vw, 88px); letter-spacing: -.01em; line-height: 1; }
.phead2__d { margin: 0; font-size: clamp(15px, 1.25vw, 18px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.phead2__intro { margin: 32px 0 0; max-width: 60ch; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.7; letter-spacing: .01em; text-wrap: pretty; }
.phead2__award { display: none; }
.pmeta2 { display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 5.5vw, 96px); padding-block: 40px; align-items: flex-start; }
.pmeta2 > div { min-width: 0; }
.pmeta2 dt { font-size: 14px; font-weight: 400; letter-spacing: .04em; text-transform: lowercase; color: var(--muted); margin: 0 0 12px; }
.pmeta2 dd { gap: 6px; font-size: 16px; letter-spacing: .02em; line-height: 1.35; white-space: nowrap; }
.pmeta2__logos { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; align-items: center; }
.pmeta2__logos img { display: block; }
.pmeta2__award { margin-left: auto; align-self: center; }
.pmeta2__award img { display: block; width: auto; }
@media (max-width: 700px) { .pmeta2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; } .pmeta2 dd { white-space: normal; } .pmeta2__award { margin: 0; } }
.sec__t small { display: inline-block; font-size: .45em; font-weight: 500; letter-spacing: .02em; color: var(--muted); vertical-align: middle; margin-left: .3em; }

/* Background quote box (PDF: blue rounded box, big quote marks, left aligned) */
.qbox { position: relative; margin: 0; max-width: none; background: var(--accent); color: #fff; border-radius: 36px; padding: clamp(32px, 4vw, 52px) clamp(28px, 4.5vw, 64px); box-shadow: var(--sh-1); }
.qbox p { font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.75; letter-spacing: .01em; max-width: 72ch; text-align: left; text-wrap: pretty; }
.qbox__m { position: absolute; font: 800 clamp(72px, 8vw, 110px)/1 Georgia, "Times New Roman", serif; color: var(--ink); }
.qbox__m--o { left: clamp(20px, 3vw, 44px); top: clamp(-40px, -3.4vw, -26px); }
.qbox__m--c { right: clamp(20px, 3vw, 44px); bottom: clamp(-76px, -6vw, -52px); }

/* Bracket header (PDF: thin line that drops at both ends, label sitting in the line) */
.bracket { position: relative; height: 40px; margin: 0 0 8px; border: 2px solid var(--accent); border-bottom: 0; border-radius: 0; display: flex; justify-content: flex-end; }
.bracket::after { content: ""; position: absolute; right: -2px; top: -2px; width: 2px; height: 80px; background: var(--accent); }
.bracket { border-right: 0; height: 30px; }
.bracket span { position: relative; top: -.78em; margin-right: 12%; padding: 0 20px; background: var(--bg); color: var(--accent); font-weight: 700; font-size: clamp(20px, 1.8vw, 25px); letter-spacing: .02em; }

/* Personas — static; hover/focus lifts one and dims the others */
.pers3 { margin-top: clamp(64px, 7vw, 96px) !important; }
.pers3__l { display: grid; gap: 40px 24px; }
@media (min-width: 900px) { .pers3__l { grid-template-columns: repeat(3, 1fr); } }
.pers3__i { display: grid; grid-template-rows: auto 1fr; outline: none; transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease); }
@media (hover: hover) { .pers3__l:has(.pers3__i:hover) .pers3__i:not(:hover) { opacity: .38; filter: saturate(.6); } .pers3__i:hover { transform: scale(1.04); } }
.pers3__l:has(.pers3__i:focus-visible) .pers3__i:not(:focus-visible) { opacity: .38; }
.pers3__i:focus-visible { transform: scale(1.04); } .pers3__i:focus-visible .pers3__card { outline: 3px solid var(--ink); outline-offset: 3px; }
.pers3__top { position: relative; display: grid; grid-template-columns: 46% 1fr; grid-template-rows: auto auto; align-items: end; min-height: 250px; }
.pers3__bub { grid-column: 1 / -1; grid-row: 1; justify-self: end; position: relative; width: min(72%, 270px); margin: 0 0 22px; background: #47484d; color: #fff; border-radius: 22px; padding: 14px 20px; font-style: italic; font-size: 15.5px; line-height: 1.5; display: grid; gap: 2px; }
.pers3__tail { position: absolute; left: 22px; bottom: -22px; width: 40px; height: 26px; fill: #47484d; }
.pers3__fig { grid-column: 1; grid-row: 2; margin-top: -40px; }
.pers3__fig img { display: block; width: 100%; max-height: 190px; object-fit: contain; object-position: left bottom; }
.pers3__n { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 10px 6px; color: var(--pi); font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
.pers3__card { background: var(--pc); color: #fff; border-radius: 32px; padding: 24px 26px; font-size: 16px; line-height: 1.65; box-shadow: var(--sh-1); }

/* Pros / cons — PDF bubble with curved tail; cons carry the weight */
.pc3 { display: grid; gap: clamp(40px, 5vw, 56px); }
.pc3__i { display: grid; gap: 16px; align-items: center; }
@media (min-width: 900px) { .pc3__i--r { grid-template-columns: 1fr 200px; } .pc3__i--l { grid-template-columns: 200px 1fr; } .pc3__i--r .pc3__prod { order: 2; } }
.pc3__prod { margin: 0; display: grid; justify-items: center; gap: 8px; }
.pc3__prod svg { width: 132px; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.pc3__prod svg .f { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke-width: 1.6; }
.pc3__prod svg .k { stroke-dasharray: 4 5; stroke-width: 2; }
.pc3__prod figcaption { font-style: italic; font-weight: 600; font-size: 21px; color: var(--ink); }
.pc3__bub { position: relative; display: grid; gap: 24px; background: #2f6fbf; color: #fff; border-radius: 40px; padding: 32px clamp(24px, 3vw, 44px) 24px clamp(56px, 5vw, 72px); }
@media (min-width: 640px) { .pc3__bub { grid-template-columns: 1fr 1.15fr; gap: 0; } .pc3__col--c { border-left: 2px dashed rgba(255,255,255,.55); padding-left: clamp(20px, 2.6vw, 36px); } .pc3__col--p { padding-right: clamp(20px, 2.6vw, 36px); } }
.pc3__col { display: flex; flex-direction: column; }
.pc3__col ol { display: grid; gap: 8px; counter-reset: c; }
.pc3__col li { counter-increment: c; display: grid; grid-template-columns: 30px 1fr; align-items: start; line-height: 1.45; }
.pc3__col li::before { content: counter(c); width: 21px; height: 21px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.pc3__col--p li { font-size: 15.5px; color: rgba(255,255,255,.82); } .pc3__col--p li::before { background: #173a66; color: #fff; }
.pc3__col--c li { font-size: 17.5px; font-weight: 600; } .pc3__col--c li::before { background: #d6336c; color: #fff; }
.pc3__h { margin-top: auto; padding-top: 12px; text-align: right; font-style: italic; font-size: 16px; color: rgba(255,255,255,.8); }
.pc3__col--c .pc3__h { color: #fff; font-weight: 600; }
.pc3__ok { position: absolute; left: clamp(14px, 1.6vw, 22px); top: 50%; width: 34px; height: 34px; margin-top: -17px; }
.pc3__ok svg { width: 100%; height: 100%; fill: none; stroke: #4be07a; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.pc3__sad { position: absolute; right: 64px; top: -30px; width: 58px; height: 58px; transition: transform .4s var(--ease); }
.pc3__i:hover .pc3__sad { transform: rotate(-10deg); }
.pc3__sad svg { width: 100%; height: 100%; overflow: visible; }
.pc3__sad .fill { fill: #f2bf2a; } .pc3__sad .line { fill: none; stroke: #1d1d1f; stroke-width: 2.6; stroke-linecap: round; }
.pc3__tail { position: absolute; bottom: 2px; width: 60px; height: 50px; fill: #2f6fbf; }
.pc3__i--r .pc3__tail { right: -40px; transform: translateY(26px); }
.pc3__i--l .pc3__tail { left: -40px; transform: translateY(26px) scaleX(-1); }
@media (max-width: 899px) { .pc3__tail { display: none; } .pc3__sad { right: 24px; } }

/* Dark immersive zone for the final product */
.zone { background: #0f1724; color: #eef2f7; padding-block: clamp(72px, 9vw, 128px); margin-block: clamp(72px, 9vw, 120px) !important;
  --ink: #eef2f7; --ink-2: #c6d0dc; --muted: #9aa8b8; --line: #2a3648; --surface: #182234; --bg: #0f1724; }
.zone__in > * + * { margin-top: clamp(40px, 5vw, 64px); }
.zone .sec__n { color: #9fc3f0; } .zone .sec__t { color: #fff; }
.zone .modes__tabs { display: flex; flex-wrap: wrap; gap: 4px 32px; border-bottom: 1px solid var(--line); background: none; padding: 0; border-radius: 0; box-shadow: none; }
.zone .modes__tabs button { all: unset; cursor: pointer; position: relative; padding: 12px 0 16px; font-size: 16px; font-weight: 500; letter-spacing: .04em; color: var(--muted); background: none !important; transition: color .25s; }
.zone .modes__tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-2); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.zone .modes__tabs button:hover { color: #fff; }
.zone .modes__tabs button[aria-selected="true"] { color: #fff; font-weight: 600; } .zone .modes__tabs button[aria-selected="true"]::after { transform: none; }
.zone .modes__tabs button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
.zone .modes__p figcaption { display: grid; gap: 6px; max-width: 60ch; margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-align: left; }
.zone .modes__p figcaption b { color: var(--accent-2); font-size: 20px; font-weight: 600; letter-spacing: .01em; }
.zone .modes__p img { border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.zone .sec--sub .sec__t { font-size: clamp(26px, 2.6vw, 34px); }

/* Process sequence: the six frames side by side, arrows drawn in */
.seq { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 700px) { .seq { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .seq { grid-template-columns: repeat(3, 1fr); } }
.seq__f { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #7a8796; }
.seq__f img { display: block; width: 100%; height: auto; }
.seq__n { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #173a66; color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.seq__ar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.seq__ar path { fill: none; stroke: #ff9a3c; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
@media (prefers-reduced-motion: no-preference) {
  .seq .seq__ar path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .seq.in .seq__ar path { animation: draw 1.1s var(--ease) calc(.35s + var(--i) * .28s) forwards; }
  .seq .seq__f img { transition: transform .6s var(--ease); } .seq__f:hover img { transform: scale(1.03); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Video: local poster, no letterbox, caption outside the frame */
.vid { margin-inline: 0; }
.vid__box { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.vid__box .video__play { all: unset; cursor: pointer; position: absolute; inset: 0; display: block; }
.vid__box .video__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease), filter .4s; }
.vid__box .video__play:hover img { transform: scale(1.02); filter: brightness(.9); }
.vid__box .video__btn { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(255,255,255,.92); color: #0f1724; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.vid__box .video__btn svg { width: 34px; height: 34px; margin-left: 4px; }
.vid__box .video__play:hover .video__btn { transform: scale(1.08); }
.vid__box .video__play:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -3px; }
.vid__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.vid__cap .video__cap { font-weight: 600; color: var(--ink); }
.vid__cap a { color: var(--ink-2); text-underline-offset: 4px; } .vid__cap a:hover { color: #fff; }

/* Byte — project goal → questions → brainstorming (PDF p.14) */
.gq { display: grid; gap: 40px; background: #f6d6bd; color: #1d1a17; border-radius: 32px; padding: clamp(28px, 4vw, 56px); --ink: #1d1a17; }
@media (min-width: 1000px) { .gq { grid-template-columns: 1fr 30%; gap: 48px; } }
.gq__k { display: inline-block; background: #c2177f; color: #fff; font-style: italic; font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; padding: 10px 26px; border-radius: 999px; }
.gq__goals { margin-top: 28px; display: grid; gap: 10px; font-size: clamp(16px, 1.3vw, 18px); letter-spacing: .03em; line-height: 1.55; }
.gq__goals li { position: relative; padding-left: 26px; }
.gq__goals li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: #1d1a17; }
.gq__goals li:nth-child(2)::before { background: #a3125f; }
.gq .project em, .gq em { color: #a3125f !important; font-style: normal; font-weight: 700; background: none; padding: 0; }
.gq__line { display: block; width: 56px; height: 66px; margin: 6px 0 0 72px; fill: none; stroke: #a3125f; stroke-width: 2; }
.gq__q { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 24px; margin-top: 4px; }
.gq__q li { grid-column: span 2; display: grid; place-items: center; min-height: 68px; padding: 12px 18px; border-radius: 22px; background: #b85a00; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.3; text-align: center; box-shadow: 0 8px 18px rgba(120,60,0,.22); transition: transform .3s var(--ease), background .3s; }
.gq__q li:hover { transform: translateY(-3px); background: #9e4d00; }
.gq__q li:nth-child(4) { grid-column: 2 / span 2; }
.gq__q li.gq__more { grid-column: span 1; background: none; box-shadow: none; color: #b85a00; font-size: 28px; letter-spacing: .1em; justify-items: start; padding: 0; min-height: 0; }
.gq__ph { position: relative; margin: 0; display: grid; gap: 0; align-content: start; }
.gq__ph figcaption { order: 2; font-style: italic; font-size: 15px; color: #4a4038; margin: 8px 0; }
.gq__p img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.gq__p--1 { order: 1; width: 72%; justify-self: end; transform: rotate(1.2deg); }
.gq__p--2 { order: 3; width: 96%; margin-top: -8%; position: relative; transform: rotate(-1deg); }
@media (prefers-reduced-motion: no-preference) {
  .gq .gq__q li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .3s; transition-delay: calc(.4s + var(--i) * .1s); }
  .gq.go .gq__q li { opacity: 1; transform: none; }
  .gq .gq__line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease) .15s; } .gq.go .gq__line path { stroke-dashoffset: 0; }
}
@media (max-width: 700px) { .gq__q { grid-template-columns: 1fr; } .gq__q li, .gq__q li:nth-child(4) { grid-column: auto; } .gq__line { margin-left: 24px; } }

/* Byte — timeline (PDF p.15) */
.tl { position: relative; border-radius: 28px 28px 0 0; padding: clamp(32px, 4vw, 56px) 0 clamp(28px, 3vw, 44px); background: linear-gradient(rgba(24,22,26,.92), rgba(24,22,26,.95)), url("../../images/byte/board-cam-800.webp") right center / 60% auto no-repeat, #18161a; overflow: hidden; }
.tl__rows { display: grid; gap: 16px; padding-inline: 13% 3%; }
.tl__r { display: grid; grid-template-columns: minmax(200px, 21%) 1fr; align-items: center; gap: 28px; border-radius: 16px; transition: opacity .3s; }
@media (hover: hover) { .tl:has(.tl__r:hover) .tl__r:not(:hover) { opacity: .4; } }
.tl__q { position: relative; display: grid; place-items: center; min-height: 64px; padding: 10px 18px; border-radius: 20px; background: #b85a00; color: #fff; font-weight: 700; font-size: 15.5px; line-height: 1.3; text-align: center; }
.tl__q::after { content: ""; position: absolute; right: -10px; top: calc(50% - 8px); border-style: solid; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent #b85a00; }
.tl__s { display: flex; flex-wrap: wrap; gap: 6px 1.8em; font-weight: 600; font-size: clamp(14.5px, 1.15vw, 16.5px); letter-spacing: .09em; color: #f4f1ec; }
.tl__s .is-end { color: var(--pink); }
.tl__axis { position: relative; height: 96px; margin: 8px 0; }
.tl__line { position: absolute; left: 0; right: 4.5%; top: 48px; height: 2px; background: linear-gradient(90deg, #6d6a70 0 8%, var(--pink) 70%); transform-origin: left; }
.tl__line::after { content: ""; position: absolute; right: -14px; top: -8px; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent var(--pink); }
.tl__dot { position: absolute; top: 40px; display: grid; justify-items: center; gap: 10px; transform: translateX(-50%); }
.tl__dot i { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #4a474d; }
.tl__dot b { font-weight: 700; letter-spacing: .08em; font-size: 15px; white-space: nowrap; }
.tl__dot--now { left: 8%; } .tl__dot--now b { color: #fff; }
.tl__dot--mid { left: 61%; } .tl__dot--mid i { box-shadow: 0 0 0 3px var(--pink), 0 0 16px var(--pink); } .tl__dot--mid b { color: var(--pink); }
.tl__end { position: absolute; right: 5%; top: 64px; color: var(--pink); font-weight: 700; letter-spacing: .08em; font-size: 15px; }
.tl__tick { position: absolute; width: 0; height: 30px; border-left: 2px dashed #e07a1f; }
.tl__tick--a { left: 20%; top: 6px; } .tl__tick--b { left: 24%; top: 58px; } .tl__tick--c { left: 75.5%; top: 6px; border-color: var(--pink); } .tl__tick--d { left: 82.5%; top: 58px; border-color: var(--pink); }
@media (prefers-reduced-motion: no-preference) {
  .tl .tl__s span { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.2s + var(--k) * .18s); }
  .tl.go .tl__s span { opacity: 1; transform: none; }
  .tl .tl__line { transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; } .tl.go .tl__line { transform: none; }
}
@media (max-width: 900px) {
  .tl__rows { padding-inline: 20px; } .tl__r { grid-template-columns: 1fr; gap: 12px; } .tl__q::after { display: none; } .tl__q { justify-self: start; }
  .tl__tick { display: none; } .tl__dot--now { left: 12%; } .tl__end { right: 20px; }
}
.ib { position: relative; margin: 0 !important; padding: 18px; background: #262826; border-radius: 0 0 28px 28px; border-top: 1px solid #4a4c4a; }
.ib__tab { position: absolute; right: 5%; top: -40px; height: 40px; display: grid; place-items: center; padding: 0 44px; background: #262826; color: #c9c9c9; font-size: 17px; border-radius: 22px 22px 0 0; }
.ib .jrow__i img { border-radius: 2px; }
.tl + .ib { margin-top: 0 !important; }
@media (max-width: 640px) { .ib { padding: 10px; } .ib .jrow { gap: 6px; } .ib__tab { padding: 0 24px; font-size: 15px; } }

/* Byte — prototyping stages: models (orange) → video (blue) → space (purple) */
.fs { display: grid; gap: 0; }
.fs__i { --c: #f28a1a; border: 2px solid var(--c); border-radius: 30px; padding: clamp(20px, 3vw, 36px); background: color-mix(in srgb, var(--c) 7%, transparent); }
.fs__i--b { --c: #3d8fe0; } .fs__i--p { --c: #a46bf2; }
.fs__a { display: grid; place-items: center; height: 64px; }
.fs__a svg { width: 22px; height: 40px; fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fs__kw { display: grid; gap: 20px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
@media (min-width: 1000px) { .fs__kw { grid-template-columns: 1fr 38%; align-items: end; } }
.fs__l { color: #ff8a5c; font-size: 17px; margin-bottom: 10px; }
.fs__kwbox ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px; border: 2px dashed #e85b3a; border-radius: 40px; background: rgba(242,138,26,.12); }
.fs__kwbox li { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: #a3125f; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.fs__kwbox li.is-o { background: #b85a00; }
.fs__side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fs__side figure { margin: 0; text-align: center; }
.fs__side img { width: 100%; height: auto; border-radius: 14px; border: 2px solid #e85b3a; background: #fff; }
.fs__side figcaption { margin-top: 8px; color: #ff8a5c; font-size: 16px; }
.fs__body { display: grid; gap: 20px; }
@media (min-width: 900px) { .fs__body { grid-template-columns: 240px 1fr; gap: 36px; align-items: start; } }
.fs__c { display: grid; grid-template-columns: 34px 1fr; gap: 12px; font-style: italic; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.fs__n { width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #111; font-style: normal; font-weight: 800; display: grid; place-items: center; }
.fs__m .jrow { gap: 10px; } .fs__m .jrow__i img, .jcol__i img { border-radius: 10px; }
.jcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jcol__i { margin: 0; } .jcol__i img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .fs__m .jrow { flex-wrap: wrap; } .fs__m .jrow > * { flex-basis: 100% !important; } }

/* Byte — creation process with measured connectors (PDF p.16) */
.crp2 { position: relative; margin-top: clamp(48px, 6vw, 80px) !important; background: #2b3339; border-radius: 0 28px 28px 28px; padding: clamp(28px, 3.5vw, 44px); }
.crp2__l { position: absolute; left: 0; top: -50px; height: 50px; display: grid; place-items: center; padding: 0 32px; background: #2b3339; color: #fff; font-size: 20px; border-radius: 24px 24px 0 0; }
.crp2__g { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.1fr 40px 1.05fr 1.55fr 1.05fr; grid-template-rows: auto auto auto; column-gap: 32px; row-gap: 14px; align-items: center; }
.crp2__n { position: relative; z-index: 1; display: grid; place-items: center; min-height: 66px; padding: 10px 14px; border-radius: 20px; background: #8eabbb; color: #10202a; font-weight: 700; font-size: 15px; line-height: 1.3; text-align: center; }
[data-k="a"] { grid-area: 2 / 1 / 4 / 2; } [data-k="b"] { grid-area: 2 / 2 / 4 / 3; } [data-k="c"] { grid-area: 2 / 3 / 4 / 4; }
[data-k="ai"] { grid-area: 1 / 3 / 2 / 6; } [data-k="g"] { grid-area: 2 / 5 / 3 / 6; } [data-k="s"] { grid-area: 3 / 5 / 4 / 6; }
[data-k="x"] { grid-area: 2 / 6 / 4 / 7; } [data-k="e"] { grid-area: 2 / 7 / 4 / 8; }
.crp2 [data-k="a"], .crp2 [data-k="b"], .crp2 [data-k="c"], .crp2 [data-k="e"] { align-self: center; }
.crp2__ai { margin: 0; color: #ffa24c; font-weight: 700; font-size: 14.5px; line-height: 1.4; justify-self: end; text-align: left; padding-right: 30px; }
.crp2__ai b { display: block; }
.crp2__x { margin: 0; display: grid; gap: 30px; text-align: center; color: #ffa24c; font-weight: 700; font-size: 14px; line-height: 1.3; align-self: center; }
.crp2__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crp2__svg .o { stroke: #ffa24c; }
@media (max-width: 1000px) {
  .crp2__g { grid-template-columns: 1fr; row-gap: 36px; }
  .crp2__g > * { grid-area: auto !important; }
  .crp2__svg { display: none; }
  .crp2__n:not([data-k="e"])::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 12px; height: 12px; border-right: 2.4px solid #fff; border-bottom: 2.4px solid #fff; transform: translateX(-50%) rotate(45deg); }
  .crp2__ai, .crp2__x { justify-self: center; text-align: center; padding: 0; } .crp2__x { gap: 6px; }
  [data-k="ai"] { order: 3; } [data-k="c"] { order: 4; } [data-k="g"] { order: 5; } [data-k="s"] { order: 6; } [data-k="x"] { order: 7; } [data-k="e"] { order: 8; }
}

/* Byte — final works pair; nodes meet the concept image (PDF p.17) */
.fp2 { display: grid; gap: 16px 0; }
@media (min-width: 1000px) { .fp2 { grid-template-columns: calc(var(--l) * 1fr) 220px calc(var(--r) * 1fr); grid-template-columns: 1fr 210px 1fr; column-gap: 64px; align-items: center; } .fp2__cap--l { grid-column: 1; } .fp2__cap--r { grid-column: 3; } }
.fp2__ph { margin: 0; } .fp2__ph img { display: block; width: 100%; height: auto; border-radius: 6px; }
.fp2__c { position: relative; margin: 0; align-self: center; }
.fp2__c img { display: block; width: 100%; height: auto; background: #ddd; }
.fp2__c figcaption { position: absolute; left: -20px; right: -20px; top: calc(100% + 10px); text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.fp2__ln { position: absolute; height: 2px; width: 84px; background: #8eabbb; z-index: 2; }
.fp2__ln::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #8eabbb; }
.fp2__ln--l { right: 100%; top: 78%; } .fp2__ln--l::after { left: -7px; }
.fp2__ln--r { left: 100%; top: 31%; } .fp2__ln--r::after { right: -7px; }
.fp2__cap { display: grid; gap: 4px; padding-left: 40px; }
.fp2__cap li { position: relative; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.fp2__cap li::before { content: "-"; position: absolute; left: -28px; font-style: normal; }
@media (max-width: 999px) { .fp2__c { width: min(240px, 70%); justify-self: center; margin: 8px 0 44px; } .fp2__ln { display: none; } .fp2__cap--l { order: 0; } .fp2 > :nth-child(1) { order: -2; } .fp2__cap--l { order: -1; } .fp2__cap { padding-left: 28px; margin-bottom: 20px; } }

/* Byte — four instruments + results (PDF p.17) */
.fin { display: grid; gap: 40px; margin-top: clamp(48px, 6vw, 72px) !important; }
@media (min-width: 1000px) { .fin { grid-template-columns: 44% 1fr; gap: 48px; align-items: start; } }
.fin__w { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; }
.fin__w figure { margin: 0; } .fin__w img { display: block; width: 100%; height: auto; }
.fin__w figcaption { margin-top: 8px; font-style: italic; font-size: 15px; color: var(--ink-2); }
.fin__t { font-weight: 600; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.8; letter-spacing: .02em; color: var(--ink); text-wrap: pretty; }
.fin__box { margin-top: 32px; display: grid; gap: 20px; align-items: center; border: 2px dashed #8eabbb; border-radius: 34px; padding: clamp(20px, 2.4vw, 30px); }
@media (min-width: 640px) { .fin__box { grid-template-columns: 1fr 160px; } }
.fin__ev { gap: 0; } .fin__ev img { display: block; width: 100%; height: auto; }
.fin__st { display: grid; gap: 24px; text-align: center; }
.fin__n { display: inline-flex; align-items: flex-start; gap: 2px; color: #f7a146; font-weight: 800; font-size: 32px; line-height: 1; }
.fin__n svg { width: 14px; height: 22px; fill: none; stroke: #f7a146; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fin__u { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* DualFlip: pain points */
.pain { position: relative; display: grid; gap: 24px; background: #fff1ee; border: 2px solid #c8321e; border-radius: 32px; padding: clamp(24px, 3.5vw, 44px); margin-top: clamp(56px, 6vw, 80px) !important; }
.pain__head { display: flex; align-items: center; gap: 18px; }
.pain__ic img { width: 96px; height: auto; }
@media (prefers-reduced-motion: no-preference) { .pain.in .pain__ic img { animation: shake 2.6s .4s infinite; } }
@keyframes shake { 0%, 84%, 100% { transform: none; } 86% { transform: rotate(-6deg); } 88% { transform: rotate(5deg); } 90% { transform: rotate(-4deg); } 92% { transform: rotate(3deg); } }
.pain__t { font-size: clamp(28px, 3vw, 40px); color: #b42318; font-weight: 800; letter-spacing: .01em; }
.pain__t span { display: inline-block; margin-left: 4px; transform: rotate(10deg); }
.pain__l { display: grid; gap: 16px; }
@media (min-width: 760px) { .pain__l { grid-template-columns: 1fr 1fr; } }
.pain__l li { position: relative; background: #fff; border-radius: 20px; padding: 20px 22px 20px 64px; box-shadow: var(--sh-1); transform: rotate(var(--rot)); transition: transform .4s var(--ease); font-size: 17.5px; line-height: 1.5; }
.pain__l li:hover { transform: rotate(0) scale(1.02); }
.pain__x { position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: #c8321e; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.pain b { color: #b42318; }
/* fixes */
.vid__cap .video__cap { position: static; inset: auto; transform: none; background: none; padding: 0; border-radius: 0; font-size: 16px; letter-spacing: .02em; text-transform: none; box-shadow: none; }
.pmeta2__award { margin-left: 0; align-self: flex-start; padding-top: 4px; }
.qbox { margin-top: clamp(56px, 6vw, 72px) !important; }
.bracket::after { height: 56px; }
.pers3__top { grid-template-columns: 40% 1fr; }
.pers3__n { white-space: nowrap; font-size: clamp(16px, 1.3vw, 19px); margin-left: 8px; }
.pc3__col--p li { color: #f0f5fc; } .pc3__h { color: #f0f5fc; }
.pc3__prod figcaption { white-space: nowrap; }
.pc3__i--r .pc3__tail { right: -12px; bottom: -30px; transform: none; }
.pc3__i--l .pc3__tail { left: -12px; bottom: -30px; transform: scaleX(-1); }
.zone__in > :first-child { margin-top: 0 !important; }
.zone { padding-block: clamp(64px, 7vw, 104px); }
.zone .modes__p { overflow: visible; border-radius: 0; box-shadow: none; }
.zone .modes__p figcaption { position: static; background: none; box-shadow: none; padding: 0; border-radius: 0; max-width: 60ch; }
.zone .modes__p figcaption b { margin: 0; }
/* round 10 fixes — Byte */
.gq__ph { display: grid; align-content: start; }
.gq__top { display: flex; align-items: flex-end; justify-content: flex-end; gap: 14px; }
.gq__cap { font-style: italic; font-size: 15px; color: #4a4038; white-space: nowrap; margin-bottom: 10%; }
.gq__p--1 { width: 62%; flex: none; order: 0; transform: rotate(1.2deg); }
.gq__p--2 { width: 100%; margin-top: -6%; transform: rotate(-1deg); position: relative; }
.tl { background: linear-gradient(rgba(24,22,26,.9), rgba(24,22,26,.93)), url("../../images/byte/board-ruin-1600.webp") center / cover, #18161a; }
@media (min-width: 901px) { .tl__rows { padding-inline: 8% 2%; } .tl__r { grid-template-columns: 200px 1fr; } }
.tl__s { flex-wrap: nowrap; white-space: nowrap; gap: 1.5em; letter-spacing: .07em; font-size: clamp(13.5px, 1.08vw, 15.5px); }
@media (max-width: 1100px) { .tl__s { flex-wrap: wrap; white-space: normal; } }
.fs__kw { grid-template-columns: 1fr !important; }
.fs__kwbox ul { justify-content: space-between; gap: 8px; }
.fs__kwbox li { width: 84px; height: 84px; font-size: 11.5px; padding: 4px; }
.fs__side { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: end; }
@media (max-width: 760px) { .fs__kwbox ul { justify-content: center; } .fs__side { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1001px) { .crp2__g { grid-template-columns: 1fr 1fr 1.1fr 26px 1.1fr 1.55fr 1.15fr; column-gap: 28px; } }
.crp2__n { font-size: 14.5px; padding: 10px 8px; }
[data-k="ai"] { grid-area: 1 / 2 / 2 / 4; }
.crp2__ai { justify-self: end; text-align: right; padding: 0 0 6px; }
.crp2__x { font-size: 13.5px; }
.fp2__cap { padding-left: 26px; } .fp2__cap li { font-size: 14px; } .fp2__cap li::before { left: -20px; }
@media (min-width: 1000px) { .fp2 { column-gap: 56px; grid-template-columns: 1fr 200px 1fr; } }
@media (min-width: 640px) { .fin__box { grid-template-columns: 1fr 190px; } }
.fp2__cap { align-self: start; margin-top: 10px; }
@media (min-width: 1200px) { .fp2__cap li { white-space: nowrap; font-size: clamp(12.5px, .98vw, 14px); } }
@media (min-width: 1000px) { .fp2 { grid-template-columns: 1fr 190px 1fr; column-gap: 48px; } .fp2__ln { width: 72px; } }
@media (min-width: 900px) { .fs__body { grid-template-columns: 1fr minmax(0, 660px); } }

@media (max-width: 900px) { .tl__s { gap: 4px 1.2em; } .tl__axis { margin-inline: 0; } .tl__dot--now b { transform: translateX(30%); } }

/* =========================================================
   Round 11
   ========================================================= */
/* Background box: no quote marks, a soft shadow underneath */
.qbox--plain { box-shadow: 0 2px 4px rgba(23,58,102,.12), 0 22px 44px -12px rgba(23,58,102,.45); margin-top: clamp(32px, 4vw, 48px) !important; }

/* Personas: one header line, same-size figures, bubbles never touch the drawings */
.pers4 { margin-top: clamp(72px, 8vw, 104px) !important; }
.bracket2 { display: flex; align-items: flex-start; margin: 0 0 clamp(28px, 3vw, 40px); color: var(--accent); font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.bracket2 i { height: 32px; margin-top: .6em; border-top: 2px solid var(--accent); }
.bracket2 i:first-child { flex: 1; border-left: 2px solid var(--accent); }
.bracket2 i:last-child { width: 9%; border-right: 2px solid var(--accent); }
.bracket2 span { padding: 0 20px; }
.pers4__l { display: grid; gap: 48px 28px; }
@media (min-width: 900px) { .pers4__l { grid-template-columns: repeat(3, 1fr); } }
.pers4__i { display: grid; grid-template-rows: auto 1fr; outline: none; transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease); }
@media (hover: hover) { .pers4__l:has(.pers4__i:hover) .pers4__i:not(:hover) { opacity: .38; filter: saturate(.6); } .pers4__i:hover { transform: scale(1.04); } }
.pers4__l:has(.pers4__i:focus-visible) .pers4__i:not(:focus-visible) { opacity: .38; }
.pers4__i:focus-visible { transform: scale(1.04); } .pers4__i:focus-visible .pers4__card { outline: 3px solid var(--ink); outline-offset: 3px; }
.pers4__top { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto 160px; column-gap: 12px; }
.pers4__bub { grid-column: 2; grid-row: 1; position: relative; margin: 0 0 30px; background: #47484d; color: #fff; border-radius: 20px; padding: 14px 18px; font-style: italic; font-size: 15px; line-height: 1.5; display: grid; gap: 2px; align-self: end; }
.pers4__tail { position: absolute; left: 6px; bottom: -24px; width: 40px; height: 28px; fill: #47484d; }
.pers4__fig { grid-column: 1; grid-row: 2; display: flex; align-items: flex-end; justify-content: center; }
.pers4__fig img { display: block; height: 160px; width: auto; max-width: 100%; object-fit: contain; }
.pers4__n { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 12px; color: var(--pi); font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.25; white-space: nowrap; }
.pers4__card { margin-top: 4px; background: var(--pc); color: #fff; border-radius: 32px; padding: 24px 26px; font-size: 16px; line-height: 1.65; box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 36px -14px rgba(0,0,0,.4); }

/* Pain points, after the PDF: outlined box, ">>>" label, quotes, laptop icon */
.pain2 { margin-top: clamp(56px, 6vw, 80px) !important; display: grid; gap: 20px 40px; align-items: center; background: #fff; border: 2px solid var(--accent); border-radius: 30px; padding: clamp(24px, 3vw, 40px) clamp(24px, 3.5vw, 48px); box-shadow: 0 2px 4px rgba(23,58,102,.08), 0 24px 48px -18px rgba(23,58,102,.35); }
@media (min-width: 900px) { .pain2 { grid-template-columns: auto 1fr auto; } }
.pain2__l { margin: 0; display: flex; gap: 22px; align-items: baseline; color: var(--accent); font-size: clamp(22px, 2vw, 28px); font-weight: 700; white-space: nowrap; }
.pain2__l span { font-size: .9em; letter-spacing: .05em; }
.pain2__q { display: grid; gap: 8px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.55; color: var(--ink); }
.pain2__q b { color: var(--accent); }
.pain2__ic img { display: block; width: 120px; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.18)); }
@media (prefers-reduced-motion: no-preference) { .pain2.in .pain2__ic img { animation: shake 2.6s .4s infinite; } }
@media (max-width: 899px) { .pain2__ic { justify-self: start; } }

/* Pros/cons: tail points straight at the product; even spacing everywhere */
.pc3__i { column-gap: 56px !important; align-items: center; }
@media (min-width: 900px) { .pc3__i--r { grid-template-columns: 1fr 220px; } .pc3__i--l { grid-template-columns: 220px 1fr; } }
.pc3__prod svg { width: 120px; }
.pc3__prod figcaption { font-size: 19px; }
.pc3__bub { padding-top: 44px; padding-bottom: 28px; }
.pc3__sad { top: -28px; right: 48px; }
.pc3__tail { width: 44px; height: 40px; top: 50%; bottom: auto !important; margin-top: -20px; }
.pc3__i--r .pc3__tail { right: -40px !important; left: auto; transform: none !important; }
.pc3__i--l .pc3__tail { left: -40px !important; right: auto; transform: scaleX(-1) !important; }

/* Dark zone a little wider so the process and modes breathe */
.zone__in { max-width: 1360px; }

/* Final product: scroll-driven modes */
.msc { position: relative; height: calc(var(--n) * 90vh); }
.msc__sticky { position: sticky; top: 72px; height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(260px, 30%) 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.msc__nav { position: relative; display: grid; gap: 4px; padding-left: 22px; }
.msc__nav::before, .msc__nav::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.msc__nav::after { background: var(--accent-2); bottom: auto; height: calc((100% - 12px) * var(--p, 0)); }
.msc__nav button { all: unset; cursor: pointer; display: flex; gap: 14px; align-items: baseline; padding: 10px 0; color: var(--muted); transition: color .3s; }
.msc__nav button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
.msc__k { font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.msc__t { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.3; }
.msc__nav li.is-on button { color: #fff; } .msc__nav li.is-on .msc__k { color: var(--accent-2); }
.msc__d { max-height: 0; overflow: hidden; opacity: 0; margin: 0 0 0 30px; color: var(--ink-2); font-size: 16px; line-height: 1.6; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.msc__nav li.is-on .msc__d { max-height: 140px; opacity: 1; margin-bottom: 12px; }
.msc__stage { position: relative; aspect-ratio: 16 / 9; }
.msc__f { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.msc__f.is-on { opacity: 1; transform: none; }
.msc__f img { width: 100%; height: 100%; object-fit: contain; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.msc__f figcaption { display: none; }
@media (max-width: 899px) {
  .msc { height: auto; } .msc__sticky { position: static; height: auto; display: block; } .msc__nav { display: none; }
  .msc__stage { aspect-ratio: auto; display: grid; gap: 40px; }
  .msc__f { position: static; opacity: 1; transform: none; }
  .msc__f img { height: auto; }
  .msc__f figcaption { display: grid; gap: 6px; margin-top: 16px; color: var(--ink-2); font-size: 16px; line-height: 1.6; } .msc__f figcaption b { color: var(--accent-2); font-size: 19px; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .msc__f { transition: none; transform: none; } }

/* Detail as a clean card */
.fig--card { margin-inline: 0; background: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 44px); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.fig--card img { display: block; width: 100%; height: auto; }
.lb__f img { background: #fff; }

/* Process: 1 → 2, then 3 — or 4 → 5 → 6 */
.seq2 { position: relative; }
.seq2__g { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 72px 52px; }
.seq2 .seq__f { border-radius: 12px; }
.edg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: #e8eef5; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.edg .o { stroke: #ffa24c; }
.seq2 .seq__ar path { stroke-width: 9; }
@media (prefers-reduced-motion: no-preference) { .seq2 .seq__ar path { stroke-dasharray: 1; stroke-dashoffset: 1; } .seq2.in .seq__ar path { animation: draw 1.1s var(--ease) calc(.35s + var(--i) * .28s) forwards; } }
@media (max-width: 899px) {
  .seq2__g { grid-template-columns: 1fr; gap: 44px; } .seq2__g > li { grid-row: auto !important; grid-column: auto !important; }
  .seq2 .edg { display: none; }
  .seq2__g > li + li::before { content: ""; position: absolute; margin-top: -30px; left: 50%; width: 12px; height: 12px; border-right: 2px solid #e8eef5; border-bottom: 2px solid #e8eef5; transform: translateX(-50%) rotate(45deg); }
  .seq2__g > li { position: relative; }
}

/* Byte — keywords with depth; research row balanced */
.fs__kwbox li { box-shadow: 0 10px 20px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3), inset 0 -3px 0 rgba(0,0,0,.15); transition: transform .3s var(--ease); }
.fs__kwbox li:hover { transform: translateY(-4px); }
.fs__side { grid-template-columns: 1fr 1fr !important; justify-content: stretch; gap: 24px; }
.fs__side img { aspect-ratio: auto; }

/* Byte — creation process with pictures */
.crx { margin-top: clamp(56px, 7vw, 96px) !important; background: #2b3339; border-radius: 28px; padding: clamp(24px, 3.5vw, 48px); }
.crx__h { margin: 0 0 clamp(24px, 3vw, 36px); color: #fff; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: .01em; }
.crx__in { position: relative; display: grid; }
.crx__r1 { display: flex; gap: 64px; align-items: flex-start; }
.crx__mid, .crx__r2, .crx__r3, .crx__r4 { display: grid; column-gap: 64px; }
.crx__mid { min-height: 96px; align-items: center; }
.crx__ai { grid-column: 1; justify-self: end; margin: 0; max-width: 420px; text-align: right; color: #ffa24c; font-weight: 700; font-size: 14.5px; line-height: 1.45; padding: 18px 20px 10px 0; }
.crx__ai b { display: block; }
.crc { position: relative; margin: 0; display: grid; gap: 12px; min-width: 0; }
.crc__img img { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }
.crc__l { justify-self: center; text-align: center; background: #8eabbb; color: #10202a; font-weight: 700; font-size: 15px; line-height: 1.3; padding: 10px 20px; border-radius: 16px; }
.crx__r3 { min-height: 96px; align-items: center; }
.crx__x { grid-column: 1; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; color: #ffa24c; font-weight: 700; font-size: 14px; }
.crx__x span:first-child { text-align: right; } .crx__x span:last-child { text-align: left; }
.crx__r4 .crc { grid-column: 1; width: 62%; justify-self: center; }
.crx .edg { stroke: #fff; }
@media (max-width: 899px) {
  .crx__r1 { flex-direction: column; gap: 44px; } .crx__r1 .crc { flex: none !important; }
  .crx__mid, .crx__r2, .crx__r3, .crx__r4 { grid-template-columns: 1fr !important; row-gap: 44px; }
  .crx__mid, .crx__r3 { min-height: 0; padding-top: 44px; } .crx__ai { justify-self: center; text-align: center; padding: 0; }
  .crx__x { grid-template-columns: 1fr; gap: 4px; text-align: center; } .crx__x span { text-align: center !important; }
  .crx__r4 .crc { width: 100%; } .crx .edg { display: none; }
  .crx .crc + .crc::before, .crx__r2::before { content: none; }
}

/* Byte — final works, larger; nodes sit exactly on the line */
.fp2 { margin-inline: calc(50% - min(700px, 50vw - 24px)); }
@media (min-width: 1000px) { .fp2 { grid-template-columns: 1fr 190px 1fr !important; column-gap: 56px !important; } }
.fp2__ln { height: 2px; }
.fp2__ln::after { top: 50% !important; width: 12px !important; height: 12px !important; border: 2px solid #8eabbb; box-sizing: border-box; transform: translate(0, -50%); }
.fp2__ln--l::after { left: -6px !important; } .fp2__ln--r::after { right: -6px !important; left: auto; }
.fp2__ln { width: 76px !important; }
.fin2 { margin-top: clamp(56px, 6vw, 80px) !important; margin-inline: calc(50% - min(700px, 50vw - 24px)); display: grid; gap: clamp(40px, 5vw, 64px); }
.fin2__top { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 1000px) { .fin2__top { grid-template-columns: 1fr 34%; } }
.fin2 .fin__w { gap: 24px 16px; }
.fin2 .fin__w figcaption { font-size: 15.5px; }
.reel { margin: 0; display: flex; justify-content: center; align-items: center; background: #000; border-radius: 22px; overflow: hidden; }
.reel video { display: block; max-width: 100%; max-height: 100%; height: 100%; width: auto; aspect-ratio: 9 / 16; }
@media (max-width: 999px) { .reel video { width: 100%; height: auto; max-height: 80vh; } }
.fin2__bot { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .fin2__bot { grid-template-columns: 1fr 1.15fr; } }
.fin2 .fin__box { margin-top: 0; }
.pers4__top { grid-template-columns: 168px 1fr; grid-template-rows: 104px 150px; }
.pers4__fig img { height: 150px; }
.pc3__tail { width: 44px !important; height: 40px !important; }
.pc3__i--r .pc3__tail { right: -42px !important; } .pc3__i--l .pc3__tail { left: -42px !important; }
.project .pbody:has(> .zone:last-child) { padding-bottom: 0; }
.pbody > .zone:last-child { margin-bottom: 0 !important; }
.crx__mid { min-height: 150px; align-items: start; }
.crx__ai { padding: 22px 0 0; }
.crc__l { white-space: nowrap; }
@media (min-width: 1000px) { .fp2, .fin2 { margin-inline: calc(50% - min(680px, 50vw - 40px)); } }
@media (max-width: 999px) { .fp2, .fin2 { margin-inline: 0 !important; } }
@media (min-width: 1000px) { .fin2__top { grid-template-columns: 1fr 23%; align-items: start; } }
.reel video { width: 100%; height: auto; }
.pers4__top { grid-template-columns: 150px 1fr; }
.pers4__bub { grid-column: 1 / -1; margin-left: 32%; }
.pers4__tail { left: 14px; }
/* Process tree: 1 → 2, then 3 | 4 → 5 → 6 */
.seq2--tree .seq2__g { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 64px 72px; max-width: 1000px; margin-inline: auto; }
.seq2--tree .seq__i:nth-child(1) { grid-area: 1 / 1 / 2 / 3; justify-self: center; width: calc(50% - 36px); }
.seq2--tree .seq__i:nth-child(2) { grid-area: 2 / 1 / 3 / 3; justify-self: center; width: calc(50% - 36px); }
.seq2--tree .seq__i:nth-child(3) { grid-area: 3 / 1; }
.seq2--tree .seq__i:nth-child(4) { grid-area: 3 / 2; }
.seq2--tree .seq__i:nth-child(5) { grid-area: 4 / 2; }
.seq2--tree .seq__i:nth-child(6) { grid-area: 5 / 2; }
@media (max-width: 899px) {
  .seq2--tree .seq2__g { grid-template-columns: 1fr 1fr; gap: 44px 14px; }
  .seq2--tree .seq__i:nth-child(1), .seq2--tree .seq__i:nth-child(2) { width: calc(50% - 7px); }
  .seq2--tree .edg { display: block; }
  .seq2--tree .seq2__g > li + li::before { content: none; }
  .seq2--tree .seq__n { width: 22px; height: 22px; font-size: 12px; right: 6px; top: 6px; }
}
@media (max-width: 899px) {
  .seq2--tree .seq__i:nth-child(1) { grid-area: 1 / 1 / 2 / 3 !important; }
  .seq2--tree .seq__i:nth-child(2) { grid-area: 2 / 1 / 3 / 3 !important; }
  .seq2--tree .seq__i:nth-child(3) { grid-area: 3 / 1 !important; }
  .seq2--tree .seq__i:nth-child(4) { grid-area: 3 / 2 !important; }
  .seq2--tree .seq__i:nth-child(5) { grid-area: 4 / 2 !important; }
  .seq2--tree .seq__i:nth-child(6) { grid-area: 5 / 2 !important; }
  .seq2--tree .seq2__g { gap: 40px 12px; }
}
.seq2 .seq__ar path { stroke-width: 5.5 !important; }



/* =========================================================
   Petrol — vertical workflow pinned in the centre (colours sampled from the PDF)
   ========================================================= */
.pv { --g: #597e58; --cream: #feefe0; --pk: #be4279; --or: #be5f0a; --or2: #f68712; --gy: #777575; --panel: #d3d2d2; --lg: #8fd39a;
  position: relative; display: grid; grid-template-columns: minmax(0, 480px) 330px minmax(0, 480px); justify-content: center; column-gap: clamp(40px, 4.5vw, 80px);
  width: min(1560px, 100vw - 48px); margin-inline: calc(50% - min(780px, 50vw - 24px)) !important; }
.pv__flowcol { grid-column: 2; grid-row: 1 / span 4; position: relative; z-index: 2; }
.pv__flow { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; align-items: center; }
.pv__band { position: relative; width: 100%; background: var(--cream); border: 2px solid var(--g); border-radius: 26px; padding: 34px 22px 30px; }
.pv__tab { position: absolute; top: -16px; right: 22px; margin: 0; padding: 4px 16px; background: var(--g); color: #fff; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.pv__tab[hidden] { display: none; }
.pv__nodes { display: flex; flex-direction: column; align-items: stretch; gap: clamp(12px, 1.9vh, 20px); margin: 0; padding: 0; }
.pv-n { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(30px, 4.1vh, 40px); padding: 6px 14px; border-radius: 9px; background: var(--gy); color: #fff; font-size: clamp(12.5px, 1.6vh, 14.5px); line-height: 1.25; text-align: center; transition: background .5s, box-shadow .35s, transform .35s; }
.pv-n[hidden] { display: none; }
.pv-n.is-pink { background: var(--pk); } .pv-n.is-orange { background: var(--or); } .pv-n.is-green { background: var(--g); }
.pv-n.is-lit { box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px #f5d33b; transform: scale(1.03); z-index: 1; }
.pv-n + .pv-n::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: clamp(12px, 1.9vh, 20px); margin-left: -1.5px; border-left: 3px solid var(--lg); }
.pv-n + .pv-n::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); margin-left: -6px; border-style: solid; border-width: 7px 6px 0; border-color: var(--lg) transparent transparent; }
.pv-n--slot { width: 64px; align-self: center; min-height: clamp(24px, 3.4vh, 32px); background: transparent !important; border: 2.5px dashed var(--or2); border-radius: 12px; padding: 0; }
.pv-n__x { position: absolute; inset: 0; pointer-events: none; }
.pv-n__f { position: absolute; right: -15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
.pv-n__f img { width: 100%; height: 100%; display: block; }
.pv-b { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.pv-b--g { background: #3e9a45; } .pv-b--k { background: #222; }
.pv-b--0 { left: -11px; } .pv-b--1 { left: 14px; }
.pv-sd { position: absolute; padding: 0 10px; background: #f5e342; font-weight: 800; font-style: italic; font-size: 14px; transform: skewX(-12deg); line-height: 1.4; }
.pv-sd--s { left: -14px; top: -14px; color: #1d6e2c; } .pv-sd--d { right: -14px; bottom: -14px; color: #c8102e; }
.pv__mv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .4s; }
.pv__mv.on { opacity: 1; }
.pv__mv .d { fill: none; stroke: var(--or2); stroke-width: 2.2; stroke-dasharray: 6 5; }
.pv__mv .h { fill: none; stroke: var(--or2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv__note { position: absolute; margin: 0; width: 120px; text-align: right; color: var(--or); font-size: 12px; font-weight: 600; line-height: 1.3; opacity: 0; transition: opacity .4s; pointer-events: none; }
.pv__note.on { opacity: 1; }

.pv__pg { grid-column: 1 / -1; grid-row: var(--r); display: grid; grid-template-columns: subgrid; align-content: center; row-gap: 28px; min-height: 100vh; padding-block: 12vh; }
.pv__h { grid-column: 1; grid-row: 1; margin: 0; }
.pv__h span { display: inline-block; background: #4a4b50; color: #fff; font-weight: 500; font-size: clamp(19px, 1.5vw, 22px); padding: 10px 26px; border-radius: 26px 26px 26px 6px; }
.pv__l { grid-column: 1; grid-row: 2; display: grid; gap: 28px; align-content: start; }
.pv__r { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 28px; align-content: start; }
.pv__pg .pv-p { opacity: .3; transition: opacity .6s ease, box-shadow .35s; }
.pv__pg.is-on .pv-p { opacity: 1; }
.pv-p[data-link] { outline: none; }
.pv-p[data-link].is-lit { box-shadow: 0 0 0 3px #f5d33b; }
.pv-p--plain[data-link].is-lit, .pv-p--text[data-link].is-lit { box-shadow: none; }
.pv-p[data-link]:focus-visible { box-shadow: 0 0 0 3px #1f2a20; }

/* panels */
.pv-p { position: relative; min-width: 0; color: #1f2a20; font-size: 15px; line-height: 1.55; border-radius: 20px; }
.pv-p p { margin: 0; }
.pv-p--cream { background: var(--cream); padding: 16px 18px; }
.pv-p--dash { background: var(--cream); border: 2px dashed var(--g); border-radius: 22px; padding: 16px 20px 20px; }
.pv-p--green { background: var(--g); color: #fff; padding: 18px 20px; }
.pv-p--grey { background: var(--panel); padding: 18px 20px; }
.pv-p--green p + p { margin-top: 4px; }
.pv-im { display: block; width: 100%; height: auto; }
.pv-cap { color: #8b8989; font-size: 15px; margin-bottom: 8px !important; }
.pv-fig { position: relative; margin: 0; }
.pv-fig--box { margin-right: 3%; margin-bottom: 7%; }
.pv-dot { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #3e9a45; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: clamp(12px, 1.3vw, 18px); }
.pv-red { position: absolute; border: 3px solid #e8303a; border-radius: 10px; pointer-events: none; }
.pv-t { margin-bottom: 10px !important; font-size: 15px; } .pv-t--g { color: var(--g); }
.pv-t--after { margin: 0 !important; }
.pv-k { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #333; color: #fff; font-size: 12.5px; font-weight: 700; margin: 0 4px; vertical-align: 1px; }
.pv-k--lg { width: 30px; height: 30px; font-size: 16px; }
.pv-badge { display: inline-block; margin-left: 8px; background: #c2185b; color: #fff; font-weight: 500; padding: 2px 13px; border-radius: 999px; font-size: 14px; }
.pv-badge--g { background: #3e9a45; margin: 0; }
.pv-rate { display: flex; align-items: center; margin-bottom: 10px !important; }
.pv-rate--big { gap: 14px; } .pv-rate--big .pv-badge { font-size: 17px; padding: 4px 18px; }
.pv-success { display: inline-grid; justify-items: center; color: #2e9e48; font-weight: 800; font-size: 13px; line-height: 1; } .pv-success span { font-size: 30px; }
.pv-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px !important; font-weight: 700; font-size: 16px; }
.pv-cam { flex: none; width: 22px; height: 17px; border: 2px solid currentColor; border-radius: 4px; position: relative; }
.pv-cam::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5.5px 0 0 -5.5px; border: 2px solid currentColor; border-radius: 50%; }
.pv-p--green .pv-im { border-radius: 10px; }
.pv-h2 { font-weight: 700; margin-bottom: 4px !important; }
.pv-faces { display: flex; gap: 34px; justify-content: center; margin: 10px 0 12px; }
.pv-faces li { display: grid; justify-items: center; gap: 4px; color: #3e7a43; font-weight: 700; font-size: 13px; }
.pv-faces .pv-face { width: 38px; height: 38px; }
.pv-ls li { position: relative; padding-left: 14px; } .pv-ls li::before { content: "-"; position: absolute; left: 0; }

/* SOP timing: screen + summary + table, built as real HTML */
.pv-sop { display: grid; grid-template-columns: 1fr 150px; gap: 18px; align-items: center; }
.pv-sop__l { display: grid; justify-items: center; gap: 14px; }
.pv-sop__im { display: block; width: 100%; height: auto; }
.pv-sop__b { width: 100%; background: #e5e4e4; color: #333; border-radius: 8px; text-align: center; font-size: 19px; line-height: 1.3; padding: 8px 6px; }
.pv-sop__b b { color: #e03a3a; font-weight: 400; }
.pv-tt { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; border-radius: 6px; overflow: hidden; color: #333; }
.pv-tt thead th { background: #d0d0d0; font-weight: 400; padding: 4px 0; }
.pv-tt tbody th { width: 36%; background: #3d3d3d; color: #fff; font-weight: 400; padding: 2.5px 0; border-bottom: 1px solid #555; }
.pv-tt tbody td { text-align: center; padding: 2.5px 0; border-bottom: 1px solid #ddd; }

/* OLD → NEW */
.pv-on { display: grid; grid-template-columns: 44% 1fr; gap: 16px; align-items: end; }
.pv-v { position: relative; margin: 0; }
.pv-v__i img { display: block; width: 100%; height: auto; }
.pv-v--old { padding-top: 34px; }
.pv-v--old .pv-v__i { opacity: .75; }
.pv-v--new .pv-v__i { box-shadow: 0 0 22px 4px rgba(79,166,229,.55); }
.pv-tag { position: absolute; z-index: 1; pointer-events: none; height: auto; }
.pv-tag--old { width: 64px; left: 50%; top: 0; transform: translateX(-50%); }
.pv-tag--new { width: 44px; right: -10px; top: -18px; }
.pv-lab { margin: 14px 0 0 !important; display: inline-block; padding: 9px 16px; border-radius: 12px; color: #fff; font-size: 15px; line-height: 1.4; }
.pv-lab--o { background: var(--or); } .pv-lab--g { background: var(--g); }
.pv-intro { font-size: 16px; line-height: 1.65; color: #333; } .pv-intro b { font-size: 23px; font-weight: 400; }

/* Result 1.0 */
.pv-u { margin: 0 0 10px !important; text-decoration: underline; text-underline-offset: 4px; font-size: 16.5px; }
.pv-p--green .pv-u:not(:first-child) { margin-top: 14px !important; }
.pv-res { display: grid; grid-template-columns: 1fr 140px; gap: 18px; align-items: center; margin-bottom: 12px; }
.pv-chip { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 0 8px !important; padding: 7px 12px; border-radius: 10px; color: #fff; font-size: 13.5px; }
.pv-chip--g { background: var(--g); } .pv-chip--o { background: var(--or); }
.pv-ot { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; color: #222; box-shadow: 0 0 0 4px #9a9a9a; border-radius: 2px; }
.pv-ot th, .pv-ot td { padding: 2px 6px; border-bottom: 1px solid #e3e3e3; text-align: left; }
.pv-ot th { width: 42%; text-align: center; font-weight: 400; border-right: 1px solid #e3e3e3; }
.pv-ot thead tr:first-child { background: #76c9cc; } .pv-ot thead tr:first-child th, .pv-ot thead tr:first-child td { border: 0; }
.pv-box { border: 2px dashed #555; border-radius: 14px; padding: 8px 16px; margin: 4px 0 16px; font-weight: 700; font-size: 14px; display: inline-block; }
.pv-ok { color: #2e9e48; font-size: 18px; } .pv-ex { color: #c8102e; }
.pv-fb { list-style: decimal; padding-left: 20px; font-weight: 700; font-size: 14px; } .pv-fb em { color: var(--pk); font-style: normal; }

/* 2.0 */
.pv-h3 { text-align: center; font-size: 16px; } .pv-h3--b { color: #2f5ea8; margin-bottom: 12px !important; }
.pv-ba { display: grid; grid-template-columns: 1fr 26px 1fr; gap: 10px; align-items: center; }
.pv-ba figure { position: relative; margin: 0; }
.pv-ba img { display: block; width: 100%; height: auto; }
.pv-ba__o img { opacity: .35; }
.pv-ba__a { height: 0; border-left: 14px solid #444; border-top: 9px solid transparent; border-bottom: 9px solid transparent; position: relative; justify-self: center; }
.pv-ba__a::before { content: ""; position: absolute; right: 13px; top: -3px; width: 10px; height: 6px; background: #444; }
.pv-ba__n .pv-tag--new { width: 34px; right: -8px; top: -14px; }
.pv-swap { position: absolute; left: 33%; width: 24%; top: 75%; height: 0; border-top: 2px solid #e8303a; }
.pv-swap::before, .pv-swap::after { content: ""; position: absolute; top: -6px; border-style: solid; border-width: 5px 7px; }
.pv-swap::before { left: -8px; border-color: transparent #e8303a transparent transparent; } .pv-swap::after { right: -8px; border-color: transparent transparent transparent #e8303a; }
.pv-yt { position: relative; width: min(100%, 320px); margin: 12px 0 4px; }
.pv-yt .video__play { all: unset; cursor: pointer; display: block; position: relative; }
.pv-yt img { display: block; width: 100%; height: auto; border-radius: 4px; }
.pv-yt .video__btn { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,255,255,.94); color: #c4302b; display: grid; place-items: center; }
.pv-yt .video__btn svg { width: 22px; height: 22px; margin-left: 3px; }
.pv-yt .video__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pv-yt iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 4px; }

@media (max-width: 899px) {
  .pv { display: block; width: auto; margin-inline: 0 !important; }
  .pv__flow { position: static; height: auto; }
  .pv__flowcol { position: sticky; top: 60px; z-index: 5; }
  .pv__band { padding: 22px 10px 12px; border-radius: 18px; }
  .pv__nodes { flex-direction: row; flex-wrap: wrap; gap: 12px 14px; }
  .pv-n { min-height: 26px; padding: 3px 8px; font-size: 10.5px; border-radius: 7px; }
  .pv-n + .pv-n::before { left: auto; right: 100%; bottom: 50%; height: 0; width: 12px; margin: 0 1px -1px 0; border-left: 0; border-top: 2px solid var(--lg); }
  .pv-n + .pv-n::after { display: none; }
  .pv-n--slot { width: 26px; min-height: 22px; }
  .pv-n__f { width: 18px; height: 18px; top: -6px; right: -8px; margin: 0; }
  .pv-b { width: 15px; height: 15px; font-size: 9.5px; top: -6px; margin: 0; } .pv-b--0 { left: -6px; } .pv-b--1 { left: 12px; }
  .pv-sd { font-size: 10.5px; } .pv-sd--s { left: -4px; top: -14px; } .pv-sd--d { right: -4px; bottom: -12px; }
  .pv__tab { font-size: 12px; padding: 3px 12px; top: -13px; right: 14px; }
  .pv__mv, .pv__note { display: none; }
  .pv__pg { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 40px 8px; row-gap: 20px; }
  .pv__h, .pv__l, .pv__r { grid-column: 1; grid-row: auto; }
  .pv__pg .pv-p { opacity: 1; }
  .pv-sop { grid-template-columns: minmax(0, 1fr) 120px; }
}
.pv__note { width: 118px; font-size: 11px; line-height: 1.25; transform: translateY(-50%); }

.lb--v { display: grid; place-items: center; }
.lb__vid { width: min(90vw, 1100px); aspect-ratio: 16 / 9; } .lb__vid iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.pd__sticky { padding: 10px 24px; }
.pd__nav { position: absolute; z-index: 3; right: 22px; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-end; gap: 10px; margin: 0; }
.pd__nav button { padding: 6px 6px 6px 14px; gap: 10px; font-size: 13px; background: rgba(238,240,234,.92); flex-direction: row-reverse; }
.pd__nav button:not([aria-current]):not(:hover):not(:focus-visible) { padding-left: 6px; font-size: 0; gap: 0; }
.pd__nav button:not([aria-current]):not(:hover):not(:focus-visible) span { font-size: 13px; }

/* =========================================================
   Petrol deck v4 — workflow fixed at the centre; evidence fills in around it
   ========================================================= */
.pd { display: none; }
@media (min-width: 900px) {
  .pd { display: block; position: relative; height: calc(var(--steps, 19) * 85vh + 100vh); margin-inline: calc(50% - 50vw) !important; background: #fff; }
  .pv { display: none !important; }
}
.pd__sticky { position: sticky; top: 72px; height: calc(100vh - 72px); padding: 6px 0; overflow: hidden; }
.pd__fit { position: relative; width: 100%; }
.pd__cv { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.pd__pg { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.pd__pg.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.pd__im { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pd__clip { position: absolute; background-repeat: no-repeat; }
.pd__g { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease, transform .8s cubic-bezier(.3,.7,.2,1); pointer-events: none; }
.pd__g.is-on { opacity: 1; pointer-events: auto; }
.pd__g--box { transform: scale(var(--sc, 1)); }
.pd__g--arr { opacity: 1; }
.pd__g--arr .pd__clip { opacity: 0; transition: opacity .4s ease; }
.pd__g--arr.is-on .pd__clip { opacity: 1; transition-delay: calc(var(--o, 0) * 70ms + 40ms); }
.pd__g--zoom { z-index: 20; }
.pd.is-zoom .pd__decos, .pd.is-zoom .pd__lab { opacity: .0; transition: opacity .4s; }
.pd__g--badge img { position: absolute; }
.pd__g--badge.is-on img { animation: badgeIn 2.2s ease both; }
@keyframes badgeIn { 0% { opacity: 0; transform: scale(.85); } 18% { opacity: 1; transform: scale(1.06); } 30% { transform: scale(1); filter: none; }
  45% { filter: drop-shadow(0 0 18px rgba(46,158,72,.85)); } 60% { filter: none; } 75% { filter: drop-shadow(0 0 18px rgba(46,158,72,.85)); } 100% { opacity: 1; transform: none; filter: none; } }
.pd__hot { position: absolute; }
.pd__hot img { display: block; width: 100%; height: 100%; object-fit: fill; opacity: 0; }
.pd__hot:has(img:focus-visible) { outline: 8px solid #f5d33b; outline-offset: 4px; }
.pd__scoot { position: absolute; z-index: 1; transform: translateX(-560px); opacity: 0; }
.pd__scoot.go { animation: scoot 6s cubic-bezier(.3,.05,.2,1) .4s infinite; }
@keyframes scoot { 0% { transform: translateX(-560px); opacity: 0; } 8% { opacity: 1; } 45%, 82% { transform: translateX(0); opacity: 1; } 92%, 100% { transform: translateX(0); opacity: 0; } }
.pd__tiles { position: absolute; inset: 0; pointer-events: none; }
.pd__t { position: absolute; left: 0; top: 0; opacity: 0; overflow: hidden; transition: transform .9s cubic-bezier(.65,0,.25,1), width .9s cubic-bezier(.65,0,.25,1), height .9s, opacity .45s; }
.pd__t.is-on { opacity: 1; }
.is-first .pd__t { transition: opacity .35s ease; }
.pd__t i { position: absolute; left: 0; top: 0; background-repeat: no-repeat; opacity: 0; transition: opacity .5s ease; }
.pd__t i.is-on { opacity: 1; }
.pd__lab { position: absolute; display: grid; place-items: center; opacity: 0; transition: opacity .4s ease; }
.pd__lab.is-on { opacity: 1; }
.pd__lab::before { content: ""; position: absolute; inset: 0; background: #fee705; transform: skewX(-24deg); }
.pd__lab b { position: relative; margin-top: -24px; font: italic 600 39px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .01em; }
.pd__lab--s b { color: #3ba440; } .pd__lab--d b { color: #ec527f; }
.pd__decos { position: absolute; inset: 0; pointer-events: none; }
.pd__d { position: absolute; border-radius: 50%; background-repeat: no-repeat; opacity: 0; transform: scale(.7); transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.4,.5,1); }
.pd__d.is-on { opacity: 1; transform: none; transition-delay: .2s; }
/* number badges — one design for the machine photos and the workflow */
.pd__n { display: grid; place-items: center; color: #fff; font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 40, 0, .16); }
.pd__n--k { background: #333; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
/* Redesign 1.0 result, set as type */
.pd__res { position: absolute; box-sizing: border-box; padding: 34px 50px 34px; background: #d3d2d2; border: 4px solid #8e8d8d; border-radius: 54px; color: #222; font-family: "Montserrat", system-ui, sans-serif; display: grid; align-content: start; gap: 14px; }
.pd__rh { margin: 0; font-size: 38px; font-weight: 500; text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 3px; }
.pd__rrow { display: grid; grid-template-columns: auto 64px auto 1fr; align-items: center; gap: 0 22px; }
.pd__rchips { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.pd__rc { display: inline-flex; align-items: center; gap: 14px; justify-self: start; padding: 14px 24px; border-radius: 22px; color: #fff; font-size: 34px; }
.pd__rc--g { background: #597e58; } .pd__rc--o { background: #be5f0a; }
.pd__rc i { font-style: normal; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #333; font-size: 24px; font-weight: 700; }
.pd__rbr { width: 64px; height: 128px; fill: none; stroke: #444; stroke-width: 3; }
.pd__rt { border-collapse: collapse; background: #fff; font-size: 24px; line-height: 1.15; box-shadow: 0 0 0 4px #9a9a9a; }
.pd__rt th, .pd__rt td { padding: 1px 12px; border-bottom: 1px solid #e3e3e3; text-align: left; font-weight: 400; }
.pd__rt th { text-align: center; border-right: 1px solid #e3e3e3; min-width: 74px; }
.pd__rt thead tr:first-child { background: #76c9cc; }
.pd__rt td { letter-spacing: .06em; min-width: 150px; }
.pd__rv { display: grid; gap: 18px; justify-items: start; padding-left: 10px; }
.pd__rrate { background: #be4279; color: #fff; font-weight: 500; font-size: 30px; padding: 6px 24px; border-radius: 999px; }
.pd__rver { margin: 0; padding: 14px 26px; list-style: none; border: 4px dashed #555; border-radius: 28px; font-size: 30px; font-weight: 700; line-height: 1.5; }
.pd__rv-ok { color: #2e9e48; } .pd__rv-warn { color: #c8102e; }
.pd__rfb { margin: 0; padding-left: 46px; font-size: 32px; font-weight: 600; line-height: 1.5; }
.pd__rfb em { color: #be4279; font-style: normal; background: none !important; padding: 0; }
/* rail */
.pd__rail { position: absolute; right: 22px; top: 50%; height: min(56vh, 460px); transform: translateY(-50%); width: 24px; z-index: 4; }
.pd__track { position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: #dfe3da; border-radius: 2px; }
.pd__track i { position: absolute; inset: 0; background: #597e58; transform-origin: 50% 0; transform: scaleY(0); }
.pd__rail ol { position: absolute; inset: 0; margin: 0; padding: 0; }
.pd__rail li { position: absolute; left: 0; top: calc(var(--at) * 100%); transform: translateY(-50%); }
.pd__rail button { all: unset; cursor: pointer; display: flex; align-items: center; position: relative; }
.pd__rd { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px #b9c4b3; color: #5b6b58; font-size: 12px; font-weight: 700; transition: background .3s, color .3s, box-shadow .3s; }
.pd__rl { position: absolute; right: 34px; white-space: nowrap; background: #597e58; color: #fff; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.pd__rail button[aria-current] .pd__rd { background: #597e58; color: #fff; box-shadow: 0 0 0 4px rgba(89,126,88,.22); }
.pd__rail button:hover .pd__rl, .pd__rail button:focus-visible .pd__rl { opacity: 1; transform: none; }
.pd__rail button:focus-visible .pd__rd { outline: 3px solid #597e58; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pd__t, .pd__t i, .pd__pg, .pd__g, .pd__g .pd__clip, .pd__d, .pd__lab { transition: none !important; } .pd__scoot.go, .pd__g--badge.is-on img { animation: none; transform: none; opacity: 1; } }

/* Petrol — final review */
.pfin { display: grid; gap: clamp(36px, 4vw, 56px); margin-top: clamp(56px, 7vw, 96px) !important; background: #597e58; color: #fff; border-radius: 32px; padding: clamp(28px, 4vw, 64px); }
.pfin__grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .pfin__grid { grid-template-columns: 1.25fr 1fr; gap: 0; } .pfin__col + .pfin__col { border-left: 1px solid rgba(255,255,255,.28); padding-left: clamp(32px, 4vw, 56px); } .pfin__col:first-child { padding-right: clamp(32px, 4vw, 56px); } }
.pfin__h { margin: 0 0 16px; font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; letter-spacing: .01em; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.pfin__ls { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pfin__ls li { position: relative; padding-left: 20px; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; }
.pfin__ls li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 2px; background: rgba(255,255,255,.8); }
.pfin__ls b { color: #ffc065; font-weight: 600; }
.pfin__stat { --q: 0; margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pfin__lab { flex-basis: 100%; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.pfin__chip { display: grid; gap: 2px; padding: 9px 16px 10px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.14); }
.pfin__chip small { font-size: 12px; letter-spacing: .04em; opacity: .85; }
.pfin__chip b { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pfin__chip--a b { color: #ffc0d6; }
.pfin__chip--b { background: color-mix(in srgb, #2e9e48 calc(var(--q) * 100%), rgba(255,255,255,.1)); }
.pfin__chip--b i { font-style: normal; font-size: .7em; margin-left: 4px; opacity: 0; transition: opacity .4s; }
.pfin__arr { width: 34px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.pfin__ok { display: inline-flex; align-items: center; gap: 6px; color: #c9f7d3; font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: 0; transition: opacity .4s; }
.pfin__ok svg { width: 22px; height: 18px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.pfin__stat.done .pfin__ok, .pfin__stat.done .pfin__chip--b i { opacity: 1; }
.pfin__stat.done .pfin__ok svg { animation: tick .6s ease forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.pfin .vid { margin: 0; } .pfin .vid__cap, .pfin .vid__cap a, .pfin .vid__cap .video__cap { color: #fff; } .pfin .vid__box { box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.pfin__behind { margin: 0; display: grid; gap: 12px; }
.pfin__behind figcaption { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 1.8vw, 24px); color: #fff; margin-bottom: 6px; }
.pfin__big img, .pfin__sm img { display: block; width: 100%; height: auto; border-radius: 10px; }
.pfin__sm { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 700px) { .pfin__sm { grid-template-columns: repeat(3, 1fr); } }
.pbody > .bgl:first-child { margin-top: clamp(40px, 5vw, 64px) !important; }
.bgl__x { font-size: clamp(16.5px, 1.25vw, 18px) !important; }
.pd__res { padding: 30px 46px; gap: 10px; }
.pd__rh { font-size: 34px; }
.pd__rrow { grid-template-columns: auto 56px auto minmax(0, 1fr); gap: 0 20px; }
.pd__rchips { gap: 16px; }
.pd__rc { font-size: 30px; padding: 10px 20px; border-radius: 18px; }
.pd__rc i { width: 36px; height: 36px; font-size: 21px; }
.pd__rt { font-size: 21px; }
.pd__rt th, .pd__rt td { padding: 0 10px; }
.pd__rrate { font-size: 28px; }
.pd__rver { font-size: 28px; padding: 10px 22px; }
.pd__rfb { list-style: decimal; font-size: 29px; line-height: 1.45; padding-left: 44px; }
.pd__rfb li::marker { font-weight: 700; }
.pd__rver li { white-space: nowrap; }
/* round 15 */
.pd__cv { opacity: 0; transition: opacity .7s ease; }
.pd.is-live .pd__cv { opacity: 1; }
.pd__t { transition: transform .85s cubic-bezier(.65,0,.25,1), opacity .32s ease !important; }
.pd__t.is-snap, .pd__t.is-snap i { transition: none !important; }
.pd__g, .pd__g.is-on { pointer-events: none; }
.pd__g.is-on .pd__hot, .pd__g.is-on .pd__clip { pointer-events: auto; }
.pd__g--zoom { z-index: 20; transition: opacity .6s ease, transform .55s cubic-bezier(.3,.7,.2,1); }
.pd__g--zoom.is-on:has(.pd__clip:hover, .pd__hot:hover) { transform: var(--zh, scale(var(--sc, 1))); }
.pd__g--zoom .pd__clip { transition: box-shadow .55s ease; }
.pd__g--zoom.is-on:has(.pd__clip:hover, .pd__hot:hover) .pd__clip { box-shadow: 0 24px 60px rgba(0,0,0,.22); border-radius: 60px; }
.pd__g--zoom.is-on .pd__clip { cursor: zoom-in; }
.pd + .pfin, .pbody > .pfin { position: relative; z-index: 5; margin-top: 0 !important; }
/* Result panel fits its box */
.pd__res { padding: 28px 40px; }
.pd__rrow { grid-template-columns: auto 48px auto minmax(0, 1fr); gap: 0 18px; }
.pd__rc { font-size: 26px; padding: 9px 18px; gap: 12px; }
.pd__rc i { width: 32px; height: 32px; font-size: 19px; }
.pd__rbr { width: 48px; height: 110px; }
.pd__rt { font-size: 19px; table-layout: auto; }
.pd__rt th { min-width: 64px; } .pd__rt td { min-width: 0; white-space: nowrap; padding: 0 14px; }
.pd__rv { gap: 14px; padding-left: 4px; min-width: 0; }
.pd__rrate { font-size: 24px; padding: 5px 20px; }
.pd__rver { font-size: 23px; padding: 10px 18px; }
.pd__rfb { font-size: 27px; }
/* round: fixes */
.pd__g, .pd__g.is-on { pointer-events: none !important; }
.pd__g.is-on .pd__clip, .pd__g.is-on .pd__hot, .pd__g.is-on .pd__res { pointer-events: auto; }
.pd__g--box, .pd__g--box.is-on { transform: none; }
.pd__g--zoom { transition: opacity .5s ease .35s, transform .55s cubic-bezier(.3,.7,.2,1); }
.pd__g--zoom.is-on { transform: none; transition: opacity .6s ease, transform .55s cubic-bezier(.3,.7,.2,1); }
.pd__g--zoom.is-on:has(.pd__clip:hover, .pd__hot:hover) { transform: scale(1.14); }
.pd__g--zoom.is-on .pd__clip { box-shadow: none; }
.pd__g--zoom.is-on:has(.pd__clip:hover, .pd__hot:hover) .pd__clip { box-shadow: 0 18px 50px rgba(0,0,0,.18); border-radius: 60px; }
.pd__pg:not(.is-on) { transition: opacity .5s ease .35s, visibility 0s .9s; }
.pd__t { overflow: visible; transition: transform .9s cubic-bezier(.65,0,.25,1), opacity .45s; }
.pd__res { padding: 28px 40px; }
.pd__rrow { grid-template-columns: auto 48px auto minmax(0, 1fr); gap: 0 18px; }
.pd__rc { font-size: 26px; padding: 9px 18px; } .pd__rc i { width: 32px; height: 32px; font-size: 19px; }
.pd__rbr { width: 48px; }
.pd__rt { font-size: 19px; } .pd__rt td { min-width: 120px; }
.pd__rv { min-width: 0; gap: 14px; }
.pd__rrate { font-size: 24px; }
.pd__rver { font-size: 23px; padding: 8px 18px; max-width: 100%; box-sizing: border-box; }
.pd__rver li { white-space: normal; }
.pd__rfb { font-size: 26px; }
.pd__rh { font-size: 30px; }
.pfin { position: relative; z-index: 3; }
/* panels supplied as images (Observation, Result) */
.pd__panel { position: absolute; transform: scale(var(--fs, 1)); transform-origin: 50% 0; pointer-events: auto; }
.pd__panel img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 0 transparent); transition: filter .5s; }
.pd__g--zoom.is-on:has(.pd__panel:hover) { transform: scale(1.14); }
.pd__g--zoom.is-on:has(.pd__panel:hover) .pd__panel img { filter: drop-shadow(0 18px 40px rgba(0,0,0,.2)); }
/* balance the closing review with the workflow above */
.pfin { gap: clamp(28px, 3vw, 44px); padding: clamp(28px, 3.4vw, 52px); }
.pfin__h { font-size: clamp(19px, 1.5vw, 22px); margin-bottom: 12px; }
.pfin__ls li { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.55; }
.pfin__chip b { font-size: 20px; } .pfin__chip { padding: 7px 14px 8px; }
.pfin .vid { max-width: 900px; width: 100%; justify-self: center; }
.pfin__behind { max-width: 1000px; width: 100%; justify-self: center; }
.pfin__behind figcaption { font-size: clamp(17px, 1.4vw, 20px); }
/* lifted lower evidence; nothing leaves the screen */
.pd__g--low, .pd__g--low.is-on { transform: translateY(-90px); }
.pd__g--zoom.pd__g--low.is-on:has(.pd__panel:hover) { transform: translateY(-90px) scale(1.12); }
.pd__panel { transform: none !important; }
/* page titles instead of bare numbers */
.pd__rail { right: 28px; width: 170px; height: min(50vh, 400px); }
.pd__track { left: auto; right: 11px; }
.pd__rail li { left: auto; right: 0; }
.pd__rail button { flex-direction: row-reverse; gap: 12px; }
.pd__rd { width: 14px; height: 14px; font-size: 0; flex: none; margin-right: 5px; box-shadow: inset 0 0 0 2px #b9c4b3; }
.pd__rail button[aria-current] .pd__rd { width: 18px; height: 18px; margin-right: 3px; }
.pd__rl { position: static; opacity: 1 !important; transform: none !important; background: none; color: #7c857a; padding: 0; font-size: 14px; font-weight: 500; text-align: right; }
.pd__rail button[aria-current] .pd__rl { color: #2f5f33; font-weight: 700; font-size: 16px; }
.pd__rail button:hover .pd__rl { color: #2f5f33; }
.pd__rail li { left: 0 !important; right: 0 !important; }
.pd__rail button { display: flex; width: 100%; justify-content: flex-start; box-sizing: border-box; }
.pd__rl { white-space: nowrap; }
.pd__rail button { flex-direction: row !important; justify-content: flex-end !important; }
.pd__rd { margin: 0 5px 0 0; } .pd__rail button[aria-current] .pd__rd { margin: 0 3px 0 0; }
.pd__track { right: 11px !important; }
/* hover zoom only after the pointer actually moves over the panel */
.pd__g--zoom.is-on:has(.pd__panel:hover), .pd__g--zoom.is-on:has(.pd__clip:hover, .pd__hot:hover) { transform: none; }
.pd__g--zoom.pd__g--low.is-on:has(.pd__panel:hover) { transform: translateY(-90px); }
.pd__g--zoom.is-on.is-hz { transform: scale(1.1) !important; }
.pd__g--zoom.pd__g--low.is-on.is-hz { transform: translateY(-90px) scale(1.1) !important; }
.pd__g--zoom.is-on:has(.pd__panel:hover) .pd__panel img { filter: none; }
.pd__g--zoom.is-hz .pd__panel img { filter: drop-shadow(0 16px 36px rgba(0,0,0,.2)); }
/* compact page rail */
.pd__rail { right: 16px; width: 104px; height: 132px; }
.pd__rl { font-size: 11.5px !important; line-height: 1.2; white-space: normal !important; }
.pd__rail button[aria-current] .pd__rl { font-size: 12.5px !important; }
.pd__rd { width: 10px !important; height: 10px !important; margin-right: 6px !important; }
.pd__rail button[aria-current] .pd__rd { width: 14px !important; height: 14px !important; margin-right: 4px !important; }
.pd__rail button { gap: 8px !important; }

/* round 12: tiles keep their sprite centred (receipt: right-anchored) and resize smoothly; arrows never sit under evidence */
.pd__t { transition: transform .9s cubic-bezier(.65,0,.25,1), width .9s cubic-bezier(.65,0,.25,1), height .9s cubic-bezier(.65,0,.25,1), opacity .45s !important; }
.pd__t.is-snap, .pd__t.is-snap i { transition: none !important; }
.pd__t i { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pd__t[data-id="receipt"] i { left: auto; right: 0; transform: translateY(-50%); }
.pd__t.is-morph { overflow: hidden; border-radius: 17px; }
.pd__t.is-morph::before { content: ""; position: absolute; inset: 1px 1px 1px 2px; border-radius: 16px; background: var(--mc); }
.pd__t.is-morph i:not(.is-on) { transition: opacity .3s ease !important; transition-delay: .15s !important; }
.pd__tiles { z-index: 10; }
.pd__decos { z-index: 11; }
.pd__g--arr { z-index: 3; }
.pd__g--arr.pd__g--strip { z-index: auto; }

/* round 13 */
.pd__t i, .pd__t[data-id="receipt"] i { right: auto; transform: none; z-index: 1; opacity: 0;
  transition: opacity 0s linear calc(var(--d, 0s) + .5s), left .9s cubic-bezier(.65,0,.25,1), top .9s cubic-bezier(.65,0,.25,1) !important; }
.pd__t i.is-on { z-index: 2; opacity: 1; transition: opacity .5s ease var(--d, 0s), left .9s cubic-bezier(.65,0,.25,1), top .9s cubic-bezier(.65,0,.25,1) !important; }
.pd__t.is-morph i:not(.is-on) { transition: opacity .3s ease .15s, left .9s cubic-bezier(.65,0,.25,1), top .9s cubic-bezier(.65,0,.25,1) !important; }
.pd__t.is-snap i { transition: none !important; }
.pd__g--zoom.is-on.is-hz { transform: scale(1.25) !important; }
/* round 14: outgoing colour fades out together with the incoming one (no orange/yellow fringe left at the edges) */
.pd__t i, .pd__t[data-id="receipt"] i { transition: opacity .26s linear calc(var(--d, 0s) + .14s), left .9s cubic-bezier(.65,0,.25,1), top .9s cubic-bezier(.65,0,.25,1) !important; }
/* round 15: photos open large on click; rail titles magnify under the pointer */
.pd__g.is-on .pd__hot { cursor: zoom-in; }
.pd__hot::after { content: ""; position: absolute; inset: -6px; border-radius: 14px; box-shadow: 0 0 0 0 rgba(89,126,88,0); transition: box-shadow .25s ease; pointer-events: none; }
.pd__hot::before { content: ""; position: absolute; right: 10px; bottom: 10px; width: 64px; height: 64px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: rgba(32,60,38,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/58% no-repeat;
  opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s ease; }
.pd__g.is-on .pd__hot:hover::after { box-shadow: 0 0 0 6px rgba(89,126,88,.6); }
.pd__g.is-on .pd__hot:hover::before { opacity: 1; transform: none; }
.pd__panel { cursor: zoom-in; }
.pd__rl { transform: scale(var(--mag, 1)) !important; transform-origin: 100% 50%; transition: transform .18s ease, color .2s !important; }
.pd__rail button:hover .pd__rl { color: #3c6a3f; }

/* round 16 (Byte): process keywords = the same pills as the top keywords, all with a soft glow */
.fs__kwbox ul { justify-content: space-between; gap: 8px; flex-wrap: nowrap; padding: 18px 16px; }
.fs__kwbox li.pill2 { flex: 0 0 auto; width: auto; min-width: 90px; height: 90px; padding: 0 12px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; }
.fs__kwbox li.pill2--b { background: var(--accent-2); color: #1d1500; box-shadow: 0 10px 24px rgba(247,161,70,.35), 0 3px 6px rgba(0,0,0,.3); }
.fs__kwbox li.pill2--p { background: #a3125f; color: #fff; box-shadow: 0 10px 24px rgba(214,40,130,.38), 0 3px 6px rgba(0,0,0,.3); }
.fs__kwbox li.pill2:hover { transform: translateY(-4px) scale(1.05); }
@media (max-width: 1240px) { .fs__kwbox ul { flex-wrap: wrap; justify-content: center; } .fs__kwbox li.pill2 { min-width: 84px; height: 84px; font-size: 13.5px; } }
/* creation process: three photos share one height (the tall one is trimmed at the bottom); the panel glows */
.crx__r1[data-eqh] .crc__img { overflow: hidden; border-radius: 12px; }
.crx__r1[data-eqh] .crc__img img { height: 100%; object-fit: cover; object-position: 50% 0; }
.crx { box-shadow: 0 0 0 1px rgba(142,171,187,.12), 0 0 48px rgba(142,171,187,.22), 0 24px 60px rgba(0,0,0,.45); }
/* timeline: each row reads as a chain */
.tl__s { gap: 6px .7em !important; }
.tl__s span + span::before { content: ""; display: inline-block; width: 1.25em; height: .7em; margin-right: .75em; vertical-align: .02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11' fill='none' stroke='%23f4f1ec' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.5h17M13.5 1.2l4.6 4.3-4.6 4.3'/%3E%3C/svg%3E") center/contain no-repeat; }
/* round 17: stadium shape (circle for short words) like the top keywords; tighter glows */
.fs__kwbox li.pill2 { border-radius: 999px; }
.fs__kwbox li.pill2--b { box-shadow: 0 4px 12px rgba(247,161,70,.32), 0 2px 4px rgba(0,0,0,.28); }
.fs__kwbox li.pill2--p { box-shadow: 0 4px 12px rgba(214,40,130,.34), 0 2px 4px rgba(0,0,0,.28); }
.crx { box-shadow: 0 0 0 1px rgba(142,171,187,.14), 0 0 16px rgba(142,171,187,.16), 0 10px 26px rgba(0,0,0,.35); }

/* Next project: one dark band that flows straight into the footer (no light strip in between) */
.pnx { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .pnx { color: #f1ede6; }
:root[data-theme="dark"] .pnx { background: #000; }
.pnx__a { display: grid; grid-template-columns: 1fr minmax(260px, 520px); align-items: center; gap: clamp(28px, 5vw, 72px); padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); text-decoration: none; color: inherit; border-bottom: 1px solid rgba(241,237,230,.12); }
.pnx__txt { display: grid; gap: 14px; justify-items: start; }
.pnx__k { font: 600 13px var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: #9d9a93; }
.pnx__t { font-size: clamp(32px, 4.4vw, 60px); letter-spacing: -0.035em; line-height: 1.05; }
.pnx__d { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #b4b3ae; }
.pnx__go { margin-top: 14px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(241,237,230,.35); transition: background .35s var(--ease), border-color .35s, transform .35s var(--ease); }
.pnx__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pnx__img { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #222; }
.pnx__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .4s; opacity: .88; }
.pnx__a:hover .pnx__go, .pnx__a:focus-visible .pnx__go { background: #f1ede6; color: #161616; border-color: #f1ede6; transform: translateX(6px); }
.pnx__a:hover .pnx__img img { transform: scale(1.04); opacity: 1; }
.pnx__a:focus-visible { outline: 2px solid #f1ede6; outline-offset: 6px; }
.pnx + * { }
@media (max-width: 760px) { .pnx__a { grid-template-columns: 1fr; } .pnx__img { order: -1; } }
.pnx__img img { object-position: var(--pos, 50% 50%); }
/* Minhand annotated photo: labels scale with the photo (it spans the full width) so they never collide or drift */
.anno__label { font-size: max(12.5px, 1.2vw); gap: .33em; letter-spacing: clamp(.03em, calc(.0024vw + .03em), .07em); }
.anno__label--b li { padding-left: 1.1em; }
.anno__label--b li::before { left: .1em; }
/* Minhand photo: shift/scale so the copper tubes have equal space on both sides */
.anno { overflow: hidden; }
@media (min-width: 900px) { .anno__media { transform: translateX(-1.59%) scale(1.016); transform-origin: 0 50%; } }
/* zoomed-in browsers: the enlarged deck follows the pointer smoothly */
.pd.is-pan .pd__cv { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.pd.is-pan .pd__fit { cursor: crosshair; }

/* ===== Petrol, narrow screens: stage → workflow spine → findings attached to their step ===== */
.pm__pg { display: grid; gap: 20px; padding-block: 28px 44px; }
.pm__pg + .pm__pg { border-top: 1px solid #e4e1da; }
.pm__flow { background: var(--cream); border: 2px solid var(--g); border-radius: 22px; padding: 18px 14px 18px 12px; }
.pm__fh { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g); }
.pm__leg { display: flex; flex-wrap: wrap; gap: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.pm__leg i { font-style: normal; font-size: 12px; padding: 2px 9px 2px 20px; border-radius: 999px; background: #fff; color: #333; position: relative; }
.pm__leg i::before { content: ""; position: absolute; left: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c); }
.pm__leg .is-pink { --c: var(--pk); } .pm__leg .is-orange { --c: var(--or2); } .pm__leg .is-green { --c: var(--g); }
.pm__leg .is-slot::before { background: none; border: 1.5px dashed var(--or2); width: 7px; height: 7px; }
.pm__ol { list-style: none; margin: 0; padding: 0; position: relative; }
.pm-s { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; padding-bottom: 12px; }
.pm-s:last-child { padding-bottom: 0; }
/* the spine */
.pm-s:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; border-left: 3px solid var(--lg); }
.pm-s__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--gy); border: 2px solid var(--gy); font: 700 13px var(--f-sans); position: relative; z-index: 1; }
.pm-s__body { min-width: 0; display: grid; gap: 8px; }
.pm-s__t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; padding: 6px 12px; border-radius: 9px; background: var(--gy); color: #fff; font-size: 15px; line-height: 1.3; position: relative; }
.pm-s.is-pink .pm-s__t { background: var(--pk); } .pm-s.is-pink .pm-s__dot { border-color: var(--pk); color: var(--pk); }
.pm-s.is-orange .pm-s__t { background: var(--or2); } .pm-s.is-orange .pm-s__dot { border-color: var(--or2); color: var(--or); }
.pm-s.is-green .pm-s__t { background: var(--g); } .pm-s.is-green .pm-s__dot { border-color: var(--g); color: var(--g); }
.pm-s__ch { margin: 0; font-size: 13px; font-weight: 600; color: var(--or); }
.pm-s.is-green .pm-s__ch { color: var(--g); }
.pm-s.is-green .pm-s__ch::before { content: "↓ "; }
.pm-s--slot .pm-s__dot { border: 2.5px dashed var(--or2); background: var(--cream); }
.pm-s--slot .pm-s__ch { align-self: center; }
.pm-s__f { display: inline-flex; margin-left: auto; } .pm-s__f img { width: 26px; height: 26px; }
.pm-sd { position: absolute; top: -11px; right: 8px; padding: 0 8px; font: italic 700 13px var(--f-sans); background: #f5e34b; transform: skewX(-12deg); }
.pm-sd--s { color: #2e7d32; } .pm-sd--d { color: #e0457b; }
.pm-b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11.5px; font-weight: 700; background: #3d9a45; color: #fff; }
.pm-b--k { background: #222; }
/* a finding, hanging off its step */
.pm-ev { position: relative; margin-top: 2px; }
.pm-ev::before { content: ""; position: absolute; left: -26px; top: -6px; width: 22px; height: 22px; border-left: 2px dashed var(--g); border-bottom: 2px dashed var(--g); border-bottom-left-radius: 10px; }
.pm-ev__k { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g); }
.pm-ev .pv-p { font-size: 14.5px; }
.pm .pv-p--plain .pv-on { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.pm .pv__h { margin: 0; }
.pm-s { grid-template-columns: 30px minmax(0, 1fr); }
.pm .pv-res { grid-template-columns: minmax(0, 1fr) minmax(0, 130px); gap: 12px; }
.pm .pv-p { min-width: 0; overflow-wrap: anywhere; }
/* zoomed-in desktop browsers read the same stage-by-stage version, centred */
html.pd-zoom .pd { display: none !important; }
html.pd-zoom .pm { display: block !important; max-width: 760px; margin-inline: auto !important; }
.pm .pv-dot { max-width: 30px; max-height: 30px; }
/* round 18: narrow-screen Petrol fixes */
.pm-ev::before { left: -26.5px; top: -14px; width: 24px; height: 28px; border: 0; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M2 1 V14 Q2 21 9 21 H23' fill='none' stroke='%23597e58' stroke-width='2' stroke-dasharray='4 3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.pm .pv-on { padding-top: 14px; grid-template-columns: 1fr 1fr; }
.pm .pv-tag--new { right: 6px; top: -14px; width: 40px; }
.pm .pv-v--old { padding-top: 30px; }
.pm .pv-res { grid-template-columns: 1fr; gap: 14px; }
.pm .pv-res__c { display: flex; flex-wrap: wrap; gap: 8px; }
.pm .pv-res__c .pv-chip { margin: 0 !important; }
.pm .pv-ot { width: auto; min-width: 200px; max-width: 280px; }
.pm .pv-ot th { white-space: nowrap; }
.pv-sdt { display: block; width: 100%; max-width: 380px; height: auto; margin: 8px auto 0; }
.pm .pv-h3 { text-align: center; }
/* faces stand out from the pill */
.pm-s__t:has(.pm-s__f) { padding-right: 46px; }
.pm-s__f { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); margin: 0; }
.pm-s__f img { width: 40px !important; height: 40px !important; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.28); }
/* round 19: connectors run from the step's number down to the finding label; larger, proportional text */
.pm-ev::before { left: -25.5px; top: calc(-1 * var(--up, 14px)); width: 2px; height: calc(var(--up, 14px) + 2px); border: 0;
  background: repeating-linear-gradient(to bottom, #597e58 0 5px, transparent 5px 9px); }
.pm-ev::after { content: ""; position: absolute; left: -25.5px; top: 1px; width: 22px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 11'%3E%3Cpath d='M1 0 Q1 10 10 10 H22' fill='none' stroke='%23597e58' stroke-width='2' stroke-dasharray='5 4'/%3E%3C/svg%3E") no-repeat; }
.pm-ev__k { line-height: 22px; font-size: 14.5px; margin-bottom: 8px; }
.pm-s__t { font-size: 16.5px; }
.pm-s__ch { font-size: 15px; }
.pm__fh { font-size: 14.5px; }
.pm__leg i { font-size: 13px; }
.pm-ev .pv-p { font-size: 15.5px; }
/* DualFlip personas: three columns always fit (browser zoom / narrower desktops) */
@media (min-width: 900px) { .pers4__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pers4__i, .pers4__top, .pers4__card { min-width: 0; }
@media (min-width: 900px) and (max-width: 1240px) {
  .pers4__top { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); grid-template-rows: auto 130px; }
  .pers4__fig img { height: 130px; }
  .pers4__n { white-space: normal; font-size: 16px; }
  .pers4__bub { font-size: 14px; padding: 12px 14px; }
  .pers4__card { padding: 20px; font-size: 15px; border-radius: 26px; }
}
/* Byte creation process: the three photos shrink instead of pushing past the panel */
.crx__r1 > .crc { min-width: 0; }
@media (max-width: 1240px) { .crc__l { white-space: normal !important; padding: 8px 14px; font-size: 14px; } .crx__r1 { gap: 44px; } }
@media (min-width: 960px) { .pr2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr2__card, .pr2__card > * { min-width: 0; }
.pr2__t { overflow-wrap: anywhere; }
/* ===== Type scale, enforced across projects: body 17 · running secondary text 16 · captions/labels ≥15 · tags ≥13 ===== */
.pers4__bub { font-size: 16px; }
.crx__ai { font-size: 16px; }
.crx__x { font-size: 15.5px; }
.fp2__cap { font-size: 15.5px; }
.models, .models p { font-size: 16px; }
.dashbox__l { font-size: 16px; }
.artw__k { font-size: 15px; }
.pfin__ls, .pfin__ls li { font-size: 16.5px; }
.pnx__k { font-size: 13.5px; }
@media (min-width: 900px) and (max-width: 1240px) { .pers4__bub { font-size: 15px; } .pers4__card { font-size: 16px; } }
/* Petrol, stage-by-stage version */
.pm-s__ch, .pm-ev__k { font-size: 15.5px; line-height: 22px; }
.pm .pv-p, .pm .pv-p p, .pm .pv-p li, .pm .pv-fb li, .pm .pv-ls li, .pm .pv-lab, .pm .pv-t { font-size: 16px; }
.pm .pv-u, .pm .pv-h2 { font-size: 17px; }
.pm .pv-chip { font-size: 15px; }
.pm .pv-ot, .pm .pv-tt { font-size: 14.5px; }
.pm .pv-faces li { font-size: 14px; }
.pm .pv-badge { font-size: 15px; }
.pm__leg i { font-size: 13.5px; }
.pm-sd { font-size: 14px; }
.fp2__cap li { font-size: 15px !important; white-space: normal !important; }
.models * { font-size: inherit; }
.p2 { grid-template-columns: minmax(0, auto) minmax(120px, 1fr); } .p2 > * { min-width: 0; }
/* round 20: connector drawn as one SVG path; faces keep their own look with a soft shadow */
.pm-ev::before, .pm-ev::after { content: none !important; }
.pm-ev__c { position: absolute; left: -26px; overflow: visible; pointer-events: none; }
.pm-s__f img { box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

/* Exhibitions & awards (home + About) */
.exh { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); }
.exh__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.exh__i { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.exh__y { font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.exh__k { display: block; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.exh__t { margin: 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.35; }
.exh__p { margin: 4px 0 0; font-size: 16px; color: var(--muted); }
.exh__w { justify-self: end; font-size: 16px; white-space: nowrap; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.about--end { padding-top: 0; }
@media (max-width: 760px) { .exh__i { grid-template-columns: 64px minmax(0, 1fr); } .exh__w { grid-column: 2; justify-self: start; white-space: normal; } }
.exh__l { border-top: 0; }
.exh__y { white-space: nowrap; }
@media (max-width: 760px) { .exh__i { grid-template-columns: 74px minmax(0, 1fr); gap: 6px 16px; } .exh__y { font-size: 15.5px; } }
/* Exhibition context + artist statements */
.exb { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px) !important; padding: clamp(24px, 3.5vw, 44px); border-radius: 28px; background: var(--tint, #eef1f3); }
@media (min-width: 960px) { .exb { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.exb__f { margin: 0; display: grid; gap: 18px; align-content: start; }
.exb__f dt { font-size: 13.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.exb__f dd { margin: 4px 0 0; font-size: 17px; line-height: 1.55; }
.exb__k, .stm__k { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2, #eca629); }
.exb__k { color: var(--ink); }
.exb__p { margin: 0; padding-left: 1.6em; display: grid; gap: 10px; font-size: 17px; line-height: 1.6; }
.exb__p li::marker { font-weight: 700; color: var(--accent, #2c3742); }
.exb__p li:last-child { font-weight: 600; }
.exb__n { margin: 18px 0 0; font-size: 15px; font-style: italic; color: var(--muted); }
.stm { max-width: 820px; margin: clamp(40px, 5vw, 64px) auto 0 !important; padding: clamp(24px, 3.5vw, 40px) clamp(22px, 3.5vw, 44px); border-left: 3px solid var(--accent-2, #eca629); background: #fff; border-radius: 0 22px 22px 0; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 32px -18px rgba(0,0,0,.25); }
.stm__k { color: #9a6a12; }
.stm__t { margin: 0 0 14px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.3; }
.stm__q { margin: 0 0 16px; font-size: 18px; line-height: 1.6; font-style: italic; color: var(--ink-2, #333); }
.stm p { margin: 0; font-size: 17px; line-height: 1.7; } .stm p + p { margin-top: 12px; }
.exb__p { list-style: decimal; }
.exb__p li { padding-left: .3em; }
.nw { white-space: nowrap; }
.stm .stm__t { font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 14px; }
.stm .stm__t em { font-style: normal; background: none; color: inherit; padding: 0; }

/* ===== WMM skin — from the exhibition poster: white field, one red square, heavy black type, a black dot ===== */
[data-skin="wmm"] { --wr: #c60c24; --wk: #111; }
[data-skin="wmm"] body { background: #fff; }
[data-skin="wmm"] .phead2 { position: relative; overflow: hidden; color: var(--wk); border-bottom: 2px solid var(--wk); }
[data-skin="wmm"] .phead2 .crumb a { color: #555; } [data-skin="wmm"] .phead2 .crumb a:hover { color: var(--wr); }
[data-skin="wmm"] .phead2__t { font-weight: 800; letter-spacing: -.025em; max-width: 12ch; }
[data-skin="wmm"] .phead2__intro { color: #333; }
[data-skin="wmm"] .phead2 .wrap { position: relative; z-index: 1; }
[data-skin="wmm"] .phead2::after { content: ""; position: absolute; right: max(24px, calc(50% - 600px)); top: 50%; width: clamp(120px, 20vw, 300px); aspect-ratio: 1; transform: translateY(-50%); background: var(--wr); }
[data-skin="wmm"] .phead2::before { content: ""; position: absolute; z-index: 2; right: calc(max(24px, calc(50% - 600px)) + clamp(120px, 20vw, 300px) - clamp(22px, 3vw, 44px)); top: calc(50% + clamp(60px, 10vw, 150px) - clamp(22px, 3vw, 44px)); width: clamp(44px, 6vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--wk); }
@media (max-width: 760px) { [data-skin="wmm"] .phead2::after, [data-skin="wmm"] .phead2::before { display: none; } }
[data-skin="wmm"] .phero2 { background: #fff; gap: 2px; }
[data-skin="wmm"] .pmeta2 dt { color: var(--wr); }
[data-skin="wmm"] .work__k, [data-skin="wmm"] .artw__k { color: var(--wr); }
[data-skin="wmm"] .pull, [data-skin="wmm"] .pull em { color: var(--wk); }
[data-skin="wmm"] .pnx { background: #111; }
/* poster block */
.psr { display: grid; gap: clamp(24px, 4vw, 56px); align-items: end; margin-top: clamp(48px, 6vw, 88px) !important; }
@media (min-width: 960px) { .psr { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.psr__f { margin: 0; box-shadow: 0 0 0 1px #e2e2e2, 0 20px 40px -24px rgba(0,0,0,.35); }
.psr__f img { display: block; width: 100%; height: auto; }
.psr__t { position: relative; padding-bottom: 8px; }
.psr__k { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wr, #c60c24); }
.psr__h { margin: 0; font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase; color: #111; }
.psr__s { margin: 16px 0 0; font-size: 18px; font-weight: 700; letter-spacing: .08em; color: #111; }
.psr__dot { display: block; width: 28px; height: 28px; margin-top: 22px; border-radius: 50%; background: #111; }
/* exhibition facts: poster-like, black rules and red numerals */
[data-skin="wmm"] .exb { background: #fff; border: 2px solid #111; border-radius: 0; }
[data-skin="wmm"] .exb__f dt { color: var(--wr); }
[data-skin="wmm"] .exb__p li::marker { color: var(--wr); }
[data-skin="wmm"] .lead b { color: #111; }
/* artist statements */
[data-skin="wmm"] .stm { border-left: 0; border-top: 6px solid var(--wr); border-radius: 0; background: #f7f6f3; box-shadow: none; }
[data-skin="wmm"] .stm__k { color: var(--wr); }
/* installation views */
.ins { margin-top: clamp(56px, 7vw, 96px) !important; }
.ins__h { margin: 0 0 18px; font-size: 13.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wr, #c60c24); }
.ins__g { display: grid; gap: clamp(10px, 1.4vw, 18px); }
@media (min-width: 760px) { .ins__g { grid-template-columns: 1fr 1fr; } .ins__i--w { grid-column: 1 / -1; } }
.ins__i { margin: 0; overflow: hidden; }
.ins__i img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; background: #f3f2ef; transition: transform .6s var(--ease); }
@media (hover: hover) { .ins__i:hover img { transform: scale(1.02); } }
[data-skin="wmm"] .phead2__top { display: block; }
[data-skin="wmm"] .phead2__d { margin-top: 18px; color: var(--wr); }
[data-skin="wmm"] .phead2__intro { max-width: 56ch; }
[data-skin="wmm"] .phead2::before { right: calc(max(24px, calc(50% - 600px)) + clamp(120px, 20vw, 300px) - clamp(30px, 4vw, 60px)); top: calc(50% + clamp(60px, 10vw, 150px) - clamp(30px, 4vw, 60px)); width: clamp(60px, 8vw, 120px); }
/* square corners everywhere on this page, like the poster */
[data-skin="wmm"] .pbody img:not(.lpe *), [data-skin="wmm"] .pbody figure:not(.lpe), [data-skin="wmm"] .pbody .video, [data-skin="wmm"] .pbody .video__play, [data-skin="wmm"] .pbody [class*="media__"] { border-radius: 0 !important; }
[data-skin="wmm"] .phead2::after { z-index: 2; } [data-skin="wmm"] .phead2::before { z-index: 3; }
[data-skin="wmm"] .pbody *:not(.psr__dot):not(.video__btn):not(.video__btn *):not(.lpe *) { border-radius: 0 !important; }

/* ===== Book trilogy page ===== */
.rws { margin-top: clamp(28px, 3.5vw, 44px) !important; }
.rws .jrow { gap: clamp(8px, 1vw, 14px); } .rws .jrow + .jrow { margin-top: clamp(8px, 1vw, 14px); }
.rws .jrow__i img { border-radius: 4px; }
.rws .jrow__i figcaption { margin-top: 8px; font-size: 15px; color: var(--muted); }
@media (max-width: 640px) { .rws .jrow { flex-wrap: wrap; } .rws .jrow__i { flex-basis: 100% !important; } }
.bk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; max-width: 940px; margin: clamp(72px, 9vw, 128px) auto 0 !important; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.bk__n { font-size: clamp(56px, 7vw, 104px); font-weight: 300; line-height: .85; letter-spacing: -.04em; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.bk__k { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bk__t { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1.2; }
.bk__p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--ink-2, #333); } .bk__p + .bk__p { margin-top: 12px; }
.hon { margin-top: clamp(40px, 5vw, 64px) !important; }
.hon__l { list-style: none; margin: 0; padding: 0; }
.hon__i { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hon__i:first-child { border-top: 1px solid var(--line); }
.hon__y { font-weight: 700; font-size: 16px; white-space: nowrap; }
.hon__k { margin: 0 0 2px; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hon__t { margin: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.4; }
.hon__t a { text-decoration: none; border-bottom: 1px solid currentColor; }
.hon__d { margin: 4px 0 0; font-size: 16px; color: var(--muted); }
.hon__i.is-star .hon__y { color: var(--accent-2); }
@media (max-width: 640px) { .hon__i { grid-template-columns: 1fr; } }
/* light header for this page */
.project:has([class]) .phead2 .crumb a { }
.ins__h { color: var(--wr, var(--accent-2)); }
[data-skin="paper"] .phead2 { color: #2f3431; border-bottom: 1px solid #dedbd3; }
[data-skin="paper"] .phead2__intro { color: #4a4f4b; }
[data-skin="paper"] .phead2 .crumb a { color: #6f7a72; } [data-skin="paper"] .phead2 .crumb a:hover { color: #2f3431; }
[data-skin="paper"] .phero2 { background: #f1f0ec; }
[data-skin="paper"] .ins__h, [data-skin="paper"] .hon__i.is-star .hon__y, [data-skin="paper"] .bk__n { color: #a8835f; }
[data-skin="paper"] .pmeta2 dt { color: #8a7560; }

/* ===== "menu" skin — 壹粥刊: colour-blocked grounds from the photos (orange / lilac / butter / mint / navy),
   white menu sheets with blue-grey rules, black label bars and a red serial number ===== */
[data-skin="menu"] { --or: #e26534; --li: #ac89cb; --bu: #f6deb0; --mi: #a6c2b0; --nv: #2d5890; --rd: #c2264e; --ink-2: #222; --muted: #444; --line: #9fb3bf; }
[data-skin="menu"] body { background: #fbf6ea; }
[data-skin="menu"] .phead2 { position: relative; overflow: hidden; color: #1a1a1a; background: linear-gradient(115deg, var(--or) 0 58%, var(--li) 58% 100%); }
[data-skin="menu"] .phead2__t { color: #1a1a1a; font-weight: 900; letter-spacing: -.01em; }
[data-skin="menu"] .phead2__d { color: #1a1a1a; }
[data-skin="menu"] .phead2__intro { color: #1a1a1a; font-weight: 500; }
[data-skin="menu"] .phead2 .crumb a { color: #1a1a1a; }
[data-skin="menu"] .phero2 { background: linear-gradient(115deg, var(--or) 0 58%, var(--li) 58% 100%); }
[data-skin="menu"] .pmeta2 dt { color: var(--rd); font-weight: 700; }
[data-skin="menu"] .artw__k { color: var(--rd); }
[data-skin="menu"] .artw__t { font-weight: 900; font-size: clamp(48px, 7vw, 96px); }
[data-skin="menu"] .artw__g { display: inline-block; margin-top: 14px; padding: 6px 16px; background: #1a1a1a; color: #fff; font-style: normal; font-weight: 600; }
[data-skin="menu"] .lead { color: #1a1a1a; }
[data-skin="menu"] .rws .jrow__i img { border-radius: 0; }
[data-skin="menu"] .media .media__k, [data-skin="menu"] .kicker { color: var(--rd); }
[data-skin="menu"] .pull, [data-skin="menu"] .pull em { color: #1a1a1a; }
[data-skin="menu"] .pull em { font-style: normal; background: #1a1a1a; color: #fff; padding: 0 .25em; }
[data-skin="menu"] .qbox { background: var(--bu); color: #1a1a1a; border-radius: 0; }
[data-skin="menu"] .xlink a { background: #1a1a1a; color: #fff; padding: 12px 22px; border-radius: 0; text-decoration: none; display: inline-block; }
[data-skin="menu"] .xlink a:hover, [data-skin="menu"] .xlink a:focus-visible { background: var(--rd); }
/* the order slip */
.slp { max-width: 760px; margin: clamp(56px, 7vw, 96px) auto 0 !important; background: #fff; padding: clamp(20px, 3vw, 36px); box-shadow: 0 0 0 10px var(--mi, #a6c2b0), 0 24px 48px -20px rgba(0,0,0,.4); font-family: var(--f-sans); }
.slp__head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 8px 20px; padding-bottom: 14px; border-bottom: 2px solid #1a1a1a; }
.slp__t { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: .06em; color: #1a1a1a; }
.slp__opt { margin: 0; display: flex; gap: 18px; font-size: 16px; font-weight: 600; color: #1a1a1a; }
.slp__no { margin: 0; font-size: 16px; font-weight: 700; color: var(--rd, #c2264e); border: 1.5px solid currentColor; padding: 2px 10px; }
.slp__l { list-style: none; margin: 0; padding: 0; }
.slp__l li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 46px; align-items: stretch; border-bottom: 1px solid var(--line, #9fb3bf); }
.slp__k { display: grid; place-items: center; background: #1a1a1a; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .06em; padding: 12px 8px; text-align: center; }
.slp__v { padding: 14px 16px; font-size: 17px; line-height: 1.6; color: #1a1a1a; border-right: 1px solid var(--line, #9fb3bf); }
.slp__q { display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #1a1a1a; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .slp__head { grid-template-columns: 1fr auto; } .slp__opt { grid-column: 1 / -1; grid-row: 2; } .slp__l li { grid-template-columns: 92px minmax(0, 1fr); } .slp__q { display: none; } .slp__v { border-right: 0; } }
[data-skin="menu"] .slp + .pull { margin-top: clamp(56px, 7vw, 88px) !important; }
[data-skin="menu"] .pbody img, [data-skin="menu"] .pbody figure, [data-skin="menu"] .media__img, [data-skin="menu"] .video, [data-skin="menu"] .video__play { border-radius: 0 !important; }
[data-skin="menu"] .rws .jrow:last-child:has(> :only-child) { max-width: 560px; margin-inline: auto; }

/* corner-of-the-wall: exhibitions table — white card, small radius, dark readable text, calm warm-grey accents (no pink) */
[data-skin="paper"] .hon { background: #fff; border-radius: 10px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -20px rgba(0,0,0,.3); }
[data-skin="paper"] .hon .ins__h { color: #2f3431; }
[data-skin="paper"] .hon__i { border-color: #e6e3dc; }
[data-skin="paper"] .hon__i:first-child { border-top: 0; } [data-skin="paper"] .hon__i:last-child { border-bottom: 0; }
[data-skin="paper"] .hon__y, [data-skin="paper"] .hon__i.is-star .hon__y { color: #2f3431; }
[data-skin="paper"] .hon__i.is-star .hon__y::after { content: ""; display: block; width: 18px; height: 3px; margin-top: 8px; background: #6f5a43; }
[data-skin="paper"] .hon__k { color: #6f5a43; font-weight: 600; }
[data-skin="paper"] .hon__t { color: #1f2321; }
[data-skin="paper"] .hon__t a { color: #1f2321; border-bottom-color: #6f5a43; }
[data-skin="paper"] .hon__t a:hover, [data-skin="paper"] .hon__t a:focus-visible { color: #6f5a43; }
[data-skin="paper"] .hon__d { color: #4d524f; }
[data-skin="paper"] .ins__h, [data-skin="paper"] .bk__n { color: #8a6a4a; }
/* 壹粥刊 header, lighter: butter + mint grounds from the photos, orange/lilac only as a thin stripe, lighter title */
[data-skin="menu"] .phead2 { background: linear-gradient(115deg, var(--bu) 0 62%, var(--mi) 62% 100%); color: #1a1a1a; }
[data-skin="menu"] .phead2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, var(--or) 0 58%, var(--li) 58% 100%); }
[data-skin="menu"] .phead2__t { font-weight: 700; letter-spacing: 0; }
[data-skin="menu"] .phead2__d { color: #8a2a1c; }
[data-skin="menu"] .phead2__intro { font-weight: 400; color: #2a2a2a; }
[data-skin="menu"] .phero2 { background: #fbf6ea; }
[data-skin="menu"] .artw__t { font-weight: 800; }
.slp__q { border-right: 1px solid var(--line, #9fb3bf); } .slp__l { border-left: 1px solid #1a1a1a; }
@media (max-width: 560px) { .slp__v { border-right: 1px solid var(--line, #9fb3bf) !important; } }
[data-skin="paper"] .hon { border-radius: 16px; }
/* 壹粥刊: keep the original orange / lilac split, but in soft tints with dark text — no extra stripe */
[data-skin="menu"] .phead2 { background: linear-gradient(115deg, #f6c9ae 0 60%, #ddd0ec 60% 100%); }
[data-skin="menu"] .phead2::after { content: none; }
[data-skin="menu"] .phead2__d { color: #8a2a1c; }
[data-skin="menu"] .phero2 { background: #fbf6ea; }
/* closing note + store link: quiet text, no boxes */
[data-skin="menu"] .lead--note { max-width: 62ch; margin-inline: auto; font-size: 17px; line-height: 1.75; color: #3a3a3a; text-align: center; }
[data-skin="menu"] .xlink { text-align: center; }
[data-skin="menu"] .xlink a { background: none; color: #1a1a1a; padding: 0 0 2px; box-shadow: none; border-bottom: 2px solid #1a1a1a; font-weight: 600; }
[data-skin="menu"] .xlink a:hover, [data-skin="menu"] .xlink a:focus-visible { background: none; color: #8a2a1c; border-bottom-color: #8a2a1c; }
/* 壹粥刊 header: no divider line; the lavender side meets the photo exactly where its own orange/purple split is (44.3% at the photo's top edge) */
[data-skin="menu"] .phead2__top { border-bottom: 0; padding-bottom: 0; }
[data-skin="menu"] .phead2 { position: relative; background: #f6c9ae; }
[data-skin="menu"] .phead2::before { content: ""; position: absolute; inset: 0; background: #ddd0ec; clip-path: polygon(66% 0, 100% 0, 100% 100%, 44.3% 100%); pointer-events: none; }
[data-skin="menu"] .phead2 > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { [data-skin="menu"] .phead2::before { clip-path: polygon(78% 0, 100% 0, 100% 100%, 44.3% 100%); } }
/* constant diagonal angle on every screen: a skewed panel pinned at the photo's split point (44.3%) */
[data-skin="menu"] .phead2 { overflow: hidden; }
[data-skin="menu"] .phead2::before, [data-skin="menu"] .phead2::before { clip-path: none !important; left: 44.3%; right: -100%; top: 0; bottom: 0; inset: 0 -100% 0 44.3%; transform-origin: 0 100%; transform: skewX(-37deg); }
/* store link as a button: one calm dark pill */
[data-skin="menu"] .xlink a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 0; border-radius: 999px; background: #1a1a1a; color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; transition: background .25s, transform .25s; }
[data-skin="menu"] .xlink a:hover, [data-skin="menu"] .xlink a:focus-visible { background: #8a2a1c; color: #fff; transform: translateY(-2px); }
[data-skin="menu"] .xlink a:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; }
[data-skin="menu"] .xlink { margin-bottom: clamp(48px, 6vw, 80px) !important; }
[data-skin="menu"] .phead2::before { inset: 0 -100% 0 44.5%; transform: skewX(-20deg); }

/* ===== Magnifier (loupe): base photo + ring → line → close-up circle; animates in on scroll ===== */
.lpe { margin: clamp(56px, 7vw, 96px) 0 0 !important; }
.lpe__t { margin: 0 0 18px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; }
.lpe__stage { position: relative; aspect-ratio: 2 / 1; }
.lpe__base { position: absolute; left: 0; top: 10%; width: 44%; aspect-ratio: 580 / 520; border-radius: 28px; overflow: visible; }
.lpe__base img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.lpe__ring { position: absolute; left: 67%; top: 91%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.4); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.25); opacity: 0; transition: transform .6s cubic-bezier(.3,1.4,.5,1) .3s, opacity .3s .3s; }
.lpe__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lpe__line line { stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s ease .85s; }
.lpe__zoom { position: absolute; left: 56%; top: 5%; width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 24px 50px -24px rgba(0,0,0,.55); transform: scale(.2); transform-origin: 0% 85%; opacity: 0; transition: transform .8s cubic-bezier(.2,.9,.25,1) 1.3s, opacity .4s 1.3s; }
.lpe__zoom img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 62%; }
.lpe__cap { margin: 10px 0 0 56%; width: 40%; text-align: center; font-weight: 700; font-size: 17px; opacity: 0; transition: opacity .5s 1.9s; }
.lpe__p { max-width: 62ch; margin: 18px 0 0; font-size: 17px; line-height: 1.7; }
.lpe.in .lpe__ring { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lpe.in .lpe__line line { stroke-dashoffset: 0; }
.lpe.in .lpe__zoom { opacity: 1; transform: none; }
.lpe.in .lpe__cap { opacity: 1; }
@media (max-width: 760px) {
  .lpe__stage { aspect-ratio: auto; display: grid; gap: 20px; justify-items: center; }
  .lpe__base, .lpe__zoom { position: relative; left: auto; top: auto; width: 100%; }
  .lpe__zoom { width: 82%; transform-origin: 50% 0; }
  .lpe__line { display: none; }
  .lpe__cap { margin: 12px auto 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .lpe__ring, .lpe__zoom, .lpe__cap, .lpe__line line { transition: none !important; } }
/* loupe keeps its own round shapes even inside the square-cornered WMM page */
.pbody .lpe .lpe__base img { border-radius: 28px !important; }
.pbody .lpe .lpe__ring, .pbody .lpe .lpe__zoom, .pbody .lpe .lpe__zoom img { border-radius: 50% !important; }
.lpe__line line { vector-effect: none; stroke-width: .22; }
.lpe__cap { margin-top: -2%; }
@media (max-width: 760px) { .lpe__cap { margin-top: 12px; } }
[data-skin="wmm"] .lpe__zoom { border-color: #111; }
[data-skin="wmm"] .lpe__cap { color: #111; }
.lpe__line { color: #111; }
.exh__logo { float: right; width: 44px; height: 44px; margin: 2px 0 8px 16px; border-radius: 6px; }
.pmeta2__logos img[src*="wmm"] { border-radius: 6px; }
.card { position: relative; }
.card__badge { position: absolute; top: 14px; right: 14px; z-index: 2; display: block; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.card__badge img { display: block; width: 100%; height: 100%; }
.card__badge:hover, .card__badge:focus-visible { transform: scale(1.08); }
.card__badge:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
a.exh__logo { display: block; } a.exh__logo img { width: 44px; height: 44px; border-radius: 6px; display: block; }
.pmeta2__logos a { display: inline-block; border-radius: 6px; } .pmeta2__logos a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.vid__local { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* ===== Flip book ===== */
.fbk { margin-top: clamp(56px, 7vw, 96px) !important; text-align: center; }
.fbk .ins__h { text-align: left; }
.fbk__stage { perspective: 2200px; padding: clamp(16px, 3vw, 40px) 0; }
.fbk__book { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 900px); margin-inline: auto; aspect-ratio: 2 / 1; cursor: pointer; transform-style: preserve-3d; }
.fbk__pg { position: relative; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); }
.fbk__pg img, .fbk__leaf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fbk__pg--l { border-radius: 4px 0 0 4px; } .fbk__pg--r { border-radius: 0 4px 4px 0; }
.fbk__pg--l::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 14%; background: linear-gradient(90deg, transparent, rgba(0,0,0,.12)); pointer-events: none; }
.fbk__pg--r::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 14%; background: linear-gradient(270deg, transparent, rgba(0,0,0,.12)); pointer-events: none; }
.fbk__pg.is-empty { background: transparent; box-shadow: none; } .fbk__pg.is-empty::after, .fbk__pg.is-empty img { display: none; }
.fbk__leaf { position: absolute; top: 0; bottom: 0; width: 50%; display: none; transform-style: preserve-3d; z-index: 3; }
.fbk__leaf.is-fwd { display: block; left: 50%; transform-origin: 0 50%; }
.fbk__leaf.is-back { display: block; left: 0; transform-origin: 100% 50%; }
.fbk__leaf.go { transition: transform .7s cubic-bezier(.45,.05,.3,1); }
.fbk__leaf.is-fwd.go { transform: rotateY(-180deg); } .fbk__leaf.is-back.go { transform: rotateY(180deg); }
.fbk__f, .fbk__b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fff; box-shadow: 0 10px 30px -14px rgba(0,0,0,.4); }
.fbk__b { transform: rotateY(180deg); }
.fbk__ctl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 6px; }
.fbk__btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid currentColor; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.fbk__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fbk__btn:hover:not(:disabled), .fbk__btn:focus-visible { background: var(--vg, #1a1a1a); border-color: var(--vg, #1a1a1a); color: #fff; }
.fbk__btn:focus-visible { outline: 3px solid var(--vg, #1a1a1a); outline-offset: 3px; }
.fbk__btn:disabled { opacity: .3; cursor: default; }
.fbk__at { margin: 0; min-width: 160px; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.fbk__hint { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

/* ===== "veg" skin — 菜·花書: leaf green frame, rice-paper card with a pointed "house" top, black line drawing ===== */
[data-skin="veg"] { --vg: #3c7012; --vg2: #64a61f; --rice: #efeee7; --mv: #cfc0bc; --ink-2: #262626; --muted: #4a4a4a; }
[data-skin="veg"] body { background: var(--rice); }
[data-skin="veg"] .phead2 { position: relative; background: var(--vg2); color: #1a1a1a; padding-bottom: clamp(36px, 5vw, 64px); }
[data-skin="veg"] .phead2 > .wrap { position: relative; background: var(--rice); border-radius: 0 0 28px 28px; padding: clamp(84px, 9vw, 120px) clamp(22px, 4vw, 56px) clamp(32px, 4vw, 52px); clip-path: polygon(0 clamp(56px, 7vw, 96px), 50% 0, 100% clamp(56px, 7vw, 96px), 100% 100%, 0 100%); margin-top: clamp(10px, 2vw, 24px); text-align: center; }
[data-skin="veg"] .phead2 .crumb { text-align: center; }
[data-skin="veg"] .phead2 .crumb a { color: #2b2b2b; }
[data-skin="veg"] .phead2__top { display: block; border: 0; padding: 0; }
[data-skin="veg"] .phead2__t { color: var(--vg); font-weight: 800; letter-spacing: .02em; max-width: none; }
[data-skin="veg"] .phead2__d { margin-top: 14px; color: #2b2b2b; }
[data-skin="veg"] .phead2__intro { margin-inline: auto; color: #2b2b2b; }
[data-skin="veg"] .phero2 { background: var(--vg2); padding: 0 clamp(16px, 4vw, 64px) clamp(24px, 3vw, 40px); }
[data-skin="veg"] .phero2 figure { border-radius: 20px; overflow: hidden; }
[data-skin="veg"] .pmeta2 dt { color: var(--vg); font-weight: 700; }
[data-skin="veg"] .artw__k, [data-skin="veg"] .ins__h, [data-skin="veg"] .media .kicker, [data-skin="veg"] .media__k { color: var(--vg); }
[data-skin="veg"] .artw__t { color: var(--vg); font-weight: 800; }
[data-skin="veg"] .artw__g { display: inline-block; margin-top: 12px; padding: 4px 16px; border-radius: 999px; background: var(--vg); color: #fff; font-style: normal; font-weight: 600; }
[data-skin="veg"] .rws .jrow__i img { border-radius: 16px; }
[data-skin="veg"] .pull, [data-skin="veg"] .pull em { color: #1f1f1f; } [data-skin="veg"] .pull em { color: var(--vg); font-style: normal; }
[data-skin="veg"] .fbk__stage { background: var(--mv); border-radius: 24px; padding: clamp(20px, 4vw, 56px) clamp(12px, 3vw, 40px); }
[data-skin="veg"] .hon { background: #fff; border-radius: 16px; padding: clamp(20px, 3vw, 36px); }
[data-skin="veg"] .hon__k { color: var(--vg); } [data-skin="veg"] .hon__y { color: #1f1f1f; }
[data-skin="veg"] .slp { box-shadow: 0 0 0 10px var(--vg2), 0 24px 48px -20px rgba(0,0,0,.35); }
[data-skin="veg"] .slp__k { background: var(--vg); }
[data-skin="veg"] .slp__no { color: var(--vg); }
@media (max-width: 640px) { .fbk__book { aspect-ratio: 2 / 1; } .fbk__btn { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .fbk__leaf.go { transition: none; } }
/* round: 菜·花書 — muted, darker leaf green; title on two lines; even gaps; call-outs */
[data-skin="veg"] { --vg: #4a5e3c; --vg2: #5d7049; }
.phead2__ts { display: block; }
[data-skin="veg"] .phead2__ts { margin-top: .08em; }
[data-skin="veg"] .phero2 { gap: clamp(16px, 4vw, 64px); padding-top: 0; }
.cal { margin-top: clamp(56px, 7vw, 96px) !important; }
.cal__stage { position: relative; border-radius: 20px; overflow: hidden; }
.cal__stage img { display: block; width: 100%; height: auto; }
.cal__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cal__lines path { fill: none; stroke: #c8402b; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .8s ease calc(.25s + var(--i) * .25s); }
.cal__lab { position: absolute; transform: translateY(-50%); padding: 5px 10px; background: #1a1a1a; color: #f2a65a; font-weight: 700; font-size: clamp(12px, 1.2vw, 16px); letter-spacing: .02em; white-space: nowrap; opacity: 0; transition: opacity .4s ease calc(.6s + var(--i) * .25s); }
.cal.in .cal__lines path { stroke-dashoffset: 0; } .cal.in .cal__lab { opacity: 1; }
.cal__cap { margin-top: 18px; }
.cal__ls { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 17px; line-height: 1.6; }
@media (min-width: 900px) { .cal__ls { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (prefers-reduced-motion: reduce) { .cal__lines path, .cal__lab { transition: none; } }
[data-skin="veg"] .cal__stage { border-radius: 20px; }
.cal__lines path { vector-effect: none; stroke-width: .32; }
.cal__dot { display: none; }
@media (max-width: 640px) {
  .cal__lab, .cal__lines { display: none; }
  .cal__dot { display: grid; place-items: center; position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #1a1a1a; color: #f2a65a; font: 700 13px var(--f-sans); }
  .cal__ls { padding-left: 1.6em; }
}
/* call-outs: heading above, the photo carries the labels; the list is only a phone / screen-reader fallback */
.cal__h { display: block; margin: 0 0 20px; }
.cal__lab { display: grid; gap: 2px; padding: 8px 12px; line-height: 1.25; }
.cal__lab b { font-size: clamp(13px, 1.25vw, 17px); color: #f2a65a; }
.cal__lab small { font-size: clamp(12px, 1vw, 14px); font-weight: 500; color: #f4f1ec; letter-spacing: .01em; }
@media (min-width: 641px) { .cal__ls { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 640px) { .cal__ls { margin-top: 16px; } }

/* 菜·花書 page grid: one vertical rhythm, captions/headings tight to what they introduce */
[data-skin="veg"] .pbody > * { margin-top: clamp(72px, 8vw, 120px) !important; margin-bottom: 0 !important; }
[data-skin="veg"] .pbody > .artw { margin-top: clamp(56px, 6vw, 88px) !important; }
[data-skin="veg"] .pbody > .artw + .lead { margin-top: 20px !important; }
[data-skin="veg"] .pbody > .lead + .rws { margin-top: clamp(40px, 4vw, 56px) !important; }
[data-skin="veg"] .pbody > .pull { margin-top: clamp(72px, 8vw, 120px) !important; padding-inline: clamp(0px, 6vw, 96px); }
[data-skin="veg"] .pbody > .vid + .fbk { margin-top: clamp(48px, 5vw, 72px) !important; }
[data-skin="veg"] .rws > .ins__h, [data-skin="veg"] .fbk > .ins__h, [data-skin="veg"] .hon > .ins__h { margin: 0 0 20px; }
[data-skin="veg"] .rws .jrow { gap: 16px; } [data-skin="veg"] .rws .jrow + .jrow { margin-top: 16px; }
[data-skin="veg"] .media { gap: clamp(28px, 4vw, 64px); align-items: center; }
[data-skin="veg"] .media .media__k, [data-skin="veg"] .media .kicker { margin-bottom: 14px; }
[data-skin="veg"] .media p + p { margin-top: 14px; }
[data-skin="veg"] .fbk__ctl { margin-top: 20px; }
[data-skin="veg"] .media__img, [data-skin="veg"] .media figure, [data-skin="veg"] .media img, [data-skin="veg"] .vid__box { box-shadow: none !important; }
[data-skin="veg"] .vid__cap { margin-top: 12px; }
/* call-outs in the book's own language: rounded green labels, green lines, end dots; a materials card on the photo */
.cal__lines path { vector-effect: non-scaling-stroke; stroke-width: 2.2; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; transition: opacity .5s ease calc(.25s + var(--i) * .2s); }
.cal.in .cal__lines path { opacity: 1; }
[data-skin="veg"] .cal__lines path { stroke: #4a5e3c; }
[data-skin="veg"] .cal__lab { background: #4a5e3c; border-radius: 14px; padding: 9px 16px 10px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.45); }
[data-skin="veg"] .cal__lab b { color: #fff; } [data-skin="veg"] .cal__lab small { color: #dfe6d6; }
[data-skin="veg"] .cal__dot { background: #4a5e3c; color: #fff; }
.cal__stage::after { content: none; }
.cal__mat { position: absolute; left: 3%; bottom: 4%; width: min(36%, 360px); padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(4px); color: #1f1f1f; }
.cal__mk { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4a5e3c; }
.cal__mv { margin: 0; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.55; }
.cal__ms { margin: 6px 0 0; font-size: clamp(13px, 1.05vw, 15px); font-weight: 600; }
@media (max-width: 900px) { .cal__mat { position: static; width: auto; margin: 16px 0 0; background: #fff; } }
/* header: house panel as wide as the photos; photos joined with no gap */
[data-skin="veg"] .phead2 > .wrap { max-width: none; margin-inline: clamp(16px, 4vw, 64px); width: auto; }
[data-skin="veg"] .phero2 { gap: 0; }
[data-skin="veg"] .phero2 figure { border-radius: 0; }
[data-skin="veg"] .phero2 figure:first-child { border-radius: 20px 0 0 20px; } [data-skin="veg"] .phero2 figure:last-child { border-radius: 0 20px 20px 0; }
[data-skin="veg"] .phero2 img { aspect-ratio: 3 / 2; }
@media (max-width: 759px) { [data-skin="veg"] .phero2 figure:first-child { border-radius: 20px 20px 0 0; } [data-skin="veg"] .phero2 figure:last-child { border-radius: 0 0 20px 20px; } }
@media (min-width: 901px) { .cal__mat { top: 4%; bottom: auto; } }
.cal__pic { position: relative; }
@media (max-width: 640px) { [data-skin="veg"] .cal__lab, .cal__lab, .cal__lines { display: none !important; } .cal__stage { border-radius: 20px; } }
@media (max-width: 900px) { .cal__stage { overflow: visible; background: none; } .cal__pic { border-radius: 20px; overflow: hidden; } }
@media (max-width: 640px) { .cal__ls { list-style: decimal; } .cal__ls li::marker { font-weight: 700; color: #4a5e3c; } }
/* materials sit below the photo, never over it; labels/lines wait until the photo is in view */
.cal__mat, [data-skin="veg"] .cal__mat { position: static !important; width: auto; margin: 16px 0 0; background: #fff; backdrop-filter: none; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 24px; align-items: baseline; padding: 16px 22px; }
.cal__mat .cal__mk { margin: 0; } .cal__mat .cal__ms { margin: 0; white-space: nowrap; }
@media (max-width: 760px) { .cal__mat, [data-skin="veg"] .cal__mat { grid-template-columns: 1fr; } }
.cal.in .cal__lines path { opacity: 0; } .cal.in .cal__lab { opacity: 0; }
.cal.is-shown .cal__lines path { opacity: 1; } .cal.is-shown .cal__lab { opacity: 1; }
.cal__lab { transform: translateY(-50%) scale(.92); transition: opacity .45s ease calc(.15s + var(--i) * .18s), transform .45s cubic-bezier(.3,1.3,.5,1) calc(.15s + var(--i) * .18s); }
.cal.is-shown .cal__lab { transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .cal__lab, .cal__lines path { transition: none; } }
/* header: gap between the house panel and the photos equals the side gutter */
[data-skin="veg"] .phead2 { padding-bottom: clamp(16px, 4vw, 64px); }
/* header: the photos hang directly off the house panel — one continuous block, same width */
[data-skin="veg"] .phead2 { padding-bottom: 0 !important; }
[data-skin="veg"] .phead2 > .wrap { border-radius: 0 !important; }
[data-skin="veg"] .phero2 { padding: 0 clamp(16px, 4vw, 64px) clamp(16px, 4vw, 64px) !important; }
[data-skin="veg"] .phero2 figure:first-child { border-radius: 0 0 0 20px !important; } [data-skin="veg"] .phero2 figure:last-child { border-radius: 0 0 20px 0 !important; }
@media (max-width: 759px) { [data-skin="veg"] .phero2 figure:first-child { border-radius: 0 !important; } [data-skin="veg"] .phero2 figure:last-child { border-radius: 0 0 20px 20px !important; } }
/* materials: a typeset spec block — label column, list on a grid, format as its own column */
.cal__mat, [data-skin="veg"] .cal__mat { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 80px); padding: clamp(20px, 2.6vw, 32px) clamp(22px, 3vw, 40px); border-radius: 0 0 20px 20px; margin-top: 0 !important; }
.cal__stage { border-radius: 20px 20px 0 0 !important; }
.cal__mc .cal__mk { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #d9d6cf; }
.cal__mv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 28px; font-size: 16px; line-height: 1.4; color: #1f1f1f; }
.cal__mc--s { min-width: 140px; }
.cal__ms { margin: 0 !important; font-size: clamp(22px, 2vw, 28px) !important; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; color: #1f1f1f; }
@media (max-width: 1000px) { .cal__mv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cal__mat, [data-skin="veg"] .cal__mat { grid-template-columns: 1fr; border-radius: 20px; margin-top: 16px !important; } .cal__stage { border-radius: 20px !important; } }
/* flip book on a light oak desk */
[data-skin="veg"] .fbk__stage { background: #d9c9b4 url("../../images/veg/desk-2400.webp") center / cover; box-shadow: inset 0 0 120px rgba(60,40,20,.18); }
[data-skin="veg"] .fbk__pg { box-shadow: 0 2px 3px rgba(60,40,20,.18), 0 26px 40px -18px rgba(60,40,20,.45); }
[data-skin="veg"] .fbk__stage { background: #e9dccb url("../../images/veg/desk-2400.webp") center top / 1800px auto repeat-y; box-shadow: inset 0 0 90px rgba(80,55,30,.16); }
[data-skin="veg"] .fbk__pg.is-empty { box-shadow: none; }
.cal__mv { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
[data-skin="veg"] .fbk__stage { background: #e9dccb url("../../images/veg/desk-2400.webp?v=2") center / cover no-repeat; }
/* flip book on a plank desk (planks run left–right, tiled) */
[data-skin="veg"] .fbk__stage { background: #d8b98f url("../../images/veg/desk-planks.webp?v=3") 0 0 / auto 100% repeat-x; box-shadow: inset 0 0 90px rgba(80,50,20,.22); }
.pmeta2 dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vg, currentColor); }
.pmeta2 dd a:hover, .pmeta2 dd a:focus-visible { color: var(--vg, inherit); }

/* category tags on cards (for the future home-page filter) */
.card__cats { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cat { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: #1f1f1f; color: #fff; }

/* ===== "photo" skin — Photography Awards: dark gallery wall so the photographs carry the page ===== */
[data-skin="photo"] body { background: #121212; color: #f2efe9; }
[data-skin="photo"] .phead2 { background: #121212; color: #f2efe9; }
[data-skin="photo"] .phead2__intro { color: #d8d3ca; }
[data-skin="photo"] .phero2 { background: #121212; }
[data-skin="photo"] .pmeta2 dt { color: #c9a86a; } [data-skin="photo"] .pmeta2 dd { color: #f2efe9; }
[data-skin="photo"] .hon { background: #1b1b1b; border-radius: 16px; padding: clamp(20px, 3vw, 36px); }
[data-skin="photo"] .hon .ins__h { color: #c9a86a; }
[data-skin="photo"] .hon__i { border-color: #2f2d2a; } [data-skin="photo"] .hon__i:first-child { border-top: 0; } [data-skin="photo"] .hon__i:last-child { border-bottom: 0; }
[data-skin="photo"] .hon__y, [data-skin="photo"] .hon__i.is-star .hon__y { color: #f2efe9; }
[data-skin="photo"] .hon__k { color: #c9a86a; } [data-skin="photo"] .hon__t, [data-skin="photo"] .hon__t a { color: #f2efe9; }
[data-skin="photo"] .hon__t a { border-bottom-color: #c9a86a; } [data-skin="photo"] .hon__t a:hover, [data-skin="photo"] .hon__t a:focus-visible { color: #c9a86a; }
[data-skin="photo"] .hon__d { color: #b3ada3; }
[data-skin="photo"] .bk { border-top-color: #2f2d2a; }
[data-skin="photo"] .bk__n { color: #c9a86a; }
[data-skin="photo"] .bk__k { color: #b3ada3; } [data-skin="photo"] .bk__t { color: #f2efe9; } [data-skin="photo"] .bk__p { color: #d8d3ca; }
[data-skin="photo"] .bk__p em { color: #f2efe9; font-style: italic; }
[data-skin="photo"] .rws .jrow__i img { border-radius: 2px; }
[data-skin="photo"] .rws .jrow__i figcaption { color: #b3ada3; }
[data-skin="photo"] .pnx { background: #0b0b0b; }
[data-skin="photo"] .bk__p em { background: none !important; text-decoration: none !important; box-shadow: none !important; padding: 0 !important; font-weight: 600; }
[data-skin="photo"] .phead2__t { color: #f2efe9; }
[data-skin="photo"] .bk__p em { color: #f2efe9 !important; }
@media (max-width: 640px) { .bk { grid-template-columns: 1fr; gap: 8px; } .bk__n { font-size: 56px; } }

/* =====================================================================
   Portfolio-PDF language (contents page, p.24, résumé)
   navy page · gold bold heading + vertical rule · round yellow badges ·
   light blue→cream gradient card · grey / blue quote marks · bracket lines
   ===================================================================== */
:root { --pdf-navy: #0c1820; --pdf-gold: #e3b44c; --pdf-badge: #e8b445; --pdf-ink: #1b1d1f;
  --pdf-card: linear-gradient(100deg, #b7cfdb 0%, #dfe3e0 34%, #efe8de 68%, #f5ece0 100%); }
.cat--artist-book { background: #5b6770; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card__media--fit { background: #141414; }
.card__media--fit img { object-fit: contain !important; }

/* --- Exhibitions & Awards: dark band, one gradient card, two résumé-style lists --- */
.exh { background: var(--pdf-navy); color: #fff; padding-block: clamp(64px, 8vw, 112px) !important; margin-top: clamp(56px, 7vw, 96px); }
.exh__title { margin: 0 0 clamp(40px, 5vw, 64px); text-align: center; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; color: var(--pdf-gold); letter-spacing: 0; }
.exh__card { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4vw, 56px); padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px); border-radius: 28px; background: var(--pdf-card); color: var(--pdf-ink); box-shadow: 0 0 40px rgba(255, 255, 255, .14); }
@media (min-width: 980px) { .exh__card { grid-template-columns: 1fr 1fr; } }
.exh__q { position: absolute; top: -.42em; font: 900 clamp(64px, 7vw, 96px)/1 Georgia, "Times New Roman", serif; pointer-events: none; }
.exh__q--l { left: clamp(28px, 7%, 120px); color: #8d8f91; } .exh__q--r { right: clamp(28px, 7%, 120px); color: #4fa3cf; }
.exh__h { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: clamp(22px, 2vw, 26px); font-weight: 700; color: #c9792f; letter-spacing: 0; text-transform: none; }
.exh__h::before { content: ""; width: 7px; height: 1.05em; background: currentColor; }
.exh__l { list-style: none; margin: 0; padding: 0; border: 0 !important; }
.exh__i { display: grid !important; grid-template-columns: 3.6em minmax(0, 1fr) auto !important; gap: 0 .7em !important; align-items: baseline; padding: 7px 0 !important; border: 0 !important; }
.exh__y { font-weight: 700; font-size: 16.5px !important; font-variant-numeric: tabular-nums; color: var(--pdf-ink); }
.exh__t { margin: 0; font-size: 16.5px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--pdf-ink); }
.exh__p { margin: 2px 0 0 !important; font-size: 15px !important; font-weight: 500; color: #4a4f55 !important; line-height: 1.5; }
.exh__w { display: inline-block; margin-top: 3px; font-size: 14.5px !important; font-weight: 600; color: #2d6f93 !important; border-bottom: 1px solid currentColor; text-decoration: none; white-space: normal !important; justify-self: start !important; }
.exh__w:hover, .exh__w:focus-visible { color: var(--pdf-ink) !important; }
.exh__logo { float: none !important; margin: 0 !important; align-self: start; }
a.exh__logo img { width: 36px !important; height: 36px !important; border-radius: 6px; }
@media (max-width: 760px) { .exh__i { grid-template-columns: 3.4em minmax(0, 1fr) !important; } .exh__logo { display: none !important; } }

/* --- section headers (awards, books): round yellow badge + gold rule, as on the PDF contents page --- */
.bk { grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; border-top: 0 !important; padding: 4px 0 4px clamp(18px, 2vw, 26px) !important; border-left: 3px solid var(--pdf-gold); scroll-margin-top: 96px; }
.bk__n { display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 12px; border-radius: 999px; background: var(--pdf-badge) !important; color: #1b1d1f !important; font: 700 19px/1 var(--f-sans) !important; letter-spacing: 0 !important; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .45); align-self: start; }
.bk__k { color: #8b8b8b !important; letter-spacing: .02em !important; text-transform: none !important; font-size: 16px !important; font-weight: 600 !important; }
.bk__t { font-weight: 700 !important; }
.bk--non { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 640px) { .bk { grid-template-columns: 1fr !important; } .bk__n { min-width: 52px; height: 52px; font-size: 16px !important; justify-self: start; } }
[data-skin="photo"] .bk__t { color: var(--pdf-gold) !important; }
[data-skin="photo"] .bk__k { color: #a9a49b !important; }

/* book icons: each book's own little squares (Book 1 one dark, Book 2 two sage, Book 3 three white) */
.bk__ic { display: flex; gap: 6px; align-self: start; padding-top: 4px; }
.bk__ic i { display: block; width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.bk--ic { border-left-color: #3b7590; }

/* single-photo rows stay a comfortable size */
.rws--narrow .jrow { max-width: 760px; margin-inline: auto; }

/* --- awards contents: navy panel with gold rule, light gradient side with badged thumbnails --- */
.aix { display: grid; grid-template-columns: 1fr; margin-top: clamp(32px, 4vw, 56px); background: var(--pdf-card); }
@media (min-width: 900px) { .aix { grid-template-columns: minmax(260px, 30%) 1fr; } }
.aix__l { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px); background: var(--pdf-navy); }
.aix__l::before { content: ""; position: absolute; left: clamp(14px, 2vw, 36px); top: 50%; height: 9.5em; transform: translateY(-50%); width: 3px; background: var(--pdf-gold); }
@media (min-width: 900px) { .aix__l::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 30px solid transparent; border-left: 0; border-right: 34px solid #b7cfdb; filter: drop-shadow(-6px 0 10px rgba(255,255,255,.25)); } }
.aix__y { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; color: var(--pdf-gold); }
.aix__t { margin: 0; font-size: clamp(44px, 5vw, 72px); font-weight: 800; line-height: 1; color: var(--pdf-gold); letter-spacing: .01em; }
.aix__n { margin: 6px 0 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; color: #d9dde2; }
.aix__g { list-style: none; margin: 0; padding: clamp(32px, 4vw, 64px) clamp(20px, 4vw, 64px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px); }
.aix__g a { display: block; color: var(--pdf-ink); text-decoration: none; }
.aix__m { position: relative; display: block; aspect-ratio: 16 / 9; background: #161616; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); }
.aix__m img { width: 100%; height: 100%; object-fit: contain; }
.aix__b { position: absolute; right: -10px; bottom: -14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pdf-badge); color: #1b1d1f; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .5); }
.aix__k { display: block; margin-top: 20px; font-size: 15px; font-weight: 600; color: #8b8d90; line-height: 1.35; }
.aix__w { display: block; margin-top: 2px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.aix__g a:hover .aix__w, .aix__g a:focus-visible .aix__w { text-decoration: underline; text-underline-offset: 3px; }

/* --- Corner of the Wall exhibitions: p.24 card with photos and bracket lines --- */
.hcd { background: var(--pdf-navy); padding-block: clamp(64px, 8vw, 104px); margin-top: clamp(56px, 7vw, 96px) !important; }
.hcd__h { margin: 0 0 clamp(40px, 5vw, 64px); text-align: center; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; color: var(--pdf-gold); }
.hcd__card { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; padding: clamp(28px, 3vw, 44px) clamp(18px, 2.5vw, 36px) clamp(36px, 4vw, 56px); border-radius: 28px; background: var(--pdf-card); color: var(--pdf-ink); box-shadow: 0 0 40px rgba(255, 255, 255, .14); }
@media (min-width: 900px) { .hcd__card { grid-template-columns: 1fr 2fr; gap: clamp(16px, 2vw, 28px); } }
.hcd__ph { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: clamp(16px, 2vw, 28px); }
.hcd__ph figure { margin: 0; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; background: #e9e9ea; }
.hcd__ph img { width: 100%; height: 100%; object-fit: cover; }
.hcd__br { position: relative; display: block; height: 64px; margin: 18px auto 14px; width: 2px; background: var(--pdf-ink); }
.hcd__br.is-multi { width: calc(50% + 2px); height: 36px; background: none; border: 2px solid var(--pdf-ink); border-top: 0; border-radius: 0 0 10px 10px; margin-bottom: 44px; }
.hcd__br.is-multi::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 32px; margin-left: -1px; background: var(--pdf-ink); }
.hcd__l { list-style: none; margin: 0; padding: 0 clamp(4px, 1.5vw, 20px); }
.hcd__l li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 0 .5em; padding: 3px 0; font-size: 16.5px; font-weight: 700; line-height: 1.45; }
.hcd__l small { display: block; font-size: 14.5px; font-weight: 500; color: #4a4f55; }
.hcd__l a { color: inherit; text-decoration: underline; text-decoration-color: #4fa3cf; text-underline-offset: 3px; }
.hcd__y { font-variant-numeric: tabular-nums; }
.exh__t a { color: inherit; text-decoration: none; background: linear-gradient(#4fa3cf, #4fa3cf) 0 100% / 100% 1.5px no-repeat; padding-bottom: 1px; }
.exh__t a:hover, .exh__t a:focus-visible { color: #2d6f93; }
.exh__ar { display: inline-block; margin-left: .35em; color: #2d6f93; transition: transform .2s; } .exh__t a:hover .exh__ar { transform: translateX(3px); }
.exh__q { font-family: var(--f-sans); font-weight: 900; }
.aix__l { padding-right: clamp(56px, 5vw, 88px); } .aix__t { font-size: clamp(40px, 4.2vw, 62px); }
.hcd__ph { display: flex !important; align-items: flex-start; }
.hcd__ph figure { aspect-ratio: auto !important; background: none !important; }
.hcd__ph img { height: auto !important; object-fit: initial !important; display: block; }

/* ===== Corner of the Wall, after PDF p.25: grey page, grey bold title, blue subtitle + blue bar,
   rounded photo frames, pink highlighted phrases, each book's own little squares ===== */
[data-skin="paper"] { --cw-bg: #d6d6d6; --cw-blue: #3b7590; --cw-pink: #e2506c; --cw-ink: #262626; }
[data-skin="paper"] body, [data-skin="paper"] .phead2, [data-skin="paper"] .phero2 { background: var(--cw-bg) !important; }
[data-skin="paper"] .site-header { background: rgba(214, 214, 214, .9) !important; }
[data-skin="paper"] .phead2 { border-bottom: 0 !important; }
[data-skin="paper"] .phead2__t { color: #565656 !important; font-weight: 700; }
[data-skin="paper"] .phead2__d { color: var(--cw-blue) !important; font-weight: 700; letter-spacing: .02em; text-transform: none; font-size: clamp(18px, 1.6vw, 22px); }
[data-skin="paper"] .phead2__intro { color: var(--cw-ink) !important; }
[data-skin="paper"] .phead2 .crumb a { color: #565656 !important; }
[data-skin="paper"] .phero2 figure { padding: 0 clamp(16px, 4vw, 56px); }
[data-skin="paper"] .phero2 img { border-radius: 24px; border: 2px solid var(--cw-blue); }
[data-skin="paper"] .pmeta2 dt { color: var(--cw-blue) !important; }
[data-skin="paper"] .pmeta2 dd, [data-skin="paper"] .pmeta2 { color: var(--cw-ink); border-color: #bdbdbd !important; }
[data-skin="paper"] .artw__k { color: var(--cw-blue) !important; letter-spacing: .02em; text-transform: none; font-weight: 700; font-size: 20px; }
[data-skin="paper"] .artw__t { color: #565656; font-weight: 700; }
[data-skin="paper"] .artw__g { display: inline-block; margin-top: 6px; padding: 3px 12px; background: var(--cw-blue); color: #fff; font-style: normal; font-weight: 700; }
[data-skin="paper"] .artw__g::before { content: "- "; }
[data-skin="paper"] .media__img img { border-radius: 24px; border: 2px solid var(--cw-blue); }
[data-skin="paper"] .media__k { color: var(--cw-blue) !important; }
[data-skin="paper"] .media__txt p b { display: block; color: var(--cw-blue); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; }
[data-skin="paper"] .media__txt, [data-skin="paper"] .bk__p { color: var(--cw-ink) !important; }
[data-skin="paper"] .bk { border-left-color: var(--cw-blue) !important; }
[data-skin="paper"] .bk__k { color: var(--cw-blue) !important; }
[data-skin="paper"] .bk__t { color: #3f3f3f; }
[data-skin="paper"] .bk__p em, [data-skin="paper"] .pull em { color: var(--cw-pink) !important; font-style: normal; font-weight: 700; background: none !important; text-decoration: none !important; box-shadow: none !important; padding: 0 !important; }
[data-skin="paper"] .pull p { color: var(--cw-ink); }
[data-skin="paper"] .rws .jrow__i img { border-radius: 18px !important; border: 2px solid #ededed; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .45); }
[data-skin="paper"] .rws .jrow__i figcaption { color: #4a4a4a; }
.sqi { display: inline-flex; gap: 5px; vertical-align: -3px; margin: 0 2px; }
.sqi i { display: block; width: 22px; height: 22px; border-radius: 5px; }
.sqi--d { background: #6b6c6e; } .sqi--s { background: #c5c7b6; } .sqi--w { background: #efeee7; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
[data-skin="paper"] .phero2 figure { max-width: 1180px; margin-inline: auto; overflow: visible; }
[data-skin="paper"] .phero2 img { aspect-ratio: auto !important; height: auto; object-fit: initial; }
[data-skin="paper"] .phero2 figure:hover img { transform: none; }

/* ===== WMM works, after PDF p.26–27: charcoal page, grey bold title, pink subtitle + pink bar,
   white bold text with pink key sentences, hand-drawn style arrows ===== */
.pds { --pk: #e57a85; --pk-bar: #c8505f; background: #1c1c1c; color: #fff; padding-block: clamp(64px, 8vw, 112px); margin-top: clamp(72px, 9vw, 128px) !important; }
.pds + .pds { margin-top: 0 !important; border-top: 1px solid #2c2c2c; }
.pds__in > * + * { margin-top: clamp(36px, 4.5vw, 64px); }
.pds .artw { margin-top: 0 !important; justify-items: start !important; text-align: left !important; gap: 4px !important; }
.pds .artw__t { order: -1; color: #6a6a6a !important; font-weight: 800 !important; font-size: clamp(34px, 4.4vw, 60px) !important; line-height: 1.1; max-width: none; }
.pds .artw__k { color: var(--pk) !important; font-size: clamp(19px, 1.8vw, 26px) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
.pds .artw__g { display: inline-block; margin: 2px 0 0; padding: 1px 10px; background: var(--pk-bar); color: #fff !important; font-style: normal !important; font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); }
.pds .artw__g::before { content: "- "; }
.pds .media__txt p, .pds .lpe__b, .pds .stm p { color: #f1f1f1 !important; font-weight: 600; }
.pds em { color: var(--pk) !important; font-style: normal !important; font-weight: 700; background: none !important; text-decoration: none !important; box-shadow: none !important; padding: 0 !important; }
.pds b { color: #fff; }
.pds .stm { background: #252525 !important; border-color: #333 !important; color: #f1f1f1; }
.pds .stm__k { color: var(--pk) !important; } .pds .stm__t, .pds .stm__t em { color: #fff !important; } .pds .stm__q { color: #d8d8d8 !important; border-color: var(--pk) !important; }
.pds figcaption, .pds .lpe figcaption, .pds .video__cap, .pds .vid__cap { color: #bdbdbd !important; }
.pds .ins__h, .pds .lpe__t { color: #fff !important; }
.pds a { color: #fff; }

.p27__a { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); align-items: start; }
@media (min-width: 1000px) { .p27__a { grid-template-columns: 2.1fr 1fr; } }
.p27__ph { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 18px); }
.p27 figure { margin: 0; }
.p27 img { display: block; width: 100%; height: auto; }
.p27__ann { position: relative; }
.p27__ann svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #3a3a3a; stroke-width: .5; }
.p27__lb { position: absolute; font-size: clamp(12px, 1.15vw, 17px); font-weight: 700; color: #3a3a3a; white-space: nowrap; }
.p27__side { display: grid; gap: 16px; justify-items: center; text-align: center; }
.p27__pk { margin: 0; font-size: 15px; font-weight: 500; color: #a8a8a8; line-height: 1.45; }
.p27__poster { width: min(100%, 380px); padding: 12px; background: #fff; border-radius: 22px; }
.p27__poster img { border-radius: 10px; }
.p27__say { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: clamp(16px, 3vw, 40px) 0 0; max-width: 380px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }
.p27__say span { font-size: 1.5em; font-weight: 300; color: #fff; }
.p27__b { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4vw, 56px); align-items: end; }
@media (min-width: 1000px) { .p27__b { grid-template-columns: 2.1fr 1fr; } }
.p27__ex { display: grid; grid-template-columns: auto minmax(90px, 1fr) minmax(150px, 1.2fr) minmax(90px, 1fr); gap: clamp(12px, 2vw, 28px); align-items: center; }
.p27__exk { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 800; }
.p27__vt { margin: 0; color: var(--pk); font-weight: 700; font-size: clamp(18px, 1.8vw, 26px); }
.p27__via svg { display: block; width: 100%; height: 14px; margin: 6px 0 14px; fill: none; stroke: #fff; stroke-width: 2.2; }
.p27__vd { margin: 0; color: #a3a3a3; font-weight: 700; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; }
.p27__vw { display: grid; justify-items: center; }
.p27__vk { margin: 0; font-weight: 700; font-size: 19px; }
.p27__arc { width: 70%; height: auto; margin: 4px 0 10px; fill: none; stroke: #fff; stroke-width: 2.2; }
.p27__vg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.p27__vg figure:nth-child(3) { grid-column: 1 / -1; width: 56%; justify-self: center; }
.p27__q { margin: 0 !important; border: 0; padding: 0; } .p27__q p { margin: 0; color: var(--pk); font-weight: 700; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; max-width: 52em; }
.p27__body { margin: clamp(20px, 2.5vw, 32px) 0 0; max-width: 62em; color: #f1f1f1; font-weight: 600; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
@media (max-width: 640px) { .p27__ex { grid-template-columns: 1fr 1fr; } .p27__exk { grid-column: 1 / -1; } .p27__via { grid-column: 1 / -1; order: 3; } .p27__ex figure:last-child { order: 2; } .p27__ph { grid-template-columns: 1fr; } }
.p27__poster { width: min(100%, 320px); } .p27__side { gap: 12px; }
.p27__say { max-width: 100%; margin-top: 8px; }
.pds .rws--narrow .jrow:nth-child(2) { transform: translateX(-6%); } .pds .rws--narrow .jrow:nth-child(3) { transform: translateX(6%); }
@media (max-width: 760px) { .pds .rws--narrow .jrow { transform: none !important; } }
@media (max-width: 640px) { .p27__say { gap: 10px; padding-inline: 4px; } }
.bk__lk a { color: inherit; text-decoration: underline; text-decoration-color: var(--pdf-gold); text-underline-offset: 3px; }
[data-skin="photo"] .bk__lk a { color: #f2efe9; }
.rws--narrow .jrow:has(img[src*="mpa-page"]) { max-width: 560px; }
/* award cards: each image at its own proportions, no letterbox — laid out as columns */
.grid--aw { display: block !important; columns: 3 300px; column-gap: clamp(20px, 2.5vw, 36px); }
.grid--aw > .card { break-inside: avoid; margin-bottom: clamp(36px, 4vw, 56px); display: block; }
.card__media--fit { background: none !important; }
.card__media--fit img { object-fit: cover !important; }
/* awards contents: thumbnails at their own proportions */
.aix__g { align-items: start; }
.aix__m { aspect-ratio: auto !important; background: none !important; }
.aix__m img { height: auto !important; }
/* Corner of the Wall: no rounded frames; exhibitions as plain text */
[data-skin="paper"] .phero2 img, [data-skin="paper"] .media__img img { border-radius: 0 !important; border: 0 !important; }
[data-skin="paper"] .rws .jrow__i img { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
[data-skin="paper"] .hon { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; max-width: 940px; margin-inline: auto; }
[data-skin="paper"] .hon .ins__h { color: var(--cw-blue) !important; }
[data-skin="paper"] .hon__l { border: 0; }
[data-skin="paper"] .hon__i { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 0 .6em; padding: 6px 0 !important; border: 0 !important; }
[data-skin="paper"] .hon__y { font-weight: 700; color: var(--cw-ink) !important; }
[data-skin="paper"] .hon__i .hon__y::after { display: none !important; }
[data-skin="paper"] .hon__t { margin: 0; font-weight: 700; color: var(--cw-ink) !important; }
[data-skin="paper"] .hon__t a { color: var(--cw-ink) !important; border-bottom-color: var(--cw-blue) !important; }
[data-skin="paper"] .hon__d { margin: 2px 0 0; font-size: 15px; color: #4a4a4a !important; }
[data-skin="paper"] .hon__k:empty { display: none; }
[data-skin="paper"] .vid__box, [data-skin="paper"] .vid__box img, [data-skin="paper"] .vid__box iframe, [data-skin="paper"] .media__img, [data-skin="paper"] .media__img img { border-radius: 0 !important; }
/* Corner hero: blue frame back, slightly smaller radius, slightly larger */
[data-skin="paper"] .phero2 figure { max-width: 1010px; width: 100%; box-sizing: border-box; }
[data-skin="paper"] .phero2 img { border: 2px solid var(--cw-blue) !important; border-radius: 14px !important; }

/* ===== Home after the PDF contents page ===== */
.aix { background: none !important; }
.aix__g { background: var(--pdf-card); }
.aix__l::after { border-right-color: #b7cfdb !important; filter: none !important; }

.ctn { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .ctn { grid-template-columns: minmax(300px, 31%) 1fr; } }
.ctn + .ctn, .logos + .ctn { margin-top: 0; }
.ctn__l { position: relative; background: var(--pdf-navy); color: #fff; }
.ctn__lin { position: relative; padding: clamp(48px, 6vw, 88px) clamp(56px, 5vw, 88px) clamp(48px, 6vw, 88px) clamp(40px, 4.5vw, 80px); }
.ctn__lin::before { content: ""; position: absolute; left: clamp(18px, 2vw, 40px); top: clamp(52px, 6vw, 92px); height: 10.5em; width: 3px; background: var(--pdf-gold); }
@media (min-width: 1000px) {
  .ctn__lin { position: sticky; top: 72px; }
  .ctn__l::after { content: ""; position: absolute; right: 0; top: clamp(120px, 14vw, 200px); border: 30px solid transparent; border-left: 0; border-right: 34px solid #b7cfdb; }
}
.ctn__e { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9aa3ab; }
.ctn__y { margin: 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; color: var(--pdf-gold); }
.ctn__t { margin: 6px 0 0; font-size: clamp(40px, 4.2vw, 62px); font-weight: 800; line-height: 1.02; letter-spacing: .01em; color: var(--pdf-gold); overflow-wrap: anywhere; }
.ctn__n { margin: 10px 0 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; color: #d9dde2; }
.ctn__st { margin: clamp(28px, 3vw, 40px) 0 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: #e6e9ec; }
.ctn__sb { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: #9aa3ab; }
.ctn__r { background: var(--pdf-card); padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 72px); }
.ctn__g { display: grid; grid-template-columns: 1fr; gap: clamp(44px, 5vw, 72px) clamp(24px, 3vw, 44px); max-width: 1180px; }
@media (min-width: 640px) { .ctn__g { grid-template-columns: 1fr 1fr; } .cc--wide { grid-column: 1 / -1; } }
.ctn--aw .ctn__g { display: block; columns: 2 260px; column-gap: clamp(24px, 3vw, 44px); }
.ctn--aw .cc { break-inside: avoid; margin-bottom: clamp(40px, 4.5vw, 64px); }
.cc { position: relative; }
.cc__a { display: block; color: var(--pdf-ink); text-decoration: none; }
.cc__m { position: relative; display: block; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
.cc__m img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.cc__m--fit img { height: auto; object-fit: initial; }
.cc__m .pill { position: absolute; top: 12px; left: 12px; }
.cc__b { position: absolute; right: -12px; bottom: -16px; display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 999px; background: var(--pdf-badge); color: #1b1d1f; font-size: 14.5px; font-weight: 700; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .5); }
.cc__cats { display: flex; gap: 6px; margin-top: 24px; }
.cc__cats .cat { font-size: 12px; }
.cc__k { display: block; margin-top: 24px; font-size: 15.5px; font-weight: 600; color: #8b8d90; line-height: 1.4; }
.cc__cats + .cc__k { margin-top: 10px; }
.cc__t { display: block; margin-top: 4px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; line-height: 1.25; }
.cc--wide .cc__t { font-size: clamp(24px, 2.2vw, 32px); }
.cc__s { display: block; margin-top: 8px; font-size: 16px; line-height: 1.6; color: #3d4247; max-width: 46em; }
.cc .stat-chips { margin-top: 12px; }
.cc .soon { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7177; }
.cc__a:hover .cc__t, .cc__a:focus-visible .cc__t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cc .card__badge { position: absolute; top: 12px; right: 12px; }
@media (max-width: 999px) { .ctn__lin::before { height: 8.5em; } }
/* experience row sits between the first section and the rest, on the page background */
.ctn + .logos { padding-block: clamp(48px, 6vw, 80px); }
.exh { margin-top: 0 !important; }
@media (min-width: 1000px) { .ctn { grid-template-columns: minmax(340px, 32%) 1fr; } }
.ctn__l { container-type: inline-size; }
.ctn__lin { padding-right: clamp(44px, 4vw, 64px); }
.ctn__t { font-size: clamp(28px, 10.4cqi, 62px); white-space: nowrap; overflow-wrap: normal; }
.ctn__lin::before { display: none !important; }
.ctn__h { position: relative; }
.ctn__h::before { content: ""; position: absolute; left: calc(-1 * clamp(22px, 2.4vw, 40px)); top: 4px; bottom: 4px; width: 3px; background: var(--pdf-gold); }

/* ===== Home: original layout, portfolio-PDF visual language ===== */
.ctn { display: none; }
.hero__pf { display: inline-block; margin: 0 0 22px; padding: 2px 0 2px 14px; border-left: 3px solid var(--pdf-gold); font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pdf-ink); }
.hero__pf span { color: #9a7420; }
.hero__title { color: var(--pdf-ink); }
.section-label { display: flex; align-items: center; gap: 12px; color: var(--pdf-ink) !important; font-size: clamp(20px, 1.8vw, 24px) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
.section-label::before { content: ""; flex: none; width: 6px; height: 1.05em; background: var(--pdf-gold); }
.card .meta-line { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #7c7f83; }
.card__title { font-weight: 700; }
.card__nb { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 999px; background: var(--pdf-badge); color: #1b1d1f; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .45); }
.card .stat-chips li { font-weight: 600; }
/* home key visual: the portfolio's light blue → cream gradient */
.hero-band { background: var(--pdf-card); }
.hero-band .hero { padding-bottom: clamp(64px, 9vw, 120px); }
.hero-band + .logos { margin-top: clamp(40px, 5vw, 72px); }

/* ===== Header: Work menu ===== */
.nav__dd { position: relative; }
.nav__btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.nav__btn svg { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
.nav__dd.open .nav__btn svg { transform: rotate(180deg); }
.nav__menu { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 190px; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -14px rgba(12,24,32,.35); transform: translate(-50%, -6px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__dd.open .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--pdf-ink); font-weight: 500; white-space: nowrap; }
.nav__menu a::after { display: none !important; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: #eef1f2; }

/* ===== Home introduction: gradient frame, centred text, drifting bubbles, logo strip ===== */
.hi { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 68px); background: var(--pdf-card); overflow: hidden; }
.hi__stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 560px; padding: 150px clamp(20px, 5vw, 64px); }
.hi__txt { position: relative; z-index: 1; max-width: 760px; color: var(--pdf-ink); }
.hi__h { margin: 0 0 22px; font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--pdf-ink); }
.hi__txt p { margin: 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.65; color: #2c3238; }
.hi__txt p + p { margin-top: 12px; }
.hi__txt p:last-child { margin-top: 22px; font-weight: 600; color: var(--pdf-ink); }
.hi__bb { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bb { --s: clamp(64px, 6.2vw, 88px); position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--pdf-ink); text-decoration: none; pointer-events: auto; box-shadow: 0 10px 24px -14px rgba(12, 24, 32, .45); will-change: transform; }
.bb__tail { position: absolute; inset: 0; transform: rotate(var(--a, 0rad)); pointer-events: none; }
.bb__tail::after { content: ""; position: absolute; top: 50%; right: -9px; margin-top: -8px; border-left: 16px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.bb__e { position: relative; font-size: calc(var(--s) * .46); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.bb__g svg { display: block; width: calc(var(--s) * .44); height: calc(var(--s) * .44); fill: none; stroke: var(--pdf-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bb__g svg .f { fill: var(--pdf-ink); stroke: none; }
.bb__lb { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); padding: 4px 10px; border-radius: 999px; background: var(--pdf-navy); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
a.bb:hover, a.bb:focus-visible { z-index: 3; }
a.bb:hover .bb__lb, a.bb:focus-visible .bb__lb { opacity: 1; transform: translate(-50%, 0); }
a.bb:hover .bb__e, a.bb:hover .bb__g { transform: scale(1.12); transition: transform .2s; }
a.bb:focus-visible { outline: 3px solid var(--pdf-gold); outline-offset: 3px; }
.bb--deco, .bb--off { pointer-events: none; }
.bb--off { opacity: .55; }
@media (max-width: 640px) { .hi__stage { padding: 170px 20px 170px; } .bb { --s: 58px; } .bb__tail::after { right: -7px; border-left-width: 12px; border-top-width: 6px; border-bottom-width: 6px; margin-top: -6px; } }

/* logo strip */
.mq { position: relative; z-index: 2; display: flex; overflow: hidden; padding: 22px 0 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq__t { flex: none; display: flex; align-items: center; gap: clamp(44px, 5vw, 80px); margin: 0; padding: 0 clamp(22px, 2.5vw, 40px); list-style: none; animation: mq 42s linear infinite; }
.mq__t img { display: block; height: clamp(34px, 3.4vw, 50px); width: auto; }
.mq:hover .mq__t { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .mq__t { animation: none; } .mq { overflow-x: auto; } .mq__t[aria-hidden] { display: none; } }

/* section anchors clear the sticky header */
.work .section-label[id] { scroll-margin-top: 92px; }
.nw { white-space: nowrap; }

/* =====================================================================
   Home, round 3 — the portfolio PDF page: navy page, glowing light-gradient
   cards, gold centred titles; logo strip on its own white card below the fold
   ===================================================================== */
body[data-page="home"] { background: var(--pdf-navy); }
body[data-page="home"] .site-header { background: color-mix(in srgb, var(--pdf-navy) 88%, transparent); color: #f2f4f6; }
body[data-page="home"] .site-header.scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
body[data-page="home"] .site-header .wordmark, body[data-page="home"] .nav__btn { color: #f2f4f6; }
body[data-page="home"] .site-header .btn--line { color: #f2f4f6; border-color: rgba(255, 255, 255, .55); }
body[data-page="home"] .site-header .btn--line:hover { background: #f2f4f6; color: var(--pdf-navy); }
:root { --glow: 0 0 44px rgba(255, 255, 255, .13), 0 0 0 1px rgba(255, 255, 255, .06); }

.hi { display: block; min-height: 0; background: none; overflow: visible; padding: clamp(14px, 2vw, 28px) clamp(12px, 2vw, 28px) 0; }
.hi__card { position: relative; min-height: calc(100svh - 68px - clamp(14px, 2vw, 28px) * 2); display: flex; border-radius: 28px; background: var(--pdf-card); box-shadow: var(--glow); overflow: hidden; }
.hi__stage { flex: 1; min-height: 560px; }

.mqb { padding: clamp(56px, 7vw, 96px) clamp(12px, 2vw, 28px) 0; }
.mqb .mq { padding: clamp(26px, 3vw, 40px) 0; border-radius: 22px; background: #fff; box-shadow: var(--glow); -webkit-mask-image: none; mask-image: none; }
.mq__t { gap: clamp(56px, 6vw, 96px); padding: 0 clamp(28px, 3vw, 48px); animation-play-state: paused; }
.mq.run .mq__t { animation-play-state: running; }
.mq:hover .mq__t { animation-play-state: paused !important; }
.mq__t img { height: auto; max-width: none; }

.hwork { padding-top: clamp(24px, 3vw, 40px); }
.hsec { padding-top: clamp(72px, 9vw, 120px); }
.hsec__t { margin: 0 0 clamp(32px, 4vw, 52px); text-align: center; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; color: var(--pdf-gold); scroll-margin-top: 92px; }
.hsec__card { padding: clamp(28px, 4vw, 64px) clamp(18px, 3.5vw, 56px); border-radius: 28px; background: var(--pdf-card); box-shadow: var(--glow); color: var(--pdf-ink); }
.hsec__card .card__media { border-radius: 6px; box-shadow: 0 14px 30px -16px rgba(12, 24, 32, .6); }
.hsec__card .card__sum { color: #39404a; }
.exh { margin-top: clamp(40px, 6vw, 80px) !important; }

/* chips with numbers: solid so they read on the light card; text centred */
.stat-chips li { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; padding: 6px 13px !important; background: var(--pdf-navy) !important; color: #fff; box-shadow: none !important; font-weight: 600; }
/* company / award marks instead of text */
.marks { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.mark { display: grid; place-items: center; height: 44px; padding: 0 12px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 14px -10px rgba(12, 24, 32, .5); }
.mark img { display: block; height: 26px; width: auto; max-width: 120px; object-fit: contain; }
.mark--dark { background: var(--pdf-navy); }
@media (max-width: 640px) { .hi__stage { min-height: 0; } }
body[data-page="home"] .site-header .btn--line { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.mq__t img { height: var(--h, 48px) !important; }
@media (max-width: 640px) { .mq__t img { height: calc(var(--h, 48px) * .62) !important; } .mq__t { gap: 40px; } }
/* logo strip lives at the foot of the introduction card, just below the first screen */
.hi__card { flex-direction: column; min-height: 0 !important; }
.hi__stage { flex: none; min-height: max(560px, calc(100svh - 68px - clamp(14px, 2vw, 28px) * 2)) !important; }
.mqb { position: relative; padding: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 64px); padding-top: 64px !important; }
.mqb__k { margin: 0; padding: 0 0 4px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a8f95; }
.mqb .mq { border-radius: 0 !important; box-shadow: none !important; background: #fff; padding: clamp(22px, 2.6vw, 34px) 0 clamp(34px, 3.6vw, 48px) !important; }
@media (max-width: 640px) { .hi__stage { min-height: 0 !important; } }
/* longer, softer fade from the gradient into the white logo strip */
.mqb { padding-top: clamp(140px, 16vw, 220px) !important; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.5) 46%, rgba(255,255,255,.82) 68%, #fff 88%) !important; }

/* bubbles pop when the logo strip arrives, and are blown up again when it leaves */
.bb { scale: 1; opacity: 1; animation: bb-in .62s cubic-bezier(.34, 1.56, .64, 1) var(--dl, 0ms) both; }
.bb::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid #fff; opacity: 0; pointer-events: none; }
.bb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 -46px 0 #fff, 33px -33px 0 #fff, 46px 0 0 #fff, 33px 33px 0 #fff, 0 46px 0 #fff, -33px 33px 0 #fff, -46px 0 0 #fff, -33px -33px 0 #fff; }
.is-popped .bb { animation: bb-pop .34s ease-out var(--dl, 0ms) both; pointer-events: none; }
.is-popped .bb::before { animation: bb-ring .34s ease-out var(--dl, 0ms) both; }
.is-popped .bb::after { animation: bb-drops .42s ease-out var(--dl, 0ms) both; }
@keyframes bb-pop { 0% { scale: 1; opacity: 1; } 45% { scale: 1.18; opacity: 1; } 100% { scale: 1.32; opacity: 0; } }
@keyframes bb-ring { 0% { opacity: 0; transform: scale(1); } 40% { opacity: .9; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes bb-drops { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes bb-in { 0% { scale: .15; opacity: 0; } 60% { scale: 1.08; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bb, .is-popped .bb { animation: none; transition: opacity .3s; } .is-popped .bb { opacity: 0; } .is-popped .bb::before, .is-popped .bb::after { animation: none; } }
.bb { will-change: left, top, scale, opacity; }
/* card logos: cut-outs straight on the card, no boxes */
.mark { height: auto !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.mark img { height: 30px; max-width: 170px; }
.marks { gap: 22px; align-items: center; margin-top: 18px; }
/* featured cards: text starts near the top of the image instead of floating in the middle */
.hsec__card .card--feature .card__link { align-items: start !important; }
.hsec__card .card--feature .card__body { padding-top: clamp(4px, 1vw, 16px); }
/* shorter run from the introduction to the logo strip */
.hi__stage { min-height: max(520px, calc(100svh - 68px - clamp(14px, 2vw, 28px) * 2 - 150px)) !important; padding-bottom: 40px !important; }
.mqb { padding-top: clamp(90px, 9vw, 130px) !important; }
/* titles line up across a row: the category chip sits on the photo, like the Shipped tag */
.card__link { position: relative; }
.card__cats { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0 !important; }
.card__cats .cat { box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .4); }
.card__media .pill ~ * {}
.card:has(.pill) .card__cats { top: 54px; }
/* filler bubble for an empty grid cell */
.card-fill { display: grid; place-items: center; min-height: 280px; }
.bb--fill { position: relative !important; left: auto !important; top: auto !important; --s: clamp(120px, 12vw, 168px); --a: 2.4rad; animation: fill-bob 5s ease-in-out infinite !important; pointer-events: none; }
.bb--fill .bb__tail { transform: rotate(var(--a)); }
@keyframes fill-bob { 50% { translate: 0 -10px; } }
@media (max-width: 639px) { .card-fill { display: none; } }
@media (prefers-reduced-motion: reduce) { .bb--fill { animation: none !important; } }
.bb__i { position: relative; display: block; width: calc(var(--s) * .46); height: auto; border-radius: 22%; }
a.bb:hover .bb__i { transform: scale(1.12); transition: transform .2s; }
/* bubbles a little smaller, so the frame feels less crowded */
.bb:not(.bb--fill) { --s: clamp(54px, 5.1vw, 74px); }
@media (max-width: 640px) { .bb:not(.bb--fill) { --s: 50px; } }
/* bubbles a touch smaller; press-and-hold to drag */
.bb { --s: clamp(54px, 5.2vw, 74px); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.bb.is-drag { cursor: grabbing; z-index: 4; scale: 1.1; box-shadow: 0 18px 34px -14px rgba(12, 24, 32, .55); transition: scale .15s; }
.bb.is-drag .bb__lb { opacity: 0 !important; }
.bb--deco { pointer-events: auto !important; cursor: grab; }
@media (max-width: 640px) { .bb { --s: 50px; } }
/* first screen fits exactly: the gradient card fills the viewport and its fade ends right at the fold,
   so the white logo strip never peeks in, at any window size or zoom */
.hi { --hdr: 68px; --pad: clamp(14px, 2vw, 28px); --fade: clamp(90px, 9vw, 130px); }
.hi__stage { height: calc(100svh - var(--hdr) - var(--pad)); min-height: 440px !important; padding: clamp(24px, 4vh, 64px) clamp(20px, 5vw, 64px) var(--fade) !important; box-sizing: border-box; }
.mqb { margin-top: calc(-1 * var(--fade)); padding-top: var(--fade) !important; pointer-events: none; z-index: 1; }
.mqb .mq { pointer-events: auto; }
.hi__bb { z-index: 3; }
.hi__txt { z-index: 2; }
@media (max-width: 640px) { .hi__stage { height: auto; min-height: calc(100svh - var(--hdr) - var(--pad)) !important; padding-top: 150px !important; padding-bottom: calc(var(--fade) + 90px) !important; } }
.drow { border-radius: 0 !important; }
/* p27: poster removed (it heads the page already); the statement sits centred beside the photos, with room before "Exhibition" */
.p27__side { align-self: center; }
.p27__say { margin: 0 !important; }
.p27__b { margin-top: clamp(48px, 6vw, 88px) !important; }
.p27__vk { margin-top: 0; }
/* "via Photoshop or AI …" stays on one line */
.p27__ex { grid-template-columns: auto minmax(90px, 1fr) minmax(min-content, 1.35fr) minmax(90px, 1fr) !important; }
.p27__vt { white-space: nowrap; font-size: clamp(16px, 1.45vw, 22px) !important; }
@media (max-width: 640px) { .p27__vt { white-space: normal; } }
.p27__q { margin-top: clamp(48px, 6vw, 80px) !important; }
/* footer: one quiet line */
.site-footer { background: var(--pdf-navy); color: #e8ebee; border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer__in { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 28px !important; }
.site-footer__small { margin: 0; font: 500 14px var(--f-sans) !important; color: #9aa3ab !important; }
.site-footer__links { display: flex; gap: 10px 28px; margin: 0; padding: 0; list-style: none; font-size: 15px !important; }
.site-footer__links a { color: #e8ebee; text-decoration: none; }
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--pdf-gold); }
/* a page ending in a dark section runs straight into "Next project" */
.project .pbody:has(> .pds:last-child) { padding-bottom: 0 !important; }
.pbody > .pds:last-child { margin-bottom: 0 !important; }
/* logo strip: the white begins exactly where the logos' band begins, with equal space above and below */
.mqb { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.55) 52%, rgba(255,255,255,.85) 76%, #fff 100%) top / 100% calc(var(--fade) + 1px) no-repeat, linear-gradient(#fff, #fff) bottom / 100% calc(100% - var(--fade) + 1px) no-repeat !important; }
.mqb .mq { padding: clamp(30px, 3.2vw, 44px) 0 !important; align-items: center; }
.mq__t { align-items: center; }
/* Corner of the Wall: lighter, cleaner page; text colours darkened to pass WCAG AA (≥ 4.5:1) */
[data-skin="paper"] { --cw-bg: #f2f2f0; --cw-blue: #2f6580; --cw-pink: #c22e4c; --cw-ink: #222; }
[data-skin="paper"] .site-header { background: rgba(242, 242, 240, .92) !important; }
[data-skin="paper"] .phead2__t, [data-skin="paper"] .artw__t { color: #4a4a4a !important; }
[data-skin="paper"] .bk__t { color: #333 !important; }
[data-skin="paper"] .rws .jrow__i img { border-color: #fff !important; }
/* contrast fixes (WCAG AA) */
.pfin__ls b { color: #fff !important; text-decoration: underline; text-decoration-color: #ffc065; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.pd__rl { color: #5f6a5d !important; }
.pd__lab.is-snap { transition: none !important; }
/* page change: the new page fades in on top while the old one stays put underneath, so what both pages share never dims */
.pd__pg.is-on { z-index: 1; }
.pd__pg:not(.is-on) { transition: opacity 0s .5s, visibility 0s .5s !important; }
.pd__pg:not(.is-on) .pd__g { transition: opacity 0s .5s !important; }
/* the header's diagonal continues the orange/purple split of the photo below it, at the photo's own slope (~9°) */
[data-skin="menu"] .phead2::before { inset: 0 -100% 0 44.3% !important; transform-origin: 0 100% !important; transform: skewX(9.1deg) !important; clip-path: none !important; }
/* process steps (HP) */
.proc { list-style: none; margin: clamp(28px, 3vw, 40px) auto 0 !important; padding: 0; max-width: 940px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.proc li { display: grid; gap: 4px; align-content: start; padding: 16px 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5e8; }
.proc__n { font-size: 13px; font-weight: 700; color: #0072a3; }
.proc b { font-size: 17px; }
.proc li > span:last-child { font-size: 14.5px; line-height: 1.45; color: #4a4f55; }
.bk__k { color: #5f6368 !important; } [data-skin="photo"] .bk__k { color: #b3ada3 !important; } [data-skin="paper"] .bk__k { color: var(--cw-blue) !important; }
/* HP: the hero photo is shown whole, never cropped */
[data-skin="hp"] .phero2 img { aspect-ratio: auto !important; height: auto; object-fit: initial; }
[data-skin="hp"] .phero2 { background: #1f1f1f; }
[data-skin="hp"] .phero2 figure:hover img { transform: none; }
[data-skin="hp"] .rws--narrow .jrow { max-width: 900px; }
[data-skin="hp"] .rws .jrow__i img { border-radius: 8px; box-shadow: inset 0 0 0 1px #e3e5e8; background: #fff; }

/* ===== HP case study: stats, parts map, phases, CMF chain ===== */
.pmeta2:empty { display: none; }
.sts { margin: clamp(40px, 5vw, 64px) auto 0 !important; max-width: 1100px; }
.sts__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: #d9dcdf; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px #d9dcdf; }
.sts__l li { display: grid; gap: 6px; align-content: start; padding: 26px 24px 28px; background: #fff; }
.sts__l b { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #1f1f1f; }
.sts__l span { font-size: 15.5px; line-height: 1.45; color: #4a4f55; }
.sts__n { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: #3d4247; max-width: 60em; }
.pmp, .phs { margin: clamp(64px, 8vw, 112px) auto 0 !important; max-width: 1180px; }
.pmp__h { margin: 0 0 18px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; }
.pmp__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pmp__tabs button { padding: 9px 18px; border-radius: 999px; border: 0; background: #e7e9ec; color: #1f1f1f; font: 600 15px var(--f-sans); cursor: pointer; }
.pmp__tabs button[aria-selected="true"] { background: #1f1f1f; color: #fff; }
.pmp__v { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .pmp__v { grid-template-columns: 1.45fr 1fr; } }
.pmp__fig { position: relative; margin: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5e8; overflow: hidden; }
.pmp__fig img { display: block; width: 100%; height: auto; }
.pmp__pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font: 700 13px var(--f-sans); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .15s; }
.pmp__pin.is-hl, .pmp__pin:hover, .pmp__pin:focus-visible { transform: scale(1.25); outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.4); }
.pmp__pin--cmf { background: #b4561d; } .pmp__pin--mech { background: #0b5f8a; } .pmp__pin--ux { background: #2f7d4b; } .pmp__pin--val { background: #6b4fa3; }
.pmp__lg { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pmp__lg li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background .15s; }
.pmp__lg li.is-hl { background: #eef0f2; }
.pmp__num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12.5px; font-weight: 700; }
.pmp__t { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.pmp__d { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: #3d4247; }
.pmp__k { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
.pmp__k--cmf { background: #fbe9dc; color: #7a3510; } .pmp__k--mech { background: #dcebf4; color: #0a4a6b; } .pmp__k--ux { background: #dff0e5; color: #1f5a35; } .pmp__k--val { background: #ebe4f6; color: #4c3580; }
.pmp__x { margin-top: 28px; padding: 22px 24px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5e8; }
.pmp__x h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5f6368; }
.pmp__x ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; }
.phs__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; counter-reset: ph; }
.phs__l li { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 0 0; border-top: 3px solid #1f1f1f; }
.phs__l li::before { content: ""; position: absolute; left: 0; top: -9px; width: 15px; height: 15px; border-radius: 50%; background: #1f1f1f; box-shadow: 0 0 0 4px var(--bg, #f7f6f3); }
.phs__l li:last-child { border-top-color: #0072a3; } .phs__l li:last-child::before { background: #0072a3; }
.phs__l b { font-size: 20px; } .phs__l span { font-size: 15px; line-height: 1.5; color: #3d4247; }
.chn { list-style: none; margin: clamp(24px, 3vw, 36px) auto 0 !important; padding: 0; max-width: 940px; display: flex; flex-wrap: wrap; gap: 10px 0; align-items: center; }
.chn li { padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d9dcdf; font-weight: 600; font-size: 15.5px; }
.chn li + li::before { content: "→"; margin: 0 14px 0 -4px; position: relative; left: -16px; color: #7a3510; font-weight: 700; }
.chn li + li { margin-left: 30px; }
.pmp__v[hidden] { display: none !important; }
/* parts map: the three views stacked, alternating sides */
.pmp--stack .pmp__v { grid-template-columns: 1fr; gap: 24px 48px; padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid #dfe1e4; }
.pmp--stack .pmp__v:first-of-type { border-top: 0; padding-top: 8px; }
@media (min-width: 1000px) {
  .pmp--stack .pmp__v { grid-template-columns: 1.5fr 1fr; grid-template-areas: "h h" "f l"; }
  .pmp--stack .pmp__v--rev { grid-template-columns: 1fr 1.5fr; grid-template-areas: "h h" "l f"; }
  .pmp--stack .pmp__vh { grid-area: h; } .pmp--stack .pmp__fig { grid-area: f; } .pmp--stack .pmp__lg { grid-area: l; align-self: center; }
}
.pmp__vk { display: block; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5f6368; }
.pmp__vt { margin: 4px 0 0; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.2; }
/* chain: pills and arrows as separate items */
.chn { gap: 10px 12px !important; }
.chn li + li { margin-left: 0 !important; }
.chn li + li::before { content: none !important; }
.chn__a { padding: 0 !important; background: none !important; box-shadow: none !important; display: flex; align-items: center; }
.chn__a svg { width: 36px; height: 12px; fill: none; stroke: #7a3510; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* timelines draw in from left to right when they come into view */
.chn.reveal, .phs.reveal { opacity: 1 !important; transform: none !important; }
.chn > li { opacity: 0; transform: translateX(-14px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 120ms); }
.chn.in > li { opacity: 1; transform: none; }
.phs__l li { border-top-color: transparent !important; }
.phs__l li::after { content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 100%; background: #1f1f1f; transform: scaleX(0); transform-origin: left; transition: transform .45s ease; transition-delay: calc(var(--i) * 320ms); }
.phs__l li:last-child::after { background: #0072a3; }
.phs__l li::before { transform: scale(0); transition: transform .3s ease; transition-delay: calc(var(--i) * 320ms); z-index: 1; }
.phs__l li > * { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i) * 320ms + 120ms); }
.phs.in .phs__l li::after { transform: scaleX(1); } .phs.in .phs__l li::before { transform: scale(1); } .phs.in .phs__l li > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .chn > li, .phs__l li > *, .phs__l li::after, .phs__l li::before { transition: none !important; opacity: 1 !important; transform: none !important; } }

/* ===== Byte: worldview chain and iteration timeline ===== */
.lore { list-style: none; margin: clamp(32px, 4vw, 52px) auto 0 !important; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.lore__i { position: relative; padding: 22px 24px 24px; border-radius: 16px; background: #1b171c; box-shadow: inset 0 0 0 1px #352c34; opacity: 0; transform: translateX(-16px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i) * 150ms); }
.lore.in .lore__i { opacity: 1; transform: none; }
.lore__n { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: #f7a146; }
.lore__i h4 { margin: 6px 0 8px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; color: #f3e3c3; }
.lore__i p { margin: 0; font-size: 16px; line-height: 1.6; color: #d9d2cc; }
.lore__i em { font-style: normal; font-weight: 700; color: #ffb3d4; }
.lore__i:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); z-index: 1; color: #f7a146; font-weight: 700; }
.lore__i.is-twist { background: linear-gradient(150deg, #3a1230, #1b171c 70%); box-shadow: inset 0 0 0 1px #8f1150, 0 0 32px -10px #8f1150; }
@media (max-width: 760px) { .lore__i:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -17px; transform: translateX(-50%); } }
.itr { margin: clamp(48px, 6vw, 80px) auto clamp(40px, 5vw, 64px) !important; max-width: 1180px; }
.itr__h { margin: 0 0 26px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; color: #f3e3c3; }
.itr__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px 0; }
.itr__l li { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 18px 0 0; }
.itr__l li::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #6c5e68; transform: scaleX(0); transform-origin: left; transition: transform .45s ease; transition-delay: calc(var(--i) * 300ms); }
.itr__l li::before { content: ""; position: absolute; left: 0; top: -6px; z-index: 1; width: 15px; height: 15px; border-radius: 50%; background: #f3e3c3; transform: scale(0); transition: transform .3s ease; transition-delay: calc(var(--i) * 300ms); }
.itr__l li > * { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i) * 300ms + 120ms); }
.itr.in .itr__l li::after { transform: scaleX(1); } .itr.in .itr__l li::before { transform: scale(1); } .itr.in .itr__l li > * { opacity: 1; transform: none; }
.itr__w { font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: #f7a146; }
.itr__l b { font-size: 19px; color: #f3e3c3; }
.itr__d { font-size: 15px; line-height: 1.55; color: #d9d2cc; }
.itr__l li.is-key::before { background: #ff5fa2; box-shadow: 0 0 0 5px rgba(255, 95, 162, .25); }
.itr__l li.is-key b { color: #ffb3d4; }
.itr__l li.is-key b::after { content: " · turning point"; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: #ff8cc0; }
@media (prefers-reduced-motion: reduce) { .lore__i, .itr__l li > *, .itr__l li::before, .itr__l li::after { transition: none !important; opacity: 1 !important; transform: none !important; } }
.itr__l li.is-key b::after { content: none; }
.itr__l li.is-key .itr__w::after { content: "Turning point"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #ff5fa2; color: #1b0a14; font-size: 11.5px; letter-spacing: .04em; }
.qls { list-style: none; margin: 18px auto 0 !important; padding: 0; max-width: 760px; display: grid; gap: 10px; }
.qls li { display: grid; grid-template-columns: 5.2em 1fr; gap: 14px; align-items: baseline; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: #d9d2cc; }
.qls b { color: #ff8cc0; font-weight: 700; }
.lore__i { display: flex; flex-direction: column; }
.lore__f { margin: auto 0 0 !important; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.lore__f span:not(.sr) { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #ff8cc0; box-shadow: inset 0 0 0 1px #6b2a4b; }
.lore__f span:not(.sr)::before { content: "↖ "; opacity: .8; }
@media (min-width: 1061px) { .lore__i:nth-child(3n)::after { content: none !important; } }
.qls2 { margin: clamp(28px, 3.5vw, 44px) auto 0 !important; max-width: 1180px; text-align: center; }
.qls2__h { margin: 0 0 18px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; color: #f3e3c3; }
.qls2__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.qls2__l li { display: grid; gap: 4px; padding: 16px 12px 18px; border-radius: 14px; background: #1b171c; box-shadow: inset 0 0 0 1px #352c34; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 110ms); }
.qls2.in .qls2__l li { opacity: 1; transform: none; }
.qls2__l b { font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: #ff8cc0; }
.qls2__l span { font-size: 15.5px; line-height: 1.4; color: #d9d2cc; }
.qls2__n { margin: 34px 0 0; font-size: 15px; color: #b8aeb4; }
@media (max-width: 760px) { .qls2__l { grid-template-columns: 1fr 1fr; } .qls2__l li:last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .qls2__l li { opacity: 1; transform: none; transition: none; } }

/* ===== Byte final works: each ritual object explained, then the reel beside the closing text ===== */
.fin3 { margin-top: clamp(56px, 6vw, 80px) !important; margin-inline: calc(50% - min(680px, 50vw - 24px)); }
@media (max-width: 999px) { .fin3 { margin-inline: 0; } }
.fin3__h { margin: 0 0 clamp(24px, 3vw, 40px); font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; color: #f3e3c3; }
.fin3__w { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 72px); }
.fin3__o { display: grid; grid-template-columns: 1fr; gap: 22px 44px; align-items: center; }
@media (min-width: 900px) { .fin3__o { grid-template-columns: 1.15fr 1fr; } .fin3__o.is-rev figure { order: 2; } }
.fin3__o figure { margin: 0; border-radius: 14px; overflow: hidden; }
.fin3__o img { display: block; width: 100%; height: auto; }
.fin3__k { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f7a146; }
.fin3__tx h4 { margin: 6px 0 18px; font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; color: #f3e3c3; }
.fin3__tx h4 span { font-weight: 500; color: #b8aeb4; font-size: .8em; }
.fin3__dl { margin: 0; display: grid; gap: 14px; }
.fin3__dl div { padding: 14px 16px; border-radius: 12px; background: #1b171c; box-shadow: inset 0 0 0 1px #352c34; }
.fin3__dl div:last-child { box-shadow: inset 0 0 0 1px #6b2a4b; background: linear-gradient(150deg, #2a1424, #1b171c 70%); }
.fin3__dl dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9fb8c2; }
.fin3__dl div:last-child dt { color: #ff8cc0; }
.fin3__dl dd { margin: 4px 0 0; font-size: 16px; line-height: 1.6; color: #e4ddd6; }
.fin3__m { margin: 14px 0 0; font-size: 15px; color: #c9c0c6; }
.fin3__m span { font-weight: 700; color: #f7a146; margin-right: 4px; }
.fin3__band { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: 1fr; gap: 32px 48px; align-items: center; }
@media (min-width: 900px) { .fin3__band { grid-template-columns: minmax(260px, 30%) 1fr; } }
.fin3__reel { margin: 0; width: min(100%, 380px); justify-self: center; }
.fin3__reel video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: #000; }
.fin3__reel figcaption { margin-top: 8px; font-size: 14px; color: #b8aeb4; text-align: center; }
.fin3__end .fin__box { margin-top: 24px; }
.fin3__reel { display: block !important; background: none !important; border-radius: 0 !important; overflow: visible !important; } .fin3__reel video { width: 100% !important; height: auto !important; max-height: none !important; }
/* ritual objects, in the portfolio PDF's language: 2 × 2 photos, italic captions, orange / magenta pills */
.fin3__h { font-weight: 300 !important; font-size: clamp(26px, 2.6vw, 34px) !important; letter-spacing: .01em; }
.fin4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4vw, 52px) clamp(20px, 2.4vw, 32px); }
@media (min-width: 760px) { .fin4 { grid-template-columns: 1fr 1fr; } }
.fin4__o figure { margin: 0 0 14px; }
.fin4__o img { display: block; width: 100%; height: auto; }
.fin4__o figcaption { margin-top: 8px; font-size: 15px; font-style: italic; color: #e4ddd6; }
.fin4__r { margin: 10px 0 0; display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; align-items: baseline; font-size: 15.5px; line-height: 1.6; color: #e4ddd6; }
.fin4__p { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #1a1012; }
.fin4__p--g { background: #f7a146; } .fin4__p--c { background: #ff7fb8; }
.fin4__m { margin: 12px 0 0; padding-left: calc(4.6em + 10px); font-size: 14px; font-style: italic; color: #b8aeb4; }
.fin4__m::before { content: "Made from "; font-style: normal; font-weight: 600; color: #c9c0c6; }
/* ritual objects: four narrower columns, quieter type */
@media (min-width: 1100px) { .fin4 { grid-template-columns: repeat(4, 1fr) !important; gap: 0 22px !important; } }
@media (min-width: 640px) and (max-width: 1099px) { .fin4 { grid-template-columns: 1fr 1fr !important; gap: 36px 22px !important; } }
.fin4 { counter-reset: ro; }
.fin4__o { counter-increment: ro; display: flex; flex-direction: column; padding-top: 14px; border-top: 1px solid #3a3238; }
.fin4__o::before { content: counter(ro, decimal-leading-zero); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: #f7a146; margin-bottom: 10px; }
.fin4__o figure { margin: 0 0 12px !important; }
.fin4__o img { border-radius: 4px; }
.fin4__o figcaption { margin-top: 10px !important; font-size: 14.5px !important; color: #f3e3c3 !important; }
.fin4__r { grid-template-columns: 1fr !important; gap: 4px !important; margin-top: 12px !important; font-size: 14px !important; line-height: 1.55 !important; color: #d9d2cc !important; }
.fin4__p { font-size: 11px !important; padding: 1px 8px !important; letter-spacing: .06em !important; text-transform: uppercase; }
.fin4__m { margin-top: auto !important; padding: 14px 0 0 !important; font-size: 13px !important; }
.fin3__reel { width: min(100%, 320px) !important; } @media (min-width: 900px) { .fin3__band { grid-template-columns: 320px 1fr !important; } }

/* ===== Byte worldview, in the project's own visual language (orange pills, peach card, magenta) ===== */
.qls3 { margin: clamp(28px, 3.5vw, 44px) auto 0 !important; text-align: center; }
.qls3__h { margin: 0 0 22px; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: .03em; color: #f3e3c3; }
.qls3__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; }
.qls3__l li { display: grid; justify-items: center; gap: 12px; width: 150px; }
.qls3__l .pill2 { font-size: 17px; }
.qls3__t { font-size: 15px; line-height: 1.45; letter-spacing: .02em; color: #e4ddd6; }

.lore2 { margin: clamp(40px, 5vw, 64px) auto 0 !important; max-width: 1180px; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: #f6d6bd; color: #1d1a17; }
.lore2__k { display: inline-block; margin: 0 0 26px; padding: 10px 26px; border-radius: 999px; background: #c2177f; color: #fff; font-style: italic; font-size: clamp(22px, 2vw, 28px); }
.lore2__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lore2__r { display: grid; grid-template-columns: minmax(200px, 23%) 1fr; gap: 14px 30px; align-items: center; opacity: 0; transform: translateX(-14px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 140ms); }
.lore2.in .lore2__r { opacity: 1; transform: none; }
.lore2__b { position: relative; display: grid; place-items: center; min-height: 64px; padding: 12px 18px; border-radius: 22px; background: #b85a00; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.3; text-align: center; box-shadow: 0 8px 18px rgba(120,60,0,.22); }
.lore2__b::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -8px; border-left: 10px solid #b85a00; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.lore2__r.is-twist .lore2__b { background: #c2177f; } .lore2__r.is-twist .lore2__b::after { border-left-color: #c2177f; }
.lore2__tx p { margin: 0; font-size: clamp(15.5px, 1.25vw, 17px); line-height: 1.6; letter-spacing: .02em; color: #1d1a17; }
.lore2__tx em { font-style: normal; font-weight: 700; color: #a3125f; }
.lore2__f { margin-top: 4px !important; font-size: 14px !important; font-weight: 600; color: #a3125f !important; }
.lore2__f::before { content: "← "; }
@media (max-width: 760px) { .lore2__r { grid-template-columns: 1fr; } .lore2__b { justify-self: start; } .lore2__b::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .lore2__r { opacity: 1; transform: none; transition: none; } }
.lore2__tx em, .lore2 .lore2__tx p em { color: #a3125f !important; background: none !important; text-decoration: none !important; padding: 0 !important; }
.qch { margin: clamp(32px, 4vw, 52px) auto 0 !important; max-width: 1180px; padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 64px); border-radius: 28px; background: #1b1a1c; box-shadow: inset 0 0 0 1px #2c2a2e; }
.qch__h { margin: 0 0 clamp(24px, 3vw, 36px); font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: .02em; color: #f3e3c3; text-align: center; }
.qch__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.qch__l li { display: grid; grid-template-columns: minmax(220px, 24%) 1fr; gap: 14px 32px; align-items: center; }
.qch__q { position: relative; display: grid; place-items: center; min-height: 60px; padding: 10px 18px; border-radius: 22px; background: #b85a00; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.3; text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.qch__q::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -8px; border-left: 10px solid #b85a00; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.qch__s { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-weight: 600; font-size: clamp(15px, 1.2vw, 17px); letter-spacing: .07em; color: #f4f1ec; }
.qch__s .is-end { color: #ff7fb8; }
.qch__a { color: #cfc6c0; font-weight: 400; }
.qch__s > span:not(.qch__a) { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i) * 120ms + var(--k, 0) * 160ms); }
.qch__s > .qch__a { opacity: 0; transition: opacity .45s ease; transition-delay: calc(var(--i) * 120ms + 200ms); }
.qch.in .qch__s > span { opacity: 1; transform: none; }
.qch__n { margin: 26px 0 0; font-size: 14px; color: #b8aeb4; text-align: center; }
@media (max-width: 760px) { .qch__l li { grid-template-columns: 1fr; } .qch__q { justify-self: start; } .qch__q::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .qch__s > span { opacity: 1 !important; transform: none !important; transition: none !important; } }
.qch__a { font-size: 1.35em; line-height: 1; color: #e4ddd6 !important; }
.qch__a { font-size: 1.9em !important; position: relative; top: .08em; }
.qch__l { gap: 0 !important; }
.qch__l li { grid-template-areas: "q s" ". d"; padding: 20px 0; border-top: 1px solid #2f2c31; }
.qch__l li:first-child { border-top: 0; padding-top: 0; }
.qch__q { grid-area: q; } .qch__s { grid-area: s; }
.qch__d { grid-area: d; max-width: 62em; }
.qch__d p { margin: 0; font-size: 15.5px; line-height: 1.65; letter-spacing: .01em; color: #cfc6c0; }
.qch__d p + p { margin-top: 6px; }
.qch__d em { font-style: normal; font-weight: 700; color: #ff7fb8; background: none !important; padding: 0 !important; text-decoration: none !important; }
@media (max-width: 760px) { .qch__l li { grid-template-areas: "q" "s" "d"; } }
/* circles guide to the answers: each circle links to its answer, which carries only the matching word + the text */
.qls3__a { display: grid; justify-items: center; gap: 12px; color: inherit; text-decoration: none; }
.qls3__a:hover .pill2, .qls3__a:focus-visible .pill2 { transform: translateY(-4px) scale(1.05); }
.qls3__l { position: relative; }
.qch2 { margin: clamp(24px, 3vw, 40px) auto 0 !important; max-width: 900px; }
.qch2__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px dashed #6c5e68; margin-left: 30px !important; }
.qch2__l li { position: relative; display: grid; grid-template-columns: 1fr; padding: 18px 0 18px 46px; scroll-margin-top: 110px; opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 130ms); }
.qch2.in .qch2__l li { opacity: 1; transform: none; }
.qch2__k { position: absolute; left: -31px; top: 14px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent-2, #f7a146); color: #1d1500; font-weight: 700; font-size: 13.5px; box-shadow: 0 6px 16px rgba(247,161,70,.3); }
.qch2__d { padding-top: 4px; }
.qch2__d p { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; color: #e4ddd6; }
.qch2__d p + p { margin-top: 8px; }
.qch2__d em { font-style: normal; font-weight: 700; color: #ff7fb8; background: none !important; padding: 0 !important; text-decoration: none !important; }
.qch2__l li:target .qch2__k { box-shadow: 0 0 0 6px rgba(247,161,70,.35); }
@media (prefers-reduced-motion: reduce) { .qch2__l li { opacity: 1; transform: none; transition: none; } }
.qch2__l li { min-height: 92px; padding-block: 16px 22px !important; } .qch2__k { width: 54px !important; height: 54px !important; left: -28px !important; top: 16px !important; }
/* ===== Byte worldview: question → research end points → answer, one column each ===== */
.wv5 { margin: clamp(28px, 3.5vw, 44px) auto 0 !important; max-width: 1240px; }
.wv5__h { margin: 0 0 28px; text-align: center; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: .03em; color: #f3e3c3; }
.wv5__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.wv5__l li { display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; padding: 0 16px; border-left: 1px solid #2f2c31; opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i) * 140ms); }
.wv5__l li:first-child { border-left: 0; }
.wv5.in .wv5__l li { opacity: 1; transform: none; }
.wv5__q { display: grid; justify-items: center; gap: 10px; text-align: center; min-height: 150px; }
.wv5__q p { margin: 0; font-size: 15px; color: #e4ddd6; }
.wv5__f { width: 100%; margin-top: 14px; padding: 12px 10px; border-radius: 14px; background: #1b1a1c; text-align: center; min-height: 104px; }
.wv5__fl { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a9196; }
.wv5__fk { margin: 0; display: grid; gap: 3px; }
.wv5__fk span { font-size: 14px; font-weight: 600; letter-spacing: .05em; color: #ff7fb8; }
.wv5__ar { display: block; margin: 8px 0; } .wv5__ar svg { width: 14px; height: 30px; fill: none; stroke: #f7a146; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wv5__d { text-align: left; }
.wv5__d p { margin: 0; font-size: 15px; line-height: 1.65; color: #e4ddd6; }
.wv5__d p + p { margin-top: 8px; }
.wv5__d em { font-style: normal; font-weight: 700; color: #f7a146; background: none !important; padding: 0 !important; text-decoration: none !important; }
@media (max-width: 999px) { .wv5__l { grid-template-columns: 1fr; gap: 28px; } .wv5__l li { border-left: 0; grid-template-columns: 110px 1fr; grid-template-rows: auto; justify-items: start; gap: 6px 16px; padding: 0; } .wv5__q { grid-row: span 3; min-height: 0; } .wv5__f { min-height: 0; text-align: left; } .wv5__ar { display: none; } }
@media (prefers-reduced-motion: reduce) { .wv5__l li { opacity: 1; transform: none; transition: none; } }
.wv5__f { min-height: 124px !important; } .wv5 .wv5__d p em { color: #f7a146 !important; }
@media (max-width: 999px) { .wv5__f { min-height: 0 !important; } .wv5__q p { font-size: 14px; } }
/* worldview reads like the research timeline above: one row per question, left to right
   (question → research end points → worldview) */
.wv5__l { grid-template-columns: 1fr !important; gap: 0 !important; }
.wv5__l li { grid-template-columns: minmax(230px, 22%) minmax(220px, 22%) 40px 1fr !important; grid-template-rows: auto !important; align-items: center !important; justify-items: stretch !important; gap: 0 18px !important; padding: 22px 0 !important; border-left: 0 !important; border-top: 1px solid #2f2c31; transform: translateX(-12px); }
.wv5__l li:first-child { border-top: 0; }
.wv5__q { grid-row: auto !important; display: flex !important; align-items: center; gap: 14px !important; min-height: 0 !important; text-align: left !important; }
.wv5__q .pill2 { flex: none; min-width: 78px !important; height: 78px !important; font-size: 15px !important; }
.wv5__q p { font-size: 15.5px !important; }
.wv5__f { margin: 0 !important; min-height: 0 !important; text-align: left !important; padding: 12px 14px !important; }
.wv5__ar { display: block !important; margin: 0 !important; justify-self: center; }
.wv5__ar svg { width: 30px !important; height: 14px !important; transform: none; }
.wv5__d p { font-size: 16px !important; }
@media (max-width: 999px) { .wv5__l li { grid-template-columns: 1fr !important; gap: 12px !important; } .wv5__ar { display: none !important; } }
html[data-theme="dark"]:not([data-skin]) .phero2 img { aspect-ratio: auto; height: auto; object-fit: initial; }
.hi__txt u { text-decoration: none; background: linear-gradient(var(--pdf-gold, #e3b44c), var(--pdf-gold, #e3b44c)) 0 92% / 100% 3px no-repeat; padding-bottom: 1px; font-weight: 600; color: var(--pdf-ink); }
.hi__txt u { text-decoration: none !important; }
.hi__txt u { background-image: linear-gradient(#2a6496, #2a6496) !important; }
.hi__txt u { background: none !important; padding: 0 !important; color: #2a6496 !important; font-weight: 700 !important; }
.mq:hover .mq__t, .mq.run:hover .mq__t { animation-play-state: running !important; } .mq:not(.run):hover .mq__t { animation-play-state: paused !important; }
.hi__hint { display: block; margin-top: 18px; font-size: 15px; font-style: italic; color: #5f6870; }
.hi__txt p:last-of-type { margin-top: 22px; font-weight: 600; color: var(--pdf-ink); }
/* bump score */
.bb-plus { position: absolute; z-index: 5; transform: translate(-50%, -50%); font-weight: 800; font-size: 20px; color: #2a6496; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; pointer-events: none; animation: bb-plus .9s ease-out forwards; }
@keyframes bb-plus { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(1); } }
.bb-score { position: absolute; right: clamp(16px, 2vw, 28px); top: clamp(14px, 2vw, 24px); z-index: 4; margin: 0; padding: 6px 14px; border-radius: 999px; background: #fff; color: #2a6496; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px -10px rgba(12,24,32,.5); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.bb-score.is-on { opacity: 1; transform: none; }
.bb-score.pop { animation: bb-score .35s ease-out; }
@keyframes bb-score { 40% { transform: scale(1.12); } }
.hi.is-popped .bb-score { opacity: 0; }
/* logo strip: keep the moving band on its own GPU layer so it never waits on the bubbles or a repaint */
.mq { contain: layout paint; isolation: isolate; }
.mq__t { will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); animation-name: mq3; }
@keyframes mq3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .mq__t { animation: none; } }

/* =====================================================================
   Phone pass: timelines read top to bottom, photo sets become swipe strips,
   one type scale for small screens, logos sized to sit beside the text
   ===================================================================== */

/* --- home: photography awards as a sideways strip (every width) --- */
.car__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.car__hint { margin: 0; font-size: 14px; color: #5d6670; }
.car__ctl { display: flex; align-items: center; gap: 10px; }
.car__n { min-width: 3.6em; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #3b4450; font-variant-numeric: tabular-nums; }
.car__b { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 16px -10px rgba(12,24,32,.55); display: grid; place-items: center; cursor: pointer; color: #1d2733; transition: transform .2s, opacity .2s; }
.car__b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.car__b:hover:not(:disabled) { transform: scale(1.06); }
.car__b:disabled { opacity: .35; cursor: default; }
.car__b:focus-visible { outline: 3px solid #2a6496; outline-offset: 2px; }
.grid--aw.grid--car { display: flex !important; columns: auto !important; gap: clamp(16px, 2vw, 28px) !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 18px; margin: 0 -2px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.grid--aw.grid--car > .card { flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3); margin: 0 !important; scroll-snap-align: start; }
.grid--aw.grid--car:focus-visible { outline: 3px solid #2a6496; outline-offset: 4px; border-radius: 12px; }
.car__more { margin: 14px 0 0; font-size: 15px; font-weight: 600; }
.car__more a { color: #1d2733; text-underline-offset: 4px; }
@media (max-width: 900px) { .grid--aw.grid--car > .card { flex-basis: calc((100% - clamp(16px, 2vw, 28px)) / 2); } }
@media (max-width: 640px) {
  .grid--aw.grid--car > .card { flex-basis: 80%; }
  .car__hint { font-size: 12.5px; }
  .car__b { width: 34px; height: 34px; }
}

/* --- swipe strip counter (only shown where the strip is active) --- */
.rws__n { display: none; }

@media (max-width: 760px) {
  /* HP: build phases as a rail running down */
  .phs__l { grid-template-columns: 1fr !important; gap: 0 !important; padding-left: 28px !important; position: relative; }
  .phs__l::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 14px; width: 3px; background: linear-gradient(#1f1f1f, #1f1f1f calc(100% - 40px), #0072a3); border-radius: 2px; }
  .phs__l li { padding: 0 0 22px !important; border-top: 0 !important; }
  .phs__l li:last-child { padding-bottom: 0 !important; }
  .phs__l li::after { display: none !important; }
  .phs__l li::before { left: -28px !important; top: 3px !important; }

  /* Byte: how the work evolved, same rail */
  .itr__l { grid-template-columns: 1fr !important; gap: 0 !important; padding-left: 28px !important; position: relative; }
  .itr__l::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 14px; width: 3px; background: #6c5e68; border-radius: 2px; }
  .itr__l li { padding: 0 0 24px !important; }
  .itr__l li:last-child { padding-bottom: 0 !important; }
  .itr__l li::after { display: none !important; }
  .itr__l li::before { left: -28px !important; top: 1px !important; }

  /* HP: plastic → texture → gloss → fingerprint, stacked with arrows pointing down */
  .chn { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .chn__a { padding-left: 22px !important; }
  .chn__a svg { transform: rotate(90deg); width: 26px !important; }

  /* Byte: research rows — each chain reads downward */
  .tl__s { display: grid !important; gap: 4px !important; white-space: normal !important; }
  .tl__s span + span::before { transform: rotate(90deg); transform-origin: 50% 50%; margin-right: .6em !important; }
  /* the Now → 2049 axis turns vertical */
  .tl__axis { height: 120px !important; margin: 14px 0 !important; }
  .tl__line { left: 29px !important; right: auto !important; top: 12px !important; bottom: 26px !important; width: 2px !important; height: auto !important; background: linear-gradient(180deg, #6d6a70 0 10%, var(--pink) 75%) !important; transform-origin: top !important; }
  .tl__line::after { right: auto !important; top: auto !important; bottom: -14px; left: -8px !important; border-width: 16px 9px 0 9px !important; border-color: var(--pink) transparent transparent transparent !important; }
  .tl .tl__line { transform: scaleY(0) !important; } .tl.go .tl__line { transform: none !important; }
  .tl__dot { display: flex !important; align-items: center; gap: 12px !important; transform: none !important; }
  .tl__dot b { transform: none !important; }
  .tl__dot--now { left: 21px !important; top: 2px !important; }
  .tl__dot--mid { left: 21px !important; top: 66px !important; }
  .tl__end { right: auto !important; left: 54px !important; top: auto !important; bottom: 0 !important; font-size: 12px !important; opacity: .8; }

  /* DualFlip: process tree becomes one column, each step titled */
  .seq2--tree .seq2__g { grid-template-columns: 1fr !important; gap: 46px !important; max-width: 520px; }
  .seq2--tree .seq2__g > .seq__i:nth-child(n) { grid-area: auto !important; grid-row: auto !important; grid-column: auto !important; width: auto !important; justify-self: stretch !important; }
  .seq2--tree .edg { display: none !important; }
  .seq2--tree .seq2__g > li + li::before { content: "" !important; }
  .seq2--tree .seq__f figcaption.sr { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 14px 12px !important; clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: normal !important; color: #e8eef5; font-size: 14px !important; font-weight: 600; }
  .seq2--tree .seq__n { width: 26px !important; height: 26px !important; font-size: 13px !important; }

  /* photo sets: one sideways strip, the next photo peeking in */
  .rws--car .rws__track { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -16px; padding: 0 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .rws--car .rws__track::-webkit-scrollbar { display: none; }
  .rws--car .jrow { display: contents !important; }
  /* every photo in a strip shares one height; widths follow each photo, so nothing is cropped or letterboxed */
  .rws--car .jrow__i { --h: min(300px, 86vw / var(--r, 1)); flex: 0 0 auto !important; width: calc(var(--h) * var(--r, 1)) !important; max-width: none !important; scroll-snap-align: start; transform: none !important; }
  .rws--car .jrow__i img { width: 100% !important; height: var(--h) !important; max-width: none !important; aspect-ratio: auto !important; object-fit: contain; }
  .rws--car .rws__n { display: block; margin: 10px 0 0; text-align: right; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: inherit; opacity: .6; font-variant-numeric: tabular-nums; }
  .rws--narrow.rws--car .jrow { max-width: none !important; }
}

/* --- phone type scale: body 15, lead 16, titles 30 / 23 / 18, small labels 12 --- */
@media (max-width: 640px) {
  main :is(p, li, dd, figcaption, blockquote, td, th) { font-size: 15px !important; line-height: 1.6 !important; letter-spacing: .005em !important; }
  main :is(p, li, dd, figcaption, blockquote, td) :is(span, em, b, strong, a, u, i, mark) { font-size: inherit !important; letter-spacing: inherit !important; }
  main :is(.lead, .how, .phead2__intro, .phead__intro, .prose--lead, .bs__concl, .reflect, .wv5__h, .media__txt > p:first-child, .qbox p, .fin__t) { font-size: 16px !important; line-height: 1.6 !important; }
  main :is(.lead, .how, .bs__concl, .reflect, .qbox p, .wv5__h) { text-align: left !important; }
  main :is(.concept__statement, .pull, .pull p, .stm__q, .p27__q p, .bgl__x, .pc__take) { font-size: 18px !important; line-height: 1.45 !important; }
  main :is(.goal__t, .gq__goals li) { font-size: 16px !important; }
  /* small uppercase labels */
  main :is(.crumb, .eyebrow, .phead2__d, .artw__k, .cal__mk, .exb__k, .media__k, .pm-ev__k, .pm__fh, .psr__k, .research__eb, .sec__n, .step__n, .stm__k, .wv5__fl, .pnx__d, .pnx__k, .pmp__vk, .ins__h, .dashbox__l, .itr__w, .bk__k, .pfin__lab, .meta-line, .fin4__p) { font-size: 12px !important; line-height: 1.45 !important; letter-spacing: .1em !important; }
  main :is(.bk__k, .meta-line) { letter-spacing: .02em !important; font-size: 13px !important; }
  main .card__sum { font-size: 14.5px !important; line-height: 1.55 !important; }
  main :is(.pill, .cat, .num, .opt, .pill-o, .chn li, .stat-chips li, .pfin__chip) { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .02em !important; }
  /* headings */
  main h1 { font-size: 30px !important; line-height: 1.12 !important; letter-spacing: -.01em !important; }
  main :is(.phead2__t, .phead__t) { font-size: 32px !important; line-height: 1.08 !important; }
  main .phead2__ts { font-size: inherit !important; }
  main h2 { font-size: 23px !important; line-height: 1.22 !important; letter-spacing: 0 !important; }
  main :is(.hsec__t, .exh__title) { font-size: 22px !important; }
  main .artw__t { font-size: 26px !important; }
  main h3 { font-size: 18px !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  main :is(.card__title) { font-size: 19px !important; }
  main :is(.card--feature .card__title) { font-size: 21px !important; }
  main :is(.goal__k, .gq__k) { font-size: 21px !important; line-height: 1.2 !important; }
  main :is(.slp__t) { font-size: 22px !important; }
  main h4 { font-size: 16px !important; line-height: 1.35 !important; }
  main .pnx__t { font-size: 24px !important; line-height: 1.15 !important; }
  /* numbers that are the point stay big */
  main :is(.fin__n, .fin__n > span, .stats__n, .sts__v, .hps__v) { font-size: 30px !important; line-height: 1.1 !important; }
  main :is(.pfin__n, .pfin__chip b) { font-size: 18px !important; }
  /* paragraphs that were set wide and airy */
  main :is(.phead2__intro, .lead, .how) { margin-top: 20px !important; }
  /* logos sized to sit with 15px text */
  .marks .mark img { height: 22px !important; max-width: 110px !important; }
  .marks .mark img[src*="-if-"], .marks .mark img[src*="if-2024"] { height: 30px !important; }
  .marks .mark img[src*="ct-hp"] { height: 28px !important; }
  .marks { gap: 10px 18px !important; }
  .pmeta2__logos img { max-height: 24px !important; width: auto !important; }
  .pmeta2__logos img[src*="wmm"] { max-height: 30px !important; }
  .pmeta2__award img { height: 28px !important; width: auto !important; }
}
@media (max-width: 640px) {
  main .sts__l li > b { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.01em !important; }
  main .sts__l li > span { font-size: 14px !important; }
}
@media (max-width: 760px) {
  /* DualFlip tree: 3 and 4 both branch from 2, so the step before 4 says where it comes from instead of a plain arrow */
  .seq2--tree .seq2__g > li:nth-child(4)::before { content: "↓  also from step 2" !important; width: auto !important; height: auto !important; border: 0 !important; transform: translateX(-50%) !important; margin-top: -34px !important; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: #e8eef5; background: rgba(232, 238, 245, .12); padding: 3px 12px; border-radius: 999px; }
  .seq2--tree .seq2__g > li:nth-child(4) { margin-top: 8px; }
}

/* ---------- DualFlip: hand-sketch drawings that draw themselves in ---------- */
.sk { display: block; width: 100%; height: auto; }
.sk .t { font: 600 22px/1 var(--font, "Montserrat", system-ui, sans-serif); letter-spacing: .02em; }
.sk .tl { font-size: 20px; letter-spacing: .14em; }
.seq__f--sk { background: #f5f2eb; }
.seq__f--sk .seq__ar { display: none; }
.fig--sk .sk { border-radius: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .sk .k { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .reveal .sk .f { opacity: 0; transition: opacity .7s ease; }
  .reveal.in .sk .k { animation: draw .8s var(--ease, ease) forwards; animation-delay: calc(.15s + var(--d, 0s)); }
  .reveal.in .sk .f { opacity: 1; transition-delay: .35s; }
  .reveal.in .sk .k.a { animation-delay: calc(.9s + var(--d, 0s) * .3); }
  /* the release slider: slides from LOCK to RELEASE, holds, slides back */
  .reveal.in .sk .slide { animation: sk-slide 3.6s ease-in-out 1.6s infinite; }
  .reveal.in .sk .ghost { animation: sk-ghost 3.6s ease-in-out 1.6s infinite; }
}
@keyframes sk-slide { 0%, 12% { transform: translate(0, 0); } 38%, 70% { transform: translate(var(--dx), var(--dy)); } 92%, 100% { transform: translate(0, 0); } }
@keyframes sk-ghost { 0%, 12% { opacity: 1; } 34%, 74% { opacity: 0; } 92%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sk .slide { transform: translate(var(--dx), var(--dy)); } .sk .ghost { opacity: .5; } }

/* =====================================================================
   Phone review, round 2
   ===================================================================== */

/* boxed paragraphs read like a printed column: justified, hyphenated, last line left */
html body main .qbox p {
  text-align: justify !important; text-align-last: left !important; text-justify: inter-word; hyphens: manual !important; -webkit-hyphens: manual !important; text-wrap: wrap !important;
}

/* DualFlip pros/cons: the check sits beside the pros, the sad face beside the cons */
.pc3__col--p { position: relative; }
.pc3__ok { left: calc(clamp(14px, 1.6vw, 22px) - clamp(56px, 5vw, 72px)) !important; top: 50% !important; }
@media (max-width: 639px) {
  .pc3__col--c { order: -1; padding-bottom: 20px; border-bottom: 2px dashed rgba(255, 255, 255, .5); }
  .pc3__col .pc3__h { padding-top: 6px; }
  .pc3__ok { left: -46px !important; }
  .pc3__bub { padding-left: 58px !important; padding-top: 40px !important; }
}

/* taglines: no lone word on the last line, no leading dash */
.artw__g { text-wrap: balance; }
[data-skin="paper"] .artw__g::before, .pds .artw__g::before { content: none !important; }

/* artist books: the numbered list sits right under the picture, before the materials card */
@media (max-width: 640px) {
  .cal { display: flex; flex-direction: column; }
  .cal__stage { display: contents; }
  .cal__pic { order: 1; border-radius: 20px; overflow: hidden; }
  .cal__ls { order: 2; margin: 14px 0 18px !important; }
  .cal__mat { order: 3; }
}

/* petrol tables: digits centred in their cells with room at the edges */
.pv-tt thead th, .pv-tt tbody th, .pv-tt tbody td { text-align: center !important; padding-inline: 6px !important; }
.pv-tt { table-layout: fixed; }

@media (max-width: 760px) {
  /* Byte keywords: four small pills on one line */
  .pills ul { flex-wrap: nowrap !important; gap: 8px !important; }
  .pills .pill2 { min-width: 62px !important; height: 62px !important; padding: 0 12px !important; font-size: 13px !important; }

  /* Byte research: the Now → 2049 timeline sits above the questions, whole, instead of between them */
  .tl { display: flex; flex-direction: column; }
  .tl__axis { order: -1; position: relative !important; height: 70px !important; margin: 0 20px 18px !important; }
  .tl__line { left: 8px !important; right: 18px !important; top: 22px !important; bottom: auto !important; width: auto !important; height: 2px !important;
    background: linear-gradient(90deg, #6d6a70 0 10%, var(--pink) 80%) !important; transform-origin: left !important; }
  .tl__line::after { right: -14px !important; left: auto !important; top: -8px !important; bottom: auto !important; border-width: 9px 0 9px 16px !important; border-color: transparent transparent transparent var(--pink) !important; }
  .tl .tl__line { transform: scaleX(0) !important; } .tl.go .tl__line { transform: none !important; }
  .tl__dot { display: grid !important; justify-items: center; gap: 8px !important; top: 14px !important; transform: translateX(-50%) !important; }
  .tl__dot--now { left: 14px !important; justify-items: start; transform: translateX(-9px) !important; }
  .tl__dot--mid { left: 74% !important; }
  .tl__end { left: auto !important; right: 0 !important; top: 46px !important; bottom: auto !important; font-size: 12px !important; opacity: .8; }

  /* Image Board: a swipe strip of full-height pictures instead of four thumbnails */
  .ib .jrow { overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px !important; scrollbar-width: none; }
  .ib .jrow::-webkit-scrollbar { display: none; }
  .ib .jrow__i { flex: 0 0 auto !important; width: max-content !important; scroll-snap-align: start; }
  .ib .jrow__i img { height: 240px !important; width: auto !important; max-width: none !important; }
  .ib::after { content: "swipe →"; display: block; margin-top: 8px; text-align: right; font-size: 12px; letter-spacing: .08em; color: #a9a9a9; }

  /* Byte final works: the model carries A and B, each photo says which side it shows */
  .fp2__c { order: -3 !important; }
  .fp2__ph { position: relative; }
  .fp2__tag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(12, 14, 18, .78); color: #fff; font-size: 13px; font-weight: 600; }
  .fp2__tag b, .fp2__pin { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #8eabbb; color: #0f1216; font-size: 13px; font-weight: 800; font-style: normal; }
  .fp2__pin { position: absolute; z-index: 3; box-shadow: 0 0 0 3px #111; }
  .fp2__pin--a { left: -12px; top: calc(78% - 12px); }
  .fp2__pin--b { right: -12px; top: calc(31% - 12px); }

  /* When people fall behind: before and after the same size, the arrow between them */
  .p27__ex { grid-template-columns: 1fr 56px 1fr !important; gap: 10px !important; align-items: center; }
  .p27__exk { grid-column: 1 / -1 !important; }
  .p27__ex > figure { order: 0 !important; margin: 0; }
  .p27__ex > figure img { width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: cover; }
  .p27__via { display: contents !important; }
  .p27__vt { grid-column: 1 / -1; grid-row: 2; text-align: center; font-size: 17px !important; }
  .p27__via svg { grid-column: 2; grid-row: 3; width: 100% !important; margin: 0 !important; }
  .p27__ex > figure:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  .p27__ex > figure:nth-of-type(2) { grid-column: 3; grid-row: 3; }
  .p27__vd { grid-column: 1 / -1; grid-row: 4; margin-top: 8px !important; font-size: 15px !important; }

  /* Minhand: the number sits right beside its sentence */
  .why__card { flex-direction: row !important; align-items: center; gap: 16px !important; padding: 18px 20px !important; border-radius: 24px !important; }
  .why__card .num { flex: none; }

  /* Minhand brainstorm: the quotes arrive one by one as idea notes around the sketches */
  .bs__q { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px 8px !important; padding: 0 !important; }
  .bs__q li { padding: 8px 14px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -10px rgba(20, 30, 45, .5); font-size: 14px !important; line-height: 1.35 !important; text-align: center; margin: 0 !important; }
  .bs__q li span { white-space: normal !important; display: inline !important; }
  .bs__q li:nth-child(3n+1) { transform: rotate(-1.5deg); } .bs__q li:nth-child(3n+2) { transform: rotate(1.2deg); }
  .bs__q--l li:nth-child(odd), .bs__q--r li:nth-child(even) { background: #eef3fa; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .bs__q li { opacity: 0; translate: 0 10px; transition: opacity .45s ease, translate .45s ease; }
  .bs__q.is-in li { opacity: 1; translate: 0 0; }
  .bs__q.is-in li:nth-child(1) { transition-delay: .05s; } .bs__q.is-in li:nth-child(2) { transition-delay: .2s; } .bs__q.is-in li:nth-child(3) { transition-delay: .35s; }
  .bs__q.is-in li:nth-child(4) { transition-delay: .5s; } .bs__q.is-in li:nth-child(5) { transition-delay: .65s; }
}
/* research keywords: lit as they come into view (touch), hover as before (mouse) */
.research__kw li.is-lit { background: var(--accent-2); color: #1d1500; }

/* round 3 */
@media (max-width: 760px) {
  .fs__kwbox li.pill2 { min-width: 62px !important; height: 62px !important; padding: 0 12px !important; font-size: 13px !important; }
  .fs__kwbox ul { gap: 8px !important; }
  .ib .jrow__i img { height: 200px !important; }
  .ib .jrow__i { max-width: 78vw; }
  .ib .jrow__i img { max-width: 78vw !important; object-fit: cover; }
  .tl__q { justify-self: start !important; text-align: left !important; place-items: center start !important; }
  .tl__r { margin-top: 8px; }
  .pds .artw__g, [data-skin="paper"] .artw__g { display: inline !important; padding: 2px 8px !important; line-height: 1.9 !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-wrap: wrap !important; }
}