/* DAYLIGHT v6 layer. Loaded after daylight.css.
   GQ, 2026-11-02: nothing on the page may read as AI-built. Removed here: pill shapes (buttons, chips, badges),
   mono uppercase eyebrow labels, status tags, the cursor ring and decorative counters. The real work carries the page. */

/* ---------- type: small text is set in the house face, sentence case; mono is kept only for real data ---------- */
.mono { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; font-stretch: 100%; }
.data { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.kick, .hint, .hf-scroll, .st, .rn { display: none !important; }
.cur { display: none !important; }

/* ---------- buttons: square-cut blocks, never capsules ---------- */
.btn { border-radius: 0; height: auto; min-height: 50px; padding: 12px 20px 13px; font: 700 17px/1.1 var(--font-display); letter-spacing: 0; text-transform: none; }
.hd .btn { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.btn.acid { box-shadow: 5px 5px 0 var(--ink); }
.companion .codec { border-radius: 0; }
.companion .codec .opts a { border-radius: 0; font: 600 16px/1.2 var(--font-display); text-transform: none; letter-spacing: 0; }
.companion .codec .freq { font: 600 13px/1 var(--font-display); text-transform: none; letter-spacing: 0; }

/* plain text link with a drawn underline: the default way to go somewhere */
.tlink { display: inline-flex; gap: .4em; align-items: baseline; font: 700 clamp(20px, 2vw, 28px)/1.15 var(--font-display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tlink:hover { text-decoration-thickness: 4px; }

/* header and menu: words, not labels */
.hd-nav { font: 600 16px/1 var(--font-display); letter-spacing: 0; text-transform: none; }
.mb small { font: 500 15px/1.25 var(--font-display); letter-spacing: 0; text-transform: none; opacity: .8; }
.ft-col { font: 600 16px/1.3 var(--font-display); letter-spacing: 0; text-transform: none; }
.ft-legal { font: 500 14px/1 var(--font-display); text-transform: none; letter-spacing: 0; }
.exit .ex-k, .exit .mono { font: 600 16px/1 var(--font-display); text-transform: none; letter-spacing: 0; }

/* ---------- hero words: cut paper labels, square edges, each cut a little differently ---------- */
.stk.word { border-radius: 0; border: 0; padding: .42em .62em .34em; box-shadow: 3px 4px 0 rgba(13,13,13,.85); }
.stk.word.p1 { clip-path: polygon(0 4%, 98% 0, 100% 92%, 2% 100%); }
.stk.word.p2 { clip-path: polygon(1% 0, 100% 6%, 99% 100%, 0 95%); }
.stk.word.p3 { clip-path: polygon(0 0, 97% 3%, 100% 100%, 3% 96%); }
.stk.word.p4 { clip-path: polygon(2% 5%, 100% 0, 98% 97%, 0 100%); box-shadow: none; }
.stk.word.p5 { clip-path: polygon(0 2%, 100% 0, 98% 100%, 1% 94%); }
.drag-note { position: absolute; z-index: 6; right: var(--pad); top: var(--pit-top, 60vh); margin-top: 10px; font: 400 clamp(22px, 2vw, 30px)/1 var(--font-script); transform: rotate(-4deg); opacity: .85; pointer-events: none; }
/* phones show the note too (it says how: hold, then drag), smaller, at the right of the pit */
/* desktop: the note floats at the right of the pit. phones: its twin sits in the text block under the intro line,
   so the stickers' space starts below it and nothing can land on it */
.dn-phone { display: none; }
@media (max-width: 820px) {
  .dn-desk { display: none !important; }
  .dn-phone { display: block; position: relative; right: auto; top: auto; width: fit-content; margin: 18px 30px 6px auto; font-size: 21px; }
  .dn-phone .dn-arrow { width: 36px; height: 36px; left: -30px; top: 70%; }
}

/* ---------- home: the work, shown as the work ---------- */
.work-sel { padding: 0 0 var(--s9); }
.ws-lead { display: block; position: relative; }
.ws-frame { display: block; aspect-ratio: 4/3; max-height: 100svh; width: 100%; overflow: hidden; background: #120c07; }
@media (min-aspect-ratio: 4/3) { .ws-frame { aspect-ratio: auto; height: 100svh; } }
.ws-frame video, .wt-frame video, .rl-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-cap { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--s7); display: grid; gap: 10px; color: var(--paper); text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.ws-t { margin: 0; font: 900 clamp(56px, 9vw, 168px)/.84 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.ws-l { font: 400 clamp(26px, 2.6vw, 40px)/1.1 var(--font-serif); font-style: italic; }
.ws-go { font: 700 18px/1 var(--font-display); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; margin-top: 6px; }
.ws-lead:hover .ws-go { text-decoration-thickness: 4px; }
.ws-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(16px, 2.4vw, 40px); align-items: end; padding-top: var(--s8); }
.wt { display: grid; gap: 8px; }
.wt2 { transform: translateY(-6vw); }
.wt-frame { display: block; aspect-ratio: var(--ar); overflow: hidden; background: #111; }
.wt-t { font: 800 clamp(22px, 2vw, 32px)/1 var(--font-display); font-stretch: 80%; margin-top: 6px; }
.wt-l { font: 400 17px/1.35 var(--font-display); opacity: .75; max-width: 34ch; }
.wt:hover .wt-t { text-decoration: underline; text-underline-offset: 5px; }
.ws-all { padding-top: var(--s8); }
@media (max-width: 820px) {
  .ws-row { grid-template-columns: 1fr 1fr; }
  .wt1 { grid-column: 1 / -1; }
  .wt2 { transform: none; }
}

/* ---------- work page ---------- */
.wk-head { padding-bottom: var(--s7); }
.wk-jump { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s6); font: 700 20px/1 var(--font-display); }
.wk-jump a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.sec-t { margin: 0 0 var(--s7); padding-top: var(--s9); font: 900 clamp(64px, 11vw, 200px)/.82 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.rl-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.6vw, 44px) clamp(14px, 2vw, 32px); align-items: start; }
.rl { display: grid; gap: 10px; }
.rl-1 { grid-column: 1 / 9; }
.rl-2 { grid-column: 9 / 13; margin-top: 18vw; }
.rl-3 { grid-column: 2 / 6; }
.rl-4 { grid-column: 7 / 11; margin-top: 10vw; }
.rl-frame { display: block; aspect-ratio: var(--ar); overflow: hidden; background: var(--tone, #111); }
.rl-cap { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.rl-t { font: 800 clamp(24px, 2.4vw, 40px)/1 var(--font-display); font-stretch: 80%; }
.rl-l { grid-column: 1; font: 400 18px/1.35 var(--font-display); opacity: .75; }
.rl-len { grid-column: 2; grid-row: 1; font: 500 14px/1.6 var(--font-mono); opacity: .6; }
.rl:hover .rl-t { text-decoration: underline; text-underline-offset: 6px; }
.wk-more { padding-top: var(--s8); padding-bottom: var(--s9); }
@media (max-width: 820px) {
  .rl-wall { grid-template-columns: 1fr 1fr; }
  .rl-1 { grid-column: 1 / -1; }
  .rl-2, .rl-3, .rl-4 { grid-column: auto; margin-top: 0; }
  .rl-4 { grid-column: 1 / 2; }
}
.wk-cast .sec-t { padding-top: var(--s9); }
.cm b { font: 800 clamp(22px, 2vw, 30px)/1 var(--font-display); text-transform: none; letter-spacing: 0; }

/* client sites: the screenshots overlap like prints on a table; the whole thing links out */
.cl { display: grid; gap: var(--s9); padding-bottom: var(--s9); }
.cl-site { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.cl-lw { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.cl-lw .cl-shots { order: 2; }
.cl-shots { position: relative; display: block; aspect-ratio: 16/11.5; }
.cl-shots img { position: absolute; width: 74%; aspect-ratio: 16/10; object-fit: cover; object-position: top; box-shadow: 0 24px 50px rgba(13,13,13,.28); transition: transform .6s var(--ease-house); }
.cl-shots img:nth-child(1) { left: 0; top: 0; z-index: 3; }
.cl-shots img:nth-child(2) { right: 0; top: 18%; z-index: 2; transform: rotate(2deg); }
.cl-shots img:nth-child(3) { left: 14%; bottom: 0; z-index: 1; transform: rotate(-2deg); }
.cl-site:hover .cl-shots img:nth-child(1) { transform: translate(-6px, -6px); }
.cl-cap { display: grid; gap: 12px; }
.cl-n { font: 900 clamp(48px, 6vw, 104px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.cl-l { font: 400 20px/1.4 var(--font-display); max-width: 30ch; }
.cl-u { font: 700 18px/1 var(--font-display); text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 820px) {
  .cl-site, .cl-lw { grid-template-columns: 1fr; }
  .cl-lw .cl-shots { order: 0; }
}

/* ---------- reel page: the reel at its own shape, sound on ---------- */
.rp { min-height: 100svh; display: grid; grid-template-columns: minmax(0, auto) minmax(260px, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; padding: calc(var(--s9) + 40px) var(--pad) var(--s8); background: var(--tone); }
.rp-player { height: min(80svh, 900px); aspect-ratio: var(--ar); max-width: 62vw; }
.rp-video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.rp-copy { padding: 0; display: grid; gap: var(--s4); }
.rp-t { margin: 0; font: 900 clamp(54px, 7vw, 128px)/.84 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.rp-l { margin: 0; font: 400 clamp(24px, 2.2vw, 34px)/1.15 var(--font-serif); font-style: italic; max-width: 26ch; }
.rp-meta { display: flex; gap: var(--s5); align-items: baseline; margin: 0; font: 600 16px/1 var(--font-display); }
.rp-meta span { font-family: var(--font-mono); font-size: 13px; opacity: .65; }
.rp-meta a { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 820px) {
  .rp { grid-template-columns: 1fr; align-items: start; padding-top: 96px; }
  .rp-player { height: auto; width: 100%; max-width: none; max-height: 78svh; }
}

/* resource pages keep a plain crumb instead of a label */
.crumb { font: 600 16px/1 var(--font-display); margin: 0 0 var(--s6); }
.crumb a { text-decoration: underline; text-underline-offset: 5px; }
.fbtn { border-radius: 0; border: 2px solid currentColor; background: transparent; padding: 10px 16px; font: 600 16px/1 var(--font-display); color: inherit; }
.fbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pv-row { grid-template-columns: 1fr 1.4fr; }
.hl .w + .w { margin-left: .15em; }
.wk-jump a { border: 0 !important; border-radius: 0 !important; padding: 0 !important; height: auto !important; background: none !important; }
.wk-head { min-height: 0 !important; padding-top: calc(var(--s9) + 60px); }
@media (max-width: 820px) {
  .cl-shots { aspect-ratio: 1 / 1.02; }
  .cl-shots img { width: 86%; }
  .cl-shots img:nth-child(2) { top: 30%; }
  .cl-shots img:nth-child(3) { left: 4%; }
}
@media (max-width: 820px) { .cl-shots { margin-bottom: 10%; } }

/* ---------- About: highlighter on scroll (GQ, 2026-11-02) ---------- */
.mk { background: linear-gradient(var(--mark, var(--acid)), var(--mark, var(--acid))) 0 92% / 0% 100% no-repeat; background-size: 0% 100%; padding: 0 .06em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mk { background-image: linear-gradient(transparent 52%, var(--mark, var(--acid)) 52%, var(--mark, var(--acid)) 90%, transparent 90%); }
.ab-q { --mark: rgba(13,13,13,.18); }
.ab-story { --mark: var(--acid); }
.ab-aim { --mark: rgba(226,54,27,.55); }
.ab-hl { background: linear-gradient(transparent 55%, var(--acid) 55%, var(--acid) 92%, transparent 92%) 0 0 / 0% 100% no-repeat; color: inherit; padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: reduce) { .ab-hl { background-size: 100% 100%; } }

/* NEUR stands in full: nothing below the floor */
.ab-neur { bottom: 0; height: min(78vh, 760px); }
.ab-head { padding-bottom: var(--s8); }
@media (max-width: 820px) { .ab-neur { bottom: 0; height: 46svh; } .ab-head { padding-bottom: 50svh; } }

/* characters: full bodies, room under their feet */
.wk-cast { overflow: visible; padding-bottom: var(--s9); }
.cm { height: min(60vh, 600px); }
.cm b { bottom: auto; top: 100%; margin-top: var(--s3); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.cast-row { padding-bottom: calc(var(--s7) + 40px); }
@media (max-width: 820px) { .cm { height: 40svh; } .cast-row { row-gap: calc(var(--s8) + 30px); } }
.comm-contact { margin-top: var(--s6); position: relative; z-index: 2; }

/* client sites in motion: a recording of the live site in a browser frame, the prints fanned behind it */
.cl-shots { aspect-ratio: 16/12; }
.cl-shots img { width: 62%; opacity: .92; }
.cl-shots img:nth-child(2) { left: 0; top: 4%; right: auto; }
.cl-shots img:nth-child(3) { right: 0; left: auto; top: 30%; bottom: auto; }
.cl-shots img:nth-child(4) { left: 18%; bottom: 0; top: auto; }
.cl-live { position: absolute; left: 50%; top: 50%; width: 82%; translate: -50% -50%; z-index: 5; display: block; background: #0d0d0d; border: 2px solid var(--ink); box-shadow: 10px 12px 0 var(--ink), 0 40px 70px rgba(13,13,13,.35); }
.cl-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--paper); border-bottom: 2px solid var(--ink); }
.cl-bar i { width: 9px; height: 9px; border: 1.5px solid var(--ink); }
.cl-bar b { margin-left: 10px; font: 600 12px/1 var(--font-mono); color: var(--ink); }
.cl-live video { display: block; width: 100%; aspect-ratio: 1280/800; object-fit: cover; }
.cl-site:hover .cl-live { box-shadow: 14px 16px 0 var(--ink), 0 40px 70px rgba(13,13,13,.35); }
@media (max-width: 820px) { .cl-live { width: 94%; } .cl-shots img { width: 70%; } .cl-shots { aspect-ratio: 1 / .95; } }

/* ======================= Guides (GQ, 2026-11-02): a library that keeps growing, and a step-by-step guide page ======================= */
.c-cobalt { color: var(--cobalt); }
.gl-head { padding-bottom: var(--s7); }
.gl-head .lede { max-width: 40ch; }
.gl { padding: 0 0 var(--s9); }
.gl-filters { display: grid; gap: var(--s4); padding-bottom: var(--s7); border-bottom: 2px solid var(--ink); margin-bottom: var(--s7); }
.gl-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gl-f-k { font: 400 clamp(22px, 2vw, 28px)/1 var(--font-script); margin-right: var(--s3); min-width: 9ch; }
.fbtn { cursor: pointer; transition: background-color .25s, color .25s; }
.fbtn:hover { background: var(--ink); color: var(--paper); }
.fbtn[aria-pressed="true"] { background: var(--cobalt); color: var(--paper); border-color: var(--cobalt); }
.gl-grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8) clamp(18px, 2.4vw, 40px); }
.gc a { display: grid; gap: 10px; }
.gc-img { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--ink); border: 2px solid var(--ink); }
.gc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-house); }
.gc a:hover .gc-img img { transform: scale(1.05); }
.gc1 .gc-img { aspect-ratio: 1; } .gc2 .gc-img { aspect-ratio: 3/4; }
.gc-k { font: 600 15px/1.2 var(--font-display); color: var(--cobalt); margin-top: 6px; }
.gc-t { font: 800 clamp(24px, 2.2vw, 34px)/1.05 var(--font-display); letter-spacing: -.01em; }
.gc a:hover .gc-t { text-decoration: underline; text-underline-offset: 5px; }
.gc-l { font: 400 18px/1.4 var(--font-display); opacity: .78; max-width: 38ch; }
.gc-time { font: 500 13px/1 var(--font-mono); opacity: .6; }
.gl-none { font: 600 20px/1.4 var(--font-display); }
.gl-desk { margin-top: var(--s9); padding-top: var(--s7); border-top: 2px solid var(--ink); }
.gl-desk-t { font: 900 clamp(48px, 6vw, 104px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin: 0 0 var(--s7); }
.gl-desk-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.gd { display: grid; gap: 8px; align-content: start; }
.gd .gc-img { aspect-ratio: 1; filter: grayscale(.85) contrast(.95); opacity: .85; }
.gd .gc-t { font-size: clamp(20px, 1.7vw, 26px); }
.gd .gc-l { font-size: 16px; }
.gd-note { font: 400 clamp(22px, 1.8vw, 28px)/1 var(--font-script); color: var(--red); transform: rotate(-2deg); transform-origin: left; }
.gl-ask { padding: var(--s9) var(--pad); display: grid; gap: var(--s4); }
.gl-ask-t { font: 900 clamp(48px, 7vw, 128px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin: 0; max-width: 14ch; }
.gl-ask-l { font: 600 clamp(20px, 1.8vw, 26px)/1.3 var(--font-display); margin: 0 0 var(--s4); }
@media (max-width: 1000px) { .gl-grid { grid-template-columns: 1fr 1fr; } .gl-desk-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .gl-grid { grid-template-columns: 1fr; } .gc1 .gc-img, .gc2 .gc-img { aspect-ratio: 4/3; } .gl-f-k { width: 100%; } }

/* home: the newest guide */
.home-guide { padding-top: var(--s9); padding-bottom: var(--s9); }
.hg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hg-img { display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--paper); box-shadow: 10px 12px 0 var(--acid); transform: rotate(-2deg); }
.hg-img img { width: 100%; height: 100%; object-fit: cover; }
.hg-copy { display: grid; gap: var(--s4); }
.hg-k { font: 400 clamp(26px, 2.4vw, 36px)/1 var(--font-script); color: var(--acid); }
.hg-t { font: 900 clamp(44px, 5.4vw, 100px)/.88 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.hg-l { font: 500 clamp(19px, 1.6vw, 24px)/1.4 var(--font-display); max-width: 40ch; opacity: .9; }
.hg-go { font: 700 20px/1 var(--font-display); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.hg:hover .hg-go { text-decoration-thickness: 4px; }
.hg-all { margin-top: var(--s7); }
@media (max-width: 820px) { .hg { grid-template-columns: 1fr; } .hg-img { max-width: 78vw; } }

/* guide page */
.gx { padding-top: calc(var(--s9) + 50px); }
.gx-head { max-width: 1100px; }
.gx-t { margin: var(--s4) 0 var(--s5); font: 900 clamp(52px, 7vw, 132px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.gx-line { font: 500 clamp(21px, 1.9vw, 28px)/1.35 var(--font-display); max-width: 46ch; margin: 0 0 var(--s6); }
.gx-meta { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); margin: 0; padding: var(--s5) 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.gx-meta div { display: grid; gap: 4px; }
.gx-meta dt { font: 400 22px/1 var(--font-script); color: var(--cobalt); }
.gx-meta dd { margin: 0; font: 700 18px/1.2 var(--font-display); }
.gx-body { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 760px); gap: clamp(28px, 5vw, 96px); padding-top: var(--s9); padding-bottom: var(--s9); }
.gx-toc { position: sticky; top: 96px; align-self: start; }
.gx-toc-t { font: 400 26px/1 var(--font-script); color: var(--cobalt); margin: 0 0 var(--s4); }
.gx-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
.gx-toc li { counter-increment: s; }
.gx-toc li:last-child { counter-increment: none; }
.gx-toc a { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 8px 0 8px 12px; border-left: 3px solid color-mix(in srgb, var(--ink) 15%, transparent); font: 600 16px/1.3 var(--font-display); opacity: .6; transition: opacity .25s, border-color .25s; }
.gx-toc a::before { content: counter(s); font: 600 13px/1.5 var(--font-mono); }
.gx-toc li:last-child a::before { content: "→"; }
.gx-toc a:hover, .gx-toc a.on { opacity: 1; border-left-color: var(--cobalt); }
.gx-intro { font: 500 clamp(21px, 1.7vw, 25px)/1.5 var(--font-display); margin: 0 0 var(--s5); }
.gx-step { padding-top: var(--s8); scroll-margin-top: 90px; }
.gx-step h2, .gx-rules h2 { display: flex; gap: var(--s4); align-items: baseline; margin: 0 0 var(--s4); font: 800 clamp(28px, 2.6vw, 40px)/1.05 var(--font-display); letter-spacing: -.01em; }
.gx-n { flex: none; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; background: var(--cobalt); color: var(--paper); font: 900 .8em/1 var(--font-display); }
.gx-step p { font: 400 19px/1.6 var(--font-display); margin: 0 0 var(--s4); max-width: 62ch; }
.gx-code { position: relative; margin: var(--s4) 0; background: var(--ink); color: #EDE8DE; border-left: 6px solid var(--acid); }
.gx-code pre { margin: 0; padding: 22px 22px 22px 20px; overflow-x: auto; font: 500 14px/1.65 var(--font-mono); white-space: pre; }
.gx-copy { position: absolute; right: 10px; top: 10px; padding: 6px 12px; background: var(--acid); color: var(--ink); border: 0; font: 700 13px/1 var(--font-display); cursor: pointer; }
.gx-copy:hover { background: var(--paper); }
.gx-note { font-size: 16px !important; opacity: .75; padding-left: var(--s4); border-left: 3px solid var(--cobalt); }
.gx-rules { margin-top: var(--s9); padding: var(--s7); background: var(--acid); scroll-margin-top: 90px; }
.gx-rules ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s3); font: 500 19px/1.5 var(--font-display); }
.gx-result { margin-top: var(--s7); padding: var(--s7); background: var(--ink); color: var(--paper); }
.gx-result-k { font: 400 28px/1 var(--font-script); color: var(--acid); margin: 0 0 var(--s3); }
.gx-result-t { font: 800 clamp(24px, 2.2vw, 34px)/1.2 var(--font-display); margin: 0; }
.gx-ask { margin-top: var(--s7); font: 600 19px/1.4 var(--font-display); }
.gx-ask a { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 900px) {
  .gx-body { grid-template-columns: 1fr; }
  .gx-toc { position: static; padding: var(--s5); background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
.gl-f-k { font: 700 16px/1.2 var(--font-display); min-width: 12ch; }
.gx-meta dt { font: 600 14px/1 var(--font-display); color: var(--cobalt); }
.gx-result-k { font: 700 16px/1 var(--font-display); }
.gx-toc-t { font: 800 18px/1 var(--font-display); }
.ab-lead { max-width: min(19ch, 56%); }
.ab-neur { height: min(78vh, 760px, 52vw); right: 2vw; }
@media (max-width: 820px) { .ab-lead { max-width: none; } .ab-neur { height: 46svh; } }
.cl-cap { position: relative; z-index: 8; } .cl-site { position: relative; }
.gx-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.gx-items li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.gx-items b { font: 800 19px/1.3 var(--font-display); }
.gx-items b a { text-decoration: underline; text-underline-offset: 4px; }
.gx-items span { font: 400 17px/1.5 var(--font-display); }
@media (max-width: 620px) { .gx-items li { grid-template-columns: 1fr; gap: 4px; } }
/* the cast at one scale: NEUR leads but no longer towers over the others */
.cast-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-neur img { height: 84%; }
.cm-vyro img { height: 86%; }
.cm-rivet img { height: 76%; }
.cm-eeky img { height: 54%; }
@media (max-width: 820px) { .cast-row { grid-template-columns: 1fr 1fr; } .cm { height: 38svh; } }
/* each character is a stack: the figure, then its name, with clear space between; nothing can overlap */
.cast-row { --ch: min(50vh, 500px); align-items: end; padding-bottom: var(--s8); }
.cm { height: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 22px; }
.cm img { height: auto; width: auto; max-width: 100%; display: block; }
.cm-neur img { height: calc(var(--ch) * .86); }
.cm-vyro img { height: calc(var(--ch) * .9); }
.cm-rivet img { height: calc(var(--ch) * .8); }
.cm-eeky img { height: calc(var(--ch) * .58); }
.cm b { position: static; transform: none; margin: 0; top: auto; left: auto; bottom: auto; }
@media (max-width: 820px) { .cast-row { --ch: 30svh; } .cm { height: auto; } }

/* footer: the logo at a size its file can hold sharply, sitting on the base line with the copyright */
.ft { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--s6); }
.ft-top { grid-column: 1 / -1; }
.ft-lock, body:not([data-page="index"]) .ft-lock { grid-column: 1; width: auto; margin: var(--s9) 0 0; padding-top: var(--s6); border-top: 1px solid rgba(240,237,230,.2); }
.ft-legal { grid-column: 2; padding-top: var(--s6); border-top: 1px solid rgba(240,237,230,.2); margin-top: var(--s9); align-self: stretch; display: flex; align-items: flex-end; }
.ft-lock .lg, body:not([data-page="index"]) .ft-lock .lg { width: 190px; max-width: 46vw; height: auto; image-rendering: auto; }
@media (max-width: 820px) { .ft-lock, body:not([data-page="index"]) .ft-lock { margin-top: var(--s8); } .ft-legal { margin-top: var(--s8); } .ft-lock .lg, body:not([data-page="index"]) .ft-lock .lg { width: 150px; } }
.ft { column-gap: 0; }
.ft-legal { padding-left: var(--s6); }
@media (max-width: 820px) { main { padding-bottom: 0; } main > :last-child { padding-bottom: calc(var(--s7) + 70px); } }
@media (max-width: 820px) { .comm { padding-bottom: calc(24svh + var(--s7)) !important; } .comm-eeky { height: 22svh; right: 6vw; bottom: var(--s5); } }

/* ---------- Guides, round 2: easy way first (GQ and Bella, 2026-11-02) ---------- */
.gd .gc-img { filter: none; opacity: 1; }
.gx-word { margin: var(--s6) auto 0; font: 600 18px/1.4 var(--font-display); }
.gx-word b { background: var(--acid); padding: 0 .25em; }
/* the quickest way: the first thing to do, in plain words, with the sentence to copy */
.gx-easy { margin: var(--s7) 0 var(--s4); padding: var(--s7); background: var(--cobalt); color: var(--paper); scroll-margin-top: 90px; }
.gx-easy h2 { margin: 0 0 var(--s4); font: 900 clamp(40px, 4.4vw, 72px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.gx-easy p { font: 500 20px/1.55 var(--font-display); margin: 0 0 var(--s4); max-width: 60ch; }
.gx-easy-k { font: 400 30px/1 var(--font-script) !important; color: var(--acid); margin: var(--s5) 0 var(--s2) !important; }
.gx-ask-box { border-left-color: var(--acid); }
.gx-ask-box pre { white-space: pre-wrap; font: 500 17px/1.6 var(--font-display); padding-right: 96px; }
.gx-steps-t { margin: var(--s9) 0 0; font: 900 clamp(40px, 4.4vw, 72px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.gx-code pre { white-space: pre-wrap; word-break: break-word; }
.gx-copy { padding: 9px 14px; font-size: 14px; }
/* the hand-made way, closed until asked for */
.gx-manual { margin-top: var(--s8); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.gx-manual summary { list-style: none; cursor: pointer; display: grid; gap: 6px; padding: var(--s6) 48px var(--s6) 0; position: relative; }
.gx-manual summary::-webkit-details-marker { display: none; }
.gx-manual summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 900 44px/1 var(--font-display); transition: transform .3s var(--ease-house); }
.gx-manual[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.gx-manual summary span:first-child { font: 900 clamp(32px, 3.4vw, 56px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.gx-manual-l { font: 500 17px/1.3 var(--font-display); opacity: .7; }
.gx-manual[open] { padding-bottom: var(--s7); }
/* one next step */
.gx-next { margin-top: var(--s8); }
.gx-next-go { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s4); align-items: end; padding: var(--s6) var(--s6) var(--s6); background: var(--acid); color: var(--ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .3s var(--ease-house), box-shadow .3s var(--ease-house); }
.gx-next-go:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.gx-next-k { grid-column: 1 / -1; font: 700 15px/1 var(--font-display); }
.gx-next-t { font: 900 clamp(28px, 3vw, 48px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.gx-next-go > span:last-child { font: 900 36px/1 var(--font-display); }
/* email sign-up (shown only once Kit is connected) */
.gx-signup { margin-top: var(--s7); display: grid; gap: var(--s3); }
.gx-signup label { font: 800 22px/1.2 var(--font-display); }
.gx-signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gx-signup input[type=email] { flex: 1 1 240px; min-height: 52px; padding: 0 16px; border: 2px solid var(--ink); background: var(--paper); font: 500 18px/1 var(--font-display); }
/* the step list: the extra rows (quickest way, rules) carry a mark instead of a number */
.gx-toc li.ez { counter-increment: none; }
.gx-toc li.ez a::before { content: "→"; }
.gx-toc li:last-child a::before { content: counter(s); }
.gx-toc li.ez:last-child a::before { content: "→"; }
.gx-ask { display: none; }
@media (max-width: 620px) {
  .gx-easy { padding: var(--s6) var(--s5); margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
  .gx-ask-box pre { padding-right: 20px; padding-top: 52px; }
}
.gx-ask-box code { font: inherit; }
.gx-ask-box pre { font: 600 19px/1.55 var(--font-display); }
/* covers are designed square: every card shows the whole cover */
.gc .gc-img, .gc1 .gc-img, .gc2 .gc-img, .gd .gc-img { aspect-ratio: 1; }
.gc a:hover .gc-img img { transform: scale(1.03); }
/* the outbound arrow is drawn, so phones never swap it for an emoji (GQ, 2026-11-02) */
.xa { display: inline-block; width: .62em; height: .62em; margin-left: .18em; vertical-align: .08em; background: currentColor; font-style: normal;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.2 2H8v4.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.2 2H8v4.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
.mb .xa { width: .42em; height: .42em; vertical-align: .32em; }
.mb span { white-space: nowrap; }
.mb span { white-space: normal; }
@media (max-width: 820px) { .mb { flex-wrap: wrap; align-content: center; row-gap: 6px; } .mb small { text-align: left; max-width: none; } }
@media (max-width: 820px) {
  .mb { flex-direction: column; justify-content: center; align-items: flex-start; flex-wrap: nowrap; gap: 8px; }
  .mb span { font-size: min(1em, 17vw); }
  .mb .xa { width: .36em; height: .36em; }
}
.gx-signup-msg { margin: 0; font: 600 17px/1.4 var(--font-display); min-height: 1.4em; }
.gx-signup.done .gx-signup-row { display: none; }
.gx-signup input[type=text] { flex: 1 1 160px; min-height: 52px; padding: 0 16px; border: 2px solid var(--ink); background: var(--paper); font: 500 18px/1 var(--font-display); }
/* affiliate links are labelled where they appear (GQ, 2026-11-02) */
.aff { display: inline-block; margin-left: .3em; font: 600 12px/1.4 var(--font-display); color: color-mix(in srgb, currentColor 60%, transparent); white-space: nowrap; }
.gx-disclosure { margin: var(--s7) 0 0; padding: var(--s4) var(--s5); border-left: 3px solid var(--cobalt); font: 500 16px/1.5 var(--font-display); }
.gx-golink { margin-top: var(--s7); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.gx-meta dd a { text-decoration: underline; text-underline-offset: 4px; }
/* the guide header picture runs the full width at every screen size */
/* the visitor's AI tool (square tabs, never pills) */
.gx-tools { margin: var(--s5) 0 var(--s5); }
.gx-tools-k { font: 700 15px/1 var(--font-display) !important; color: var(--acid); margin: 0 0 var(--s3) !important; }
.gx-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-tab { padding: 10px 14px; border: 2px solid var(--paper); background: transparent; color: var(--paper); font: 700 15px/1 var(--font-display); cursor: pointer; transition: background-color .2s, color .2s; }
.gx-tab:hover { background: color-mix(in srgb, var(--paper) 15%, transparent); }
.gx-tab[aria-selected="true"] { background: var(--paper); color: var(--cobalt); }
.gx-tab:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
.gx-tp { margin-top: var(--s4); }
.gx-tp ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font: 500 19px/1.5 var(--font-display); }
/* on phones the floating Eeky sits bottom-right, so Copy moves top-left where nothing covers it */
@media (max-width: 820px) { .gx-copy { left: 10px; right: auto; } .gx-code pre { padding-top: 56px; } }
/* paths: where this guide sits, the next step, and what's often read with it */
.gx-path { margin: 0 0 var(--s3); font: 500 16px/1.4 var(--font-display); }
.gx-path b { font-weight: 800; }
.gx-together { margin-top: var(--s8); }
.gx-together h2 { margin: 0 0 var(--s4); font: 800 22px/1.1 var(--font-display); }
.gx-together ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.gx-together a { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); align-items: center; }
.gx-together .gc-img { aspect-ratio: 1; width: 96px; }
.gt-t { font: 700 17px/1.25 var(--font-display); }
.gx-together a:hover .gt-t { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 620px) { .gx-together ul { grid-template-columns: 1fr; } }
/* anything marked hidden stays hidden, whatever display a component sets */
[hidden] { display: none !important; }

/* reading lists: real covers, all one size, sitting on a common shelf line; shown no larger than the files (about 330 x 500) */
.gx-books { margin-top: var(--s6); }
.gx-books-t { margin-bottom: var(--s5); }
.bk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 168px)); gap: var(--s6) var(--s5); }
.bk a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.bk-c { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 2 / 3; }
.bk-c img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(4px 4px 0 var(--ink)); transition: transform .35s var(--ease-house); }
.bk a:hover .bk-c img, .bk a:focus-visible .bk-c img { transform: translateY(-6px); }
.bk-c .bk-t { font: 800 18px/1.1 var(--font-display); padding: 14px; border: 2px solid var(--ink); height: 100%; display: flex; align-items: flex-end; }
.bk-a b { color: var(--cobalt); font-weight: 800; }
.bk-tt { margin-top: 12px; min-height: 2.5em; font: 800 15px/1.25 var(--font-display); }
.bk-a { margin-top: 2px; min-height: 2.6em; font: 500 13px/1.3 var(--font-display); color: color-mix(in srgb, var(--ink) 75%, transparent); }
.bk-go { margin-top: 8px; font: 700 14px/1.3 var(--font-display); text-decoration: underline; text-underline-offset: 4px; }
.bk .aff { margin: 2px 0 0; }
@media (max-width: 620px) {
  .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) 12px; }
  .bk-tt { font-size: 13px; } .bk-a { font-size: 12px; } .bk-go { font-size: 13px; }
}

/* guide header: the whole picture, never cropped and never shown larger than it was made (1600 wide, at 2x).
   On a wide screen the band keeps the picture's own colour (cover_bg) out to the edges. */
.gx-img { margin: var(--s8) 0 0; background: var(--cbg, var(--ink)); }
.gx-img img { display: block; width: 100%; max-width: min(1600px, calc(72vh * 1600 / 700)); height: auto; aspect-ratio: 1600 / 700; margin: 0 auto; }
/* contents list: every numbered entry counts, including a last one (a reading list has only "The books") */
.gx-toc li:last-child:not(.ez) { counter-increment: s; }
/* phone: the founder's line stays one line so every book's link sits level */
@media (max-width: 620px) { .bk-a .bk-an { display: none; } }
/* every book's link sits level with its row, whatever the title's length */
.bk { display: flex; flex-direction: column; }
.bk a { flex: 1; }
.bk-tt, .bk-a { min-height: 0; }
.bk-go { margin-top: auto; padding-top: 8px; }
/* every cover the same height on a straight shelf line: the frame is as wide as the widest cover, so each
   cover fits by height (never cropped, never enlarged past its file) */
.bk-c { position: relative; aspect-ratio: 0.78; }
.bk-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
/* phone: the room left for the robot comes from inside the last panel, so the second "where next" line stays
   on its panel's colour (it fell onto the dark page and vanished on reel pages and About) */
@media (max-width: 820px) {
  main > .exits:last-child { padding-bottom: 0; }
  .exits .exit:first-child { padding-bottom: calc(var(--s8) + 64px + 70px); }
}
/* thumbs in an in-app browser: every tap target at least 44 px tall on phones */
@media (max-width: 820px) {
  .hd-menu, .logo { min-height: 44px; display: inline-flex; align-items: center; }
  .fbtn, .gx-tab { min-height: 44px; }
  .gx-toc a { min-height: 44px; align-items: center; }
  .ft-col { gap: 0; }
  .ft-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .tlink { min-height: 44px; align-items: center; }
  .crumb a, .gx-golink a, .bk-go { display: inline-flex; align-items: center; min-height: 44px; }
}
/* the small label in a "where next" panel is large enough to read on red (18.7 px bold counts as large text) */
.exit .ex-k, .exit .mono { font-size: 19px; font-weight: 700; }
/* the robot greets with two short bobs and then rests (moving content stops within 5 s); none when motion is reduced */
.companion > button img { animation-duration: 2.4s; animation-iteration-count: 2; }
@media (prefers-reduced-motion: reduce) { .companion > button img { animation: none; } }
/* a guide or reel page is filled in after load; hold the space so the footer never shows first and jumps down */
main[data-item]:not(.is-ready) { min-height: 200vh; }
/* phone: the menu button and copy buttons are thumb-sized; form fields 44 px tall with 16 px text (iPhone zooms in on smaller) */
@media (max-width: 820px) {
  .hd .hd-menu, button.hd-menu { min-height: 44px; }
  .gx-copy { min-height: 44px; min-width: 64px; top: 6px; right: 6px; }
  input, select, textarea { min-height: 44px; font-size: max(16px, 1em); }
}
/* touch screens: a vertical swipe on a sticker or character scrolls the page; a sideways drag still moves it
   (touch-action: none trapped the scroll over half the first screen on phones) */
.stk { touch-action: pan-y; }
.form-msg[data-msg] > span { display: block; font: 600 17px/1.5 var(--font-display); text-transform: none; letter-spacing: 0; }
.form-msg[data-msg] > .ct-note { margin: var(--s3) 0; padding: var(--s4); background: color-mix(in srgb, var(--ink) 7%, transparent); border-left: 4px solid var(--acid); font: 500 17px/1.5 var(--font-display); user-select: all; -webkit-user-select: all; }
[data-msg] .btn { margin-top: var(--s2); }
/* phone: the last small links reach 44 px (in-page jumps, menu footer, reel's Instagram link, contact's privacy note) */
@media (max-width: 820px) {
  .wk-jump a, .menu-meta a, .rp-meta a, .links-row a.mono { display: inline-flex; align-items: center; min-height: 44px; }
}
/* the library is filled in after load; hold its space so the page below doesn't jump */
[data-c]:empty { min-height: 120vh; }
/* Home ends with the contact sentence: same form as /contact, sitting under the community section */
.home-ctc { min-height: 0; padding-top: var(--s10); }
.home-ctc h2.poster { font-size: clamp(90px, 14vw, 250px); margin: 0 0 var(--s7); }
/* "go on, drag them": a red hand-drawn loop and arrow draw on, the note wiggles twice, then rests */
.drag-note { opacity: 1; }
.drag-note span { position: relative; z-index: 1; display: inline-block; }
.drag-note svg { position: absolute; overflow: visible; fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.drag-note svg path { stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.dn-loop { left: -22px; right: -22px; top: -20px; width: calc(100% + 44px); height: calc(100% + 40px); }
.dn-arrow { width: 54px; height: 54px; left: -46px; top: 100%; transform: rotate(8deg); }
.drag-note.on .dn-loop path { animation: dn-draw .9s cubic-bezier(.6, 0, .3, 1) forwards; }
.drag-note.on .dn-arrow path:first-child { animation: dn-draw .5s ease-out .8s forwards; }
.drag-note.on .dn-arrow path:last-child { animation: dn-draw .25s ease-out 1.25s forwards; }
.drag-note.on span { animation: dn-wiggle .5s ease-in-out 1.5s 2; }
.drag-note.done { opacity: 0; transition: opacity .5s; }
@keyframes dn-draw { to { stroke-dashoffset: 0; } }
@keyframes dn-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg) translateY(-2px); } 70% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .drag-note svg path { stroke-dashoffset: 0; animation: none !important; } .drag-note span { animation: none !important; } }
/* a held sticker lifts slightly so the press-and-hold reads on a phone */
.stk.held > * { transform: scale(1.06); transition: transform .15s var(--ease-house); filter: drop-shadow(0 12px 14px rgba(13,13,13,.28)); }
.stk > * { transition: transform .2s var(--ease-house); }
/* phone header: logo left, Menu button pinned to the right edge */
@media (max-width: 820px) { .hd .hd-menu { margin-left: auto; } }

/* ===== home clarity (draft): what this is, who it's for, what to do next ===== */
/* header: the main door, on every page */
.hd .hd-cta { margin-left: var(--s5); min-height: 40px; padding: 8px 16px; font: 700 15px/1 var(--font-display); white-space: nowrap; }
@media (max-width: 820px) {
  .hd .hd-cta { margin-left: auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .hd .hd-menu { margin-left: 8px; }
}
/* first screen: the approved line, then three doors */
.hero-sub { max-width: 44ch; }
.hero-doors { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: var(--s5); }
.hero-doors .btn { min-height: 48px; padding: 12px 20px; font: 700 16px/1 var(--font-display); }
.hero-doors .btn.line { background: transparent; border: 2px solid currentColor; }
@media (max-width: 820px) {
  .hero-doors { gap: 10px; margin-top: var(--s4); }
  .hero-doors .btn { min-height: 46px; padding: 10px 14px; font-size: 15px; }
  .hero-doors .btn.acid { flex: 1 1 100%; justify-content: center; }
  .hero-doors .btn.solid, .hero-doors .btn.line { flex: 1 1 0; justify-content: center; }
}
.hero-foot .tlink { font-size: clamp(15px, 1.3vw, 18px); }
/* what Neur Culture does: four areas, each with a character whose role fits and real proof */
.areas { padding: var(--s10) 0 var(--s9); }
.areas-t { font: 900 clamp(40px, 6.4vw, 104px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; max-width: 16ch; margin: 0 0 var(--s7); }
.areas-grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.ara { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: var(--s5) var(--s5) 0; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.ara h3 { font: 900 clamp(30px, 2.6vw, 42px)/.95 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin: 0 0 var(--s3); }
.ara p { margin: 0; font: 500 17px/1.45 var(--font-display); max-width: 26ch; }
.ara .ara-go { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s4); }
.ara .ara-go .tlink { font-size: 16px; }
.ara-ch { margin-top: auto; align-self: flex-end; height: 190px; width: auto; max-width: 70%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 10px 14px rgba(13,13,13,.28)); }
.ara-c { background: var(--red); color: var(--ink); }
.ara-b { background: var(--ink); color: var(--paper); }
.ara-e { background: var(--ochre); color: var(--ink); }
.ara-i { background: var(--cobalt); color: var(--paper); }
@media (max-width: 1100px) { .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .areas { padding: var(--s8) 0 var(--s7); }
  .areas-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .ara { min-height: 0; flex-direction: row; flex-wrap: wrap; padding: var(--s4) var(--s4) 0; }
  .ara > h3, .ara > p { flex: 1 1 100%; }
  .ara .ara-go { flex: 1 1 55%; padding-bottom: var(--s4); }
  .ara-ch { height: 130px; max-width: 40%; }
}
/* the work, framed */
.ws-intro { padding-top: var(--s9); padding-bottom: var(--s5); }
.ws-intro h2 { font: 900 clamp(40px, 6.4vw, 104px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin: 0 0 var(--s3); }
.ws-intro p { margin: 0; max-width: 46ch; font: 500 clamp(17px, 1.4vw, 20px)/1.45 var(--font-display); }
/* how a piece comes together */
.howto { padding: var(--s10) 0 var(--s9); }
.ht-t { font: 900 clamp(36px, 5vw, 84px)/.92 var(--font-display); font-stretch: 62%; text-transform: uppercase; max-width: 18ch; margin: 0 0 var(--s3); }
.ht-l { margin: 0 0 var(--s6); font: 500 clamp(17px, 1.4vw, 20px)/1.45 var(--font-display); max-width: 46ch; }
.ht-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.ht-s { border-right: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.ht-s:last-child { border-right: 0; }
.ht-s > a, .ht-s.ht-plain { display: flex; flex-direction: column; gap: 10px; padding: var(--s5) var(--s4) var(--s5) 0; min-height: 190px; color: inherit; text-decoration: none; }
.ht-s > a { padding-left: 0; }
.ht-s + .ht-s > a, .ht-s + .ht-s.ht-plain { padding-left: var(--s4); }
.ht-n { font: 900 46px/1 var(--font-display); font-stretch: 62%; color: var(--cobalt); }
.ht-st { font: 700 18px/1.3 var(--font-display); }
.ht-go { margin-top: auto; font: 700 15px/1.3 var(--font-display); text-decoration: underline; text-underline-offset: 4px; }
.ht-plain .ht-n { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.ht-plain .ht-st { color: color-mix(in srgb, var(--ink) 60%, transparent); font-weight: 600; }
.ht-s > a:hover .ht-st { text-decoration: underline; }
@media (max-width: 900px) {
  .ht-steps { grid-template-columns: 1fr; }
  .ht-s { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
  .ht-s > a, .ht-s.ht-plain, .ht-s + .ht-s > a, .ht-s + .ht-s.ht-plain { flex-direction: row; align-items: baseline; min-height: 0; padding: var(--s4) 0; gap: 14px; flex-wrap: wrap; }
  .ht-n { font-size: 34px; min-width: 32px; }
  .ht-st { flex: 1; }
  .ht-go { margin: 0 0 0 46px; flex-basis: 100%; }
}
/* more guides under the featured one */
.hg-row { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.hg-row a { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; gap: 4px 14px; color: inherit; text-decoration: none; align-items: start; }
.hg-row .gc-img { grid-row: 1 / 3; display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid currentColor; }
.hg-row .gc-img img { width: 100%; height: 100%; object-fit: cover; }
.hg-rk { font: 600 13px/1.3 var(--font-display); opacity: .8; }
.hg-rt { font: 800 17px/1.25 var(--font-display); }
.hg-row a:hover .hg-rt { text-decoration: underline; }
@media (max-width: 820px) { .hg-row { grid-template-columns: 1fr; gap: var(--s4); } .hg-row a { grid-template-columns: 76px 1fr; } }
/* founder line in the belief section */
.q-founder { display: block; margin: 0 0 var(--s4); font: 600 16px/1.4 var(--font-display); }
/* phones: the line and three doors take the first screen, so the hero runs past it and the stickers keep a full pit */
@media (max-width: 820px) { .hero { height: calc(100svh + 230px); min-height: 900px; } }

/* Home areas, 2026-11-03: belief, before-and-after line, what we do, proof by name */
.areas-t { margin-bottom: var(--s4); }
.areas-l { margin: 0 0 var(--s7); max-width: 60ch; font: 500 clamp(18px, 1.5vw, 22px)/1.45 var(--font-display); }
.ara .ara-k { font: 700 12px/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s2); opacity: .85; }
.ara .ara-bel { font: italic 400 clamp(22px, 1.8vw, 28px)/1.15 var(--font-serif); margin: 0 0 var(--s3); max-width: 22ch; }
.ara .ara-pr { margin-top: var(--s3); font-size: 15px; font-weight: 700; }
@media (max-width: 720px) { .ara > .ara-k, .ara > .ara-bel, .ara > .ara-pr { flex: 1 1 100%; } }
@media (min-width: 721px) { .ara .ara-k { min-height: 2.6em; } .ara .ara-bel { min-height: 2.3em; } }
/* GQ 2026-11-03: belief lines in the clear sans, bigger card text, no name lists */
.ara .ara-bel { font: 800 clamp(22px, 1.9vw, 28px)/1.12 var(--font-display); font-style: normal; letter-spacing: -.005em; max-width: 20ch; }
.ara p:not(.ara-k):not(.ara-bel):not(.ara-go) { font-size: 18px; line-height: 1.5; }
.ara .ara-k { font-size: 13px; opacity: 1; }
/* Guide pages, 2026-11-03: you end with, costs, lists, labelled copy boxes, audio */
.gx-ends { margin: 0 0 var(--s6); padding: var(--s5) var(--s6); background: var(--ink); color: var(--paper); font: 700 clamp(19px, 1.5vw, 23px)/1.4 var(--font-display); }
.gx-ends b { display: block; margin-bottom: var(--s2); font: 700 13px/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--acid); }
.gx-costs { margin: var(--s6) 0 0; padding: var(--s5) var(--s6); border: 2px solid var(--ink); }
.gx-costs h2 { margin: 0 0 var(--s3); font: 800 22px/1.2 var(--font-display); }
.gx-costs ul, .gx-list { margin: 0 0 var(--s4); padding-left: 1.1em; display: grid; gap: var(--s2); font: 400 18px/1.5 var(--font-display); max-width: 62ch; }
.gx-costs ul { margin: 0; }
.gx-code-k { margin: var(--s5) 0 0 !important; font: 700 13px/1.3 var(--font-display) !important; letter-spacing: .14em; text-transform: uppercase; }
.gx-code-k + .gx-code { margin-top: var(--s2); }
.gx-audio { margin: var(--s5) 0; padding: var(--s5); background: var(--ink); color: var(--paper); }
.gx-audio figcaption { margin: 0 0 var(--s3); font: 800 20px/1.25 var(--font-display); }
.gx-audio audio { width: 100%; display: block; }
.gx-audio .gx-audio-c { margin: var(--s3) 0 0; font-size: 15px; opacity: .8; }