/* Redesign v3. Not deployed.
   Rules from RESEARCH-2-craft.md: two typefaces, three text sizes plus one display size,
   narrow gutters, no shadows, no rounded screenshots, a neutral page with one green section. */
/* Both typefaces are served from this folder, so the page never waits on another company's server. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Quiapo"; src: url("fonts/quiapo.woff2") format("woff2"), url("fonts/quiapo.otf") format("opentype"); font-display: swap; }

:root {
  --page: #f3f0e9;
  --ink: #111210;
  --mute: #6d6b63;
  --line: rgba(17, 18, 16, .16);
  --green: #0a3326;
  --gold: #ffd23a;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --hand: "Quiapo", "Archivo", sans-serif;

  --s: 13px;                              /* small */
  --m: clamp(16px, 1.32vw, 20px);         /* reading and interface */
  --t: clamp(21px, 2.05vw, 31px);         /* card titles */
  --l: clamp(30px, 3.7vw, 56px);          /* headings */
  --xl: clamp(40px, 7.4vw, 116px);        /* one display size */

  --g: clamp(14px, 1.5vw, 22px);          /* gutter */
  --out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--m)/1.5 var(--sans); letter-spacing: -.004em; -webkit-font-smoothing: antialiased; font-kerning: normal; hanging-punctuation: first; }
p { text-wrap: pretty; }
img, svg { display: block; }
img { width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.small { font-size: var(--s); line-height: 1.45; letter-spacing: .002em; color: var(--mute); }
.body { max-width: 31em; }
.u, .go, nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .25s var(--out); }
.u:hover, .go:hover, nav a:hover { background-size: 0 1px; background-position: 100% 100%; }
nav a { background-size: 0 1px; } nav a:hover { background-size: 100% 1px; background-position: 0 100%; }
h2, h3 { font: 500 var(--l)/1.04 var(--sans); letter-spacing: -.038em; text-wrap: balance; }
.pack-art .t-s { font: 600 7px Archivo; }
.pack-art text { font-family: Archivo, sans-serif; }

/* ---------- About page ----------
   One long page of short named sections on a four-column rhythm (columns 1-3, 4-6, 7-9, 10-12).
   Lists are ruled, text stays narrow, and pictures are small and many rather than one big one. */
