/* The Gist: the British newsstand.
   Palette is the logo only: orange, blue, cream, ink, plus newsprint (a cream tint) and shades.
   Everything printed carries paper fibre; every prop is a real photo plate with live CSS inside. */

:root {
  --orange: #EE4922; --orange-deep: #C93A17; --orange-dark: #9E2C10; --orange-wash: #F6B9A6;
  --blue: #1E6CAD; --blue-deep: #154E80; --blue-ink: #0E3558;
  --cream: #FEF8EA; --newsprint: #EEE5CF; --newsprint-deep: #E2D6BA;
  --ink: #121311; --ink-soft: #4A4840; --ink-fade: #615D52;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-pop: cubic-bezier(.22, 1.22, .36, 1);
  --ease-drop: cubic-bezier(.3, 1.35, .45, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --shell: 1320px;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --cond: "Archivo", var(--sans);
  --serif: "Source Serif 4", Georgia, serif;
  --hand: "Zeyada", cursive;

  --shadow-paper: 0 1px 1px rgb(0 0 0 / .12), 0 18px 30px -18px rgb(40 15 0 / .55), 0 50px 70px -40px rgb(40 15 0 / .45);

  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .8' numOctaves='4' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.6'%3E%3CfeDistantLight azimuth='120' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) transparent; scroll-padding-top: 90px; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--orange); -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; display: block; }
::selection { background: var(--ink); color: var(--cream); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.on-ink :focus-visible, .foot :focus-visible { outline-color: var(--cream); }
.sheet :focus-visible, .form-card :focus-visible, .broadsheet :focus-visible { outline-color: var(--blue); }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
img, video, canvas, svg { display: block; max-width: 100%; }
picture { display: contents; }   /* only there to offer AVIF first: the <img> inside lays out as if it stood alone */
picture > source { display: none; }   /* (a source is an empty inline box otherwise, an extra item in a flex or grid) */
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
input { caret-color: var(--orange); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 10px; border: 2px solid var(--orange); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }
.narrow { width: min(100% - var(--gutter) * 2, 860px); margin-inline: auto; }

/* page grain over the flood */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .1; background-image: var(--speck); will-change: transform; transform: translateZ(0); }

.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 800; text-decoration: none; transform: translateY(-160%); transition: transform .35s var(--ease-out); }
.skip:focus { transform: none; }

/* printed surfaces: fibre plus edge falloff */
.printed { position: relative; isolation: isolate; }
.printed::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; background-image: var(--fibre); background-size: 300px; mix-blend-mode: multiply; opacity: .15; }
.printed::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05), inset 0 0 30px rgb(80 50 10 / .10); }

/* ---------- type ---------- */
:where([data-write], [data-pen]) { position: relative; display: inline-block; }
/* once written, a wobbly pen underline flicks in beneath the note */
.uline { position: absolute; left: -2%; width: 104%; bottom: -.08em; height: .3em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; pointer-events: none; }
.written > .uline { stroke-dashoffset: 0; transition: stroke-dashoffset .1s ease-out; transition-delay: calc(var(--wdel, 0s) + var(--wdur, 1.2s)); }
html:not(.js) .uline { stroke-dashoffset: 0; }
.sec-h, .page-h { font-size: clamp(38px, 5.2vw, 76px); font-weight: 900; letter-spacing: -.04em; line-height: .92; color: var(--cream); text-wrap: balance; }
.page-h { font-size: clamp(44px, 7vw, 96px); line-height: .88; max-width: 14ch; }
.sec-lede, .page-lede { margin-top: 18px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.45; color: var(--ink); max-width: 46ch; text-wrap: pretty; }
.page-lede { font-size: clamp(18px, 1.7vw, 23px); max-width: 40ch; }
.sec { padding: var(--space-sec, clamp(48px, 6vw, 88px)) 0; position: relative; }
.sec.tight { padding-top: clamp(24px, 3vw, 40px); }
.hand { font-family: var(--hand); font-weight: 400; line-height: 1.2; }
.note { position: absolute; font: 400 clamp(25px, 2.1vw, 30px)/1.1 var(--hand); color: var(--cream); transform: rotate(-3deg); white-space: nowrap; pointer-events: none; z-index: 12; }
.note.ink { color: var(--ink); }
.note.blue { color: var(--blue); }
.note svg.squiggle { width: 64px; height: 30px; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* headline word rise */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .02em .24em; margin: -.04em -.02em -.24em; }
[data-split] .w > span { display: inline-block; transform: translateY(calc(100% + .32em)); animation: rise 1.05s var(--ease-out) forwards; animation-delay: calc(.1s + var(--i) * .07s); }
@keyframes rise { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.enter { opacity: 0; animation: fade-up 1s var(--ease-out) forwards; animation-delay: var(--d, .5s); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; text-decoration: none; background: var(--cream); color: var(--ink); text-align: center;
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 22px -12px rgb(0 0 0 / .7); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s, color .3s; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 16px 26px -12px rgb(0 0 0 / .7); } }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .1s; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover svg { transform: translateX(4px); } }
@media (hover: hover) and (pointer: fine) { .btn.back:hover svg { transform: translateX(-4px); } }
.btn.ink { background: var(--ink); color: var(--cream); }
.btn.blue { background: var(--blue); color: var(--cream); }
.btn.orange { background: var(--orange); color: var(--cream); }
.btn.orange:hover { background: var(--orange-deep); }
.btn[aria-disabled="true"] { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 2px rgb(18 19 17 / .25); cursor: not-allowed; transform: none; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.textlink { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; min-height: 44px; display: inline-flex; align-items: center; transition: text-underline-offset .3s var(--ease-out), color .3s; }
.textlink:hover { text-underline-offset: .4em; }
.ink-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 4px; background: var(--ink); color: var(--newsprint); font-weight: 800; text-decoration: none; transition: transform .3s var(--ease-out), background-color .3s; }
@media (hover: hover) and (pointer: fine) { .ink-btn:hover { transform: translateY(-2px); background: var(--orange-dark); } }
.ink-btn svg { width: 18px; height: 18px; }
.round { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--ink); box-shadow: 0 10px 20px -12px rgb(0 0 0 / .6); transition: transform .3s var(--ease-out), opacity .3s; }
@media (hover: hover) and (pointer: fine) { .round:hover { transform: translateY(-2px); } }
.round:active { transform: scale(.94); }
.round svg { width: 20px; height: 20px; }
.round[disabled] { opacity: .4; cursor: default; transform: none; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 60; transition: transform .5s var(--ease-out), background-color .4s, box-shadow .4s; }
.top.scrolled { background: color-mix(in srgb, var(--orange) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 24px -20px rgb(40 10 0 / .6); }
.top.hide:not(.menu-open) { transform: translateY(-100%); }
.top .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.brand { display: block; border-radius: 12px; view-transition-name: masthead; }
.brand img { height: clamp(48px, 4.6vw, 64px); width: auto; transition: transform .45s var(--ease-pop); }
@media (hover: hover) and (pointer: fine) { .brand:hover img { transform: rotate(-4deg) scale(1.05); } }
.top .shell > nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-weight: 850; font-size: clamp(19px, 1.35vw, 20px); letter-spacing: -.01em; color: var(--cream); }
.top .shell > nav .btn { letter-spacing: -.01em; }
.top .shell > nav a:not(.btn) { text-decoration: none; position: relative; padding: 12px 0; }
.top .shell > nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 3px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.top .shell > nav a:not(.btn):hover::after, .top .shell > nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.top .btn { min-height: 44px; padding: 0 18px; font-size: 15px; view-transition-name: nav-cta; }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--cream); place-items: center; position: relative; z-index: 2; }
.menu-btn { transition: transform .12s cubic-bezier(.2, .8, .2, 1); }
.menu-btn:active { transform: scale(.92); }
.menu-btn i { position: absolute; left: 14px; right: 14px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .16s cubic-bezier(.2, .8, .2, 1); }
.menu-btn i:nth-child(1) { transform: translateY(-6px); }
.menu-btn i:nth-child(3) { transform: translateY(6px); }
.menu-open .menu-btn i:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-btn i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .menu-btn i:nth-child(3) { transform: rotate(-45deg); }
.drawer { display: none; }
@media (max-width: 900px) {
  .top .shell > nav { display: none; }
  .menu-btn { display: grid; }
  .js .drawer { display: block; position: fixed; inset: 0; z-index: 1; background: var(--cream); padding: 96px var(--gutter) 40px; overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .18s cubic-bezier(.4, 0, 1, 1), visibility 0s .18s; }
  .js .drawer::after { content: ""; position: absolute; inset: 0; background-image: var(--fibre); background-size: 300px; mix-blend-mode: multiply; opacity: .16; pointer-events: none; }
  .menu-open .drawer { visibility: visible; clip-path: inset(0); transition: clip-path .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; will-change: clip-path; }
  .drawer ul { list-style: none; display: grid; gap: 4px; }
  .drawer li a { color: var(--ink); display: flex; align-items: baseline; justify-content: space-between; min-height: 56px; padding: 8px 0; border-bottom: 1px solid rgb(18 19 17 / .2); font: 900 clamp(34px, 9vw, 52px)/1 var(--sans); letter-spacing: -.04em; text-decoration: none; opacity: 0; transform: translateY(14px); transition: opacity .2s cubic-bezier(.2, .8, .2, 1), transform .26s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.06s + var(--i) * .03s); }
  .drawer li a[aria-current="page"] { color: var(--orange-dark); }
  .menu-open .drawer li a { opacity: 1; transform: none; }
  .drawer .btn { margin-top: 28px; width: 100%; }
  .drawer .drawer-note { margin-top: 24px; color: var(--ink-soft); font-weight: 600; }
  .menu-open .brand { position: relative; z-index: 2; }
  .top.menu-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
}
/* No-JS: the menu button is hidden and links wrap instead */
html:not(.js) .menu-btn { display: none; }
@media (max-width: 900px) { html:not(.js) .top .shell > nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; } html:not(.js) .top .shell { flex-wrap: wrap; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(18px, 3vw, 40px) 0 clamp(12px, 2vw, 28px); color: var(--cream); }
.hero + .board-sec { padding-top: clamp(16px, 2vw, 32px); }
.hero .shell { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(calc(100svh - 90px), 860px); }
.hero h1 { font-size: clamp(48px, 5.8vw, 92px); font-weight: 900; letter-spacing: -.045em; line-height: .88; text-wrap: balance; max-width: 10ch; }
.hero .sub { margin-top: 20px; font-size: clamp(17px, 1.45vw, 21px); font-weight: 600; color: var(--ink); max-width: 36ch; }
@media (max-width: 900px) {
  .hero .shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* ---------- wire shelf plate (shelf-cut behind, covers, shelf-front on top) ---------- */
.shelfunit { position: relative; aspect-ratio: 1246 / 455; width: 100%; }
.shelfunit .plate { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }   /* not a child selector: the plate sits in a <picture> */
.shelfunit .plate.back { z-index: 1; }
.shelfunit .plate.front { z-index: 6; }
.shelfunit .row { position: absolute; z-index: 3; left: 7.6%; right: 7.6%; bottom: 25%; display: flex; align-items: flex-end; justify-content: center; gap: 2.6%; }
.shelfunit .row > * { flex: 1 1 0; min-width: 0; }
.shelfunit .slot { position: relative; perspective: 1400px; }
.rack { position: relative; padding-top: 16%; }
.hero .rack .row { left: 6.5%; right: 6.5%; gap: 2%; }
/* first load, home: one thing leads at a time. Headline words, then the line and buttons, then the covers drop onto a
   shelf that has simply faded up (no rise of its own, so it never moves alongside the words) */
.rack .plate { animation: shelf-in .9s var(--ease-out) .25s both; }
@keyframes shelf-in { from { opacity: 0; } to { opacity: 1; } }
/* each magazine is placed into the shelf from above: it passes behind the front rail, lands tilted and settles */
.rack .slot { opacity: 0; transform: translateY(-70%) rotate(calc(var(--r) - 7deg)); animation: place 1.25s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: calc(.75s + var(--i) * .2s); }
@keyframes place {
  0% { opacity: 0; transform: translateY(-70%) rotate(calc(var(--r) - 7deg)); }
  18% { opacity: 1; }
  58% { transform: translateY(3%) rotate(calc(var(--r) + 1.4deg)); }
  78% { transform: translateY(-1.2%) rotate(calc(var(--r) - .4deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r)); }
}
/* the cover's shop light sits still (the sweep across each cover on load was cut: three more things moving at once) */
.rack .mag .light { background: linear-gradient(115deg, rgb(255 255 255 / .10) 0%, transparent 38%, transparent 70%, rgb(0 0 0 / .10) 100%); }
.rack .slot:nth-child(1) { --r: -2.4deg; --i: 0; z-index: 3; }
.rack .slot:nth-child(2) { --r: 1.6deg; --i: 1; z-index: 2; }
.rack .slot:nth-child(3) { --r: -1deg; --i: 2; z-index: 1; }
.rack .slot .mag { transform-origin: 50% 100%; }
/* the first-visit intro holds the stand until the logo has flown into the masthead */
.intro-hold .hero *, .intro-hold .hero *::before, .intro-hold .hero *::after { animation-play-state: paused !important; }
.js.intro-hold .hero [data-write] { transition: none; clip-path: inset(-20% 100% -20% 0) !important; }
.js.intro-hold .hero .uline { transition: none !important; stroke-dashoffset: 1 !important; }
.rack .note { right: 6%; top: 0; }
@media (max-width: 900px) {
  .rack-scroll { margin-inline: calc(var(--gutter) * -1); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px; }
  .rack-scroll::-webkit-scrollbar { display: none; }
  .rack-scroll .rack { width: 600px; margin-inline: var(--gutter); }
  .rack-scroll .slot { scroll-snap-align: center; }
  .swipe-hint { display: flex !important; }
}
.swipe-hint { display: none; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--ink); }
.swipe-hint svg { width: 18px; height: 18px; animation: nudge 1.8s var(--ease-in-out) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* ---------- magazine cover ---------- */
.mag { container-type: inline-size; position: relative; display: block; aspect-ratio: 3 / 4; width: 100%; text-decoration: none; color: var(--ink); border-radius: 2px 5px 5px 2px; background: var(--cream); overflow: hidden;
  transform: rotateX(4deg) rotateY(-5deg); transform-origin: left bottom;
  box-shadow: -1px 0 0 rgb(0 0 0 / .25), 0 1px 1px rgb(0 0 0 / .15), 0 14px 22px -10px rgb(40 15 0 / .55), 0 40px 60px -30px rgb(40 15 0 / .5);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
a.mag:focus-visible { transform: rotateX(0) rotateY(-2deg) translateY(-14px) rotate(-1deg); box-shadow: -1px 0 0 rgb(0 0 0 / .25), 0 1px 1px rgb(0 0 0 / .15), 0 26px 34px -14px rgb(40 15 0 / .55), 0 60px 80px -30px rgb(40 15 0 / .45); }
@media (hover: hover) and (pointer: fine) { a.mag:hover { transform: rotateX(0) rotateY(-2deg) translateY(-14px) rotate(-1deg); box-shadow: -1px 0 0 rgb(0 0 0 / .25), 0 1px 1px rgb(0 0 0 / .15), 0 26px 34px -14px rgb(40 15 0 / .55), 0 60px 80px -30px rgb(40 15 0 / .45); } }
.mag .spine { position: absolute; inset: 0 auto 0 0; width: 9px; z-index: 7; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .28), rgb(255 255 255 / .18) 35%, rgb(0 0 0 / .12) 55%, transparent); }
.mag .pages { position: absolute; inset: 3px 0 3px auto; width: 4px; z-index: 7; pointer-events: none; background: repeating-linear-gradient(90deg, #f4ecda 0 1px, #cfc3a6 1px 1.6px); opacity: .9; }
.mag .light { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .10) 0%, transparent 38%, transparent 70%, rgb(0 0 0 / .10) 100%); }
.mag .masthead { position: absolute; left: 6%; top: 4.5%; width: 30%; z-index: 4; }
.mag .masthead img { width: 100%; height: auto; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .12)); }
.mag .issue { position: absolute; right: 6%; top: 6%; z-index: 4; text-align: right; font: 800 4.2cqw/1.25 var(--sans); letter-spacing: .04em; }
.mag .lines { position: absolute; left: 7%; right: 7%; bottom: 7%; z-index: 4; display: grid; gap: 2.4cqw; }
.mag .big { font: 900 14cqw/.86 var(--cond); font-stretch: 68%; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.mag .small { font: 700 5cqw/1.2 var(--sans); max-width: 30ch; }
.mag .tag { display: inline-block; padding: .3em .55em .25em; font: 900 5.4cqw/1 var(--cond); font-stretch: 72%; text-transform: uppercase; letter-spacing: .02em; justify-self: start; }
.mag .flash { position: absolute; z-index: 4; width: 22cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; font: 900 5.6cqw/.95 var(--cond); font-stretch: 70%; text-transform: uppercase; transform: rotate(-12deg); }
.mag .barcode { position: absolute; z-index: 4; right: 6%; bottom: 5%; width: 20%; background: #fff; padding: 3px 3px 1px; border-radius: 1px; }
.mag .barcode svg { display: block; width: 100%; height: auto; }
.mag .barcode span { display: block; font: 600 5px/1.2 var(--sans); letter-spacing: .1em; text-align: center; color: var(--ink); }
.mag .fade { position: absolute; inset: 0; z-index: 2; }
/* photo printed into the cover */
.print { position: absolute; inset: 0; display: block; overflow: hidden; }
.print img, .print canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.print img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.print canvas { opacity: 0; transition: opacity .8s var(--ease-out); }
.print.done canvas { opacity: 1; }
.print.done img { visibility: hidden; }
/* cover colourways */
.mag.c1 { background: var(--orange); color: var(--cream); }
.mag.c1 .fade { background: linear-gradient(180deg, transparent 44%, rgb(238 73 34 / .9) 72%, #EE4922 90%); }
.mag.c1 .tag { background: var(--cream); color: var(--orange-dark); }
.mag.c1 .flash { right: 7%; top: 24%; background: var(--blue); color: var(--cream); }
.mag.c2 { background: var(--blue); color: var(--cream); }
.mag.c2 .fade { background: linear-gradient(180deg, rgb(30 108 173 / .0) 30%, rgb(30 108 173 / .85) 62%, #1E6CAD 80%); }
.mag.c2 .tag { background: var(--orange); color: var(--cream); }
.mag.c3 { background: var(--cream); color: var(--ink); }
.mag.c3 .fade { background: linear-gradient(180deg, transparent 32%, rgb(254 248 234 / .9) 60%, #FEF8EA 78%); }
.mag.c3 .tag { background: var(--ink); color: var(--cream); }
.mag.c3 .flash { right: 6%; top: 22%; background: var(--orange); color: var(--cream); font-size: 6.4cqw; }
.mag.c4 { background: var(--ink); color: var(--cream); }
.mag.c4 .tag { background: var(--cream); color: var(--ink); }
.mag.c5 { background: var(--newsprint); color: var(--ink); }
.mag.c5 .tag { background: var(--blue); color: var(--cream); }
.mag.typo .lines { top: 30%; bottom: auto; }
.mag.typo .big { font-size: 16cqw; }
.mag .hook { font: 700 5.4cqw/1.2 var(--sans); }
/* coming soon stamp */
.stamp { position: absolute; z-index: 9; left: 50%; top: 66%; translate: -50% -50%; rotate: -12deg; padding: .35em .6em .3em; border: 3px solid currentColor; border-radius: 6px; font: 900 10cqw/1 var(--cond); font-stretch: 70%; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-dark); white-space: nowrap; opacity: .9;
  mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgb(0 0 0 / .65) 75%, #000 100%); }
.mag.c4 .stamp, .mag.c2 .stamp, .mag.c1 .stamp { color: var(--cream); }
.js .stamp[data-stamp] { opacity: 0; scale: 1.6; transition: opacity .3s, scale .45s var(--ease-pop); }
.js .stamp[data-stamp].in { opacity: .9; scale: 1; }

/* back-issue minis */
.mini .no { position: absolute; left: 8%; top: 7%; font: 900 20cqw/.8 var(--cond); font-stretch: 62%; z-index: 4; }
.mini .date { position: absolute; right: 8%; top: 8%; font: 800 5.4cqw/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; z-index: 4; }
.mini .t { position: absolute; left: 8%; right: 8%; bottom: 27%; font: 900 12.5cqw/.9 var(--cond); font-stretch: 66%; text-transform: uppercase; text-wrap: balance; z-index: 4; }
.mini .bub { position: absolute; left: 8%; top: 30%; width: 30%; height: auto; z-index: 4; }
.mini.o { background: var(--orange); color: var(--cream); }
.mini.b { background: var(--blue); color: var(--cream); }
.mini.k { background: var(--ink); color: var(--cream); }
.mini.c { background: var(--cream); color: var(--ink); }

/* ---------- back-issues run of shelves ---------- */
.issues-sec { overflow: hidden; }
.shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; }
.shelf-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; margin-top: clamp(20px, 3vw, 36px); }
.shelf-track::-webkit-scrollbar { display: none; }
.shelf-track.drag { cursor: grabbing; scroll-snap-type: none; }
.shelf-track.drag a { pointer-events: none; }
.shelf-track .shelfunit { flex: none; width: clamp(560px, 64vw, 940px); scroll-snap-align: start; margin-right: -1.2%; }
.shelf-track .shelfunit .row { left: 8.5%; right: 8.5%; gap: 2.4%; }
.shelf-track .mag { transform: rotateX(4deg) translateY(var(--dy, 0)) rotate(var(--rt, 0deg)); }
.shelf-track a.mag:focus-visible { transform: translateY(calc(var(--dy, 0px) - 14px)) rotate(calc(var(--rt, 0deg) - 1deg)); }
@media (hover: hover) and (pointer: fine) { .shelf-track a.mag:hover { transform: translateY(calc(var(--dy, 0px) - 14px)) rotate(calc(var(--rt, 0deg) - 1deg)); } }
.shelf-ctrl { display: flex; gap: 10px; }
.shelf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 14px; }
.shelf-foot p { font-weight: 700; color: var(--ink); }
.issues-sec .note { left: auto; right: var(--gutter); }

/* ---------- A-board plate ---------- */
.board-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.aboard { position: relative; width: min(100%, 480px); margin-inline: auto; aspect-ratio: 573 / 691; filter: drop-shadow(0 30px 34px rgb(60 15 0 / .35)); }
.aboard .plate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* the bill header band shows through the plate's transparent strip */
.aboard .bill-head { position: absolute; z-index: 1; left: 6.4%; width: 80.4%; top: 5.3%; height: 17.8%; background: var(--orange); display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgb(18 19 17 / .85), inset 0 8px 14px -8px rgb(0 0 0 / .35); }
.aboard .bill-head::after { content: ""; position: absolute; inset: 0; background-image: var(--fibre); background-size: 300px; mix-blend-mode: multiply; opacity: .25; }
.aboard .bill-head img { height: 72%; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .15)); }
/* the bill copy is printed onto the plate's paper */
.aboard .bill { position: absolute; z-index: 3; left: 7%; width: 79.6%; top: 22.9%; height: 64.2%; display: grid; grid-template-rows: 1fr auto; text-align: center; mix-blend-mode: multiply; overflow: hidden; }
.aboard .bill-body { position: relative; display: grid; place-items: center; padding: 4% 6%; }
.aboard .bill-line { grid-area: 1 / 1; display: grid; gap: .5em; transition: transform .9s var(--ease-in-out), opacity .7s var(--ease-in-out), clip-path .9s var(--ease-in-out), filter .7s; clip-path: inset(0 0 0 0); }
.aboard .bill-line.out { transform: translateY(-30%) rotate(-1.5deg); opacity: 0; filter: blur(4px); }
.aboard .bill-line.in { clip-path: inset(0 0 100% 0); transform: translateY(6%); }
.aboard .bill-line p { font: 900 clamp(30px, 12cqw, 80px)/.86 var(--cond); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; text-shadow: 0 0 .6px rgb(18 19 17 / .6); }
.aboard .bill-line small { font: 600 clamp(13px, 2.5cqw, 17px)/1.3 var(--serif); font-style: italic; color: var(--ink-soft); }
.aboard .bill-foot { padding: 0 6% 5%; font: 800 clamp(10px, 2cqw, 13px)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.aboard .bill { container-type: inline-size; }
.board-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 26px; }
.dot-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.dot-btn i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: .35; transition: opacity .3s, transform .4s var(--ease-pop); }
.dot-btn:hover i { opacity: .7; }
.dot-btn[aria-current="true"] i { opacity: 1; transform: scale(1.45); }
.pause-btn { margin-left: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 2px var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: background-color .3s, color .3s; }
.pause-btn:hover { background: var(--ink); color: var(--cream); }
.pause-btn svg { width: 14px; height: 14px; }
.board-sec .note { position: relative; display: inline-block; margin-top: 18px; color: var(--cream); }
/* phones: no Pause button and no handwritten line under the dots; tapping a dot holds the rotation instead (site.js) */
@media (max-width: 700px) { .board-ctrl .pause-btn, .board-sec .note { display: none; } }
@media (max-width: 900px) { .board-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- broadsheet ---------- */
.paper-wrap { perspective: 2400px; margin-top: clamp(28px, 4vw, 48px); }
.broadsheet { position: relative; background: var(--newsprint); color: var(--ink); border-radius: 2px; transform-style: preserve-3d; box-shadow: 0 1px 1px rgb(0 0 0 / .12), 0 30px 50px -24px rgb(40 15 0 / .6), 0 80px 100px -60px rgb(40 15 0 / .5); }
.broadsheet .half { position: relative; padding: clamp(20px, 3.6vw, 56px) clamp(18px, 4vw, 64px); background: var(--newsprint); }
.broadsheet .half.top { border-radius: 2px 2px 0 0; }
.js .broadsheet .half.bottom { transform-origin: top center; transform: rotateX(-92deg); transition: transform 1.5s var(--ease-out) .1s; box-shadow: inset 0 22px 26px -20px rgb(60 40 10 / .35); }
.js .broadsheet.open .half.bottom { transform: none; }
.js .broadsheet .half.bottom::before { content: ""; position: absolute; inset: 0; background: rgb(60 40 10 / .5); transition: opacity 1.5s var(--ease-out) .1s; pointer-events: none; z-index: 7; }
.js .broadsheet.open .half.bottom::before { opacity: 0; }
.broadsheet .crease { display: block; position: relative; height: 10px; margin: -5px 0; z-index: 8; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(255 255 255 / .45) 40%, rgb(80 60 30 / .22) 60%, transparent); }
.flag { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; border-bottom: 4px double var(--ink); padding-bottom: 10px; }
.flag .meta { font: 700 12px/1.35 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.flag .meta.r { text-align: right; }
.flag .flag-logo { height: clamp(72px, 8vw, 104px); width: auto; justify-self: center; }
.subflag { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ink); font: 700 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); padding-top: clamp(16px, 2.4vw, 30px); }
.lead h1, .lead h3 { font: 900 clamp(40px, 5.4vw, 84px)/.9 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.lead .stand { margin-top: 16px; font: 500 clamp(18px, 1.6vw, 23px)/1.38 var(--serif); font-style: italic; color: var(--ink-soft); max-width: 44ch; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 20px; font: 700 14px/1.3 var(--sans); }
.byline .avatar { position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: var(--newsprint-deep); }
.byline span { display: block; font-weight: 500; color: var(--ink-soft); }
.lead figure { position: relative; align-self: start; }
.lead figure .frame { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--newsprint-deep); }
.lead figure .frame.tall { aspect-ratio: 4 / 4.4; }
figcaption, .caption { font: 500 13px/1.4 var(--serif); font-style: italic; color: var(--ink-soft); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgb(18 19 17 / .3); }
.cols { columns: 3 220px; column-gap: clamp(18px, 2.6vw, 36px); column-rule: 1px solid rgb(18 19 17 / .25); font: 400 clamp(15.5px, 1.1vw, 17px)/1.58 var(--serif); hyphens: auto; -webkit-hyphens: auto; }
.cols p { margin-bottom: .9em; text-shadow: 0 0 .35px rgb(18 19 17 / .5); }
.drop > p:first-child::first-letter, .cols > p:first-child::first-letter { float: left; font: 900 4.2em/.78 var(--sans); margin: .06em .08em 0 0; color: var(--orange-dark); }
.pull { break-inside: avoid; margin: .4em 0 1em; padding: .7em 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); font: 800 1.45em/1.08 var(--sans); letter-spacing: -.02em; }
.paper-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 10px; padding-top: 14px; border-top: 4px double var(--ink); }
.paper-foot p { font: 700 13px/1.35 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.paper-foot .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ink-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.ink-btn.ghost:hover { background: var(--ink); color: var(--newsprint); }
@media (max-width: 820px) { .lead { grid-template-columns: 1fr; } .flag { grid-template-columns: 1fr; } .flag .meta { display: none; } .flag .flag-logo { margin: auto; } }

/* ---------- article (explainers) ---------- */
.crumbs { padding-top: clamp(8px, 2vw, 24px); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0; font-weight: 800; font-size: clamp(15px, 1.1vw, 16px); letter-spacing: -.01em; color: var(--cream); }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 1.5px; height: 15px; margin: 0 12px; background: var(--cream); opacity: .5; transform: skewX(-20deg); }
.crumbs a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.crumbs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.crumbs a:hover::after { transform: scaleX(1); transform-origin: left; }
.crumbs [aria-current="page"] { min-height: 44px; display: inline-flex; align-items: center; }
.article-sec { padding: clamp(10px, 2vw, 24px) 0 clamp(60px, 8vw, 110px); }
.article .paper-wrap { margin-top: 10px; }
.article .episode { margin-top: 14px; font: 800 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-dark); }
.thumb { position: relative; display: block; text-decoration: none; padding-bottom: 40px; }
.thumb .pic { display: block; border-radius: 3px; overflow: hidden; box-shadow: 0 16px 30px -16px rgb(40 15 0 / .6); }
.thumb img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .thumb:hover img { transform: scale(1.03); } }
/* the play pill hangs off the bottom edge: never over a face or the baked-in titles */
.thumb .play { position: absolute; left: 14px; bottom: 0; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 800 14px/1 var(--sans); box-shadow: 0 12px 22px -10px rgb(0 0 0 / .7); transition: transform .45s var(--ease-pop), background-color .3s; }
.thumb .play svg { width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: var(--orange); color: var(--cream); transition: transform .45s var(--ease-pop); }
.thumb .play span { font-weight: 600; opacity: .75; }
@media (hover: hover) and (pointer: fine) { .thumb:hover .play { transform: translateY(-3px); background: var(--blue-ink); } }
@media (hover: hover) and (pointer: fine) { .thumb:hover .play svg { transform: scale(1.12); } }
.thumb:active .play { transform: scale(.96); transition-duration: .12s; }
.opening { font: 400 clamp(17px, 1.25vw, 19px)/1.6 var(--serif); max-width: 64ch; }
.opening p + p, .body-copy p + p { margin-top: .9em; }
.opening p:first-child { font-size: 1.12em; }
.inside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(24px, 5vw, 72px); padding: clamp(10px, 2vw, 20px) clamp(18px, 4vw, 64px) clamp(30px, 4vw, 56px); border-top: 1px solid rgb(18 19 17 / .35); }
.body-copy { font: 400 clamp(17px, 1.25vw, 19px)/1.62 var(--serif); max-width: 64ch; }
.body-copy h2 { margin: 1.6em 0 .5em; font: 900 clamp(24px, 2.3vw, 34px)/1.02 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.body-copy h2:first-child { margin-top: .9em; }
.body-copy .kicker-line { font-weight: 700; }
.body-copy .ask { margin-top: 1.4em; font-style: italic; }
.margin { position: relative; padding-top: clamp(20px, 3vw, 40px); }
.margin .sticky { position: sticky; top: 110px; display: grid; gap: 26px; }
.margin .pull { font-size: clamp(24px, 2.2vw, 32px); margin: 0; }
.margin .note { position: relative; transform: rotate(-4deg); color: var(--blue); white-space: normal; }
.watch { display: grid; gap: 12px; padding: 18px; background: var(--cream); border-radius: 4px; box-shadow: var(--shadow-paper); }
.watch p { font: 700 14px/1.4 var(--sans); }
.watch .sub { font-weight: 500; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 900px) {
  .inside { grid-template-columns: 1fr; }
  .margin { order: -1; padding-top: 24px; }
  .margin .sticky { position: static; }
}
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 2.2em; padding-top: 18px; border-top: 1px solid rgb(18 19 17 / .35); font: 600 16px/1.4 var(--sans); }
.copy-btn { position: relative; min-height: 44px; padding: 0 18px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800; font-size: 15px; display: inline-grid; align-items: center; overflow: hidden; transition: background-color .3s, color .3s; }
.copy-btn:hover { background: var(--ink); color: var(--newsprint); }
.copy-btn span { grid-area: 1 / 1; transition: transform .45s var(--ease-out), opacity .3s; }
.copy-btn .ok { transform: translateY(110%); opacity: 0; }
.copy-btn.copied .ok { transform: none; opacity: 1; }
.copy-btn.copied .go { transform: translateY(-110%); opacity: 0; }

