/* ══════════════════════════════════════════════════════════════════════════
   CAPITAL CULTURES · COLLIDE — site layer (rebuild 28.09.2026)
   Direction: inheritance of the owner's canon clone «Cultures Collide»
   (01.09.2026) — warm paper and grain, five paints laid as torn blobs,
   black-and-white photographs on torn paper, brush buttons, Anton caps.
   Two families only (project law): Anton for display, Figtree for the rest.
   Tokens are law: no raw hex below the :root block.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/anton-latin.woff2") format("woff2");
  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: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  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: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/figtree-italic-latin.woff2") format("woff2"); }

:root {
  /* ground */
  --paper: #EFE6DC;
  --paper-deep: #E6DACB;
  --paper-slip: #F7F1E8;
  --field: #E9DFD3;
  /* inks — three blacks, deliberately distinct */
  --ink: #111111;
  --ink-body: #4B4441;
  --ink-soft: #6A615B;
  --ink-nav: #37322F;
  --night: #141618;
  --night-text: #D9D4CC;
  --night-dim: #A8A29A;
  /* paints (decoration) */
  --purple: #8B59B7;
  --teal: #29958A;
  --yellow: #E9B245;
  --red: #DE5B44;
  --blue: #1D55C8;
  --green: #69A57D;
  /* paints that may carry text */
  --purple-ink: #6B4491;
  --red-ink: #A83A26;
  --teal-ink: #1C6E66;
  /* type */
  --f-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  /* layout */
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 56px);
  --sec: clamp(56px, 8vw, 128px);
  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-brush: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;
  --paint: var(--purple);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; }
body {
  background: var(--paper) url("../img/paper.webp") repeat;
  background-size: 512px 512px;
  color: var(--ink);
  font: 400 18px/1.62 var(--f-body);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--purple-ink); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sr-only, .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── type ─────────────────────────────────────────────────────────────── */
.d, h1, h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  line-height: .92; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(54px, 9vw, 132px); }
h2 { font-size: clamp(38px, 5.4vw, 76px); }
h3 { font: 800 clamp(20px, 1.9vw, 25px)/1.2 var(--f-body); letter-spacing: -.01em; color: var(--ink); }
h4 { font: 800 18px/1.3 var(--f-body); }
.eyebrow, .label { font: 700 12.5px/1.35 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-nav); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.eyebrow i { width: 28px; height: 2px; background: currentColor; display: inline-block; }
p { max-width: 68ch; }
.lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--ink-body); }
.prose { color: var(--ink-body); }
.prose > * + * { margin-top: 1em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 28px; }
.prose ul li + li { margin-top: .45em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 16px; height: 5px;
  background: var(--paint); border-radius: 3px 1px 4px 2px; transform: rotate(-4deg); }
.prose ol { list-style: decimal; }
.prose strong, .prose b { color: var(--ink); }
.prose a, a.link, .link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--paint); cursor: pointer; }
.prose a:hover, a.link:hover, .link:hover { text-decoration-thickness: 4px; }
.small, .src, .note-line { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.mono { font: 700 12.5px/1.45 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-nav); }
.dim, .dimmer { color: var(--ink-soft); }

/* painted understroke — one png shape, recoloured per section by mask */
.hgroup { display: inline-block; max-width: 100%; position: relative; }
.stroke { display: block; height: clamp(14px, 1.6vw, 22px); width: min(62%, 360px); min-width: 140px;
  margin: clamp(6px, .9vw, 12px) 0 0 2px; background: var(--paint);
  -webkit-mask: url("../img/stroke-hero.png") left center / 100% 100% no-repeat;
          mask: url("../img/stroke-hero.png") left center / 100% 100% no-repeat; }
.stroke--2 { -webkit-mask-image: url("../img/stroke-high.png"); mask-image: url("../img/stroke-high.png"); }
.stroke--3 { -webkit-mask-image: url("../img/stroke-why.png"); mask-image: url("../img/stroke-why.png"); }
.stroke--4 { -webkit-mask-image: url("../img/stroke-exp.png"); mask-image: url("../img/stroke-exp.png"); }
.p-purple { --paint: var(--purple); } .p-teal { --paint: var(--teal); } .p-yellow { --paint: var(--yellow); }
.p-red { --paint: var(--red); } .p-blue { --paint: var(--blue); } .p-green { --paint: var(--green); }

/* a word laid on a paint blob (hero, waitlist) */
.blobword { position: relative; display: inline-block; z-index: 0; }
.blobword::before { content: ""; position: absolute; z-index: -1; inset: 2% -14% -10% -10%;
  background: url("../paint/blob-yellow.webp") center / 100% 100% no-repeat; }
