/* Awesome Cause Labs — components and homepage
   Plain CSS, no build step. Load after tokens.css.
   acl-*  = design-system components (match the Labs design system)
   hp-*   = homepage sections */

/* ---------- reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }
a { color: var(--accent-text); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: var(--radius-md); text-decoration: none; }
.skip-link:focus { top: var(--space-4); outline: var(--stroke-heavy) solid var(--focus); outline-offset: 2px; }


/* ---------- base ---------- */
.acl-graph { background-color: var(--surface); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: var(--grid-pitch) var(--grid-pitch); }
.acl-pad { padding: var(--space-6); }
.acl-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.acl-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.acl-kicker { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
:where(.acl-btn, .acl-link, .acl-input, .acl-card-link, .acl-nav a):focus-visible { outline: var(--stroke-heavy) solid var(--focus); outline-offset: 2px; }
/* every other interactive element too (the lockup, inline links): brand book, "Focus" */
:where(a, button, input, textarea, select, summary):focus-visible { outline: var(--stroke-heavy) solid var(--focus); outline-offset: 2px; }

/* ---------- Button ---------- */
.acl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; text-decoration: none; height: 48px; padding: 0 var(--space-5); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; box-sizing: border-box; white-space: nowrap; }
.acl-btn-sm { height: 38px; padding: 0 var(--space-4); font-size: 14px; }
.acl-btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sticker); }
.acl-btn-secondary { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sticker-sm); }
.acl-btn-ghost { background: transparent; color: var(--accent-text); border-color: transparent; padding: 0 var(--space-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.acl-btn-primary:hover, .acl-btn-secondary:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-sticker-lift); }
.acl-btn-primary:active, .acl-btn-secondary:active { transform: translate(2px, 2px); box-shadow: none; }
.acl-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- StageBadge ---------- */
.acl-stage { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.acl-stage svg { width: 12px; height: 12px; flex: none; }
.acl-stage-napkin { color: var(--stage-napkin); background: var(--stage-napkin-soft); }
.acl-stage-workbench { color: var(--stage-workbench); background: var(--stage-workbench-soft); }
.acl-stage-trial { color: var(--stage-trial); background: var(--stage-trial-soft); }
.acl-stage-shipped { color: var(--stage-shipped); background: var(--stage-shipped-soft); }
.acl-stage-scuttled { color: var(--stage-scuttled); background: var(--stage-scuttled-soft); }
.acl-stage-scuttled .acl-stage-label { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ---------- Tag ---------- */
.acl-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink); background: var(--surface-raised); white-space: nowrap; }

/* ---------- Lockup ---------- */
.acl-lockup { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.acl-lockup img { display: block; height: var(--acl-lockup-size, 48px); width: auto; }
.acl-lockup-words { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
/* "AWESOME CAUSE" in the parent wordmark's face (Montserrat ExtraBold), one line; LABS in Archivo below it */
.acl-lockup-parent { font-family: var(--font-wordmark); font-size: calc(var(--acl-lockup-size, 48px) * .25); line-height: 1; font-weight: 800; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: inherit; }
.acl-lockup-labs { font-family: var(--font-sans); font-stretch: 125%; font-weight: 900; font-size: calc(var(--acl-lockup-size, 48px) * .62); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }

/* ---------- SiteHeader ---------- */
.acl-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-6); background: var(--surface); border-bottom: var(--stroke-rule) solid var(--border); flex-wrap: wrap; }
.acl-nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.acl-nav a:not(.acl-btn) { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: var(--stroke-heavy) solid transparent; }
.acl-nav a:not(.acl-btn):hover { border-bottom-color: var(--line); }
.acl-nav a[aria-current="page"], .acl-nav a[aria-current="true"] { border-bottom-color: var(--accent); }

/* ---------- ExperimentCard ---------- */
.acl-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); transition: transform 120ms ease, box-shadow 120ms ease; box-sizing: border-box; }
.acl-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-sticker-lift); }
.acl-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.acl-card-code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; color: var(--ink-muted); }
.acl-card-name { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.01em; }
.acl-card-pitch { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.acl-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.acl-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--line); }
.acl-card-link { font-weight: 700; font-size: 15px; color: var(--accent-text); text-decoration: none; }
.acl-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.acl-card-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.acl-card .acl-note { transform: rotate(-3deg); }

/* ---------- MarginNote ---------- */
.acl-note { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-hand); font-weight: 600; font-size: 26px; line-height: 28px; color: var(--accent-text); }
.acl-note-sm { font-size: 21px; line-height: 24px; }
.acl-note-navy { color: var(--stage-workbench); }
.acl-note-ink { color: var(--ink); }
.acl-note svg { flex: none; width: 44px; height: 28px; overflow: visible; }
.acl-note-down { flex-direction: column; align-items: flex-start; }
.acl-note-down svg { width: 28px; height: 40px; margin-left: 12px; }