/* share block on Gists and issues: the ask, three buttons, then a row of logo buttons for places to post it.
   The post-it-on links are plain URLs, so they work without JavaScript; the buttons need it and stay hidden until it runs. */
.share.sendon { display: block; }
.share-h { font: 800 clamp(19px, 1.7vw, 22px)/1.25 var(--sans); letter-spacing: -.015em; text-wrap: balance; }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.share-btns [hidden], html:not(.js) .share-btns { display: none; }
.share-btns .share-native { background: var(--ink); color: var(--newsprint); }
.share-btns .share-native:hover { background: var(--blue-ink); box-shadow: inset 0 0 0 2px var(--blue-ink); }
/* each label leads with its icon; the copied state swaps the copy icon for a tick along with the words */
.share-btns .copy-btn span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.share-btns .copy-btn .ic { width: 18px; height: 18px; flex: none; }
.share-via { margin-top: 18px; font: 800 13px/1.2 var(--cond); font-stretch: 88%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-fade); }
.share-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0 -12px; }
.share-links .bub-ic { color: var(--ink); }
.share-ic .ic { width: 22px; height: 22px; }
/* issue bodies style their own lists and links; the share row keeps its own look there */
.iss-body .share ul.share-links { margin: 10px 0 0 -2px; padding-left: 0; }
.iss-body .share-links li + li { margin-top: 0; }
.iss-body .share-links a.share-ic, .iss-body .share-links a.share-ic:hover { text-decoration: none; color: var(--ink); transition: color .3s var(--ease-ui), scale .12s var(--ease-ui); }
@media (max-width: 520px) {
  .share-btns .copy-btn { flex: 1 1 auto; justify-items: center; }
  /* phones: eight bubbles as a four by two set, spread across the full width like the buttons above, each 52px */
  .share-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 10px 0; margin-left: 0; }
  .share-links .bub-ic { width: 56px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .copy-btn span { transition: opacity .2s; }
  .copy-btn .ok, .copy-btn.copied .go { transform: none; }
}
.signoff { margin-top: 1.4em; font: 900 clamp(26px, 2.6vw, 36px)/1 var(--sans); letter-spacing: -.035em; }

/* FAQ */
.faq { margin-top: clamp(32px, 4vw, 54px); padding-top: 18px; border-top: 4px double var(--ink); }
.faq h2 { margin: 0 0 10px; }
.faq details { border-bottom: 1px solid rgb(18 19 17 / .35); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 14px 0; cursor: pointer; font: 800 clamp(17px, 1.4vw, 20px)/1.25 var(--sans); letter-spacing: -.01em; border-radius: 4px; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange-dark); }
.faq summary .pm { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease-out); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm::after { transform: rotate(0); }
.faq .ans { overflow: hidden; }
.faq .ans p { padding: 0 0 18px; max-width: 60ch; font: 400 17px/1.6 var(--serif); }

/* ---------- section: Instagram cuttings ---------- */
.ig-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.ig-grid { position: relative; margin-top: clamp(30px, 4vw, 56px); }
.cutting { position: relative; display: block; text-decoration: none; color: var(--ink); }
.cutting .drift { position: relative; display: block; background: var(--newsprint); padding: 10px 10px 14px; box-shadow: var(--shadow-paper); transition: scale .5s var(--ease-out);
  clip-path: polygon(0 1%, 9% 0, 22% 1.2%, 37% .2%, 52% 1%, 66% 0, 81% 1.1%, 100% .3%, 99.4% 18%, 100% 37%, 99.2% 58%, 100% 79%, 99.5% 100%, 84% 99%, 68% 100%, 51% 99.2%, 33% 100%, 17% 99.1%, 0 100%, .6% 81%, 0 62%, .8% 41%, 0 21%); }
.cutting:focus-visible .drift { scale: 1.035; }
@media (hover: hover) and (pointer: fine) { .cutting:hover .drift { scale: 1.035; } }
.cutting:focus-visible { outline-offset: 6px; }
.cutting .pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.cutting .pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.05); mix-blend-mode: multiply; }
.cutting .pic::after { content: ""; position: absolute; inset: 0; background: var(--orange); mix-blend-mode: screen; opacity: .0; }
.cutting.k .pic { background: var(--orange); }
.cutting.b .pic { background: var(--blue); }
.cutting.b .pic img { filter: grayscale(1) contrast(1.3) brightness(1.15); }
.cutting .cap { display: block; margin-top: 10px; font: 500 14px/1.38 var(--serif); color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cutting .when { display: flex; justify-content: space-between; margin-top: 8px; font: 800 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cutting .tape { position: absolute; z-index: 3; top: -6px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -4deg; background: rgb(254 248 234 / .62); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.cutting.full .drift { background: var(--cream); padding: 0; clip-path: none; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 2px rgb(0 0 0 / .12), 0 40px 70px -30px rgb(40 10 0 / .75); }
.cutting.full .pic { aspect-ratio: 4 / 5; }
.cutting.full .pic img { filter: none; mix-blend-mode: normal; }
.cutting.full .cap { padding: 0 14px; }
.cutting.full .when { padding: 0 14px 14px; }
.cutting .sample { position: absolute; z-index: 4; right: 10px; top: 14px; padding: 3px 7px; border-radius: 3px; background: var(--ink); color: var(--cream); font: 800 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ig-state { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; padding: clamp(20px, 3vw, 36px); background: var(--cream); border-radius: 4px; box-shadow: var(--shadow-paper); max-width: 560px; }
.ig-state p { font-weight: 700; }
.ig-state .fine { font-weight: 500; color: var(--ink-soft); }
.ig-loading { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-weight: 700; }
.ig-loading i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: dot 1s var(--ease-in-out) infinite; }
.ig-loading i:nth-child(2) { animation-delay: .15s; }
.ig-loading i:nth-child(3) { animation-delay: .3s; }
.ig-grid:not(.busy) .ig-loading i { animation-play-state: paused; }
/* ---------- year one ---------- */
.year { position: relative; }
.year-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.year .photo { position: relative; padding: 12px 12px 74px; background: var(--cream); rotate: -2deg; box-shadow: var(--shadow-paper); max-width: 520px; }
.year .photo .frame { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--orange); }
.year .photo .caption { position: absolute; left: 14px; right: 14px; bottom: 12px; border: 0; padding: 0; font: 400 clamp(22px, 1.8vw, 26px)/1.05 var(--hand); font-style: normal; color: var(--ink); rotate: -1deg; }
.year .photo .tape { position: absolute; top: -12px; left: 50%; width: 110px; height: 30px; translate: -50% 0; rotate: 3deg; background: rgb(254 248 234 / .7); box-shadow: 0 1px 2px rgb(0 0 0 / .15); z-index: 3; }
.year .flash { position: absolute; z-index: 4; right: -24px; top: -30px; width: clamp(110px, 12vw, 160px); aspect-ratio: 512 / 524; }
/* an ink tag tucked under the bubble's tail, so it reads over the photo and as part of the lockup */
.year .flash .label { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; rotate: -4deg; padding: 6px 10px 5px; white-space: nowrap; background: var(--ink); color: var(--cream); box-shadow: 0 6px 14px -6px rgb(18 19 17 / .55); font: 900 15px/1 var(--cond); font-stretch: 70%; text-transform: uppercase; letter-spacing: .08em; }
.year .copy p { font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; max-width: 44ch; }
.year .copy p + p { margin-top: .8em; }
.year .copy .easy { margin: .45em 0 .2em; font: 900 clamp(40px, 5.6vw, 84px)/.9 var(--sans); letter-spacing: -.045em; color: var(--cream); text-wrap: balance; }
.figures { margin-top: 30px; max-width: 520px; background: var(--cream); padding: 18px 22px; box-shadow: var(--shadow-paper); rotate: .6deg; position: relative; }
.figures div { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgb(18 19 17 / .35); }
.figures div:last-child { border-bottom: 0; }
.figures dt { order: 2; flex: 1; font-weight: 700; font-size: 16px; color: var(--ink-soft); }
.figures dd { order: 1; font: 900 clamp(34px, 3.4vw, 48px)/.9 var(--cond); font-stretch: 64%; letter-spacing: -.01em; color: var(--blue); font-variant-numeric: tabular-nums lining-nums; min-width: 4.2ch; }
.figures .note { right: 0; top: auto; bottom: -50px; color: var(--cream); rotate: -3deg; }
.year .pullline { margin-top: 34px; font: 800 clamp(22px, 2vw, 28px)/1.15 var(--sans); letter-spacing: -.02em; max-width: 30ch; color: var(--cream); text-shadow: 0 1px 0 rgb(120 30 6 / .45); }
.year .copy .note { position: relative; display: inline-block; margin-top: 10px; color: var(--cream); }
@media (max-width: 900px) {
  .year-grid { grid-template-columns: minmax(0, 1fr); }
  .year .photo { margin: 10px auto 0; width: calc(100% - 20px); }
  .year .flash { right: -6px; }
}

/* ---------- reveal video (the logo draws and types itself in) ---------- */
.reveal-vid { position: relative; display: block; width: 100%; aspect-ratio: 512 / 524; filter: drop-shadow(0 14px 18px rgb(40 15 0 / .3)); }
.reveal-vid img, .reveal-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.reveal-vid img.last { opacity: 0; }
.reveal-vid.still img.last, html:not(.js) .reveal-vid img.last { opacity: 1; }
.reveal-vid.still video, html:not(.js) .reveal-vid video { display: none; }
/* first-visit intro overlay */
.intro { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: var(--orange); transition: background-color .35s var(--ease-out), opacity .4s .7s; }
.intro { cursor: pointer; }
.intro-logo { display: block; width: min(46vw, 300px); aspect-ratio: 680 / 697; will-change: transform; }
.intro-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the traced logo builds itself (site.js); these origins match the approved preview */
.gist-logo .gl-cream, .gist-logo .gl-the path { transform-box: fill-box; transform-origin: 50% 50%; }
.gist-logo .gl-dot { transform-box: fill-box; transform-origin: 50% 100%; }
.gist-logo .gl-body, .gist-logo .gl-all { transform-box: view-box; }
.intro.flying { background-color: transparent; pointer-events: none; }
.intro .skip-intro { position: absolute; right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom)); min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); transition: opacity .3s; }
.intro.flying .skip-intro { opacity: 0; }
.intro-hold .top .brand, .intro-mark .top .brand { opacity: 0; }
.top .brand { transition: opacity .18s linear; }

/* ---------- paper round: door plate and form ---------- */
.round-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(24px, 3vw, 40px); }
.door { position: relative; width: min(100%, 400px); aspect-ratio: 465 / 690; margin-inline: auto; filter: drop-shadow(0 30px 30px rgb(60 15 0 / .3)); }
.door .plate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.door .num { position: absolute; z-index: 2; left: 53.4%; top: 21%; translate: -50% 0; font: 900 clamp(26px, 3vw, 40px)/1 var(--sans); letter-spacing: -.04em; color: #F2E9D6; opacity: .92; text-shadow: 0 1px 0 rgb(0 0 0 / .25); white-space: nowrap; }
/* folded paper posted through the letterbox */
.door .post { position: absolute; z-index: 4; left: 46.5%; width: 16.6%; top: 53.1%; height: 9%; opacity: 0; transform-origin: 50% 0; pointer-events: none; }
.door .post .fold { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, #F7F1E2, #E6DAC0 70%, #D3C6A8); box-shadow: 0 8px 12px -6px rgb(0 0 0 / .55); overflow: hidden; }
.door .post .fold::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgb(18 19 17 / .16) 7px 8px); opacity: .7; }
.door .post .fold::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26%; background: var(--orange); }
.door.posting .post { animation: post 1.5s var(--ease-in-out) forwards; }
@keyframes post {
  0% { opacity: 0; transform: translateY(260%) scale(1.25) rotate(-8deg); clip-path: inset(0 0 0 0); }
  35% { opacity: 1; transform: translateY(40%) scale(1.08) rotate(-3deg); clip-path: inset(0 0 0 0); }
  60% { opacity: 1; transform: translateY(0) scale(1) rotate(0); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(-1.5deg); clip-path: inset(0 0 58% 0); }
}
.door.done .post { opacity: 1; transform: rotate(-1.5deg); clip-path: inset(0 0 58% 0); animation: none; }
.door .flapline { position: absolute; z-index: 3; left: 46.5%; width: 16.6%; top: 53.1%; height: 2.6%; border-radius: 2px; background: linear-gradient(#3b3c38, #121311); transform-origin: top center; transform: scaleY(0); transition: transform .35s var(--ease-out); }
.door.posting .flapline { transform: scaleY(1); }
.door .pinned { position: absolute; z-index: 5; left: 31%; right: 24%; bottom: 17%; padding: 12px 10px 10px; background: #FFFCF4; rotate: 3deg; text-align: center; font: 400 clamp(22px, 2vw, 25px)/1.05 var(--hand); color: var(--ink); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .55); }
.door .pinned::before { content: ""; position: absolute; left: 50%; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F48A6C, var(--orange-deep) 70%); box-shadow: 0 2px 2px rgb(0 0 0 / .35); }
.door.done .pinned { animation: pin .7s var(--ease-pop); }
@keyframes pin { 0% { rotate: -8deg; scale: 1.15; } 100% { rotate: 3deg; scale: 1; } }

.form-card { position: relative; background: var(--cream); border-radius: 14px; padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 30px 50px -30px rgb(40 10 0 / .7); }
.form-card h2, .form-card h3 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 900; letter-spacing: -.04em; line-height: .94; text-wrap: balance; }
.form-card > p { margin-top: 10px; color: var(--ink-soft); max-width: 44ch; }
.nl { position: relative; margin-top: 22px; }
.nl label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.nl .field { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px rgb(18 19 17 / .14); transition: box-shadow .3s var(--ease-out); }
.nl .field:focus-within { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgb(30 108 173 / .18); }
.nl input[type="email"] { flex: 1; min-width: 0; border: 0; background: transparent; font: 600 17px var(--sans); color: var(--ink); padding: 0 16px; min-height: 48px; }
.nl input::placeholder { color: #77725f; }
.nl input:focus { outline: none; }
.nl .go { position: relative; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--orange); color: var(--cream); font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; display: grid; align-items: center; transition: background-color .3s, transform .25s var(--ease-out); }
.nl .go:hover { background: var(--orange-deep); }
.nl .go:active { transform: scale(.97); }
.nl .go > span { grid-area: 1 / 1; transition: transform .45s var(--ease-out), opacity .3s; }
.nl .go .busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transform: translateY(120%); opacity: 0; font-size: 14px; }
.nl .go .busy i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dot 1s var(--ease-in-out) infinite; }
.nl .go .busy i:nth-child(2) { animation-delay: .15s; }
.nl .go .busy i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-5px); opacity: 1; } }
.nl.loading .go { cursor: progress; background: var(--orange-deep); }
.nl.loading .go .t { transform: translateY(-120%); opacity: 0; }
.nl.loading .go .busy { transform: none; opacity: 1; }
.nl .msg { min-height: 1.6em; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--orange-dark); opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .45s var(--ease-out); }
.nl .msg.show { opacity: 1; transform: none; }
.nl.error .field { animation: shake .45s var(--ease-out); box-shadow: inset 0 0 0 2px var(--orange-dark); }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.nl .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fieldwrap { transition: opacity .35s, transform .5s var(--ease-out), filter .4s; }
.nl.success .fieldwrap { opacity: 0; transform: translateY(-12px) scale(.98); filter: blur(3px); pointer-events: none; visibility: hidden; transition: opacity .35s, transform .5s var(--ease-out), filter .4s, visibility 0s .5s; }
.nl .done { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s .5s, transform .7s var(--ease-out) .5s, visibility 0s .5s; }
.nl.success .done { opacity: 1; visibility: visible; transform: none; }
.nl .done b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.nl .done span { font-size: 15px; color: var(--ink-soft); }
.nl .done .tick { width: 34px; height: 34px; color: var(--blue); }
.nl .done .tick path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .6s var(--ease-out) .9s; }
.nl.success .done .tick path { stroke-dashoffset: 0; }
.nl .again { align-self: flex-start; margin-top: 4px; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-soft); min-height: 44px; }
.small-print { margin-top: 14px; font-size: 13.5px; color: var(--ink-fade); }
.nl.compact { max-width: 560px; }
@media (max-width: 860px) { .round-grid { grid-template-columns: minmax(0, 1fr); } .door { width: min(78%, 330px); } }
@media (max-width: 480px) {
  .nl .field { flex-direction: column; border-radius: 18px; }
  .nl .go { width: 100%; }
}

