/* ---------- the ideas on trial ---------- */
/* Styling for the ideas listed in docs/IDEAS.md. The page carries a class for every idea that is switched
   on (.x-marker, .x-coffee and so on), so an idea that is off leaves the site exactly as it was.
   Everything she draws is in the site's one red, so the rule of the look still holds: black, white, red, and her. */
:root {
  --hand: "Caveat Brush", "Segoe Print", "Bradley Hand", cursive; /* her handwriting */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* ---------- shared: her marker drawings, small copies of her, things pinned to her ---------- */
.wob { position: absolute; }
.doodle {
  display: block; width: 100%; height: auto; overflow: visible;
  fill: none; stroke: var(--red); stroke-width: 5.5; filter: url(#wob);
}
.doodle--big { stroke-width: 3.6; }
/* a drawing starts blank and draws itself in, stroke after stroke */
.doodle path, .mk__ink path { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; }
.doodle.is-drawn path, .is-inked .mk__ink path, .is-inked .doodle path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i) * .14s);
}
.mini { display: inline-block; height: var(--mh, 60px); pointer-events: none; user-select: none; -webkit-user-select: none; }
.mini img { display: block; height: 100%; width: auto; }

.pins { position: fixed; left: 0; top: 0; z-index: 12; width: 0; height: 0; pointer-events: none; }
.pins > * { position: absolute; left: 0; top: 0; }
/* a prop is placed from the point it is pinned to; --u is one hundredth of her height */
.prop { --u: 6px; }
.prop > svg { position: absolute; }
.prop--steam > svg { width: calc(var(--u) * 5); left: calc(var(--u) * -2.5); bottom: calc(var(--u) * .4); }
.prop--mask > svg { width: calc(var(--u) * 11.4); left: calc(var(--u) * -5.7); top: calc(var(--u) * -5.3); }
.prop--zzz > svg { width: calc(var(--u) * 9); left: calc(var(--u) * 1); bottom: calc(var(--u) * 1); animation: zzz 2.4s ease-in-out infinite alternate; }
.prop--zzz em {
  position: absolute; left: calc(var(--u) * -4); bottom: calc(var(--u) * 11.5); white-space: nowrap; rotate: -6deg;
  font: 400 max(17px, calc(var(--u) * 3))/1 var(--hand); color: var(--red);
}
.prop--zzz.is-side > svg { left: calc(var(--u) * 9); bottom: calc(var(--u) * -8); }
.prop--zzz.is-side em { left: calc(var(--u) * 19); bottom: calc(var(--u) * -4); }
@keyframes zzz { from { transform: translateY(0); } to { transform: translateY(calc(var(--u) * -1.2)); } }
.prop--arrow > svg { width: calc(var(--u) * 13); left: calc(var(--u) * 3); top: calc(var(--u) * -7.5); }
.prop--held > svg { width: calc(var(--u) * 15); left: calc(var(--u) * 1); top: calc(var(--u) * -9); }
.prop--held.prop--mask > svg { width: calc(var(--u) * 11.4); left: calc(var(--u) * -5.7); top: calc(var(--u) * -5.3); }
.prop--held.prop--phone > svg { width: calc(var(--u) * 9); left: calc(var(--u) * -1.5); top: calc(var(--u) * -6.5); rotate: 14deg; }