.blobword--teal::before { background-image: url("../paint/blob-teal-wide.webp"); }
.blobword--purple::before { background-image: url("../paint/blob-purple.webp"); }

/* ── buttons & links ──────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px;
  background: url("../img/brush-btn.png") center / 100% 100% no-repeat; color: var(--paper-slip);
  border: 0; cursor: pointer; text-decoration: none; padding: 16px 32px 17px;
  font: 800 14.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease-out); }
.btn:hover { transform: rotate(-.8deg) scale(1.035); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn--sm { min-height: 44px; padding: 13px 24px 14px; font-size: 13px; }
.arr { width: 20px; height: 13px; flex: 0 0 auto; display: inline-block; background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 13"><path d="M1 6.5h16.6M12.4 1.4l5.4 5.1-5.4 5.1" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 13"><path d="M1 6.5h16.6M12.4 1.4l5.4 5.1-5.4 5.1" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  transition: transform var(--t-fast) var(--ease-out); }
a:hover > .arr, button:hover > .arr { transform: translateX(4px); }
.under { position: relative; display: inline-flex; align-items: center; gap: 11px; min-height: 44px;
  font: 800 14px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; padding-bottom: 4px; }
.under::after { content: ""; position: absolute; left: -1px; right: 31px; bottom: 6px; height: 4px;
  background: var(--ink); border-radius: 3px 1px 3px 2px; transform: rotate(-.5deg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(24px, 3vw, 36px); }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50;
  background: var(--paper) url("../img/paper.webp") repeat; background-size: 512px 512px;
  transition: box-shadow var(--t-fast); }
.site-header.is-scrolled { box-shadow: 0 2px 0 rgba(17,17,17,.14); }
.site-header .wrap { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); min-height: 84px; }
.logo { flex: 0 0 auto; display: block; }
.logo img { width: clamp(112px, 10vw, 146px); }
.nav { display: flex; gap: clamp(14px, 1.9vw, 30px); margin-left: auto; }
.nav a { position: relative; font: 800 13.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-nav); text-decoration: none; padding: 12px 0; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current]::after, .nav a:hover::after { content: ""; position: absolute; left: -4px; right: -5px; bottom: 3px;
  height: 4px; background: var(--ink); border-radius: 2px/1.5px; transform: rotate(1.6deg); }
.nav a:hover:not([aria-current])::after { background: var(--paint); }
.lang { display: flex; gap: 2px; font: 800 13px/1 var(--f-body); letter-spacing: .08em; }
.lang a, .lang span { padding: 12px 7px; text-decoration: none; color: var(--ink-soft); }
.lang [aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.site-header .btn { flex: 0 0 auto; }
.burger { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer; font: 800 13px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.burger i { width: 26px; height: 14px; position: relative; display: inline-block;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transition: border-color var(--t-fast); }
.burger i::before, .burger i::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 3px; margin-top: -1.5px;
  background: var(--ink); border-radius: 2px; opacity: 0; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }
.burger[aria-expanded="true"] i { border-color: transparent; }
.burger[aria-expanded="true"] i::before { opacity: 1; transform: rotate(45deg); }
.burger[aria-expanded="true"] i::after { opacity: 1; transform: rotate(-45deg); }
.panel { display: none; }

/* ── heroes ───────────────────────────────────────────────────────────── */
.hero { position: relative; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(20px, 4vw, 56px); padding-block: clamp(28px, 4vw, 64px) clamp(48px, 6vw, 96px); }
.hero-copy { position: relative; z-index: 2; container-type: inline-size; }
.hero h1 { --h1: clamp(54px, 9vw, 132px); font-size: min(var(--h1), calc(100cqi / var(--fit, .01))); }
.hero-copy .eyebrow { margin-bottom: clamp(16px, 2vw, 26px); }
.hero h1 .ln { display: block; }
.hero--long h1 { --h1: clamp(44px, 5.8vw, 86px); }
.hero--long:not(.hero--text) .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hero--compact .wrap { padding-bottom: clamp(20px, 2.6vw, 40px); }
.hero .lede { margin-top: clamp(18px, 2vw, 26px); max-width: 46ch; }
.hero-note { margin-top: 22px; font: 700 13px/1.45 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-nav);
  display: flex; gap: 10px; align-items: flex-start; max-width: 48ch; }