/* ---------- newsletter end card (article) ---------- */
.endcta { padding: clamp(50px, 7vw, 100px) 0; }
.endcta .form-card { max-width: 760px; margin-inline: auto; }

/* ---------- generic sheets (privacy, work with us, about story) ---------- */
.sheet { position: relative; background: var(--newsprint); color: var(--ink); border-radius: 2px; padding: clamp(24px, 4.5vw, 72px) clamp(20px, 5vw, 80px); box-shadow: 0 1px 1px rgb(0 0 0 / .12), 0 30px 50px -24px rgb(40 15 0 / .6), 0 80px 100px -60px rgb(40 15 0 / .5); }
.sheet.cream { background: var(--cream); }
.sheet h2 { font: 900 clamp(26px, 2.6vw, 38px)/1 var(--sans); letter-spacing: -.035em; margin: 1.6em 0 .55em; text-wrap: balance; }
.sheet h2:first-child { margin-top: 0; }
.sheet .body-copy { max-width: 66ch; }
.draft { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 4px; background: var(--ink); color: var(--cream); font: 800 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.placeholder { background: rgb(30 108 173 / .14); box-shadow: inset 0 -2px 0 var(--blue); padding: 0 .2em; font-family: var(--sans); font-weight: 700; font-size: .92em; }
.page-head { padding: clamp(24px, 5vw, 70px) 0 clamp(30px, 5vw, 60px); position: relative; }
.page-head .note { position: relative; display: inline-block; margin-top: 20px; }

/* work with us */
.wwu-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
.wwu-grid > * { min-width: 0; }
.wwu-grid .col + .col { border-left: 1px solid rgb(18 19 17 / .3); padding-left: clamp(20px, 3vw, 44px); }
.beats { list-style: none; counter-reset: beat; display: grid; gap: 16px; margin-top: 10px; }
.beats li { counter-increment: beat; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font: 400 18px/1.55 var(--serif); }
.beats li::before { content: counter(beat); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--newsprint); font: 900 18px/1 var(--sans); }
.aside-line { margin-top: 16px; font: 600 15px/1.45 var(--sans); color: var(--ink-soft); }
.contact-card { margin-top: clamp(30px, 4vw, 50px); }
@media (max-width: 900px) { .wwu-grid { grid-template-columns: minmax(0, 1fr); } .wwu-grid .col + .col { border-left: 0; padding-left: 0; border-top: 1px solid rgb(18 19 17 / .3); padding-top: 24px; } }

/* about */
.about-hero .shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.polaroid { position: relative; padding: 14px 14px 62px; background: var(--cream); box-shadow: var(--shadow-paper); rotate: 2.5deg; max-width: 480px; margin-inline: auto; transition: rotate .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .polaroid:hover { rotate: 0deg; } }
.polaroid .frame { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink); }
.polaroid .frame img { width: 100%; height: 100%; object-fit: cover; }
.polaroid .tape { position: absolute; top: -12px; left: 18%; width: 96px; height: 28px; rotate: -6deg; background: rgb(254 248 234 / .7); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.polaroid .tape.r { left: auto; right: 14%; rotate: 7deg; }
.polaroid .note { left: 18px; bottom: 16px; color: var(--ink); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: clamp(28px, 5vw, 80px); }
.story-grid > * { min-width: 0; }
.story .open-line { font: 900 clamp(26px, 2.8vw, 40px)/1.02 var(--sans); letter-spacing: -.035em; margin-bottom: .6em; }
.story .job { margin: 1.1em 0; font: 900 clamp(30px, 3.4vw, 50px)/.95 var(--sans); letter-spacing: -.04em; color: var(--orange-dark); }
.side-prints { display: grid; gap: 30px; align-content: start; }
.side-prints figure { position: relative; padding: 10px 10px 12px; background: var(--cream); box-shadow: var(--shadow-paper); }
.side-prints figure:nth-child(1) { rotate: -2deg; }
.side-prints figure:nth-child(2) { rotate: 1.6deg; }
.side-prints .frame { position: relative; display: block; overflow: hidden; background: var(--newsprint-deep); }
.side-prints .frame.land { aspect-ratio: 4 / 3; }
.side-prints .frame.sq { aspect-ratio: 1; }
.year-story { margin-top: clamp(40px, 5vw, 70px); padding-top: clamp(24px, 3vw, 40px); border-top: 4px double var(--ink); }
.year-story .easy-line { font: 900 clamp(32px, 3.6vw, 54px)/.95 var(--sans); letter-spacing: -.04em; margin: .5em 0; }
.year-story .cheers { margin-top: 1em; font: 800 clamp(20px, 1.7vw, 24px)/1.25 var(--sans); letter-spacing: -.02em; }
.cv { position: relative; background: var(--cream); padding: clamp(22px, 3vw, 40px); border-radius: 3px; box-shadow: var(--shadow-paper); background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgb(30 108 173 / .28) 35px 36px); background-position: 0 58px; rotate: -.6deg; }
.cv h2 { font: 900 clamp(26px, 2.6vw, 36px)/1 var(--sans); letter-spacing: -.035em; color: var(--ink); }
.cv::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(14px, 2vw, 26px); width: 2px; background: rgb(238 73 34 / .5); }
.cv ul { list-style: none; margin-top: 22px; }
.cv li { min-height: 36px; padding: 6px 0 0 clamp(10px, 1.6vw, 18px); font: 600 16px/1.85 var(--sans); }
.cv .fine { margin-top: 18px; padding-left: clamp(10px, 1.6vw, 18px); font-size: 14px; color: var(--ink-soft); }
.hello-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) {
  .about-hero .shell, .story-grid, .hello-grid { grid-template-columns: minmax(0, 1fr); }
  .side-prints { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* podcast */
.pod-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.pod-logo { position: relative; width: min(100%, 480px); margin: 0 auto 60px; }
.pod-logo img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 26px rgb(40 15 0 / .4)); animation: bob 6s var(--ease-in-out) infinite alternate; }
@keyframes bob { from { transform: translateY(-6px) rotate(-1.2deg); } to { transform: translateY(6px) rotate(1deg); } }
.pod-logo .stamp { top: 104%; left: 30%; font-size: clamp(22px, 3vw, 34px); color: var(--cream); mix-blend-mode: normal; background: var(--ink); border-color: var(--ink); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .7); mask-image: none; }
.pod-logo .note { left: -4%; top: -40px; }
@media (max-width: 900px) { .pod-grid { grid-template-columns: minmax(0, 1fr); } }

/* explainers index */
.stand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(20px, 4vw, 60px); margin-top: 22px; }
.stand-grid .info { padding: 20px 0 0; }
.stand-grid .info h3 { font: 900 clamp(24px, 2.4vw, 34px)/1 var(--sans); letter-spacing: -.035em; color: var(--cream); text-wrap: balance; }
.stand-grid .info p { margin: 8px 0 14px; font-weight: 600; }
.stand-shelf { max-width: 860px; margin-inline: auto; }
.stand-shelf .row { left: 18%; right: 18%; gap: 8%; }
.soon-shelf { padding-top: 4%; }
.soon-shelf .row { left: 8.5%; right: 8.5%; gap: 2.4%; }
.soon-note { margin-top: 18px; max-width: 60ch; font-weight: 600; }
.soon-wrap { position: relative; }
.soon-wrap .note { right: 4%; top: -14px; }
@media (max-width: 700px) {
  .stand-grid { grid-template-columns: 1fr; gap: 26px; }
  .soon-scroll { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; scroll-snap-type: x mandatory; }
  .soon-scroll::-webkit-scrollbar { display: none; }
  .soon-scroll .shelfunit { width: 640px; }
  .soon-scroll .slot { scroll-snap-align: center; }
}
.nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: clamp(40px, 5vw, 70px); padding: clamp(20px, 3vw, 32px); border-radius: 14px; background: var(--cream); box-shadow: var(--shadow-paper); }
.nudge p { font: 800 clamp(19px, 1.7vw, 24px)/1.2 var(--sans); letter-spacing: -.02em; max-width: 34ch; }

/* newsletter page */
.gets { list-style: none; display: grid; gap: 0; margin-top: 16px; }
.gets li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgb(18 19 17 / .3); font: 400 18px/1.5 var(--serif); }
.gets li:last-child { border-bottom: 0; }
.gets svg { width: 24px; height: 24px; color: var(--orange-dark); margin-top: 3px; }
.gets b { font-family: var(--sans); font-weight: 800; }

/* 404 */
.lost .shelfunit { max-width: 760px; margin: 30px auto 0; }
.lost .soldout { position: absolute; z-index: 7; left: 50%; bottom: 30%; translate: -50% 0; rotate: -4deg; padding: 14px 26px 10px; background: #FFFCF4; font: 400 clamp(34px, 5.2vw, 57px)/1 var(--hand); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .6); }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--ink); color: var(--cream); padding: clamp(50px, 7vw, 90px) 0 28px; margin-top: auto; view-transition-name: footer; }
.foot .grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 60px; align-items: end; }
.foot .sign { font-size: clamp(38px, 6vw, 88px); font-weight: 900; letter-spacing: -.045em; line-height: .9; text-wrap: balance; }
.foot .tag { margin-top: 12px; font-weight: 700; color: var(--orange-wash); font-size: 18px; }
.foot .social { display: flex; flex-wrap: wrap; gap: 4px; margin: 22px 0 0 -12px; color: #D2CCBE; }
.foot .social .ic { width: 24px; height: 24px; }

/* ---------- logo links as the Gist speech bubble (footer socials and the share block's post-it-on row) ----------
   One rule for both. Each link is a 48px target with the header's bubble behind it: on desktop a line under the logo
   swells into the bubble (cream, blue border, no tail) on hover or keyboard focus, with the header's exact timing;
   on touch screens, where there is no hover, the bubble is simply there at rest. Reduced motion: it appears, no swell. */
.bub-ic { position: relative; isolation: isolate; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; text-decoration: none; transition: color .3s var(--ease-ui), scale .12s var(--ease-ui); }
.bub-ic::after { content: ""; position: absolute; z-index: -1; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-ui) .34s, left .36s var(--ease-ui), right .36s var(--ease-ui), bottom .36s var(--ease-ui), height .36s var(--ease-ui), border-radius .36s var(--ease-ui), background-color .3s, box-shadow .3s; }
.bub-ic:active { scale: .95; }
@media (hover: hover) and (pointer: fine) {
  .bub-ic:hover, .bub-ic:focus-visible { color: var(--ink); }
  .bub-ic:hover::after, .bub-ic:focus-visible::after { transform: scaleX(1); left: 2px; right: 2px; bottom: 2px; height: calc(100% - 4px); border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--blue), 0 6px 14px -10px rgb(40 15 0 / .55);
    transition: transform .3s var(--ease-ui), left .4s var(--ease-ui), right .4s var(--ease-ui), bottom .4s var(--ease-ui), height .4s var(--ease-ui), border-radius .4s var(--ease-ui), background-color .3s, box-shadow .3s; }
}
@media (hover: none), (pointer: coarse) {
  .bub-ic { color: var(--ink); }
  .bub-ic::after { transform: none; left: 2px; right: 2px; bottom: 2px; height: calc(100% - 4px); border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--blue), 0 6px 14px -10px rgb(40 15 0 / .55); transition: none; }
  /* the bubbles line up with the text edge rather than the invisible target edge */
  .foot .social { margin-left: -2px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .bub-ic, .bub-ic::after, .bub-ic:hover::after, .bub-ic:focus-visible::after { transition: none; } }
.foot .legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.foot .legal a { display: inline-flex; align-items: center; min-height: 44px; color: #D2CCBE; text-decoration: underline; text-decoration-color: rgb(210 204 190 / .4); text-underline-offset: .2em; transition: color .3s, text-decoration-color .3s; }
.foot .legal a:hover { color: var(--cream); text-decoration-color: currentColor; }
.foot .lines { margin-top: 26px; display: grid; gap: 4px; font-size: 14px; color: #B9B3A5; }
.foot .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgb(254 248 234 / .14); font-size: 13px; color: #A9A395; }
.gt { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--cream); padding: 10px 14px; border-radius: 14px; margin-left: auto; }
.gt img { width: 29px; height: auto; filter: drop-shadow(0 0 10px rgb(255 236 200 / .55)) drop-shadow(0 0 24px rgb(255 214 160 / .35)); animation: float 4.5s var(--ease-in-out) infinite alternate; transition: filter .4s; }
.gt span { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; opacity: .85; transition: opacity .3s; }
.gt:hover span { opacity: 1; }
.gt:hover img { filter: drop-shadow(0 0 14px rgb(255 236 200 / .8)) drop-shadow(0 0 34px rgb(255 214 160 / .55)); }
@keyframes float { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@media (max-width: 700px) { .foot .grid { grid-template-columns: 1fr; } }

/* ---------- handwriting writes itself on ---------- */
.js [data-write] { clip-path: inset(-20% 100% -20% 0); transition: clip-path var(--wdur, 1.2s) cubic-bezier(.45, .05, .55, .95) var(--wdel, 0s); }
.js [data-write].written { clip-path: inset(-30% -4% -70% 0); }

/* ---------- reveals (3s CSS fallback in case JS never arrives) ---------- */
[data-reveal] { transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out); transition-delay: var(--rd, 0s); }
.js [data-reveal]:not(.in) { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(6px); animation: reveal-fallback .01s linear 3s forwards; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; filter: none; } }

