/*
 * Bretzel — home-lab.css (draft)
 * The rest of the home under hero D, in three directions:
 *   1 · Notebook   one sheet all the way down; the pen's thread is drawn as you read
 *   2 · Stack      every section is a new sheet that lands on the pile
 *   3 · Workbench  the hero sheet lies on our desk; scrolling moves along it
 * Shared pieces first (type, prints, cards, polaroids, notes in our hand),
 * then each direction, then small screens.
 */
:root { --lime: #C8FF00; --magenta: #FF2DFF; --grey-ink: #5a5650; }

.wrap { width: min(1180px, 100% - 2 * var(--pad)); margin-inline: auto; }
.title { font-family: var(--hero); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 6vw, 96px); line-height: 0.92; letter-spacing: -0.03em; }
.body { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; max-width: 44ch; margin-top: 20px; }
.body a { text-decoration: underline; text-underline-offset: 3px; }
.st-kicker { font: 600 12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }

/* ════════════════════════════════════════
   SHARED — notes in our hand, things put down, prints, cards, polaroids
════════════════════════════════════════ */
/* written on stroke by stroke as they come into view */
.ink { display: block; overflow: visible; }
.ink path, .thread path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.js .ink:not(.is-prepped), .js .thread:not(.is-prepped) { visibility: hidden; }

/* put down on the page: a little above, then down */
.drop-in { transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1), scale 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .drop-in:not(.is-in) { opacity: 0; translate: 0 -18px; scale: 1.03; }

/* prints ("snaps"): matte, white border, the caption printed on the strip */
.snap {
  position: relative; display: block; container-type: inline-size; rotate: var(--r, 0deg);
  filter: drop-shadow(0 1px 1px rgba(30, 24, 18, 0.22)) drop-shadow(0 12px 18px rgba(30, 24, 18, 0.14));
  transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1), scale 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.snap:hover { transform: translateY(-5px) rotate(calc(var(--r, 0deg) * -0.6)); }
.snap__img { display: block; width: 100%; height: auto; }
.snap__cap { position: absolute; left: 5%; right: 5%; display: flex; flex-direction: column; justify-content: center; gap: 0.8cqw; color: var(--ink); }
.snap__cap b { font: 400 4.4cqw/1 var(--hero); text-transform: uppercase; letter-spacing: -0.01em; }
.snap__cap span { font: 500 3.2cqw/1.25 var(--sans); color: var(--grey-ink); }
.snap__tape, .pola__tape { position: absolute; left: 50%; top: -4.5%; width: 34%; height: auto; translate: -50% 0; rotate: var(--tr, -3deg); pointer-events: none; }

/* the Bachi print: the departures board plays in its window */
.bachi {
  position: relative; display: block; container-type: inline-size; rotate: var(--r, 0deg);
  filter: drop-shadow(0 1px 1px rgba(30, 24, 18, 0.24)) drop-shadow(0 16px 24px rgba(30, 24, 18, 0.15));
}
.bachi__win { position: absolute; overflow: hidden; background: #151515; }
.bachi__win video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(0.97); }
.bachi__grain { position: absolute; inset: 0; background: url('/assets/lab/img/lab/grain.png'); background-size: 220px; opacity: 0.16; mix-blend-mode: multiply; }
.bachi__frame { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }
.bachi__cap { position: absolute; left: 22%; right: 4.5%; display: flex; align-items: center; gap: 2.4cqw; color: var(--ink); }
.bachi__cap b { font: 400 3cqw/1 var(--hero); text-transform: uppercase; }
.bachi__cap span { flex: 1; font: 500 1.7cqw var(--sans); color: var(--grey-ink); }
.bachi__cap em { font: 600 1.35cqw var(--sans); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 0.2cqw solid var(--orange); padding-bottom: 0.3cqw; }
.bachi__sticker { position: absolute; left: -4.5%; bottom: -13%; width: 23%; rotate: -8deg; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.14)); }
.bachi__sticker img { display: block; width: 100%; height: auto; }
.bachi__sticker img + img { position: absolute; inset: 0; }
.bachi__tape { position: absolute; top: -3%; width: 17%; height: auto; rotate: var(--tr); pointer-events: none; }
.bachi__tape--l { left: -5%; }
.bachi__tape--r { right: -5%; }
/* the printed caption never gets smaller than you can read (on a tablet the print is small too) */
@media (min-width: 601px) {
  .bachi__cap span { font-size: max(1.7cqw, 11px); }
  .bachi__cap em { font-size: max(1.35cqw, 10px); }
}
/* on a phone it would be 5 to 10px: the same caption is live under the print instead (5h, BACHI_MCAP),
   clear of the Bachi sticker hanging off the print's corner */