.about-more { margin-top: 1.2em; }
.ab-hero { padding: 12vh var(--g) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: start; }
.ab-index { grid-column: 1 / 4; grid-row: 1 / 3; padding-top: .9em; }
.ab-index ul { margin-top: 14px; display: grid; gap: 3px; } .ab-index a { color: var(--ink); }
.ab-index a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-hero h1 { grid-column: 4 / 10; grid-row: 1; max-width: 11em; }
.ab .hand { color: var(--green); }
.ab-intro { grid-column: 4 / 9; grid-row: 2; margin-top: clamp(22px, 2.1vw, 34px); max-width: 34em; }
.ab-intro p + p { margin-top: .8em; }
/* who I am, what I'm good at, and what to consider me for: the three things a recruiter is looking for, as a ruled list */
.ab-lead { font-size: var(--m); }
.ab-fit { margin-top: clamp(22px, 2.4vw, 36px); border-top: 1px solid var(--line); }
.ab-fit div { display: grid; grid-template-columns: 9.5em 1fr; column-gap: var(--g); padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.ab-fit dt { font-size: var(--s); letter-spacing: 0; color: var(--mute); padding-top: .25em; } .ab-fit dd { line-height: 1.42; } .ab-intro .small { margin-top: 1.6em; } .ab-intro .small a { color: var(--ink); }
.ab-portrait { grid-column: 10 / -1; grid-row: 1 / 3; margin: 0; }
.ab-portrait img, .ab-strip img { display: block; width: 100%; height: auto; }
.ab-sec { padding: 22vh var(--g) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); scroll-margin-top: -10vh; }
.ab-sec > .small { grid-column: 1 / 4; padding-top: .95em; }
.ab-sec > h2 { grid-column: 4 / 12; max-width: 14em; }
.ab-beliefs { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ab-beliefs li { font-size: var(--t); line-height: 1.16; letter-spacing: -.028em; font-weight: 500; padding: .62em 0 .66em; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(9, 1fr); column-gap: var(--g); }
.ab-beliefs li span { color: var(--mute); grid-column: 1 / 4; } .ab-beliefs li em { grid-column: 4 / -1; font-style: normal; max-width: 22em; }
.ab-beliefs .ab-last { border-bottom: 0; padding-top: .9em; } .ab-beliefs .ab-last .hand { grid-column: 4 / -1; font-size: 1.5em; line-height: .9; }
.ab-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); column-gap: var(--g); margin-top: clamp(48px, 9vh, 96px); list-style: none; padding: 0; }
.ab-strip img { aspect-ratio: 4 / 5; object-fit: cover; } .ab-strip .small { display: block; margin-top: 8px; }
.ab-roots { grid-column: 4 / -1; margin-top: clamp(40px, 7vh, 72px); border-top: 1px solid var(--line); }
.ab-roots div { display: grid; grid-template-columns: repeat(9, 1fr); column-gap: var(--g); padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.ab-roots dt { grid-column: 1 / 4; font-weight: 500; } .ab-roots dd { grid-column: 4 / 9; max-width: 30em; }
.ab-how { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--g); list-style: none; margin: clamp(48px, 9vh, 96px) 0 0; padding: 0; }
.ab-how a { display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--line); padding-top: 16px; }
.ab-pack { display: flex; align-items: flex-end; height: clamp(90px, 10vw, 150px); margin-bottom: 18px; transition: transform .4s var(--out); transform-origin: 30% 100%; }
.ab-pack .pack-art { width: auto; height: min(100%, calc(11vw / var(--ar))); }
.ab-how a:hover .ab-pack { transform: rotate(-4deg) translateY(-4px); }
.ab-how b { font-size: var(--t); font-weight: 500; letter-spacing: -.028em; line-height: 1.1; }
.ab-p { max-width: 17em; line-height: 1.4; } .ab-ev { margin-top: 10px; max-width: 22em; } .ab-ev u { color: var(--ink); text-underline-offset: 3px; }
.ab-lists { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g); margin-top: clamp(40px, 7vh, 72px); }
.ab-list ul { margin-top: 10px; border-top: 1px solid var(--line); } .ab-list li { padding: 9px 0 10px; border-bottom: 1px solid var(--line); line-height: 1.3; }
.ab-list:last-child li { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.ab-off { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g); list-style: none; margin: 0; padding: 0; }
.ab-off li { display: grid; gap: 2px; align-content: start; } .ab-off b { font-weight: 500; margin-top: 10px; line-height: 1.3; }
.ab-tile { display: block; background: #e7e0cf; aspect-ratio: 1; } .ab-tile .draw { display: block; width: 100%; height: 100%; }
.ab-off li:nth-child(even) .ab-tile { background: #b9c9b0; }
.ab-say { grid-column: 4 / -1; margin-top: clamp(56px, 11vh, 120px); display: grid; gap: 14px; }
.ab-say .hand { font-size: clamp(44px, 8.4vw, 132px); line-height: .86; }
.ab-refs { grid-column: 4 / -1; border-top: 1px solid var(--line); }
.ab-refs li { display: grid; grid-template-columns: repeat(9, 1fr); column-gap: var(--g); padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ab-refs b { font-weight: 500; grid-column: 1 / 4; } .ab-refs span { grid-column: 4 / -1; font-size: var(--s); letter-spacing: 0; color: var(--mute); }
.ab-note .cs-text { margin-top: 0; }
.ab-sign { margin-top: 1.4em !important; display: grid; gap: 10px; } .ab-sign .hand { font-size: clamp(40px, 5vw, 76px); line-height: .9; }
.ab-foot .end { margin-top: 12vh; }
@media (max-width: 820px) {
  .ab-hero, .ab-sec { display: block; }
  .ab-index ul { grid-template-columns: 1fr 1fr; margin-bottom: 8vh; } .ab-portrait { margin-top: 32px; }
  .ab-beliefs, .ab-roots, .ab-refs, .ab-lists, .ab-off, .ab-how { margin-top: 20px; }
  .ab-beliefs li, .ab-roots div, .ab-refs li { display: block; } .ab-beliefs li span { display: block; font-size: var(--s); letter-spacing: 0; font-weight: 400; margin-bottom: 4px; }
  .ab-roots dd, .ab-refs span { display: block; margin-top: 4px; }
  .ab-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 28px calc(var(--g) * -1) 0; padding: 0 var(--g); gap: 10px; scrollbar-width: none; }
  .ab-strip li { flex: 0 0 46vw; scroll-snap-align: start; }
  .ab-how, .ab-lists { grid-template-columns: 1fr; row-gap: 36px; } .ab-pack { height: 110px; } .ab-pack .pack-art { height: min(100%, calc(40vw / var(--ar))); }
  .ab-off { grid-template-columns: 1fr 1fr; row-gap: 24px; }
}

/* ---------- Getting around ----------
   Three places only (Work, About, Contact), the same on every page. A slim bar slides in when you scroll back
   up, so the way out is never more than a small movement away, and it stays out of the way while you read.
   On a case study it also names the project and offers the previous and next one. */
.skip { position: absolute; left: var(--g); top: -60px; z-index: 100; background: var(--ink); color: var(--page); padding: 10px 14px; font-size: var(--s); }
.skip:focus { top: var(--g); }
[aria-current="page"] { background-size: 100% 1px !important; }
.dock { position: fixed; inset: 0 0 auto 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--g); padding: 11px var(--g); background: var(--page); border-bottom: 1px solid var(--line); font-size: var(--s); letter-spacing: 0; line-height: 1.3; transform: translateY(-101%); transition: transform .32s var(--out); }
.dock.is-on { transform: none; }
.dock a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 1px; transition: background-size .25s var(--out); }
.dock a:hover { background-size: 100% 1px; }
.dock-name { font-weight: 500; width: fit-content; }
.dock-proj { display: flex; gap: 18px; align-items: baseline; color: var(--mute); } .dock-proj b { font-weight: 500; color: var(--ink); }
.dock-nav { justify-self: end; color: var(--mute); grid-column: 3; } .dock-nav a { color: var(--ink); }
.cs-bar { z-index: 70; }
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.top { line-height: 1.32; position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--g); padding: var(--g); align-items: start; }
.top .who { max-width: 19em; }
.top > :last-child { justify-self: end; }
.top nav { color: var(--mute); } .top nav a { color: var(--ink); }

.lineup { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 6vw; padding: 14vh 8vw 30vh; overflow-x: auto; scroll-snap-type: x mandatory; }
.item { flex: none; scroll-snap-align: center; }
.item a { display: block; position: relative; -webkit-user-drag: none; user-select: none; }
.pack { display: block; }
.pack-art { height: calc(var(--ph) * 1svh); width: auto; overflow: visible; }
.item-cap { display: block; font-size: var(--s); line-height: 1.3; letter-spacing: 0; color: var(--mute); margin-bottom: 12px; white-space: nowrap; }
.item-cap b { font-weight: 500; color: var(--ink); }