/* ---------- page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .38s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) .08s both; }
::view-transition-group(masthead) { animation-duration: .55s; animation-timing-function: var(--ease-out); }
::view-transition-group(footer) { animation-duration: .5s; }
/* fallback for browsers without cross-document transitions */
html.leaving main, html.leaving .foot { opacity: 0; transform: translateY(-14px); transition: opacity .22s var(--ease-in-out), transform .22s var(--ease-in-out); }
html.arriving main { animation: vt-in .6s var(--ease-out) both; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal]:not(.in) { opacity: 1; transform: none; filter: none; }
  .js .broadsheet .half.bottom { transform: none; }
  .js .broadsheet .half.bottom::before { opacity: 0; }
  .js [data-write] { clip-path: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- newsletter lightbox: a subscription slip handed to you ---------- */
html.nl-locked { overflow: hidden; }
.nl-box { position: fixed; inset: 0; margin: auto; width: min(100% - 24px, 600px); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.nl-box::backdrop { background: rgb(60 20 5 / .42); backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px); animation: nlb-in .45s var(--ease-out) both; }
.nl-box.closing::backdrop { animation: nlb-out .32s var(--ease-in-out) both; }
@keyframes nlb-in { from { opacity: 0; } }
@keyframes nlb-out { to { opacity: 0; } }
.nl-box[open] .slip { animation: slip-in .6s cubic-bezier(.22, 1.18, .36, 1) both; }
.nl-box.closing .slip { animation: slip-out .32s var(--ease-in-out) both; }
@keyframes slip-in { from { opacity: 0; transform: translateY(60px) rotate(-3.5deg) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes slip-out { to { opacity: 0; transform: translateY(40px) rotate(2deg) scale(.98); } }
.slip { position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--cream); border-radius: 4px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 2px 2px rgb(0 0 0 / .12), 0 40px 70px -30px rgb(40 10 0 / .75); isolation: isolate; }
.slip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--fibre); background-size: 300px; mix-blend-mode: multiply; opacity: .16; z-index: 5; border-radius: inherit; }
.slip-x { position: absolute; right: 10px; top: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; z-index: 6; transition: background-color .3s, rotate .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .slip-x:hover { background: rgb(18 19 17 / .08); rotate: 90deg; } }
.slip-x svg { width: 20px; height: 20px; }
.slip-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 4px double var(--ink); margin-right: 44px; }
.slip-logo { width: 112px; height: auto; flex: none; }
.slip-head span { font: 800 11.5px/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.slip h2 { margin-top: 20px; font: 900 clamp(30px, 5vw, 44px)/.94 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.slip-lede { margin-top: 10px; font: 400 17px/1.5 var(--serif); color: var(--ink-soft); max-width: 46ch; }
.slip-note { position: absolute; right: clamp(18px, 4vw, 40px); top: clamp(108px, 18vw, 130px); rotate: 6deg; transform: none; font-size: 27px; }
.slipform { margin-top: 26px; }
.slipform .field.ruled { border-radius: 2px; background: transparent; padding: 0; box-shadow: none; border-bottom: 2px solid var(--ink); background-image: repeating-linear-gradient(90deg, rgb(30 108 173 / .22) 0 1px, transparent 1px 22px); gap: 0; }
.slipform .field.ruled:focus-within { box-shadow: 0 3px 0 var(--blue); border-color: var(--blue); }
.slipform .field.ruled input { padding-left: 4px; font-size: 18px; }
.slipform .field.ruled .go { border-radius: 2px; margin-bottom: 6px; }
.slipform.error .field.ruled { box-shadow: none; border-color: var(--orange-dark); }
.slipform .fieldwrap { transform-origin: top center; }
.slipform.success .fieldwrap { transform: perspective(600px) rotateX(-75deg) translateY(-10px); }
.slipform .done-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; }
.ink-stamp { position: absolute; z-index: 6; right: -6px; top: -64px; width: 128px; height: 128px; color: var(--orange); mix-blend-mode: multiply; opacity: 0; scale: 2.2; rotate: -24deg; pointer-events: none; filter: blur(2px);
  mask-image: radial-gradient(circle at 40% 38%, #000 50%, rgb(0 0 0 / .7) 70%, #000 92%); }
.slipform.success .ink-stamp { animation: stamp .6s cubic-bezier(.3, 1.5, .5, 1) .25s forwards; }
@keyframes stamp { 0% { opacity: 0; scale: 2.2; rotate: -24deg; filter: blur(2px); } 55% { opacity: .95; scale: .92; rotate: -11deg; filter: blur(0); } 75% { scale: 1.04; } 100% { opacity: .9; scale: 1; rotate: -12deg; filter: blur(.3px); } }
@media (max-width: 520px) { .ink-stamp { width: 100px; height: 100px; top: -40px; } .slip-note { display: none; } }
@media (prefers-reduced-motion: reduce) { .nl-box[open] .slip, .nl-box.closing .slip { animation: none; } .slipform.success .fieldwrap { transform: none; } .slipform.success .ink-stamp { opacity: .9; scale: 1; rotate: -12deg; filter: none; } }
.js [data-pen] { clip-path: inset(-20% 100% -20% 0); transition: clip-path var(--wdur, 1.2s) cubic-bezier(.45, .05, .55, .95) var(--wdel, 0s); }
.js [data-pen].written { clip-path: inset(-30% -4% -70% 0); }
html:not(.js) .ig-loading { display: none; }

.sec-h.three { font-size: clamp(36px, 4.4vw, 66px); white-space: nowrap; }
.teaser { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 48px); align-items: center; font: 400 clamp(18px, 1.5vw, 22px)/1.5 var(--serif); padding-bottom: 8px; }
.teaser .pull { margin: 0; font-size: clamp(24px, 2.2vw, 32px); }
@media (max-width: 820px) { .teaser { grid-template-columns: 1fr; } }
.figures { display: block; margin-bottom: 44px; }
.figures div { display: flex; align-items: baseline; gap: 14px; }
.figures dt, .figures dd { padding: 9px 0; border-bottom: 1px dashed rgb(18 19 17 / .35); }
.figures div:last-of-type dt, .figures div:last-of-type dd { border-bottom: 0; }
.figures dd { order: 1; flex: 0 0 auto; width: 46%; max-width: 230px; }
.figures dt { order: 2; flex: 1; }
.slip-head img { height: 56px; width: auto; flex: none; }
/* once unfolded, drop the 3D context so long articles composite as flat paper */
.broadsheet.flat { transform-style: flat; }
.paper-wrap:has(.broadsheet.flat) { perspective: none; }
.js .broadsheet.flat .half.bottom { transform: none; transition: none; }

.ex-hero .stand-shelf .note { right: 2%; top: -6%; }
@media (max-width: 900px) {
  .ex-hero .rack-scroll { margin-inline: 0; overflow: visible; }
  .ex-hero .rack-scroll .rack { width: auto; margin-inline: 0; }
  .ex-hero .stand-shelf .row { left: 12%; right: 12%; gap: 6%; }
}
.sec-lede .placeholder, .page-lede .placeholder { background: var(--cream); box-shadow: inset 0 -2px 0 var(--blue); color: var(--ink); }
.ex-hero .page-lede { margin-top: 22px; }
.margin .note { justify-self: start; width: max-content; max-width: 100%; }

/* Instagram orbit: the real AI art post at the centre, printed cuttings around it */
.ig-grid { --p: 0; min-height: clamp(480px, 44vw, 640px); }
.ig-row { display: contents; }
.cutting { position: absolute; width: var(--w); left: var(--x); top: var(--y); rotate: var(--rt, 0deg); translate: 0 calc(var(--p) * var(--depth, 0) * 1px); }
.cutting.o0 { --w: min(32%, 400px); --x: 50%; --y: 0; --depth: -20; margin-left: calc(min(32%, 400px) / -2); z-index: 3; }
.cutting.o1 { --w: 17%; --x: 3%; --y: 4%; --rt: -4deg; --depth: 60; --fx: -60px; --fy: -40px; }
.cutting.o2 { --w: 15%; --x: 6%; --y: 55%; --rt: 3deg; --depth: 90; --fx: -70px; --fy: 50px; }
.cutting.o3 { --w: 16%; --x: 79%; --y: 2%; --rt: 4deg; --depth: 70; --fx: 60px; --fy: -40px; }
.cutting.o4 { --w: 16%; --x: 78%; --y: 52%; --rt: -3deg; --depth: 50; --fx: 70px; --fy: 50px; }
.cutting.o5 { --w: 10%; --x: 23%; --y: 70%; --rt: -6deg; --depth: 110; --fx: -40px; --fy: 70px; }
.ig-note { position: absolute; right: 22%; bottom: 0; }
.cutting .drift { animation: drift 7s var(--ease-in-out) infinite alternate; animation-play-state: paused; animation-delay: calc(var(--i, 0) * -1.3s); }
.ig-live .cutting .drift { animation-play-state: running; }
.cutting.o0 .drift { animation-duration: 9s; }
.cutting.o1 { --i: 1; } .cutting.o2 { --i: 2; } .cutting.o3 { --i: 3; } .cutting.o4 { --i: 4; } .cutting.o5 { --i: 5; }
@keyframes drift { from { transform: translate3d(0, -5px, 0) rotate(-.4deg); } to { transform: translate3d(0, 5px, 0) rotate(.4deg); } }
/* scroll choreography */
.js .ig-sec:not(.ig-in) .cutting.o0 { opacity: 0; transform: translateY(40px) scale(.9); filter: blur(10px); }
.js .ig-sec:not(.ig-in) .ig-row .cutting { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(calc(var(--rt) * -2)); }
.js .ig-sec:not(.ig-in) .cutting .tape { opacity: 0; scale: 1.4; }
.js .ig-sec:not(.ig-in) .ig-head > * { opacity: 0; transform: translateY(24px); }
.js .ig-sec .cutting { transition: opacity .7s var(--ease-out), transform 1s cubic-bezier(.3, 1.25, .45, 1), filter .9s var(--ease-out); }
.js .ig-sec .cutting.o0 { transition-duration: .8s, 1.1s, 1s; transition-timing-function: var(--ease-out); }
.js .ig-sec .ig-row .cutting { transition-delay: calc(.45s + var(--i) * .12s); }
.js .ig-sec .cutting .tape { transition: opacity .25s, scale .35s var(--ease-pop); transition-delay: calc(1.25s + var(--i) * .12s); }
.js .ig-sec .ig-head > * { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: 1.3s; }
.js .ig-sec .ig-head > * + * { transition-delay: 1.45s; }
@media (max-width: 900px) {
  .ig-grid { min-height: 0; }
  .cutting { position: relative; left: auto; top: auto; width: auto; translate: none; }
  .cutting.o0 { width: 100%; margin: 0; }
  .ig-row { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 26px calc(var(--gutter) * -1) 0; padding: 14px var(--gutter) 20px; scrollbar-width: none; }
  .ig-row::-webkit-scrollbar { display: none; }
  .ig-row .cutting { flex: 0 0 62%; scroll-snap-align: center; }
  .ig-note { position: relative; right: auto; display: block; margin: 6px 0 0 auto; width: max-content; }
}
@media (prefers-reduced-motion: reduce) { .cutting .drift { animation: none; } .cutting { translate: none; } }
.js .ig-sec:not(.ig-in) .ig-head > * { animation: reveal-fallback .01s linear 4s forwards; }

/* multi-line handwriting */
.js [data-lines] { clip-path: none !important; }
[data-lines] { display: block; }
.js [data-lines] .wl { display: block; width: max-content; max-width: 100%; position: relative; clip-path: inset(-20% 100% -20% 0); transition: clip-path var(--lt) cubic-bezier(.45, .05, .55, .95) var(--ld); }
.js [data-lines].written .wl { clip-path: inset(-30% -4% -70% 0); }
.written .wl > .uline { stroke-dashoffset: 0; transition: stroke-dashoffset .1s ease-out; transition-delay: calc(var(--wdel, 0s) + var(--wdur, 1.2s)); }
.polaroid { padding-bottom: 18px; }
.polaroid .note { position: relative; left: auto; bottom: auto; margin-top: 12px; padding: 0 8px 6px; white-space: normal; transform: rotate(-1.2deg); font-size: clamp(22px, 2vw, 27px); line-height: 1.08; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .js [data-lines] .wl { clip-path: none; } }
.sec-lede .textlink, .page-lede .textlink { display: inline; min-height: 0; text-decoration-color: var(--cream); }
.cv .fine { position: relative; display: inline-block; margin: 16px 0 0 clamp(10px, 1.6vw, 18px); padding: 4px 8px 4px 0; background: var(--cream); font-size: 13px; line-height: 1.5; color: var(--ink-fade); }
.cv .fine a { color: var(--ink-soft); text-underline-offset: .2em; }

/* wooden shelves at true scale (22 x 28 cm magazines against each shelf's real width) */
.wshelf { position: relative; padding-top: calc(var(--mw) * 28 / 22); }
.ws-base { position: relative; width: 100%; }
.ws-base .plate { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.ws-base .plate.back { z-index: 1; }
.ws-base .plate.front { z-index: 6; }
.ws-row { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(100% - var(--stand)); display: flex; align-items: flex-end; justify-content: center; gap: var(--gap, 3%); }
.ws-row .slot { flex: 0 0 var(--mw); position: relative; perspective: 1400px; }
.wshelf .mag { aspect-ratio: 22 / 28; transform-origin: 50% 100%; transform: rotateX(4deg); }
.wshelf a.mag:focus-visible { transform: rotateX(0) translateY(-12px) rotate(-1deg); }
@media (hover: hover) and (pointer: fine) { .wshelf a.mag:hover { transform: rotateX(0) translateY(-12px) rotate(-1deg); } }
.wshelf .slot:nth-child(1) { --r: -1.4deg; --i: 0; }
.wshelf .slot:nth-child(2) { --r: 1deg; --i: 1; }
.wshelf .slot:nth-child(3) { --r: -.6deg; --i: 2; }
.wshelf .slot:nth-child(4) { --r: 1.3deg; --i: 3; }
.wshelf .slot:nth-child(5) { --r: -1deg; --i: 4; }
.wshelf .slot { opacity: 0; transform: translateY(-70%) rotate(calc(var(--r) - 7deg)); animation: place 1.15s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: calc(.25s + var(--i) * .17s); }
.wshelf .plate { animation: shelf-in 1s var(--ease-out) both; }
.js .wshelf:not(.in) .slot, .js .wshelf:not(.in) .plate { animation-play-state: paused; }
.mantel-sec .wshelf { max-width: 980px; margin-inline: auto; }
.pod-shelf .wshelf { max-width: 620px; margin-inline: auto; }
@media (max-width: 700px) { .soon-scroll .wshelf { width: 640px; } }
@media (prefers-reduced-motion: reduce) { .wshelf .slot { opacity: 1; transform: rotate(var(--r)); } }

/* about: alternating editorial chapters on a 12-column grid */
.wshelf .stamp { top: 80%; }
.story { padding-block: clamp(36px, 5vw, 80px); }
.chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.chapter + .chapter, .beat + .chapter { margin-top: clamp(56px, 7vw, 110px); }
.ch-text { grid-column: 1 / span 6; grid-row: 1; max-width: 60ch; }
.ch-fig { grid-column: 8 / span 5; grid-row: 1; position: sticky; top: 110px; }
.chapter.flip .ch-text { grid-column: 7 / span 6; }
.chapter.flip .ch-fig { grid-column: 1 / span 5; }
.print-frame { padding: 12px 12px 14px; background: var(--cream); box-shadow: var(--shadow-paper); rotate: 1.4deg; }
.chapter.flip .print-frame { rotate: -1.6deg; }
.print-frame .frame { position: relative; display: block; overflow: hidden; background: var(--newsprint-deep); }
.print-frame .frame.sq { aspect-ratio: 1; }
.print-frame .frame.land { aspect-ratio: 4 / 3; }
.print-frame.tall { grid-column: 8 / span 5; }
.ch-fig .note { position: relative; display: inline-block; margin-top: 12px; }
.beat { margin: clamp(56px, 7vw, 110px) auto 0; max-width: 22ch; text-align: center; }
.beat p { font: 900 clamp(34px, 4.6vw, 68px)/.95 var(--sans); letter-spacing: -.04em; text-wrap: balance; color: var(--orange-dark); }
.beat cite { display: block; margin-top: 16px; font: 400 clamp(24px, 2vw, 28px)/1 var(--hand); font-style: normal; color: var(--ink-soft); }
.year-story { border-top: 4px double var(--ink); padding-top: clamp(30px, 4vw, 56px); }
.js .ch-fig[data-reveal]:not(.in) { opacity: 1; filter: none; transform: translateY(24px); clip-path: inset(0 0 100% 0); }
.ch-fig[data-reveal] { transition: clip-path 1.1s var(--ease-in-out), transform 1.2s var(--ease-out); }
@media (max-width: 900px) {
  .chapter { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .ch-text, .chapter.flip .ch-text, .ch-fig, .chapter.flip .ch-fig, .print-frame.tall { grid-column: 1; grid-row: auto; position: relative; top: auto; }
  .ch-fig { order: -1; }
}

/* about: the typographic beat between chapters */
.beat { width: min(100%, 980px); max-width: none; }
.beat p { max-width: 17ch; margin-inline: auto; }

/* ---------- paper round on a vintage desktop computer ---------- */
.comp-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.comp-copy h3 { font-size: clamp(28px, 3vw, 42px); font-weight: 900; letter-spacing: -.04em; line-height: .94; color: var(--cream); text-wrap: balance; }
.comp-copy p { margin-top: 12px; font-weight: 600; max-width: 34ch; }
.comp-copy .small-print { color: var(--cream); opacity: .85; text-shadow: 0 1px 0 rgb(120 30 6 / .45); }
.computer { position: relative; width: 100%; max-width: 900px; margin-inline: auto; container-type: inline-size; }
/* computer-grey plate (1349 x 1015, with clear margin at the sides and below so the shadows can fade out inside the box).
   To revert to desktop-cut: aspect 875/670, glass 25.7% 11.8% 38.1% 35.7%, radius 4.5%/6%, floppy 44.6% 58.4% */
.computer .rig { position: relative; aspect-ratio: 1349 / 1015; }
.computer .plate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* contact shadows: the cut-out carries no baked shadow, so soft ellipses sit under the keyboard, the base and the mouse.
   Each one fades to nothing inside the rig's own box, so no edge can ever clip it */
.computer .rig::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 7.6% 2.2% at 91.1% 93.6%, rgb(70 18 0 / .42), rgb(70 18 0 / .16) 55%, transparent),
    radial-gradient(ellipse 40% 2.8% at 40.7% 95.4%, rgb(70 18 0 / .4), rgb(70 18 0 / .14) 55%, transparent),
    radial-gradient(ellipse 26% 3% at 44.7% 74.8%, rgb(70 18 0 / .2), transparent),
    radial-gradient(ellipse 44% 4.5% at 45% 94%, rgb(70 18 0 / .14), transparent); }
/* the CRT glass */
.computer .screen, .computer .win { position: absolute; left: 25.57%; top: 10.25%; width: 38.47%; height: 37.04%; }
.computer .screen { z-index: 2; border-radius: 7.9% / 10.9%; overflow: hidden; background: #2b2d29; }
.computer .screen::before { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scale(0, .004); opacity: 0; }
.computer .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgb(18 19 17 / .06) 0 1px, transparent 1px 3px), radial-gradient(120% 120% at 50% 50%, transparent 55%, rgb(18 19 17 / .28) 100%);
  box-shadow: inset 0 0 18px rgb(254 248 234 / .25); }
.computer .desk { position: absolute; inset: 0; opacity: 0; background-color: var(--cream); background-image: radial-gradient(rgb(18 19 17 / .35) 1px, transparent 1.2px); background-size: 4px 4px; }
.computer .ico { position: absolute; right: 6%; top: 8%; padding: 2px 4px; background: var(--cream); font: 400 clamp(11px, 1.6cqw, 15px)/1 "VT323", monospace; color: var(--ink); }
.computer.on .screen::before { animation: crt-on .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.computer.on .desk { opacity: 1; transition: opacity .2s .55s; }
@keyframes crt-on { 0% { opacity: 1; transform: scale(0, .004); } 45% { opacity: 1; transform: scale(1, .004); } 100% { opacity: 1; transform: scale(1, 1); } }
/* the window, opened with zoom rectangles */
.computer .win { z-index: 4; padding: 5% 5.5% 4%; display: flex; }
.computer .win > * { flex: 1; }
.win-bar, .win-body { background: var(--cream); }
.computer .win { flex-direction: column; }
.computer .win > .win-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: clamp(14px, 2.4cqw, 20px); padding: 0 6px; border: 2px solid var(--ink); border-bottom-width: 1px;
  background: repeating-linear-gradient(180deg, var(--ink) 0 1px, var(--cream) 1px 3px); }
.win-close { width: clamp(9px, 1.5cqw, 13px); height: clamp(9px, 1.5cqw, 13px); border: 2px solid var(--ink); background: var(--cream); }
.win-title { margin-inline: auto; padding: 0 6px; background: var(--cream); font: 400 clamp(13px, 2.1cqw, 19px)/1 "VT323", monospace; color: var(--ink); white-space: nowrap; }
.computer .win > .win-body { position: relative; border: 2px solid var(--ink); border-top: 0; padding: 5% 6% 4%; box-shadow: 2px 2px 0 var(--ink); display: flex; flex-direction: column; justify-content: center; }
.win-h { font: 800 clamp(13px, 2.1cqw, 18px)/1.1 var(--sans); letter-spacing: -.02em; }
.js .computer:not(.on) .win { opacity: 0; transform: scale(.08); }
.computer .win { transform-origin: 20% 15%; transition: opacity .01s .62s, transform .5s steps(5, end) .62s; }
/* pixel form inside the window */
.nl.pixel { margin-top: clamp(4px, 1cqw, 10px); }
.nl.pixel label { font-size: clamp(11px, 1.6cqw, 14px); margin-bottom: 4px; }
.nl.pixel .field { flex-direction: column; gap: 6px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.nl.pixel input[type="email"] { min-height: 44px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 0; background: #fff; font-size: clamp(14px, 1.9cqw, 17px); }
.nl.pixel .field:focus-within input { outline: 3px solid var(--blue); outline-offset: 1px; }
/* a 1-bit text caret blinking in the empty field as a hint; the real caret takes over on focus */
.nl.pixel .field { position: relative; }
.nl.pixel .caret { position: absolute; left: 12px; top: 8px; width: 2px; height: 16px; background: var(--ink); pointer-events: none; animation: caret-blink 1.06s steps(1, end) infinite; }
.nl.pixel input:not(:placeholder-shown) + .caret, .nl.pixel input:focus + .caret, .nl.pixel.success .caret { display: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* a classic arrow pointer drifting about the window, as if someone is about to click the field */
.computer .roam { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.computer .roam svg { position: absolute; left: 0; top: 0; width: 13px; height: auto; opacity: 0; transition: opacity .35s; will-change: transform; }
.computer .roam.drift svg { opacity: 1; }
.nl.pixel .go { min-height: 44px; border-radius: 8px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 3px var(--ink); font-size: clamp(14px, 1.9cqw, 16px); }
.nl.pixel .go:hover { background: var(--ink); color: var(--cream); }
.nl.pixel.loading .go { background: var(--cream); color: var(--ink); cursor: wait; }
.nl.pixel .go .busy i { display: none; }
.nl.pixel .go .busy::before { content: ""; width: 12px; height: 16px; background: linear-gradient(var(--ink) 0 2px, transparent 2px calc(100% - 2px), var(--ink) calc(100% - 2px)), conic-gradient(from 0deg at 50% 50%, var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0); animation: hourglass 1s steps(4) infinite; }
@keyframes hourglass { to { transform: rotate(180deg); } }
.nl.pixel .msg { position: absolute; z-index: 5; left: 4%; right: 4%; top: 50%; translate: 0 -50%; min-height: 0; margin: 0; padding: 10px 10px 10px 40px; border: 2px solid var(--ink); background: var(--cream); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font-size: clamp(12px, 1.7cqw, 14px); pointer-events: none; }
.nl.pixel .msg::before { content: "!"; position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font: 400 16px/1 "VT323", monospace; }
.nl.pixel .msg:empty { display: none; }
.nl.pixel.error .field { animation: shake .45s var(--ease-out); box-shadow: none; }
.nl.pixel .done { gap: 2px; }
.nl.pixel .done b { font-size: clamp(14px, 2.1cqw, 19px); }
.nl.pixel .done span { font-size: clamp(12px, 1.6cqw, 14px); }
.nl.pixel .done .tick { width: 22px; height: 22px; color: var(--ink); }
.nl.pixel .again { min-height: 36px; font-size: 13px; }
.win-body .win-h { transition: opacity .3s; }
.computer.done .win-h { opacity: 0; }
/* the floppy slides out of the real slot */
.computer .floppy { position: absolute; z-index: 3; left: 46%; top: 57.6%; width: 16%; aspect-ratio: 1 / 1.04; border-radius: 3px 3px 3px 10%; background: linear-gradient(160deg, #2b2c28, var(--ink) 60%); box-shadow: 0 10px 14px -6px rgb(0 0 0 / .6); transform-origin: 50% 0; opacity: 0; transform: translateY(-14%) scaleY(.05); }
.computer .floppy .shutter { position: absolute; left: 22%; right: 30%; top: 0; height: 30%; background: linear-gradient(90deg, #b9b6ad, #e4e1d8 50%, #a9a69d); border-radius: 0 0 2px 2px; }
.computer .floppy .shutter::after { content: ""; position: absolute; left: 58%; top: 18%; width: 16%; height: 60%; background: var(--ink); }
.computer .floppy .label { position: absolute; left: 12%; right: 12%; bottom: 7%; height: 46%; display: grid; place-items: center; padding: 4px; background: var(--cream); border-radius: 2px; text-align: center; font: 400 clamp(14px, 2.6cqw, 22px)/1 var(--hand); color: var(--ink); }
.computer.posting .floppy { animation: eject 1.2s cubic-bezier(.2, .8, .2, 1) .2s forwards; }
.computer.done .floppy { opacity: 1; transform: none; animation: none; }
@keyframes eject { 0% { opacity: 1; transform: translateY(-14%) scaleY(.05); } 55% { opacity: 1; transform: translateY(4%) scaleY(1.02) rotate(0); } 100% { opacity: 1; transform: translateY(0) scaleY(1) rotate(-3deg); } }
.computer.done .floppy { transform: rotate(-3deg); }
.computer .comp-note { left: 63%; top: 66%; color: var(--ink); opacity: 0; transition: opacity .2s; }
.computer.done .comp-note { opacity: 1; }
@media (max-width: 1000px) {
  .comp-grid { grid-template-columns: minmax(0, 1fr); }
  /* the screen is too small to type in on phones: the window zooms out below the machine */
  .computer { margin-bottom: 20px; }
  .computer .win { position: relative; left: auto; top: auto; width: min(100%, 460px); height: auto; padding: 0; margin: 14px auto 0; transform-origin: 50% -30%; }
  .computer .win > .win-bar { height: 22px; }
  .win-title { font-size: 19px; }
  .win-h { font-size: 18px; }
  .nl.pixel label { font-size: 14px; }
  .computer .win > .win-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .computer .screen::before { opacity: 1; transform: none; animation: none; } .computer .desk { opacity: 1; } .js .computer:not(.on) .win { opacity: 1; transform: none; } .nl.pixel .caret { animation: none; } .computer .roam { display: none; } }

/* ---------- back issues: floating carousel, each edition at its own angle ---------- */
.issue-carousel { overflow-x: auto; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; padding: clamp(40px, 5vw, 70px) 0 clamp(50px, 6vw, 80px); margin-top: 8px; outline-offset: -6px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.issue-carousel::-webkit-scrollbar { display: none; }
.issue-carousel.drag { cursor: grabbing; }
.issue-carousel.drag a { pointer-events: none; }
.ic-track { list-style: none; display: flex; gap: clamp(22px, 3vw, 44px); width: max-content; padding-inline: var(--gutter); margin: 0; }
.ic-item { flex: none; width: clamp(150px, 15vw, 210px); translate: 0 var(--y); rotate: var(--a); position: relative; }
/* soft contact shadow on the wall: a blurred ellipse that never has an edge */
.ic-item::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgb(60 14 0 / .32), transparent); z-index: -1; }
.ic-item .mag { aspect-ratio: 22 / 28; box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 18px 30px -16px rgb(40 10 0 / .45); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), box-shadow .45s var(--ease-out); }
.ic-item a.mag:focus-visible { transform: translateY(-14px) rotate(calc(var(--a) * -1)) scale(1.04); box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 30px 40px -18px rgb(40 10 0 / .5); }
@media (hover: hover) and (pointer: fine) { .ic-item a.mag:hover { transform: translateY(-14px) rotate(calc(var(--a) * -1)) scale(1.04); box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 30px 40px -18px rgb(40 10 0 / .5); } }
.js .issues-sec:not(.ic-in) .ic-item { opacity: 0; translate: 0 calc(var(--y) + 60px); rotate: calc(var(--a) * 3); }
.js .issues-sec .ic-item { transition: opacity .6s var(--ease-out), translate .9s cubic-bezier(.3, 1.25, .45, 1), rotate .9s cubic-bezier(.3, 1.25, .45, 1); transition-delay: calc(min(var(--n, 0), 8) * 60ms); }
@media (prefers-reduced-motion: reduce) { .js .issues-sec .ic-item { transition: none; opacity: 1; translate: 0 var(--y); rotate: var(--a); } }

/* Instagram: whole section fits one laptop screen. Heading column left, orbit right, orbit sized by viewport height */
@media (min-width: 901px) {
  .ig-sec { padding-block: clamp(36px, 6vh, 72px); }
  .ig-sec .shell { --ig-h: clamp(480px, calc(100svh - 200px), 740px); display: grid; grid-template-columns: minmax(260px, .34fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: center; min-height: var(--ig-h); }
  .ig-head { grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: start; gap: 24px; }
  .ig-head .sec-h { font-size: clamp(44px, 4.6vw, 76px); line-height: .92; }
  .ig-grid { margin-top: 0; min-height: 0; height: var(--ig-h); }
  .cutting.o0 { --w: min(40%, calc((var(--ig-h) - 110px) * .66)); top: 50%; margin-left: calc(var(--w) / -2); translate: 0 calc(-50% + var(--p) * var(--depth, 0) * 1px); }
  .cutting.o1 { --w: 18%; --x: 1%; --y: 2%; }
  .cutting.o2 { --w: 17%; --x: 5%; --y: 50%; }
  .cutting.o3 { --w: 18%; --x: 80%; --y: 0%; }
  .cutting.o4 { --w: 17%; --x: 79%; --y: 50%; }
  .cutting.o5 { --w: 11%; --x: 24%; --y: 68%; }
  .ig-note { right: 4%; bottom: 2%; }
}

/* ---------- one-screen layouts on laptop desktops (13in MacBook: ~1470x830) ---------- */
@media (min-width: 901px) {
  /* year one: photo and figures stacked left, story right, all in one view */
  .year, #round { padding-block: clamp(40px, 7vh, 80px); }
  .year-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); grid-template-areas: "photo copy" "figs copy"; gap: 28px clamp(32px, 4vw, 72px); align-items: start; }
  .year .photo { grid-area: photo; width: min(100%, calc((100svh - 330px) * .9), 440px); justify-self: center; padding-bottom: 64px; }
  .year .copy { grid-area: copy; align-self: center; }
  .year .copy .easy { font-size: clamp(38px, 4.4vw, 66px); }
  .year .pullline { margin-top: 22px; font-size: clamp(20px, 1.7vw, 24px); }
  .year .copy .ctas { margin-top: 22px; }
  .year-figs { grid-area: figs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; max-width: none; padding: 16px 6px; rotate: -.6deg; }
  .year-figs div { display: grid; gap: 6px; align-content: start; padding: 2px 16px; border: 0; border-right: 1px dashed rgb(18 19 17 / .35); }
  .year-figs div:last-child { border-right: 0; }
  .year-figs dt, .year-figs dd { padding: 0; border: 0; width: auto; max-width: none; min-width: 0; }
  .year-figs dd { font-size: clamp(30px, 2.8vw, 42px); white-space: nowrap; }
  .year-figs dt { font-size: 14px; line-height: 1.25; }

  /* paper round: the computer fills the left at screen height, words sit beside it */
  #round .shell { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "comp head" "comp lede" "comp copy"; column-gap: clamp(32px, 4vw, 72px); align-content: center; align-items: start; }
  #round .round-grid { display: contents; }
  #round .sec-h { grid-area: head; align-self: end; }
  #round .sec-lede { grid-area: lede; margin-top: 14px; }
  #round .computer { grid-area: comp; width: min(100%, calc((100svh - 150px) * 1.3)); justify-self: center; }
  #round .comp-copy { grid-area: copy; margin-top: 18px; align-self: start; }
}

/* keep the newsletter window inside the Mac's screen at every desktop size */
@media (min-width: 901px) {
  .computer .win { padding: 3.5% 4.5% 3%; }
  .computer .win > .win-body { padding: 4% 5% 4%; overflow: hidden; }
  .win-h { font-size: clamp(12px, 1.75cqw, 16px); }
  .nl.pixel { margin-top: clamp(4px, .8cqw, 8px); }
  .nl.pixel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nl.pixel .field { gap: clamp(4px, .7cqw, 6px); }
  .nl.pixel input[type="email"], .nl.pixel .go { min-height: clamp(30px, 4.2cqw, 40px); font-size: clamp(13px, 1.7cqw, 16px); }
}

/* no column holes: neighbouring columns size to each other (13in laptop and up) */
@media (min-width: 901px) {
  .lead { align-items: center; }
  .lead figure { align-self: center; justify-self: end; width: min(100%, 440px); }
  .inside { grid-template-columns: minmax(0, 720px) minmax(240px, 320px); justify-content: center; }
  .inside > :first-child { max-width: none; }
  .chapter { align-items: center; }
}

.print-frame .frame.port { aspect-ratio: 480 / 558; }
.print-frame .frame.grad { aspect-ratio: 676 / 932; }
.print-frame:has(.frame.grad) { width: min(100%, 360px); justify-self: center; }

/* ---------- taste pass: palette, surfaces, colour rhythm ----------
   Locked to the logo colours. Section tones are gradients that start and end transparent over the
   orange flood, so no section ever shows a seam; no extra layers, no blend modes, no animation. */
:root {
  --orange-lift: #F25E37;            /* orange lit from above */
  --orange-shade: #DC4019;           /* orange in a soft shadow */
  --shade-warm: 58 18 4;             /* tinted shadow colour (deep orange-brown, never black) */
  --shadow-paper: 0 1px 1px rgb(var(--shade-warm) / .16), 0 18px 30px -18px rgb(var(--shade-warm) / .55), 0 50px 70px -40px rgb(var(--shade-warm) / .42);
}
/* hero: daylight falling from the top left onto the poster wall */
.hero { background: radial-gradient(90% 120% at 12% -10%, rgb(255 214 184 / .16), transparent 60%); }
/* broadsheet section: a soft darker pool where the paper lies, like a table under it */
.paper-sec { background: radial-gradient(closest-side at 50% 56%, rgb(var(--shade-warm) / .10), transparent); }
/* back issues: a deeper band of colour so the floating editions read as their own room */
.issues-sec { background: linear-gradient(180deg, transparent, var(--orange-shade) 22%, var(--orange-shade) 78%, transparent); }
/* Instagram orbit: lifted, brighter wall behind the cuttings */
.ig-sec { background: radial-gradient(closest-side at 62% 50%, rgb(242 94 55 / .75), rgb(242 94 55 / .3) 60%, transparent); }
/* year one and the paper round sink gently toward the ink footer */
.round-sec { background: linear-gradient(180deg, transparent 30%, var(--orange-shade)); }
/* footer ink: not a flat slab; a faint warm light at the top edge and newsprint speck */
.foot { background: radial-gradient(80% 140% at 30% 0%, #1E1D19, var(--ink) 70%); }
/* tinted shadows: replace neutral black in the depth shadows */
.btn { box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 22px -12px rgb(var(--shade-warm) / .75); }
.btn:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 16px 26px -12px rgb(var(--shade-warm) / .75); }
.round { box-shadow: 0 10px 20px -12px rgb(var(--shade-warm) / .7); }
.thumb .play { box-shadow: 0 12px 22px -10px rgb(var(--shade-warm) / .7); }
.door .post .fold, .door .pinned { box-shadow: 0 8px 14px -8px rgb(var(--shade-warm) / .55); }
.lost .soldout, .pod-logo .stamp { box-shadow: 0 10px 18px -10px rgb(var(--shade-warm) / .6); }
.computer .floppy { box-shadow: 0 10px 14px -6px rgb(var(--shade-warm) / .6); }
.cutting .tape, .year .photo .tape, .polaroid .tape { box-shadow: 0 1px 3px rgb(var(--shade-warm) / .14); }
/* no hard-edged shadows: the 1-bit window and its alert keep a tight but fading shadow */
.computer .win > .win-body { box-shadow: 1px 2px 3px rgb(18 19 17 / .45); }
.nl.pixel .msg { box-shadow: 2px 3px 5px rgb(18 19 17 / .4); }
/* paper surfaces: a touch of warm fall-off at the edges so cream reads as paper, not a white box */
.figures, .watch, .ig-state, .nudge, .cv, .form-card, .slip { background-image: radial-gradient(130% 120% at 30% 20%, transparent 60%, rgb(var(--shade-warm) / .045)); }
.cv { background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgb(30 108 173 / .28) 35px 36px), radial-gradient(130% 120% at 30% 20%, transparent 60%, rgb(var(--shade-warm) / .045)); background-position: 0 58px, 0 0; }

/* ---------- motion pass (14 Oct): tuning only, no layout or palette changes ----------
   Transform, opacity and clip-path only on anything large; hover movement is gated to real pointers
   (in place above); everything idle stops. */
:root { --ease-ui: cubic-bezier(.23, 1, .32, 1); }

/* hover: quicker settle, so covers answer the pointer instead of floating after it */
.mag { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.thumb img { transition: transform .6s var(--ease-out); }
.top .shell > nav a:not(.btn)::after, .crumbs a::after { transition-duration: .3s; }
.top .shell > nav a:not(.btn) { isolation: isolate; transition: color .3s var(--ease-ui); }
/* leaving plays the reveal backwards: the bubble shrinks back to a full underline first, then the line draws back to the left */
.top .shell > nav a:not(.btn)::after { z-index: -1; transform-origin: left;
  transition: transform .3s var(--ease-ui) .34s, left .36s var(--ease-ui), right .36s var(--ease-ui), bottom .36s var(--ease-ui), height .36s var(--ease-ui), border-radius .36s var(--ease-ui), background-color .3s, box-shadow .3s; }
.top .shell > nav a:not(.btn):hover::after { transition: transform .3s var(--ease-ui), left .4s var(--ease-ui), right .4s var(--ease-ui), bottom .4s var(--ease-ui), height .4s var(--ease-ui), border-radius .4s var(--ease-ui), background-color .3s, box-shadow .3s; }
/* hover: the underline swells into the Gist speech bubble (cream, blue border, no tail) behind the word */
@media (hover: hover) and (pointer: fine) {
  .top .shell > nav a:not(.btn):hover { color: var(--ink); }
  .top .shell > nav a:not(.btn):hover::after { left: -12px; right: -12px; bottom: 4px; height: calc(100% - 8px); border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--blue), 0 6px 14px -10px rgb(40 15 0 / .55); }
}
@media (prefers-reduced-motion: reduce) { .top .shell > nav a:not(.btn), .top .shell > nav a:not(.btn)::after { transition: none; } }

/* press: every pressable thing answers the finger */
.ink-btn:active, .copy-btn:active, .pause-btn:active { transform: scale(.97); transition-duration: .1s; }
.copy-btn, .pause-btn { transition: background-color .3s, color .3s, transform .16s var(--ease-ui); }
.dot-btn i { transition: opacity .3s, transform .4s var(--ease-pop), scale .12s var(--ease-ui); }
.dot-btn:active i { scale: .78; }
.slip-x { transition: background-color .3s, rotate .45s var(--ease-out), scale .12s var(--ease-ui); }
.slip-x:active { scale: .9; }
.nl .go:active, .nl.pixel .go:active { transform: scale(.97); transition-duration: .1s; }
.thumb:active img { transform: scale(1.01); transition-duration: .15s; }
a.mag:active { transition-duration: .12s; }

/* header: hides and returns faster; the 92% orange bar no longer pays for a backdrop blur on every scroll frame */
.top { transition: transform .32s var(--ease-ui), background-color .3s, box-shadow .3s; }
.top.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* drawer links: leave at once when the menu closes (the sheet itself is set in the mobile menu block below) */
.js:not(.menu-open) .drawer li a { transition-duration: .1s; transition-delay: 0s; }

/* reveals: no blur (it repainted whole sections on the MacBook), shorter travel and time */
[data-reveal] { transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--rd, 0s); }
.js [data-reveal]:not(.in) { transform: translate3d(0, 24px, 0); filter: none; }

/* page transitions: a quick fade-lift out, a settle in; no full-page blur */
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
::view-transition-old(root) { animation: vt-out .24s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease-out) .04s both; }
::view-transition-group(masthead) { animation-duration: .4s; }
::view-transition-group(footer) { animation-duration: .4s; }
html.arriving main { animation: vt-in .45s var(--ease-out) both; }

/* newsletter lightbox: the dim fades on its own; a full-screen backdrop blur under a moving slip was the costliest frame on the site */
.nl-box::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
.nl-box.closing::backdrop { animation: nlb-out .26s var(--ease-ui) both; }

/* A-board: the outgoing bill only moves and fades (see site.js) */
.aboard .bill-line { transition: transform .9s var(--ease-in-out), opacity .7s var(--ease-in-out), clip-path .9s var(--ease-in-out); }
.aboard .bill-line.out { filter: none; }

/* loops with no ongoing purpose stop: the swipe hint nudges three times, then rests */
.swipe-hint svg { animation-iteration-count: 3; }
/* busy dots and the pixel hourglass only spin while a form is actually sending */
.nl:not(.loading) .go .busy i, .nl:not(.loading) .go .busy::before { animation: none; }
/* idle loops pause when off screen (site.js toggles .off) */
.pod-logo img.off, .gt img.off { animation-play-state: paused; }

/* Instagram centrepiece lifts in without a blur (an animated filter on a large photo) */
.js .ig-sec:not(.ig-in) .cutting.o0 { filter: none; }

/* phones: light and snappy. Shorter travel, shorter waits, same choreography */
@media (max-width: 900px) {
  [data-reveal] { transition-duration: .5s, .55s; }
  .js [data-reveal]:not(.in) { transform: translate3d(0, 14px, 0); }
  .js .broadsheet .half.bottom, .js .broadsheet .half.bottom::before { transition-duration: 1s; }
  .js .ig-sec .cutting { transition-duration: .5s, .7s, .5s; }
  .js .ig-sec .cutting.o0 { transition-duration: .55s, .7s, .55s; }
  .js .ig-sec:not(.ig-in) .cutting.o0 { transform: translateY(24px) scale(.95); }
  .js .ig-sec .ig-row .cutting { transition-delay: calc(.2s + var(--i) * .06s); }
  .js .ig-sec .cutting .tape { transition-delay: calc(.6s + var(--i) * .06s); }
  .js .ig-sec .ig-head > * { transition-duration: .5s; transition-delay: 0s; }
  .js .ig-sec .ig-head > * + * { transition-delay: .08s; }
  .js .issues-sec .ic-item { transition-duration: .45s, .6s, .6s; transition-delay: calc(min(var(--n, 0), 6) * 40ms); }
  .mag, .ic-item .mag { transition-duration: .3s; }
  ::view-transition-old(root) { animation-duration: .18s; }
  ::view-transition-new(root) { animation-duration: .32s; animation-delay: 0s; }
}

/* mobile menu: cream button (not a black circle); drawer fades and slides as one solid sheet, square corners, no late texture */
.menu-btn { background: var(--cream); color: var(--ink); box-shadow: 0 6px 14px -8px rgb(60 15 0 / .45); transition: transform .12s cubic-bezier(.2, .8, .2, 1), background-color .2s, color .2s; }
.menu-open .menu-btn { background: var(--orange); color: var(--cream); box-shadow: none; }
@media (max-width: 900px) {
  .js .drawer, .js.menu-open .drawer { clip-path: none; border-radius: 0; will-change: auto; }
  .js .drawer { opacity: 0; transform: translateY(-12px); transition: opacity .16s var(--ease-ui, ease), transform .16s var(--ease-ui, ease), visibility 0s .16s; }
  .js.menu-open .drawer { opacity: 1; transform: none; transition: opacity .2s cubic-bezier(.2, .8, .2, 1), transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .js .drawer::after { mix-blend-mode: normal; opacity: .08; }
}
@media (prefers-reduced-motion: reduce) { .js .drawer, .js.menu-open .drawer { transform: none; transition: opacity .01s, visibility 0s; } }

/* CV notepad: one 36px rule; the lines live on the list so every line of text sits on one */
.cv { --p: clamp(22px, 3vw, 40px); --rule: 36px; padding: var(--p); background-image: radial-gradient(130% 120% at 30% 20%, transparent 60%, rgb(var(--shade-warm) / .045)); background-position: 0 0; }
.cv ul { margin: 22px calc(var(--p) * -1) 0; padding: 0 var(--p); background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), rgb(30 108 173 / .28) calc(var(--rule) - 1px) var(--rule)); background-position: 0 -6px; }
.cv li { min-height: 0; padding: 0 0 0 clamp(10px, 1.6vw, 18px); font: 600 16px/var(--rule) var(--sans); }
/* magazines rest on the mantel top: soft contact shadow, no edges */
.ws-mantel .slot::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -5px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgb(20 10 5 / .45), transparent); z-index: -1; }
/* A-board: logo sits fully inside the header band, tail included */
.aboard .bill-head img { height: 62%; max-width: 70%; translate: 0 -4%; }
/* tighter hand-off from the A-board into the broadsheet */
.board-sec { padding-bottom: clamp(24px, 3vw, 44px); }
.board-sec + .paper-sec { padding-top: clamp(24px, 3vw, 44px); }

/* ---------- elegance pass (14 Oct): rhythm, alignment, no holes ----------
   One section rhythm token; sections sized by their content. */
:root { --space-sec: clamp(48px, 6vw, 88px); }
/* explainers index: the hero is as tall as its rack, not the whole screen (it left a 290px hole) */
.ex-hero .shell { min-height: 0; }
.ex-hero + .sec { padding-top: clamp(24px, 3vw, 44px); }
/* coming soon: breathing room between the lede and the covers standing above the shelf */
.soon-wrap { margin-top: clamp(20px, 3vw, 40px); }
/* back issues: less dead band under the drifting editions (shadows still have room) */
.issue-carousel { padding: clamp(32px, 4vw, 56px) 0 clamp(44px, 4.5vw, 64px); }
/* about: the two prints sit inside their figure, so they no longer slide under the pull quote */
/* phones: Instagram heading stacks; the button no longer squeezes the lede into one-word lines */
@media (max-width: 900px) { .ig-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
/* home broadsheet on laptops: a tighter page so the teaser reads closer to one screen */
@media (min-width: 1000px) {
  .paper-sec .paper-wrap { margin-top: clamp(20px, 2.4vw, 32px); }
  .paper-sec .broadsheet .half { padding: clamp(20px, 2.4vw, 36px) clamp(24px, 3.4vw, 52px); }
  .paper-sec .flag .flag-logo { height: clamp(60px, 5vw, 76px); }
  .paper-sec .lead { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); padding-top: clamp(14px, 1.6vw, 22px); }
  .paper-sec .lead h1, .paper-sec .lead h3 { font-size: clamp(40px, 4.3vw, 66px); }
  .paper-sec .lead .stand { margin-top: 12px; font-size: clamp(17px, 1.3vw, 20px); }
  .paper-sec .byline { margin-top: 14px; }
}

/* explainers index hero: room above for the covers standing up out of the rack (they met the header) */
.hero.ex-hero { padding-top: clamp(40px, 6vw, 88px); }
/* about: the work prints sized to the short paragraph beside them */

/* ---------- mobile app pass (iPhone 14 Pro, 393x852 touch) ---------- */
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* safe areas: notch and home indicator in landscape and standalone */
.shell { width: min(100% - max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) * 2, var(--shell)); }
.top { padding-top: env(safe-area-inset-top, 0px); }
.foot { padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
@media (max-width: 900px) {
  .js .drawer { padding-top: calc(96px + env(safe-area-inset-top, 0px)); padding-bottom: max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px)); overscroll-behavior: contain; }
  /* horizontal rows glide and settle like native lists */
  .rack-scroll, .ig-row, .soon-scroll, .issue-carousel { -webkit-overflow-scrolling: touch; }
  .rack-scroll .slot, .ig-row .cutting, .soon-scroll .slot { scroll-snap-stop: always; }
}