.hero-note::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: -1px; background: var(--ink);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 6.5h16v13H4zM4 10.5h16M8.5 4v4M15.5 4v4" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 6.5h16v13H4zM4 10.5h16M8.5 4v4M15.5 4v4" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"/></svg>') center / contain no-repeat; }
.hero-art { position: relative; z-index: 1; margin-right: calc(-1 * var(--gut)); }
.hero-art img { width: 100%; }
.hero:not(.hero--home):not(.hero--text) .hero-art img { width: 112%; max-width: none; margin-left: -4%; }
.hero--text .wrap { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.hero--text .hero-art { align-self: stretch; min-height: 220px; }
.hero--text .hero-art::before { content: ""; position: absolute; inset: 6% 0 12% 8%;
  background: var(--paint-img, url("../paint/blob-teal-feather.webp")) center / contain no-repeat; opacity: .92; }
.aside-slip { position: relative; z-index: 1; margin: 18% 0 0 14%; max-width: 330px; }

/* the slip: a typed paper tag — the one piece of «still to be filled in» */
.slip { display: inline-block; background: var(--paper-slip); border: 2px dashed var(--ink); padding: 10px 16px 11px;
  font: 700 15px/1.3 var(--f-body); letter-spacing: .02em; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-2.2deg); }
.slip b { font-weight: 800; }

/* ── home hero collage (pieces land with overlap) ─────────────────────── */
.collage { position: relative; aspect-ratio: 1 / .96; width: 100%; }
.collage > * { position: absolute; }
.collage .pc img { width: 100%; height: auto; }
.hero--home .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; padding-top: clamp(20px, 2.6vw, 40px); }
.hero--home h1 { --h1: clamp(52px, 6.8vw, 100px); }
.hero--home.hero--wordy h1 { --h1: clamp(46px, 5.6vw, 82px); }
.hero--home .hero-art { margin-top: clamp(-10px, -1vw, 0px); }
.hero--home .movestrip { margin-top: clamp(18px, 2vw, 28px); }
.hero--home .lede { font-size: 17px; margin-top: 22px; }
.hero--home .movestrip .old { font-size: clamp(26px, 2.6vw, 38px); }
.hero--home .movestrip .new { font-size: clamp(36px, 3.8vw, 56px); }
.hero--home .movestrip .slip { font-size: 13.5px; padding: 7px 12px 8px; box-shadow: 3px 3px 0 var(--ink); }
.pc { will-change: transform; }
.collage .pc-a { left: 34%; top: 0; width: 64%; z-index: 2; }
.collage .pc-b { left: -2%; top: 30%; width: 56%; z-index: 3; }
.collage .pc-c { left: 44%; top: 56%; width: 50%; z-index: 4; }
.collage .pc-blob { left: 4%; top: 6%; width: 58%; z-index: 1; opacity: .95; }
.collage .pc-scrib { left: 16%; top: 14%; width: 12%; z-index: 5; }
.collage .pc-tag { right: 2%; top: 3%; z-index: 6; }
.pc-tag .slip { font-size: 14px; transform: rotate(3deg); }

/* ── sections ─────────────────────────────────────────────────────────── */
.sec { padding-block: calc(var(--sec) * .5) calc(var(--sec) * .5); position: relative; }
.sec:first-of-type { padding-top: calc(var(--sec) * .35); }
.sec-head { max-width: 860px; margin-bottom: clamp(24px, 3vw, 44px); }
.sec-head .dek { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-body); }
.sec-head .label { margin-top: 14px; color: var(--ink-soft); }
.sec-head--3 h2, .sec-head h3.h { font-size: clamp(28px, 3vw, 42px); font-family: var(--f-display); font-weight: 400;
  text-transform: uppercase; line-height: .95; }