/* With JS the shelf becomes a draggable row; positions are set from site.js. */
.lineup.is-live { display: block; padding: 0; overflow: hidden; cursor: grab; touch-action: pan-y; }
.lineup.is-live.is-drag { cursor: grabbing; }
.lineup.is-live .item { position: absolute; left: 50%; top: 45%; will-change: transform; pointer-events: none; }
.lineup.is-live .item a, .lineup.is-live .pack-art { pointer-events: none; }
.lineup.is-live .pack-art > g { pointer-events: visiblePainted; cursor: pointer; }
.lineup.is-live .pack { transition: transform .28s var(--out); }
.lineup.is-live .item:hover .pack { transform: translateY(-1.4svh) rotate(-1.5deg); }
.lineup.is-live.is-drag .item:hover .pack { transform: none; }
.lineup.is-live .item a:focus-visible { outline: 0; } .lineup.is-live .item a:focus-visible .pack { outline: 2px solid var(--ink); outline-offset: 6px; }
.lineup.is-live .item-cap { position: absolute; left: 0; bottom: 100%; transition: opacity .3s; }
.lineup.is-live .item:not(.is-near) .item-cap { opacity: 0; }

.hint, .place { position: absolute; z-index: 4; bottom: calc(var(--name-h, 22vw) + 6px); font-size: var(--s); color: var(--mute); letter-spacing: 0; }
/* the hint stays in a narrow column so the pack at the side never sits on top of it */
.hint { left: var(--g); max-width: 11.5em; line-height: 1.4; } .hint span { display: block; margin-top: 4px; } .place { right: var(--g); } .place b { font-weight: 400; color: var(--ink); }
.hint button { color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.hint button:hover { background-size: 0 1px; }

.name { position: absolute; z-index: 1; left: var(--g); right: var(--g); bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; width: max-content; font-size: 15vw; line-height: .8; white-space: nowrap; user-select: none; pointer-events: none; padding-bottom: .04em; }
.name span { display: block; overflow: hidden; padding-top: .06em; }
.name i { display: block; font-style: normal; }
.n1 { font: 900 1em/.8 var(--sans); font-stretch: 62%; letter-spacing: -.03em; text-transform: uppercase; margin-right: .12em; }
.n2 { font: 400 1.19em/.8 var(--hand); letter-spacing: -.005em; color: var(--green); transform: translateY(.045em); }

/* ---------- Work ----------
   The project list is one group, as on the reference home pages: the first project full width, the rest in
   equal pairs, one gutter between plates. Each card has the same parts in the same places. */
.work { padding: 22vh var(--g) 0; }
.head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.head .small { grid-column: 1 / 4; padding-top: .95em; }
.head h2 { grid-column: 4 / 12; max-width: 13em; }
.cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); row-gap: clamp(44px, 6.5vh, 72px); margin-top: clamp(48px, 9vh, 96px); }
.card.full { grid-column: 1 / -1; }
.card-a { display: block; }
.plate { display: block; margin: 0; }
.plate-in { display: block; padding: clamp(18px, 5.2vw, 84px); overflow: hidden; }
.card:not(.full) .plate-in { padding: clamp(14px, 3vw, 48px); }
.t-green .plate-in { background: var(--green); } .t-cream .plate-in { background: #e7e0cf; } .t-sage .plate-in { background: #b9c9b0; }
.plate img, .plate video { display: block; width: 100%; height: auto; }
.card .plate img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; transition: transform 1s var(--out); }
.card-a:hover .plate img { transform: scale(1.018); }
.card-meta { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(14px, 1.6vw, 24px); align-items: start; margin-top: 16px; }
/* every pack sits in the same square, whatever its shape, so the text beside it always starts at the same place */
.card-pack { display: flex; justify-content: center; width: clamp(52px, 4.8vw, 72px); height: clamp(52px, 4.8vw, 72px); transition: transform .4s var(--out); }
.card-pack .pack-art { height: 100%; width: auto; max-width: 100%; }
.card-a:hover .card-pack { transform: rotate(-6deg) translateY(-3px); }
.card-txt { display: block; padding-top: 2px; }
.card-txt .small { display: block; }
.card-t { display: block; font: 500 var(--t)/1.12 var(--sans); letter-spacing: -.03em; margin: 6px 0 8px; max-width: 19em; text-wrap: balance; }
.card-t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--out); width: fit-content; }
.card-a:hover .card-t { background-size: 100% 1px; }
.card.full .card-t { font-size: var(--l); line-height: 1.04; letter-spacing: -.038em; max-width: 15em; margin: 8px 0 12px; }
.card.full .card-pack { width: clamp(64px, 6.4vw, 96px); height: clamp(64px, 6.4vw, 96px); }

/* ---------- About: the one colour section ----------
   Laid out the way the reference About pages are: the picture and the text are one balanced pair that start
   and end together, the picture is large, the heading is short and sits with the text, and the secondary
   facts come underneath as their own row. */
.about { position: relative; margin-top: 22vh; background: var(--green); color: var(--page); padding: 18vh var(--g) 16vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: center; }
/* the green block ends in a crimped seal, like the top of the snack packets on the shelf, instead of a flat cut */
.about::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 11px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpath d='M0 0h22L11 11z'/%3E%3C/svg%3E") 0 0 / 22px 11px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpath d='M0 0h22L11 11z'/%3E%3C/svg%3E") 0 0 / 22px 11px repeat-x; }
.about-text { grid-column: 8 / -1; grid-row: 1; max-width: 31em; }
.about-text .small { color: rgba(243, 240, 233, .62); margin-bottom: 14px; }
.about h2 { max-width: 11em; }
.hand { font: 400 1.22em/.8 var(--hand); letter-spacing: 0; color: var(--gold); }
.about-text h2 + p { margin-top: clamp(22px, 2.1vw, 34px); }
.about-text p + p { margin-top: .8em; }
.rows { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g); margin-top: clamp(56px, 11vh, 120px); border-top: 1px solid rgba(243, 240, 233, .22); }
.rows div { padding: 14px 0 0; }
.rows dt { font-size: var(--s); letter-spacing: 0; opacity: .62; margin-bottom: 6px; }
.rows dd { font-size: var(--m); line-height: 1.4; max-width: 17em; }