/* ---------- desktop leftovers: no tall bands ---------- */
@media (min-width: 1000px) {
  /* home broadsheet reads in one laptop view: heading and lede share a row, the page is tighter */
  .paper-sec > .shell { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: end; }
  .paper-sec .sec-h { grid-column: 1; }
  .paper-sec .sec-lede { grid-column: 2; margin: 0 0 .3em; justify-self: start; }
  .paper-sec .paper-wrap { grid-column: 1 / -1; margin-top: clamp(18px, 2vw, 26px); }
  .paper-sec .broadsheet .half { padding: clamp(16px, 1.8vw, 26px) clamp(24px, 3.2vw, 48px); }
  .paper-sec .flag { padding-bottom: 6px; }
  .paper-sec .flag .flag-logo { height: clamp(50px, 4vw, 60px); }
  .paper-sec .lead { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); padding-top: clamp(12px, 1.3vw, 18px); }
  .paper-sec .lead h3 { font-size: clamp(40px, 3.9vw, 58px); }
  .paper-sec .lead figure .frame { aspect-ratio: 16 / 9; }
  .paper-sec .lead .stand { max-width: 62ch; }
  .paper-sec.sec { padding-bottom: clamp(48px, 4vw, 60px); }
  .paper-sec .paper-foot { margin-top: 12px; padding-top: 10px; }
}
@media (min-width: 901px) {
  /* about, the work: prints sized to the short paragraph and centred against it, not sticky */
}

/* year-one figures as three pills, sized like the buttons beside them */
@media (min-width: 901px) {
  .year-figs { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; background: none; box-shadow: none; rotate: 0deg; justify-content: center; }
  .year-figs::before, .year-figs::after { content: none; }
  .year-figs div { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cream); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 22px -12px rgb(var(--shade-warm) / .75); }
  .year-figs div:last-child { border-right: 0; }
  .year-figs dd { font-size: 26px; line-height: 1; }
  .year-figs dt { font-size: 14px; line-height: 1.15; max-width: 13ch; }
}

/* 12 Insta Gists: portrait reel thumbnails, photo covers, shelves, linked A-board bills */
.article .lead figure.reel { width: min(100%, 300px); justify-self: center; }
@media (min-width: 901px) { .article .lead figure.reel { width: min(100%, 250px); justify-self: end; align-self: center; } }
@media (max-width: 900px) { .article .lead figure.reel { width: min(64vw, 260px); margin-inline: auto; } }
.cols > .col-h:first-child { margin-top: 0; }
.cols > .col-h:first-child + p::first-letter { float: left; font: 900 4.2em/.78 var(--sans); margin: .06em .08em 0 0; color: var(--orange-dark); }
.mag.gc .fade { z-index: 2; }
.mag.gc.c4 .fade { background: linear-gradient(180deg, transparent 38%, rgb(18 19 17 / .88) 64%, #121311 82%); }
.mag.gc.c5 .fade { background: linear-gradient(180deg, transparent 36%, rgb(238 229 207 / .9) 62%, #EEE5CF 80%); }
.mag.gc .masthead { width: 24%; left: 5%; top: 4%; }
.mag.gc .lines { left: 7%; right: 7%; bottom: 6%; gap: 2cqw; }
.mag.gc .big { font-size: 12.5cqw; line-height: .9; padding-bottom: .06em; }
.gist-shelves { display: grid; gap: clamp(18px, 3vw, 40px); margin-top: clamp(20px, 3vw, 40px); }
.aboard .bill-link { display: grid; gap: .5em; color: inherit; text-decoration: none; border-radius: 6px; padding: .2em .3em; transition: transform .45s var(--ease-out); }
.aboard .bill-link p, .aboard .bill-link small { transition: color .3s var(--ease-out); }
.aboard .bill-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.aboard .bill-link:focus-visible p, .aboard .bill-link:focus-visible small { color: var(--orange-dark); }
@media (hover: hover) and (pointer: fine) {
  .aboard .bill-link:hover { transform: translateY(-3px); }
  .aboard .bill-link:hover p, .aboard .bill-link:hover small { color: var(--orange-dark); }
}
.aboard .bill-link:active { transform: scale(.98); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) { .aboard .bill-link { transition: none; } }
/* phones: the shelf is a fixed 640px inside a scroller, so reserve the cover height in px (percent padding would follow the narrower scroller and clip the covers) */
@media (max-width: 700px) { .soon-scroll .wshelf.ws-floating { padding-top: calc(640px * .2144 * 28 / 22 + 8px); } }
/* the one-year thumbnail is already in the logo's orange and blue: shown in full colour, not printed */
.mag.gc .print.colour img { filter: none; mix-blend-mode: normal; object-position: 50% 30%; }
/* mobile footer: copyright and Privacy on one line, the Good Thinking credit floating bottom right under it */
@media (max-width: 700px) {
  .foot .bottom { flex-direction: column; align-items: stretch; gap: 4px; padding-top: 8px; }
  .gt { align-self: flex-end; margin-right: -10px; padding: 8px 10px 4px; }
}

/* ---------- newsletter archive: previous issues ---------- */
.iss-sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.iss-sheet { position: relative; background: var(--newsprint); color: var(--ink); border-radius: 2px; padding: clamp(6px, 1vw, 14px) clamp(16px, 2.4vw, 34px); box-shadow: 0 1px 1px rgb(0 0 0 / .12), 0 26px 44px -26px rgb(40 15 0 / .55), 0 70px 90px -60px rgb(40 15 0 / .45); }
.iss-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(18px, 2.2vw, 30px); }
.iss-list li { border-top: 1px solid rgb(18 19 17 / .28); }
.iss-list li:first-child { border-top: 0; }
@media (min-width: 640px) { .iss-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iss-list li:nth-child(2) { border-top: 0; } }
@media (min-width: 1180px) { .iss-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .iss-list li:nth-child(-n+4) { border-top: 0; } }
.iss-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; min-height: 44px; text-decoration: none; color: var(--ink); border-radius: 4px; }
.iss-item .pic { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--newsprint-deep); box-shadow: 0 8px 16px -10px rgb(40 15 0 / .55); }
.iss-item .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.iss-item .txt { display: block; min-width: 0; }
.iss-item .k { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 800 11.5px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--orange-dark); }
.iss-item .k time { color: var(--ink-fade); }
.iss-item .t { margin: 5px 0 4px; font: 900 clamp(18px, 1.35vw, 20px)/1.06 var(--sans); letter-spacing: -.025em; text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .16em; transition: text-decoration-color .3s; }
.iss-item .s { display: block; font: 500 14px/1.38 var(--serif); font-style: italic; color: var(--ink-soft); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  .iss-item:hover .pic img { transform: scale(1.06); }
  .iss-item:hover .t { text-decoration-color: var(--orange); }
}
.iss-item:active .pic img { transform: scale(1.02); transition-duration: .15s; }
.iss-list.big .iss-item { grid-template-columns: 104px minmax(0, 1fr); padding: 18px 0; }
@media (max-width: 639px) { .iss-item, .iss-list.big .iss-item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 13px 0; } }
.iss-head { padding-bottom: clamp(18px, 3vw, 36px); }
/* the latest issue, big, above the rest */
.iss-latest { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 52px); align-items: center; padding: clamp(14px, 2vw, 26px); background: var(--newsprint); color: var(--ink); text-decoration: none; border-radius: 2px;
  box-shadow: 0 1px 1px rgb(0 0 0 / .12), 0 26px 44px -26px rgb(40 15 0 / .55), 0 70px 90px -60px rgb(40 15 0 / .45); }
