/*
 * Bretzel — work-lab.css (draft)
 * Our Work in the home's language (5h). Step 1: the live page (its own styles in work-lab-e.css,
 * scoped to .wk-e) between the home's nav and footer, closing on the home's closing sheet.
 */

/* ════════════════════════════════════════
   TODAY — the live content under a strip of the home's paper
════════════════════════════════════════ */
/* the nav, printed on a strip of the home's grid paper above the page: the paper and its light
   are sized as for a full-screen sheet, so the strip is the top of the home's hero */
.opt-d .hero.wk-head {
  min-height: 0; padding-bottom: clamp(14px, 2.2vh, 24px);
  background-size: max(100%, 177.78svh) auto; background-position: 50% 0;
}
.opt-d .hero.wk-head::before { background: radial-gradient(ellipse 80vw 70svh at 40vw 35svh, rgba(255, 250, 240, 0.10), rgba(40, 30, 20, 0.14) 100%); }

/* the page you're on: the hand has already underlined it (nav, menu, footer) */
a[aria-current="page"] .hl path { stroke-dashoffset: 0; }

/* today's content as it is live, but in the logo's orange, and with the normal cursor (the live
   site hides it for its own, which isn't on this page) */
.wk-e {
  cursor: auto;
  --clr-orange: #FF8738; --clr-orange-10: rgba(255, 135, 56, 0.10);
  --clr-orange-15: rgba(255, 135, 56, 0.15); --clr-orange-20: rgba(255, 135, 56, 0.20);
}
.wk-e .btn-primary:hover { background: #EE7128; box-shadow: rgba(255, 135, 56, 0.3) 0 12px 32px; }

/* the home's closing sheet, on the desk after the grid */
.wk-main .tear--close { margin-top: clamp(40px, 5vw, 88px); }

/* the hero's image trail (work-trail.js puts its images straight into <body>), as live */
.trail-img {
  position: fixed; width: 220px; height: 160px; object-fit: cover; border-radius: 12px;
  pointer-events: none; z-index: 9999; opacity: 0;
  transform: translate(-50%, -50%) scale(0.85) rotate(0deg);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, opacity; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
}
.trail-img.visible { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--trail-rot, 0deg)); }
.trail-img.fading { opacity: 0; transform: translate(-50%, -50%) scale(0.90) rotate(var(--trail-rot, 0deg)); }

/* ════════════════════════════════════════
   THE THREE VERSIONS (work-lab-a|b|c.html)
════════════════════════════════════════ */
/* a number the hand rings when you point at its row (A's index, C) */
.wk-n:not(body) { position: relative; justify-self: start; font: 600 13px/1 var(--sans); letter-spacing: 0.1em; }
.wk-ring { position: absolute; left: calc(50% - var(--fx) * 3.4em); top: calc(50% - var(--fy) * 3.4em * var(--ar)); width: 3.4em; height: auto; pointer-events: none; }
.wk-soon { font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }

/* today's Playground link, as on the home: the magenta sticky on the desk */
.wk-play { display: grid; justify-items: center; gap: 18px; padding: clamp(64px, 8vw, 120px) var(--pad) 0; }
.wk-play__k { font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #d9d6cf; }
.wk-play__note { width: clamp(150px, 14vw, 220px); }

/* ════════════════════════════════════════
   A · EVERY BRAND, ONE HAND
════════════════════════════════════════ */
/* the hero: every name printed as one block; pointing at one shows its work beside the pointer */
.wa-copy { gap: clamp(18px, 3vh, 34px); }
.wa-kicker { font: 600 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.66; }
.wa-names {
  max-width: min(2300px, 100%); font: 400 clamp(30px, min(5.4vw, 8.6vh), 168px)/1 var(--hero); text-transform: uppercase;
  letter-spacing: -0.032em; text-wrap: balance; color: var(--ink);
}
.wa-n { position: relative; white-space: nowrap; transition: opacity 0.25s ease; }
/* each name's number, up at its cap height, as a footnote's */
.wa-n__k { position: relative; top: 0.5em; margin: 0 0.2em 0 0.08em; font: 600 max(10px, 0.155em)/1 var(--sans); letter-spacing: 0.06em; vertical-align: top; }
.wa-names:has(.wa-n:hover) .wa-n:not(:hover), .wa-names:has(.wa-n:focus-visible) .wa-n:not(:focus-visible) { opacity: 0.14; }
.wa-names:has(.wa-n:hover) .wa-yours { opacity: 0.14; }
.wa-n:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; }
.wa-yours { display: inline-block; white-space: nowrap; transition: opacity 0.25s ease; }
.wa-yours__ink { display: inline-block; height: 0.62em; width: auto; vertical-align: -0.04em; }
.wa-peek {
  position: fixed; left: 0; top: 0; z-index: 8; width: clamp(220px, 24vw, 440px); aspect-ratio: 16 / 10;
  pointer-events: none; opacity: 0; background: var(--pbg, #ddd);
  transform: translate3d(var(--px, -999px), var(--py, -999px), 0) rotate(var(--pr, 0deg));
  box-shadow: 0 2px 3px rgba(30, 24, 18, 0.22), 0 24px 44px rgba(30, 24, 18, 0.26); transition: opacity 0.2s ease;
}
.wa-peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wa-hero.is-peeking .wa-peek { opacity: 1; }

/* the projects: a screen each, painted in the brand's own colours; the colour behind them changes
   as you go (one sticky backdrop for all of them), and the brand's twist lands on our tape */
.wa-screens { position: relative; }
.wa-bg {
  position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
  background: #5DE6B0; transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-p {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(28px, 5vw, 96px);
  padding: clamp(72px, 11vh, 132px) var(--pad); color: var(--ink); background: var(--bg);
}
.js .wa-p { background: none; }
.wa-p--l { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.wa-p--l .wa-p__text { order: 2; }
.wa-p__k { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: clamp(14px, 2.4vh, 26px); font: 600 12px/1.35 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.wa-p__text { container-type: inline-size; }
/* as big as the screen allows, but its longest word (--lw letters) always fits the column */
.wa-p__name { font: 400 max(34px, min(5.9vw, 116px, 100cqw / (var(--lw) * 0.8)))/0.9 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; text-wrap: balance; }
.wa-tape {
  --th: clamp(46px, 4.4vw, 82px);
  position: relative; width: min(calc(var(--th) * var(--ar)), calc(100% + 5vw)); margin: clamp(20px, 3.4vh, 38px) 0 0 -1.2%;
  rotate: var(--r); transform-origin: 20% 50%;
}
.wa-p--l .wa-tape { margin-left: -2.5%; width: min(calc(var(--th) * var(--ar)), calc(100% + var(--pad) - 22px)); }
.wa-tape__img { display: block; width: 100%; height: auto; }
.wa-tape__ink { position: absolute; height: auto; mix-blend-mode: multiply; }
.wa-p .lk { color: inherit; margin-top: clamp(18px, 3vh, 32px); }
.wa-p .wk-soon { margin-top: clamp(18px, 3vh, 32px); }
/* the work runs off the screen on its side, as in a magazine */
.wa-p__work { display: flex; align-items: center; justify-content: flex-end; margin-right: calc(-1 * var(--pad)); }
.wa-p--l .wa-p__work { justify-content: flex-start; margin: 0 0 0 calc(-1 * var(--pad)); }
.wa-p__img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 80vh; max-height: 80svh;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 34px 64px rgba(0, 0, 0, 0.3);
}
.wa-p--blend .wa-p__img {
  box-shadow: none; border-radius: 0;
  /* the cover runs into the page: what its own frame cuts off fades out instead of stopping at a line */
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
a.wa-p__work .wa-p__img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
a.wa-p__work:hover .wa-p__img { transform: scale(1.015); }
/* each screen plays as it comes to the middle: the work, the name, then our tape and our hand */
.js .wa-p__k, .js .wa-p__name, .js .wa-p .lk, .js .wa-p .wk-soon { opacity: 0; translate: 0 18px; transition: opacity 0.6s ease, translate 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .wa-p__name { transition-delay: 0.08s; }
.js .wa-p__work { opacity: 0; scale: 0.97; transition: opacity 0.7s ease, scale 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.js .wa-p.is-on :is(.wa-p__k, .wa-p__name, .lk, .wk-soon) { opacity: 1; translate: 0 0; }
.js .wa-p.is-on .wa-p__work { opacity: 1; scale: 1; }
.js .wa-p.is-on .lk, .js .wa-p.is-on .wk-soon { transition-delay: 1.6s; }

/* INDEX: a tape next to MENU once the hero is gone, and the torn sheet it opens */
.flt-index { right: calc(var(--pad) + 108px); transform: translateY(-160%) rotate(-8deg); opacity: 0; }
.flt-index img { height: 40px; }
.nav-past .flt-index { transform: rotate(-2.5deg); opacity: 1; }
.flt-index:hover { transform: rotate(0.5deg) translateY(-2px); }
.wx .mm__sheet.wx__sheet { display: block; }
.wx__fs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 26px; }
.wx__f { padding: 0; border: 0; background: none; cursor: pointer; transition: opacity 0.2s ease, translate 0.2s ease; }
.wx__f img { height: 36px; width: auto; }
.wx__f[aria-pressed="false"] { opacity: 0.42; }
.wx__f[aria-pressed="false"]:hover { opacity: 0.8; }
.wx__list { list-style: none; columns: 2 300px; column-gap: 48px; }
.wx__list li { break-inside: avoid; }
.wx__list[data-f="brand"] li:not([data-labs~="brand"]), .wx__list[data-f="digital"] li:not([data-labs~="digital"]) { display: none; }
.wx__row { display: grid; align-items: baseline; padding: 10px 0 9px; border-bottom: 1px solid rgba(21, 21, 21, 0.12); color: var(--ink); }
.wx__t { font: 400 clamp(19px, 1.8vw, 28px)/1 var(--hero); text-transform: uppercase; letter-spacing: -0.02em; }
.wx__c { margin-top: 6px; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
/* a project still in the lab (no case page yet): COMING SOON beside its name, as on its card; not a link */
.wx__row--soon { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; cursor: default; }
.wx__row--soon .wx__t { opacity: 0.5; }
.wx__row--soon .wx__c { grid-column: 1 / -1; }
.wx__soon { justify-self: start; font-size: 10.5px; letter-spacing: 0.12em; white-space: nowrap; }

@media (max-width: 900px) {
  .wa-p, .wa-p--l { grid-template-columns: minmax(0, 1fr); row-gap: 28px; min-height: 0; padding: 64px var(--pad) 76px; }
  .wa-p__work, .wa-p--l .wa-p__work { order: -1; justify-content: center; margin: 0 calc(-1 * var(--pad)); }
  .wa-p--l .wa-p__text { order: 0; }
  .wa-p__img { max-height: none; }
  .wa-p__name { font-size: max(32px, min(11vw, 70px, 100cqw / (var(--lw) * 0.8))); }
  .wa-tape { --th: 46px; width: min(calc(var(--th) * var(--ar)), 100%); }
  .flt-index { right: calc(var(--pad) + 88px); }
  .flt-index img { height: 34px; }
}
@media (max-width: 600px) {
  .wa-names { font-size: calc((100vw - 2 * var(--pad)) / 8.4); line-height: 1.04; }
  .wa-n { white-space: normal; }
}

/* ════════════════════════════════════════
   B · CONTACT SHEET — slide film on the light table
════════════════════════════════════════ */
.wb-lt { position: relative; z-index: 1; background: #1b1c1e; }
.wb-glow { position: absolute; inset: 0; background: #F1F2F0 url('/assets/lab/img/lab/work/lt-bed.jpg') center / cover no-repeat; }
.wb-bed {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 118px); min-height: calc(100svh - 118px); padding: clamp(84px, 11vh, 128px) var(--pad) clamp(30px, 5vh, 60px);
}
/* the strips lie across the middle of the table, not quite square to it or to each other */
.wb-strips { --sw: min(90%, calc((100svh - 400px) * 1.9)); display: grid; gap: clamp(16px, 3vh, 38px); justify-items: center; }
.wb-strip { position: relative; width: calc(var(--sw) * var(--len) / 5 * 0.99); rotate: var(--r, 0deg); translate: var(--dx, 0) 0; }
.wb-strip--1 { --r: -0.6deg; --dx: -2.5%; }
.wb-strip--2 { --r: 0.45deg; --dx: 3%; }
.wb-strip--3 { --r: -0.3deg; --dx: -9%; }
.wb-film { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.22)); }
.wb-f { position: absolute; display: block; border-radius: 2px; }
.wb-f:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.wb-ring { position: absolute; z-index: 2; height: auto; pointer-events: none; opacity: 0; }
/* the pointer is only hidden where the loupe takes over: over the film */
.wb-lt.is-on .wb-bed { cursor: auto; }
@media (hover: hover) and (pointer: fine) { .wb-lt.is-looking .wb-strips { cursor: none; } }
.wb-ring.is-on { opacity: 1; }
.wb-roll { --th: clamp(36px, 3.2vw, 56px); position: absolute; left: var(--pad); top: clamp(24px, 4vh, 44px); width: calc(var(--th) * var(--ar)); rotate: -2.5deg; }
.wb-roll img { display: block; width: 100%; height: auto; }
.wb-roll__ink { position: absolute; height: auto; mix-blend-mode: multiply; }
.wb-cap { margin-top: clamp(18px, 3vh, 30px); text-align: center; font: 600 12px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #46464a; }
.wb-cap b { color: var(--ink); font-weight: 600; }
.wb-lt .loupe__view .lt__bed { background: #F1F2F0 url('/assets/lab/img/lab/work/lt-bed.jpg') center / cover no-repeat; }
.wb-lt .loupe__view .wb-ring, .wb-lt .loupe__view .wb-roll { display: none; }

/* each frame enlarged, the hand's crop marks round it */
.wb-es { padding-top: clamp(30px, 5vw, 80px); }
.wb-e { display: grid; justify-items: center; padding: clamp(56px, 9vh, 110px) var(--pad); color: #ece9e2; }
/* frame, code and caption fit one screen together */
.wb-e__code, .wb-e__frame, .wb-e__cap { width: min(80vw, calc((100vh - 300px) * 1.5)); width: min(80vw, calc((100svh - 300px) * 1.5)); }
.wb-e__code { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #F6E4B0; }
.wb-e__code span:last-child { opacity: 0.55; margin-left: 8px; }
.wb-tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.wb-e__frame { position: relative; display: block; aspect-ratio: 3 / 2; }
.wb-e__img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.5); }
.wb-crop { position: absolute; height: auto; pointer-events: none; }
.wb-e__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; margin-top: clamp(30px, 4.6vh, 52px); }
.wb-e__name { font: 400 clamp(40px, 5.4vw, 104px)/0.9 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; color: #F4F1EA; text-wrap: balance; }
.wb-e__more { display: grid; justify-items: end; gap: 10px; text-align: right; }
.wb-e__twist { font: 400 clamp(17px, 1.5vw, 26px)/1.1 var(--hero); text-transform: uppercase; letter-spacing: -0.01em; color: #F4F1EA; }
.wb-e__cat { font: 600 11px/1.35 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.66; }
.wb-e .lk { color: #F4F1EA; }

@media (max-width: 760px) {
  .wb-bed { min-height: 0; padding: 92px 0 30px; }
  .wb-strips { --sw: 250vw; overflow-x: auto; padding: 12px var(--pad) 16px; scrollbar-width: none; }
  .wb-strips::-webkit-scrollbar { display: none; }
  .wb-cap { padding: 0 var(--pad); }
  .wb-e__code, .wb-e__frame, .wb-e__cap { width: 100%; }
  .wb-e__cap { grid-template-columns: minmax(0, 1fr); }
  .wb-e__more { justify-items: start; text-align: left; }
}

/* ════════════════════════════════════════
   C · BIG INDEX
════════════════════════════════════════ */
.wc { position: relative; z-index: 1; padding: clamp(56px, 8vh, 110px) var(--pad) clamp(24px, 4vh, 56px); color: #F4F1EA; }
.wc-bg { position: fixed; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: #0c0c0d; transition: opacity 0.45s ease; }
.wc.is-active .wc-bg { opacity: 1; }
.wc-bg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05);
  transition: opacity 0.5s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.wc-bg__img.is-on { opacity: 1; transform: scale(1); }
.wc-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 11, 0.56), rgba(10, 10, 11, 0.18) 55%, rgba(10, 10, 11, 0.46)); }
.wc-head { margin-bottom: clamp(22px, 3.4vh, 40px); }
.wc-head .mx-label { color: #ece9e2; }
.wc-list { list-style: none; border-top: 1px solid rgba(236, 233, 226, 0.16); }
.wc-row {
  display: grid; grid-template-columns: clamp(44px, 4.6vw, 76px) minmax(0, 1fr) minmax(190px, 23vw); align-items: center;
  column-gap: clamp(14px, 2vw, 34px); padding: clamp(6px, 0.7vw, 12px) 0; border-bottom: 1px solid rgba(236, 233, 226, 0.16);
  color: #F4F1EA; transition: opacity 0.3s ease;
}
.wc-n { color: #ece9e2; }
.wc-name { font: 400 clamp(38px, 5.9vw, 122px)/0.94 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; }
.wc-meta { display: grid; justify-items: end; gap: 7px; text-align: right; }
.wc-cat { font: 600 11px/1.35 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.62; }
.wc-twist { font: 400 clamp(14px, 1.1vw, 19px)/1.1 var(--hero); text-transform: uppercase; letter-spacing: -0.005em; opacity: 0; transition: opacity 0.3s ease; }
.wc-soon { display: none; }
.wc-row--soon .wc-name { opacity: 0.5; }
.wc.is-active .wc-row:not(.is-on) { opacity: 0.18; }
.wc-row.is-on .wc-twist { opacity: 1; }
.wc-row:focus-visible { outline: 2px dashed #F4F1EA; outline-offset: 4px; }

@media (max-width: 900px) {
  .wc-row { grid-template-columns: 38px minmax(0, 1fr); row-gap: 6px; padding: 12px 0; }
  .wc-meta { grid-column: 2; justify-items: start; text-align: left; }
  .wc-name { font-size: clamp(34px, 10.5vw, 70px); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-bg, .wa-peek, .wc-bg, .wc-bg__img, .wc-row, .wa-n { transition: none !important; }
  .js .wa-p__k, .js .wa-p__name, .js .wa-p .lk, .js .wa-p .wk-soon, .js .wa-p__work { opacity: 1; translate: none; scale: none; transition: none; }
}

/* ════════════════════════════════════════
   NEW A / B / C — B's card on A's screens, held three ways (work-lab-na|nb|nc.html)
════════════════════════════════════════ */
/* the screen (A's .wa-p: its colour, height and play) with the card in the middle */
.wn-p { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: clamp(40px, 7vh, 90px); }
/* the card, its number over it and its name under it fit one screen */
.wn-card { --cw: min(70vw, calc((100vh - 430px) * 16 / 9)); --cw: min(70vw, calc((100svh - 430px) * 16 / 9)); width: var(--cw); }
.wn-code { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 12px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.wn-code span:last-child { opacity: 0.72; margin-left: 8px; }
.wn-hold { position: relative; }
.wn-frame { display: block; aspect-ratio: 16 / 9; }
.wn-img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 30px 64px rgba(0, 0, 0, 0.3); }
a.wn-frame .wn-img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
a.wn-frame:hover .wn-img { transform: translateY(-4px); }
.wn-crop { position: absolute; height: auto; pointer-events: none; }
.wn-cap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-top: clamp(26px, 4vh, 46px); container-type: inline-size; }
.wn-name { font: 400 max(32px, min(4.4vw, 88px, 100cqw / (var(--lw) * 0.8)))/0.9 var(--hero); text-transform: uppercase; letter-spacing: -0.035em; text-wrap: balance; }
.wn-p .lk, .wn-p .wk-soon { color: inherit; margin-bottom: 0.3em; }
/* the card comes in as the screen reaches the middle; the hand marks its corners, then what holds
   the twist lands on it and the hand writes */
.js .wn-p .wn-cap { opacity: 0; translate: 0 16px; transition: opacity 0.6s ease, translate 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .wn-p .wn-frame { opacity: 0; scale: 0.965; transition: opacity 0.7s ease, scale 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.js .wn-p.is-on .wn-cap { opacity: 1; translate: 0 0; }
.js .wn-p.is-on .wn-frame { opacity: 1; scale: 1; }
.wn-ink { position: absolute; height: auto; mix-blend-mode: multiply; }

/* NEW A · the twist on a strip of tape across the card's top edge */
.wn-tape { --th: clamp(40px, 3.4vw, 64px); position: absolute; z-index: 3; left: 4%; top: calc(-0.42 * var(--th)); width: min(calc(var(--th) * var(--ar)), 94%); rotate: var(--r); transform-origin: 20% 50%; }
.wn-tape img { display: block; width: 100%; height: auto; }

/* NEW B · a black binder clip holds the card and a scrap of our notebook with the twist on it; one
   size of hand on every card (the scrap's width follows its pixels) */
.wn-note { position: absolute; z-index: 3; left: 4.5%; top: 0; width: calc(var(--iw) * 0.0215%); rotate: var(--r); transform-origin: 30% 0; translate: 0 calc(-100% * var(--top) - 1.5%); }
.wn-note img { display: block; width: 100%; height: auto; }
.wn-h.wn-note { transition: opacity 0.35s ease, scale 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }
.js .wn-h.wn-note:not(.is-in) { opacity: 0; scale: 0.94; }
/* the clip bites the scrap's blank end (--at, in its width), on the card's edge */
.wn-clip { --clip-w: calc(6.4% / var(--body)); position: absolute; z-index: 4; top: 0; left: calc(4.5% + var(--iw) * 0.0215% * var(--at) - var(--clip-w) * var(--cx)); width: var(--clip-w); height: auto; translate: 0 calc(-100% * var(--edge)); rotate: -1.5deg;
  transition: opacity 0.2s ease, scale 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), rotate 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.js .wn-p .wn-clip:not(.is-in) { opacity: 0; scale: 1.3; rotate: -9deg; }

/* NEW C · the twist as a die-cut sticker of our hand, slapped on the card's top right corner */
.wn-sticker { position: absolute; z-index: 3; right: -3%; top: -7%; width: calc(var(--iw) * 0.0215%); height: auto; rotate: var(--r);
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.28)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.2)); }

/* the heroes, one gesture each on the grid paper */
.opt-d .wn-hero .wn-print { font-size: clamp(44px, min(8.2vw, 14vh), 150px); }
.wn-copy .sub { margin-top: clamp(16px, 2.8vh, 30px); max-width: none; }
.wn-hero--c .wn-copy .sub { margin-top: clamp(30px, 4.6vh, 52px); }
/* NEW C: TWISTED. slapped over MADE. */
.wnc-st { position: absolute; z-index: 3; height: auto; max-width: none; rotate: -6deg; letter-spacing: 0;
  filter: drop-shadow(0 2px 2px rgba(30, 24, 18, 0.22)) drop-shadow(0 12px 16px rgba(30, 24, 18, 0.16)); }
/* NEW B: the title beside every card, taped in one stack */
/* (hero D's styles come after this file, in the page: these need the extra class) */
.opt-d .hero--c .copy.wn-copy--b { flex-direction: row; gap: clamp(28px, 5vw, 110px); text-align: left; }
.wnb-text { display: grid; justify-items: start; }
.opt-d .wnb-text .sub { margin: clamp(16px, 2.8vh, 30px) 0 0; text-align: left; }
.opt-d .wn-hero--b .wn-print { font-size: clamp(44px, min(7vw, 13vh), 140px); }
.wnb-stack { --cw: min(42vw, calc((100svh - 300px) * 1.4)); position: relative; width: var(--cw); aspect-ratio: 3 / 2; rotate: 2.5deg; margin-top: 4vh; }
.wnb-card { position: absolute; inset: 0; rotate: var(--r); translate: var(--x) var(--y); box-shadow: 0 1px 2px rgba(30, 24, 18, 0.28), 0 10px 22px rgba(30, 24, 18, 0.16); }
.wnb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wnb-note { left: 5%; }

@media (max-width: 900px) {
  .wn-card { --cw: calc(100vw - 2 * var(--pad)); }
  .wn-p { padding-block: 72px 80px; }
  .opt-d .hero--c .copy.wn-copy--b { flex-direction: column; gap: 38px; text-align: center; }
  .wnb-text { justify-items: center; }
  .opt-d .wnb-text .sub { text-align: center; }
  .wnb-stack { --cw: min(82vw, 520px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .wn-p :is(.wn-cap, .wn-frame), .js .wn-h.wn-note, .js .wn-p .wn-clip { opacity: 1; translate: none; scale: none; transition: none; }
}

/* ════════════════════════════════════════
   THE CASE STUDIES (drafts/work/*.html): as they are live, in the new nav and footer
════════════════════════════════════════ */
.cs-e {
  cursor: auto;
  --clr-orange: #FF8738; --clr-orange-10: rgba(255, 135, 56, 0.10);
  --clr-orange-15: rgba(255, 135, 56, 0.15); --clr-orange-20: rgba(255, 135, 56, 0.20);
}
.cs-main .tear--close { margin-top: clamp(40px, 5vw, 88px); }
/* the nav's strip of paper sits above the case's hero (live, the nav floats over it): the hero
   fills what's left of the first screen, so its name and numbers are still in it */
.cs-e .p-hero { min-height: calc(100vh - 118px); min-height: calc(100svh - 118px); }

/* 2026-11-07, the user: the work bigger (wider, and as tall), no clip on it; the Playground
   sticky with room around it, centred */
.pg-work .wn-card { --cw: min(88vw, calc((100vh - 300px) * 16 / 9)); --cw: min(88vw, calc((100svh - 300px) * 16 / 9)); }
.wk-play { padding: clamp(90px, 12vw, 160px) var(--pad) clamp(110px, 14vw, 180px); place-items: center; text-align: center; }
.wk-play__k { color: #111; opacity: 0.7; }
.wk-play__note { margin-inline: auto; }
/* TWISTED. over MADE., four ways (draft switch, 2026-11-10) */
.tw { display: none; }
html:not([data-tw]) .tw--tape, html[data-tw="now"] .tw--now, html[data-tw="tape"] .tw--tape, html[data-tw="vinyl"] .tw--vinyl { display: block; }
html[data-tw="strike"] .tw--strike { display: block; }
.tw.fix { position: absolute; z-index: 3; }
.tw--strike { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tw--strike > span { position: absolute; display: block; }
.tw--strike svg { position: static; display: block; width: 100%; height: auto; }
.tw--vinyl { rotate: -4deg; }
.switch button.is-on { background: #FF8738; color: #111; }
/* MADE. printed first; once the tape is down, the word under it is hidden (the tape is a little see-through) */
.wn-print .slot { transition: color 0.05s 0.12s; }
.wn-print .slot:has(.tw--tape.is-in) { color: transparent; }
.switch { flex-wrap: wrap; max-width: calc(100vw - 130px); }
/* what holds the stack: a strip of our tape, the owner's pick (2026-11-11; the other holders and the
   draft bar's Holder switch are gone) */
.hold { position: absolute; z-index: 5; height: auto; max-width: none; pointer-events: none; }
.hold--tape { left: 1%; top: -6%; width: 25%; rotate: -34deg; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.18)); }

/* 2026-11-11 · phones (Work and the cases): the desk, the notebook sheets and the hero's paper from crops
   of the very same files, at the very same scale. The desk and the sheets are 1920 px tiles centred on the
   screen (50% 0), so a phone only ever shows their middle 600 px: the middle 640 px of each (the 2K tile,
   and the 4K one at twice the pixels for sharp screens, as home-lab.css picks them) look exactly the
   same, pixel for pixel, at a third of the weight (the 4K tiles alone were 1.2 MB of a page on a phone).
   The hero's paper fills the hero (cover); on a phone the hero is always at least as tall as it is wide,
   so only the middle of the sheet ever shows: its middle 1216 px. The grain over the hero in 16 shades
   instead of 256 (each dot moves at most 8 shades; at its 20% overlay that's under 2 of 255 on screen). */
@media (max-width: 600px) {
  body.dir-3.pg-work:not(.pg-legal) { background-image: url('/assets/lab/img/lab/home/mat-phone-1x.jpg'); background-size: 640px auto; }
  .pg-work:not(.pg-legal).mix-h .mx-paper { background-image: url('/assets/lab/img/lab/home/nb-tile-phone-1x.jpg'); background-size: 640px auto; }
  .pg-work:not(.pg-legal) .hero { background-image: url('/assets/lab/img/lab/paper-phone.jpg'); }
  .pg-work:not(.pg-legal) .hero::after { background-image: url('/assets/lab/img/lab/grain-phone.png'); }
}
@media (max-width: 600px) and (min-resolution: 2dppx) {
  body.dir-3.pg-work:not(.pg-legal) { background-image: url('/assets/lab/img/lab/home/mat-phone-2x.jpg'); }
  .pg-work:not(.pg-legal).mix-h .mx-paper { background-image: url('/assets/lab/img/lab/home/nb-tile-phone-2x.jpg'); }
}