/* Started in Queens · stage 0, second pass (2026-10-16)
   Paint: mix. Paper base, yellow hero accents, blue deep panels, orange join. Neo-brutalist frames:
   thick ink borders, hard offset shadows, rounded panels. Grit in the style of the 2025 SIQ story video,
   which is a reference and not an asset: halftone fields, film grain over everything, HUD marks. The scanline
   and glitch layers were removed on 2026-10-16 pending a new video concept.
   Voices, locked 2026-10-17: loud is Midnight Motion (Envato Elements, cut from the install), sign is Golos Text 700,
   quiet is Fragment Mono. Druk Wide stays declared for the archive. app.js fits the hero and product titles to their
   widest word in the live face; the clamps on them are the fallback before the fonts arrive. */

@font-face { font-family: "Midnight Motion"; src: url(assets/fonts/midnight-motion-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Midnight Motion"; src: url(assets/fonts/midnight-motion-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Midnight Motion"; src: url(assets/fonts/midnight-motion-extra-bold.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Midnight Motion"; src: url(assets/fonts/midnight-motion-black.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url(assets/fonts/golos-text-variable.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url(assets/fonts/fragment-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #F3F0E6;
  --ink: #121212;
  --yellow: #FFC214;
  --blue: #0A3BA6;
  --blue-light: #4D7CFF;
  --orange: #FF5F1F;
  --bg: var(--paper); --fg: var(--ink);
  --radius: 22px;
  --gap: clamp(12px, 1.6vw, 20px);
  --pad: clamp(18px, 2.8vw, 40px);
  --hard: 6px 6px 0 var(--ink);
  --hard-sm: 4px 4px 0 var(--ink);
  --font-loud: "Midnight Motion", "Druk Wide", "Arial Black", system-ui, sans-serif;
  --font-sign: "Golos Text", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-quiet: "Fragment Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sign);
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--gap) var(--gap);
  overflow-x: hidden;
}
.bar, main, .foot { max-width: 1800px; margin-inline: auto; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
img, video { max-width: 100%; }

/* three voices */
.loud {
  font-family: var(--font-loud);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .72; /* Midnight Motion's capitals are 0.54em tall; .72 leaves about a third of a cap between stacked lines */
  letter-spacing: -.01em;
}
.sign {
  font-family: var(--font-sign);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
}
.quiet {
  font-family: var(--font-quiet);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .01em;
  font-weight: 400;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* film grain over the whole page, static tile shifted in steps */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: .16;
  mix-blend-mode: multiply;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* the SIQ mark, recolored by currentColor */
.mark {
  display: inline-block;
  width: 64px;
  aspect-ratio: 48.80209 / 19.44854;
  background: currentColor;
  -webkit-mask: url(assets/siq-mark-v3.svg) center / contain no-repeat;
  mask: url(assets/siq-mark-v3.svg) center / contain no-repeat;
}

/* arrows: one chunky arrow symbol, rotated by class */
.arrow {
  fill: currentColor; flex: none;
  transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(var(--rot, 0deg));
  transition: transform .2s ease;
}
.arrow--se { --rot: 90deg; }
.arrow--sw { --rot: 180deg; }
.arrow--nw { --rot: 270deg; }
.arrow--e { --rot: 45deg; }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 2px;
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: 66px; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.keys { display: flex; gap: 6px; }
.keys a {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  border: 2px solid var(--fg); border-radius: 999px;
  padding: 4px 12px 4px 4px;
  background: var(--bg);
  font-family: var(--font-quiet); font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.keys .key {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-family: var(--font-loud); font-weight: 800; font-size: 14px;
}
.keys .label { display: block; height: 1.3em; overflow: hidden; line-height: 1.3; }
.keys .label span { display: block; transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.keys a:hover { background: var(--yellow); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.keys a:hover .label span { transform: translateY(-100%); }

/* ---------- panels ---------- */
.panel { border-radius: var(--radius); padding: var(--pad); margin-top: var(--gap); border: 3px solid var(--ink); box-shadow: var(--hard); }
.panel--plain { background: var(--bg); }
.panel--deep { background: var(--blue); color: var(--yellow); }
.panel--join { background: var(--orange); color: var(--ink); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px 28px; flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.section-head h2 { font-size: clamp(34px, 6vw, 96px); }
.section-head p { max-width: 36ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  width: max-content;
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 12px 16px 12px 20px;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sign); font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn .arrow { width: 18px; height: 18px; }
.btn:hover .arrow { --nx: 4px; }
.btn--solid { background: var(--yellow); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 rgba(243, 240, 230, .35); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); box-shadow: 6px 6px 0 rgba(243, 240, 230, .35); }
.btn--small { padding: 8px 12px 8px 14px; font-size: 14px; }
.btn--small .arrow { width: 14px; height: 14px; }
.panel--join .btn--solid { background: var(--ink); color: var(--yellow); }

/* ---------- hero: the mark on a CRT-treated blue panel ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; gap: clamp(20px, 4vh, 44px);
  min-height: min(90vh, 920px);
  padding: var(--pad);
  border: 3px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  box-shadow: var(--hard);
}
.hero { background: linear-gradient(160deg, var(--blue) 0%, #0A2C7A 42%, var(--ink) 100%); }
/* halftone dot fields: a dense yellow field rising from the lower right, a faint one across the top */
.hero-dots {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 194, 20, .34) 1px, transparent 1.8px) 0 0 / 9px 9px,
    radial-gradient(circle at 1px 1px, rgba(243, 240, 230, .12) 1px, transparent 1.6px) 4px 4px / 16px 16px;
  -webkit-mask: linear-gradient(115deg, transparent 22%, #000 100%), linear-gradient(180deg, #000, transparent 40%);
  mask: linear-gradient(115deg, transparent 22%, #000 100%), linear-gradient(180deg, #000, transparent 40%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .5) 100%);
}

.hud { position: absolute; inset: 14px 16px; z-index: 1; pointer-events: none; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--paper); opacity: .85; }
.hud > span { position: absolute; display: inline-flex; align-items: center; gap: 6px; }
.hud-tl { left: 0; top: 0; }
.hud-bl { left: 0; bottom: 0; }
.hud-br { right: 0; bottom: 0; font-size: 22px; line-height: 1; }
.hud-x { font-size: 14px; }
.hud-x--1 { left: 38%; top: 22%; }
.hud-x--2 { right: 22%; bottom: 34%; }
.rec { width: 9px; height: 9px; border-radius: 999px; background: var(--orange); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.hero .eyebrow { margin-top: 20px; }
/* the badge: the full v3 mark, bare, with the ring text sliding along an ellipse that hugs its outer ring (app.js moves it) */
.badge { position: relative; width: 320px; height: 175px; flex: none; display: grid; place-items: center; margin-top: 2px; }
.badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--yellow); font-family: var(--font-loud); font-weight: 800; font-size: 5px; }
.badge-logo { position: relative; width: 66%; color: var(--yellow); }

.hero-copy { position: relative; z-index: 2; container-type: inline-size; display: flex; flex-direction: column; gap: 22px; max-width: 1440px; }
/* Midnight Motion runs about 0.8em per capital, so BOROUGH needs 5.5em: 18cqi is the fallback until app.js fits the widest word */
.hero h1 { color: var(--yellow); font-size: clamp(30px, 18cqi, 150px); line-height: .64; /* the lines carry .03em padding each, so the ink gap is about .16em */ }
.hero h1 .line { display: block; overflow: hidden; padding: .03em 0; }
.hero h1 .line > .word { display: inline-block; vertical-align: top; animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
@keyframes rise { from { transform: translateY(110%); } to { transform: translateY(0); } }

.lede { max-width: 44ch; font-size: 14px; color: var(--paper); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.sign-panel {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  width: min(100%, 720px);
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--hard-sm);
}
.sign-panel .arrow { width: 54px; height: 54px; }
.sign-text { display: flex; flex-direction: column; gap: 3px; }
.sign-text .sign { font-size: clamp(20px, 2.2vw, 30px); }
.bullets { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bullet {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--blue); color: var(--paper);
  font-family: var(--font-loud); font-weight: 800; font-size: 12px; letter-spacing: -.02em;
}
.bullets .bullet:nth-child(even), .bullet--alt { background: var(--orange); color: var(--ink); }

/* ---------- ticker ---------- */
.ticker {
  margin-top: var(--gap);
  overflow: hidden; white-space: nowrap;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--hard);
}
.ticker-track {
  display: inline-flex; gap: 30px;
  padding: 14px 0 13px;
  animation: tick 36s linear infinite;
  font-family: var(--font-loud); font-weight: 800;
  text-transform: uppercase; font-size: clamp(17px, 2vw, 26px); /* Midnight Motion's capitals are short, so the marquee runs larger */
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span::after { content: "\25C6"; margin-left: 30px; color: var(--blue); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- reveals ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- shop ---------- */
.shop { margin-top: calc(var(--gap) * 3); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--gap) + 4px); }
.card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 3px solid var(--ink); border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--hard);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.card--wide { grid-column: span 2; flex-direction: row; }
.card--wide .card-art { flex: 0 0 52%; border-bottom: 0; border-right: 3px solid var(--ink); aspect-ratio: auto; }
.card-art {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .16) 1px, transparent 1.6px) 0 0 / 7px 7px,
    color-mix(in srgb, var(--tint) 14%, var(--bg));
  border-bottom: 3px solid var(--ink);
}
.card--feature .card-art { background: radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .14) 1px, transparent 1.6px) 0 0 / 7px 7px, var(--yellow); }
.card--stickers .card-art { background: color-mix(in srgb, var(--yellow) 22%, var(--bg)); }
.beanie { width: 62%; height: auto; aspect-ratio: 200 / 170; }
#beanie .crown, #beanie .cuff { fill: var(--tint, #121212); }
#beanie .crown-shade { fill: #000; opacity: .12; }
#beanie .ribs path { stroke: #000; stroke-opacity: .2; stroke-width: 3; fill: none; }
#beanie .patch { fill: var(--tint-ink, #F3F0E6); }
#beanie .patch-text { fill: var(--tint, #121212); font-family: var(--font-loud); font-weight: 900; font-size: 13px; }
.tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.tag--right { left: auto; right: 12px; background: var(--blue); color: var(--paper); }
.card-photo { width: 72%; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card-photo { transform: scale(1.05) rotate(-1deg); }
.card-photo--cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-art--swap .card-photo { position: absolute; width: 78%; opacity: 0; transition: opacity .3s, transform .35s; }
.card-art--swap .card-photo.is-on { opacity: 1; }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.card-body h3 { font-size: 22px; }
.card--wide .card-body h3 { font-family: var(--font-loud); font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.01em; }
.card-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.price { font-size: 15px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 4px; }
select {
  font-family: var(--font-sign); font-weight: 700; font-size: 15px;
  padding: 10px 12px; border-radius: 10px;
  border: 2px solid var(--fg); background: var(--bg); color: var(--fg);
  box-shadow: 3px 3px 0 var(--ink);
}
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-quiet); font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px 5px 6px;
  background: var(--bg); color: var(--ink); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.swatches button i { width: 18px; height: 18px; border-radius: 999px; background: var(--swatch); border: 2px solid var(--ink); }