/* The box TV. The set is a drawing; the glass is HTML laid over it. */
.tv { grid-column: 1 / 7; grid-row: 1; margin: 0; perspective: 1400px; }
.tv-set { position: relative; aspect-ratio: 520 / 470; transform: rotateY(-7deg) rotateX(2deg); }
.tv-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tv-screen { position: absolute; overflow: hidden; background: #0a1422; border-radius: 9% / 12%; isolation: isolate; }
.tv-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(1.08) contrast(1.04); }
.tv-screen img.on { opacity: 1; }
/* glass: scan lines, a soft reflection and darkened corners, so the picture sits behind curved glass */
.tv-screen::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 26% 12%, rgba(255, 255, 255, .26), transparent 46%), radial-gradient(90% 90% at 50% 50%, transparent 58%, rgba(0, 0, 0, .5) 100%); }
.tv-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; image-rendering: pixelated; }
.tv-screen.is-static .tv-static { opacity: 1; }
.tv-screen.is-static img.on { transform: translateY(var(--roll, 0)) scaleY(1.04); }
.tv-ch { position: absolute; z-index: 4; top: 7%; right: 8%; font: 400 clamp(12px, 1.15vw, 17px)/1 var(--hand); letter-spacing: .06em; color: #7dff9b; text-shadow: 0 0 6px rgba(125, 255, 155, .7); opacity: 0; transition: opacity .5s linear 1.6s; }
.tv-screen.show-ch .tv-ch { opacity: 1; transition: none; }
.tv-knob { position: absolute; border-radius: 50%; cursor: pointer; }
.tv-knob:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tv-knob-mark { transform-box: fill-box; transform-origin: 50% calc(100% + 4px); transform: rotate(calc(var(--turn, 0) * 45deg)); transition: transform .35s var(--out); }
.tv figcaption { margin: 4px 14% 0 12%; color: rgba(243, 240, 233, .62); display: flex; justify-content: space-between; gap: 12px; }
.tv-pause { color: var(--page); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; opacity: .8; }
.tv-pause:hover { opacity: 1; }
/* the TV wipes open like every other picture; once open its clip is let out, so its shadow and knobs are never cut */
.js .tv[data-wipe].in { clip-path: inset(-60px); transform: none; }
/* ---------- References ---------- */
.refs { padding: 20vh var(--g) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.refs .small { grid-column: 1 / 4; padding-top: .35em; }
.refs ul { grid-column: 4 / -1; border-top: 1px solid var(--line); }
.refs li { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.refs b { font-weight: 500; }
.refs span { font-size: var(--s); letter-spacing: 0; color: var(--mute); }

/* ---------- Contact ---------- */
.foot { padding: clamp(104px, 14vh, 150px) var(--g) var(--g); overflow: hidden; }
.mail { display: block; overflow: hidden; margin-top: 14px; font: 500 clamp(22px, 6.4vw, 116px)/1 var(--sans); letter-spacing: -.055em; }
.mail span { display: block; padding-bottom: .08em; background: linear-gradient(currentColor, currentColor) 0 96% / 0 .04em no-repeat; transition: background-size .5s var(--out); }
.mail:hover span { background-size: 100% .04em; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--g); margin-top: 16vh; }
.receipt { width: 250px; background: #fff; font-size: var(--s); line-height: 1.75; letter-spacing: 0; padding: 20px 18px 30px; transform: rotate(-3deg); transform-origin: 0 100%; border: 1px solid var(--line); border-bottom: 0;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 100% repeat-x; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 100% repeat-x; }
.receipt p { display: flex; justify-content: space-between; gap: 10px; }
.receipt .r-h { font: 400 24px/1.2 var(--hand); color: var(--green); border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.receipt .r-t { font-weight: 600; border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.thanks { font: 400 clamp(64px, 15.5vw, 250px)/.78 var(--hand); color: var(--green); text-align: right; white-space: nowrap; }
.thanks small { display: block; font: 400 var(--s)/1.4 var(--sans); color: var(--mute); margin-top: 14px; }
.end { display: flex; justify-content: space-between; gap: var(--g); margin-top: 10vh; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- Tearing a pack open on the way to its page ---------- */
.tear { position: fixed; z-index: 95; pointer-events: none; }
.tear .pack-art { width: 100%; height: 100%; }

/* ---------- Case study pages ---------- */
.soon { display: inline-block; margin-top: 26px; }
.cs h1 { font: 500 var(--l)/1.04 var(--sans); letter-spacing: -.038em; margin: 0; text-wrap: balance; }
.cs-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 20; }
.cs-bar i { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; }
.cs-top { position: static; }
.cs-hero { padding: 12vh var(--g) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.cs-hero > .cs-id { grid-column: 1 / 4; grid-row: 1 / 3; padding-top: .9em; }
.cs-hero h1 { grid-column: 4 / 10; grid-row: 1; }
.cs-lede { grid-column: 4 / 9; grid-row: 2; margin-top: clamp(22px, 2.1vw, 34px); max-width: 28em; }
/* --ar is each pack's width divided by its height, so any shape can be fitted inside the same box */
.cs-pack { grid-column: 10 / -1; grid-row: 1 / 4; justify-self: end; transform: rotate(8deg); margin: -1vh 3vw 0 0; }
.cs-pack .pack-art { width: auto; height: min(30vh, calc(13vw / var(--ar))); }
.cs main, body.cs { overflow-x: clip; }
.cs-results { grid-column: 4 / 11; grid-row: 3; display: flex; gap: clamp(28px, 5vw, 84px); align-items: flex-end; margin-top: 9vh; }
.cs-results b { display: block; font: 400 clamp(54px, 7.4vw, 116px)/.8 var(--hand); color: var(--green); white-space: nowrap; }
.cs-results li:nth-child(2) b { font-size: clamp(40px, 5.2vw, 82px); }
.cs-results li:nth-child(3) b { font-size: clamp(34px, 4.2vw, 66px); }
.cs-results span { display: block; font-size: var(--s); letter-spacing: 0; color: var(--mute); margin-top: 10px; max-width: 13em; }
.cs-hero .cs-first { grid-column: 1 / -1; margin-top: clamp(56px, 10vh, 112px); }
.cs-built { grid-column: 4 / -1; margin-top: 14px; }
.cs-note { grid-column: 4 / 10; margin-top: 8px; }

.cs-sec .plate img, .plate img { outline: 0; }
.zoom { display: block; width: 100%; cursor: zoom-in; overflow: hidden; }
.vid { position: relative; }
.vid-bs { position: absolute; right: 0; top: 100%; margin-top: 7px; display: flex; gap: 16px; }
.vid-b, .vid-f { position: relative; font-size: var(--s); line-height: 1.2; letter-spacing: 0; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; opacity: .7; }
.vid-b:hover, .vid-b:focus-visible, .vid-f:hover, .vid-f:focus-visible { opacity: 1; }
.t-green .vid-b, .t-green .vid-f { color: var(--page); }
.no-video .vid-bs, .vid-f[hidden] { display: none; }
/* If a picture could not be fetched after several tries, the frame says what it shows instead of sitting empty. */
picture { display: block; }
/* ---------- States ----------
   Loading: a picture's place is held by a soft blurred copy of itself, a recording's button says Loading.
   Error: a short plain sentence and a way to try again. Success: said next to the thing that was pressed.
   From RESEARCH-2-craft.md section 16. */
picture.ph { background-size: cover; background-position: center; }
picture.ph.is-in { background-image: none !important; }
/* a picture fades in over its blurred copy when it arrives; never applies unless media.js is running */
.fade-media picture.ph > img { transition: opacity .7s cubic-bezier(.3, 0, .2, 1); }
.fade-media picture.ph > img:not(.is-in) { opacity: 0; }
.tv-screen picture.ph { background: none !important; } .fade-media .tv-screen picture.ph > img { transition: none; }
img.is-missing { background: rgba(17, 18, 16, .08) !important; color: transparent; }
.media-failed { position: relative; }
.media-failed > .media-msg { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30em, 80%); background: var(--page); color: var(--ink); padding: 14px 16px; text-align: center; margin: 0; }
.media-msg { margin-top: 10px; color: var(--ink); } .media-msg button { margin-left: 4px; }
.vid.is-loading .vid-b { opacity: 1; }
.vid.is-loading .vid-b::after { content: ""; display: inline-block; width: 1.1em; text-align: left; animation: dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.lightbox.is-loading .lb-hint::after { content: "..."; }
.copy-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; min-height: 1.5em; } .copy { color: var(--ink); }
.copy.is-done { background-size: 0 1px; } .copy.is-done::after { content: " \2713"; color: var(--green); }
.copy-msg { color: var(--ink); }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; } .links a { color: var(--ink); }
.cs-foot .links { margin: 0 0 6vh; }
.top-r { display: flex; gap: 18px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.net-note { position: fixed; z-index: 90; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 32px); margin: 0; background: var(--ink); color: var(--page); font-size: var(--s); line-height: 1.4; letter-spacing: 0; padding: 10px 14px; }
.net-note[hidden] { display: none; }
::selection { background: var(--green); color: var(--page); }
html { scroll-padding-top: 72px; }
.ab-go { display: flex; gap: 20px; } .ab-index a { display: inline-block; padding: 3px 0; }
/* Page not found */
.nf-main { padding: 12vh var(--g) 16vh; }
.nf-h { margin: 18px 0 0; } .nf-h .hand { font-size: clamp(64px, 15vw, 230px); line-height: .82; color: var(--green); display: block; }
.nf-p { max-width: 30em; margin-top: 28px; }
.nf-packs { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 56px); align-items: flex-end; margin-top: 8vh; }
.nf-packs a { display: grid; gap: 10px; justify-items: start; } .nf-packs .shelf-p .pack-art { height: min(clamp(90px, 12vw, 170px), calc(16vw / var(--ar))); }
.nf-links { display: flex; gap: 22px; margin-top: 7vh; }
.zoom img { transition: transform 1.1s var(--out); }
.zoom:hover img { transform: scale(1.012); }
.cs-quote { margin: 22vh var(--g) 0; padding: 0; }
.cs-quote p { font: 400 clamp(44px, 9.4vw, 150px)/.86 var(--hand); color: var(--green); letter-spacing: 0; max-width: 11em; }
/* The viewer: the picture first fits the screen. A tap or click zooms to full detail, and it can then be dragged or scrolled around. */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(17, 18, 16, .96); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.lightbox[hidden] { display: none; }
.lb-stage { min-width: 100%; min-height: 100%; width: max-content; display: grid; place-items: center; padding: max(3vmin, env(safe-area-inset-top)) 3vmin; }
.lightbox img { display: block; width: auto; height: auto; max-width: calc(100vw - 6vmin); max-height: calc(100dvh - 6vmin); cursor: zoom-in; }
.lightbox.is-zoomed img { max-width: none; max-height: none; width: var(--zw, 200vw); cursor: zoom-out; }
.lb-x { position: fixed; z-index: 2; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); min-width: 44px; min-height: 44px; padding: 0 14px; background: var(--page); color: var(--ink); font-size: var(--s); letter-spacing: 0; }
.lb-hint { position: fixed; z-index: 2; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--page); font-size: var(--s); letter-spacing: 0; padding: 8px 12px; white-space: nowrap; pointer-events: none; transition: opacity .4s linear; }
.lightbox.is-zoomed .lb-hint { opacity: 0; }

/* Layout rules, from measuring the reference case studies:
   - label in columns 1 to 3, heading and its text in one column starting at column 4
   - a heading sits close to its own text; the big gap goes above the heading
   - media comes in three placements only: full width, aligned to the text column, or an equal pair
   - media that belongs together is separated by one gutter; a new group gets a large gap */
.cs-sec { padding: 22vh var(--g) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.cs-sec > .small { grid-column: 1 / 4; padding-top: .95em; }
.cs-sec > h2 { grid-column: 4 / 12; max-width: 14em; }
.cs-text, .cs-prose { font-size: var(--m); line-height: 1.5; }
.cs-text { grid-column: 4 / 10; max-width: 31em; margin-top: clamp(22px, 2.1vw, 34px); }
.cs-text p + p, .cs-prose p + p { margin-top: .8em; }
.cs-sec figure { margin: 0; }
.cs-sec figcaption { margin-top: 10px; max-width: 34em; }
.draw { width: 100%; height: auto; overflow: visible; }
.cs-sec .cs-full, .cs-sec .cs-wide, .cs-sec .cs-pair { margin-top: clamp(48px, 9vh, 96px); }
.cs-full { grid-column: 1 / -1; }
.cs-wide { grid-column: 4 / -1; }
.cs-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-items: start; }
/* Only media with the same outer edges may sit one gutter apart. An indented image followed by a full-width one is a new group. */
.cs-sec .cs-pair + .cs-pair, .cs-sec .cs-pair + .cs-full, .cs-sec .cs-full + .cs-pair, .cs-sec .cs-full + .cs-full { margin-top: var(--g); }
.cs-draw { background: #e7e0cf; padding: clamp(18px, 4vw, 64px); }
/* A drawing inside a plate takes the same 4:3 space as a screen, so paired plates always match in height. */
.drawfit { aspect-ratio: 4 / 3; display: grid; align-items: center; }
.cs-duo .plate-in { padding: clamp(14px, 3vw, 48px); }
/* paired screens share one shape, so the two plates always match in height */
.cs-duo .zoom img, .cs-duo video { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; }
.cs-duo .zoom img[src*="scanner-system"], .cs-duo .zoom img[src*="scanner-matrix"] { object-fit: contain; background: #fff; }
.cs-split { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); margin-top: 2vh; align-items: end; }
.cs-split > .bignum { grid-column: 1 / 7; }
.cs-split > .cs-prose { grid-column: 8 / -1; max-width: 31em; padding-bottom: 2vh; }
.bignum b { display: block; font: 400 var(--xl)/.8 var(--hand); letter-spacing: 0; color: var(--green); }
.cs-split .bignum b { font-size: clamp(120px, 26vw, 420px); }
.bignum span { display: block; font-size: var(--s); letter-spacing: 0; color: var(--mute); margin-top: 12px; }

.cs-next { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end; margin-top: 30vh; padding: 12vh var(--g) 10vh; background: var(--green); color: var(--page); overflow: hidden; }
.cs-next .small { grid-column: 1 / 4; color: rgba(243, 240, 233, .6); align-self: start; }
.cs-next-t { grid-column: 4 / 10; font: 500 var(--l)/1.04 var(--sans); letter-spacing: -.038em; }
.cs-next-p { grid-column: 11 / -1; transition: transform .5s var(--out); transform: rotate(8deg); }
.cs-next-p .pack-art { width: auto; height: min(32vh, calc(15vw / var(--ar))); margin-left: auto; }
.cs-next:hover .cs-next-p { transform: rotate(2deg) translateY(-10px); }
.cs-shelf { padding: 9vh var(--g) 7vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end; }
.cs-shelf ul { grid-column: 4 / 11; display: flex; gap: clamp(18px, 3vw, 44px); align-items: flex-end; }
.cs-shelf li a { display: grid; gap: 10px; justify-items: start; }
.shelf-p { display: block; transition: transform .35s var(--out); }
.shelf-p .pack-art { width: auto; height: min(clamp(64px, 8vw, 110px), calc(11vw / var(--ar))); }
.cs-shelf li a:hover .shelf-p { transform: translateY(-6px) rotate(-3deg); }
.cs-shelf [aria-current="page"] { background: none !important; }
.cs-shelf [aria-current="page"] .small { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cs-shelf [aria-current="page"] .shelf-p { opacity: .35; }
.cs-shelf > p.small { grid-column: 1 / 4; align-self: start; }
.cs-shelf > .small, .cs-shelf ul { grid-row: 1; }
.cs-shelf > a.u { grid-column: 11 / -1; justify-self: end; width: fit-content; }
.cs-foot { padding-top: 0; } .cs-foot .end { margin-top: 0; border-top: 0; padding: 14px 0; }

/* Drawings build themselves once when they scroll into view: each part arrives in order, so the eye is led
   through the comparison. They never loop, and the finished state is the complete drawing. */
.draw .a { transform-box: fill-box; transform-origin: 50% 50%; }
.draw .grow, .draw .from-left { transform-origin: 0 50%; }
.js [data-wipe] .draw .a { opacity: 0; transform: translateY(10px) scale(.86); transition: opacity .35s linear, transform .7s var(--out); transition-delay: calc(.55s + var(--i) * 45ms); }
.js [data-wipe] .draw .from-left { transform: translateX(-22px); }
.js [data-wipe] .draw .grow { opacity: 1; transform: scaleX(0); transition: transform 1s cubic-bezier(.3, .7, .1, 1); transition-delay: calc(.55s + var(--i) * 45ms); }
.js [data-wipe].in .draw .a { opacity: 1; transform: none; }

/* ---------- Motion. Only hides things once JS has confirmed it is running. ---------- */
.js .name i { transform: translateY(104%); transition: transform 1.25s var(--out); }
.js .n2 i { transition-delay: .09s; }
.js.is-ready .name i { transform: none; }
/* the name and role line are there from the first moment; only the small helpers fade in */
.js .hint, .js .place { opacity: 0; transition: opacity .5s linear .95s; }
.js.is-ready .hint, .js.is-ready .place { opacity: 1; }
/* Pictures and recordings open like the MMDriving signs: uncovered from the top edge down at an even pace (a slow
   start and end, never a fast burst that reads as "it just appeared") while settling the last few pixels upwards. */
.js [data-wipe] { clip-path: inset(0 0 100% 0); transform: translateY(36px); transition: clip-path 1.15s cubic-bezier(.45, 0, .15, 1), transform 1.15s cubic-bezier(.3, .6, .2, 1); }
.js [data-wipe].in { clip-path: inset(0 0 0 0); transform: none; }
/* the childhood photos open one after another, left to right */
.js .ab-strip [data-wipe] { transition-delay: calc(var(--i, 0) * 90ms); }
[data-rise] { display: block; overflow: hidden; }
[data-rise] > span { display: block; }
.js [data-rise] > span { transform: translateY(102%); transition: transform 1.05s var(--out); }
.js [data-rise].in > span { transform: none; }

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  /* on a phone the three links drop to their own line under the name, so they are never hidden behind a menu */
  .top { grid-template-columns: 1fr auto; row-gap: 10px; } .top nav { grid-column: 1 / -1; grid-row: 2; }
  .cs-hero, .cs-sec, .cs-split, .cs-next, .cs-shelf { display: block; }
  .cs-shelf ul { flex-wrap: wrap; margin: 18px 0 24px; } .shelf-p .pack-art { height: min(84px, calc(26vw / var(--ar))); }
  .dock { grid-template-columns: 1fr auto; } .dock-proj a { display: none; } .dock-nav { grid-column: auto; }
  .cs-hero h1, .cs-sec > h2 { margin-top: 12px; }
  .cs-pack { display: block; width: fit-content; margin: 0 0 18px; } .cs-pack .pack-art { height: min(120px, calc(120px / var(--ar))); }
  .cs-lede { margin-top: 14px; } .cs-results { flex-wrap: wrap; margin-top: 6vh; gap: 22px 32px; } .cs-hero .cs-first { margin-top: 48px; }
  .cs-sec { padding-top: 16vh; } .cs-pair { grid-template-columns: 1fr; } .cs-ba figure { aspect-ratio: auto; gap: 18px; }
  .cs-split > .cs-prose { margin-top: 24px; } .cs-quote { margin-top: 16vh; }
  .cs-next-t { display: block; margin: 12px 0 5vh; } .cs-next-p .pack-art { height: min(24vh, calc(60vw / var(--ar))); margin: 0; }
  .lineup.is-live .item { top: 43%; }
  .pack-art { height: calc(var(--ph) * .78svh); max-width: 42vw; }
  .p-wide .shot img { aspect-ratio: auto; }
  .place { display: none; }
  .head, .about, .refs, .sheet-in { display: block; }
  .head h2 { margin-top: 12px; }
  .cards { grid-template-columns: 1fr; }
  .tv { max-width: 460px; margin: 0 auto 40px; } .rows { grid-template-columns: 1fr 1fr; row-gap: 22px; margin-top: 48px; }
  .refs ul { margin-top: 14px; } .refs li { grid-template-columns: 1fr; gap: 2px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 10vh; } .thanks { text-align: left; }
  .sheet-in h2 { padding: 10px 0 5vh; } .sheet-row { display: block; padding-top: 4vh; } .sheet-row .facts { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Phones and small tablets ----------
   From RESEARCH-2-craft.md section 15. Reference sites at 390 wide: 16 to 18px text, side margins of 16 to 33px
   (24 typical), 34 to 45 characters a line, and headings of 32 to 52px. Screens are shown as wide as the phone
   allows and open in the viewer, because a desktop screenshot at phone width cannot be read otherwise. */
@media (max-width: 820px) {
  :root { --g: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); --l: clamp(30px, 8.2vw, 44px); --t: clamp(22px, 5.9vw, 30px); }
  body { overflow-wrap: break-word; }
  /* space between sections: closer than on a desktop, where the gaps are measured against a much taller screen */
  .work, .refs { padding-top: 96px; } .about { margin-top: 96px; padding-top: 72px; padding-bottom: 72px; }
  .cs-sec, .ab-sec { padding-top: 104px; } .cs-quote { margin-top: 104px; } .foot { padding-top: 104px; }
  .cs-hero, .ab-hero { padding-top: 56px; }
  .foot { padding-bottom: max(var(--g), env(safe-area-inset-bottom)); }
  /* case study opening: the pack sits beside the project label, clear of the title */
  .cs .cs-hero { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: start; }
  .cs .cs-hero > * { grid-column: 1 / -1; grid-row: auto; max-width: none; }
  .cs .cs-hero > .cs-id { grid-column: 1; grid-row: 1; padding-top: 4px; }
  .cs .cs-hero > .cs-pack { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; transform: rotate(6deg); width: auto; }
  .cs .cs-hero > h1 { grid-row: 2; } .cs .cs-hero > .cs-lede { grid-row: 3; } .cs .cs-hero > .cs-results { grid-row: 4; }
  .cs .cs-hero > .cs-first { grid-row: 5; } .cs .cs-hero > .cs-built { grid-row: 6; } .cs .cs-hero > .cs-note { grid-row: 7; }
  .cs-pack .pack-art { height: min(92px, calc(96px / var(--ar))); }
  .cs-hero h1 { margin-top: 28px; } .cs-results { margin-top: 44px; gap: 26px 28px; }
  .cs-results li { flex: 1 1 40%; } .cs-results li:first-child { flex-basis: 100%; }
  .cs-built, .cs-note { margin-top: 12px; }
  /* screens run edge to edge with a thin border of colour, so they are as large as the phone allows */
  .cs .plate, .card .plate, .cs-sec .cs-draw { margin-left: calc(var(--g) * -1); margin-right: calc(var(--g) * -1); }
  .plate-in, .cs-duo .plate-in { padding: 14px 12px; }
  .plate:has(.zoom) .plate-in, .plate:has(.vid) .plate-in { padding-bottom: 40px; }
  .plate figcaption, .cs-sec .cs-draw figcaption { padding: 0 var(--g); }
  .cs-pair { row-gap: 28px; } .cs-sec .cs-full, .cs-sec .cs-wide, .cs-sec .cs-pair { margin-top: 44px; }
  .zoom { position: relative; overflow: visible; }
  .zoom::after { content: "Enlarge"; position: absolute; right: 0; top: 100%; margin-top: 10px; font-size: var(--s); line-height: 1.2; letter-spacing: 0; color: var(--ink); border-bottom: 1px solid currentColor; opacity: .75; }
  .t-green .zoom::after { color: var(--page); }
  .vid-bs { margin-top: 10px; gap: 22px; }
  .card-meta { margin-top: 14px; } .cards { row-gap: 56px; margin-top: 44px; }
  .top nav { display: flex; gap: 22px; color: transparent; font-size: 0; } .top nav a { font-size: var(--m); }
  .ab-index ul { row-gap: 14px; margin-top: 18px; font-size: var(--m); }
  .hint { max-width: none; font-size: 0; } .hint button { margin-right: 22px; font-size: var(--s); } .hint > span { font-size: var(--s); margin-top: 8px; } .hint span span { font-size: var(--s); }
  .dock { padding: 16px var(--g); padding-top: max(16px, env(safe-area-inset-top)); column-gap: 14px; }
  .dock-nav { display: flex; gap: 18px; color: transparent; font-size: 0; } .dock-nav a { font-size: var(--s); }
  .dock-proj { display: none; }
  .tv figcaption { margin: 10px 0 0; } .tv { margin-bottom: 48px; }
  .rows { margin-top: 44px; } .rows dd { font-size: var(--m); }
  .ab-strip li { flex-basis: 62vw; } .ab-intro { max-width: none; }
  .ab-fit div { display: block; } .ab-fit dt { padding: 0 0 4px; }
  .ab-portrait { margin-left: calc(var(--g) * -1); margin-right: calc(var(--g) * -1); }
  .cs-shelf { padding-top: 72px; padding-bottom: 40px; } .cs-shelf ul { gap: 22px 26px; } .cs-shelf li a { min-height: 44px; }
  .cs-next { padding-top: 56px; padding-bottom: 56px; }
  .end { flex-direction: column; gap: 8px; }
  .mail { font-size: clamp(22px, 6.7vw, 44px); letter-spacing: -.045em; padding: 10px 0; }
}
/* Anything you tap gets a hit area of at least 44px without moving the text. Applies to every touch screen, whatever its width. */
@media (max-width: 820px), (pointer: coarse) {
  .top a, .dock a, .hint button, .ab-index a, .vid-b, .vid-f, .tv-pause, .u, .cs-shelf a, .lb-x { position: relative; }
  .copy, .media-msg button { position: relative; } .copy::before, .media-msg button::before, .links a::before, .nf-links a::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); } .links a, .nf-links a { position: relative; }
  .top a::before, .dock a::before, .hint button::before, .ab-index a::before, .vid-b::before, .vid-f::before, .tv-pause::before, .u::before, .tv-knob::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
  .ab-index a::before { left: 0; right: 0; } .tv-knob::before { left: 50%; right: auto; width: 48px; height: 48px; transform: translate(-50%, -50%); }
  .cs-shelf li a { min-height: 44px; }
}
.hint span span { margin-top: 0; } .hint .for-touch { display: none; }
@media (pointer: coarse) { .hint .for-mouse { display: none; } .hint .for-touch { display: block; } }
/* very small phones */
@media (max-width: 360px) { :root { --g: 16px; } .cs-results b { font-size: 48px; } }
/* a phone on its side: short and wide, so nothing is sized from the height */
@media (max-height: 520px) and (orientation: landscape) {
  .pack-art { max-height: 62svh; } .cs-next-p .pack-art { height: 40svh; }
}
/* touch screens have no hover, so nothing should stay stuck in a hover state after a tap */
@media (hover: none) {
  .zoom:hover img { transform: none; } .u:hover, .go:hover { background-size: 100% 1px; background-position: 0 100%; }
  nav a:hover, .dock a:hover { background-size: 0 1px; } .cs-shelf li a:hover .shelf-p, .ab-how a:hover .ab-pack { transform: none; }
}

/* The small text links in the top bar, the slim bar and the footer get a larger invisible tap area (44px tall), so a
   thumb can hit them easily on any touch screen, including laptops and tablets that report a mouse. Nothing moves
   and nothing changes how they look. */
.top a, .top-r a, .dock a, .links a, nav a { position: relative; }
.links a { z-index: 1; }
/* the footer clips anything above its top edge, so its links' tap area grows downwards instead */
.links a::after { top: -3px; transform: none; }
.top a::after, .top-r a::after, .dock a::after, .links a::after, nav a::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 44px; transform: translateY(-50%); }

/* put in place without movement: things that come into view from above (scrolling back up, or after a jump) */
.no-anim, .no-anim * { transition: none !important; }