.iss-latest .pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--newsprint-deep); box-shadow: 0 14px 26px -16px rgb(40 15 0 / .6); }
.iss-latest .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.iss-latest .txt { display: grid; justify-items: start; gap: 10px; min-width: 0; padding-right: clamp(0px, 1.6vw, 20px); }
.iss-latest .tag { padding: 6px 10px; border-radius: 3px; background: var(--orange); color: var(--cream); font: 800 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.iss-latest .k { display: flex; flex-wrap: wrap; gap: 2px 12px; font: 800 13px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--orange-dark); }
.iss-latest .k time { color: var(--ink-fade); }
.iss-latest .t { margin: 0; font: 900 clamp(38px, 4.6vw, 72px)/.94 var(--sans); letter-spacing: -.035em; text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 4px; text-underline-offset: .12em; transition: text-decoration-color .3s; }
.iss-latest .s { font: 500 clamp(19px, 1.7vw, 24px)/1.3 var(--serif); font-style: italic; color: var(--ink-soft); text-wrap: balance; }
.iss-latest .stand { font: 400 16px/1.5 var(--serif); color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
.iss-latest .btn { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .iss-latest:hover .pic img { transform: scale(1.04); } .iss-latest:hover .t { text-decoration-color: var(--orange); } }
.iss-latest:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (max-width: 820px) { .iss-latest { grid-template-columns: minmax(0, 1fr); } .iss-latest .txt { padding: 0 4px 8px; } }
.iss-latest-sec { padding-bottom: 0; }
.iss-earlier-h { margin: 0 0 clamp(14px, 1.8vw, 22px); font: 900 clamp(26px, 2.4vw, 36px)/1 var(--sans); letter-spacing: -.03em; color: var(--cream); }

/* issue page: the broadsheet without the fold */
.issue .lead.iss-lead { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.issue .lead h1 { font-size: clamp(38px, 4.6vw, 72px); line-height: .93; padding-bottom: .06em; }
.issue .episode { margin: 0 0 12px; }
.iss-sub { margin-top: 14px; font: 800 clamp(20px, 1.8vw, 27px)/1.14 var(--sans); letter-spacing: -.02em; text-wrap: balance; max-width: 30ch; }
.issue .lead .stand { margin-top: 12px; }
.iss-cover { align-self: start; }
.iss-cover .frame { display: block; overflow: hidden; border-radius: 3px; background: var(--newsprint-deep); box-shadow: 0 16px 30px -18px rgb(40 15 0 / .6); }
.iss-cover img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .issue .lead.iss-lead { grid-template-columns: minmax(0, 1fr); } .iss-cover { max-width: 520px; } }
.iss-body { overflow-wrap: break-word; }
.iss-body > :first-child { margin-top: clamp(16px, 2vw, 26px); }
.iss-body h2 { margin: 1.5em 0 .45em; }
.iss-body h3 { margin: 1.3em 0 .4em; font: 800 clamp(20px, 1.7vw, 24px)/1.15 var(--sans); letter-spacing: -.02em; }
.iss-body a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .18em; transition: color .25s, text-decoration-color .25s; }
.iss-body a:hover { color: var(--orange-dark); text-decoration-color: currentColor; }
.iss-body mark { background: rgb(238 73 34 / .2); color: inherit; padding: 0 .12em; border-radius: 2px; }
.iss-body ul, .iss-body ol { margin: .9em 0; padding-left: 1.3em; }
.iss-body li + li { margin-top: .45em; }
.iss-body li::marker { color: var(--orange-dark); font-weight: 700; }
.iss-body * + ul, .iss-body * + ol, .iss-body ul + p, .iss-body ol + p { margin-top: .9em; }
.iss-body blockquote { margin: 1.2em 0; padding-left: 18px; border-left: 3px solid var(--orange); font-style: italic; }
.iss-fig { margin: 1.5em 0; }
.iss-fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(78vh, 760px); margin-inline: auto; border-radius: 2px; box-shadow: 0 12px 24px -16px rgb(40 15 0 / .5); }
.iss-fig figcaption { text-align: left; }
.iss-video { margin: 1.4em 0; }
.iss-video .ink-btn svg { width: 18px; height: 18px; }
.iss-body .signoff { margin-top: 1.2em; }
.iss-refs { margin-top: 2.2em; padding-top: 6px; border-top: 4px double var(--ink); font-size: .84em; line-height: 1.5; }
.iss-refs h2 { margin: .8em 0 .5em; font-size: clamp(20px, 1.8vw, 26px); }
.iss-refs p + p { margin-top: .5em; }
.iss-orig { margin-top: 2em; padding-top: 14px; border-top: 1px solid rgb(18 19 17 / .35); font: 600 15px/1.5 var(--sans); color: var(--ink-soft); }
.iss-orig a { color: var(--ink); font-weight: 800; }
.iss-card-meta .k { font: 900 24px/1 var(--sans); letter-spacing: -.03em; }
.iss-card-meta .textlink { min-height: 44px; font-size: 15px; }
.iss-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: clamp(22px, 3vw, 36px); }
.iss-nav-a { display: grid; gap: 4px; padding: 16px 20px; min-height: 44px; border-radius: 6px; background: var(--cream); color: var(--ink); text-decoration: none; box-shadow: 0 14px 26px -18px rgb(40 15 0 / .6); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.iss-nav-a span { font: 800 12px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--orange-dark); }
.iss-nav-a b { font: 900 clamp(19px, 1.6vw, 23px)/1.1 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.iss-nav-a.newer { text-align: right; }
@media (hover: hover) and (pointer: fine) { .iss-nav-a:hover { transform: translateY(-3px); box-shadow: 0 20px 32px -18px rgb(40 15 0 / .6); } }
.iss-nav-a:active { transform: scale(.985); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) { .iss-item .pic img, .iss-nav-a { transition: none; } }
.issue .iss-cover .frame { aspect-ratio: auto; }
#previous-issues { padding-top: clamp(20px, 2.4vw, 36px); }
.article-sec:has(.issue) { padding-bottom: clamp(20px, 2.6vw, 36px); }
@media (min-width: 700px) { .iss-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iss-nav-a.older { grid-column: 1; } .iss-nav-a.newer { grid-column: 2; } }

/* ==========================================================================
   ALL THE GISTS (/gists/), PREVIOUS / NEXT / RANDOM on Gist pages, "See all" on home
   ========================================================================== */
/* /gists/: heading left, search and subject chips right on laptops */
.gg-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(14px, 1.6vw, 22px); }
.gg-hero .shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px clamp(28px, 4vw, 64px); align-items: end; min-height: 0; }
.gg-hero h1 { max-width: none; }
.gg-clear[hidden] { display: none; }
@media (min-width: 1000px) { .gg-hero .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.gg-hero .page-lede { margin-top: 14px; }
.gg-tools { display: grid; gap: 14px; }
.gg-search { position: relative; display: flex; align-items: center; min-height: 56px; border-radius: 999px; background: var(--cream); color: var(--ink); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 14px 26px -18px rgb(40 15 0 / .7); transition: box-shadow .3s var(--ease-out); }
.gg-search:focus-within { box-shadow: 0 0 0 3px var(--ink), 0 14px 26px -18px rgb(40 15 0 / .7); }
.gg-search > svg { position: absolute; left: 20px; width: 22px; height: 22px; pointer-events: none; }
.gg-search input { flex: 1; min-width: 0; height: 56px; padding: 0 56px 0 54px; border: 0; border-radius: 999px; background: transparent; font: 700 17px/1 var(--sans); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.gg-search input::placeholder { color: var(--ink-fade); opacity: 1; }
.gg-search input::-webkit-search-cancel-button { display: none; }
.gg-clear { position: absolute; right: 6px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background-color .2s, transform .12s; }
.gg-clear svg { width: 18px; height: 18px; }
.gg-clear:hover { background: rgb(18 19 17 / .08); }
.gg-clear:active { transform: scale(.9); }
.gg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 14px; font: 800 15px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); background: var(--cream); box-shadow: inset 0 0 0 3px var(--blue), 0 6px 14px -10px rgb(40 15 0 / .55); transition: background-color .25s var(--ease-out), color .25s, box-shadow .25s, transform .12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.gg-chip span { font-size: 12px; font-weight: 700; opacity: .72; font-variant-numeric: tabular-nums; }
.gg-chip[aria-pressed="true"] { background: var(--blue); color: var(--cream); box-shadow: inset 0 0 0 3px var(--blue-deep), 0 8px 16px -10px rgb(40 15 0 / .7); }   /* the logo bubble: cream with a blue border, blue when picked */
@media (hover: hover) and (pointer: fine) { .gg-chip[aria-pressed="false"]:hover { background: #fff; box-shadow: inset 0 0 0 3px var(--blue-deep), 0 8px 16px -10px rgb(40 15 0 / .6); } }
.gg-chip:active { transform: scale(.96); }
.gg-sec { padding: 0 0 var(--space-sec); }
.gg-count { margin-bottom: 14px; font-weight: 700; font-size: 15px; color: var(--ink); }
/* the grid: 2, 4 or 8 even columns (88 fills every row); cards in a row share one height */
.gg-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 600px) { .gg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; } }
@media (min-width: 1180px) { .gg-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px 16px; } }
/* Here's to You: only a handful, so they're shown big */
@media (min-width: 1180px) { .hty-sec .gg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 22px; } }
@media (min-width: 600px) { .hty-sec .gg-take { font-size: clamp(20px, 1.8vw, 28px); } }
.gg-item { min-width: 0; }
.gg-item[hidden] { display: none; }
/* cards well below the fold skip layout and paint until they come near (the first twelve, which the opening zoom uses, always render) */
.gg-grid > .gg-item:nth-child(n+13) { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.gg-card { display: flex; flex-direction: column; height: 100%; border-radius: 3px 5px 5px 3px; overflow: hidden; background: var(--cream); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 12px 22px -14px rgb(40 15 0 / .6), 0 30px 46px -34px rgb(40 15 0 / .5);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gg-card:hover { transform: translateY(-4px); box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 20px 30px -16px rgb(40 15 0 / .6), 0 44px 60px -36px rgb(40 15 0 / .45); } }
.gg-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; transform: translateY(-5px); }
.gg-card:active { transform: scale(.98); transition-duration: .12s; }
.gg-pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--newsprint); }
.gg-pic.c1 { background: var(--orange); } .gg-pic.c2 { background: var(--blue); } .gg-pic.c3 { background: var(--cream); } .gg-pic.c4, .gg-pic.c5 { background: var(--newsprint); }
.gg-pic .print img { object-position: 50% 42%; }
.gg-pic .print.colour img { filter: none; mix-blend-mode: normal; object-position: 50% 30%; }
/* grid cards in full colour, no two-tone print (with GRID_COLOUR in site.js) */
.gg-pic .print img { filter: none; mix-blend-mode: normal; visibility: visible; }
.gg-pic.has-cover .print img { object-position: 50% 75%; }
.gg-pic .print canvas { display: none; }
.gg-txt { display: grid; align-content: start; gap: 6px; padding: 10px 11px 13px; }
.gg-tag { justify-self: start; padding: .28em .5em .22em; background: var(--orange); color: var(--cream); font: 900 12px/1 var(--cond); font-stretch: 72%; letter-spacing: .03em; text-transform: uppercase; border-radius: 2px; max-width: 100%; overflow-wrap: anywhere; }
.gg-take { font: 800 15px/1.2 var(--sans); letter-spacing: -.015em; text-wrap: pretty; overflow-wrap: break-word; }
@media (max-width: 599px) { .gg-take { font-size: 15.5px; } .gg-txt { padding: 10px 10px 12px; } }
.gg-item.pop { animation: gg-pop .5s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes gg-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.gg-empty { display: grid; justify-items: center; gap: 16px; padding: 40px 20px; border-radius: 4px; background: var(--cream); text-align: center; font-weight: 700; box-shadow: 0 14px 26px -18px rgb(40 15 0 / .6); }
.gg-empty[hidden] { display: none; }
.gg-rule { grid-column: 1 / -1; margin: clamp(10px, 1.6vw, 22px) 0 2px; padding-top: clamp(16px, 2vw, 26px); border-top: 3px solid var(--ink); list-style: none; }
.gg-rule[hidden] { display: none; }
.gg-rule { transition: opacity .4s var(--ease-out); }
.gg-zoom.on.gg-hush .gg-rule { opacity: 0; }   /* stays out of the opening zoom, then shows once the cards have landed */
.gg-rule-h { font: 900 clamp(22px, 2vw, 28px)/1.05 var(--sans); letter-spacing: -.03em; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .gg-card, .gg-chip, .gg-search { transition: none; } .gg-item.pop { animation: none; } }
/* All the Gists on phones: the search tucks behind a magnifier at the end of the intro and grows out of it when tapped;
   the topics run in one row you swipe along */
.gg-find { display: none; }
@media (max-width: 599px) {
  .gg-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: end; }
  .gg-intro > h1 { grid-column: 1 / -1; }
  .gg-find { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--ink);
    box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 14px 26px -18px rgb(40 15 0 / .7); transition: transform .12s, background-color .2s; -webkit-tap-highlight-color: transparent; }
  .gg-find:active { transform: scale(.92); }
  .gg-find svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: opacity .25s, transform .35s var(--ease-out); }
  .gg-find .gg-find-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
  .gg-find[aria-expanded="true"] { background: var(--ink); color: var(--cream); }
  .gg-find[aria-expanded="true"] .gg-find-q { opacity: 0; transform: rotate(90deg) scale(.6); }
  .gg-find[aria-expanded="true"] .gg-find-x { opacity: 1; transform: none; }
  .gg-hero:not(.finding) .gg-search { display: none; }
  .gg-hero.finding .gg-search { animation: gg-grow .45s var(--ease-out) both; }
  .gg-hero.unfinding .gg-search { animation: gg-shrink .3s var(--ease-in-out) both; }
  .gg-search .gg-clear { display: none; }
  .gg-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .gg-chips::-webkit-scrollbar { display: none; }
  .gg-chip { flex: none; }
}
@keyframes gg-grow { from { clip-path: inset(0 0 0 calc(100% - 56px) round 999px); opacity: .4; } to { clip-path: inset(0 round 999px); opacity: 1; } }
@keyframes gg-shrink { from { clip-path: inset(0 round 999px); opacity: 1; } to { clip-path: inset(0 0 0 calc(100% - 56px) round 999px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gg-hero.finding .gg-search, .gg-hero.unfinding .gg-search { animation: none; } }
/* A calm editorial opening: normal document flow, with four featured stories at every size.
   No pinning, scroll compensation, animated spacer or content-visibility size guesses. */
.gg-featured[hidden] { display: none; }
.gg-featured-head { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.gg-shuffle { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border: 3px solid var(--blue); border-radius: 999px; background: var(--cream); color: var(--blue-deep); font: 800 15px/1 var(--sans); touch-action: manipulation; }
.gg-shuffle[hidden] { display: none; }
.gg-shuffle svg { width: 19px; height: 19px; }
.gg-shuffle:disabled { opacity: .65; cursor: wait; }
.gg-shuffle:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .gg-shuffle:hover { background: #fff; border-color: var(--blue-deep); } }
.gg-browser .gg-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1025px) { .gg-browser .gg-featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gg-archive { margin-top: 32px; padding-top: 22px; border-top: 3px solid var(--cream); }
.gg-archive > .gg-rule-h { margin-bottom: 10px; }
.gg-browser .gg-item { content-visibility: visible; contain-intrinsic-size: none; }
.gg-date { display: block; margin-top: 5px; color: var(--ink-fade); font: 600 12px/1.3 var(--sans); }
.gg-load { display: grid; justify-items: center; gap: 10px; margin-top: 28px; }
.gg-load-status { max-width: 48ch; color: var(--cream); font: 600 14px/1.5 var(--sans); text-align: center; }
.gg-load-status:empty { display: none; }
.gg-browser .gg-hero.finding .gg-search { animation: none; }
.gg-browser .gg-card:active { transform: none; }
@media (max-width: 599px) {
  .gg-browser .gg-hero { padding: 18px 0 10px; }
  .gg-browser .page-h { font-size: 40px; }
  .gg-browser .page-lede { margin-top: 8px; font-size: 15px; line-height: 1.4; }
  .gg-browser .gg-hero .shell { gap: 12px; }
  .gg-browser .gg-featured-grid { gap: 12px; }
  .gg-browser .gg-featured-grid .gg-pic { aspect-ratio: 9 / 10; }
  .gg-browser .gg-featured-grid .gg-pic.has-cover img { object-position: 50% 65%; }
  .gg-browser .gg-featured-grid .gg-txt { gap: 5px; padding: 9px 10px 10px; }
  .gg-browser .gg-featured-grid .gg-tag { font-size: 12px; line-height: 1.1; }
  .gg-browser .gg-featured-grid .gg-take { font-size: 17px; line-height: 1.15; }
  .gg-browser .gg-featured-grid .gg-date { margin-top: 1px; font-size: 11px; }
  .gg-browser .gg-featured-head { gap: 10px; }
  .gg-browser .gg-rule-h { font-size: 23px; }
}

/* Desktop-only restoration of the original pinned-cover opening. */
.gg-spacer,.gg-cue,.gg-side{display:none}
.gg-archive,#gg-archive-h{scroll-margin-block-start:calc(88px + env(safe-area-inset-top,0px))}
.gg-archive{padding-top:32px}
/* Plain grid photos do not depend on the canvas printer's done/fade lifecycle. */
.gg-browser .gg-pic .print img{opacity:1;visibility:visible;transition:none}
.gg-browser .gg-pic .print{background-color:var(--newsprint)}
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
/* All the Gists opening: three tall Gists under the heading, which pull back into their slots in the grid as you scroll.
   The stage pins under the header while the cards scale; site.js drives it with transforms and opacity only,
   and leaves it all static when it is off */
.gg-zoom { position: relative; overflow: clip; overflow-anchor: none; }   /* site.js keeps the view steady itself when the run comes and goes */
.gg-zoom.on .gg-stage { position: sticky; top: var(--gg-pin, 0px); }
.gg-zoom.on .gg-spacer { height: var(--gg-run, 0px); }
.gg-zoom .gg-item, .gg-zoom .gg-countrow { transform-origin: 0 0; }   /* the run scales each card about its own corner */
.gg-zoom .gg-item.pop { transform-origin: 50% 50%; }
/* without scroll-driven animations the moving parts get their own layers up front, so a frame only moves them */
.gg-zoom.on.gg-js:not(.gg-parked) .gg-hero, .gg-zoom.on.gg-js:not(.gg-parked) .gg-k, .gg-zoom.on.gg-js:not(.gg-parked) .gg-countrow { will-change: transform; }
.gg-zoom.on.gg-js:not(.gg-parked) .gg-lead .gg-txt { will-change: transform; }
.gg-zoom.on.gg-js:not(.gg-parked) .gg-lead .gg-txt > * { will-change: transform, opacity; }
.gg-zoom.on.gg-js:not(.gg-parked) .gg-lead .gg-shade, .gg-zoom.on.gg-js:not(.gg-parked) .gg-lead .gg-drop, .gg-zoom.on.gg-js:not(.gg-parked) .gg-tools { will-change: opacity; }
.gg-zoom.on .gg-wait { visibility: hidden; }   /* far below the fold until the run is under way (site.js) */
.gg-zoom.gg-hush .gg-tools, .gg-zoom.gg-hush .gg-countrow { pointer-events: none; }
.gg-zoom.on .gg-tools, .gg-zoom.on .gg-countrow { transition: none; }
/* an opening card: the label slides out from under the picture, and its shadows are separate layers that only fade */
.gg-zoom .gg-item.gg-lead { position: relative; z-index: 2; }
.gg-zoom .gg-lead .gg-card { background: transparent; box-shadow: none; }
.gg-zoom .gg-lead .gg-pic { z-index: 1; border-radius: 3px 5px 5px 3px; }
.gg-zoom .gg-lead .gg-txt { position: relative; flex: 1; overflow: clip; background: var(--cream); box-shadow: 0 -24px 0 var(--cream); }   /* the shadow fills in behind the picture's rounded corners */
.gg-shade, .gg-drop { display: none; }
.gg-zoom .gg-lead .gg-shade, .gg-zoom .gg-lead .gg-drop { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: -1; border-radius: 3px 5px 5px 3px; pointer-events: none; }
.gg-zoom .gg-lead .gg-shade { bottom: 0; box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 12px 22px -14px rgb(40 15 0 / .6), 0 30px 46px -34px rgb(40 15 0 / .5); transition: translate .55s var(--ease-out), box-shadow .55s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gg-zoom .gg-lead .gg-card:hover ~ .gg-shade { translate: 0 -4px; box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 20px 30px -16px rgb(40 15 0 / .6), 0 44px 60px -36px rgb(40 15 0 / .45); } }
.gg-cue { position: fixed; left: 50%; z-index: 30; display: inline-flex; align-items: center; gap: 10px; translate: -50% 0; padding: 12px 18px 12px 20px; border-radius: 999px;
  background: var(--cream); color: var(--ink); font: 800 15px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 10px 24px -12px rgb(58 18 4 / .6); pointer-events: none; }
.gg-cue svg { width: 18px; height: 18px; animation: gg-nudge 1.4s var(--ease-in-out) infinite; }
@keyframes gg-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.gg-zoom:not(.on) .gg-cue, .gg-zoom.gg-far .gg-cue, .gg-zoom.on.gg-sided.gg-far .gg-side { display: none; }   /* parked: the run's animations are let go, which would otherwise show these again */
.gg-zoom.on .gg-find { position: relative; z-index: 5; }   /* stays tappable above the scaled cards */
.gg-side { position: fixed; z-index: 30; display: none; pointer-events: none; }
.gg-zoom.on.gg-sided .gg-side { display: block; }
.gg-side .gg-side-h { display: inline-block; max-width: none; margin: 0; }
.gg-side .gg-side-lede { margin-top: 20px; max-width: 30ch; }


.gg-zoom.on .gg-spacer{display:block}
.gg-zoom .gg-cue{display:inline-flex}
.gg-zoom.gg-hush .gg-featured-head{pointer-events:none}
}

/* /explainers/ now points to /gists/ */
.gists-go { margin-top: 22px; }

/* home back issues: "See all" next to the arrows */
.shelf-ctrl { align-items: center; }
.see-all { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 800; font-size: 16px; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 2px rgb(18 19 17 / .35); transition: background-color .3s var(--ease-out), box-shadow .3s, transform .12s; }
.see-all svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .see-all:hover { background: var(--cream); box-shadow: inset 0 0 0 2px var(--cream), 0 10px 20px -12px rgb(40 15 0 / .6); } .see-all:hover svg { transform: translateX(3px); } }
.see-all:active { transform: scale(.96); }

/* Gist pages: Another Gist? (previous, random, next) */
.gnav { padding: clamp(8px, 1.5vw, 20px) 0 0; }
.gnav-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: clamp(14px, 1.8vw, 22px); }
.gnav-h { font: 900 clamp(30px, 3.4vw, 48px)/.95 var(--sans); letter-spacing: -.04em; color: var(--cream); }
.gnav-row { display: grid; gap: 14px; grid-template-areas: "prev" "next" "rand"; }
@media (min-width: 820px) { .gnav-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "prev rand next"; gap: clamp(16px, 2vw, 28px); align-items: stretch; } }
.gnav-card { grid-area: prev; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 4px 6px 6px 4px; background: var(--cream); color: var(--ink); text-decoration: none; min-height: 44px;
  box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 14px 26px -16px rgb(40 15 0 / .6), 0 36px 54px -40px rgb(40 15 0 / .5);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.gnav-card.next { grid-area: next; }
@media (min-width: 820px) {
  .gnav-card.next { grid-template-columns: minmax(0, 1fr) 84px; padding: 12px 12px 12px 18px; text-align: right; }
  .gnav-card.next .gnav-pic { order: 2; }
  .gnav-card.next .gnav-eye, .gnav-card.next .gnav-tag { justify-self: end; }
  .gnav-card.next .gnav-eye { flex-direction: row-reverse; }
}
.gnav-card .gnav-pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: var(--newsprint); box-shadow: 0 6px 12px -8px rgb(40 15 0 / .6); }
.gnav-card .print img { object-position: 50% 42%; }
.gnav-card .print.colour img { filter: none; mix-blend-mode: normal; }
.gnav-txt { display: grid; gap: 6px; min-width: 0; }
.gnav-eye { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); }
.gnav-eye svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease-out); }
.gnav-tag { justify-self: start; font: 900 13px/1 var(--cond); font-stretch: 72%; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.gnav-txt b { font: 850 clamp(17px, 1.45vw, 21px)/1.15 var(--sans); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; }
@media (hover: hover) and (pointer: fine) {
  .gnav-card:hover { transform: translateY(-4px); box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 22px 32px -18px rgb(40 15 0 / .6), 0 46px 64px -40px rgb(40 15 0 / .45); }
  .gnav-card.prev:hover .gnav-eye svg { transform: translateX(-3px); }
  .gnav-card.next:hover .gnav-eye svg { transform: translateX(3px); }
}
.gnav-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.gnav-card:active { transform: scale(.985); transition-duration: .12s; }
.gnav-rand { grid-area: rand; display: grid; justify-items: center; align-content: center; gap: 8px; }
.gnav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 850 17px/1 var(--sans); letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 14px 26px -16px rgb(40 15 0 / .8); transition: transform .4s var(--ease-pop), background-color .3s, box-shadow .3s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.gnav-btn svg { width: 24px; height: 24px; flex: none; transition: transform .5s var(--ease-pop); }
.gnav-btn[aria-expanded="true"] { background: var(--blue-ink); }
.gnav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gnav-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .gnav-btn:hover { transform: translateY(-2px) rotate(-1.5deg); } .gnav-btn:hover svg { transform: rotate(-20deg); } .gnav-btn[aria-expanded="true"]:hover svg { transform: rotate(160deg); } }
.gnav-btn:active { transform: scale(.95); transition-duration: .12s; }
@media (min-width: 820px) {
  .gnav-btn { flex-direction: column; gap: 8px; width: 132px; height: 132px; min-height: 0; padding: 0 12px; border-radius: 50%; font-size: 16px; text-align: center; }
  .gnav-btn svg { width: 30px; height: 30px; }
}
.gnav-hint { font: 700 14px/1.2 var(--sans); color: var(--ink); }
/* the panel unfolds under the row; its cards are dealt in */
.gnav-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease-out), opacity .35s var(--ease-out); }
.gnav-panel.open { grid-template-rows: 1fr; opacity: 1; }
.gnav-panel[hidden] { display: none; }
.gnav-panel-in { min-height: 0; overflow: hidden; padding: 0 6px; margin: 0 -6px; }
.gnav-panel.settled .gnav-panel-in { overflow: visible; }
.gnav-sheet { margin: 18px 0 30px; padding: clamp(14px, 1.6vw, 22px); border-radius: 4px; background: var(--newsprint); color: var(--ink); box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 20px 36px -22px rgb(40 15 0 / .6), 0 50px 70px -50px rgb(40 15 0 / .45); }
.gnav-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; }
.gnav-ph { font: 900 clamp(19px, 1.6vw, 23px)/1.15 var(--sans); letter-spacing: -.025em; }
.gnav-shuffle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 800 15px/1 var(--sans); color: var(--ink); box-shadow: inset 0 0 0 2px rgb(18 19 17 / .35); transition: background-color .25s, box-shadow .25s, transform .12s; touch-action: manipulation; }
.gnav-shuffle svg { width: 20px; height: 20px; transition: transform .5s var(--ease-pop); }
.gnav-shuffle.spun svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .gnav-shuffle:hover { background: var(--cream); box-shadow: inset 0 0 0 2px var(--cream), 0 8px 16px -10px rgb(40 15 0 / .55); } }
.gnav-shuffle:active { transform: scale(.95); }
.gnav-shuffle:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.gnav-list { list-style: none; display: grid; gap: 8px; }
.gnav-pick { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 44px; padding: 7px 14px 7px 7px; border-radius: 4px; background: var(--cream); color: var(--ink); text-decoration: none; box-shadow: 0 1px 1px rgb(40 15 0 / .12), 0 10px 18px -14px rgb(40 15 0 / .6); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.gnav-pick .gnav-pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; }
.gnav-pick .gnav-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.gnav-pic.tone-0 { background: var(--blue); } .gnav-pic.tone-1 { background: var(--cream); } .gnav-pic.tone-2 { background: var(--orange); } .gnav-pic.tone-3 { background: var(--newsprint-deep); } .gnav-pic.tone-4 { background: var(--orange-wash); }
.gnav-pick .gnav-txt { gap: 4px; }
.gnav-pick .gnav-tag { color: var(--orange-dark); font-size: 12.5px; }
.gnav-pick b { font: 800 16px/1.2 var(--sans); letter-spacing: -.015em; text-wrap: pretty; overflow-wrap: break-word; }
@media (min-width: 1100px) {
  .gnav-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
  .gnav-pick { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 0; padding: 0; overflow: hidden; height: 100%; }
  .gnav-pick .gnav-pic { border-radius: 0; }
  .gnav-pick .gnav-txt { padding: 9px 10px 12px; }
  .gnav-pick b { font-size: 14.5px; }
}
@media (hover: hover) and (pointer: fine) { .gnav-pick:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 1px 1px rgb(40 15 0 / .12), 0 18px 26px -16px rgb(40 15 0 / .6); } }
.gnav-pick:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.gnav-pick:active { transform: scale(.97); transition-duration: .12s; }
.gnav-list.dealt li { animation: gnav-deal .55s var(--ease-pop) both; animation-delay: calc(60ms + var(--i) * 45ms); }
@keyframes gnav-deal { from { opacity: 0; transform: translateY(16px) rotate(-2.5deg) scale(.96); } }
.gnav-fail { padding: 8px 2px; font-weight: 700; }
.gnav + .endcta { padding-top: clamp(40px, 5vw, 72px); }
@media (prefers-reduced-motion: reduce) {
  .gnav-panel, .gnav-card, .gnav-btn, .gnav-btn svg, .gnav-shuffle svg, .gnav-pick, .gnav-eye svg { transition: none; }
  .gnav-list.dealt li { animation: none; }
}
/* Instagram aside lives in the heading column now */
.ig-head .ig-note { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 6px; color: var(--ink); }
/* Instagram orbit: top cards pin to the top, bottom cards to the bottom, so captions never sit under another card */
@media (min-width: 901px) {
  .cutting.o1, .cutting.o3 { top: 0; }
  .cutting.o2, .cutting.o4 { top: auto; bottom: 0; }
  .cutting.o2 { --x: 1%; }
  .cutting.o5 { --w: 10%; --x: 20.5%; top: auto; bottom: 1%; }
}
@media (min-width: 901px) and (max-width: 1299px) { .cutting.o5 { display: none; } }