/* ---------- her body: leaning, turning her head, being picked up ---------- */
.cast__in { transform-origin: 50% 100%; }
.head { /* a second copy of the picture showing only her head, which turns on her neck */
  -webkit-mask-image: radial-gradient(ellipse var(--hrx) var(--hry) at var(--hx) var(--hy), #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--hrx) var(--hry) at var(--hx) var(--hy), #000 58%, transparent 100%);
  pointer-events: none;
}
.on-her, .on-her * { cursor: grab; }
.has-her, .has-her * { cursor: grabbing !important; }

/* ---------- point ---------- */
.is-ready.is-pointing .hello__hint { opacity: 0; transition: opacity .3s linear; }

/* ---------- talk: her speech bubble ---------- */
.bubble { z-index: 1; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s .16s; }
.bubble.is-on { opacity: 1; visibility: visible; transition: opacity .16s ease; }
.bubble__box { /* sits up and to the right of the point it is pinned to, and its tail comes down to that point */
  position: absolute; left: 12px; bottom: 15px;
  display: flex; align-items: center; gap: .7em;
  width: max-content; max-width: min(17.5rem, 64vw); padding: .68em .95em .74em;
  background: #fff; color: #000; border: 2px solid #000; border-radius: 16px;
  font: 600 .95rem/1.3 var(--text);
  transform: scale(.95); transform-origin: 0 100%; transition: transform .2s var(--ease-out);
}
.bubble.is-on .bubble__box { transform: none; }
.bubble__box::before, .bubble__box::after { content: ""; position: absolute; left: 12px; top: 100%; border-style: solid; border-color: #000 transparent transparent; border-width: 15px 16px 0 0; }
.bubble__box::after { left: 14px; margin-top: -2.5px; border-top-color: #fff; border-width: 11px 11.500px 0 0; }
.bubble--left .bubble__box { left: auto; right: 12px; transform-origin: 100% 100%; }
.bubble--left .bubble__box::before { left: auto; right: 12px; border-width: 15px 0 0 16px; }
.bubble--left .bubble__box::after { left: auto; right: 14px; border-width: 11px 0 0 11.500px; }
.bubble--over .bubble__box { left: 0; translate: -50% 0; transform-origin: 50% 100%; }
.bubble--over .bubble__box::before { left: calc(50% - 2px); }
.bubble--over .bubble__box::after { left: 50%; }
.bubble__rest { visibility: hidden; } /* the words still to come hold the bubble's shape */
.bubble__art:empty { display: none; }
.bubble__art { flex: 0 0 auto; width: 3.2em; }
.bubble--todo .bubble__box { border-style: dashed; font-weight: 500; font-size: .8rem; }

/* ---------- facts: the lines come as answers ---------- */
.x-facts .about__facts li > span { display: none; }
.x-facts .about__facts li.is-open > span { display: block; padding-top: .15em; }
.fact {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em; width: 100%;
}
.fact::after { content: "+"; font-weight: 500; opacity: .7; }
.is-open > strong .fact::after { content: "\2212"; }
.fact:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- carry: the "Hello" comes up on her head, then its letters wobble ---------- */
/* (the word waits below the screen exactly as far down as she does, and rises on the same curve, so it stays on her head) */
.x-carry .hello__word { transform: translateY(calc(var(--tall) * 1.04)); }
.x-carry .is-ready .hello__word { transform: none; transition: transform 1.050s var(--spring) .75s; }
.x-carry .hello__word .ch { opacity: 1; translate: 0 0; transition: none; transform-origin: 50% 88%; }
.x-carry .hello__word .ch:nth-child(even) { --w: -1; }
.x-carry .is-ready .hello__word .ch { animation: wobble 1s var(--ease-out) calc(1.550s + var(--n) * .07s) both; }
.x-carry .is-ready .hello__word .ch.is-wob { animation: wobble-again .8s var(--ease-out) both; } /* a second name, so that hovering a letter starts it afresh */
@keyframes wobble {
  0%, 100% { transform: none; }
  22% { transform: translateY(-.07em) rotate(calc(var(--w, 1) * -5deg)); }
  48% { transform: translateY(.015em) rotate(calc(var(--w, 1) * 3.5deg)); }
  74% { transform: rotate(calc(var(--w, 1) * -1.5deg)); }
}
@keyframes wobble-again {
  0%, 100% { transform: none; }
  22% { transform: translateY(-.07em) rotate(calc(var(--w, 1) * -5deg)); }
  48% { transform: translateY(.015em) rotate(calc(var(--w, 1) * 3.5deg)); }
  74% { transform: rotate(calc(var(--w, 1) * -1.5deg)); }
}

/* ---------- marker: her red marks on the page ---------- */
.mk { position: relative; }
.mk--circle { white-space: nowrap; }
.mk__ink { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: var(--red); stroke-width: 2.6; filter: url(#wob); }
.mk__sign { position: absolute; right: 100%; top: 50%; width: 1em; margin: -.55em .2em 0 0; stroke-width: 9; }
.mk__note {
  position: absolute; left: 50%; translate: -35% 0; white-space: nowrap; rotate: -4deg;
  font: 400 1.5em/1 var(--hand); letter-spacing: 0; text-transform: none; color: var(--red);
  opacity: 0; transition: opacity .3s linear calc(var(--d, 0s) + .45s);
}
.is-inked > .mk__note { opacity: 1; }

/* ---------- coffee: her cup, at the right edge, draining as the site goes by ---------- */
.coffee, .coffee-cup { position: fixed; right: 12px; top: 50%; z-index: 9; width: 28px; translate: 0 -50%; pointer-events: none; }
.coffee svg, .coffee-cup svg { display: block; width: 100%; }
.coffee__drink { fill: var(--red); stroke: none; }
.coffee-cup { stroke: #fff; mix-blend-mode: difference; } /* white on the black slides, black on the white ones */
.coffee-cup svg { stroke-width: 3; }

/* ---------- navWalker: a tiny Khushi on the menu ---------- */
.nav__her { position: absolute; left: 0; bottom: calc(100% - 3px); --mh: 30px; margin-left: -9px; transition: transform .65s var(--ease-in-out); }
.nav__her img { transform-origin: 50% 100%; }
.nav__her.is-back img { scale: -1 1; }
.nav__her.is-walking img { animation: tiny-step .2s ease-in-out infinite alternate; }
@keyframes tiny-step { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-2px) rotate(4deg); } }
@media (min-width: 821px) { .x-navWalker .nav { top: 32px; } }
@media (max-width: 820px) { .nav__her { display: none; } }

/* ---------- clips: a looping clip over a still, and until clips exist a slow breath ---------- */
.clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
.has-clip .fig { visibility: hidden; }
.x-clips .fig { transform-origin: 50% 100%; animation: breathe 4.4s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.003, 1.008); } }

/* ---------- perch: a small Khushi sitting on the Social heading ---------- */
#social-h, #decks-h { position: relative; }
.perch { position: absolute; right: -.12em; bottom: .7em; --mh: 1.3em; }

/* ---------- cinema: the sign over the social heading ---------- */
.marquee {
  display: block; width: max-content; margin-bottom: 1.1em; padding: .62em 1.1em .55em;
  border: 2.5px dotted currentColor; border-radius: 5px; /* a row of bulbs */
  font-size: clamp(.6rem, .95vw, .8rem); font-weight: 800; font-stretch: 116%; line-height: 1; letter-spacing: .24em;
}

/* ---------- road: experience as a road from 2022 to 2026 ---------- */
.journey__list.is-road { position: relative; padding-left: 36px; }
.journey__list.is-road::before { /* the road, with a broken white line down the middle */
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 16px; border-radius: 8px;
  background: repeating-linear-gradient(#fff 0 9px, transparent 9px 18px) 50% 0 / 1.5px 100% no-repeat, #2b2b2b;
}
.is-road > li { position: relative; }
.is-road > li::before { /* a stop on the road */
  content: ""; position: absolute; left: -29px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px #2b2b2b;
}
.road__year { /* a signpost where a new year begins */
  position: absolute; z-index: 1; left: -38px; top: .5em; width: 26px; padding: .3em 0 .25em; border-radius: 3px;
  background: #fff; color: #000; text-align: center; font-size: .78em; font-weight: 800; line-height: 1;
}
.road__her { position: absolute; z-index: 2; left: 1px; top: -24px; --mh: 38px; transition: transform .5s var(--ease-in-out); }
.road__her img { transform-origin: 50% 100%; }
.road__her.is-walking img { animation: tiny-step .2s ease-in-out infinite alternate; }

/* ---------- typing: the experience text writes itself as she types ---------- */
.is-untyped li > :not(.road__year):not(.is-typing):not(.is-typed) { visibility: hidden; }
.untyped { visibility: hidden; } /* the words still to come hold the line's shape */
.is-typing > span:first-child::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 1px; vertical-align: -.14em; background: currentColor; }

/* ---------- stickers: brand logos on her laptop lid ---------- */
.lid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; stroke: none; }
.lid rect { stroke: rgba(0, 0, 0, .28); stroke-width: 1; }
.sticker { opacity: .94; animation: stick .3s linear backwards; animation-delay: calc(var(--n) * 45ms); }
@keyframes stick { from { opacity: 0; } }

/* ---------- brands: hearts that land, logos that pour in, a peek over the wall ---------- */
.flyheart { position: fixed; left: 0; top: 0; z-index: 11; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none; opacity: 0; }
.flyheart svg { display: block; width: 100%; fill: var(--red); stroke: none; }
.tile.is-loved { filter: none; animation: loved .5s var(--ease-out); }
@keyframes loved { 35% { scale: 1.12; } }
.x-pour .wall:not(.is-poured) .tile { opacity: 0; }
.x-peek .wall__group { position: relative; }
.peek { /* a window above the logo being looked at; her head rises into it from behind the logo */
  position: absolute; z-index: 1; width: var(--tile); height: calc(var(--tile) * .46); margin-top: calc(var(--tile) * -.46);
  overflow: hidden; pointer-events: none;
}
.peek i {
  position: absolute; left: 19%; top: 0; width: 62%; height: 100%;
  background: var(--face) 59.6% 1.1% / 200% auto no-repeat;
  transform: translateY(102%); transition: transform .28s var(--ease-out);
}
.peek.is-up i { transform: translateY(6%); }

/* ---------- spotlight: the lights go down on the "serious work" slide ---------- */
.x-spotlight .serious { transition: background-color 1.1s linear; }
.x-spotlight .serious:not(.is-spot) { background-color: #1f1f1f; } /* house lights up, until she is ready */
.x-spotlight .serious::before, .x-spotlight .serious::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.1s linear; }
.x-spotlight .serious::before { /* the beam */
  background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
  clip-path: polygon(calc(var(--sx) - var(--sw) * .14) 0, calc(var(--sx) + var(--sw) * .14) 0, calc(var(--sx) + var(--sw) * .95) 100%, calc(var(--sx) - var(--sw) * .95) 100%);
}
.x-spotlight .serious::after { background: radial-gradient(ellipse calc(var(--sw) * 1) 5svh at var(--sx) 99.500%, rgba(255, 255, 255, .42), transparent 72%); } /* the pool of light at her feet */
.x-spotlight .serious.is-spot::before, .x-spotlight .serious.is-spot::after { opacity: 1; }
.cupdown { position: absolute; left: calc(var(--sx) - var(--sw) * .98); bottom: 1.4svh; width: calc(var(--sw) * .3); }

/* ---------- devices: the social slide arrives as a screen that grows to fill the window ---------- */
.has-screen { background: #000; }
.screen { position: relative; min-height: 100%; background: var(--bg); color: var(--fg); }
.is-zooming .screen { box-shadow: 0 0 0 10px #151515, 0 0 0 11.500px #fff; } /* the edge of the screen */
@media (min-width: 821px) { .screen { height: 100%; display: flex; flex-direction: column; overflow: hidden; } }

/* ---------- stories: each social card is a phone playing that brand's reels ---------- */
.feature--phone { cursor: default; }
button.feature__text { appearance: none; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.feature__text:focus-visible { outline-offset: 6px; }
.phone {
  position: relative; display: block; justify-self: center; height: 100%; min-height: 150px; max-width: 100%; aspect-ratio: 9 / 18;
  padding: 7px; border-radius: 28px; background: #000; color: #fff; text-decoration: none;
  transition: translate .3s var(--ease-out);
}
.phone:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.phone__screen { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 21px; background: #222; }
.phone__screen::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.phone__screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: grayscale(1); transition: opacity .25s linear, filter .3s linear;
}
.phone__screen img.is-on { opacity: 1; }
.phone:focus-visible img { filter: none; }
.phone__bars { position: absolute; z-index: 1; left: 9px; right: 9px; top: 10px; display: flex; gap: 3px; }
.phone__bars i { flex: 1; height: 2.500px; border-radius: 2px; background: rgba(255, 255, 255, .42); overflow: hidden; }
.phone__bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.phone__bars b.is-done { transform: none; }
.phone__bars b.is-now { animation: story var(--dur, 3.4s) linear both paused; }
.is-playing .phone__bars b.is-now { animation-play-state: running; }
@keyframes story { to { transform: none; } }
.phone__foot { position: absolute; z-index: 1; left: 11px; right: 11px; bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.phone__views { font-size: .78rem; font-weight: 600; line-height: 1; }
.phone__views b { margin-right: .1em; font: 500 1.9em/1 var(--display); }
.phone__tap { font-size: .56rem; font-weight: 800; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .phone:hover { translate: 0 -6px; }
  .phone:hover img { filter: none; }
}

/* ---------- the brand page: street posters, polaroids on a line, a ribbon, sorting ---------- */
.room__sort[hidden] { display: none; }
.pill[aria-pressed="true"] { background: var(--fg, #000); color: var(--bg, #fff); }
/* reels pasted up like posters, each a little crooked, with a strip of tape */
.shelf--street { padding-top: 34px; }
.shelf--street .work--poster .work__tile { overflow: visible; rotate: var(--tilt); border: 0; border-radius: 1px; box-shadow: 0 0 0 5px #fff, 0 0 0 6.500px var(--fg, #000); }
.shelf--street .work--poster .work__tile img { border-radius: 1px; }
.shelf--street .work--poster .work__tile::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: -14px; width: 36%; height: 20px; translate: -50% 0; rotate: -3deg;
  background: rgba(150, 150, 150, .6);
}
/* posts as polaroids pegged to a line, swaying */
.shelf--street .work--polaroid { position: relative; padding-top: 30px; }
.shelf--street .work--polaroid::before { content: ""; position: absolute; left: -1.500vw; right: -1.500vw; top: 13px; border-top: 1.500px solid var(--fg, #000); }
.shelf--street .work--polaroid .work__open { transform-origin: 50% 0; rotate: var(--tilt); animation: sway var(--sway, 4s) ease-in-out infinite alternate; }
.shelf--street .work--polaroid .work__tile { overflow: visible; background: #fff; border: solid #fff; border-width: 8px 8px 36px; border-radius: 2px; box-shadow: 0 0 0 1px var(--fg, #000); }
.shelf--street .work--polaroid .work__tile::before { /* the peg */
  content: ""; position: absolute; z-index: 2; left: 50%; top: -30px; width: 9px; height: 26px; translate: -50% 0; border-radius: 2px;
  background: var(--fg, #000); box-shadow: 0 0 0 1.500px var(--bg, #fff);
}
.shelf--street a.work__open:hover .work__tile { translate: none; }
@keyframes sway { from { rotate: calc(var(--tilt) - 1.6deg); } to { rotate: calc(var(--tilt) + 1.6deg); } }
/* cinema: her credit along the foot of each poster, and the views as the box office */
.poster__credit {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 2.6em .7em .7em;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #fff; text-align: center;
  font-size: .64rem; font-weight: 800; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
}
.poster__credit small { display: block; margin-bottom: .3em; font-size: .86em; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.shelf--cinema .work--reel .work__views::before {
  content: "Box office"; display: block; font: 800 .6rem/1.5 var(--text); letter-spacing: .12em; text-transform: uppercase; opacity: .75;
}
.ribbon {
  position: absolute; z-index: 3; left: 0; top: 16px; padding: .42em .9em .36em .7em;
  background: var(--red); color: #fff; font-size: .6rem; font-weight: 800; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
}
.work--poster .ribbon { left: -9px; }
.work__clip { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* devices: a deck on its own sits in a laptop */
.shelf--laptop .work--deck .work__tile { overflow: visible; margin-bottom: 34px; border: solid #151515; border-width: 10px 10px 12px; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1.500px var(--fg, #000); }
.shelf--laptop .work--deck .work__tile::before {
  content: ""; position: absolute; left: -9%; right: -9%; top: calc(100% + 12px); height: 13px; border-radius: 0 0 12px 12px;
  background: #151515; box-shadow: 0 0 0 1.500px var(--fg, #000);
}
/* roomHer: a small Khushi at the foot of her notes, with something of the brand's */
.room__her, .flip__her { --mh: clamp(104px, 19svh, 168px); }
.room__her { position: relative; display: flex; align-items: flex-end; gap: .5em; margin-top: 1.4em; }
.room__her .room__kiss, .room__her.is-kissing .room__stand { display: none; }
.room__her.is-kissing .room__kiss { display: inline-block; }
.room__prop { flex: 0 0 auto; width: calc(var(--mh) * .4); margin-bottom: calc(var(--mh) * .3); }
.room__hearts { position: absolute; left: calc(var(--mh) * .56); top: -4px; display: flex; gap: 5px; }
.room__hearts svg { width: 17px; stroke-width: 9; }

/* ---------- cards: the decks as playing cards ---------- */
.table { perspective: 1500px; }
.card {
  position: absolute; left: 0; top: 0; width: var(--cw, 110px); height: var(--ch, 154px); padding: 0; border: 0; background: none; cursor: pointer;
  --r: calc(var(--cw, 110px) * .39); /* sizes a brand name set in type */
  transition: transform .62s var(--ease-out); transition-delay: calc(var(--n) * 70ms);
}
.card:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.card.is-out { visibility: hidden; }
.card__in { /* face down in the pile; turns face up as it is dealt */
  position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg);
  transition: transform .62s var(--ease-out), translate .2s var(--ease-out); transition-delay: calc(var(--n) * 70ms + 110ms), 0s;
}
.is-dealt .card__in { transform: none; }
.is-settled .card, .is-settled .card__in { transition-delay: 0s; }
.card__face, .card__back { position: absolute; inset: 0; overflow: hidden; border: 2px solid #000; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card__face { display: grid; place-items: center; background: #fff; }
.card__face .badge__face, .flip__front .badge__face { position: relative; inset: auto; width: 78%; aspect-ratio: 1; border: 0; box-shadow: none; }
.card__back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #000 0 5px, #fff 5px 6.500px); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6.500px #000; }
.card:focus-visible .badge__face { filter: none; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__in { translate: 0 -7px; }
  .card:hover .badge__face { filter: none; }
}
.is-shuffling .card:nth-child(odd) { --by: -40px; animation: riffle .3s ease-in-out 3; }
.is-shuffling .card:nth-child(even) { --by: 40px; animation: riffle .3s ease-in-out 3 .05s; }
@keyframes riffle { 50% { translate: var(--by) 0; } }

/* the card picked up: it grows out of its place on the table and turns over */
.flip {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  display: none; place-items: center; overflow: hidden; background: transparent; perspective: 1700px;
}
.flip[open] { display: grid; }
.flip::backdrop { background: rgba(0, 0, 0, 0); transition: background-color .4s linear; }
.flip.is-open::backdrop { background: rgba(0, 0, 0, .74); }
.flip__card {
  --w: min(92vw, 62svh, 30rem);
  width: var(--w); height: calc(var(--w) * 1.4);
  transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, .3)); transition: transform .56s var(--ease-in-out);
}
.flip.is-open .flip__card { transform: none; }
.flip__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .56s var(--ease-in-out); }
.flip.is-open .flip__in { transform: rotateY(180deg); }
.flip__front, .flip__back { position: absolute; inset: 0; overflow: hidden; background: #fff; color: #000; border: 2px solid #000; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__front { display: grid; place-items: center; --r: calc(var(--w) * .39); }
.flip__front .badge__face { filter: none; }
.flip__back { --bg: #fff; --fg: #000; transform: rotateY(180deg); overflow-y: auto; scrollbar-width: thin; padding: clamp(16px, 3svh, 28px) clamp(18px, 2.4vw, 28px) 0; }
.flip__close { position: absolute; right: 14px; top: 13px; }
.flip__count { padding-top: .35em; font-size: .8rem; font-weight: 700; }
.flip__back h2 { margin: .55em 0 0; font: italic 400 clamp(1.8rem, 5svh, 2.9rem)/1 var(--display); overflow-wrap: anywhere; }
.flip__back h3 { margin: 1.2em 0 .45em; font-size: .68rem; font-weight: 800; font-stretch: 112%; letter-spacing: .09em; text-transform: uppercase; }
.flip__back p + p { margin-top: .6em; }
.flip__back > p:not(.flip__count) { font-size: clamp(.82rem, 1.9svh, .95rem); line-height: 1.45; }
.flip__deck { display: block; width: 58%; margin: 1.3em 0 1.2em; color: inherit; text-decoration: none; }
.flip__cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: #000; color: #fff; border-radius: 3px; }
.flip__cover em { padding: 0 8%; text-align: center; font: italic 400 1rem/1.05 var(--display); }
.flip__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .3s linear; }
.flip__deck:hover img, .flip__deck:focus-visible img { filter: none; }
.flip__deck--laptop .flip__cover { margin: 0 7%; border: 7px solid #151515; border-radius: 9px 9px 0 0; } /* devices: the deck opens on her laptop */
.flip__deck--laptop .work__cta { display: block; }
.flip__deck--laptop .work__cta::before { content: ""; display: block; height: 9px; margin-bottom: .9em; border-radius: 0 0 10px 10px; background: #151515; }
.flip__her { position: absolute; right: 12px; bottom: 0; display: flex; align-items: flex-end; pointer-events: none; }
.flip__her .room__prop { order: -1; margin: 0 .2em calc(var(--mh) * .42) 0; }

/* ---------- clicker: a small Khushi beside the Decks heading, and her laser dot ---------- */
.presenter { position: absolute; left: calc(100% + .2em); bottom: -.05em; display: block; --mh: 1.55em; }
.presenter .mini { display: block; }
.presenter__clicker { position: absolute; width: .3em; translate: -30% -78%; rotate: 60deg; }
.presenter__clicker .doodle { stroke-width: 9; }
.laser { position: fixed; inset: 0; z-index: 11; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; transition: opacity .15s linear; }
.laser.is-on { opacity: 1; }
.laser line { stroke: var(--red); stroke-width: 1.2; opacity: .5; }
.laser circle { fill: var(--red); stroke: none; filter: drop-shadow(0 0 5px var(--red)); }

/* ---------- wins: a prop beside each win, confetti, flashes, the trophy lifted ---------- */
.wins__list li.has-prop { position: relative; padding-right: clamp(56px, 6.5vw, 104px); }
.winprop { position: absolute; right: 0; top: clamp(12px, 2.4svh, 24px); width: clamp(44px, 5.2vw, 84px); rotate: 5deg; }
.wins__list li:nth-child(even) .winprop { rotate: -4deg; }
.winprop--frame i { /* her picture, in the frame */
  position: absolute; left: 28%; top: 24%; width: 44%; height: 54%;
  background: #fff var(--face) var(--fx) var(--fy) / var(--fz) auto no-repeat;
}
.confetti { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flashbulb { position: absolute; z-index: 3; width: min(9vw, 130px); translate: -50% -50%; pointer-events: none; animation: flash .7s var(--ease-out) forwards; }
@keyframes flash { 0% { opacity: 0; scale: .6; } 15% { opacity: 1; } 100% { opacity: 0; scale: 1.25; } }
.cast__in.is-flashed { filter: brightness(1.7) contrast(.92); }
.cast__pose:has(.frames[data-pose="trophy"]) { transform-origin: 30% 100%; transition: transform .4s var(--ease-out); }
.cast__pose.is-lifted { transform: translateY(-2.4%) rotate(-2.5deg); }

/* ---------- bye: the phone at her ear, the paper plane, the CV out of her tote ---------- */
.prop--call > svg { width: calc(var(--u) * 8.5); left: calc(var(--u) * -3.2); top: calc(var(--u) * -5.5); rotate: 16deg; }
.prop--cv > svg { width: calc(var(--u) * 11); left: calc(var(--u) * -5.5); top: calc(var(--u) * -11.5); rotate: -8deg; animation: cv-up .5s var(--ease-out) backwards; }
@keyframes cv-up { from { transform: translateY(70%); opacity: 0; } }
.paperplane { position: fixed; left: 0; top: 0; z-index: 12; width: 46px; margin: -23px 0 0 -23px; pointer-events: none; transition: opacity .25s linear; }
.paperplane.is-gone { opacity: 0 !important; }

/* ---------- outtakes: a strip of film on the last slide ---------- */
.outtakes { margin-top: clamp(14px, 3.4svh, 34px); }
.outtakes > p { margin-bottom: .55em; font-size: .68rem; font-weight: 800; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.outtakes ul { /* white film with sprocket holes along both edges */
  display: inline-flex; gap: 6px; padding: 13px 8px;
  background-color: #fff;
  background-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 14px), repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 14px);
  background-size: calc(100% - 8px) 5px; background-position: 4px 4px, 4px calc(100% - 4px); background-repeat: no-repeat;
}
.outtake { position: relative; width: clamp(60px, 9svh, 92px); }
.outtake span { display: block; aspect-ratio: 1; background-color: #d9d9d9; background-repeat: no-repeat; filter: grayscale(1); transition: filter .25s linear; }
.outtake:hover span { filter: none; }
.outtake em { position: absolute; left: 4px; bottom: -3px; rotate: -5deg; font: 400 1.05rem/1 var(--hand); color: var(--red); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.outtake--gap span { display: grid; place-items: center; background: none; border: 1.500px dashed #000; color: #000; filter: none; }
.outtake--gap b { padding: 0 4px; text-align: center; font-size: .5rem; font-weight: 800; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
@media (max-height: 620px) { .outtakes { display: none; } }

/* ---------- the Ideas tab (draft mode only) ---------- */
.ideas { position: fixed; left: 0; top: calc(50% + 40px); z-index: 45; }
.ideas__tab {
  writing-mode: vertical-rl; padding: .9em .35em; cursor: pointer;
  background: var(--red); color: #fff; border: 1px solid #fff; border-left: 0; border-radius: 0 4px 4px 0;
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.ideas__list {
  position: fixed; left: 36px; top: 50%; translate: 0 -50%; width: min(21rem, calc(100vw - 50px)); max-height: 90svh; overflow-y: auto;
  padding: 14px 16px 0; background: #fff; color: #000; border: 2px solid #000; box-shadow: 6px 6px 0 #000; font-size: .8rem; line-height: 1.35;
  --fg: #000; --bg: #fff;
}
.ideas__list[hidden] { display: none; }
.ideas__list > p { font-weight: 700; }
.ideas__list fieldset { margin: .9em 0 0; padding: 0; border: 0; }
.ideas__list legend { padding: 0; margin-bottom: .2em; font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ideas__list label { display: flex; align-items: baseline; gap: .5em; padding: .1em 0; cursor: pointer; }
.ideas__list input { accent-color: #000; }
.ideas__go { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1em; padding: 10px 0 12px; background: #fff; }
.ideas__go .pill { padding: .5em .9em; font-size: .64rem; }
.ideas__go .pill[type="submit"] { background: #000; color: #fff; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  :is(p, li):has(.mk__note) { padding-bottom: 2em; } /* room for a handwritten note where slides stack */
  .coffee, .coffee-cup { right: 5px; width: 20px; }
  .perch { --mh: 1.1em; }
  .phone { min-height: 0; }
  .flip__deck { width: 70%; }
  .ideas__list { left: 30px; }
}