.swatches button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.swatches button[aria-checked="true"] i { border-color: var(--paper); }

/* ---------- the SIQ line ---------- */
section.line { margin-top: calc(var(--gap) * 3); } /* the section only; the hero's stacked words are .line spans too */
.stops {
  list-style: none; margin: 0; padding: 10px 0 0;
  display: grid; grid-template-columns: repeat(11, 1fr);
  position: relative;
}
.stops::before {
  content: ""; position: absolute;
  left: 4.5%; right: 4.5%; top: 21px; height: 8px; border-radius: 8px;
  background: var(--yellow);
}
.stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.stop .dot {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--blue); border: 6px solid var(--yellow);
}
.stop.is-live .dot { background: var(--orange); }
.stop .sign { font-size: 15px; max-width: 9ch; color: var(--paper); }
.stop .quiet { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.stop.is-live .quiet { color: var(--orange); }

/* ---------- the story: sign board and copy ---------- */
.story {
  position: relative; isolation: isolate;
  margin-top: calc(var(--gap) * 3);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: calc(var(--gap) * 2); align-items: center;
  padding: var(--pad) 0;
}
.story::before {
  content: ""; position: absolute; inset: 0 -4px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .22) 1px, transparent 1.6px) 0 0 / 8px 8px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
/* the sign board: a transit-style service panel, thin rules, blue on ink */
.board {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--hard);
  padding: 14px 16px 16px; transform: rotate(-1.2deg);
}
.board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
}
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 10px; border-bottom: 1px solid rgba(243, 240, 230, .35); }
.board-head span { display: inline-flex; align-items: center; gap: 8px; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(243, 240, 230, .22); }
.board-list .sign { font-size: clamp(20px, 2.1vw, 30px); color: var(--yellow); }
.board-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 14px; }
.board-foot .quiet { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.board-word { font-size: clamp(44px, 6vw, 92px); line-height: .8; color: var(--blue-light); }
.story-copy { display: flex; flex-direction: column; gap: 18px; }
.story-copy h2 { font-size: clamp(30px, 4.6vw, 72px); line-height: .68; }
.story-lede { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; line-height: 1.35; max-width: 42ch; }
.bullet--line { width: 38px; height: 38px; font-size: 12px; flex: none; }

/* ---------- etsy + join ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: calc(var(--gap) + 6px); margin-top: var(--gap); }
.split--one { grid-template-columns: minmax(0, 1fr); }
.etsy { display: flex; flex-direction: column; gap: 12px; }
.etsy .btn { margin-top: auto; }
.etsy h2 { font-size: clamp(26px, 3vw, 42px); }
.join h2 { font-size: clamp(40px, 6vw, 96px); }
.join > .quiet { margin-top: 10px; max-width: 46ch; }
.join-form { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; max-width: 660px; }
.join-row { display: flex; gap: 10px; }
.join-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join input[type="email"] {
  flex: 1; min-width: 0;
  font-family: var(--font-sign); font-size: 18px; font-weight: 600;
  padding: 14px 18px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--hard-sm);
}
.join input::placeholder { color: var(--ink); opacity: .5; }
.consent { display: flex; gap: 8px; align-items: center; }
.consent input { width: 18px; height: 18px; accent-color: var(--ink); }
.form-msg { min-height: 1.5em; }

/* ---------- footer ---------- */
.foot {
  margin-top: calc(var(--gap) * 2.5);
  border-top: 3px solid var(--fg);
  padding: 28px 2px 60px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot .mark { width: 150px; }
.foot-word { font-size: clamp(26px, 5.4vw, 88px); }
.foot-meta { max-width: 52ch; }
.foot-links { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 95;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--yellow);
  padding: 10px 16px; border-radius: 999px; max-width: calc(100vw - 32px);
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { min-height: auto; }
  .badge { width: 200px; height: 109px; }
  .hud .hud-x { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .stops { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .stops::before { left: 11px; right: auto; top: 8px; bottom: 8px; width: 8px; height: auto; }
  .stop { flex-direction: row; text-align: left; gap: 14px; }
  .stop .sign { max-width: none; font-size: 20px; }
}
@media (max-width: 1040px) {
  /* the one-line wordmark and the labelled keys do not both fit under 1040px; the keys go to their letters first */
  .keys .label { display: none; }
  .keys a { padding: 4px; }
  .keys .cart-key .label { display: none; } /* outranks the cart-key rule that comes later in the file */
  .keys .cart-key { padding: 4px; }
}
@media (max-width: 560px) {
  .brand-name { display: none; } /* the mark alone where the wordmark and the letter keys cannot share the bar */
}
@media (max-width: 720px) {
  .sign-panel { grid-template-columns: auto 1fr; }
  .sign-panel .bullets { grid-column: 1 / -1; }
  .card--wide { grid-column: span 1; flex-direction: column; }
  .card--wide .card-art { flex: none; aspect-ratio: 5 / 4; border-right: 0; border-bottom: 3px solid var(--ink); }
  .hud .hud-bl { display: none; }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .join-row { flex-direction: column; }
  .join-row .btn { width: 100%; justify-content: center; }
  .board { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .grain, .rec, .hero h1 .line > .word { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}


/* ---------- the cart ---------- */
.cart-key {
  display: flex; align-items: center; gap: 8px; position: relative;
  border: 2px solid var(--fg); border-radius: 999px; padding: 4px 12px 4px 4px;
  background: var(--yellow); color: var(--ink); cursor: pointer;
  font-family: var(--font-quiet); font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.cart-key .key { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--fg); color: var(--bg); font-family: var(--font-loud); font-weight: 800; font-size: 14px; }
.cart-key .label { display: block; height: 1.3em; overflow: hidden; line-height: 1.3; }
.cart-key .label span { display: block; transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.cart-key:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cart-key:hover .label span { transform: translateY(-100%); }
.cart-count { position: absolute; top: -8px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: var(--ink); border: 2px solid var(--ink); font-family: var(--font-loud); font-weight: 800; font-size: 11px; display: grid; place-items: center; }
.cart-count[hidden] { display: none; }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(100%, 440px);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); color: var(--ink);
  border-left: 3px solid var(--ink); box-shadow: -8px 0 0 rgba(18, 18, 18, .12);
  padding: 18px;
  overflow: auto;
}
.cart[hidden] { display: none; }
.cart-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10, 59, 166, .45); }
.cart-scrim[hidden] { display: none; }
.cart-head { display: flex; justify-content: space-between; align-items: center; }
.cart-head h2 { font-size: 34px; }
.cart-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; border: 2px solid var(--ink); border-radius: 12px; padding: 10px; background: var(--bg); box-shadow: var(--hard-sm); }
.cart-line img, .cart-thumb { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: color-mix(in srgb, var(--blue) 12%, var(--bg)); }
.cart-line-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line-body .sign { font-size: 16px; }
.cart-line-total { font-size: 15px; white-space: nowrap; }
.cart-qty { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.qty { width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--ink); background: var(--bg); font-family: var(--font-loud); font-weight: 800; cursor: pointer; }
.cart-remove { background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; margin-left: auto; }
.cart-empty[hidden] { display: none; }
.cart-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--ink); padding-top: 12px; }
.cart-sum { display: flex; justify-content: space-between; font-size: 14px; }
.cart-checkout { justify-content: center; width: 100%; }
.cart-checkout:disabled { opacity: .5; transform: none; box-shadow: var(--hard-sm); cursor: default; }
.cart-msg { min-height: 1.5em; }
body.cart-open { overflow: hidden; }