/* ---------- ShipsLog ---------- */
.acl-log { list-style: none; margin: 0; padding: 0 0 0 var(--space-5); border-left: var(--stroke-rule) dashed var(--border); display: flex; flex-direction: column; gap: var(--space-5); }
.acl-log li { position: relative; }
.acl-log li::before { content: ""; position: absolute; left: calc(-1 * var(--space-5) - 7px); top: 3px; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--surface); border: var(--stroke-rule) solid var(--border); }
.acl-log li:first-child::before { background: var(--accent); }
.acl-log time { display: block; font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.acl-log h4, .acl-log .hp-log-h { margin: 4px 0 2px; font-size: 18px; line-height: 26px; font-weight: 700; }
.acl-log p { margin: 0; font-size: 16px; line-height: 26px; }

/* ---------- TextField ---------- */
.acl-field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.acl-field label { font-size: 15px; line-height: 20px; font-weight: 700; }
.acl-input { font: inherit; font-size: 16px; height: 48px; padding: 0 var(--space-4); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); box-sizing: border-box; }
.acl-input::placeholder { color: var(--ink-muted); }
.acl-field-hint { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.acl-field-error .acl-input { border-color: var(--accent-text); border-width: var(--stroke-heavy); }
.acl-field-error .acl-field-hint { color: var(--accent-text); font-weight: 600; }

/* ---------- TakeoverHero ---------- */
.acl-hero { position: relative; overflow-x: clip; min-height: 680px; display: flex; align-items: center; justify-content: flex-end; padding: var(--space-9) var(--space-6); box-sizing: border-box; background: var(--surface); }
/* The backdrop clips itself (not the hero) so the LABS tag can spill over the torn edge onto the crew band. */
.acl-hero-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; filter: grayscale(1) contrast(1.2); opacity: .5; pointer-events: none; }
.acl-hero-backdrop picture { display: block; position: absolute; inset: -4% -3%; transform: rotate(-1.6deg); }
.acl-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
:root[data-theme="dark"] .acl-hero-backdrop { filter: grayscale(1) contrast(1.1) invert(1); opacity: .22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .acl-hero-backdrop { filter: grayscale(1) contrast(1.1) invert(1); opacity: .22; } }
/* stand-in parent page, used until a real screenshot is passed */
.acl-standin { position: absolute; inset: 0; background: #f2f0ea; color: #3a3a3a; font-family: var(--font-sans); }
.acl-standin-chrome { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #d9d6ce; }
.acl-standin-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #9c9890; display: block; }
.acl-standin-url { margin-left: 16px; flex: 0 1 420px; height: 20px; border-radius: 10px; background: #f2f0ea; font: 500 12px/20px var(--font-mono); padding: 0 12px; color: #6b6760; }
.acl-standin-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 6%; }
.acl-standin-logo { font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.acl-standin-links { display: flex; gap: 28px; }
.acl-standin-links b { display: block; width: 64px; height: 10px; border-radius: 5px; background: #a7a39b; }
.acl-standin-body { padding: 6% 6% 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6%; }
.acl-standin-h { font-weight: 800; font-size: 66px; line-height: 1.02; letter-spacing: -.03em; margin: 0 0 28px; color: #2c2c2c; }
.acl-standin-p b { display: block; height: 14px; border-radius: 7px; background: #b8b4ab; margin-bottom: 14px; }
.acl-standin-cta { margin-top: 30px; width: 240px; height: 56px; border-radius: 10px; background: #5a5852; }
.acl-standin-art { aspect-ratio: 1; border-radius: 24px; background: #c9c5bc; }
.acl-standin-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding: 6%; }
.acl-standin-row b { height: 180px; border-radius: 14px; background: #d6d2c9; display: block; }
/* graffiti layer */
.acl-graffiti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.acl-graffiti svg.acl-scribbles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acl-graffiti .acl-mark { fill: none; stroke: var(--brand-pink); stroke-linecap: round; stroke-linejoin: round; }
.acl-graffiti .acl-mark-navy { stroke: var(--stage-workbench); }
.acl-spray { position: absolute; left: 4%; bottom: 7%; transform: rotate(-8deg); font-family: var(--font-marker); font-size: clamp(88px, 14vw, 190px); line-height: .85; color: var(--brand-pink); filter: url(#acl-spray-filter); letter-spacing: .02em; }
.acl-spray .acl-drip { position: absolute; width: 5px; border-radius: 0 0 4px 4px; background: var(--brand-pink); top: 82%; }
.acl-scrawl { position: absolute; font-family: var(--font-marker); font-size: 28px; line-height: 32px; color: var(--stage-workbench); white-space: nowrap; }
.acl-sticker { position: absolute; z-index: 3; width: 132px; height: 132px; border-radius: var(--radius-pill); background: #ffffff; border: var(--stroke-heavy) solid var(--brand-ink); box-shadow: var(--shadow-sticker); display: grid; place-items: center; transform: rotate(12deg); }
.acl-sticker img { width: 82%; height: auto; display: block; }
/* a cheap hardware-store "wet paint" sticker slapped on the sheet: we just sprayed over the old site */
.acl-sticker-wet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--brand-pink); color: #ffffff; border-color: var(--brand-ink); font-family: var(--font-sans); font-stretch: 125%; font-weight: 900; font-size: 26px; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.acl-sticker-wet::before, .acl-sticker-wet::after { content: ""; width: 64px; border-top: 3px solid currentColor; }
.acl-sticker-wet::before { margin-bottom: 6px; }
.acl-sticker-wet::after { margin-top: 6px; }
.acl-tape { position: absolute; width: 132px; height: 34px; background: var(--tape); transform: rotate(-38deg); }
.acl-hero .acl-note { position: absolute; }
/* the real content sheet */
.acl-hero-sheet { position: relative; z-index: 2; max-width: 540px; margin-right: 2%; padding: var(--space-7) var(--space-6) var(--space-6); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker); box-sizing: border-box; }
.acl-hero-sheet > .acl-tape { top: -14px; left: -36px; transform: rotate(-24deg); }
.acl-hero-sheet .acl-sticker { top: -58px; right: -46px; }
.acl-hero-sheet h1 { margin: var(--space-3) 0 var(--space-4); font-size: clamp(44px, 5.4vw, 68px); line-height: .96; font-weight: 900; letter-spacing: -.03em; }
.acl-hero-sheet p { margin: 0 0 var(--space-6); font-size: 19px; line-height: 30px; }
.acl-hero-sheet .acl-row { gap: var(--space-4); }
@media (max-width: 720px) {
  .acl-hero { padding: var(--space-8) var(--space-4); min-height: 0; justify-content: center; }
  .acl-sticker, .acl-hero .acl-note, .acl-scrawl { display: none; }
  .acl-spray { top: 2%; right: 4%; }
  .acl-hero-sheet { padding: var(--space-6) var(--space-5) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) { .acl-btn, .acl-card { transition: none; } }

/* ========== homepage ========== */
  .hp-wrap { max-width: 1160px; margin: 0 auto; }
  .hp-section { position: relative; padding: var(--space-8) var(--space-6); }
  .hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); flex-wrap: wrap; }
  .hp-head h2 { margin: var(--space-2) 0 0; font-size: 56px; line-height: 56px; font-weight: 900; letter-spacing: -.025em; max-width: 1000px; }
  .hp-head p { margin: var(--space-4) 0 0; font-size: 19px; line-height: 30px; max-width: 600px; color: var(--ink-muted); }

  /* 3 — what Labs is */
  .hp-crew { background: var(--deep); color: var(--on-deep); }
  .hp-crew .acl-kicker { color: var(--seafoam); }
  .hp-crew h2 { color: var(--on-deep); }
  .hp-crew .hp-lede { margin: var(--space-4) 0 0; font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; max-width: 980px; }
  .hp-crew .hp-lede em { font-style: normal; }
  .hp-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--stroke-rule) dashed var(--on-deep); }
  .hp-principles b { display: block; font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .14em; color: var(--seafoam); }
  .hp-principles h3 { margin: var(--space-2) 0 var(--space-2); font-size: 24px; line-height: 30px; font-weight: 800; }
  .hp-principles p { margin: 0; font-size: 16px; line-height: 26px; }
  
  /* 4 — experiments */
  .hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .hp-pitch { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); border: var(--stroke-rule) dashed var(--border); border-radius: var(--radius-md); background: var(--surface); }
  .hp-pitch h2, .hp-pitch h3 { margin: var(--space-2) 0 var(--space-2); font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -.02em; }
  .hp-pitch p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); max-width: 440px; }
  .hp-pitch .hp-pitch-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); flex: none; }

  /* 5 — lifecycle */
  .hp-life { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr) 1.1fr; gap: var(--space-5); }
  .hp-life-line { position: absolute; left: 12px; right: 18%; top: 13px; height: 0; border-top: var(--stroke-rule) dashed var(--border); z-index: 0; }
  .hp-step { position: relative; z-index: 1; }
  .hp-step .acl-stage { background-clip: padding-box; box-shadow: 0 0 0 6px var(--surface); }
  .hp-step h3 { margin: var(--space-4) 0 var(--space-2); font-size: 18px; line-height: 26px; font-weight: 700; }
  .hp-step p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
  .hp-step-out { padding-left: var(--space-5); border-left: var(--stroke-rule) solid var(--line); }

  /* 6 — analog + AI */
  .hp-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: stretch; }
  .hp-notebook { position: relative; padding: var(--space-6) var(--space-6) var(--space-6) 72px; background-color: var(--surface-raised); background-image: linear-gradient(transparent 31px, var(--grid) 31px, var(--grid) 32px); background-size: 100% 32px; background-position: 0 20px; border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); transform: rotate(-1deg); }
  .hp-notebook::before { content: ""; position: absolute; top: 0; bottom: 0; left: 52px; border-left: var(--stroke-rule) solid var(--accent-soft); }
  .hp-notebook .acl-kicker { display: block; margin: 0 0 var(--space-3); }
  .hp-notebook ul { list-style: none; margin: 0; padding: 0; font-family: var(--font-hand); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--ink); }
  .hp-notebook li::before { content: "– "; color: var(--accent-text); }
  .hp-notebook .acl-tape { position: absolute; top: -14px; right: 40px; width: 110px; height: 30px; background: var(--tape); transform: rotate(6deg); }
  .hp-terminal { padding: var(--space-6); background: var(--brand-ink); color: var(--brand-seafoam); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); font-family: var(--font-mono); font-size: 15px; line-height: 32px; }
  .hp-terminal .hp-term-bar { display: flex; gap: 8px; margin-bottom: var(--space-4); }
  .hp-terminal .hp-term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #5d5853; display: block; }
  .hp-terminal .hp-term-bar i:first-child { background: var(--brand-pink); }
  .hp-terminal ul { list-style: none; margin: 0; padding: 0; }
  .hp-terminal li::before { content: "$ "; color: #ff7cbd; }
  .hp-terminal .hp-dim { color: #b8bcae; }
  .hp-terminal h3 { margin: 0; font: inherit; }
  .hp-terminal .hp-cursor { display: inline-block; width: 10px; height: 18px; background: var(--brand-seafoam); vertical-align: -3px; }
  .hp-two-cap { margin: var(--space-6) 0 0; font-size: 19px; line-height: 30px; max-width: 760px; }

  /* 7 — log */
  .hp-log { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
  .hp-log h2 { margin: var(--space-2) 0 var(--space-4); font-size: 56px; line-height: 56px; font-weight: 900; letter-spacing: -.025em; }
  .hp-log p.hp-sub { margin: 0 0 var(--space-5); font-size: 19px; line-height: 30px; color: var(--ink-muted); }
  .hp-logcard { background: var(--surface-raised); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); }

  /* 9 — footer */
  .hp-foot { background: var(--deep); color: var(--on-deep); padding: var(--space-7) var(--space-6) var(--space-6); }
  .hp-foot .acl-lockup, .hp-foot .acl-lockup-parent { color: var(--on-deep); }
  .hp-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
  .hp-foot h4, .hp-foot-h { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--seafoam); }
  .hp-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .hp-foot a { color: var(--on-deep); text-decoration: none; font-size: 15px; line-height: 22px; }
  .hp-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .hp-foot a:focus-visible { outline: var(--stroke-heavy) solid var(--seafoam); outline-offset: 2px; }
  .hp-foot-blurb { margin: var(--space-4) 0 0; font-size: 14px; line-height: 22px; max-width: 320px; }
  .hp-foot-base { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--stroke-hair) solid var(--on-deep); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; }
  .hp-foot .acl-note { color: var(--seafoam); }

  @media (max-width: 900px) {
    .hp-section { padding: var(--space-7) var(--space-4); }
    .hp-head h2, .hp-log h2 { font-size: 40px; line-height: 42px; }
    .hp-principles, .hp-grid, .hp-two, .hp-log, .hp-foot-grid { grid-template-columns: 1fr; }
    .hp-pitch { grid-column: auto; flex-direction: column; align-items: flex-start; }
    .hp-life { grid-template-columns: 1fr; }
    .hp-life-line { display: none; }
    .hp-step-out { padding-left: 0; border-left: 0; }
  }