.sec > .wrap > * + * { margin-top: clamp(22px, 2.6vw, 36px); }
.sec > .wrap > .sec-head + * { margin-top: 0; }
.sec--night { background: var(--night); color: var(--night-text); padding-block: calc(var(--sec) * .6); }
.sec--night h2, .sec--night h3, .sec--night .d, .sec--night strong { color: var(--paper-slip); }
.sec--night .dek, .sec--night .prose, .sec--night p { color: var(--night-text); }
.sec--night .label, .sec--night .mono, .sec--night .small, .sec--night .src { color: var(--night-dim); }
.sec--night .prose a, .sec--night a.link, .sec--night .link { color: var(--paper-slip); text-decoration-color: var(--yellow); }
.sec--night .rows { border-color: var(--paper-slip); }
.sec--night .row { border-color: rgba(247,241,232,.28); }
.sec--night .row .n { color: var(--yellow); }
.sec--night .row h3 { color: var(--paper-slip); }
.sec--night .tbl th { color: var(--night-dim); border-color: var(--paper-slip); }
.sec--night .tbl td { border-color: rgba(247,241,232,.22); }
.sec--night .tbl td:first-child { color: var(--paper-slip); }
.sec--night .under { color: var(--paper-slip); } .sec--night .under::after { background: var(--yellow); }
.sec--night .fact .v { color: var(--paper-slip); }
.sec--night .doors a { border-color: var(--paper-slip); } .sec--night .doors h3 { color: var(--paper-slip); }
.sec--night .doors .dn { color: var(--night-text); }
.sec--night .note { color: var(--ink); box-shadow: 6px 6px 0 var(--yellow); } .sec--night .note p { color: var(--ink-body); }
.sec--night .note a, .sec--night .note .link { color: var(--ink); text-decoration-color: var(--purple); }
.sec--night .note--plan { border-color: var(--paper-slip); } .sec--night .note--plan p, .sec--night .note--plan .c { color: var(--paper-slip); } .sec--night .note--plan a { color: var(--paper-slip); }
.sec--night .bullets li { color: var(--night-text); }
.sec--night .tl li { border-color: rgba(247,241,232,.24); } .sec--night .tl .what { color: var(--paper-slip); }
.sec--night .tl .note-t { color: var(--night-dim); } .sec--night .tl .when { color: var(--yellow); }
.sec--night .faq details { border-color: rgba(247,241,232,.28); } .sec--night .faq summary { color: var(--paper-slip); }
.sec--night .stamp { border-color: var(--paper-slip); color: var(--paper-slip); }
.sec--night .bignum .big { color: var(--yellow); }
.sec--night .bignum .big::before { display: none; }
.sec--night .bignum .lbl { color: var(--paper-slip); }
.sec--edge::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 40px; transform: translateY(-99%);
  background: url("../paint/torn-edge.webp") center bottom / 1882px 40px repeat-x; }
.sec--split > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.sec--split > .wrap > * + * { margin-top: 0; }

/* ruled rows — the landing's bilingual ruled row, one language at a time */
.rows { border-top: 3px solid var(--ink); }
.row { display: grid; grid-template-columns: 70px minmax(0, 4fr) minmax(0, 7fr); gap: clamp(12px, 2.4vw, 40px);
  padding-block: clamp(18px, 2.2vw, 28px); border-bottom: 2px solid rgba(17,17,17,.42); align-items: baseline; }
.row .n { font: 400 clamp(26px, 2.6vw, 38px)/1 var(--f-display); color: var(--red-ink); }
.row h3 { font-size: clamp(19px, 1.7vw, 23px); }
.row .t { color: var(--ink-body); }
.row .t > * + * { margin-top: .6em; }
.rows-note { margin-top: 12px; }

/* data table */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.tbl caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 14px; color: var(--ink-soft); }
.tbl th { text-align: left; font: 800 12.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-nav); padding: 0 16px 12px 0; border-bottom: 3px solid var(--ink); vertical-align: bottom; }
.tbl td { padding: 14px 16px 14px 0; border-bottom: 2px solid rgba(17,17,17,.2); vertical-align: top; color: var(--ink-body); }
.tbl td:first-child { color: var(--ink); font-weight: 700; }

/* timeline */
.tl { border-top: 3px solid var(--ink); }
.tl li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 8px clamp(14px, 3vw, 44px);
  padding-block: 18px; border-bottom: 2px solid rgba(17,17,17,.3); }
.tl .when { font: 400 clamp(20px, 1.8vw, 26px)/1.05 var(--f-display); text-transform: uppercase; color: var(--ink); }
.tl .state { display: block; margin-top: 6px; font: 800 11.5px/1 var(--f-body); letter-spacing: .14em; color: var(--ink-soft); }
.tl li[data-state="now"] .state { color: var(--red-ink); }
.tl li[data-state="done"] .state { color: var(--teal-ink); }
.tl .what { font-weight: 800; color: var(--ink); }
.tl .note-t { grid-column: 2; color: var(--ink-body); font-size: 16px; }

