/* HERO FILM — the homepage hero. Built in src/product/lab/hero-film (branch lab/hero-film). House tokens from site.css (night), the house faces, and
   the three Aesthetics' own faces and colours for the cards. Nothing here
   is a new brand. Violet means one thing: the agreed direction everyone
   shares (the line it travels along, the match marks). */

/* the Aesthetics' own faces, subset to the characters the film uses (fonts/) */
@font-face { font-family: "Ytf Literata"; src: url("fonts/film/literata.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Ytf Josefin"; src: url("fonts/film/josefin-sans.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Ytf Yellowtail"; src: url("fonts/film/yellowtail.woff2") format("woff2"); font-display: swap; }
/* the guesses' faces: only the Round 1 cards use them, so they arrive after first paint */
@font-face { font-family: "Ytf Bodoni"; src: url("fonts/film/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Ytf Italiana"; src: url("fonts/film/italiana.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Ytf Geist"; src: url("fonts/film/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Ytf Unbounded"; src: url("fonts/film/unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

.ytf {
  --paper: #0B0D12; --paper-deep: #10131B; --paper-3: #161A24;
  --ink: #F2F3F7; --ink-2: #A8B0BD; --ink-3: #78808E;
  --rule: #222735; --rule-firm: #39415A;
  --brand: #B8A0FF;
  --ui: "AI Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .15, 1);
}
/* The film is always the dark stage, whatever the site theme: it carries its own
   tokens and ground, and the line and actions under it sit on that ground. */
.ytf { margin: 0 0 var(--s7, 3rem); background: var(--paper); color: var(--ink); }
.ytf-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ stage
   Every size inside is relative to the stage (cqi), with a pixel floor on
   anything a viewer has to read, so a small stage never shrinks text past
   reading size. The floors are the type scale's bottom rungs: 12 meta,
   13 role, 16 caption. */
.ytf__stage {
  container: ytf / size;
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--paper); border: 1px solid var(--rule);
}
/* Below 820px the film is composed for a portrait stage (see SMALL SCREENS). */
/* The frame carries the size (width gives way to the height cap, so the
   stage never loses its proportions) and holds the one control on top. */
.ytf__frame { position: relative; width: min(100%, 80svh * 16 / 9); margin-inline: auto; }
@media (max-width: 820px) {
  .ytf__frame { width: min(100%, 88svh * 9 / 17); }
  .ytf__stage { aspect-ratio: 9 / 17; }
}
.ytf__ctl {
  position: absolute; top: 8px; right: 8px; z-index: 6; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule-firm); opacity: .75; transition: opacity .2s, color .2s;
}
.ytf__ctl:hover, .ytf__ctl:focus-visible { opacity: 1; color: var(--ink); }
.ytf__ctl:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ytf__ctl svg { width: 14px; height: 14px; fill: currentColor; }
.ytf__ctl .ytf__ico-play, .ytf__ctl.is-paused .ytf__ico-pause { display: none; }
.ytf__ctl.is-paused .ytf__ico-play { display: inline; }

.ytf__stage {
  --tt: 35cqh;               /* table top */
  --tb: 15cqh;               /* table bottom */
  --pg: 1.4cqi;              /* the shared line sits this far under the table */
  --f-meta: max(12px, 1.25cqi);
  --f-role: max(13px, 1.35cqi);
  --f-cap: max(16px, 1.9cqi);
  --f-talk: max(17px, 2.1cqi);
  --f-q: max(19px, 2.6cqi);
  --f-big: max(26px, 3.4cqi);
  --f-brief: max(24px, 4.3cqi);
  --f-yes: max(40px, 6.4cqi);
}

[data-in] { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .45s; }
[data-in].is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s; }
.is-rewind *, .is-rewind *::before, .is-rewind *::after { transition: none !important; animation: none !important; }

/* ------------------------------------------------------------------- head */
.ytf__head { position: absolute; left: 5cqi; right: 5cqi; top: 5cqh; height: calc(var(--tt) - 7cqh); }
.ytf__round { position: relative; margin: 0; height: calc(var(--f-meta) * 1.5); font: var(--f-meta)/1.4 var(--mono); color: var(--ink-3); }
.ytf__round span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ytf__who { display: block; font: var(--f-meta)/1.4 var(--mono); color: var(--ink-3); margin-bottom: .4em; }
/* The brief is painted with the page, before any script: it is the hero's
   first meaningful text, and the film starts from it. */
.ytf__brief, .ytf__point { position: absolute; left: 0; right: 0; top: calc(var(--f-meta) * 2.6); margin: 0; }
.ytf__brief q { quotes: "\201C" "\201D"; display: block; font: 600 var(--f-brief)/1.05 var(--ui); letter-spacing: -0.025em; text-wrap: balance; max-width: 34ch; }
.ytf__point { font: 600 var(--f-brief)/1.05 var(--ui); letter-spacing: -0.025em; text-wrap: balance; transform: translateY(.6cqi); }
.ytf__point.is-on { transform: none; }
.ytf__point--thesis { display: none; }

/* Round 2 conversation: three short lines in one row, read left to right;
   then "YES. THAT." takes the row. */
.ytf__talk { position: absolute; left: 0; right: 0; top: calc(var(--f-meta) * 2.6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3cqi; }
.ytf__talk p { grid-row: 1; margin: 0; transform: translateY(.8cqi); }
.ytf__talk p.is-on { transform: none; }
.ytf__talk p:nth-child(1) { grid-column: 1; } .ytf__talk p:nth-child(2) { grid-column: 2; } .ytf__talk p:nth-child(3) { grid-column: 3; }
.ytf__talk q { quotes: "\201C" "\201D"; display: block; font: 600 var(--f-talk)/1.15 var(--ui); letter-spacing: -0.015em; text-wrap: balance; }
.ytf__talk p:first-child q { color: var(--ink-2); font-weight: 500; }
.ytf__talk:has(.ytf__yes.is-on) p:not(.ytf__yes) { opacity: 0; }
.ytf__talk .ytf__yes { grid-column: 1 / span 3; }
.ytf__talk .ytf__yes q { font: 800 var(--f-yes)/.9 var(--ui); letter-spacing: -0.04em; transform-origin: left bottom; }
.ytf__talk .ytf__yes.is-on q { animation: ytf-yes .7s var(--ease) both; }
@keyframes ytf-yes { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: none; } }

/* ------------------------------------------------------------------ table */
.ytf__table {
  position: absolute; left: 5cqi; right: 5cqi; top: var(--tt); bottom: var(--tb);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 2.2cqi;
  transition: transform .9s var(--ease), opacity .6s;
}
.ytf__seat { position: relative; display: flex; flex-direction: column; min-height: 0; }
/* Five equal seats, evenly spaced. In Round 1 a rule in the gap sets the
   client apart (the only one who can see the picture); from Round 2 on it
   goes, and all five stand on the same shared line. */
.ytf__seat--client::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1.1cqi; width: 1px; background: var(--rule-firm); transition: opacity .5s; }
.ytf__stage:not([data-phase="r1"]):not([data-phase="scatter"]) .ytf__seat--client::after { opacity: 0; }

.ytf__card { position: relative; flex: 1; min-height: 0; perspective: 90cqi; }
.ytf__flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .6, .2, 1), opacity .3s; }
.ytf__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.ytf__back { transform: rotateY(180deg); background: var(--paper-3); border: 1px solid var(--rule-firm); display: grid; place-items: center; }
.ytf__back span { font: 700 6cqi/1 var(--ui); color: var(--rule-firm); }
.ytf__layer { position: absolute; inset: 0; }

/* empty seat: an outline where a card will land */
.ytf__card::before { content: ""; position: absolute; inset: 0; border: 1px dashed var(--rule-firm); opacity: .7; transition: opacity .4s; }
.ytf__seat:not([data-s="empty"]) .ytf__card::before { opacity: 0; }
.ytf__seat[data-s="empty"] .ytf__flip { opacity: 0; }
.ytf__seat[data-s="back"] .ytf__flip { transform: rotateY(180deg); }

/* which picture the front shows: switched at the flip's edge, never in view */
.ytf__layer--guess { visibility: visible; transition: visibility 0s .35s; }
.ytf__layer--match { visibility: hidden; transition: visibility 0s .35s; }
.ytf__seat[data-s="back"] .ytf__layer--guess, .ytf__seat[data-s="match"] .ytf__layer--guess { visibility: hidden; }
.ytf__seat[data-s="back"] .ytf__layer--match, .ytf__seat[data-s="match"] .ytf__layer--match { visibility: visible; }
.ytf__seat--client .ytf__layer--match { visibility: visible; }

/* ROUND 1: the guesses slam down, each a little crooked */
.ytf__seat[data-s="guess"] .ytf__flip { transform: rotate(var(--tilt)); animation: ytf-slam .5s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes ytf-slam {
  0% { transform: translateY(-22%) scale(1.14) rotate(calc(var(--tilt) * 3)); opacity: 0; }
  55% { transform: translateY(1.2%) scale(.985) rotate(var(--tilt)); opacity: 1; }
  100% { transform: rotate(var(--tilt)); }
}
/* the guesses fall apart */
.ytf__stage[data-phase="scatter"] .ytf__seat:not(.ytf__seat--client) .ytf__flip {
  transform: translate(calc((var(--i) - 2.5) * 22%), 9%) rotate(calc(var(--tilt) * 5));
  opacity: .28; transition: transform .8s var(--ease), opacity .8s;
}
.ytf__stage[data-phase="scatter"] .ytf__seat:not(.ytf__seat--client) .ytf__label { opacity: .35; }

/* stamps */
.ytf__stamp {
  position: absolute; left: 50%; top: 50%; z-index: 3; padding: .45em .8em;
  font: 400 var(--f-meta)/1 var(--mono); white-space: nowrap;
  transform: translate(-50%, -50%) scale(1.4) rotate(-4deg); opacity: 0; transition: opacity .2s, transform .35s cubic-bezier(.2, .9, .3, 1.3);
}
.ytf__stamp--no { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
.ytf__stamp--yes { top: auto; bottom: 0; left: 0; transform: translateY(40%) scale(1.2); background: var(--brand); color: #0B0D12; }
.ytf__seat[data-stamp="no"] .ytf__stamp--no { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg); }
.ytf__seat[data-stamp="yes"] .ytf__stamp--yes { opacity: 1; transform: none; }
/* a wrong guess dims under a flat veil (opacity only: no filter repaint) */
.ytf__card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .4s; }
.ytf__seat[data-stamp="no"] .ytf__card::after { opacity: .5; }
.ytf__seat[data-stamp="yes"] .ytf__card { outline: 2px solid var(--brand); outline-offset: 0; }

/* labels: role, then what the role has */
.ytf__label { position: relative; margin: .8cqi 0 0; height: calc(var(--f-role) * 1.3 + var(--f-meta) * 1.4); font: var(--f-meta)/1.4 var(--mono); color: var(--ink-3); transition: opacity .4s; }
.ytf__label b { display: block; font: 600 var(--f-role)/1.3 var(--ui); color: var(--ink); white-space: nowrap; }
.ytf__label span { position: absolute; left: 0; white-space: nowrap; transition: opacity .35s; }
.ytf__label .l2 { opacity: 0; color: var(--brand); }
.ytf__stage[data-labels="2"] .ytf__label .l1 { opacity: 0; }
.ytf__stage[data-labels="2"] .ytf__label .l2 { opacity: 1; }

/* ---------------------------------------------------------- THE SHARED LINE
   Not the brand. It is the agreed direction: the Mix folds into it, it
   runs out to every seat, and each card turns over as it arrives. */
.ytf__plate { position: absolute; left: 0; right: 0; bottom: calc(var(--pg) * -1); height: 2px; pointer-events: none; }
.ytf__plate i { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: 50% 50%; }
.ytf__plate.is-on i { transform: scaleX(1); transition: transform 1s cubic-bezier(.3, .5, .2, 1); }
.ytf__plate span {
  position: absolute; left: 50%; top: .5em; transform: translateX(-50%);
  width: max-content; max-width: 100%; text-align: center; text-wrap: balance;
  font: 600 var(--f-role)/1.2 var(--ui); color: var(--brand);
}

/* ------------------------------------------------------------------- desk
   The designer's working surface, the real Mix reduced: two Aesthetics,
   one swapped. It rises out of the place the shared line will run, and at
   hand-off folds back into it. The client's seat stays in view beside it. */
.ytf__desk {
  position: absolute; z-index: 5; left: 23cqi; right: 5cqi; top: calc(var(--tt) - 3cqh); bottom: calc(var(--tb) - var(--pg));
  display: grid; grid-template-columns: 30% 1fr; gap: 2.4cqi; padding: 2cqi;
  background: var(--paper-deep); border: 1px solid var(--rule-firm);
  transform-origin: 50% 100%; transform: scaleY(.02);
}
.ytf__desk.is-on { transform: none; transition: opacity .3s, transform .6s var(--ease), visibility 0s; }
.ytf__desk:not(.is-on) { transition: opacity .35s .15s, transform .5s cubic-bezier(.6, 0, .8, .4), visibility 0s .5s; }
.ytf__stage[data-phase="desk"] .ytf__seat:not(.ytf__seat--client) { opacity: .3; transition: opacity .4s; }
.ytf__mixh { display: flex; align-items: baseline; gap: .6em; margin: 0 0 1.2cqi; font: 700 max(15px, 1.9cqi)/1 var(--ui); }
.ytf__mixh span { font: 400 var(--f-meta)/1 var(--mono); color: var(--ink-3); }
/* EM stays; the second slot holds Memphis, then Mid-Century Modern, in the same place */
.ytf__chips { list-style: none; margin: 0; padding: 0; display: grid; gap: .8cqi; }
.ytf-chip {
  grid-column: 1; display: flex; justify-content: space-between; align-items: center; gap: .6em;
  min-height: max(30px, 3.2cqi); padding: .5em .8em;
  font: 500 var(--f-role)/1.15 var(--ui); background: var(--paper-3); border: 1px solid var(--rule-firm);
  transform: translateX(-1cqi);
}
.ytf-chip.is-on { transform: none; }
.ytf-chip--memphis, .ytf-chip--mcm { grid-row: 2; }
.ytf-chip--memphis:not(.is-on) { transform: translateX(-3cqi); }
.ytf-chip b { font: 400 var(--f-role)/1 var(--mono); padding: .15em .45em; background: var(--rule-firm); color: var(--ink); }
.ytf-chip--mcm.is-on { animation: ytf-snap .5s cubic-bezier(.2, .9, .3, 1.25) both; border-color: var(--ink-2); }
@keyframes ytf-snap { 0% { transform: translateY(-40%) scale(.9); } 100% { transform: none; } }
.ytf__search { position: relative; margin: 1.2cqi 0 0; padding: .5em .8em; border: 1px solid var(--rule-firm); font: var(--f-role)/1.15 var(--ui); min-height: max(30px, 3.2cqi); display: flex; align-items: center; }
.ytf__ph { color: var(--ink-3); }
.ytf__search.is-typing .ytf__ph { display: none; }
.ytf__search i { width: 1px; height: 1.1em; background: var(--ink); margin-left: 1px; opacity: 0; }
.ytf__search.is-typing i { opacity: 1; }

.ytf__preview { display: grid; grid-template-rows: auto 1fr; gap: .5em; min-height: 0; }
.ytf__pvlabel { margin: 0; font: var(--f-meta)/1.2 var(--mono); color: var(--ink-3); }
.ytf__pvframe { position: relative; min-height: 0; border: 1px solid var(--rule-firm); outline: 2px solid transparent; transition: outline-color .3s; }
.ytf__stage.is-yes .ytf__pvframe { outline-color: var(--brand); }
.ytf__pv { position: absolute; inset: 0; }
.ytf__pv[data-pic="yes"].is-on .pa { animation: ytf-grow .7s var(--ease) both; }
@keyframes ytf-grow { 0% { transform: scale(.85) rotate(-6deg); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- caption */
.ytf__cap { position: absolute; left: 5cqi; right: 5cqi; bottom: 2.2cqh; margin: 0; height: calc(var(--f-big) * 1.1); }
.ytf__cap > span { position: absolute; left: 0; bottom: 0; font: 500 var(--f-cap)/1.2 var(--ui); color: var(--ink-2); transform: translateY(.6cqi); }
.ytf__cap > span.is-on { transform: none; }
.ytf__cap .ytf__cap--q { color: var(--ink); font: 700 var(--f-q)/1.15 var(--ui); }
.ytf__cap .ytf__cap--big { color: var(--ink); font: 800 var(--f-big)/1 var(--ui); letter-spacing: -0.03em; }
.ytf__cap--big em { font: 500 var(--f-cap)/1.2 var(--ui); letter-spacing: 0; color: var(--ink-2); margin-left: .8em; }
/* the thesis line gets the question's weight, not a whisper */
.ytf__cap .ytf__cap--thesis { color: var(--ink); font: 700 var(--f-q)/1.15 var(--ui); }

/* -------------------------------------------------------------------- end */
.ytf__stage[data-phase="end"] .ytf__head, .ytf__stage[data-phase="end"] .ytf__cap { opacity: 0; transition: opacity .5s; }
/* The hand-off stays exactly as it was agreed, full size, roles, marks and
   the shared line; the payoff is set above it. */
.ytf__end { position: absolute; left: 5cqi; right: 5cqi; top: 5cqh; }
.ytf__end p { margin: 0; transform: translateY(1cqi); }
.ytf__end p.is-on { transform: none; }
.ytf__e1 { font: 500 max(16px, 2.2cqi)/1.2 var(--ui); color: var(--ink-2); }
/* THE one oversized moment in the film */
.ytf__e2 { margin-top: .3em !important; font: 800 max(36px, 7.4cqi)/.92 var(--ui); letter-spacing: -0.045em; text-wrap: balance; }
.ytf__e2 span { white-space: nowrap; }

/* =========================================================== THE PICTURES
   Each .pic is its own size container, so the same template reads as a
   portrait card, a wide strip, or a desk preview. */
.pic { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.pic h4, .pic p { margin: 0; }
.pic nav { position: absolute; left: 7cqw; right: 7cqw; top: 6cqh; display: flex; align-items: baseline; gap: 5cqw; }
.pic nav b { margin-right: auto; }
.pl { display: flex; flex-direction: column; gap: 1.6cqh; }
.pl i { display: block; height: max(2px, 1.1cqh); background: currentColor; opacity: .28; }
.pl i:nth-child(1) { width: 88%; } .pl i:nth-child(2) { width: 76%; } .pl i:nth-child(3) { width: 52%; }
/* print grain as a plain layer: no blend mode, so no extra compositing */
.grain { position: absolute; inset: 0; background: var(--ytf-grain); opacity: .6; pointer-events: none; }

/* Editorial Modernism × Mid-Century Modern */
.pic--yes { background: #F3EAD7; color: #141412; }
.pic--yes nav { font: 500 min(4.6cqw, 5cqh)/1 "Ytf Josefin", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5E5445; border-bottom: 1px solid #141412; padding-bottom: 2.4cqh; }
.pic--yes nav b { font: 600 min(7.4cqw, 8cqh)/1 "Ytf Literata", Georgia, serif; letter-spacing: -0.01em; text-transform: none; color: #141412; }
.pic--yes .pc { position: absolute; left: 7cqw; top: 25cqh; width: 60cqw; display: flex; flex-direction: column; gap: 2.6cqh; z-index: 1; }
.pic--yes em { font: 400 min(8cqw, 8cqh)/1 "Ytf Yellowtail", cursive; color: #B5562B; font-style: normal; margin-bottom: -1.4cqh; }
.pic--yes h4 { font: 500 min(12cqw, 12.5cqh)/.98 "Ytf Literata", Georgia, serif; letter-spacing: -0.025em; }
.pic--yes .pl { width: 72%; color: #5E5445; }
.pic--yes u { font: 600 min(4.4cqw, 5cqh)/1 "Ytf Josefin", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration-thickness: 2px; text-underline-offset: .35em; color: #256A66; }
.pic--yes .pa { position: absolute; right: -10cqw; bottom: -2cqh; width: min(70cqw, 60cqh); height: auto; }
@container (min-aspect-ratio: 5/4) {
  .pic--yes .pc, .pic--mid .pc { top: 26cqh; width: 46cqw; }
  .pic--yes h4, .pic--mid h4 { font-size: min(8.4cqw, 15cqh); }
  .pic--yes .pa, .pic--mid .pa { right: 3cqw; bottom: -4cqh; width: min(46cqw, 82cqh); }
  .pic--yes .pl, .pic--mid .pl { width: 80%; }
}

/* Editorial Modernism × Memphis: same columns, Memphis's shapes and colours */
.pic--mid { background: #FFF7EA; color: #191512; }
.pic--mid nav { font: 700 min(4.4cqw, 5cqh)/1 var(--ui); text-transform: uppercase; border-bottom: 3px solid #191512; padding-bottom: 2.4cqh; }
.pic--mid nav b { font: 600 min(7.4cqw, 8cqh)/1 "Ytf Literata", Georgia, serif; text-transform: none; }
.pic--mid .pc { position: absolute; left: 7cqw; top: 25cqh; width: 60cqw; display: flex; flex-direction: column; gap: 2.6cqh; z-index: 1; }
.pic--mid h4 { font: 500 min(12cqw, 12.5cqh)/.98 "Ytf Literata", Georgia, serif; letter-spacing: -0.025em; }
.pic--mid .pl { width: 72%; }
.pic--mid u { align-self: flex-start; text-decoration: none; font: 800 min(4.2cqw, 4.8cqh)/1 var(--ui); text-transform: uppercase; background: #FF7B6B; border: 2px solid #191512; padding: 1.4cqh 3cqw; box-shadow: 3px 3px 0 #191512; }
.pic--mid .pa { position: absolute; right: -8cqw; bottom: -2cqh; width: min(70cqw, 60cqh); }

/* guess 1, the account manager: beige quiet luxury */
.pic--beige { background: #E6DDD0; color: #3E362C; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pic--beige nav { justify-content: center; font: 400 min(6cqw, 6cqh)/1 "Ytf Italiana", serif; letter-spacing: .5em; padding-left: .5em; }
.pic--beige nav b { margin: 0; font-weight: 400; }
.pic--beige .arch { margin-top: 18cqh; width: 46cqw; height: 42cqh; border-radius: 50% 50% 0 0 / 38% 38% 0 0; background: linear-gradient(170deg, #D6C8B4, #B9A68D); }
.pic--beige h4 { margin-top: 5cqh; font: 400 min(7cqw, 7cqh)/1.1 "Ytf Italiana", serif; letter-spacing: .04em; }
.pic--beige .pl { margin-top: 3cqh; width: 56cqw; align-items: center; }
.pic--beige .pl i { height: 1px; opacity: .45; }

/* guess 2, the designer: black fashion editorial */
.pic--noir { background: #0A0A0A; color: #F4F1EC; }
.pic--noir .ph { position: absolute; right: 0; top: 0; width: 74cqw; height: 74cqh;
  background: radial-gradient(ellipse 30% 22% at 58% 34%, #d9d4cc 0 60%, transparent 62%), radial-gradient(ellipse 46% 60% at 60% 92%, #8b8680 0 55%, transparent 57%), linear-gradient(160deg, #3a3835, #121110); }
.pic--noir nav { justify-content: flex-end; font: 400 min(4cqw, 4cqh)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pic--noir h4 { position: absolute; left: 6cqw; bottom: 7cqh; right: 6cqw; font-weight: 400; }
.pic--noir h4 b { display: block; font: italic 700 min(30cqw, 30cqh)/.8 "Ytf Bodoni", serif; letter-spacing: -0.04em; margin-left: -1cqw; }
.pic--noir small { display: block; margin-top: 3cqh; font: italic 400 min(5.4cqw, 5.4cqh)/1.1 "Ytf Bodoni", serif; }

/* guess 3, the developer: bright SaaS */
.pic--saas { background: #FFFFFF; color: #0F172A; text-align: center; display: flex; flex-direction: column; align-items: center;
  background-image: radial-gradient(circle at 50% 0%, #EEF0FF, #fff 60%); }
.pic--saas nav { font: 500 min(4.2cqw, 4.2cqh)/1 "Ytf Geist", sans-serif; align-items: center; }
.pic--saas nav b { font-weight: 800; font-size: min(6.4cqw, 6.4cqh); letter-spacing: -0.04em; }
.pic--saas nav span { background: #0F172A; color: #fff; padding: 1.4cqh 2.6cqw; border-radius: 99px; }
.pic--saas h4 { margin-top: 24cqh; padding: 0 7cqw; font: 800 min(10cqw, 10cqh)/1 "Ytf Geist", sans-serif; letter-spacing: -0.05em; }
.pic--saas .pl { margin-top: 3.4cqh; width: 60cqw; align-items: center; color: #64748B; }
.pic--saas u { margin-top: 4cqh; text-decoration: none; font: 600 min(4.4cqw, 4.4cqh)/1 "Ytf Geist", sans-serif; color: #fff; background: linear-gradient(90deg, #7C5CFF, #3B82F6); padding: 2cqh 5cqw; border-radius: 99px; }
.pic--saas .cards { position: absolute; left: 7cqw; right: 7cqw; bottom: 5cqh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.pic--saas .cards i { height: 16cqh; border-radius: 3cqw; background: #F8FAFC; border: 1px solid #E2E8F0; position: relative; }
.pic--saas .cards i::before { content: ""; position: absolute; left: 20%; top: 22%; width: 26%; aspect-ratio: 1; border-radius: 30%; background: #F472B6; }
.pic--saas .cards i:nth-child(2)::before { background: #FACC15; } .pic--saas .cards i:nth-child(3)::before { background: #38BDF8; }

/* guess 4, the AI tool: glossy chrome and the glowing orb */
.pic--chrome { background: #05060F; color: #EAF2FF; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pic--chrome .orb { position: absolute; left: 50%; top: 46%; width: 110cqw; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 42% 38%, #fff 0 3%, #FF5FD8 12%, #7B5CFF 32%, rgba(0, 225, 255, .55) 50%, transparent 68%); }
.pic--chrome nav { justify-content: center; font: 700 min(5cqw, 5cqh)/1 "Ytf Unbounded", sans-serif; letter-spacing: .3em; }
.pic--chrome nav b { margin: 0; }
.pic--chrome h4 { position: relative; margin-top: 60cqh; padding: 0 6cqw; font: 600 min(7.4cqw, 7.4cqh)/1.05 "Ytf Unbounded", sans-serif; letter-spacing: -0.02em; }
.pic--chrome u { position: relative; margin-top: 4cqh; text-decoration: none; font: 500 min(4cqw, 4cqh)/1 "Ytf Unbounded", sans-serif; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); padding: 1.8cqh 6cqw; border-radius: 99px; }

/* ROUND 2 FORMS — same ground, same faces, same colours: the shared DNA */
/* padding in %, not cq units: cq units on the container itself resolve against the stage */
.form { background: #F3EAD7; color: #141412; padding: 9% 7%; display: flex; flex-direction: column; gap: 3.5%; }
.form .fh { font: 500 min(4.2cqw, 4.4cqh)/1 "Ytf Josefin", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5E5445; border-bottom: 1px solid #141412; padding-bottom: 2.4cqh; }
.form--link .fchips { display: flex; flex-wrap: wrap; gap: 1.6cqh 2cqw; }
.form--link .fchips span { font: 600 min(4.6cqw, 4.8cqh)/1 "Ytf Josefin", sans-serif; border: 1px solid #141412; padding: 1.4cqh 2.4cqw; }
.form .thumb { position: relative; flex: 1; min-height: 0; border: 1px solid #141412; overflow: hidden; }
.form--link .url { font: 400 min(3.8cqw, 4cqh)/1.35 var(--mono); color: #256A66; word-break: break-all; }
.form--rules .aa { display: flex; align-items: baseline; gap: 5cqw; }
.form--rules .aa1 { font: 500 min(22cqw, 20cqh)/.9 "Ytf Literata", serif; }
.form--rules .aa2 { font: 300 min(18cqw, 17cqh)/.9 "Ytf Josefin", sans-serif; }
.form--rules .sw { display: flex; gap: 0; border: 1px solid #141412; }
.form--rules .sw i { flex: 1; height: 8cqh; }
.form--rules ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4cqh; }
.form--rules li { font: 500 min(5cqw, 5cqh)/1.15 "Ytf Literata", serif; }
.form--rules li b { display: block; font: 600 min(3.4cqw, 3.6cqh)/1.2 "Ytf Josefin", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #B5562B; }
.form--prompt .box { background: #FDFBF6; border: 1px solid #141412; padding: 3cqh 4cqw; display: flex; flex-direction: column; gap: 2.4cqh; }
.form--prompt .files { display: flex; flex-direction: column; gap: 1cqh; }
.form--prompt .files span { align-self: flex-start; font: 400 min(3.8cqw, 3.8cqh)/1 var(--mono); background: #E9DDC4; padding: 1.2cqh 2cqw; }
.form--prompt .ask { display: flex; justify-content: space-between; align-items: center; font: 500 min(5cqw, 5cqh)/1.1 "Ytf Literata", serif; }
.form--prompt .ask b { font: 700 min(5cqw, 5cqh)/1 var(--ui); background: #141412; color: #F3EAD7; width: min(8cqw, 8cqh); aspect-ratio: 1; display: grid; place-items: center; flex: none; }


/* ============================================================ SMALL SCREENS
   The same film on a portrait stage, not the desktop shrunk: the client's
   picture across the top as the thing everyone is aiming at, the four
   guesses in a 2×2 below it, each label under its card (never on top of
   the picture), one line of dialogue at a time, and the Mix taking the 2×2
   while the client stays in view. Sizes are fluid with the same floors. */
@container ytf (max-aspect-ratio: 1/1) {
  .ytf__head { top: 4cqh; }
  .ytf__brief q, .ytf__point { font-size: max(24px, 8cqi); }
  .ytf__talk { grid-template-columns: 1fr; }
  .ytf__talk p, .ytf__talk p:nth-child(n), .ytf__talk .ytf__yes { grid-column: 1; }
  /* one line at a time; the client's repeat of the brief is carried by "Same brief" */
  .ytf__talk p:first-child { display: none; }
  .ytf__talk p:has(~ p.is-on) { opacity: 0; }
  .ytf__talk q { font-size: max(20px, 7cqi); }
  .ytf__talk .ytf__yes q { font-size: max(44px, 15cqi); }

  .ytf__table { grid-template-columns: 1fr 1fr; grid-template-rows: .8fr 1fr 1fr; gap: 3.2cqi 3cqi; }
  .ytf__seat--client { grid-column: 1 / -1; margin: 0; }
  .ytf__seat--client::after { display: none; }
  .ytf__label { margin-top: 1.2cqi; }
  .ytf__back span { font-size: 12cqi; }
  /* half the tilt: in a 2×2 the cards sit close and must not cover the client's picture */
  .ytf__seat--am { --tilt: -1.1deg !important; } .ytf__seat--designer { --tilt: .8deg !important; }
  .ytf__seat--dev { --tilt: -.6deg !important; } .ytf__seat--ai { --tilt: 1.2deg !important; }
  .ytf__stage[data-phase="scatter"] .ytf__seat:not(.ytf__seat--client) .ytf__flip { transform: translate(calc((var(--i) - 2.5) * 10%), 6%) rotate(calc(var(--tilt) * 4)); }

  /* the Mix covers the 2×2, from under the client's row to the shared line */
  .ytf__desk {
    left: 5cqi; right: 5cqi;
    top: calc(var(--tt) + (100cqh - var(--tt) - var(--tb)) * .8 / 2.8 + 1cqi);
    grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 3cqi; padding: 3.4cqi;
  }
  .ytf__mixh { margin-bottom: 2cqi; }
  .ytf__chips { grid-template-columns: auto auto; justify-content: start; gap: 2cqi; }
  .ytf-chip { grid-column: auto; }
  .ytf-chip--memphis, .ytf-chip--mcm { grid-row: 1; grid-column: 2; }
  .ytf__search { display: none; }

  .ytf__cap { bottom: 1.6cqh; right: 5cqi; }
  .ytf__cap > span { right: 0; }
  .ytf__cap--big em { display: block; margin: .4em 0 0; }
  .ytf__cap:has(.ytf__cap--big.is-on) { height: calc(var(--f-big) * 1.1 + var(--f-cap) * 1.6); }

  .ytf__end { top: 4cqh; }
  .ytf__e1 { font-size: max(16px, 4.6cqi); }
  .ytf__e2 { font-size: max(32px, 11.5cqi); }
}
@container ytf (max-aspect-ratio: 1/1) {
  /* portrait geometry, set on the stage's children (a container can't restyle itself) */
  .ytf__head { height: calc(30cqh - 6cqh); }
  .ytf__table { top: 30cqh; bottom: 15cqh; --tt: 30cqh; --tb: 15cqh; }
  .ytf__desk { --tt: 30cqh; --tb: 15cqh; --pg: 3cqi; }
  .ytf__point--thesis { display: block; }
  .ytf__cap .ytf__cap--thesis { display: none; }
  .ytf__table { --pg: 3cqi; }
}

/* ========================================================= REDUCED MOTION
   No clock runs (film.js). Frames change in place, with no travel. */
@media (prefers-reduced-motion: reduce) {
  .ytf *, .ytf *::before, .ytf *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}