/* ---- Our work: the dealt deck, the websites row and the open card ---- */
/* A dark table under a lamp. The pinned part holds still for the deal; the cards sit on the deck's centre line. */
.sec--work { padding-top: 0; padding-bottom: clamp(72px, 11vh, 128px);
  background: radial-gradient(90% 70% at 50% 62%, #1B2130 0%, #10141B 46%, #0B0D10 100%); }
.work__track { position: relative; }
.is-pinned .work__track { height: 250vh; }
.work__pin { padding-top: clamp(104px, 15vh, 176px); }
.is-pinned .work__pin { position: sticky; top: 0; height: 100vh; padding-top: clamp(84px, 11vh, 120px); display: flex; flex-direction: column; overflow: clip; }
.work__head { margin-bottom: clamp(20px, 4vh, 48px); }
.work__head h2 { font-size: clamp(42px, 5.6vw, 96px); }

.deck { --cw: clamp(208px, min(19vw, calc((100vh - 290px) * .716)), 330px); list-style: none; padding: 0; margin: 0; }
#deck { position: relative; flex: 1; display: flex; justify-content: center; gap: clamp(14px, 1.6vw, 26px); }
.wslot { --flip: 0deg; --sweep: .5; position: relative; width: var(--cw); aspect-ratio: 63 / 88; }
.is-pinned #deck .wslot { position: absolute; left: 50%; top: 46%; margin: calc(var(--cw) * -.66) 0 0 calc(var(--cw) / -2); will-change: transform; }
.wslot.is-away { visibility: hidden; }

/* ---- The intro: the cards wait as a fanned pack and are thrown into the fan (work/intro.js) ---- */
/* The canvas lies over the pinned screen, under the cards. A card waiting in the pack is drawn in 3D, so its real
   button is hidden until it leaves the pack. */
.work__hands { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.wslot.is-held { opacity: 0; pointer-events: none; }
/* Unpinned (phones, and short wide windows: the query is `wide` in deck.js), the pack deals once over the whole screen
   when the row arrives, then goes. It stays behind the cards it throws (the cards in flight sit at z-index 5). */
.sec--work:not(.is-pinned) .work__hands { position: fixed; display: none; }
.sec--work:not(.is-pinned) .work__pin.is-dealing .work__hands { display: block; }

/* ---- One card ---- */
.wcard { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: calc(var(--cw) * .07); -webkit-tap-highlight-color: transparent;
  perspective: 1400px; } /* on the flip's own parent: the slot's perspective never reached through the button */
.wcard:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.wcard__flip, .wcard__in { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
/* --tx tips the card back as it leaves the pack (the pack leans away), and eases to flat in flight. */
.wcard__flip { transform: rotateX(var(--tx, 0deg)) rotateY(var(--flip)); }
.wcard__in { --tilt: 0deg; --lift: 0px; border-radius: inherit;
  transform: translateZ(var(--lift)) rotateY(calc((var(--px, var(--sweep)) - .5) * var(--tilt))) rotateX(calc((var(--py, .4) - .5) * var(--tilt) * -1));
  transition: transform .6s var(--out); }
.wcard:hover .wcard__in, .wcard:focus-visible .wcard__in { --tilt: 20deg; --lift: 36px; transition: transform .18s ease-out; }
.wcard__face, .wcard__back { position: absolute; inset: 0; border-radius: calc(var(--cw) * .07); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.wcard__face { display: flex; flex-direction: column; gap: calc(var(--cw) * .03); padding: calc(var(--cw) * .06); background: var(--g); color: var(--f);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--f) 14%, transparent), inset 0 1px 0 rgb(255 255 255 / .25), 0 30px 60px -28px rgb(0 0 0 / .85), 0 8px 18px -10px rgb(0 0 0 / .6); }
.wcard__back { transform: rotateY(180deg); display: grid; place-items: center; background: #0E1013; color: #fff;
  box-shadow: inset 0 0 0 calc(var(--cw) * .035) #16191F, inset 0 0 0 calc(var(--cw) * .04) rgb(255 255 255 / .1), 0 30px 60px -28px rgb(0 0 0 / .85); }
/* The real logo (work/mark.js), the same size as on the 3D card in the pack (LOGO_W in hands.js). */
.wcard__logo { display: block; width: calc(var(--cw) * .62); height: auto; }
.wcard--site .wcard__logo { width: calc(var(--cw) * .44); }

.wcard__top { display: flex; align-items: center; gap: calc(var(--cw) * .04); }
.wcard__icon { width: calc(var(--cw) * .15); height: calc(var(--cw) * .15); border-radius: 24%; box-shadow: 0 4px 12px -4px rgb(0 0 0 / .45); }
.wcard__name { flex: 1; min-width: 0; font-size: calc(var(--cw) * .085); font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.wcard__no { align-self: flex-start; font: 500 calc(var(--cw) * .036)/1 var(--mono); opacity: .55; }
.wcard__type { font: 500 calc(var(--cw) * .034)/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.wcard__art { position: relative; flex: 1; min-height: 0; border-radius: calc(var(--cw) * .035); overflow: hidden; background: color-mix(in srgb, var(--f) 10%, var(--g));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 18%, transparent); }
.wcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.wcard__art.is-wide img { object-position: 50% 50%; }
.wcard__hook { font-size: calc(var(--cw) * .052); font-weight: 620; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.wcard__stats { display: grid; }
.wcard__stat { display: flex; align-items: center; gap: 8px; padding: calc(var(--cw) * .016) 0; border-top: 1px solid color-mix(in srgb, var(--f) 16%, transparent); font-size: calc(var(--cw) * .04); font-weight: 560; letter-spacing: -.01em; }
.wcard__stat::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: linear-gradient(135deg, var(--f1), var(--f2), var(--f3)); }
.wcard__badge { margin-top: 2px; padding: calc(var(--cw) * .022) calc(var(--cw) * .03); border-radius: calc(var(--cw) * .025); font: 600 calc(var(--cw) * .034)/1.25 var(--mono); letter-spacing: -.01em;
  color: #0E1013; background: linear-gradient(110deg, color-mix(in srgb, var(--f1) 70%, #fff), color-mix(in srgb, var(--f2) 60%, #fff), color-mix(in srgb, var(--f3) 70%, #fff)); }
/* The cue, on every card all the time (Nico, 2026-11-11): a pill that hangs off the card's foot, with a dot in the
   card's foil colours that pulses like a live light. It hides only while a dealt card still shows its back. */
.wcard__open { position: absolute; left: 50%; bottom: 0; z-index: 4; translate: -50% 50%; display: flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 99px;
  white-space: nowrap; font: 600 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: rgb(14 16 19 / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 10px 22px -10px rgb(0 0 0 / .8);
  transition: opacity .3s, background .25s, color .25s, translate .3s var(--out); }
.wcard__open i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--f1), var(--f2), var(--f3)); animation: wlive 2.2s ease-out infinite; }
@keyframes wlive { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .6); } 70%, 100% { box-shadow: 0 0 0 7px rgb(255 255 255 / 0); } }
.wcard:hover .wcard__open, .wcard:focus-visible .wcard__open { background: #fff; color: #0E1013; translate: -50% 40%; }
#deck .wslot:not(.is-up) .wcard__open { opacity: 0; }

/* The foil: a band of the product's own colours that slides with the pointer (or with the deal, before anyone points),
   a fine holo grain, and a soft glare where the light is. */
.wcard__foil, .wcard__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.wcard__foil { --x: calc(var(--px, var(--sweep)) * 100%); --y: calc(var(--py, .4) * 100%);
  background: repeating-linear-gradient(62deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 5px),
    linear-gradient(118deg, transparent 18%, var(--f1) 34%, var(--f2) 48%, var(--f3) 62%, transparent 80%);
  background-size: 100% 100%, 280% 280%; background-position: 0 0, var(--x) var(--y);
  mix-blend-mode: color-dodge; opacity: .26; transition: opacity .45s; }
.wcard__glare { background: radial-gradient(circle at calc(var(--px, var(--sweep)) * 100%) calc(var(--py, .3) * 100%), rgb(255 255 255 / .55), transparent 46%); mix-blend-mode: soft-light; opacity: .35; transition: opacity .45s; }
.wcard:hover .wcard__foil, .wcard:focus-visible .wcard__foil { opacity: .6; }
.wcard:hover .wcard__glare, .wcard:focus-visible .wcard__glare { opacity: .9; }

/* ---- The websites row: wide cards with each site's own hero ---- */
.work__sites { margin-top: clamp(48px, 9vh, 104px); }
.work__sub { font-size: clamp(30px, 3vw, 48px); font-weight: 620; letter-spacing: -.04em; line-height: 1; }
.work__sites .work__more { margin-top: 10px; }
.deck--sites { --cw: clamp(260px, 26vw, 420px); display: grid; grid-template-columns: repeat(3, var(--cw)); justify-content: center; gap: clamp(14px, 1.6vw, 26px); }
.wslot--site { aspect-ratio: 10 / 9; opacity: 0; translate: 0 40px; transition: opacity .8s var(--out), translate .9s var(--out); }
.deck--sites.is-in .wslot--site { opacity: 1; translate: 0 0; }
.deck--sites.is-in .wslot--site:nth-child(2) { transition-delay: .08s; } .deck--sites.is-in .wslot--site:nth-child(3) { transition-delay: .16s; }
.wcard--site .wcard__face { gap: calc(var(--cw) * .028); padding: calc(var(--cw) * .04); }
.wcard--site .wcard__art { flex: none; aspect-ratio: 16 / 10; }
.wcard--site .wcard__art img { object-position: 50% 0; }
.wcard--site .wcard__top { justify-content: space-between; align-items: baseline; margin-top: calc(var(--cw) * .012); }
.wcard--site .wcard__name { flex: none; font-size: calc(var(--cw) * .07); }
.wcard--site .wcard__type { text-align: right; }
.wcard--site .wcard__hook { font-size: calc(var(--cw) * .044); opacity: .86; }
/* A site card is a screen, so its sheen is a glass reflection: a white band that can only lighten. The product foil
   (colour-dodge in the card's own colours) laid a dark grey diagonal over Morrow's countdown (Nico, 2026-11-10). */
.wcard--site .wcard__foil { background: linear-gradient(112deg, transparent 36%, rgb(255 255 255 / .05) 43%, rgb(255 255 255 / .26) 50%, rgb(255 255 255 / .05) 57%, transparent 64%);
  background-size: 300% 300%; background-position: var(--x) var(--y); mix-blend-mode: screen; opacity: 0; }
.wcard--site:hover .wcard__foil, .wcard--site:focus-visible .wcard__foil { opacity: 1; }

/* The line under a row's title. */
.work__more { margin-bottom: 22px; font: 500 14px/1.4 var(--mono); opacity: .66; }

.work__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(48px, 8vh, 88px); }
.work__foot p { font-size: clamp(20px, 1.9vw, 30px); font-weight: 550; letter-spacing: -.03em; }

/* The ghost card that carries the flip between the deck and the open view. */
.wghost { position: fixed; z-index: 2147483000; pointer-events: none; --flip: 0deg; --cw: 300px; border-radius: 7%; }
.wghost .wcard__in { transform: none; }
.wghost .wcard__face, .wghost .wcard__back { border-radius: 7%; }

/* ---- The open card ---- */
.case { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(16px, 3vw, 48px); border: 0; background: transparent; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 56px); opacity: 0; transition: opacity .35s; overflow: hidden; }
.case:not([open]) { display: none; }
.case.is-open { opacity: 1; }
.case::backdrop { background: rgb(8 9 12 / .78); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
/* The 3D view covers the whole open card, behind the panel, so a pair turned by hand never meets an edge. The stage
   is only the frame the camera fits the pair into, and the surface that takes the drag. */
.case__phone { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.case__stage { position: relative; z-index: 1; height: min(84vh, 860px); display: grid; touch-action: pan-y; cursor: grab; }
.case__stage.is-grab { cursor: grabbing; }
.case__still { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; }
.case__hint { position: absolute; left: 50%; top: 0; translate: -50% 0; font: 500 12px/1 var(--mono); opacity: .5; }
.case__text { position: relative; z-index: 2; max-height: 88vh; overflow: auto; padding: clamp(24px, 3vw, 44px); border-radius: clamp(24px, 2.4vw, 36px); background: var(--g); color: var(--f);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--f) 12%, transparent), 0 40px 90px -40px rgb(0 0 0 / .8); }
.case__type { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.case__name { margin-top: 10px; font-size: clamp(40px, 4.4vw, 72px); font-weight: 650; letter-spacing: -.05em; line-height: .95; }
.case__hook { margin-top: 10px; font-size: clamp(19px, 1.6vw, 26px); font-weight: 560; letter-spacing: -.025em; }
.case__badge { margin-top: 18px; padding: 12px 14px; border-radius: 14px; font: 600 14px/1.35 var(--mono); color: #0E1013;
  background: linear-gradient(110deg, color-mix(in srgb, var(--f1) 70%, #fff), color-mix(in srgb, var(--f2) 60%, #fff), color-mix(in srgb, var(--f3) 70%, #fff)); }
.case__stats { margin-top: 18px; padding: 0; list-style: none; display: grid; }
.case__stats li { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--f) 16%, transparent); font-size: 17px; font-weight: 560; }
.case__back { margin-top: 16px; font-size: 16px; line-height: 1.45; opacity: .86; max-width: 46ch; }
.case__proves { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--f) 8%, transparent); font-size: 16px; line-height: 1.4; }
.case__proves b { display: block; margin-bottom: 4px; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.case__close { position: absolute; top: clamp(14px, 2.4vw, 32px); right: clamp(14px, 2.4vw, 32px); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; transition: background .25s, rotate .4s var(--out); }
.case__close:hover { background: rgb(255 255 255 / .22); rotate: 90deg; } .case__close svg { width: 14px; height: 14px; }
.case__close { z-index: 3; }
.case__close:focus-visible, .case__go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.case__web:focus-visible, .case__badgelink:focus-visible, .case__badgea:focus-visible { outline: 2px solid var(--f); outline-offset: 3px; }

/* The native pointer comes back inside the open card. The page's caret cursor lives under the top layer a modal dialog
   draws in, so with html.nocursor the pointer simply vanished here (Nico, 2026-11-10). */
html.nocursor .case { cursor: auto; }
html.nocursor .case a, html.nocursor .case button { cursor: pointer; }
html.nocursor .case .case__stage { cursor: grab; } html.nocursor .case .case__stage.is-grab { cursor: grabbing; }
html:has(.case[open]) .cur { opacity: 0; }
/* The page holds still under the open card. A wheel over it chained to the page and scrubbed the deal behind it. The
   gutter stays reserved, so where a scrollbar takes space the page does not shift sideways when it goes. */
html:has(.case[open]) { overflow: hidden; scrollbar-gutter: stable; }

/* Project to project without closing: a count top left, and an arrow on each side that opens to show where it goes. */
.case__count { position: absolute; z-index: 3; top: clamp(26px, 3.4vw, 46px); left: clamp(20px, 2.6vw, 40px); font: 500 13px/1 var(--mono); letter-spacing: .06em; color: rgb(255 255 255 / .6); }
.case__count b { color: #fff; font-weight: 600; }
/* Liquid glass, dark enough to read on the worst ground it can open over: when it opens toward the panel it covers the
   cream of Brain Stretch, wrappa, Kettlebird and Hushwell (Nico could not read "Aeonborne" over cream, 2026-11-11).
   The backdrop is dimmed to .7 before the tint, so white text holds about 6:1 over cream and more over the dark view.
   A lit rim and a soft lens of light across the top carry the glass; without backdrop-filter it turns solid. */
.case__go { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 0; height: 52px; min-width: 52px; padding: 0 19px; border-radius: 99px;
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; isolation: isolate; text-shadow: 0 1px 2px rgb(0 0 0 / .4);
  background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .03) 55%, rgb(255 255 255 / .06)), rgb(16 18 24 / .56);
  -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(.7); backdrop-filter: blur(18px) saturate(1.8) brightness(.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 -1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px rgb(255 255 255 / .16), 0 14px 32px -14px rgb(0 0 0 / .75);
  transition: background .25s, gap .35s var(--out), box-shadow .25s; }
.case__go::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 2px; height: 45%; border-radius: 99px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .3), rgb(255 255 255 / 0)); }
.case__go--prev { left: clamp(12px, 1.4vw, 24px); } .case__go--next { right: clamp(12px, 1.4vw, 24px); }
.case__go svg { flex: none; width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.case__go span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .4s var(--out), opacity .25s; }
.case__go:hover, .case__go:focus-visible { gap: 10px; background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .05) 55%, rgb(255 255 255 / .08)), rgb(16 18 24 / .6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .24), 0 16px 36px -14px rgb(0 0 0 / .8); }
.case__go:hover span, .case__go:focus-visible span { max-width: 220px; opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .case__go, .case__go:hover, .case__go:focus-visible { background: rgb(22 24 30 / .95); } }