/* ---------- production additions ---------- */

/* sticky header + mobile menu */
.acl-header { position: sticky; top: 0; z-index: 50; }
.acl-menu-btn { display: none; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); font: 700 14px/20px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.acl-menu-btn:focus-visible, .hp-theme:focus-visible { outline: var(--stroke-heavy) solid var(--focus); outline-offset: 2px; }
.acl-menu-btn .bars { display: grid; gap: 4px; }
.acl-menu-btn .bars i { display: block; width: 16px; height: 2px; background: currentColor; transition: transform 160ms ease, opacity 160ms ease; }
.acl-menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.acl-menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.acl-menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
  .acl-header { padding: var(--space-3) var(--space-4); flex-wrap: nowrap; }
  .js .acl-menu-btn { display: inline-flex; }
  .js .acl-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) var(--space-4) var(--space-5); background: var(--surface); border-bottom: var(--stroke-rule) solid var(--border); }
  .js .acl-nav[data-open="true"] { display: flex; }
  .js .acl-nav a:not(.acl-btn) { padding: var(--space-3) 0; font-size: 18px; border-bottom: var(--stroke-hair) solid var(--line); }
  .js .acl-nav a[aria-current="page"], .js .acl-nav a[aria-current="true"] { border-bottom-color: var(--line); box-shadow: inset 4px 0 0 var(--accent); padding-left: var(--space-3); }
  .js .acl-nav .acl-btn { margin-top: var(--space-4); align-self: flex-start; }
}

/* signup status */
.hp-form-status { margin: var(--space-3) 0 0; min-height: 26px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--stage-shipped); }
.hp-form-status[data-tone="error"] { color: var(--accent-text); }

/* theme switch in the footer */
.hp-theme { font: 600 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-deep); background: transparent; border: var(--stroke-hair) solid var(--on-deep); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; }
.hp-theme:hover { background: rgba(255, 255, 255, .08); }

/* keep the hero sheet readable when it wraps on small screens */
@media (max-width: 720px) {
  .acl-hero { padding-top: var(--space-9); }
  .acl-hero-sheet h1 { font-size: 44px; }
  .hp-crew .hp-lede { font-size: 30px; line-height: 38px; }
  .hp-notebook { padding-left: 64px; transform: none; }
  .hp-foot-base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .acl-btn, .acl-card, .acl-menu-btn .bars i { transition: none; }
  .acl-btn:hover, .acl-card:hover { transform: none; }
}