.bachi-m { display: none; }
@media (max-width: 600px) {
  .bachi--mcap .bachi__cap { display: none; }
  .bachi-m { display: grid; justify-items: start; gap: 4px; margin: 16px 0 0 27%; color: #ece9e2; }
  .bachi-m b { font: 400 16px/1.1 var(--hero); text-transform: uppercase; letter-spacing: 0.01em; }
  .bachi-m > span { font: 500 13px/1.4 var(--sans); color: #b9b4ab; }
  .bachi-m a { margin-top: 2px; padding: 9px 0; font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #ece9e2;
    text-decoration: underline 2px var(--orange); text-underline-offset: 6px; }
}

/* ruled index cards: the text sits on the card's own lines */
.card {
  position: relative; container-type: inline-size; rotate: var(--r, 0deg); color: var(--ink);
  filter: drop-shadow(0 1px 1px rgba(30, 24, 18, 0.2)) drop-shadow(0 12px 18px rgba(30, 24, 18, 0.13));
}
.card__bg { display: block; width: 100%; height: auto; }
.card__lab {
  position: absolute; left: 8%; right: 8%; top: var(--top); height: calc(var(--head) - var(--top));
  display: flex; align-items: flex-end; gap: 2.4cqw; padding-bottom: 1.8cqw;
  font: 600 3.7cqw/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.card__lab span { color: var(--orange); }
.card--found .card__lab span, .card--time .card__lab span { color: #6f8f00; }
.card__body { position: absolute; left: 8%; right: 7%; top: var(--head); }
.card__title { font: 400 8.4cqw/var(--step) var(--hero); text-transform: uppercase; letter-spacing: -0.02em; padding-top: calc(var(--step) * 0.08); }
.card__list { list-style: none; }
.card__list li { display: flex; align-items: center; gap: 2.8cqw; font: 500 4.7cqw/var(--step) var(--sans); white-space: nowrap; }
.card__box { position: relative; flex: none; width: 4cqw; height: 4cqw; border: 0.32cqw solid var(--ink); border-radius: 0.4cqw; }
.card__tick { position: absolute; left: -12%; bottom: 8%; width: 160%; height: auto; }
.card__proof { font: 500 3.7cqw/var(--step) var(--sans); color: var(--grey-ink); }
.card__proof span { font-weight: 600; font-size: 3.1cqw; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-right: 1.4cqw; }
.card__cta { display: inline-block; margin-top: calc(var(--step) * 0.2); font: 600 3.6cqw/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 0.32cqw solid var(--orange); }

/* polaroids: the name is in our hand on the strip; the role is printed under it */
.pola { position: relative; rotate: var(--r, 0deg); filter: drop-shadow(0 1px 1px rgba(30, 24, 18, 0.22)) drop-shadow(0 12px 18px rgba(30, 24, 18, 0.14)); }
.pola__img { display: block; width: 100%; height: auto; }
.pola__tape { width: 40%; top: -4%; }
.pola figcaption { margin-top: 14px; font: 500 14px/1.4 var(--sans); text-align: center; }
.pola figcaption b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.pola--dark figcaption { color: #d9d6cf; }

.sticky { display: block; rotate: var(--r, 0deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.16)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.12)); transition: opacity 0.5s ease, translate 0.7s ease, scale 0.7s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sticky:hover { transform: rotate(-3deg) scale(1.03); }
.sticky img, .sticky__img { display: block; width: 100%; height: auto; }

/* the footer, printed small */
.foot { position: relative; padding: clamp(70px, 8vw, 120px) 0 44px; font: 500 14px/1.6 var(--sans); }
.foot__in { display: grid; grid-template-columns: auto 1fr; gap: 26px 48px; align-items: center; }
.foot__logo { height: 34px; width: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: flex-end; font: 600 12px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.foot__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; font-size: 13px; opacity: 0.75; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ════════════════════════════════════════
   1 · NOTEBOOK — one sheet, and the pen's thread
════════════════════════════════════════ */
body.dir-1 { background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 50% 0 / 1920px auto repeat; }
@media (min-width: 1700px), (min-resolution: 2dppx) { body.dir-1 { background-image: url('/assets/lab/img/lab/home/nb-tile-4k.jpg'); } }
.dir-1 .hero { background: none; }
.dir-1 .hero::before { -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.dir-1 .hero::after { display: none; }
body.dir-1::after { content: ''; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: url('/assets/lab/img/lab/grain.png'); background-size: 256px; opacity: 0.2; mix-blend-mode: overlay; }

body.dir-1 { --mx: 3.611vw; }
.nb { position: relative; }
.dir-1 .wrap { width: min(1180px, 100% - 2 * (var(--mx) + 5vw)); }
.nb-sec { position: relative; padding: 10vw 0 8vw; }
.nb-in { position: relative; z-index: 2; }
.nb-fold { position: absolute; left: 0; right: 0; top: -1.8vw; height: 3.65vw; background: url('/assets/lab/img/lab/home/nb-fold.webp') center / 100% 100% no-repeat; pointer-events: none; }

/* the thread: a run down the margin, a circled number, the run again, then a crossing */
.thread { position: absolute; overflow: visible; pointer-events: none; z-index: 1; }
.nb-run { width: var(--run-w); }
.nb-run--l { left: calc(var(--mx) - var(--line-x)); }
.nb-run--r { left: calc(100% - var(--mx) - var(--line-x)); }
.nb-run--a { top: 6vw; height: 3vw; }
.nb-run--b { top: 13.6vw; bottom: 6vw; height: auto; }
.nb-circ { position: absolute; top: 9vw; width: 4.6vw; height: auto; z-index: 2; }
.nb-circ--l { left: calc(var(--mx) - 2.3vw); }
.nb-circ--r { left: calc(100% - var(--mx) - 2.3vw); }
.nb-band { position: relative; height: 25vw; margin: -6vw 0; pointer-events: none; z-index: 1; }

.nb-note { height: clamp(20px, 2.1vw, 32px); width: auto; margin-bottom: 20px; }
.nb-note--c { margin-inline: auto; }
.nb-head { margin-bottom: clamp(40px, 5vw, 76px); }
.nb-bachi { width: min(980px, 88%); margin: 22px 0 0 auto; }
.nb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 5vw, 76px) clamp(28px, 4vw, 60px); }
.nb-grid__more { display: grid; place-items: center; }
.nb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.nb-polas { display: grid; grid-template-columns: repeat(3, 1fr) 0.8fr; gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.nb-sticky { margin-top: 36%; }
.nb-team__cta { margin-top: clamp(32px, 4vw, 56px); }
.nb-close { text-align: center; padding-top: 2vw; }
.nb-close .nb-in { display: grid; justify-items: center; }
.nb-close__title { font-size: clamp(48px, 8.4vw, 150px); }
.nb-close__twist { position: relative; display: inline-block; }
.nb-under { position: absolute; left: -4%; bottom: -0.2em; width: 108%; height: auto; }
.nb-close__btns { justify-content: center; margin-top: clamp(30px, 3.6vw, 52px); }
.nb-close__sub { margin: 26px auto 0; }
.foot--paper .foot__in { border-top: 2px solid var(--ink); padding-top: 30px; }
.foot--paper .foot__logo { filter: brightness(0); opacity: 0.92; mix-blend-mode: multiply; }

/* ════════════════════════════════════════
   2 · STACK — every section a sheet that lands on the pile
════════════════════════════════════════ */
body.dir-2 { background: #1b1c1e; --tab: 22px; --inset: clamp(6px, 1.1vw, 18px); }
.pile { position: relative; padding-top: var(--inset); }
.sheet {
  position: sticky; top: calc(var(--i) * var(--tab)); min-height: calc(100svh - var(--i) * var(--tab));
  margin-inline: var(--inset); rotate: var(--rot, 0deg); transform-origin: 50% 0;
  background: #f4f1e9 center / cover no-repeat;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 -14px 36px rgba(0, 0, 0, 0.32);
}
.sheet__shade { position: absolute; inset: 0; z-index: 40; background: #0d0d0e; opacity: 0; pointer-events: none; }
.sheet__tab { position: absolute; top: 6px; left: clamp(16px, 2vw, 28px); z-index: 8; font: 600 10px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; }
.sheet--photo { background-image: url('/assets/lab/img/lab/home/stock-photo.jpg'); }
.sheet--board { background-image: url('/assets/lab/img/lab/home/stock-board.jpg'); color: #f1eee7; }
.sheet--kraft { background-image: url('/assets/lab/img/lab/home/stock-kraft.jpg'); }
.sheet--cream { background-image: url('/assets/lab/img/lab/home/stock-cream.jpg'); }
.sheet--orange { background-image: url('/assets/lab/img/lab/home/stock-orange.jpg'); }
.sheet__in { position: relative; padding: clamp(64px, 7vw, 104px) 0 clamp(56px, 6vw, 96px); }
.st-head { margin-bottom: clamp(28px, 4vw, 56px); }
.st-meta { font: 500 15px var(--sans); color: var(--grey-ink); margin-top: 14px; }
.st-note { height: clamp(20px, 2vw, 30px); width: auto; margin-bottom: 18px; }
.st-latest { display: grid; grid-template-columns: 0.75fr 2fr; gap: 4vw; align-items: center; min-height: calc(100svh - var(--tab) - 200px); }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 3.6vw, 54px); }
.st-grid__more { display: grid; place-items: center; }
.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.st-head--split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 4vw; align-items: end; }
.st-head--split .title { font-size: clamp(40px, 5vw, 80px); }
.st-head--split .body { margin-top: 0; }
.st-team .btn-tape { margin-top: 26px; }
.st-polas { position: relative; display: grid; grid-template-columns: repeat(3, 1fr) 0.75fr; gap: 3vw; align-items: start; }
.st-sticky { margin-top: 30%; }
.st-close { display: grid; justify-items: center; align-content: center; text-align: center; min-height: calc(100svh - 5 * var(--tab) - 140px); }
.st-close__title { font-size: clamp(52px, 9vw, 160px); }
.st-close .ctas { justify-content: center; margin-top: clamp(30px, 3.6vw, 52px); }
.foot--desk { color: #d4d1ca; }

/* ════════════════════════════════════════
   3 · WORKBENCH — the hero sheet lies on our desk
════════════════════════════════════════ */
body.dir-3 { background: #27292b url('/assets/lab/img/lab/home/mat-2k.jpg') 50% 0 / 1920px auto repeat; color: #ece9e2; }
@media (min-width: 1700px), (min-resolution: 2dppx) { body.dir-3 { background-image: url('/assets/lab/img/lab/home/mat-4k.jpg'); } }
.dir-3 .hero { z-index: 2; color: var(--ink); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.35); }
.mat { position: relative; }
.zone { position: relative; }
.z-latest { height: 58vw; }
.z-work { height: 66vw; }
.z-labs { height: 58vw; }
.z-team { height: 61.5vw; }
.z-close { padding: 4vw 0 2vw; }
/* the stops on the line: a circled number, and the note written next to it */
.mk3 { position: absolute; z-index: 1; }
.mk3--c { width: 4.583vw; height: auto; }
.mk3--n { height: 2.2vw; width: auto; }
.o3 { position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r, 0deg); z-index: var(--z, 1); transform: translateY(var(--py, 0px)); }
.o3 .btn-tape img { width: 100%; height: auto; }
.dir-3 .snap, .dir-3 .card, .dir-3 .pola, .dir-3 .bachi, .dir-3 .sticky, .dir-3 .btn-tape {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 16px 22px rgba(0, 0, 0, 0.32));
}
.lbl { position: relative; container-type: inline-size; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28)); }
.lbl__bg { display: block; width: 100%; height: auto; }
.lbl__t { position: absolute; inset: 0 5%; display: flex; align-items: center; color: var(--ink); font: 600 3.4cqw/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.lbl--title .lbl__t b { font: 400 var(--fs, 5.4cqw)/1 var(--hero); letter-spacing: -0.01em; white-space: nowrap; }
.lbl--sub .lbl__t { font: 500 3.7cqw/1.45 var(--sans); letter-spacing: 0; text-transform: none; }
.ruler { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3)); pointer-events: none; }
.ruler__img, .bretzi3 { display: block; width: 100%; height: auto; }
.bretzi3 { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.28)); }
.b3-close {
  width: min(860px, 88%); margin: 0 auto; padding: clamp(44px, 6vw, 84px) clamp(24px, 4vw, 60px);
  display: grid; justify-items: center; text-align: center; color: var(--ink); rotate: -1deg;
  background: #f4efe4 url('/assets/lab/img/lab/home/stock-cream.jpg') center / cover;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 22px 40px rgba(0, 0, 0, 0.35);
}
.b3-close .title { font-size: clamp(44px, 6.6vw, 110px); }
.b3-close .ctas { justify-content: center; margin-top: clamp(26px, 3vw, 44px); }
.foot--mat { color: #d4d1ca; }

/* ════════════════════════════════════════
   SMALL SCREENS + MOTION
════════════════════════════════════════ */
/* tilted things never push the page sideways; closing lines wrap inside their column */
.nb, .pile, .mat, .foot { overflow-x: clip; }
.nb-close .nb-in > *, .st-close > *, .b3-close > * { max-width: 100%; }

@media (max-width: 900px) {
  .nb-run, .nb-circ, .nb-band, .nb-fold { display: none; }
  .nb-sec { padding: 72px 0 40px; }
  .dir-1 .wrap { width: min(1180px, 100% - 2 * var(--pad)); }
  .nb-bachi { width: 100%; }
  .nb-grid, .st-grid { grid-template-columns: 1fr 1fr; gap: 34px 18px; }
  .nb-cards, .st-cards { grid-template-columns: 1fr; gap: 40px; max-width: 420px; }
  .nb-polas, .st-polas { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .nb-sticky { margin-top: 0; }
  .st-latest, .st-head--split { grid-template-columns: 1fr; min-height: 0; }
  .st-sticky { margin-top: 0; width: 80%; }
  .foot__in { grid-template-columns: 1fr; }
  .foot__nav, .foot__legal { justify-content: flex-start; }

  .z-latest, .z-work, .z-labs, .z-team { height: auto; padding: 56px var(--pad) 20px; display: flex; flex-wrap: wrap; gap: 28px 16px; align-items: flex-start; }
  .o3 { position: relative; left: auto; top: auto; width: 100%; transform: none; }
  .z-work .o3:has(.print), .z-team .o3:has(.pola) { width: calc(50% - 8px); }
  .o3.sticky, .o3:has(.sticky), .o3:has(.bretzi3) { width: 44%; }
  .o3.ruler { width: 92%; }
  .mk3 { position: relative; left: auto !important; right: auto !important; top: auto !important; }
  .mk3--c { width: 46px; flex: 0 0 46px; order: -2; }
  .mk3--n { flex: 1 1 0; min-width: 0; height: 22px; width: auto; align-self: center; order: -1; }
  .o3:has(.lbl--title) { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .drop-in, .snap, .sticky { transition: none !important; }
}

/* ════════════════════════════════════════
   SELECTED WORK, THREE WAYS (workbench drafts 3a, 3b, 3c)
════════════════════════════════════════ */
/* A · the work as slides on a light table; a loupe follows the pointer */
.z-work--a { height: 80vw; }
.lt-wrap { position: absolute; left: 5%; top: 12%; width: 90%; }
.lt { position: relative; }
.lt__img { display: block; width: 100%; height: auto; }
.lt__on { position: absolute; inset: 0; opacity: 0; }
.lt.is-on .lt__on { animation: lt-flicker 1.25s linear forwards; }
@keyframes lt-flicker {
  0% { opacity: 0; } 5% { opacity: 0.85; } 8% { opacity: 0.05; } 13% { opacity: 1; } 17% { opacity: 0.25; }
  24% { opacity: 1; } 29% { opacity: 0.7; } 34%, 100% { opacity: 1; }
}
.lt__bed { position: absolute; }
.slide {
  position: absolute; left: var(--x); top: var(--y); width: 23.5%; rotate: var(--r, 0deg);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.1));
  transition: translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.slide__img { display: block; width: 100%; height: auto; filter: brightness(0.5) saturate(0.7); transition: filter 0.6s ease 0.5s; }
.lt.is-on .slide__img { filter: none; }
.slide:hover { translate: 0 -6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22)) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.16)); }
.lt__cap { margin-top: 20px; text-align: center; font: 600 12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #d9d6cf; }
.lt__cap b { color: var(--orange); font-weight: 600; }
.loupe { position: absolute; left: 0; top: 0; z-index: 5; width: clamp(200px, 20vw, 340px); aspect-ratio: 1; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.lt.is-looking .loupe { opacity: 1; }
.loupe__glass { position: absolute; left: 50%; top: 50%; width: calc(var(--g) * 100%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; overflow: hidden; background: #f3f7fc; }
.loupe__view { position: absolute; left: 0; top: 0; }
.loupe__view .lt__bed { left: 0; top: 0; transform-origin: 0 0; background: #f3f7fc; }
.loupe__rim { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) { .lt.is-on .lt__bed { cursor: none; } }

/* B · the room goes dark and the work is projected, one slide at a time */
.z-work--b { height: auto; }
.zp__head { position: relative; height: 10vw; }
.zp { position: relative; height: calc(100vh + (var(--n) - 1) * 70vh); }
.zp__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.zp__dark { position: absolute; inset: 0; background: #060606; opacity: var(--dark, 0); }
.zp__beam { position: absolute; left: 50%; bottom: -14vh; width: 130vw; height: 120vh; translate: -50% 0; max-width: none; opacity: var(--beam, 0); mix-blend-mode: screen; pointer-events: none; }
.zp__dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--beam, 0); pointer-events: none; }
.zp__screen { position: absolute; left: 50%; top: 45%; width: min(70vw, 118vh); aspect-ratio: 16 / 10; translate: -50% -50%; transform: perspective(1800px) rotateX(1.8deg); opacity: var(--beam, 0); }
.zp__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.12s linear; }
.zp__slide.is-on { opacity: 1; }
.zp__screen.is-changing .zp__slide.is-on { opacity: 0.08; }
.zp__slide img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.06) sepia(0.07) brightness(1.03);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent), linear-gradient(transparent, #000 1.8%, #000 98.2%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent), linear-gradient(transparent, #000 1.8%, #000 98.2%, transparent); mask-composite: intersect;
}
.zp__slide.is-dropping img { animation: zp-drop 0.95s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes zp-drop {
  0% { transform: translateY(-6%); filter: contrast(1.05) saturate(1.06) sepia(0.07) brightness(1.03) blur(10px); }
  40% { transform: translateY(0.5%); }
  100% { transform: none; filter: contrast(1.05) saturate(1.06) sepia(0.07) brightness(1.03) blur(0); }
}
.zp__light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: radial-gradient(ellipse 70% 66% at 50% 52%, rgba(255, 246, 228, 0.08), rgba(0, 0, 0, 0.42) 100%); }
.zp__title { position: absolute; left: var(--pad); top: 5vh; font: 400 clamp(26px, 2.8vw, 44px)/1 var(--hero); text-transform: uppercase; letter-spacing: -0.01em; color: #ebe7de; opacity: var(--beam, 0); }
.zp__cap { position: absolute; left: var(--pad); bottom: 5vh; color: #ebe7de; opacity: var(--beam, 0); }
.zp__count { font: 600 12px var(--sans); letter-spacing: 0.2em; color: #9d9890; }
.zp__count b { color: var(--orange); font-weight: 600; }
.zp__name { margin-top: 10px; font: 400 clamp(22px, 2.2vw, 34px)/1.05 var(--hero); text-transform: uppercase; }
.zp__cat { margin-top: 6px; font: 500 14px var(--sans); color: #b8b3aa; }
.zp__more { position: absolute; right: var(--pad); bottom: 5vh; opacity: var(--beam, 0); }
.zp__more .btn-tape img { height: clamp(40px, 5vh, 56px); }

/* C · the work as a swatch fan deck that opens as you scroll */
.z-work--c { height: 80vw; }
.fan { position: absolute; left: 50%; top: 20%; width: 12.5vw; aspect-ratio: 900 / 3300; translate: -50% 0; }
.fan__card {
  position: absolute; inset: 0; transform-origin: var(--px) var(--py); rotate: var(--a, 0deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fan__card:hover, .fan__card:focus-visible { z-index: 8; transform: translateY(-9%); }
.fan__img { display: block; width: 100%; height: auto; }
.fan__rivet { position: absolute; left: var(--px); top: var(--py); z-index: 10; width: 30%; height: auto; translate: -50% -50%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); pointer-events: none; }

@media (max-width: 900px) {
  .z-work--a, .z-work--c { height: auto; }
  .lt-wrap { position: relative; left: auto; top: auto; width: 100%; }
  .z-work--c .fan { position: relative; left: auto; top: auto; translate: none; width: 22vw; margin: 46vw auto 30px; }
  .z-work--b { display: block; padding: 0; }
  .z-work--b .zp__head { height: 56px; margin: 0 var(--pad); display: flex; align-items: center; gap: 12px; }
  .o3:has(.btn-tape) { width: 72%; }
  .zp__screen { width: 92vw; top: 42%; }
  .zp__cap { bottom: 15vh; }
  .zp__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lt.is-on .lt__on { animation: none; opacity: 1; }
  .zp__slide.is-dropping img { animation: none; }
}

/* D · the register: every project typed on a ledger sheet on a clipboard; the hand marks a row
   and that project's print slides out from under the board */
.z-work--d { height: 80vw; }
.reg { position: absolute; left: 5%; top: 6.5vw; width: 90%; height: 68vw; }
.reg__board { position: absolute; left: 0; top: 0; z-index: 3; width: 55.5%; rotate: -1.2deg; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34)); }
.reg__img { display: block; width: 100%; height: auto; }
.reg__sheet {
  --head: var(--dhead); --rows: var(--drows);
  position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
  container-type: inline-size; color: var(--ink);
}
.reg__head { position: absolute; left: 4cqw; right: 4.5cqw; top: 10.4cqw; }
.reg__kicker { display: flex; justify-content: space-between; padding-bottom: 1cqw; border-bottom: 0.28cqw solid var(--ink); font: 600 1.6cqw/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #6d6860; }
.reg__title { margin: 2.1cqw 0 0 calc(var(--margin) - 4% + 2.4%); font: 400 6cqw/0.95 var(--hero); text-transform: uppercase; letter-spacing: -0.025em; white-space: nowrap; }
.reg__cols { display: grid; grid-template-columns: calc(var(--margin) - 4%) 1fr auto; column-gap: 2.4%; margin-top: 2.6cqw; font: 600 1.45cqw/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: #8c877e; }
.reg__cols span:first-child { text-align: center; }
.reg__rows { position: absolute; left: 0; right: 0; top: var(--head); height: var(--rows); list-style: none; display: grid; grid-template-rows: repeat(12, 1fr); }
.reg__rows li { min-height: 0; }
.reg__row { position: relative; display: grid; grid-template-columns: var(--margin) 1fr auto; column-gap: 2.4%; align-items: end; height: 100%; padding: 0 4.5% 0.8cqw 0; color: var(--ink); }
.reg__n { justify-self: center; font: 600 2.1cqw/1 var(--sans); color: #6d6860; padding-bottom: 0.3cqw; }
.reg__main { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5cqw; min-width: 0; }
.reg__name { font: 400 2.75cqw/1 var(--hero); text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; }
.reg__what, .reg__where { font: 500 1.75cqw/1.1 var(--sans); color: #5a5650; white-space: nowrap; }
.reg__where { text-align: right; }
.reg__where-m { display: none; }
.reg__row:focus-visible { outline: 2px dashed var(--orange); outline-offset: -2px; }
.reg__ring, .reg__under { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; }
.reg__ring { width: 7cqw; height: auto; }
.reg__under { width: 30cqw; height: 2.8cqw; }
.reg__pulls { position: absolute; left: 39%; top: 22%; z-index: 1; width: 44%; aspect-ratio: 1090 / 840; }
.reg__pull {
  position: absolute; left: 0; top: 0; width: 100%; height: auto;
  transform: translate(-75%, 1%) rotate(-3deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.36)) drop-shadow(0 14px 20px rgba(0, 0, 0, 0.3));
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.3, 1);
}
.reg__pull.is-out { z-index: 2; transform: translate(-13%, 0) rotate(var(--r, 2deg)); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.16s; }

/* E · case files: one per project, piled on the mat; as you scroll the top one opens, shows its
   case sheet and is put away, then the next */
.z-work--e { height: auto; }
.zf { position: relative; height: calc(100vh + var(--n) * 85vh); }
.zf__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.zf__title { position: absolute; left: var(--pad); top: 5vh; z-index: 20; width: min(36vw, 52vh); }
.zf__pile { --fw: min(30vw, 46vh); position: absolute; left: 50%; top: 54%; width: var(--fw); aspect-ratio: 1400 / 1980; translate: -50% -50%; }
.cf { position: absolute; inset: 0; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.36)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.3)); }
.cf__link { position: absolute; inset: 0; display: block; perspective: 3200px; perspective-origin: 50% 40%; }
.cf__link:focus-visible { outline: 2px dashed var(--orange); outline-offset: 6px; }
.cf__back { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cf__sheet { position: absolute; left: 6%; top: 10.8%; width: 88%; aspect-ratio: 1240 / 1640; container-type: inline-size; }
.cf__paper { display: block; width: 100%; height: auto; }
.cf__photo { position: absolute; left: 7%; top: 11.5%; width: 86%; height: auto; rotate: 0.6deg; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)); }
.cf__clip { position: absolute; left: 14%; top: 8.4%; width: 6.6%; height: auto; rotate: -4deg; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.cf__f { position: absolute; left: 30%; right: 7%; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf__f--client { bottom: 29%; font: 400 3.7cqw/1.05 var(--hero); text-transform: uppercase; white-space: normal; overflow: visible; }
.cf__f--what { bottom: 20.5%; font: 600 3.5cqw/1.1 var(--sans); }
.cf__f--where { bottom: 12%; font: 600 3.5cqw/1.1 var(--sans); }
.cf__shade { position: absolute; left: 0; top: 9.6%; width: 100%; height: 90.4%; background: linear-gradient(90deg, rgba(20, 14, 6, 0.55), rgba(20, 14, 6, 0) 72%); opacity: var(--shade, 0); pointer-events: none; }
.cf__cover { position: absolute; left: 0; top: 9.6%; width: 100%; height: 90.4%; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(calc(var(--open, 0) * -178deg)); }
.cf__face { position: absolute; inset: 0; display: block; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cf__face--out { filter: brightness(calc(1 - var(--open, 0) * 0.3)); }
.cf__face--in { transform: rotateY(180deg); filter: brightness(calc(0.7 + var(--open, 0) * 0.3)); }
.zf__count { position: absolute; left: var(--pad); bottom: 5vh; font: 600 12px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #9d9890; }
.zf__count b { color: var(--orange); font-weight: 600; }
.zf__more { position: absolute; right: var(--pad); bottom: 5vh; }
.zf__more .btn-tape img { height: clamp(40px, 5vh, 56px); }

@media (max-width: 900px) {
  .z-work--d { height: auto; }
  .reg { position: relative; left: auto; top: auto; flex: 0 0 100%; width: 100%; height: auto; }
  .reg__board { position: relative; width: 100%; rotate: 0deg; }
  .reg__sheet { --head: var(--mhead); --rows: var(--mrows); left: var(--msx); top: var(--msy); width: var(--msw); height: var(--msh); }
  .reg__head { top: 9cqw; }
  .reg__kicker { font-size: 2.8cqw; }
  .reg__cols { font-size: 2.5cqw; grid-template-columns: calc(var(--margin) - 4%) 1fr; }
  .reg__cols span:last-child { display: none; }
  .reg__row { grid-template-columns: var(--margin) 1fr; padding-bottom: 1.6cqw; }
  .reg__n { font-size: 3.4cqw; }
  .reg__name { font-size: 4.6cqw; }
  .reg__what { font-size: 3.4cqw; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .reg__where { display: none; }
  .reg__where-m { display: inline; }
  .reg__under { height: 4.6cqw; }
  .reg__pulls { position: relative; left: auto; top: auto; width: 86%; margin: 0 auto 22px; }
  .reg__pull { transform: translateY(-10px) rotate(-2deg); opacity: 0; transition: opacity 0.5s ease, transform 0.6s ease; }
  .reg__pull.is-out { opacity: 1; transform: rotate(var(--r, 2deg)); transition: opacity 0.5s ease 0.1s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }

  .z-work--e { display: block; padding: 0; }
  .z-work--e .zp__head { height: 56px; margin: 0 var(--pad); display: flex; align-items: center; gap: 12px; }
  .zf__pile { --fw: 42vw; top: 50%; }
  .zf__title { width: 66vw; top: 4vh; }
}
@media (prefers-reduced-motion: reduce) {
  .reg__pull, .reg__pull.is-out { transition: none; }
}

/* ════════════════════════════════════════
   4 · ONE SHEET — everything printed in black on one paper; the orange hand only marks what's
   true (the twist on the tape, the twist of each project, one line per section). No props.
════════════════════════════════════════ */
body.dir-4 { --grey: #5f5a52; --hair: rgba(21, 21, 21, 0.22); --gap: clamp(16px, 2vw, 28px); background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 50% 0 / 1920px auto repeat; }
@media (min-width: 1700px), (min-resolution: 2dppx) { body.dir-4 { background-image: url('/assets/lab/img/lab/home/nb-tile-4k.jpg'); } }
.dir-4 .hero { background: none; }
.dir-4 .hero::before { -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.dir-4 .hero::after { display: none; }
body.dir-4::after { content: ''; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: url('/assets/lab/img/lab/grain.png'); background-size: 256px; opacity: 0.18; mix-blend-mode: overlay; }
.dir-4 .nav__links a::after { background: var(--ink); height: 1px; }
.dir-4 .ctas { gap: 18px 34px; }
@media (min-width: 901px) { body.dir-4 .print { font-size: clamp(54px, min(11.4vw, 19vh), 210px); } }
.colo4 { position: absolute; right: var(--pad); bottom: clamp(28px, 6vh, 64px); z-index: 4; display: grid; gap: 7px; text-align: right; font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); mix-blend-mode: multiply; }

/* printed links; when you point at one, the hand underlines it */
.lk { display: inline-block; font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.lk > span { position: relative; display: inline-block; padding: 6px 0; }
.lk > span::after { content: ' →'; }
.lk[href^="mailto"] > span::after, .lk[href*="wa.me"] > span::after { content: ''; }
.hl { position: absolute; left: -4%; bottom: -0.55em; width: 108%; height: 0.9em; overflow: visible; pointer-events: none; }
.hl path { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 1 1.6; stroke-dashoffset: 1; transition: stroke-dashoffset 0.45s cubic-bezier(0.42, 0.08, 0.45, 0.96); }
a:hover .hl path, a:focus-visible .hl path, .w4:hover .w4__name .hl path { stroke-dashoffset: 0; }
.dir-4 a:focus-visible { outline: 1px dashed var(--ink); outline-offset: 6px; }

.wrap4 { width: min(1320px, 100% - 2 * var(--pad)); margin-inline: auto; }
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.s4 { position: relative; padding-top: clamp(96px, 11vw, 176px); }
.k4 { display: flex; gap: 14px; font: 600 11.5px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.k4 span { color: var(--grey); }
.h4 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; padding-top: 16px; margin-bottom: clamp(40px, 5vw, 76px); border-top: 1px solid var(--ink); }
.h4 .k4 { grid-column: 1 / 4; align-self: start; }
.t4 { grid-column: 4 / 11; font: 500 clamp(34px, 3.9vw, 60px)/1.02 var(--sans); letter-spacing: -0.028em; }
.h4__more { grid-column: 11 / 13; justify-self: end; }
.b4 { font: 400 16.5px/1.6 var(--sans); color: var(--ink); max-width: 34ch; }

/* what we do */
.s4-intro { padding-top: clamp(56px, 7vw, 110px); }
.s4-intro .k4 { grid-column: 1 / 4; padding-top: 0.9em; }
.s4-statement { grid-column: 4 / 13; font: 400 clamp(24px, 2.75vw, 42px)/1.34 var(--sans); letter-spacing: -0.014em; text-wrap: pretty; }
.s4-mark { position: relative; white-space: nowrap; }
.s4-u { position: absolute; left: -2%; bottom: -0.3em; width: 104%; height: 0.42em; }

/* the work: one series, the twist written under each */
.w4-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(72px, 8.5vw, 140px); align-items: start; }
.w4__img { display: block; }
.w4__img img { display: block; width: 100%; height: auto; }
.w4--lead { grid-column: 1 / -1; }
.w4--b1 { grid-column: 1 / 8; }
.w4--b2 { grid-column: 9 / 13; margin-top: 11vw; }
.w4--c1 { grid-column: 2 / 6; }
.w4--c2 { grid-column: 7 / 13; margin-top: 7vw; }
.w4--d1 { grid-column: 1 / 8; }
.w4-more { grid-column: 9 / 13; align-self: end; }
.w4__cap { display: grid; grid-template-columns: 2.6em 1fr; row-gap: 6px; margin-top: 18px; }
.w4__n { grid-row: 1; font: 600 11.5px/1.75 var(--sans); letter-spacing: 0.12em; color: var(--grey); }
.w4__name { font: 600 19px/1.3 var(--sans); letter-spacing: -0.005em; }
.w4__name a { position: relative; display: inline-block; }
.w4__what { grid-column: 2; font: 400 15px/1.5 var(--sans); color: var(--grey); }
.w4__twist { grid-column: 2; display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.w4__twist > span { flex: none; font: 600 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.w4__note { flex: none; height: clamp(15px, 1.4vw, 21px); width: auto; max-width: 100%; }
.w4--lead .w4__cap { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: baseline; }
.w4--lead .w4__n { grid-column: 1; }
.w4--lead .w4__name { grid-column: 2 / 5; }
.w4--lead .w4__what { grid-column: 5 / 9; }
.w4--lead .w4__twist { grid-column: 9 / 13; grid-row: 1; margin-top: 0; }
.w4-more ul { list-style: none; margin: 18px 0 26px; border-top: 1px solid var(--hair); }
.w4-more li { border-bottom: 1px solid var(--hair); }
.w4-more li a { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font: 500 16px/1.2 var(--sans); }
.w4-more li a span { font-weight: 400; font-size: 14px; color: var(--grey); }
.w4-more li .hl { width: 40%; bottom: 0; }

/* what you need: a list to read */
.n4-list { list-style: none; border-top: 1px solid var(--ink); }
.n4 { border-bottom: 1px solid var(--hair); }
.n4__a { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: baseline; padding: clamp(26px, 3vw, 40px) 0; }
.n4__num { grid-column: 1; font: 600 11.5px/1 var(--sans); letter-spacing: 0.12em; color: var(--grey); }
.n4__lab { grid-column: 2 / 4; font: 600 11.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.n4__title { grid-column: 4 / 8; justify-self: start; position: relative; font: 500 clamp(28px, 3.1vw, 48px)/1.02 var(--sans); letter-spacing: -0.024em; }
.n4__title .hl { bottom: -0.42em; height: 0.5em; }
.n4__list { grid-column: 8 / 11; display: grid; gap: 4px; font: 400 15px/1.45 var(--sans); }
.n4__list em { margin-top: 10px; font-style: normal; font-size: 13.5px; color: var(--grey); }
.n4__cta { grid-column: 11 / 13; justify-self: end; font: 600 11.5px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-align: right; }
.n4__cta::after { content: ' →'; }

/* the people */
.p4-route { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: clamp(40px, 5vw, 72px); font: 500 clamp(24px, 2.6vw, 40px)/1.1 var(--sans); letter-spacing: -0.02em; }
.p4-arrow { flex: none; width: clamp(120px, 13vw, 210px); height: auto; translate: 0 0.12em; }
.p4-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 36px; align-items: start; }
.p4-side { grid-column: 1 / 4; display: grid; justify-items: start; gap: 18px; }
.p4-side .b4 { margin-bottom: 8px; }
.p4 { grid-column: span 3; }
.p4 img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.p4 figcaption { display: grid; gap: 3px; margin-top: 14px; }
.p4 figcaption b { font: 600 17px/1.3 var(--sans); }
.p4 figcaption span { font: 400 14px/1.4 var(--sans); color: var(--grey); }

/* the close: the old promise, corrected */
.s4-close { padding-bottom: clamp(96px, 11vw, 170px); }
.c4 { margin-top: clamp(64px, 7vw, 110px); font: 500 clamp(44px, 7.6vw, 128px)/1 var(--sans); letter-spacing: -0.04em; }
.c4__w { position: relative; display: inline-block; }
.c4__strike { position: absolute; left: -7%; top: 34%; width: 114%; height: 0.42em; rotate: -3deg; }
.c4__twist { position: absolute; left: -2%; bottom: 76%; width: 118%; height: auto; rotate: -5deg; }
.c4__links { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: clamp(36px, 4vw, 56px); }

@media (max-width: 900px) {
  .colo4 { display: none; }
  .g12, .h4, .w4-grid, .n4__a, .p4-grid, .w4--lead .w4__cap { display: block; }
  .h4 .t4 { margin-top: 14px; }
  .h4__more { display: inline-block; margin-top: 18px; }
  .s4-statement { margin-top: 18px; }
  .w4 + .w4, .w4 + .w4-more { margin-top: 64px; }
  .w4--b2, .w4--c2 { margin-top: 64px; }
  .w4--lead .w4__cap { display: grid; grid-template-columns: 2.6em 1fr; }
  .w4--lead .w4__name, .w4--lead .w4__what, .w4--lead .w4__twist { grid-column: 2; grid-row: auto; }
  .w4--lead .w4__twist { margin-top: 10px; }
  .w4__twist { flex-wrap: wrap; gap: 8px; }
  .n4__a > span:not(.n4__list) { display: block; }
  .n4__list { display: grid; }
  .n4__lab { margin-top: 10px; }
  .n4__title { display: inline-block; margin: 8px 0 14px; }
  .n4__cta { text-align: left; margin-top: 14px; }
  .p4-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .p4-side { grid-column: 1 / -1; margin-bottom: 18px; }
  .p4 { grid-column: span 1; }
  .p4 figcaption b { font-size: 15px; }
  .p4 figcaption span { font-size: 12px; }
  .c4 { font-size: 13vw; }
}

/* ════════════════════════════════════════
   5 · MIX — the workbench hero and scenes, with home-e's work, needs, close and footer
   (their own styles live in home-mix-e.css, inside .mx-e)
════════════════════════════════════════ */
.mx-e { position: relative; color: #fff; font-family: var(--ff-body, var(--sans)); }
/* home-e's orange is the logo's too */
body .mx-e { --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); }
body .mx-e .btn-primary:hover { background: #EE7128; box-shadow: rgba(255, 135, 56, 0.3) 0 12px 32px; }
.mx-foot { background: #080808; }
.e-panel { display: none !important; }

/* harmonized: paper sheets lying on the desk, one head for every section, tape buttons,
   and the hand instead of the scramble */
.mix-h .mx-work .work-preview { background: transparent; }
.mix-h .work-preview__glow { display: none; }
.mix-h .mx-paper { background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 50% 0 / 1920px auto repeat; }
@media (min-width: 1700px), (min-resolution: 2dppx) { .mix-h .mx-paper { background-image: url('/assets/lab/img/lab/home/nb-tile-4k.jpg'); } }
/* phones, every page (2026-11-12, as work-lab.css did for Work and the cases): 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
   phone files are the exact middle 640 px of the 2K tiles (and 1280 px of the 4K ones for sharp
   screens): the same pixels at a third of the weight, instead of 1.1 MB of 4K tiles on every phone */
@media (max-width: 600px) {
  body.dir-3 { background-image: url('/assets/lab/img/lab/home/mat-phone-1x.jpg'); background-size: 640px auto; }
  .mix-h .mx-paper { background-image: url('/assets/lab/img/lab/home/nb-tile-phone-1x.jpg'); background-size: 640px auto; }
}
@media (max-width: 600px) and (min-resolution: 2dppx) {
  body.dir-3 { background-image: url('/assets/lab/img/lab/home/mat-phone-2x.jpg'); }
  .mix-h .mx-paper { background-image: url('/assets/lab/img/lab/home/nb-tile-phone-2x.jpg'); }
}
/* and the hero's paper and the grain of a photograph (every page, 2026-11-12; Work and the cases had them
   already). paper-phone.jpg is the exact middle 1216 px of paper-2k.jpg: a sheet covering a box at least
   as tall as it is wide (the full-screen heroes and About's and Contact's paper sections, on a phone held
   upright) only ever shows that middle, at the very same scale, so the pixels are the same. The printed
   nav strips (.wk-head on the legal and extra pages, .ab-head, .lb-head) size their paper as for a
   full-screen sheet; the middle at 1216/1920 of that size is the same paper again. Upright only: a phone
   on its side shows more of the sheet than the middle. A hero with a paper of its own (Our Labs' other
   heroes) keeps it: the rule is no stronger than theirs, and they come later. The grain in 16 shades
   instead of 256: each dot moves 8 shades at most; on a phone at 3x the hero differs by 0.3 of 255 on
   average, 5 at most, and the paper sections not at all (compared 2026-11-12). */
@media (max-width: 600px) and (orientation: portrait) {
  .dir-3 .hero:not(:where(.wk-head, .ab-head, .lb-head)), .dir-3 .av-paper { background-image: url('/assets/lab/img/lab/paper-phone.jpg'); }
  body.opt-d .hero:is(.wk-head, .ab-head, .lb-head) { background-image: url('/assets/lab/img/lab/paper-phone.jpg'); background-size: max(63.3333%, 112.594svh) auto; }
}
@media (max-width: 600px) {
  .dir-3 .hero::after, .bachi__grain { background-image: url('/assets/lab/img/lab/grain-phone.png'); }
}

/* sheets torn out of a spiral notebook: the punched holes along the top (tear-edge.webp, holes
   every 40px), the desk showing through them. The sheet's width snaps to whole holes, so the
   row ends with a full hole and the same margin at both ends. --lift (set on scroll) is the
   sheet arriving a little tilted and lifted, and settling flat onto the desk. */
.mix-h { --tp: 40px; --tm: 18px; --te: 52px; --tedge: 3px; --tinset: clamp(10px, 2.2vw, 34px); }
.tear {
  position: relative; z-index: 3; margin-inline: auto;
  width: calc(100% - 2 * var(--tinset));
  width: calc(round(down, 100% - 2 * var(--tinset) - 2 * var(--tm), var(--tp)) + 2 * var(--tm));
  transform-origin: 28% 0;
  transform: translateY(calc(var(--lift, 0) * 34px)) rotate(calc(var(--lift, 0) * -1.1deg));
}
.tear--close { margin-bottom: clamp(36px, 5vw, 80px); }
.tear__paper, .tear__shadow > i, .tear__lift > i {
  -webkit-mask:
    url('/assets/lab/img/lab/home/tear-edge.webp') var(--tm) 0 / auto var(--te) repeat-x,
    linear-gradient(transparent var(--tedge), #000 var(--tedge)) 0 0 / var(--tm) var(--te) no-repeat,
    linear-gradient(transparent var(--tedge), #000 var(--tedge)) 100% 0 / var(--tm) var(--te) no-repeat,
    linear-gradient(#000 0 0) 0 var(--te) / 100% calc(100% - var(--te)) no-repeat;
  mask:
    url('/assets/lab/img/lab/home/tear-edge.webp') var(--tm) 0 / auto var(--te) repeat-x,
    linear-gradient(transparent var(--tedge), #000 var(--tedge)) 0 0 / var(--tm) var(--te) no-repeat,
    linear-gradient(transparent var(--tedge), #000 var(--tedge)) 100% 0 / var(--tm) var(--te) no-repeat,
    linear-gradient(#000 0 0) 0 var(--te) / 100% calc(100% - var(--te)) no-repeat;
}
.tear__shadow, .tear__lift { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tear__shadow > i, .tear__lift > i { position: absolute; inset: 0; background: #040405; }
/* lying flat: a hairline of shadow round the sheet */
.tear__shadow { filter: blur(1.5px); opacity: 0.5; transform: translate(0.5px, 1.5px); }
/* lifted while it arrives: a soft shadow under the whole sheet, gone once it lies flat */
.tear__lift { filter: blur(14px); opacity: calc(var(--lift, 0) * 0.7); transform: translate(calc(var(--lift, 0) * 6px), calc(var(--lift, 0) * 22px)); }
/* the cut edge of each hole catching the light, and the sheet's shadow falling into it */
.tear__fx {
  position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: var(--te); pointer-events: none;
  background: url('/assets/lab/img/lab/home/tear-fx.webp') var(--tm) 0 / auto var(--te) repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) var(--tm) 0 / calc(100% - 2 * var(--tm)) 100% no-repeat;
  mask: linear-gradient(#000 0 0) var(--tm) 0 / calc(100% - 2 * var(--tm)) 100% no-repeat;
}
.mix-h .mx-paper section.needs, .mix-h .mx-paper .final-cta { background: transparent; }
.mix-h .mx-close .e-close { box-shadow: 0 2px 3px rgba(30, 24, 18, 0.25), 0 26px 50px rgba(30, 24, 18, 0.28); }
/* one type scale: the hero is the biggest line, the closing card the second, and every section
   title (01 to 04) shares one size, tracking and colour: paper white on the desk, ink on paper */
.mix-h { --t-size: clamp(34px, 4.8vw, 76px); }
.mix-h .mx-title, .mix-h .mx-e .e-title { font-size: var(--t-size); line-height: 0.92; letter-spacing: -0.035em; }
.mix-h .mx-title, .mix-h .mx-e .work-preview .e-title { color: #F4F1EA; }
.mix-h .mx-e .needs .e-title { color: var(--ink); }
.mix-h .mx-e .e-close__title { font-size: clamp(34px, 9.4cqi, 120px); }

/* a section's head: the number circled by hand and a small printed label; the title below is the headline */
.mx-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mx-head .ink { flex: none; }
.mx-head__c { width: clamp(56px, 4.4vw, 68px); height: auto; }
.mx-label { font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: currentColor; opacity: 0.68; }
.mx-head--c { justify-content: center; }
.mix-h .z-latest { height: auto; padding: clamp(48px, 4.6vw, 80px) 0 clamp(16px, 2vw, 32px); }
.mx-z1-head { margin: 0 var(--pad); color: #ece9e2; }
.mx-z1-desk { position: relative; height: 51vw; margin-top: clamp(32px, 3.4vw, 56px); }
.tear--needs .mx-label { color: var(--ink); }
.mix-h .mx-all img { height: clamp(44px, 4.4vw, 62px); width: auto; }
.mx-team-head { position: absolute; left: 5%; right: 5%; top: 12%; z-index: 2; }
.mix-h .z-team { height: auto; padding: clamp(48px, 4.6vw, 80px) 0 clamp(24px, 3vw, 48px); }
.mix-h .mx-team-head { position: relative; left: auto; right: auto; top: auto; margin: 0 var(--pad); color: #ece9e2; }
/* the desk the polaroids lie on: right under the title, everything on it placed in % of it */
.mx-team-desk { position: relative; height: 38vw; margin-top: clamp(28px, 3.2vw, 56px); }
.dir-3 .bretzi-chat--desk { position: relative; right: auto; bottom: auto; width: 100%; rotate: 0deg; z-index: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 16px 22px rgba(0, 0, 0, 0.32)); }
.mx-barrow { position: absolute; left: 78.5% !important; top: 69% !important; width: 10% !important; z-index: 3; height: auto; pointer-events: none; }
.mx-bnote { position: absolute; left: 70%; top: 78%; z-index: 3; display: grid; gap: 0.35vw; justify-items: start; pointer-events: none; }
.mx-bnote .ink { height: 1.98vw; width: auto; }
.mx-title { font: 400 clamp(34px, 4.1vw, 64px)/0.95 var(--hero); text-transform: uppercase; letter-spacing: -0.02em; color: #f4f1ea; }
.mx-sub { margin-top: 18px; font: 400 17px/1.6 var(--sans); color: #b9b4ab; max-width: 46ch; }
.mx-twist { position: relative; display: inline-block; width: 2.9em; height: 0.78em; vertical-align: baseline; }
.mx-twist__ink { position: absolute; left: -0.04em; bottom: -0.1em; width: 100%; height: auto; }
.mix-h .e-close__btns { align-items: center; gap: 18px 26px; }
.mix-h .e-close__btns .btn-tape img { height: auto; width: auto; max-height: clamp(40px, 3.6vw, 52px); max-width: 100%; }

@media (max-width: 900px) {
  .tear { transform: translateY(calc(var(--lift, 0) * 24px)) rotate(calc(var(--lift, 0) * -0.55deg)); }
  .mx-team-head, .mix-h .mx-team-head { position: relative; left: auto; right: auto; top: auto; flex: 0 0 100%; }
  .mix-h .z-latest { padding: 56px var(--pad) 56px; }
  .mx-z1-head { margin: 0; flex: 0 0 100%; }
  .mx-z1-desk { flex: 0 0 100%; height: auto; margin-top: 8px; }
  .mx-sub { margin-top: 14px; }
  .mix-h .z-team { height: auto; padding: 56px var(--pad) 56px; }
  .mix-h .mx-team-head { margin: 0; }
  .mx-team-desk { flex: 0 0 100%; height: auto; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 28px 16px; align-items: flex-start; }
  .o3:has(.bretzi-chat) { width: 40%; }
  .mx-barrow { position: relative; left: auto !important; top: auto !important; width: 24% !important; align-self: flex-end; margin: 0 0 -14px -13%; rotate: -95deg; }
  .mx-bnote { position: relative; left: auto; top: auto; flex: 0 0 100%; }
  .mx-bnote .ink { height: 22px; }
}

/* ════════════════════════════════════════
   FOOTERS for 5h, three ways (the draft bar switches between them and today's)
════════════════════════════════════════ */
.ft-wrap > .ft { display: none; }
.ft-wrap[data-foot="today"] > .ft--today, .ft-wrap[data-foot="a"] > .ft--a,
.ft-wrap[data-foot="b"] > .ft--b, .ft-wrap[data-foot="c"] > .ft--c { display: block; }
.switch button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #111; }
.mix-h .switch { max-width: calc(100vw - 110px); overflow-x: auto; scrollbar-width: none; }
.mix-h .switch > * { flex: none; white-space: nowrap; }

/* shared: small printed labels and text; the hand underlines a link you point at */
.ft { --fg: #F4F1EA; --fg-2: rgba(244, 241, 234, 0.6); --rule: rgba(244, 241, 234, 0.2); color: var(--fg); }
.ft-k { margin-bottom: 14px; font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.ft-p { font: 400 16px/1.6 var(--sans); color: var(--fg); }
.fl { display: block; width: fit-content; margin-bottom: 6px; font: 400 16px/1.6 var(--sans); color: var(--fg); }
.fl > span { position: relative; display: inline-block; }
.fl .hl { bottom: -0.3em; height: 0.55em; }
.fa__legal, .fb__legal, .fc__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font: 500 13px/1.4 var(--sans); color: var(--fg-2); }
.fa__legal .fl, .fb__legal .fl, .fc__legal .fl { display: inline-block; margin: 0; font-size: 13px; color: var(--fg-2); }

/* A · colophon: on the desk, small printed type only */
.ft--a { padding: clamp(72px, 7vw, 120px) var(--pad) clamp(28px, 3vw, 44px); }
.fa { display: grid; grid-template-columns: 1.5fr 0.8fr 1.4fr 1fr 0.8fr; gap: 36px clamp(24px, 3vw, 48px); padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--rule); }
.fa__logo { display: block; height: clamp(40px, 3.4vw, 50px); width: auto; margin-bottom: 20px; }
.fa__brand .ft-p { color: var(--fg-2); }
.fa__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: clamp(56px, 6vw, 96px); padding-top: 22px; border-top: 1px solid var(--rule); }
.fa__top { font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); }

/* B · the index on the notebook's back page: the hand circles a number when you point at it */
.ft--b { --fg: var(--ink); --fg-2: #5f5a52; --rule: rgba(21, 21, 21, 0.16); padding-top: clamp(40px, 5vw, 80px); }
.tear--foot { margin-bottom: 0; }
.fb { --side: clamp(28px, 5vw, 80px); padding: clamp(84px, 7.6vw, 120px) var(--side) 0; color: var(--ink); }
.fb__top { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px clamp(40px, 7vw, 128px); align-items: start; }
.fb__index ol { list-style: none; border-top: 1px solid var(--ink); }
.fb__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 18px; padding: 18px 0 14px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.fb__name { font: 500 clamp(24px, 2.4vw, 36px)/1.1 var(--sans); letter-spacing: -0.015em; }
.fb__name > span { position: relative; display: inline-block; }
.fb__name .hl { bottom: -0.32em; height: 0.45em; }
.fb__dots { height: 0; border-bottom: 2px dotted rgba(21, 21, 21, 0.38); translate: 0 -0.28em; }
.fb__n { position: relative; padding: 0 6px; font: 600 14px/1 var(--sans); letter-spacing: 0.1em; color: var(--fg-2); }
.fb__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; }
.fb__side .ft-k:not(:first-child) { margin-top: 30px; }
.fb__legal { margin-top: clamp(56px, 6vw, 96px); padding-top: 18px; border-top: 1px solid var(--rule); }
.fb__mark { height: 19vw; margin: clamp(28px, 3vw, 48px) calc(-1 * var(--side)) 0; overflow: hidden; }
.fb__logo { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* C · signature, on one centre line like the hero: the pages set like the section titles, the
   contact in three even columns, the legal line, and the wordmark cut off at the bottom */
.ft--c { padding-top: clamp(64px, 6.4vw, 104px); text-align: center; }
.fc { display: grid; justify-items: center; gap: clamp(44px, 4.6vw, 76px); margin: 0 var(--pad); }
/* the pages in one row, spread from margin to margin (they wrap to two centred rows on a phone) */
.fc__nav { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; width: 100%; }
/* the menu sits one step under the section titles (80% of their size), with air between the pages */
.ft .fc__a { margin: 0; font: 400 calc(var(--t-size) * 0.8)/0.95 var(--hero); letter-spacing: -0.035em; text-transform: uppercase; color: var(--fg); }
.fc__a .hl { bottom: -0.16em; height: 0.3em; }
/* five pages since 2026-11-12 (the Playground after Contact): the row is about 25 em of words, so at 80%
   of the section titles it only fits from about 1780 px up. Narrower, the words shrink with the row
   (1/30 of it) to stay on one line from margin to margin, an em or more of air between them */
@media (min-width: 901px) {
  .fc__nav { container-type: inline-size; }
  .ft .fc__a { font-size: min(calc(var(--t-size) * 0.8), calc(100cqw / 30)); }
}
.fc__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 72px); width: min(880px, 100%); }
.fc__info .fl { margin-inline: auto; }
.fc__legal { justify-content: center; margin: clamp(48px, 5vw, 80px) var(--pad) 0; }
/* cut just under the bar of the e's (they end at 581 of the logo's 845px), so they still read as e's */
.fc__mark { aspect-ratio: 2793 / 600; margin-top: clamp(28px, 3vw, 48px); overflow: hidden; }
.fc__logo { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .fa { grid-template-columns: 1fr 1fr; }
  .fa__brand { grid-column: 1 / -1; }
  .fb__top { grid-template-columns: 1fr; }
  .fb__name { font-size: 22px; }
  .fc__nav { flex-direction: column; align-items: center; gap: 14px; }
  .fc__info { grid-template-columns: 1fr; width: 100%; }
  .fb__mark { height: 23vw; }
}

/* ════════════════════════════════════════
   NAV for 5h (html.nav-v2; "Today" in the draft bar takes the class off): the hero's nav with
   the hand, a running header once the hero is gone, and the phone's menu on a torn sheet
════════════════════════════════════════ */
html:not(.nav-v2) .rh, html:not(.nav-v2) .mm, html:not(.nav-v2) .nav__menu,
html:not(.nav-v2) .lng__ring, html:not(.nav-v2) .nav .hl { display: none !important; }
/* which pieces come in once the hero is gone: A the running header, B the index tabs and the
   MENU tape, C the logo sticker and the MENU tape */
html:not(.nav-a) .rh, html:not(.nav-b) .ix, html:not(.nav-c) .flt-logo,
html:not(.nav-b):not(.nav-c) .flt-menu { display: none !important; }
.nav__menu { display: none; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; color: inherit; cursor: pointer; }
.nav__menu img { height: 38px; width: auto; }

/* the hero's nav: the hand underlines a link you point at and circles the language in use */
.nav-v2 .nav__links a::after { display: none; }
.nav__links a > span, .rh__links a > span { position: relative; display: inline-block; }
.nav .hl, .rh .hl { bottom: -0.8em; height: 0.9em; }
.lng { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.lng__b { padding: 6px 3px; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.nav-v2 .lng__b:not(.is-on) { opacity: 0.5; transition: opacity 0.2s ease; }
.nav-v2 .lng__b:hover { opacity: 1; }
.lng__ring { position: absolute; left: 0; top: 0; width: 3.4em; height: auto; pointer-events: none; }

/* the running header: a strip of the same grid paper slides down once the hero is gone,
   with the knot, the section you're in (its number circled by hand) and the pages */
.rh {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: 66px; padding: 0 var(--pad) 6px;
  background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 50% 0 / 1920px auto repeat;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 30px rgba(0, 0, 0, 0.26);
  transform: translateY(-115%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-past .rh { transform: none; }
/* the printed rule, as under the hero's nav */
.rh::after { content: ''; position: absolute; left: var(--pad); right: var(--pad); bottom: 8px; border-top: 2px solid var(--ink); mix-blend-mode: multiply; pointer-events: none; }
.rh__logo { justify-self: start; display: block; }
.rh__mark { display: block; height: 26px; width: auto; }
.rh__where { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.rh__nums { position: relative; flex: none; width: 44px; height: 41px; }
.rh__c { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.rh__c.is-on { opacity: 1; }
.rh__label { transition: opacity 0.18s ease; }
.rh__right { justify-self: end; display: flex; align-items: center; gap: 26px; }
.rh__links { display: flex; gap: 26px; font: 600 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.rh__cta img { height: 34px; width: auto; }

/* B · index tabs: paper tabs stick out of the right edge like a binder's, one per section; the
   one you're in sticks out further with its number circled by hand; hover shows its name */
.ix { position: fixed; right: 0; top: 50%; z-index: 55; display: grid; gap: 8px; transform: translate(115%, -50%); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-past .ix { transform: translate(0, -50%); }
.ix__tab {
  position: relative; display: grid; place-items: center; width: 70px; height: 56px; margin-right: -18px; padding-right: 18px;
  border-radius: 10px 0 0 10px; color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: 0.08em;
  background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 0 0 / 1920px auto repeat;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.3), -8px 10px 20px rgba(0, 0, 0, 0.22);
  transition: translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ix__tab:hover, .ix__tab:focus-visible { translate: -6px 0; }
.ix__tab.is-on { translate: -14px 0; }
.ix__tab:focus-visible { outline: 2px dashed var(--orange); outline-offset: 3px; }
.ix__n { position: relative; }
.ix__ring { position: absolute; left: calc(50% - var(--fx) * 3.4em); top: calc(50% - var(--fy) * 3.4em * var(--ar)); width: 3.4em; height: auto; opacity: 0; pointer-events: none; }
.ix__tab.is-on .ix__ring { opacity: 1; }
.ix__label {
  position: absolute; right: calc(100% + 10px); top: 50%; translate: 8px -50%; opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 9px 12px; color: var(--ink); font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  background: #EFEBE3 url('/assets/lab/img/lab/home/nb-tile-2k.jpg') 0 0 / 1920px auto repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.22);
  transition: opacity 0.2s ease, translate 0.25s ease;
}
.ix__tab:hover .ix__label, .ix__tab:focus-visible .ix__label { opacity: 1; translate: 0 -50%; }

/* B and C · the MENU tape stuck at the top right; C also sticks the logo, die-cut, top left */
.flt { position: fixed; top: 16px; z-index: 58; display: block; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24));
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.25s ease; }
.flt img { display: block; width: auto; }
.flt-menu { right: var(--pad); transform: translateY(-160%) rotate(10deg); opacity: 0; }
.flt-menu img { height: 40px; }
.flt-logo { left: var(--pad); transform: translateY(-160%) rotate(-12deg); opacity: 0; }
.flt-logo img { height: 50px; }
.nav-past .flt-menu { transform: rotate(2deg); opacity: 1; }
.nav-past .flt-logo { transform: rotate(-4deg); opacity: 1; }
.flt-menu:hover { transform: rotate(-1deg) translateY(-2px); }
.flt-logo:hover { transform: rotate(-1deg) scale(1.03); }
.flt:focus-visible { outline: 2px dashed var(--orange); outline-offset: 6px; }
/* C · the logo lifts off while a head, a title, text or a button passes under it (home-lab.js), and
   lets the clicks through to it; it lands again once that has gone by. Focused, it stays */
.nav-past .flt-logo.is-shy { opacity: 0; transform: rotate(-4deg) translateY(-14px); pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.2s ease; }
.nav-past .flt-logo.is-shy:focus-visible { opacity: 1; transform: rotate(-4deg); pointer-events: auto; }

/* the phone's menu: a sheet torn out of the notebook drops in, with the pages large */
.mm { --fg: var(--ink); --fg-2: #5f5a52; --tinset: 0px; position: fixed; inset: 0; z-index: 80; overflow-y: auto; padding: 10px 8px 24px; background: rgba(12, 12, 13, 0.55); opacity: 0; transition: opacity 0.3s ease; }
.mm[hidden] { display: none; }
.mm.is-open { opacity: 1; }
.mm .tear { transform: translateY(-110%) rotate(-2deg); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); }
.mm.is-open .tear { transform: none; }
.mm__sheet { position: relative; padding: 70px 24px 34px; }
.mm__close { position: absolute; right: 16px; top: 64px; padding: 0; border: 0; background: none; cursor: pointer; }
.mm__close img { height: 36px; width: auto; }
.mm__nav { display: grid; justify-items: start; gap: 8px; margin-top: 68px; }
.mm__a { font: 400 var(--t-size)/1 var(--hero); letter-spacing: -0.035em; text-transform: uppercase; color: var(--ink); }
.mm__a > span { position: relative; display: inline-block; }
.mm__a .hl { bottom: -0.16em; height: 0.3em; }
.mm__foot { display: grid; gap: 26px; margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(21, 21, 21, 0.16); }
.mm__lang { font: 600 13px/1 var(--sans); letter-spacing: 0.12em; color: var(--ink); }
.mm a:focus-visible, .mm button:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; }

/* on a big screen the menu sheet is a centred page: the pages large on the left, the rest on the right */
@media (min-width: 901px) {
  .mm { padding: 26px var(--pad); }
  .mm .tear { width: calc(round(down, min(1160px, 100%) - 2 * var(--tm), var(--tp)) + 2 * var(--tm)); }
  .mm__sheet { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 64px; align-items: end; padding: 92px 72px 60px; }
  .mm__nav { margin-top: 30px; gap: 12px; }
  .mm__foot { margin-top: 0; padding-top: 0; border-top: 0; gap: 30px; }
  .mm__close { top: 72px; right: 44px; }
  .mm__close img { height: 40px; }
}

@media (max-width: 900px) {
  .ix { display: none !important; }
  .flt-menu img { height: 34px; }
  .flt-logo img { height: 40px; }
  .flt { top: calc(env(safe-area-inset-top, 0px) + 22px); }
  .nav-v2 .nav__menu { display: block; }
  .nav-v2 .nav .nav__cta, .nav .lng { display: none; }
  .rh { grid-template-columns: auto 1fr auto; gap: 10px; height: 60px; }
  .rh__where { justify-self: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.12em; }
  .rh__nums { width: 34px; height: 32px; }
  .rh__links, .rh__cta { display: none; }
  .rh__mark { height: 22px; }
  .rh .nav__menu img { height: 32px; }
}
/* on a phone the logo sticker is small (about 90px wide), so it covers less of the page */
@media (max-width: 600px) {
  .flt-logo img { height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh, .mm, .mm .tear, .ix, .ix__tab, .flt { transition: none; }
  /* the logo still gets out of the way, by fading in place */
  .flt-logo, .nav-past .flt-logo.is-shy { transition: opacity 0.2s linear; }
  .nav-past .flt-logo.is-shy { transform: rotate(-4deg); }
}