/* The swap between projects: the panel slips out the way you are going, the view dims, and the next pair rises. */
.case__text, .case__phone { transition: opacity .24s, translate .34s var(--out); }
.case.is-swap .case__text { opacity: 0; translate: calc(var(--dir, 1) * -28px) 0; }
.case.is-swap .case__phone { opacity: 0; }

/* The buttons, all on one row (Nico, 2026-11-11). Store links are the stores' own black badges, untouched; every other
   link is the product's "Website" button, built to the same height and corners. Each is --badge tall: at most --cap,
   and less when the row would not fit, because deck.js sets --fit (the row's width in badge heights) and --gaps.
   Clear space between them is a quarter of the badge height (Apple's rule), a tenth on a phone (Apple's rule for very
   limited layouts). Apple's minimum on screen is 40 px; the panel is sized so desktop rows stay at or above it.
   Google's file carries 41 px of its own margin around a 168 px badge, so its image is sized to match Apple's. */
.case__links { --clear: .25; --cap: 44px; container-type: inline-size; display: flex; flex-wrap: nowrap; align-items: center; margin-top: 20px; }
.case__links > * { --badge: min(var(--cap), 100cqi / (var(--fit, 3) + var(--gaps, 0) * var(--clear))); flex: none; }
.case__links > :not(:last-child) { margin-right: calc(var(--badge) * var(--clear)); }
.case__badgelink { display: block; border-radius: calc(var(--badge) * .19); }
.case__badgelink img { display: block; width: auto; max-width: none; height: var(--badge); }
.case__badgelink--google img { height: calc(var(--badge) * 250 / 168); margin: calc(var(--badge) * -41 / 168); }