/* facts plate */
.facts { display: grid; gap: clamp(22px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fact { border-top: 3px solid var(--ink); padding-top: 16px; }
.fact .v { display: block; font: 400 clamp(48px, 6vw, 88px)/.95 var(--f-display); color: var(--ink); }
.fact .k { display: block; text-wrap: balance; margin-top: 10px; font: 800 14px/1.35 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-nav); }
.fact .src { display: block; margin-top: 8px; }
.sec--night .fact { border-color: var(--paper-slip); }
.sec--night .fact .k { color: var(--night-text); }

/* the one big number */
.bignum { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.bignum > div:first-child { min-width: 0; container-type: inline-size; }
.bignum .big { position: relative; z-index: 0; display: inline-block; font: 400 min(clamp(92px, 16vw, 230px), calc(100cqi / 2.5))/.86 var(--f-display); color: var(--ink); padding: .08em .16em 0; }
/* beside a picture the number stands over its text */
.split .bignum { grid-template-columns: 1fr; gap: 18px; }
.bignum .big::before { content: ""; position: absolute; z-index: -1; inset: -6% -3% -10% -12%;
  background: url("../paint/blob-yellow.webp") center / 100% 100% no-repeat; }
.bignum .lbl { margin-top: 14px; font: 800 15px/1.35 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.bignum .txt { font-size: clamp(18px, 1.5vw, 21px); }
.bignum .src { margin-top: 14px; }

/* notes (callouts): a paper slip with an ink shadow; the plan note is a black brush plate */
.note { position: relative; background: var(--paper-slip); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px); max-width: 820px; transform: rotate(-.35deg); }
.note .t { font: 800 13px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 8px; }
.note .c { color: var(--ink-body); }
.note .c > * + * { margin-top: .7em; }
.note--note .t { color: var(--teal-ink); }
.note--warn { box-shadow: 6px 6px 0 var(--red); }
.note--plan { background: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--yellow); transform: rotate(.3deg); }
.note--plan .t { color: var(--yellow); }
.note--plan .c, .note--plan .c p { color: var(--paper-slip); }
.note--plan a { color: var(--paper-slip); }

/* bullets with painted ticks */
.bullets { display: grid; gap: 14px; }
.bullets li { position: relative; padding-left: 36px; color: var(--ink-body); }
.bullets li::before { content: ""; position: absolute; left: 0; top: .28em; width: 22px; height: 16px; background: var(--paint);
  -webkit-mask: url("../paint/doodle-heart.webp") center / contain no-repeat; mask: url("../paint/doodle-heart.webp") center / contain no-repeat; }
.bullets strong { color: var(--ink); }

/* doors — the link grid */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px) clamp(20px, 3vw, 48px); }
.doors--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doors--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doors a { position: relative; display: block; text-decoration: none; border-top: 3px solid var(--ink); padding: 18px 0 8px; }
.doors a::before { content: ""; position: absolute; left: 0; top: -3px; height: 7px; width: 0; background: var(--paint);
  transition: width 260ms var(--ease-out); border-radius: 0 3px 4px 0; }
.doors a:hover::before { width: 58%; }
.doors h3, .doors h2, .doors h4 { font: 400 clamp(24px, 2.4vw, 34px)/1 var(--f-display); text-transform: uppercase; display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.doors .arr { margin-top: .25em; }
.doors .dn { display: block; margin-top: 10px; color: var(--ink-body); font-size: 16.5px; }
.doors li:nth-child(5n+1) { --paint: var(--purple); } .doors li:nth-child(5n+2) { --paint: var(--teal); }
.doors li:nth-child(5n+3) { --paint: var(--yellow); } .doors li:nth-child(5n+4) { --paint: var(--red); }
.doors li:nth-child(5n+5) { --paint: var(--blue); }

/* the four big doors of the home page — a picture each */
.bigdoors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); }
.bigdoors a { display: flex; flex-direction: column; text-decoration: none; }
.bigdoors .pic { aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 10px; }
.bigdoors .pic img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform 300ms var(--ease-out); }
.bigdoors a:hover .pic img { transform: rotate(-1.5deg) scale(1.03); }
.bigdoors h3 { font: 400 clamp(30px, 2.8vw, 42px)/.95 var(--f-display); text-transform: uppercase; }
.bigdoors p { margin-top: 10px; color: var(--ink-body); font-size: 16.5px; }
.bigdoors .under { margin-top: auto; padding-top: 14px; align-self: flex-start; justify-self: start; }

/* split with a torn photo */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4.5vw, 80px); align-items: center; }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip > .split-art { order: 2; }
.split--top { align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-body > * + * { margin-top: 1em; }
.fig { position: relative; }
.fig figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-soft); max-width: 52ch; padding-left: 4%; }
.fig--portrait { max-width: 520px; }
.fig--half { max-width: 760px; }

/* passport stamps */
.stamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.stamp { border: 2px dashed var(--ink); padding: 14px 12px; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(var(--r, -1deg)); background: rgba(247,241,232,.6); text-decoration: none; }
.stamp:nth-child(2n) { --r: 1.2deg; } .stamp:nth-child(3n) { --r: -.4deg; }
.stamp .no { font: 400 30px/1 var(--f-display); color: var(--red-ink); }
.stamp .lb { font: 800 14px/1.25 var(--f-body); }
.stamps-state { margin-top: 10px; }

/* quotes */
.quote { max-width: 980px; }
.quote blockquote p { font: 400 clamp(30px, 3.6vw, 52px)/1.02 var(--f-display); text-transform: uppercase; color: var(--ink); max-width: none; }
.quote figcaption { margin-top: 16px; }