/* year one: copy aligns with the polaroid top; stat pills and buttons share one row, one height */
@media (min-width: 901px) {
  .year-grid { grid-template-areas: "photo copy" "figs ctas"; align-items: start; row-gap: 26px; }
  .year .copy { align-self: start; padding-top: 4px; }
  .year-ctas { grid-area: ctas; align-self: center; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .year-figs { flex-wrap: nowrap; justify-content: flex-start; align-self: center; gap: 10px; }
  .year-figs div { min-height: 50px; padding: 0 16px; gap: 8px; }
  .year-figs dd { font-size: 23px; }
  .year-figs dt { font-size: 12.5px; line-height: 1.1; max-width: 12ch; }
  .year .flash { right: -46px; top: -58px; }
}

/* Gists grid: tag strip and take scale with the card so the text fills its space */
.gg-card { container-type: inline-size; }
.gg-txt { gap: 4cqw; padding: 6cqw 6.5cqw 7.5cqw; }
.gg-tag { font-size: clamp(13px, 9.6cqw, 20px); padding: .3em .5em .24em; }
.gg-take { font-size: clamp(16px, 12cqw, 24px); line-height: 1.08; letter-spacing: -.025em; }

/* ---------- Hero fit (14 Oct): every hero reads in the first view on desktop; condensed on phones ---------- */
/* About: the polaroid is sized by the viewport height so the photo and its handwritten caption sit above the fold */
@media (min-width: 901px) {
  .about-hero { padding-top: clamp(20px, 4.5svh, 64px); padding-bottom: clamp(24px, 4svh, 56px); }
  .about-hero .polaroid { width: 100%; max-width: min(480px, calc(100svh - 330px)); }
}
@media (max-width: 900px) {
  .about-hero .polaroid { width: 100%; max-width: min(100%, 340px, calc(100svh - 480px)); min-width: min(100%, 260px); }
}
/* 404: copy left, empty shelf right, so the whole shelf sits in the first view */
@media (min-width: 1000px) {
  .lost .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
  .lost .shell > * { grid-column: 1; }
  .lost .shelfunit { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; max-width: min(680px, calc((100svh - 220px) * 2.74)); margin: 0 auto; }
}
/* Gist pages on phones: thumbnail beside the standfirst so the whole lead fits one view after the auto-scroll */
@media (max-width: 820px) {
  .article .lead:has(> figure.reel) { grid-template-columns: minmax(0, 1fr) clamp(118px, 34vw, 230px); grid-template-areas: "h h" "s t" "e e" "b b" "a a" "c c"; column-gap: 16px; row-gap: 0; align-items: start; }
  .article .lead:has(> figure.reel) > div, .article .lead > figure.reel { display: contents; }
  .article .lead:has(> figure.reel) h1 { grid-area: h; }
  .article .lead:has(> figure.reel) .stand { grid-area: s; margin-top: 14px; font-size: clamp(16px, 4.3vw, 19px); }
  .article .lead:has(> figure.reel) .episode { grid-area: e; margin-top: 4px; }
  .article .lead:has(> figure.reel) .byline { grid-area: b; margin-top: 14px; }
  .article .lead > figure.reel .thumb { grid-area: t; margin-top: 18px; padding-bottom: 26px; }
  .article .lead > figure.reel figcaption { grid-area: c; margin-top: 12px; }
  .article .lead > figure.reel .reel-acts { grid-area: a; margin-top: 16px; }
  .article .lead > figure.reel .thumb .play { left: 50%; translate: -50% 0; padding-right: 14px; white-space: nowrap; }
  .article .lead > figure.reel .thumb .play > span { display: none; }
}
.article .lead > figure.reel .thumb .play { width: max-content; }
.article .lead > figure.reel .thumb .play svg { flex: none; }
/* the reel in the logo's speech bubble: Huw is talking. Corner radius, stroke (5.25% of width), blue and bottom-left tail are the
   logo's, kept to the width so the shape holds at 9:16. The still or video is clipped to the inner curve; the outline and tail are
   one inline SVG above it (no request, vector-sharp), placed in width-relative units so it scales with the reel at every size. */
.article .lead > figure.reel { --tb: max(16%, 26px); }
.article .lead > figure.reel .thumb { padding: 5.25% 5.25% var(--tb); }
.article .lead > figure.reel .thumb .pic { border-radius: 23% / 12.96%; box-shadow: none; }
.article .lead > figure.reel .thumb::after { content: ""; position: absolute; z-index: 3; left: 0; top: 0; width: 100%; aspect-ratio: 111.7 / 202; pointer-events: none; filter: drop-shadow(0 8px 10px rgb(40 15 0 / .28)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111.7 202'%3E%3Cpath fill='%231E6CAD' fill-rule='evenodd' d='M28.9 0H82.9A28.9 28.9 0 0 1 111.7 28.9V160.4A28.9 28.9 0 0 1 82.9 189.2H47.6Q44.2 189.2 41.5 191.2L31 198.8Q28.4 200.8 25.5 200.8H21.6Q17.6 200.8 17.6 196.8V187A28.9 28.9 0 0 1 0 160.4V28.9A28.9 28.9 0 0 1 28.9 0ZM28.9 6.4A22.5 22.5 0 0 0 6.4 28.9V160.4A22.5 22.5 0 0 0 28.9 182.9H82.9A22.5 22.5 0 0 0 105.4 160.4V28.9A22.5 22.5 0 0 0 82.9 6.4Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* the Watch pill sits on the bubble's bottom edge, clear of the tail */
.article .lead > figure.reel .thumb .play { z-index: 4; left: auto; right: 5%; translate: none; margin-bottom: calc(var(--tb) - 2.6% - 22px); }
.article .lead > figure.reel .thumb .play > span:not(.vh) { display: none; }
/* once the player's own controls are up, the pill steps aside: one play button at a time */
.article .lead > figure.reel .player.on:not(.broken) .play { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease-out), visibility 0s .2s; }
@media (max-width: 820px) {
  .article .lead > figure.reel .thumb .play { right: 2%; width: 44px; padding: 0; justify-content: center; }
  .article .lead > figure.reel .thumb .play b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* ---------- end hero fit ---------- */

/* ==========================================================================
   NEWSLETTER ISSUE READING LAYOUT (issue pages body + end nav; generator nl_build.py + nl_body_v2.py)
   Content-first composition: substantial passages can sit beside a photo; short photo notes
   share compact strips. Images retain their whole frame. The narrow layout always reads in order.
   ========================================================================== */
.issue .inside.iss-inside { grid-template-columns: minmax(0, 1fr); padding-top: clamp(6px, 1.4vw, 16px); }
.issue .body-copy.iss-body { --g: clamp(24px, 3vw, 44px); --m: 680px; --cap: 520px; width: 100%; min-width: 0; max-width: 1080px; margin-inline: auto; color: #0B0C0A; font: 450 clamp(17.5px, 1.3vw, 19.5px)/1.66 var(--serif); }
.iss-body > p, .iss-body > h2, .iss-body > h3, .iss-body > ul, .iss-body > ol, .iss-body > blockquote, .iss-body > .iss-refs, .iss-body > .share { max-width: var(--m); margin-inline: auto; }
.iss-body > ul, .iss-body > ol { padding-left: 1.3em; }
.iss-body strong, .iss-body b { font-weight: 700; }
.iss-body h2, .iss-body h3 { color: var(--ink); }
.issue .lead .stand { color: #2E2C26; }
.iss-body figcaption { color: #35332D; font-size: 14px; line-height: 1.42; }
/* photo rows */
.iss-row { display: grid; grid-template-columns: calc((100% - var(--g)) * var(--f, .36)) minmax(0, 1fr); column-gap: var(--g); align-items: start; margin: 1.7em 0; }
.iss-row.flip { grid-template-columns: minmax(0, 1fr) calc((100% - var(--g)) * var(--f, .36)); }
.iss-row.flip > .iss-fig { order: 2; justify-self: start; }
.iss-row.flip > .iss-txt { justify-self: end; }
.iss-row > .iss-fig { margin: 0; justify-self: end; }
.iss-txt { min-width: 0; max-width: var(--m); }
.iss-txt > :first-child { margin-top: 0; }
.iss-txt > :last-child { margin-bottom: 0; }
.iss-body > .iss-row + p, .iss-body > .iss-row + h2, .iss-body > .iss-row + h3 { margin-top: 0; }
/* figures: never cropped; height capped by the viewport via --a (aspect) and --cap; caption under the photo at the photo's width */
.iss-body .iss-fig { width: min(100%, calc(var(--cap) * var(--a, 1.5))); max-width: 100%; }
.iss-body .iss-fig.full { margin: 2.1em auto; }
.iss-body .iss-fig.compact { --cap: 360px; max-width: 580px; }
.iss-body .iss-fig img { width: 100%; max-width: 100%; height: auto; margin: 0; }
.iss-body .iss-fig.full.wide { --cap: min(70svh, 560px); }
.iss-body .iss-fig figcaption { width: 0; min-width: 100%; }
.iss-gallery { display: grid; grid-template-columns: repeat(var(--photos, 2), minmax(0, 1fr)); grid-template-rows: 300px auto auto; gap: 14px var(--g); max-width: 900px; margin: 1.8em auto; }
.iss-photo-note { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.iss-gallery .iss-fig { display: grid; grid-template-rows: subgrid; grid-row: span 2; width: 100%; margin: 0; }
.iss-gallery .iss-fig > :first-child { display: block; grid-row: 1; width: 100%; height: 100%; min-height: 0; }
.iss-gallery .iss-fig img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.iss-gallery .iss-fig figcaption { grid-row: 2; margin: 0; }
.iss-gallery .iss-txt { width: 100%; max-width: none; }
.iss-row.is-stacked, .iss-row.flip.is-stacked { grid-template-columns: minmax(0, 1fr); max-width: var(--m); margin-inline: auto; gap: 1em; }
.iss-row.is-stacked > .iss-fig { order: 0; justify-self: center; --cap: 380px; }
.iss-row.is-stacked > .iss-txt { order: 1; width: 100%; }
html:not(.js) .iss-row, html:not(.js) .iss-row.flip { grid-template-columns: minmax(0, 1fr); max-width: var(--m); margin-inline: auto; gap: 1em; }
html:not(.js) .iss-row > .iss-fig { order: 0; justify-self: center; --cap: 380px; }
html:not(.js) .iss-row > .iss-txt { order: 1; width: 100%; }
.iss-sponsor { max-width: var(--m); margin: 2.5em auto 0; padding-top: 24px; border-top: 1px solid rgb(18 19 17 / .3); font-size: .9em; }
.iss-sponsor-label { margin: 0 0 22px; font: 800 12px/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.iss-sponsor h2 { margin: .8em 0; font-size: clamp(24px, 2.4vw, 32px); }
.iss-sponsor .iss-fig.full { --cap: 380px; margin: 1em auto; max-width: 100%; }
.iss-sponsor .iss-fig.sponsor-logo { max-width: 220px; }
@media (max-width: 899px) {
  .issue .body-copy.iss-body { font-size: 17.5px; line-height: 1.64; }
  .iss-body > p, .iss-body > h2, .iss-body > h3, .iss-body > ul, .iss-body > ol, .iss-body > blockquote, .iss-body > .iss-refs, .iss-body > .share, .iss-txt { max-width: 68ch; }
  .iss-row, .iss-row.flip { grid-template-columns: minmax(0, 1fr); margin: 1.6em 0; }
  .iss-row > .iss-fig, .iss-row.flip > .iss-fig { order: 0; justify-self: center; margin: 0 0 1.1em; }
  .iss-row > .iss-txt, .iss-row.flip > .iss-txt { justify-self: center; width: 100%; }
  .iss-body .iss-fig.full { margin: 1.6em auto; }
  .iss-body .iss-fig, .iss-body .iss-fig.full.wide { --cap: 78svh; }
  .iss-body .iss-fig:not(.tall) { width: 100%; }
  .iss-gallery { grid-template-rows: 260px auto auto; column-gap: 24px; }
}
@media (max-width: 599px) {
  .iss-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 1.6em; }
  .iss-photo-note { display: block; }
  .iss-gallery .iss-fig { display: block; width: min(100%, calc(360px * var(--a, 1))); margin: 0 auto 1em; }
  .iss-gallery .iss-fig > :first-child, .iss-gallery .iss-fig img { height: auto; }
}
/* end of an issue: previous / next by date and a quiet link back to the list */
.iss-gnav { padding-top: clamp(4px, 1vw, 12px); }
.iss-gnav .gnav-row { grid-template-areas: "prev" "next"; }
@media (min-width: 820px) {
  .iss-gnav .gnav-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "prev next"; }
  .iss-gnav .gnav-row.solo:has(> .next) { grid-template-areas: ". next"; }
}
.iss-gnav .gnav-card .iss-pic { aspect-ratio: 1; background: var(--newsprint-deep); }
.iss-gnav .gnav-card .iss-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iss-gnav .gnav-tag { font: 700 12.5px/1.2 var(--sans); letter-spacing: .04em; font-stretch: normal; }
/* ---------- end newsletter issue reading layout ---------- */

/* ---------- Gist archive: related Gists, topic hubs, /gists/ topic links ---------- */
.grel { margin-bottom: clamp(30px, 4vw, 52px); }
.grel-list { list-style: none; display: grid; gap: 12px; }
@media (min-width: 600px) { .grel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .grel-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); } }
.grel-list li { min-width: 0; }
.grel-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; min-height: 44px; padding: 10px 14px 10px 10px; border-radius: 4px 6px 6px 4px; background: var(--cream); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 14px 26px -16px rgb(40 15 0 / .6), 0 36px 54px -40px rgb(40 15 0 / .5);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.grel-card .gnav-pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: var(--newsprint); box-shadow: 0 6px 12px -8px rgb(40 15 0 / .6); }
.grel-card .print img { object-position: 50% 42%; }
.grel-card .print.colour img { filter: none; mix-blend-mode: normal; }
.grel-card .gnav-txt b { font-size: clamp(16px, 1.2vw, 18px); }
@media (hover: hover) and (pointer: fine) { .grel-card:hover { transform: translateY(-4px); box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 22px 32px -18px rgb(40 15 0 / .6), 0 46px 64px -40px rgb(40 15 0 / .45); } }
.grel-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.grel-card:active { transform: scale(.985); transition-duration: .12s; }
.grel .gnav-head .textlink, .gnav-head .textlink { color: var(--cream); text-shadow: 0 1px 0 rgb(120 30 6 / .45); }

.gg-countrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 18px; margin-bottom: 14px; }
.gg-countrow .gg-count { margin: 0; }
.gg-countrow .textlink { min-height: 44px; color: var(--ink); font-size: 15px; }
.gg-countrow .textlink[hidden] { display: none; }

.gt-hero { padding-top: clamp(10px, 2vw, 28px); }
.gt-eye { font: 900 14px/1 var(--cond); font-stretch: 72%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.gt-hero .page-lede { max-width: 58ch; }

.gt-more { margin-top: clamp(28px, 3.5vw, 48px); }
.gt-more-h { font: 900 clamp(22px, 2vw, 28px)/1.05 var(--sans); letter-spacing: -.03em; color: var(--ink); margin-bottom: 12px; }
.gt-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.gt-links .gg-chip { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .gt-links .gg-chip:hover { background: #fff; box-shadow: inset 0 0 0 3px var(--blue-deep), 0 8px 16px -10px rgb(40 15 0 / .6); } }
.gt-links .gg-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* topic pages: cards for other topics top up the last grid row (data-v lists the column counts each shows at) */
.gt-x[data-v] { display: none; }
.gt-x[data-v~="2"] { display: block; }
@media (min-width: 600px) { .gt-x[data-v] { display: none; } .gt-x[data-v~="4"] { display: block; } }
@media (min-width: 1180px) { .gt-x[data-v] { display: none; } .gt-x[data-v~="8"] { display: block; } }
.gt-x .gt-x-tag { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .grel-card { transition: none; } }
/* ---------- end Gist archive ---------- */
/* home hero: half the gap between the header and the headline */
@media (min-width: 901px) {
  [data-page="home"] .hero { padding-top: 20px; }
  [data-page="home"] .hero .shell { min-height: min(calc(100svh - 250px), 600px); }
}
/* Gists hero: title sits at the top, topics first, search underneath */
.gg-hero .shell { align-items: start; }
.gg-tools .gg-chips { order: 1; }
.gg-tools .gg-search { order: 2; }
.gg-tools > :not(.gg-chips):not(.gg-search) { order: 3; }
/* ---------- press tones: printed covers take their paper and ink from the photo's press tone (site.js PRESS) ---------- */
.mag.toned.toned { background: var(--pp); color: var(--pt); }
.mag.toned.toned .fade { background: linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--pp) 88%, transparent) 63%, var(--pp) 81%); }
.mag.toned.toned .tag { background: var(--pt); color: var(--pp); }
.mag.toned.toned .stamp { color: var(--pt); }
/* issues index: heading sits just under the header so two rows of issues show */
.iss-head { padding-top: clamp(14px, 2vw, 28px); padding-bottom: 0; }
.iss-head .page-h { font-size: clamp(44px, 5vw, 84px); line-height: 1.06; }
.iss-head .page-lede { margin-top: 10px; }
/* Newsletter issues: title and blurb side by side on desktop, cut to the same height: the title's cap line sits
   level with the blurb's first cap line and both end on the same baseline (sizes scale together in vw) */
@media (min-width: 1000px) {
  .iss-head .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .iss-head .page-h { font-size: clamp(72px, 7.8vw, 120px); line-height: 1; max-width: 8ch; }
  .iss-head .page-lede { font-size: clamp(18px, 1.6vw, 25px); line-height: 1.52; max-width: 40ch; margin-top: .335em; padding-bottom: 0; }
}
.iss-sec { padding-top: clamp(18px, 2vw, 28px); }
/* Instagram orbit: side cards sized by the orbit's height so the top and bottom pair never overlap */
@media (min-width: 901px) {
  .cutting.o1, .cutting.o3 { --w: min(18%, calc(var(--ig-h, 640px) * .26)); }
  .cutting.o2, .cutting.o4 { --w: min(17%, calc(var(--ig-h, 640px) * .25)); }
}
/* issues index: subtitles stop at three lines */
.iss-item .s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* no visible breadcrumbs (BreadcrumbList structured data stays for search) */
.crumbs { display: none !important; }

/* A-board scroll reveal: the board is set down on the pavement, the masthead pops, then the bill is pasted on top-down */
.js .aboard { transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.3, 1.35, .45, 1), opacity .5s var(--ease-out); }
.js .aboard:not(.placed) { opacity: 0; transform: translateY(-48px) rotate(-4deg); }
.js .aboard .bill-head img { transition: transform .5s cubic-bezier(.3, 1.6, .45, 1) .45s, opacity .25s .45s; }
.js .aboard:not(.placed) .bill-head img { opacity: 0; transform: scale(.55) rotate(-8deg); }
.js .aboard .bill { transition: clip-path .8s var(--ease-in-out) .6s; }
.js .aboard:not(.placed) .bill { clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) { .js .aboard, .js .aboard .bill, .js .aboard .bill-head img { transition: none; } .js .aboard:not(.placed), .js .aboard:not(.placed) .bill-head img { opacity: 1; transform: none; } .js .aboard:not(.placed) .bill { clip-path: none; } }
/* A-board logo: absolutely sized to the band so Safari can't fall back to the image's natural size */
.aboard .bill-head img { position: absolute; left: 50%; top: 50%; height: 62%; width: auto; max-width: 70%; translate: -50% -54%; }
/* figures card on phones: one dashed rule per row, not two */
@media (max-width: 900px) {
  .figures:not(.year-figs) div, .year-figs div { border-bottom: 1px dashed rgb(18 19 17 / .35); }
  .figures div:last-of-type { border-bottom: 0; }
  .figures dt, .figures dd { border-bottom: 0 !important; }
}
/* phones: the returning header is solid and its colour runs up behind the status bar, so no page text shows above it */
@media (max-width: 900px) {
  .top.scrolled { background: var(--orange); }
  .top.scrolled::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 240px; background: var(--orange); pointer-events: none; }
}