/* The Website button: the product's mark, then the word, in the product's own colours and type. A sheen crosses it on
   hover. Its width is fixed in badge heights (2.9, WEB_AR in deck.js) so the row's arithmetic holds. */
.case__web { position: relative; display: flex; align-items: center; gap: calc(var(--badge) * .2); width: calc(var(--badge) * 2.9); height: var(--badge);
  padding-left: calc(var(--badge) * .15); border-radius: calc(var(--badge) * .19); overflow: hidden; isolation: isolate;
  background: var(--f); color: var(--g); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  font-size: calc(var(--badge) * .4); font-weight: 600; line-height: 1; letter-spacing: -.015em; white-space: nowrap; transition: translate .3s var(--out), box-shadow .3s; }
.case__web::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; translate: -110% 0; transition: translate .8s var(--out);
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .4) 50%, transparent 70%); }
.case__web:hover { translate: 0 -2px; } .case__web:hover::after { translate: 110% 0; }
.case__web:active { translate: 0 1px; }
.case__webmark { flex: none; display: grid; place-items: center; width: calc(var(--badge) * .66); height: calc(var(--badge) * .66); border-radius: 26%; overflow: hidden; }
.case__webmark img { display: block; width: 100%; height: 100%; }
.case__webglyph { font-size: calc(var(--badge) * .44); line-height: 1; }