@media print {
  .acl-header, .acl-graffiti, .acl-hero-backdrop, .hp-join { display: none !important; }
  body { background: #fff; }
}

/* ========== grunge layer (acl-grain on <body>, acl-torn on a dark band, acl-sprayed on one word) ========== */

/* photocopy grain over everything (decorative, never blocks clicks) */
/* tiles from scripts/render-textures.mjs: black specks on Paper, faint white ones in Night watch. No blend mode needed:
   plain alpha over the page looks the same and costs far less to paint. */
:root { --grain: url("/assets/img/grunge/grain-light.webp?v=ab33786179"); --grain-opacity: .16; }
:root[data-theme="dark"] { --grain: url("/assets/img/grunge/grain-dark.webp?v=8069bfb6f4"); --grain-opacity: .07; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain: url("/assets/img/grunge/grain-dark.webp?v=8069bfb6f4"); --grain-opacity: .07; } }
.acl-grain::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background-image: var(--grain); background-size: 240px 240px; opacity: var(--grain-opacity); }

/* backdrop: blown-out photocopy with halftone dots */
.acl-hero-backdrop { filter: grayscale(1) contrast(1.55) brightness(1.04); opacity: .55; }
.acl-hero-backdrop::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(35, 31, 32, .55) 0 1.1px, transparent 1.4px); background-size: 5px 5px; mix-blend-mode: multiply; }