/* faq */
.faq { border-top: 3px solid var(--ink); max-width: 980px; }
.faq details { border-bottom: 2px solid rgba(17,17,17,.34); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 20px 0; font: 800 clamp(18px, 1.6vw, 21px)/1.3 var(--f-body); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; transition: transform var(--t-fast) var(--ease-out);
  background: linear-gradient(var(--paint), var(--paint)) center / 100% 4px no-repeat, linear-gradient(var(--paint), var(--paint)) center / 4px 100% no-repeat; border-radius: 2px; }
.faq summary:hover::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(45deg); }
@media (min-width: 901px) {
  .wrap:has(> .sec-head + .faq:last-child) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
  .wrap:has(> .sec-head + .faq:last-child) > .faq { margin-top: 0; }
}
.faq .a { padding: 0 0 22px; color: var(--ink-body); max-width: 72ch; }
.faq .a > * + * { margin-top: .7em; }

/* breadcrumbs */
.crumbs { font: 700 13px/1.4 var(--f-body); letter-spacing: .06em; color: var(--ink-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-nav); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.hero .crumbs { margin-bottom: 18px; }

/* the move: a date struck with the brush (festival page, home band) */
.struck { position: relative; display: inline-block; color: var(--ink-soft); }
.struck::after { content: ""; position: absolute; left: -3%; right: -3%; top: 40%; height: .32em; background: var(--purple);
  -webkit-mask: url("../img/stroke-hero.png") center / 100% 100% no-repeat; mask: url("../img/stroke-hero.png") center / 100% 100% no-repeat;
  transform: rotate(-2deg); transform-origin: left center; }
.movestrip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.movestrip .old { font: 400 clamp(34px, 5vw, 70px)/1 var(--f-display); text-transform: uppercase; }
.movestrip .new { font: 400 clamp(46px, 7.6vw, 112px)/.95 var(--f-display); text-transform: uppercase; }

/* roll-call of communities */
.roll { display: flex; flex-wrap: wrap; gap: 8px 10px; }
/* a plain name is a tag on paper; a name with its own article is a painted link */
.roll li { font: 700 15px/1 var(--f-body); padding: 9px 13px; border: 1.5px dashed rgba(17,17,17,.55); border-radius: 30px 26px 32px 24px / 22px 30px 24px 28px; color: var(--ink-body); }
.roll li.has-link { padding: 0; border: 2px solid var(--ink); background: var(--yellow); }
.roll li.has-link a { display: block; padding: 9px 13px; font-weight: 800; color: var(--ink); text-decoration: none; }
.roll li.has-link a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ── forms ────────────────────────────────────────────────────────────── */
.form { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.f { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; }
.f--half { grid-column: auto; }
.f label, .f legend { font: 800 13px/1.35 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-nav); }
.f .req { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ink-soft); }
.f input:not([type=checkbox]):not([type=radio]), .f select, .f textarea {
  width: 100%; min-height: 50px; background: var(--field); border: 2px solid var(--ink); border-radius: 3px 5px 3px 4px;
  padding: 12px 14px; font-size: 17px; color: var(--ink); }
.f textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.f input::placeholder, .f textarea::placeholder { color: #7B716A; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--purple-ink); outline-offset: 1px; background: var(--paper-slip); }
.f--group { border: 0; gap: 10px; }
.f--group legend { margin-bottom: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 16.5px; color: var(--ink-body); line-height: 1.4; }
.f label.check { font: 500 16.5px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-body); }
.check input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ink); }
.f .help { font-size: 14px; color: var(--ink-soft); }
.f .err { font-size: 14.5px; font-weight: 700; color: var(--red-ink); }
.f .err:empty { display: none; }
.f [aria-invalid="true"] { border-color: var(--red-ink) !important; }
.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-summary { background: var(--paper-slip); border: 2px solid var(--red-ink); padding: 12px 16px; margin-bottom: 18px; font-weight: 700; color: var(--red-ink); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.form-foot .msg { font-size: 15px; color: var(--ink-body); }
.form-done { border: 2px dashed var(--ink); background: var(--paper-slip); padding: 22px 24px; box-shadow: 5px 5px 0 var(--teal); }
.form-done .t { font: 400 clamp(26px, 2.6vw, 36px)/1 var(--f-display); text-transform: uppercase; }
.form-done .c { margin-top: 10px; font-weight: 700; }
.form-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-soft); }
.sec--night .f label, .sec--night .f legend { color: var(--night-text); }
.sec--night .check { color: var(--night-text); }
.sec--night .f .help, .sec--night .form-note { color: var(--night-dim); }
.sec--night .f input:not([type=checkbox]), .sec--night .f textarea, .sec--night .f select { background: var(--paper-slip); }