/* ---------- text pages ---------- */
.doc { max-width: 860px; margin: var(--gap) auto 0; }
.doc-panel { margin-top: 0; }
.doc h1 { font-size: clamp(32px, 6vw, 72px); margin: 8px 0 18px; }
.doc-body { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; max-width: 62ch; }
.doc-body h2 { margin-top: 10px; font-size: 22px; }
.doc-address { font-style: normal; display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; margin-top: 10px; box-shadow: var(--hard-sm); }
.doc-address .btn { margin-top: 8px; }
.doc-status { margin-top: 20px; opacity: .6; }


/* The checkout page: the order summary on the left, Stripe's embedded form on the right. */
.co { max-width: 1240px; margin: 0 auto; padding: 24px 16px 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: start; }
.co-summary { container-type: inline-size; }
.co-summary .loud { font-size: clamp(24px, 12.5cqi, 56px); line-height: 0.95; margin: 4px 0 16px; }
.co-lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.co-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-top: 2px solid var(--ink); padding-top: 10px; }
.co-line img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
.co-sums { display: grid; gap: 8px; border-top: 3px solid var(--ink); padding-top: 12px; margin-bottom: 14px; }
.co-sum { display: flex; justify-content: space-between; gap: 12px; }
.co-sum--total { font-family: var(--font-loud); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }
.co-form { min-height: 360px; background: #fff; }
#checkout-form { min-height: 280px; }
#checkout-form[hidden] { display: none; }
.co-msg { margin: 12px 0 0; min-height: 1.3em; }
.co-back { margin-top: 6px; }
@media (max-width: 900px) {
  .co { grid-template-columns: 1fr; }
  .co-summary { order: 2; }
  .co-form { order: 1; }
}

/* The font preview readout, review only. */
.font-hud { position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; gap: 12px; align-items: center; padding: 7px 12px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); border-radius: 999px; box-shadow: 4px 4px 0 var(--yellow); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; max-width: calc(100% - 24px); flex-wrap: wrap; }
.font-hud b { color: var(--yellow); font-weight: 600; }
.font-hud button { font: inherit; color: var(--ink); background: var(--yellow); border: 0; border-radius: 999px; padding: 3px 9px; cursor: pointer; }