/* one fat marker scribble, one heavy tag */
.acl-graffiti .acl-mark-fat { stroke-width: 26; filter: url(#acl-marker-filter); opacity: .94; }
.acl-spray { left: 3%; bottom: -.22em; font-size: clamp(110px, 19vw, 260px); line-height: .8; transform: rotate(-7deg); letter-spacing: .01em; }
.acl-spray .acl-drip, .hp-spray .acl-drip { width: 6px; top: 78%; border-radius: 0 0 6px 6px; filter: url(#acl-spray-filter); }
.acl-hero .acl-note { font-size: 28px; }

/* torn paper edge where a dark band starts */
.acl-torn { position: relative; }
.acl-torn::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: var(--torn-color, var(--deep)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 5.4 L10 4.1 L22 7.2 L34 10.2 L57 3.8 L82 13.0 L102 7.0 L127 8.9 L151 5.1 L163 6.5 L176 0.3 L202 7.1 L228 1.2 L244 3.5 L262 9.4 L275 7.5 L289 12.9 L310 9.8 L332 6.5 L345 13.6 L364 14.6 L375 8.7 L391 5.2 L400 5.0 L418 0.2 L431 10.0 L443 6.5 L463 6.6 L476 11.7 L486 3.4 L501 4.7 L510 5.6 L534 3.9 L548 11.7 L562 14.0 L587 8.0 L609 5.2 L629 7.4 L651 11.3 L661 5.3 L670 3.6 L692 6.8 L712 4.7 L721 17.0 L744 10.7 L756 13.1 L766 5.3 L792 2.7 L815 12.4 L826 1.0 L836 7.0 L857 12.5 L879 14.2 L903 5.9 L911 17.3 L933 17.5 L952 11.1 L977 3.6 L1000 2.2 L1022 0.5 L1047 15.2 L1071 7.6 L1093 1.0 L1119 8.0 L1130 1.3 L1144 13.2 L1164 2.0 L1182 16.4 L1195 1.1 L1200 9.6 L1200 24 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 5.4 L10 4.1 L22 7.2 L34 10.2 L57 3.8 L82 13.0 L102 7.0 L127 8.9 L151 5.1 L163 6.5 L176 0.3 L202 7.1 L228 1.2 L244 3.5 L262 9.4 L275 7.5 L289 12.9 L310 9.8 L332 6.5 L345 13.6 L364 14.6 L375 8.7 L391 5.2 L400 5.0 L418 0.2 L431 10.0 L443 6.5 L463 6.6 L476 11.7 L486 3.4 L501 4.7 L510 5.6 L534 3.9 L548 11.7 L562 14.0 L587 8.0 L609 5.2 L629 7.4 L651 11.3 L661 5.3 L670 3.6 L692 6.8 L712 4.7 L721 17.0 L744 10.7 L756 13.1 L766 5.3 L792 2.7 L815 12.4 L826 1.0 L836 7.0 L857 12.5 L879 14.2 L903 5.9 L911 17.3 L933 17.5 L952 11.1 L977 3.6 L1000 2.2 L1022 0.5 L1047 15.2 L1071 7.6 L1093 1.0 L1119 8.0 L1130 1.3 L1144 13.2 L1164 2.0 L1182 16.4 L1195 1.1 L1200 9.6 L1200 24 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; }
.hp-crew { --torn-color: var(--deep); }
/* room for the hero's LABS tag, which hangs over the torn edge into this band */
@media (min-width: 721px) { .hp-crew { padding-top: clamp(var(--space-9), 11vw, 168px); } }
.hp-join { --torn-color: var(--brand-black); }
.hp-foot { --torn-color: var(--deep); }

/* spray-painted underline on one word per heading */
.acl-sprayed { position: relative; z-index: 0; white-space: nowrap; }
.acl-sprayed::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -.16em; height: .32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cfilter id='s' x='-10%25' y='-60%25' width='120%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6' xChannelSelector='R' yChannelSelector='G' result='r'/%3E%3CfeGaussianBlur in='r' stdDeviation='2.2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='r'/%3E%3C/feMerge%3E%3C/filter%3E%3Cpath d='M8 27 C 70 19%2C 170 31%2C 292 21' stroke='%23e7178d' stroke-width='11' stroke-linecap='round' fill='none' filter='url%28%23s%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat; z-index: -1; }
.hp-head h2, .hp-log h2 { position: relative; z-index: 0; }
.hp-crew .hp-lede em { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cfilter id='s' x='-10%25' y='-60%25' width='120%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6' xChannelSelector='R' yChannelSelector='G' result='r'/%3E%3CfeGaussianBlur in='r' stdDeviation='2.2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='r'/%3E%3C/feMerge%3E%3C/filter%3E%3Cpath d='M8 27 C 70 19%2C 170 31%2C 292 21' stroke='%23e7178d' stroke-width='11' stroke-linecap='round' fill='none' filter='url%28%23s%29'/%3E%3C/svg%3E") 0 88% / 100% .42em no-repeat; padding: 0 2px; }

@media (max-width: 720px) {
  .acl-hero { padding-top: 168px; }
  .acl-spray { top: 28px; bottom: auto; left: 4%; font-size: 104px; }
  .acl-spray .acl-drip { display: none; }
}


/* ========== flag wall: black, with the Labs flag flying (decoration only, aria-hidden) ========== */
.hp-join { position: relative; overflow-x: clip; padding: var(--space-9) var(--space-6) var(--space-9); background-color: var(--brand-black); background-image: radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, .045), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(231, 23, 141, .06), transparent 50%); }
.hp-join .hp-spray { position: absolute; z-index: 2; right: 6%; top: 0; font-family: var(--font-marker); font-size: 168px; line-height: .9; color: var(--brand-pink); transform: rotate(-8deg); filter: url(#acl-spray-filter); pointer-events: none; }
.hp-flag { position: relative; z-index: 1; display: flex; align-items: flex-start; width: min(560px, 82vw); margin: 0 auto; }
.hp-flag-pole { flex: none; width: 10px; height: calc(min(560px, 82vw) * .66 + 140px); margin-top: -24px; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #4a4542, #8b847e 40%, #3a3634); }
/* 60 strips of one flag image, each bobbing a little out of step: the cloth ripples from the pole outward */
.hp-flag-cloth { display: flex; flex: 1; aspect-ratio: 3 / 2; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.hp-flag-cloth i { position: relative; flex: 1; background: url("/assets/img/labs-flag.svg?v=cef9cac69a") 0 0 / 6000% 100% no-repeat; animation: acl-flag 1.6s ease-in-out infinite alternate; }
/* the folds darken as they swing: an animated black layer (opacity and transform only, so the GPU does the work) */
.hp-flag-cloth i::after { content: ""; position: absolute; inset: 0; background: var(--brand-black); opacity: 0; animation: inherit; animation-name: acl-flag-shade; }
/* labs.js pauses the flag while it's off screen (data-flying is set only while it's visible) */
.js .hp-flag:not([data-flying]) .hp-flag-cloth i, .js .hp-flag:not([data-flying]) .hp-flag-cloth i::after { animation-play-state: paused; }
/* scaleX(1.06) overlaps each strip on its neighbours by a hair, so no seams show between them */
@keyframes acl-flag { from { transform: translateY(calc(var(--a) * -1)) scaleX(1.06); } to { transform: translateY(var(--a)) scaleX(1.06); } }
@keyframes acl-flag-shade { from { opacity: 0; } to { opacity: .32; } }
.hp-flag-cloth i:nth-child(1) { --a: 1.0px; background-position: 0.000% 0; animation-delay: -0.000s; }
.hp-flag-cloth i:nth-child(2) { --a: 1.2px; background-position: 1.695% 0; animation-delay: -0.055s; }
.hp-flag-cloth i:nth-child(3) { --a: 1.4px; background-position: 3.390% 0; animation-delay: -0.110s; }
.hp-flag-cloth i:nth-child(4) { --a: 1.6px; background-position: 5.085% 0; animation-delay: -0.165s; }
.hp-flag-cloth i:nth-child(5) { --a: 1.8px; background-position: 6.780% 0; animation-delay: -0.220s; }
.hp-flag-cloth i:nth-child(6) { --a: 2.0px; background-position: 8.475% 0; animation-delay: -0.275s; }
.hp-flag-cloth i:nth-child(7) { --a: 2.2px; background-position: 10.169% 0; animation-delay: -0.330s; }
.hp-flag-cloth i:nth-child(8) { --a: 2.4px; background-position: 11.864% 0; animation-delay: -0.385s; }
.hp-flag-cloth i:nth-child(9) { --a: 2.6px; background-position: 13.559% 0; animation-delay: -0.440s; }
.hp-flag-cloth i:nth-child(10) { --a: 2.8px; background-position: 15.254% 0; animation-delay: -0.495s; }
.hp-flag-cloth i:nth-child(11) { --a: 3.0px; background-position: 16.949% 0; animation-delay: -0.550s; }
.hp-flag-cloth i:nth-child(12) { --a: 3.2px; background-position: 18.644% 0; animation-delay: -0.605s; }
.hp-flag-cloth i:nth-child(13) { --a: 3.4px; background-position: 20.339% 0; animation-delay: -0.660s; }
.hp-flag-cloth i:nth-child(14) { --a: 3.6px; background-position: 22.034% 0; animation-delay: -0.715s; }
.hp-flag-cloth i:nth-child(15) { --a: 3.8px; background-position: 23.729% 0; animation-delay: -0.770s; }
.hp-flag-cloth i:nth-child(16) { --a: 4.0px; background-position: 25.424% 0; animation-delay: -0.825s; }
.hp-flag-cloth i:nth-child(17) { --a: 4.2px; background-position: 27.119% 0; animation-delay: -0.880s; }
.hp-flag-cloth i:nth-child(18) { --a: 4.4px; background-position: 28.814% 0; animation-delay: -0.935s; }
.hp-flag-cloth i:nth-child(19) { --a: 4.6px; background-position: 30.508% 0; animation-delay: -0.990s; }
.hp-flag-cloth i:nth-child(20) { --a: 4.8px; background-position: 32.203% 0; animation-delay: -1.045s; }
.hp-flag-cloth i:nth-child(21) { --a: 5.0px; background-position: 33.898% 0; animation-delay: -1.100s; }
.hp-flag-cloth i:nth-child(22) { --a: 5.2px; background-position: 35.593% 0; animation-delay: -1.155s; }
.hp-flag-cloth i:nth-child(23) { --a: 5.4px; background-position: 37.288% 0; animation-delay: -1.210s; }
.hp-flag-cloth i:nth-child(24) { --a: 5.6px; background-position: 38.983% 0; animation-delay: -1.265s; }
.hp-flag-cloth i:nth-child(25) { --a: 5.8px; background-position: 40.678% 0; animation-delay: -1.320s; }
.hp-flag-cloth i:nth-child(26) { --a: 6.0px; background-position: 42.373% 0; animation-delay: -1.375s; }
.hp-flag-cloth i:nth-child(27) { --a: 6.2px; background-position: 44.068% 0; animation-delay: -1.430s; }
.hp-flag-cloth i:nth-child(28) { --a: 6.4px; background-position: 45.763% 0; animation-delay: -1.485s; }
.hp-flag-cloth i:nth-child(29) { --a: 6.6px; background-position: 47.458% 0; animation-delay: -1.540s; }
.hp-flag-cloth i:nth-child(30) { --a: 6.8px; background-position: 49.153% 0; animation-delay: -1.595s; }
.hp-flag-cloth i:nth-child(31) { --a: 7.0px; background-position: 50.847% 0; animation-delay: -1.650s; }
.hp-flag-cloth i:nth-child(32) { --a: 7.2px; background-position: 52.542% 0; animation-delay: -1.705s; }
.hp-flag-cloth i:nth-child(33) { --a: 7.4px; background-position: 54.237% 0; animation-delay: -1.760s; }
.hp-flag-cloth i:nth-child(34) { --a: 7.6px; background-position: 55.932% 0; animation-delay: -1.815s; }
.hp-flag-cloth i:nth-child(35) { --a: 7.8px; background-position: 57.627% 0; animation-delay: -1.870s; }
.hp-flag-cloth i:nth-child(36) { --a: 8.0px; background-position: 59.322% 0; animation-delay: -1.925s; }
.hp-flag-cloth i:nth-child(37) { --a: 8.2px; background-position: 61.017% 0; animation-delay: -1.980s; }
.hp-flag-cloth i:nth-child(38) { --a: 8.4px; background-position: 62.712% 0; animation-delay: -2.035s; }
.hp-flag-cloth i:nth-child(39) { --a: 8.6px; background-position: 64.407% 0; animation-delay: -2.090s; }
.hp-flag-cloth i:nth-child(40) { --a: 8.8px; background-position: 66.102% 0; animation-delay: -2.145s; }
.hp-flag-cloth i:nth-child(41) { --a: 9.0px; background-position: 67.797% 0; animation-delay: -2.200s; }
.hp-flag-cloth i:nth-child(42) { --a: 9.2px; background-position: 69.492% 0; animation-delay: -2.255s; }
.hp-flag-cloth i:nth-child(43) { --a: 9.4px; background-position: 71.186% 0; animation-delay: -2.310s; }
.hp-flag-cloth i:nth-child(44) { --a: 9.6px; background-position: 72.881% 0; animation-delay: -2.365s; }
.hp-flag-cloth i:nth-child(45) { --a: 9.8px; background-position: 74.576% 0; animation-delay: -2.420s; }
.hp-flag-cloth i:nth-child(46) { --a: 10.0px; background-position: 76.271% 0; animation-delay: -2.475s; }
.hp-flag-cloth i:nth-child(47) { --a: 10.2px; background-position: 77.966% 0; animation-delay: -2.530s; }
.hp-flag-cloth i:nth-child(48) { --a: 10.4px; background-position: 79.661% 0; animation-delay: -2.585s; }
.hp-flag-cloth i:nth-child(49) { --a: 10.6px; background-position: 81.356% 0; animation-delay: -2.640s; }
.hp-flag-cloth i:nth-child(50) { --a: 10.8px; background-position: 83.051% 0; animation-delay: -2.695s; }
.hp-flag-cloth i:nth-child(51) { --a: 11.0px; background-position: 84.746% 0; animation-delay: -2.750s; }
.hp-flag-cloth i:nth-child(52) { --a: 11.2px; background-position: 86.441% 0; animation-delay: -2.805s; }
.hp-flag-cloth i:nth-child(53) { --a: 11.4px; background-position: 88.136% 0; animation-delay: -2.860s; }
.hp-flag-cloth i:nth-child(54) { --a: 11.6px; background-position: 89.831% 0; animation-delay: -2.915s; }
.hp-flag-cloth i:nth-child(55) { --a: 11.8px; background-position: 91.525% 0; animation-delay: -2.970s; }
.hp-flag-cloth i:nth-child(56) { --a: 12.0px; background-position: 93.220% 0; animation-delay: -3.025s; }
.hp-flag-cloth i:nth-child(57) { --a: 12.2px; background-position: 94.915% 0; animation-delay: -3.080s; }
.hp-flag-cloth i:nth-child(58) { --a: 12.4px; background-position: 96.610% 0; animation-delay: -3.135s; }
.hp-flag-cloth i:nth-child(59) { --a: 12.6px; background-position: 98.305% 0; animation-delay: -3.190s; }
.hp-flag-cloth i:nth-child(60) { --a: 12.8px; background-position: 100.000% 0; animation-delay: -3.245s; }
@media (max-width: 720px) {
  .hp-join { padding: 150px var(--space-4) var(--space-8); }
  .hp-join .hp-spray { font-size: 104px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hp-flag-cloth i, .hp-flag-cloth i::after { animation: none; } .hp-flag-cloth i { transform: scaleX(1.06); } }

/* ========== Modal (acl-modal): the pitch form, opened in place from any "Pitch an idea" link ========== */
.acl-modal { width: min(680px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.acl-modal::backdrop { background: rgba(10, 9, 9, .78); }
.acl-modal-sheet { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); background-color: var(--surface-raised); background-image: var(--grunge-paper); border: var(--stroke-heavy) solid var(--border); border-radius: var(--radius-lg); box-shadow: 8px 8px 0 var(--brand-pink); }
.acl-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex: none; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: var(--stroke-rule) solid var(--border); }
.acl-modal-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font: 700 24px/1 var(--font-sans); color: var(--ink); background: var(--surface); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sticker-sm); cursor: pointer; }
.acl-modal-close:hover { transform: translate(1px, 1px); box-shadow: none; }
.acl-modal-body { position: relative; overflow: auto; padding: var(--space-6); }
.acl-modal-body h2 { margin: 0 0 var(--space-3); font-size: 40px; line-height: 42px; font-weight: 900; letter-spacing: -.025em; }
.acl-modal-intro { margin: 0 0 var(--space-5); max-width: 520px; font-size: 17px; line-height: 27px; color: var(--ink-muted); }
.acl-modal-note { position: absolute; right: var(--space-5); top: var(--space-4); font-size: 34px; line-height: 36px; transform: rotate(-8deg); }
.acl-modal .acl-modal-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.acl-modal-foot { margin: var(--space-5) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.acl-modal[open] { animation: acl-modal-in 160ms ease-out; }
@keyframes acl-modal-in { from { transform: translateY(12px) rotate(-.6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 720px) {
  .acl-modal-body { padding: var(--space-5); }
  .acl-modal-body h2 { font-size: 32px; line-height: 34px; padding-right: 0; }
  .acl-modal-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .acl-modal[open] { animation: none; } .acl-modal-close:hover { transform: none; } }

/* ========== grunge on every section: nothing on this site was printed clean ==========
   Tiled WebP textures rendered once by scripts/render-textures.mjs (change them there): speck = spray dust and paper
   fibres, blotch = water stains and old paint (half-size tiles, shown at 640px), scratch = dry-brush streaks,
   paper = fine fibre for raised sheets. All sit at low alpha, so text contrast holds; Night watch swaps in light
   specks and black stains, and the navy bands use their own -deep set in both themes. */
:root {
  --grunge-speck: url("/assets/img/grunge/speck-light.webp?v=75fecf67ff");
  --grunge-blotch: url("/assets/img/grunge/blotch-light.webp?v=16874c2a82");
  --grunge-scratch: url("/assets/img/grunge/scratch-light.webp?v=1161d16008");
  --grunge-paper: url("/assets/img/grunge/paper-light.webp?v=3d4124fcf0");
  --grunge-speck-deep: url("/assets/img/grunge/speck-deep.webp?v=3a18a82e6f");
  --grunge-blotch-deep: url("/assets/img/grunge/blotch-deep.webp?v=de96a02a5d");
  --stain: 640px 640px;
  --mist-seafoam: rgba(220, 239, 226, .5);
}
:root[data-theme="dark"] {
  --grunge-speck: url("/assets/img/grunge/speck-dark.webp?v=eb0180224b");
  --grunge-blotch: url("/assets/img/grunge/blotch-dark.webp?v=995b170428");
  --grunge-scratch: url("/assets/img/grunge/scratch-dark.webp?v=02e59acf02");
  --grunge-paper: url("/assets/img/grunge/paper-dark.webp?v=5865984783");
  --mist-seafoam: rgba(220, 239, 226, .07);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --grunge-speck: url("/assets/img/grunge/speck-dark.webp?v=eb0180224b");
  --grunge-blotch: url("/assets/img/grunge/blotch-dark.webp?v=995b170428");
  --grunge-scratch: url("/assets/img/grunge/scratch-dark.webp?v=02e59acf02");
  --grunge-paper: url("/assets/img/grunge/paper-dark.webp?v=5865984783");
  --mist-seafoam: rgba(220, 239, 226, .07);
} }

/* every section gets dust and stains by default... */
.hp-section, .site-hero, .exp-hero, .st-main { background-color: var(--surface); background-image: var(--grunge-speck), var(--grunge-blotch); background-size: auto, var(--stain); }
/* ...then each band on the homepage gets its own wall */
.hp-crew { background-color: var(--deep); background-image: radial-gradient(ellipse 50% 40% at 92% 12%, rgba(231, 23, 141, .16), transparent 70%), var(--grunge-speck-deep), var(--grunge-blotch-deep), var(--grunge-scratch); background-size: auto, auto, var(--stain), auto; }
.acl-graph { background-image: var(--grunge-speck), var(--grunge-blotch), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: auto, var(--stain), var(--grid-pitch) var(--grid-pitch), var(--grid-pitch) var(--grid-pitch); }
.hp-sunk { --torn-color: var(--surface-sunk); background-color: var(--surface-sunk); background-image: radial-gradient(ellipse 40% 55% at 4% 100%, rgba(50, 58, 102, .12), transparent 70%), var(--grunge-speck), var(--grunge-scratch), var(--grunge-blotch); background-size: auto, auto, auto, var(--stain); }
.hp-wall { background-image: radial-gradient(ellipse 34% 46% at 96% 8%, rgba(231, 23, 141, .12), transparent 72%), radial-gradient(ellipse 30% 40% at 0% 90%, var(--mist-seafoam), transparent 70%), var(--grunge-speck), var(--grunge-blotch), var(--grunge-blotch); background-size: auto, auto, auto, var(--stain), var(--stain); background-position: 0 0, 0 0, 0 0, 0 0, 310px 170px; }
.hp-foot { background-image: var(--grunge-speck-deep), var(--grunge-blotch-deep), var(--grunge-scratch); background-size: auto, var(--stain), auto; }
.hp-sunk .hp-step .acl-stage { box-shadow: 0 0 0 6px var(--surface-sunk); }
/* sheets and cards: paper fibre, so they look like cut-out paper, not app chrome */
.acl-card, .acl-hero-sheet, .hp-logcard, .pitch-form, .exp-sheet, .st-sheet, .hp-pitch { background-image: var(--grunge-paper); }

/* ---------- placement that used to live in style="" attributes (moved here so the CSP can forbid inline styles) ---------- */
.acl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.acl-header .acl-lockup { --acl-lockup-size: 44px; }
/* Wide screens: the mark alone on a disc, centered in the bar and hanging off it (like a badge nailed to the sign).
   The bar scrolls away here instead of sticking, so the disc never sits on top of what people are reading. */
@media (min-width: 861px) {
  .acl-header { position: relative; min-height: 76px; }
  .acl-header .acl-header-home { position: absolute; z-index: 2; left: 50%; top: 10px; width: 176px; height: 176px; justify-content: center; border-radius: var(--radius-pill); background: var(--surface-raised); border: var(--stroke-heavy) solid var(--border); box-shadow: var(--shadow-sticker); transform: translateX(-50%) rotate(-4deg); --acl-lockup-size: 120px; }
  .acl-header-home .acl-lockup-words { display: none; }
  .acl-nav { width: 100%; }
  .acl-nav > :nth-child(3) { margin-right: auto; }
}
.hp-foot .acl-lockup { --acl-lockup-size: 56px; }
.acl-hero .acl-note { left: 8%; top: 12%; transform: rotate(-3deg); }
.hp-life-note { transform: rotate(3deg); }
.acl-spray .acl-drip:nth-child(1) { left: 9%; height: 70px; }
.acl-spray .acl-drip:nth-child(2) { left: 33%; height: 34px; }
.acl-spray .acl-drip:nth-child(3) { left: 55%; height: 96px; }
.acl-spray .acl-drip:nth-child(4) { left: 79%; height: 48px; }
.hp-spray .acl-drip:nth-child(1) { left: 12%; height: 58px; }
.hp-spray .acl-drip:nth-child(2) { left: 46%; height: 30px; }
.hp-spray .acl-drip:nth-child(3) { left: 83%; height: 76px; }

/* ========== status pages: 404 and form receipts (st-*) ========== */
.st-main { position: relative; overflow: hidden; padding: var(--space-9) var(--space-6); }
.st-wrap { position: relative; display: flex; align-items: center; min-height: 420px; }
.st-sheet { position: relative; z-index: 1; width: 100%; max-width: 600px; padding: var(--space-7) var(--space-6) var(--space-6); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker); }
.st-sheet h1 { margin: var(--space-3) 0 var(--space-4); font-size: clamp(44px, 6vw, 80px); line-height: .95; font-weight: 900; letter-spacing: -.03em; }
.st-sheet p { margin: 0 0 var(--space-6); font-size: 19px; line-height: 30px; }
.st-sheet .acl-row { gap: var(--space-4); }
.st-lockup { display: flex; width: max-content; margin-bottom: var(--space-6); --acl-lockup-size: 36px; }
.st-receipt { min-height: 100vh; }
.st-receipt .st-sheet h1 { margin-bottom: var(--space-5); font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -.025em; }
/* the page's one spray tag: beside the sheet, never on it */
.st-spray { position: absolute; right: 2%; top: 50%; transform: translateY(-50%) rotate(-8deg); font-family: var(--font-marker); font-size: clamp(120px, 17vw, 240px); line-height: .85; color: var(--brand-pink); filter: url(#acl-spray-filter); pointer-events: none; }
.st-spray .acl-drip { position: absolute; top: 80%; width: 6px; border-radius: 0 0 6px 6px; background: var(--brand-pink); filter: url(#acl-spray-filter); }
.st-spray .acl-drip:nth-child(1) { left: 14%; height: 62px; }
.st-spray .acl-drip:nth-child(2) { left: 52%; height: 34px; }
.st-spray .acl-drip:nth-child(3) { left: 86%; height: 80px; }
@media (max-width: 900px) {
  .st-main { padding: var(--space-7) var(--space-4) var(--space-8); }
  .st-wrap { flex-direction: column; align-items: stretch; min-height: 0; }
  .st-spray { position: relative; right: auto; top: auto; align-self: flex-start; transform: rotate(-8deg); margin: 0 0 var(--space-5) var(--space-2); font-size: 104px; }
  .st-spray .acl-drip { display: none; }
  .st-sheet { padding: var(--space-6) var(--space-5) var(--space-5); }
}

/* ==========================================================================
   Inner pages. Shared layout reuses the homepage's hp-wrap / hp-section / hp-head,
   the hp-log sheet, the hp-life stage path, the hp-join wall and the hp-foot footer.
   ========================================================================== */
[hidden] { display: none !important; }

/* ---------- page intro (site-*) ---------- */
.site-hero { position: relative; padding: var(--space-8) var(--space-6) var(--space-7); }
.site-hero h1 { position: relative; z-index: 0; margin: var(--space-2) 0 0; max-width: 960px; font-size: 56px; line-height: 56px; font-weight: 900; letter-spacing: -.025em; }
.site-hero h1 + p { margin: var(--space-4) 0 0; max-width: 640px; font-size: 19px; line-height: 30px; color: var(--ink-muted); }

/* ---------- visible TODO: content Daniel still owes. Every one goes before launch. ---------- */
.site-todo { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); max-width: 640px; border: var(--stroke-rule) dashed var(--accent-text); border-radius: var(--radius-md); background: var(--surface-raised); font-size: 15px; line-height: 24px; color: var(--ink); }
.site-todo b { display: block; margin-bottom: 2px; font: 600 12px/16px var(--font-mono); letter-spacing: .14em; color: var(--accent-text); }

/* ---------- filters: plain aria-pressed buttons with a live result count ---------- */
.site-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.site-filter-label { margin: 0; }
.site-filter-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-filter-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--space-3); font: 700 14px/20px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker-sm); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; }
.site-filter-btn svg { width: 12px; height: 12px; flex: none; }
.site-filter-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sticker); }
.site-filter-btn:focus-visible { outline: var(--stroke-heavy) solid var(--focus); outline-offset: 2px; }
/* pressed = pushed into the page: no shadow, inked in */
.site-filter-btn[aria-pressed="true"] { color: var(--surface-raised); background: var(--ink); box-shadow: none; transform: translate(2px, 2px); }
.site-filter-count { flex-basis: 100%; margin: 0; font: 500 13px/18px var(--font-mono); color: var(--ink-muted); }
.site-filter-empty { margin: 0 0 var(--space-6); font-size: 19px; line-height: 30px; }

/* ---------- experiment pages (exp-*) ---------- */
.exp-hero { position: relative; padding: var(--space-8) var(--space-6); }
.exp-sheet { position: relative; max-width: 880px; padding: var(--space-7) var(--space-6) var(--space-6); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker); }
.exp-sheet > .acl-tape { top: -14px; left: -34px; transform: rotate(-24deg); }
.exp-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.exp-title h1 { margin: 0; font-size: 56px; line-height: 56px; font-weight: 900; letter-spacing: -.025em; }
.exp-pitch { margin: 0 0 var(--space-5); max-width: 680px; font-size: 19px; line-height: 30px; }
.exp-sheet .acl-card-tags { margin-bottom: var(--space-6); }
.exp-sheet .acl-row { gap: var(--space-4); }
.exp-story .exp-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: var(--stroke-rule) dashed var(--line); }
.exp-story .exp-block:first-child { padding-top: 0; border-top: 0; }
.exp-block b { display: block; font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .14em; color: var(--ink-muted); }
.exp-block h2 { margin: var(--space-2) 0 0; font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -.02em; }
.exp-block-body p { margin: 0 0 var(--space-4); max-width: 640px; font-size: 19px; line-height: 30px; }
.exp-log-empty { margin: 0; }
.exp-hero-todo { margin: var(--space-6) 0 0; }
.exp-sheet .exp-pitch-todo { margin-bottom: var(--space-6); }
.exp-path-todo { margin: var(--space-7) 0 0; }
/* the stage path: the current stage sits on its own sheet */
.exp-path .hp-step[aria-current="step"] { margin: calc(-1 * var(--space-4)); padding: var(--space-4); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); }
.exp-path .hp-step[aria-current="step"] .acl-stage { box-shadow: 0 0 0 6px var(--surface-raised); }
.exp-here { display: block; margin-top: var(--space-3); font: 600 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }

/* ---------- ship's log (log-*) ---------- */
.log-sheet { max-width: 820px; }
.log-sheet .acl-log h2 { margin: 4px 0 2px; font-size: 18px; line-height: 26px; font-weight: 700; }
.acl-log li[data-first-visible]::before { background: var(--accent); }
.log-link { display: inline-block; margin-top: var(--space-2); font-size: 15px; line-height: 22px; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.log-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.log-link:focus-visible { outline: var(--stroke-heavy) solid var(--focus); outline-offset: 2px; }
.log-more { margin-top: var(--space-6); }

/* ---------- the crew (crew-*) ---------- */
.crew-ships { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.crew-ship { padding: var(--space-6); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); }
.crew-ship h3 { margin: var(--space-2) 0 var(--space-3); font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.01em; }
.crew-ship p { margin: 0 0 var(--space-4); font-size: 16px; line-height: 26px; }
.crew-ship p:last-child { margin-bottom: 0; }
.crew-ship-labs { background: var(--seafoam); color: var(--on-seafoam); }
.crew-ship-labs .acl-kicker { color: var(--on-seafoam); }
.crew-bridge { margin: var(--space-6) 0 0; max-width: 760px; font-size: 19px; line-height: 30px; }

/* ---------- pitch an idea (pitch-*) ---------- */
.pitch-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.pitch-form { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); background: var(--surface-raised); border: var(--stroke-rule) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker); }
.pitch-form .acl-field { max-width: none; }
.pitch-form .acl-btn { align-self: flex-start; }
.pitch-form .hp-form-status { margin: 0; }
textarea.acl-input { height: auto; min-height: 176px; padding: var(--space-3) var(--space-4); line-height: 26px; resize: vertical; }
.acl-field-hint:empty { display: none; }
.pitch-aside h2 { margin: var(--space-2) 0 var(--space-3); font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.01em; }
.pitch-aside p { margin: 0 0 var(--space-4); font-size: 16px; line-height: 26px; }
.pitch-aside .acl-note { margin-top: var(--space-5); font-size: 44px; line-height: 46px; transform: rotate(-4deg); }

@media (max-width: 900px) {
  .site-hero, .exp-hero { padding: var(--space-7) var(--space-4) var(--space-6); }
  .site-hero h1, .exp-title h1 { font-size: 40px; line-height: 42px; }
  .exp-sheet { padding: var(--space-6) var(--space-5) var(--space-5); }
  .exp-story .exp-block { grid-template-columns: 1fr; gap: var(--space-4); }
  .exp-block h2 { font-size: 30px; line-height: 34px; }
  .exp-path .hp-step[aria-current="step"] { margin: 0 calc(-1 * var(--space-4)); }
  .crew-ships, .pitch-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .site-filter-btn { transition: none; }
  .site-filter-btn:not([aria-pressed="true"]):hover { transform: none; }
}

/* Tablet (721–900px): the join wall's tag kept its 168px desktop size there and ran into the cards
   (the grunge layer's tag size overrides the earlier 900px rule). Use the phone treatment instead. */
@media (min-width: 721px) and (max-width: 900px) {
}