/* ── the waitlist band (every page) ───────────────────────────────────── */
.waitlist { position: relative; padding-block: clamp(64px, 8vw, 120px) clamp(56px, 7vw, 104px); overflow: hidden; }
.waitlist::before { content: ""; position: absolute; left: -30px; bottom: 0; width: clamp(40px, calc((100vw - var(--wrap)) / 2 + var(--gut) + 10px), 170px); height: 88%;
  background: url("../paint/blob-teal.webp") left bottom / contain no-repeat; opacity: .95;
  transform: scaleX(-1); /* the cut edge of the strip goes to the page edge, the torn edge faces the text */ }
.waitlist::after { content: ""; position: absolute; right: -30px; top: 10%; width: clamp(40px, calc((100vw - var(--wrap)) / 2 + var(--gut) + 6px), 130px); height: 70%;
  background: url("../paint/blob-coral-swash.webp") right top / contain no-repeat; opacity: .9; }
.waitlist .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.waitlist h2 { font-size: clamp(50px, 7.4vw, 108px); }
.waitlist .dek { margin-top: 18px; color: var(--ink-body); font-size: clamp(17px, 1.4vw, 20px); max-width: 40ch; }
.waitlist .form-grid { grid-template-columns: 1fr; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--night); color: var(--night-text); position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 34px; transform: translateY(-100%);
  background: url("../paint/torn-edge.webp") center bottom / 1882px 34px repeat-x; }
.site-footer .wrap { padding-block: clamp(44px, 5vw, 72px) 28px; }
.f-top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: clamp(24px, 3vw, 48px); }
.f-logo { width: 132px; }
.f-tag { margin-top: 14px; font-size: 15px; color: var(--night-text); }
.f-def { margin-top: 12px; font-size: 14px; color: var(--night-dim); max-width: 36ch; }
.f-col h2 { font: 800 12.5px/1.2 var(--f-body); letter-spacing: .14em; color: var(--night-dim); margin-bottom: 14px; text-transform: uppercase; }
.f-col a { display: block; padding: 5px 0; color: var(--night-text); text-decoration: none; font-size: 15.5px; }
.f-col a:hover { color: var(--paper-slip); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.f-col p { font-size: 15px; color: var(--night-text); }
.f-social { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; }
.f-social .link { font-size: 13.5px; color: var(--night-dim); text-decoration: none; padding: 6px 0; }
.f-social .link:hover { color: var(--paper-slip); text-decoration: underline; }
.f-bottom { margin-top: clamp(32px, 4vw, 56px); padding-top: 20px; border-top: 1px solid rgba(217,212,204,.18);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; align-items: center; font-size: 13.5px; color: var(--night-dim); }
.f-bottom a { color: var(--night-dim); }
.credit { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.credit img { width: 30px; height: 30px; background: var(--paper-slip); border-radius: 4px; padding: 3px; }

/* ── consent bar: one thin strip on the bottom edge, never over the hero ─ */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--paper-slip);
  border-top: 2px solid var(--ink); padding: 8px var(--gut); font-size: 14px; line-height: 1.4; color: var(--ink-body);
  display: flex; align-items: center; justify-content: center; gap: 8px 22px; flex-wrap: wrap; }
.consent[hidden] { display: none; }
.consent p { max-width: none; }
.consent .row-b { display: flex; gap: 8px; flex: 0 0 auto; }
.consent button { min-height: 40px; padding: 0 16px; border: 2px solid var(--ink); background: var(--paper-slip); cursor: pointer;
  font: 800 12.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
body:has(.consent:not([hidden])) .bug { bottom: 70px; }
.consent button.yes { background: var(--ink); color: var(--paper-slip); }

/* ── bug report button ────────────────────────────────────────────────── */
.bug { position: fixed; right: 16px; bottom: 16px; z-index: 70; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink);
  background: var(--paper-slip); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; font: 800 12.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.bug-dlg { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--paper-slip); padding: 24px; max-width: min(560px, calc(100vw - 32px)); margin: auto; }
.bug-dlg::backdrop { background: rgba(17,17,17,.45); }
.bug-dlg h2 { font-size: 36px; margin-bottom: 12px; }
.bug-dlg .x { position: absolute; right: 10px; top: 10px; min-width: 44px; min-height: 44px; background: none; border: 0; font: 400 26px/1 var(--f-display); cursor: pointer; }