/* ---------- taking part (first-paint geometry only; the rest is in interact.css, loaded on idle by interact.js) ---------- */
.thumb.player .pic { position: relative; aspect-ratio: 480 / 852; background: var(--ink); }
.thumb.player .pic img { height: 100%; object-fit: cover; }
.thumb.player .stage { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; }
.thumb.player .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
html:not(.js) .thumb.player .vid { opacity: 1; }
html:not(.js) .thumb.player .play, html:not(.js) .reel-acts, html:not(.js) .take { display: none; }
.thumb.player .play { cursor: pointer; }
.reel-acts { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; }
.didnt { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); font: 800 15px/1 var(--sans); letter-spacing: -.01em; transition: background-color .3s, color .3s, box-shadow .3s, transform .16s var(--ease-out); }
.didnt:not(:has(.dk-n:not([hidden]))) { padding-right: 16px; }
.dk-l { display: inline-grid; overflow: hidden; }
.dk-l > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .45s var(--ease-out), opacity .3s; }
.dk-l .ok { transform: translateY(110%); opacity: 0; }
.dk-n { min-width: 28px; padding: 6px 8px; border-radius: 999px; background: var(--ink); color: var(--newsprint); font: 900 14px/1 var(--cond); font-stretch: 75%; font-variant-numeric: tabular-nums; text-align: center; }
.take { margin-top: 2.2em; padding-top: 18px; border-top: 4px double var(--ink); font-family: var(--sans); }
.body-copy .take h2 { margin: 0 0 14px; }
.take-opts { list-style: none; display: grid; gap: 10px; }
.take-opt { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; border-radius: 4px; background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); text-align: left; font: 800 17px/1.25 var(--sans); letter-spacing: -.01em; overflow: hidden; }
.take-l { flex: 1; }
.take-foot { margin-top: 12px; font: 600 15px/1.4 var(--sans); color: var(--ink-soft); min-height: 1.4em; }
.suggest { margin-top: 14px; font: 600 16px/1.4 var(--sans); color: var(--ink-soft); }
.suggest .textlink { color: var(--ink); }

/* Keep the article and its preview together on wide screens. */
@media (min-width: 901px) {
  .article .lead:has(> figure.reel) { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(28px, 4vw, 64px); max-width: 1160px; margin-inline: auto; }
  .article .lead figure.reel { width: 100%; justify-self: start; align-self: start; }
}
@media (min-width: 901px) {
  .article .lead:has(> figure.reel) > div { align-self: start; }
}

/* A complete laptop hero, sized by available height as well as width. */
@media (min-width:901px) {
 .article .lead:has(> figure.reel) {grid-template-columns:minmax(0,1fr) clamp(210px,calc((100svh - 245px)*.48),280px); max-width:1040px; gap:40px; padding-top:18px; align-items:center;}
 .article .lead:has(> figure.reel) h1 {font-size:clamp(36px,4.1vw,62px);line-height:.98;}
 .article .lead:has(> figure.reel) .stand {font-size:clamp(17px,1.45vw,21px);max-width:48ch;}
 .article .lead:has(> figure.reel) > div {align-self:center;}
 .article .lead .byline {margin-top:18px;}
 .article .lead figure.reel figcaption {display:none;}
 .article .lead figure.reel .reel-acts {margin-top:6px;}
}

.article .lead .reel-acts {display:none;}
@media(min-width:901px) {
 .article .lead:has(> figure.reel) {grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);gap:28px;}
 .article .lead figure.reel {width:clamp(230px,calc((100svh - 200px)*.48),305px);justify-self:center;}
}

@media(min-width:901px) {
 .article .lead figure.reel {width:clamp(250px,calc((100svh - 170px)*.48),330px);}
}

/* ---------- about, the work: four prints, stacked until you reach them, then fanned out in an arc ---------- */
.chapter.work-chapter { align-items: start; }
.chapter.work-chapter .ch-text { grid-column: 1 / -1; grid-row: 1; max-width: 62ch; }
.chapter.work-chapter .ch-fig.the-work { grid-column: 1 / -1; grid-row: 2; position: relative; top: auto; width: 100%; order: 0; justify-self: stretch; margin-top: clamp(18px, 3vw, 40px); }
.the-work { container-type: inline-size; height: 33cqw; min-height: 0; aspect-ratio: auto; }
.work-print { --w: 25cqw; position: absolute; left: 50%; top: 0; width: var(--w); display: block; padding: 8px 8px 26px; background: var(--cream); box-shadow: var(--shadow-paper);
  translate: calc(-50% + var(--x)) var(--y); rotate: var(--r); transition: translate .9s var(--ease-out), rotate .9s var(--ease-out), box-shadow .3s; transition-delay: var(--d, 0s); }
.work-print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.work-print.w1 { --x: -35cqw; --y: 5cqw; --r: -8deg; --d: .18s; z-index: 1; }
.work-print.w2 { --x: -11.7cqw; --y: 1cqw; --r: -3deg; --d: .06s; z-index: 2; }
.work-print.w3 { --x: 11.7cqw; --y: 1cqw; --r: 3deg; --d: .06s; z-index: 3; }
.work-print.w4 { --x: 35cqw; --y: 5cqw; --r: 8deg; --d: .18s; z-index: 4; }
/* before the fan: a neat pile in the middle (site.js only stacks them when motion is fine and they are still below) */
.the-work.stacked .work-print { transition-delay: 0s; }
.the-work.stacked .w1 { --x: -3cqw; --y: 4cqw; --r: -7deg; }
.the-work.stacked .w2 { --x: -1cqw; --y: 3cqw; --r: -2.5deg; }
.the-work.stacked .w3 { --x: 1cqw; --y: 3cqw; --r: 2deg; }
.the-work.stacked .w4 { --x: 3cqw; --y: 4cqw; --r: 6deg; }
@media (hover: hover) and (pointer: fine) { .the-work:not(.stacked) .work-print:hover { --y: -1.5cqw; --r: 0deg; --d: 0s; z-index: 5; box-shadow: 0 30px 50px -24px rgb(40 15 0 / .6); } }
.the-work .note { position: absolute; left: 2%; bottom: 0; }
@media (max-width: 900px) {
  .the-work { height: 62cqw; }
  .work-print { --w: 44cqw; padding: 6px 6px 18px; }
  .work-print.w1 { --x: -26cqw; --y: 9cqw; --r: -10deg; }
  .work-print.w2 { --x: -9cqw; --y: 2cqw; --r: -3.5deg; }
  .work-print.w3 { --x: 9cqw; --y: 2cqw; --r: 3.5deg; }
  .work-print.w4 { --x: 26cqw; --y: 9cqw; --r: 10deg; }
  .the-work .note { bottom: -14px; }
}
/* the wheel (site.js): more prints than fit, turning slowly along the arc and tucking behind the sheet's edges */
.work-print.wx { display: none; }
.the-work.wheel .work-print { display: block; }
.the-work.wheel { width: calc(100% + 2 * clamp(20px, 5vw, 80px)); margin-inline: calc(-1 * clamp(20px, 5vw, 80px)); justify-self: center; overflow-x: clip; overflow-y: visible; }
.chapter.work-chapter .ch-fig.the-work.wheel { width: calc(100% + 2 * clamp(20px, 5vw, 80px)); }
.the-work.rolling .work-print { transition: box-shadow .3s, scale .4s var(--ease-out); }
.the-work.wheel .work-print:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.the-work.wheel{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;cursor:grab}
.the-work.wheel.dragging{cursor:grabbing}
.the-work.wheel img{-webkit-user-drag:none;user-select:none}
.work-controls{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px;position:relative;z-index:1;margin-top:14px}
.work-controls button{min-height:44px;padding:8px 15px;border:3px solid var(--blue);border-radius:14px;background:var(--cream);color:var(--ink);font-size:14px;font-weight:850}
@media (hover: hover) and (pointer: fine) { .the-work.rolling .work-print:hover { scale: 1.045; box-shadow: 0 30px 50px -24px rgb(40 15 0 / .6); } }
@media (prefers-reduced-motion: reduce) { .work-print { transition: none; } }
.work-chapter + .beat { margin-top: clamp(40px, 4.5vw, 64px); }

/* ---------- the corner bubble (site.js): the logo's speech bubble flipped, opening into newsletter + get in touch ---------- */
.cb { --lift: 0px; position: fixed; right: clamp(14px, 2vw, 26px); bottom: calc(clamp(14px, 2vw, 26px) + env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; translate: 0 calc(-1 * var(--lift)); pointer-events: none; }
.cb > * { pointer-events: auto; }
.cb-btn { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border-radius: 18px; filter: drop-shadow(0 10px 16px rgb(40 15 0 / .35)); transition: transform .45s var(--ease-out); }
.cb-btn svg { width: 100%; height: 100%; overflow: visible; }
.cb-bub { fill: var(--cream); stroke: var(--blue); stroke-width: 4; stroke-linejoin: round; }
.cb-i { fill: var(--ink); transition: transform .45s var(--ease-out); transform-origin: 32px 30px; }
@media (hover: hover) and (pointer: fine) { .cb-btn:hover { transform: translateY(-3px) rotate(-3deg); } }
.cb-btn:active { transform: scale(.94); transition-duration: .12s; }
.cb-btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.cb.open .cb-i { transform: scale(.82); }
.cb-panel { position: relative; width: min(380px, calc(100vw - 28px)); max-height: min(560px, calc(100dvh - 120px - var(--lift))); overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); color: var(--ink); border-radius: 20px; box-shadow: inset 0 0 0 3px var(--blue), 0 2px 2px rgb(0 0 0 / .12), 0 30px 60px -24px rgb(40 10 0 / .7);
  transform-origin: calc(100% - 30px) calc(100% + 40px); opacity: 0; transform: translateY(14px) scale(.4); clip-path: inset(60% 0 0 55% round 20px);
  transition: opacity .26s var(--ease-out), transform .55s cubic-bezier(.2, 1.15, .3, 1), clip-path .5s var(--ease-out); }
.cb.open .cb-panel { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 20px); }
.cb.closing .cb-panel { transition: opacity .3s .08s var(--ease-in-out), transform .4s var(--ease-in-out), clip-path .4s var(--ease-in-out); }
.cb-panel[hidden] { display: none; }
.cb-x { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); transition: background-color .2s; }
.cb-x:hover { background: rgb(18 19 17 / .07); }
.cb-x svg { width: 18px; height: 18px; }
.cb-part { padding: 22px 22px 20px; }
.cb-part h2 { font: 900 22px/1.05 var(--sans); letter-spacing: -.03em; padding-right: 40px; }
.cb-part p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.cb-nl { background: var(--orange); color: var(--cream); border-radius: 20px 20px 0 0; box-shadow: inset 3px 3px 0 var(--blue), inset -3px 0 0 var(--blue); }
.cb-nl h2 { color: var(--cream); }
.cb-nl p { color: rgb(254 248 234 / .92); }
.cb-nl + .cb-git { border-top: 3px solid var(--blue); }
.cb-nl ~ .cb-x { color: var(--cream); }
.cb-panel:has(.cb-nl) .cb-x { color: var(--cream); }
.cb-form { margin-top: 14px; }
.cb-form .field { background: var(--cream); box-shadow: none; }
.cb-form .go { background: var(--ink); padding: 0 18px; }
.cb-form .go:hover { background: var(--blue-ink); }
.cb-form .msg { color: var(--cream); min-height: 1.3em; margin-top: 8px; }
.cb-form .done { gap: 2px; }
.cb-form .done b { font-size: 21px; color: var(--cream); }
.cb-form .done span { color: rgb(254 248 234 / .9); }
.cb-form .done .again { justify-self: start; align-self: start; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.cb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.cb-mail { font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nl-locked .cb, .immersed .cb, .watching .cb { opacity: 0; pointer-events: none; }
.cb { transition: opacity .3s; }
@media (max-width: 600px) { .cb-btn { width: 56px; height: 56px; } .cb-part { padding: 18px 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .cb-panel, .cb.closing .cb-panel { transition: opacity .2s; transform: none; clip-path: none; } }

/* ---------- Here's to You (built by scripts/make-heres-to-you.mjs): one player with the latest episodes beside it,
   and every older one in a contents list below ---------- */
.hty-hero { padding: clamp(24px, 4vw, 56px) 0 clamp(24px, 3vw, 36px); }
.hty-hero .hty-top { display: grid; gap: clamp(26px, 4vw, 56px); align-items: start; min-height: 0; }
@media (min-width: 1000px) { .hty-top { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.hty-intro .page-h { font-size: clamp(56px, 8vw, 132px); line-height: .9; max-width: 6ch; }
.hty-intro .hty-series-title { max-width: 540px; margin: 0 0 26px; }
.hty-series-art { display: block; }
.hty-series-art img { display: block; width: 100%; height: auto; }
.hty-intro .page-lede { max-width: 44ch; }
@media (min-width: 1000px) {
  .hty-intro .hty-series-title { max-width: 460px; margin-bottom: 22px; }
  .hty-intro .page-lede { max-width: 460px; margin-top: 0; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.46; }
}
.hty-card { --vh: clamp(400px, 64svh, 600px); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); background: var(--cream); color: var(--ink); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 1px rgb(40 15 0 / .14), 0 18px 30px -18px rgb(40 15 0 / .6), 0 40px 60px -40px rgb(40 15 0 / .5); }
.hty-v { position: relative; height: var(--vh); aspect-ratio: 9 / 16; background: var(--blue-ink); }
.hty-v video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--blue-ink); }
.hty-cover { position: absolute; inset: 0; display: grid; grid-template-rows: 77% 1fr; color: var(--cream); text-decoration: none; }
.hty-art { display: block; overflow: hidden; -webkit-mask: linear-gradient(#000 86%, transparent); mask: linear-gradient(#000 86%, transparent); }
.hty-art img { display: block; width: 100%; height: 130%; object-fit: cover; object-position: 50% 0; }   /* the series art, cropped above its baked-in episode label */
.hty-lab { align-self: center; padding: 0 14px 6px; text-align: center; font: italic 500 clamp(18px, 1.6vw, 23px)/1.1 var(--serif); }
.hty-big { position: absolute; left: 50%; top: 40%; translate: -50% -50%; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--cream); color: var(--ink); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .6); transition: scale .3s var(--ease-out); }
.hty-big svg { width: 26px; height: 26px; margin-left: 3px; }
.hty-cover:hover .hty-big { scale: 1.07; }
.hty-cover:focus-visible { outline: 3px solid var(--cream); outline-offset: -6px; }
.hty-side { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; max-height: var(--vh); }
.hty-now { padding: 22px 24px 16px; border-bottom: 2px solid var(--ink); }
.hty-who { font: 900 18px/1 var(--cond); font-stretch: 75%; color: var(--blue); }
.hty-now h2 { margin-top: 8px; font: 900 clamp(26px, 2.6vw, 38px)/1.02 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.hty-meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: 15px; font-weight: 600; }
.hty-list { list-style: none; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 12px; scrollbar-width: thin; }
.hty-ep { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; padding: 12px 14px; border-radius: 6px; color: var(--ink); text-decoration: none; transition: background-color .2s, color .2s; }
.hty-ep:hover { background: var(--newsprint); }
.hty-ep[aria-current="true"] { background: var(--blue); color: var(--cream); }
.hty-ep:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.hty-list.has-sel { position: relative; }
.hty-list.has-sel li { position: relative; z-index: 1; }
.hty-sel { position: absolute; left: 12px; right: 12px; top: 0; z-index: 0; border-radius: 6px; background: var(--blue); pointer-events: none;
  transition: translate .5s var(--ease-out), height .5s var(--ease-out); }
.hty-sel[hidden] { display: none; }
.hty-list.has-sel .hty-ep[aria-current="true"] { background: transparent; }
.hty-list.has-sel .hty-ep { transition: background-color .2s, color .35s var(--ease-out); }
.hty-list.has-sel .hty-ep[aria-current="true"]:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { .hty-sel { transition: none; } }
.hty-ep .n { grid-row: span 2; font: 900 24px/1 var(--cond); font-stretch: 65%; }
.hty-ep .t { font-weight: 800; font-size: 17px; line-height: 1.2; }
.hty-ep .k { grid-column: 2; font: italic 500 16px/1.3 var(--serif); }
.hty-ep .d { grid-row: 1; grid-column: 3; font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .hty-card { grid-template-columns: 128px minmax(0, 1fr); }
  .hty-v { height: auto; width: 128px; align-self: start; }
  .hty-big { width: 46px; height: 46px; } .hty-big svg { width: 18px; height: 18px; }
  .hty-lab { font-size: 14px; padding: 0 6px 4px; }
  .hty-side { display: contents; }
  .hty-now { grid-column: 2; border-bottom: 0; padding: 14px 14px 10px; }
  .hty-now h2 { font-size: 23px; }
  .hty-list { grid-column: 1 / -1; border-top: 2px solid var(--ink); max-height: none; overflow: visible; }
  .hty-card.playing { grid-template-columns: minmax(0, 1fr); }
  .hty-card.playing .hty-v { width: min(100%, 360px); justify-self: center; }
  .hty-card.playing .hty-now { grid-column: 1; }
}
/* Fit the archive to its contents; one month uses the full sheet rather than one of three empty columns. */
.sec.hty-more { padding-top: clamp(8px, 1vw, 16px); }
.hty-contents { padding: clamp(22px, 2.5vw, 36px) clamp(20px, 3vw, 44px); }
.hty-contents h2 { font: 900 clamp(26px, 2.6vw, 36px)/1 var(--sans); letter-spacing: -.035em; }
.hty-months { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px clamp(20px, 3vw, 44px); align-items: start; }
.hty-month { min-width: 0; }
.hty-month:only-child { grid-column: 1 / -1; }
.hty-month:only-child ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 24px; }
.hty-month h3 { padding: 6px 14px 8px; font: 900 15px/1 var(--cond); font-stretch: 75%; letter-spacing: .02em; color: var(--orange-dark); border-bottom: 2px solid var(--ink); }
.hty-month ol { list-style: none; }
.hty-month .hty-ep { padding: 9px 14px; }
.hty-month .hty-ep .t { font-size: 16px; }
.hty-month .hty-ep .k { font-size: 15px; }
.hty-find { margin-top: 14px; display: grid; gap: 6px; max-width: 420px; }
.hty-find label { font-size: 14px; font-weight: 800; }
.hty-find input { min-height: 48px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: 600 16px var(--sans); color: var(--ink); }
.hty-find input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hty-none { font-weight: 700; }

/* Running text that sits straight on the orange: pressed cream, never black.
   Lighter weight and a faint burnt edge below, as if pressed into the paper. */
.page-lede, .sec-lede, .comp-copy p, .pullline, #year-h + div > p, .ig-loading, .gnav-hint, .gg-count {
  color: var(--cream); font-weight: 500; text-shadow: 0 1px 0 rgb(120 30 6 / .45); }
.gg-rule-h, .gt-more-h, .gt-eye, .see-all, .pause-btn .lbl, .comp-note.ink, .gnav-head .textlink, .gg-countrow .textlink {
  color: var(--cream); text-shadow: 0 1px 0 rgb(120 30 6 / .45); }
:is(.page-lede, .sec-lede, .gnav-head, .gg-countrow) .textlink { color: var(--cream); text-decoration-color: currentColor; }

/* page transitions, no dip: the old page holds still and solid while the new one fades in over it.
   Fading both at once let the orange page colour show through mid-way, which read as a flash going into a cream Gist page. */
html { background: var(--orange); }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-in .34s var(--ease-out) both; }
@media (max-width: 900px) { ::view-transition-new(root) { animation-duration: .26s; } }
/* the reel waits on paper, not black: a slow poster on a phone connection used to show a black block first */
.thumb.player .pic { background: var(--newsprint-deep); }

/* phones: "I didn't know that" sits under the reel again (the laptop hero keeps it out to balance the player) */
@media (max-width: 900px) { .article .lead .reel-acts { display: flex; } }

/* phones: the corner bubble is a touch smaller and tucks away while the reader scrolls down, back on any scroll up (site.js sets .tuck) */
.cb { transition: opacity .28s var(--ease-out), transform .32s var(--ease-out); }
.cb.tuck:not(.open) { opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none; }
.cb.tuck:not(.open) > * { pointer-events: none; }
@media (max-width: 600px) { .cb-btn { width: 50px; height: 50px; } }

/* ---------- phones: the header fades in and settles; it never slides in from off screen ----------
   Only transform and opacity move (no layout). The status-bar strip is fixed and always orange, so no page text
   ever shows above the bar, even while the header itself is fading. */
@media (max-width: 900px) {
  :root { --sat: env(safe-area-inset-top, 0px); }
  html::before { content: ""; position: fixed; z-index: 59; top: 0; left: 0; right: 0; height: var(--sat); background: var(--orange); pointer-events: none; }
  .top { top: 0; transition: transform .45s var(--ease-out), opacity .35s var(--ease-out), visibility 0s, background-color .3s, box-shadow .3s; will-change: transform, opacity; }
  .top.hide:not(.menu-open) { transform: translate3d(0, -14px, 0); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s var(--ease-out), opacity .22s linear, visibility 0s .3s, background-color .3s, box-shadow .3s; }
  .top.scrolled::before { bottom: calc(100% - 1px); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .top, .top.hide:not(.menu-open) { transition: opacity .01s, visibility 0s; transform: none; }
}

/* Approved newsletter invitation: a quiet paper slip, with a clear way back. */
.nl-box.invite{width:min(690px,calc(100% - 32px));max-height:calc(100dvh - 32px);outline:none}
.invite .slip{padding:34px clamp(24px,5vw,54px) 28px;border-left:5px solid var(--blue);border-radius:3px;max-height:calc(100dvh - 32px)}
.invite .slip::after{opacity:.07}
.invite .slip-head{border:0;margin-right:30px;padding:0;gap:18px;align-items:center}
.invite .slip-head img{width:70px;height:auto}
.invite .slip-head span{font:800 12px/1.4 var(--sans);letter-spacing:.08em;color:var(--ink)}
.invite .slip-head small{display:block;font:650 11px/1.4 var(--sans);letter-spacing:.035em;color:#6f6553;margin-top:4px}
.invite .slip h2{font-size:clamp(38px,6vw,59px);line-height:.98;letter-spacing:-.045em;margin:29px 0 20px;max-width:12ch}
.invite .slip-lede{font:400 18px/1.5 var(--sans);color:var(--ink);max-width:43ch;margin:0 0 24px}
.invite .slip-lede strong{font-weight:750}
.invite .slipform{margin-top:0}
.invite .field.ruled{display:block;border:0;background:none;box-shadow:none}
.invite .field.ruled input{display:block;width:100%;border:1.5px solid #7c7465;border-radius:2px;background:rgb(255 255 255 / .32);padding:12px 14px;font-size:17px;min-height:50px}
.invite .field.ruled:focus-within{box-shadow:none}
.invite .field.ruled input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.invite .field.ruled .go{display:grid;width:100%;min-height:52px;margin:13px 0 0;border-radius:999px;font-size:17px;box-shadow:0 2px 0 rgb(106 33 10 / .18)}
.invite .go>.t{display:flex;align-items:center;justify-content:center;gap:20px}
.invite .go>.t svg{width:22px;height:22px}
.invite .small-print{font-size:12px;line-height:1.5;color:#61594b;text-align:center;margin-top:11px}
.slip-back{display:block;margin:17px auto 0;background:none;border:0;border-bottom:1px solid rgb(18 19 17 / .3);min-height:44px;padding:6px 0;font:400 14px/1.2 var(--sans);color:#4a4840}
.invite .slip-x{right:12px;top:12px}
.invite .ink-stamp{display:none}
.invite .slipform.success .fieldwrap{transform:none}
@media(max-width:500px){.invite .slip{padding-top:27px;padding-bottom:23px}.invite .slip-head{gap:13px}.invite .slip-head img{width:56px}.invite .slip h2{margin-top:24px}.invite .slip-lede{font-size:16px;margin-bottom:21px}.invite .small-print{font-size:11px}.invite .field.ruled .go{font-size:16px}}

/* Mobile navigation is a viewport layer, independent of the animated masthead.
   Safari samples the foremost fixed layer for the colour behind its status bar.
   Keep the transparent page grain below the opaque header, and never fade or
   transform that colour source. The root safe-area pseudo-element is redundant. */
@media(max-width:900px){
  :root{--mobile-masthead:calc(68px + env(safe-area-inset-top,0px))}
  .js body{padding-top:var(--mobile-masthead)}
  .js body::after{z-index:58}
  html.js::before{content:none}
  .js header.top{position:fixed;inset:0 0 auto;top:0;width:100%;background:var(--orange);backdrop-filter:none;-webkit-backdrop-filter:none;will-change:auto;transform:none;opacity:1;transition:none}
  .js header.top.hide:not(.menu-open){transform:none;opacity:1;visibility:hidden;pointer-events:none;transition:none}
  .js header.top.scrolled::before{content:none}
  .js .drawer{z-index:100;height:100vh;height:100dvh;max-height:none;inset:0;visibility:hidden}
  .js.menu-open .drawer{visibility:visible}
  .js.menu-open header.top{z-index:101;background:var(--cream);transform:none;opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
  .js.menu-open header.top::before{background:var(--cream)}
  html.menu-open{overflow:hidden}
  html.menu-open::before{background:var(--cream)}
  .menu-open .cb{opacity:0;pointer-events:none}
}