/* luō: its gradient and Quicksand, as the panel. */
.case[data-p="luo"] .case__web { background: var(--luo); color: #0D1426; font-family: Quicksand, sans-serif; font-weight: 700; letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 10px 26px -12px rgb(142 113 211 / .9); }
.case[data-p="luo"] .case__webmark { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .6); }
/* Brain Stretch: a chunky game button in the site's navy, with its "play." yellow and a lip that presses in. */
.case[data-p="brainstretch"] .case__web { background: linear-gradient(180deg, #16609A, #0B3A66); color: #FFC531; font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 calc(var(--badge) * -.08) 0 rgb(0 0 0 / .3), inset 0 0 0 1px rgb(255 255 255 / .1), 0 8px 18px -10px rgb(11 58 102 / .9); }
.case[data-p="brainstretch"] .case__web:active { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 calc(var(--badge) * -.03) 0 rgb(0 0 0 / .3), inset 0 0 0 1px rgb(255 255 255 / .1); }
/* Aeonborne: the night teal, a cyan rim with its glow, and the site's spaced capitals. */
.case[data-p="aeonborne"] .case__web { color: #DFFCFF; font-size: calc(var(--badge) * .3); letter-spacing: .16em; text-transform: uppercase;
  background: repeating-linear-gradient(0deg, rgb(0 240 255 / .05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #0D2C30, #04110F);
  box-shadow: inset 0 0 0 1px rgb(0 240 255 / .6), inset 0 0 16px -6px rgb(0 240 255 / .7), 0 0 20px -6px rgb(0 240 255 / .65); }
/* wrappa: wrapping paper (its coral, a fine stripe) with a gold ribbon running under the icon, which sits on it as the bow. */
.case[data-p="wrappa"] .case__web { color: #2A0E0B; font-weight: 700;
  background: linear-gradient(90deg, transparent calc(var(--badge) * .39), #FFC857 0 calc(var(--badge) * .57), transparent 0),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .16) 0 3px, transparent 3px 8px), #FF7A6E;
  box-shadow: inset 0 0 0 1px rgb(120 30 20 / .18), 0 8px 18px -10px rgb(255 107 107 / .9); }
/* The shop sites: each in its own colours, with its initial in its own typeface. */
.case[data-p="kettlebird-web"] .case__web { background: #2A1A12; color: #F6EFE4; font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.01em; }
.case[data-p="kettlebird-web"] .case__webmark { border-radius: 50%; background: #FFDD33; color: #2A1A12; font-family: Fraunces, Georgia, serif; font-weight: 600; }
.case[data-p="morrow-web"] .case__web { background: #D6FF3D; color: #0B0B0C; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: calc(var(--badge) * .42); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.case[data-p="morrow-web"] .case__webmark { border-radius: 4px; background: #0B0B0C; color: #D6FF3D; font-family: Anton, Impact, sans-serif; }
.case[data-p="hushwell-web"] .case__web { background: #173A2C; color: #FBF4EC; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: calc(var(--badge) * .5); letter-spacing: 0; }
.case[data-p="hushwell-web"] .case__webmark { border-radius: 50%; background: #F3C9A6; color: #173A2C; font-family: "Instrument Serif", Georgia, serif; }

/* A badge that links to the page it quotes: the whole strip is the link, with an arrow at its end. */
.case__badgea { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.case__badgea svg { flex: none; width: 12px; height: 12px; margin-top: .25em; transition: translate .3s var(--out); }
.case__badgea:hover svg { translate: 2px -2px; }
.case__logo { display: block; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 26%; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .08); }
.case__logo[hidden] { display: none; }
.case__stats b { font-weight: 700; }

/* luō in its own colours: the navy, Quicksand, and the cyan to purple to orange gradient, read off myluo.app and its
   stylesheet on 2026-11-10 (#17203A, #00E5FF, #8E71D3, #FF7043, mint #67E0A3). Nico: "waaaaay to boring". */
.case[data-p="luo"] .case__text { --luo: linear-gradient(120deg, #00E5FF, #8E71D3 52%, #FF7043); overflow: hidden auto; color: #F2F6FF; background: #17203A;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .1), 0 40px 90px -40px rgb(0 0 0 / .85), 0 0 120px -30px rgb(142 113 211 / .55); }
/* The colour sits inside the panel's own box and drifts by background position. A layer larger than the panel (it was
   inset -30%) gave the panel 185 px of empty scroll below its links. */
.case[data-p="luo"] .case__text::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(36% 32% at 13% 8%, rgb(0 229 255 / .38), transparent 70%), radial-gradient(39% 34% at 85% 25%, rgb(142 113 211 / .55), transparent 72%),
    radial-gradient(43% 36% at 68% 91%, rgb(255 112 67 / .4), transparent 70%);
  background-size: 150% 150%; background-position: 40% 40%; animation: luoDrift 22s ease-in-out infinite alternate; }
.case[data-p="luo"] .case__text::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 1; background: var(--luo); }
.case[data-p="luo"] .case__text > * { position: relative; z-index: 1; }
@keyframes luoDrift { 0% { background-position: 30% 30%; } 50% { background-position: 70% 50%; } 100% { background-position: 45% 72%; } }
.case[data-p="luo"] .case__type { color: #67E0A3; opacity: 1; }
.case[data-p="luo"] .case__name { font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(64px, 6.6vw, 112px); letter-spacing: -.035em; line-height: .9; padding-bottom: .06em;
  background: var(--luo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case[data-p="luo"] .case__hook { font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -.01em; }
.case[data-p="luo"] .case__stats li { display: flex; align-items: baseline; gap: 10px; border-top-color: rgb(255 255 255 / .13); }
.case[data-p="luo"] .case__stats b { font-family: Quicksand, sans-serif; font-size: 1.5em; background: var(--luo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case[data-p="luo"] .case__back { opacity: .82; }
.case[data-p="luo"] .case__proves { background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.case[data-p="luo"] .case__proves b { color: #67E0A3; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .case[data-p="luo"] .case__text::before { animation: none; } }

/* A card that is also a website: a wider stage for the laptop and the phone together. The panel keeps at least 456 px,
   so luō's three buttons fit one row at or above Apple's 40 px from 1280 wide up (Nico, 2026-11-11). */
.case.is-duo { grid-template-columns: minmax(0, 1fr) clamp(min(456px, 40vw), 34vw, 560px); }
@media (min-width: 900px) { .case { padding-inline: clamp(76px, 6vw, 104px); } }
.case.is-duo .case__stage { height: min(78vh, 820px); }

/* A laptop screen is often only 800 to 900 px tall. There the panel tightens so the store badges and links stay in view
   without scrolling the panel (Brain Stretch's ran past the fold at 1440 by 900). */
@media (min-width: 900px) and (max-height: 960px) {
  .case__text { max-height: 92vh; padding: clamp(22px, 2.4vw, 34px); }
  .case__logo { width: 46px; height: 46px; margin-bottom: 12px; }
  .case__name { font-size: clamp(38px, 3.8vw, 60px); }
  .case[data-p="luo"] .case__name { font-size: clamp(56px, 5.4vw, 88px); }
  .case__hook { font-size: clamp(18px, 1.4vw, 23px); }
  .case__badge { margin-top: 12px; padding: 10px 12px; font-size: 13px; }
  .case__stats { margin-top: 12px; }
  .case__stats li { padding: 7px 0; font-size: 16px; }
  .case__back { margin-top: 12px; font-size: 15px; line-height: 1.42; }
  .case__proves { margin-top: 12px; padding: 11px 14px; font-size: 15px; }
  .case__links { margin-top: 14px; }
}

/* ---- Phones and tablets: two swipe rows, and the open card stacks ---- */
@media (max-width: 899px) {
  .work__pin { padding-top: clamp(96px, 14vh, 140px); }
  #deck, .deck--sites { display: flex; justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 24px; scrollbar-width: none; }
  #deck::-webkit-scrollbar, .deck--sites::-webkit-scrollbar { display: none; }
  .deck { --cw: min(78vw, 320px); }
  .deck--sites { --cw: min(84vw, 360px); }
  .wslot { flex: none; scroll-snap-align: center; }
  .case { grid-template-columns: 1fr; grid-template-rows: 46vh auto; align-content: start; align-items: start; overflow-y: auto; padding: 56px 16px 24px; }
  .case__stage, .case.is-duo .case__stage { height: 46vh; }
  .case.is-duo { grid-template-columns: 1fr; }
  .case__text { max-height: none; overflow: visible; }
  /* clip, not hidden: a hidden panel is a scroll box, so its grid row shrank to the space left and the centred panel
     rode up over the devices. clip keeps the rounded corners without that. */
  .case[data-p="luo"] .case__text { overflow: clip; }
  .case__hint { display: none; }
  /* On a phone the project arrows sit in the top bar, either side of the count. */
  .case__go { top: 10px; translate: none; height: 44px; min-width: 44px; padding: 0 15px; }
  .case__go--prev { left: calc(50% - 100px); right: auto; } .case__go--next { left: calc(50% + 56px); right: auto; }
  .case__go span { display: none; }
  .case__count { top: 26px; left: 50%; translate: -50% 0; }
  /* Close stays on screen while the open card scrolls (it scrolled away with the panel). It is dark glass here, as the
     arrows are, so it reads over a cream panel as well as over the view. */
  .case__close { position: fixed; background: rgb(16 18 24 / .56); -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(.7); backdrop-filter: blur(18px) saturate(1.8) brightness(.7);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 10px 24px -12px rgb(0 0 0 / .7); }
  .case__close:hover { background: rgb(16 18 24 / .7); }
  .case__text { padding: 20px; }
  .case__links { --clear: .1; --cap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .wcard__in, .wslot--site, .case, .case__text, .case__phone, .case__web, .case__web::after { transition: none; } }
@media (prefers-reduced-motion: reduce) { .wcard__open { transition: none; } .wcard__open i { animation: none; } }