/* ── motion ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .pc { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 40px)) rotate(var(--fr, -3deg)) scale(.96); }
  .js .is-in .pc { animation: land 900ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  @keyframes land { to { opacity: 1; transform: none; } }
  .js .hero h1 .ln { clip-path: inset(0 0 100% 0); transform: translateY(.3em); }
  .js .hero.is-in h1 .ln { animation: rise 820ms var(--ease-out) forwards; animation-delay: calc(80ms + var(--i, 0) * 110ms); }
  /* the rise ends unclipped: the last frame opens the box on every side */
  @keyframes rise { to { clip-path: inset(-30% -60vw -30% -60vw); transform: none; } }
  .js .stroke { clip-path: inset(0 100% 0 0); }
  .js .is-in .stroke { animation: wipe 700ms var(--ease-brush) forwards; animation-delay: var(--sd, 380ms); }
  @keyframes wipe { to { clip-path: inset(0 0 0 0); } }
  .js .struck::after { clip-path: inset(0 100% 0 0); }
  .js .is-in .struck::after { animation: wipe 640ms var(--ease-brush) 700ms forwards; }
  .js .rv { opacity: 0; transform: translateY(26px); }
  .js .rv.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .rv.is-in .row, .js .rv.is-in .doors li, .js .rv.is-in .bigdoors li { animation: rowin 620ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 70ms); }
  @keyframes rowin { from { opacity: 0; transform: translateY(14px); } }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1120px) {
  .nav { gap: 14px; } .nav a { font-size: 12.5px; }
  .site-header .btn { display: none; }
  .bigdoors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body { font-size: 17px; }
  .nav { display: none; }
  .site-header .lang { margin-left: auto; }
  .site-header .lang a, .site-header .lang span { padding: 12px 6px; }
  .burger { display: inline-flex; margin-left: 6px; }
  .site-header .wrap { min-height: 68px; }
  .panel { position: fixed; inset: 68px 0 0 0; z-index: 49; overflow-y: auto;
    background: var(--paper) url("../img/paper.webp") repeat; background-size: 512px 512px; padding: 20px var(--gut) 40px; }
  .panel.is-open { display: block; }
  .panel a.pn { display: block; font: 400 42px/1.05 var(--f-display); text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 2px solid rgba(17,17,17,.2); }
  .panel .sub { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0 12px; }
  .panel .sub a { font-size: 15px; padding: 6px 0; color: var(--ink-body); }
  .panel > .btn { margin: 4px 0 14px; }
  .hero .wrap, .hero--text .wrap, .hero--long:not(.hero--text) .wrap { grid-template-columns: 1fr; }
  .hero-art { margin-right: 0; order: -1; max-width: 560px; }
  .hero:not(.hero--home):not(.hero--text) .hero-art img { width: 100%; margin-left: 0; }
  .hero--text .hero-art { display: none; }
  .hero--home .hero-art { order: -1; max-width: 440px; margin: 0 auto -8px; width: 100%; }
  .row { grid-template-columns: 46px 1fr; }
  .row .t { grid-column: 2; }
  .split, .split--flip, .split--even, .bignum, .sec--split > .wrap, .waitlist .wrap { grid-template-columns: 1fr; }
  .split--flip > .split-art { order: 0; }
  .doors, .doors--3, .doors--4 { grid-template-columns: 1fr; }
  .f-top { grid-template-columns: 1fr 1fr; }
  .tl li { grid-template-columns: 1fr; }
  .tl .note-t { grid-column: 1; }
  /* tables become stacked cards */
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { border-bottom: 2px solid rgba(17,17,17,.3); padding: 12px 0; }
  .tbl td { border: 0; padding: 4px 0; }
  .tbl td::before { content: attr(data-label); display: block; font: 800 11.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
  .tbl td:first-child::before { content: none; }
  .tbl td:first-child { font-size: 18px; }
  .consent { padding: 8px 16px 10px; font-size: 13px; gap: 6px 14px; justify-content: space-between; }
  .consent button { min-height: 44px; }
  .bug { display: none; }
}
@media (max-width: 560px) {
  .bigdoors { grid-template-columns: 1fr; gap: 22px; }
  .bigdoors a { display: grid; grid-template-columns: 118px 1fr; column-gap: 16px; align-items: start; }
  .bigdoors .pic { grid-row: span 3; margin: 0; }
  .bigdoors h3 { font-size: 28px; }
  .bigdoors p { margin-top: 4px; font-size: 15.5px; }
  .bigdoors .under { padding-top: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .f--half { grid-column: 1 / -1; }
  .f-top { grid-template-columns: 1fr; }
  .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: clamp(46px, 14vw, 66px); }
  .hero:not(.hero--long):not(.hero--home) h1 { --h1: clamp(46px, 14vw, 66px); }
}

.f-bug { background: none; border: 0; padding: 0; color: var(--night-dim); text-decoration: underline; cursor: pointer; font: inherit; }
@media (min-width: 901px) { .f-bug-w { display: none; } }