/* ---------- product pages (products/<slug>.html) ---------- */
.card-link { display: grid; place-items: center; width: 100%; height: 100%; }
.card-body h3 a { text-decoration: none; }
.card-body h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.pd-page { margin-top: var(--gap); }
.pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: calc(var(--gap) + 6px); align-items: start; }
.pd-gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 90px; }
.pd-art {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1;
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--hard);
  background:
    radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .16) 1px, transparent 1.6px) 0 0 / 7px 7px,
    color-mix(in srgb, var(--tint) 14%, var(--bg));
}
.pd-art--cover { background: color-mix(in srgb, var(--yellow) 22%, var(--bg)); }
.pd-photo { grid-area: 1 / 1; width: 78%; height: auto; aspect-ratio: 1; object-fit: contain; opacity: 0; transition: opacity .3s; }
.pd-photo.is-on { opacity: 1; }
.pd-photo--cover { width: 100%; height: 100%; object-fit: cover; }
.pd-art .beanie { width: 58%; }
.pd-thumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pd-thumbs button { width: 66px; height: 66px; padding: 4px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); cursor: pointer; box-shadow: var(--hard-sm); }
.pd-thumbs button[aria-current="true"] { background: var(--yellow); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-buy { margin-top: 0; display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.pd-buy .eyebrow a { text-decoration: none; }
.pd-buy .eyebrow a:hover { text-decoration: underline; }
/* the generator sets --title-k from the longest word in the locked face as the fallback; app.js then fits the title to its column */
.pd-buy h1 { font-size: clamp(18px, calc(var(--title-k, 7) * 1cqi), 66px); overflow-wrap: anywhere; }
.pd-price { display: flex; gap: 12px; align-items: baseline; }
.pd-price .sign { font-size: 26px; }
.pd-price s { opacity: .6; }
.pd-blurb { font-size: 17px; line-height: 1.4; max-width: 46ch; }
.pd-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pd-qty input {
  width: 92px; font-family: var(--font-sign); font-weight: 700; font-size: 15px;
  padding: 10px 12px; border-radius: 10px; border: 2px solid var(--fg); background: var(--bg); color: var(--fg);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn.is-off { opacity: .5; pointer-events: none; }
.pd-note { min-height: 1.5em; margin-top: -6px; }
.pd-ship { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.pd-ship a { text-underline-offset: 2px; }
.pd-buy h2 { font-size: 20px; margin-top: 8px; }
.pd-specs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.pd-desc { font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; max-width: 58ch; }
.pd-desc h2 { font-size: 20px; margin-top: 8px; }
.pd-more { margin-top: calc(var(--gap) * 3); }
.pd-more h2 { font-size: clamp(26px, 4vw, 56px); margin-bottom: 18px; }
.pd-more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--gap); }
.pd-more-card a {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--bg); box-shadow: var(--hard-sm);
  transition: transform .2s, box-shadow .2s;
}
.pd-more-card a:hover { transform: translate(-2px, -2px); box-shadow: var(--hard); }
.pd-more-art {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 5 / 4;
  background: color-mix(in srgb, var(--tint) 14%, var(--bg)); border-bottom: 3px solid var(--ink);
}
.pd-more-art img { width: 70%; height: auto; aspect-ratio: 1; object-fit: contain; }
.pd-more-art img.is-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-more-art .beanie { width: 56%; }
.pd-more-card .sign { padding: 4px 14px 0; font-size: 18px; }
.pd-more-card .quiet { padding: 0 14px 14px; }
@media (max-width: 900px) {
  .pd { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery { position: static; }
}