/* Dirt Bag: the custom font built from the hand-inked logo sketch. One weight, so every
   weight maps to it and the browser never fakes a bold over the marker strokes. */
@font-face { font-family: "Dirt Bag"; src: url(fonts/DirtBag.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Layout concept: one long climb up the wall, zone by zone, with a height rail on the right edge.
   Brand from the business plan: charcoal, rust, sand, deep forest green. The hand-drawn lockup is the only ornament. */
:root {
  --bg: #c7b186;
  --fg: #15130e;
  --muted: #3a3224;
  --line: rgba(21, 19, 14, 0.28);
  --accent: #8e3311;
  --on-accent: #f5edd8;
  --tint: rgba(142, 51, 17, 0.17);
  --sand: #ad9466;
  --on-sand: #17120a;
  --ink: #121110;
  --on-ink: #f5edd8;
  --on-ink-muted: #b9b09b;
  --ink-line: rgba(245, 237, 216, 0.22);
  --forest: #1d3226;
  --on-forest: #f5edd8;
  --on-forest-muted: #b3c3b5;
  --wall: #b9a074;
  --hold-a: #1d3226;
  --hold-b: #e3d5b4;
  --hold-c: #15130e;
  --f-display: "Dirt Bag", "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14130f; --fg: #f5edd8; --muted: #b7ad98; --line: rgba(245, 237, 216, 0.2);
    --accent: #e0703a; --on-accent: #14130f; --tint: rgba(224, 112, 58, 0.16);
    --sand: #2b261b; --on-sand: #efe3c3;
    --ink: #0d0d0a; --on-ink: #f5edd8; --on-ink-muted: #a79e8a; --ink-line: rgba(245, 237, 216, 0.2);
    --forest: #1f3327; --on-forest: #f5edd8; --on-forest-muted: #a9bdae;
    --wall: #1c1a14; --hold-a: #7fa58a; --hold-b: #c9bb9c; --hold-c: #f5edd8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14130f; --fg: #f5edd8; --muted: #b7ad98; --line: rgba(245, 237, 216, 0.2);
  --accent: #e0703a; --on-accent: #14130f; --tint: rgba(224, 112, 58, 0.16);
  --sand: #2b261b; --on-sand: #efe3c3;
  --ink: #0d0d0a; --on-ink: #f5edd8; --on-ink-muted: #a79e8a; --ink-line: rgba(245, 237, 216, 0.2);
  --forest: #1f3327; --on-forest: #f5edd8; --on-forest-muted: #a9bdae;
  --wall: #1c1a14; --hold-a: #7fa58a; --hold-b: #c9bb9c; --hold-c: #f5edd8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1200px; margin-inline: auto; min-width: 0; }
.mono { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo { display: block; color: currentColor; fill: currentColor; }

/* header */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line);
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: block; text-decoration: none; }
.brand .logo { height: 48px; width: auto; }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--accent); }
@media (max-width: 860px) { .nav a:not(.nav-cta) { display: none; } }
.nav-cta { background: var(--accent); color: var(--on-accent); padding: 8px 14px; font-weight: 600; }
.nav .nav-cta:hover { color: var(--on-accent); filter: brightness(1.1); }

/* hero */
.hero { padding-block: 44px 64px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.status { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 6px 12px; margin-bottom: 26px; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; }
.hero .logo { width: min(100%, 560px); height: auto; color: var(--fg); }
.hero h2.claim { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.05; letter-spacing: -0.02em; margin: 30px 0 0; max-width: 18ch; text-wrap: balance; }
.hero .lede { font-size: 1.2rem; max-width: 40ch; margin: 18px 0 0; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { font: inherit; font-weight: 700; cursor: pointer; border: 2px solid var(--accent); background: var(--accent); color: var(--on-accent); padding: 12px 20px; text-decoration: none; display: inline-block; letter-spacing: 0.01em; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.hero-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 26px; color: var(--muted); }

/* wall */
.wallbox { min-width: 0; }
.wall { display: block; width: 100%; max-width: 100%; height: auto; background: var(--wall); border: 2px solid var(--fg); }
.wall .hold { stroke: none; }
.wall .h-a { fill: var(--hold-a); opacity: 0.6; }
.wall .h-b { fill: var(--hold-b); opacity: 0.95; }
.wall .h-c { fill: var(--hold-c); opacity: 0.35; }
.wall .route { fill: var(--accent); }
.wall .tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--fg); }
.wall .bolt { fill: var(--line); }
.wall .climber { fill: var(--fg); stroke: var(--bg); stroke-width: 3; transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
.wallbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.wallbar .mono { color: var(--muted); }

/* marquee */
.marquee { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); background: var(--accent); color: var(--on-accent); overflow: hidden; white-space: nowrap; padding: 12px 0; }
.marquee-track { display: inline-flex; animation: slide 40s linear infinite; }
.marquee span { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; padding-right: 2.2rem; letter-spacing: -0.01em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* zones */
.zone { padding-block: 92px; }
.band { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-forest { background: var(--forest); color: var(--on-forest); }
.band-sand { background: var(--sand); color: var(--on-sand); }
.zone-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; }
@media (max-width: 880px) { .zone-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } .zone { padding-block: 64px; } }
.kicker { display: flex; gap: 12px; align-items: center; color: var(--muted); margin-bottom: 16px; }
.kicker b { color: var(--accent); font-weight: 500; }
.band-ink .kicker { color: var(--on-ink-muted); }
.band-forest .kicker { color: var(--on-forest-muted); }
.band-forest .kicker b, .band-ink .kicker b { color: #e9a77d; }
.band-sand .kicker { color: var(--on-sand); opacity: 0.75; }
h2 { margin: 0 0 20px; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; }
.zone p { max-width: 54ch; margin: 0 0 16px; }
.muted { color: var(--muted); }
.band-ink .muted { color: var(--on-ink-muted); }
.band-forest .muted { color: var(--on-forest-muted); }
.band-sand .muted { color: var(--on-sand); opacity: 0.8; }

/* top-rope numerals */
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-content: start; }
.numbers > div { padding: 22px 20px 22px 0; border-top: 1px solid var(--ink-line); }
.numbers .n { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; color: #e9a77d; font-variant-numeric: tabular-nums; }
.numbers .l { color: var(--on-ink-muted); margin-top: 6px; font-size: 0.98rem; }
.proof { grid-column: 1 / -1; border-top: 1px solid var(--ink-line); padding: 20px 0 0; color: var(--on-ink-muted); }

/* ladder */
.ladder { list-style: none; margin: 0; padding: 0; align-content: start; }
.ladder li { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.ladder li:last-child { border-bottom: 1px solid var(--line); }
.grade { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; }
.ladder .lab { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ladder .lab span { font-weight: 600; }
.ladder .lab small { color: var(--muted); font-size: 0.95rem; }
.bar { height: 8px; background: var(--line); position: relative; }
.bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); }
.ladder li:hover .grade { color: var(--accent); }
.points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; max-width: 54ch; }
.points li { padding-left: 22px; position: relative; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; }

/* trio */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 40px; }
@media (max-width: 880px) { .trio { grid-template-columns: minmax(0, 1fr); } }
.trio > div { padding: 24px 0; border-top: 2px solid var(--fg); }
.trio h3 { margin: 0 0 4px; font-size: 1.7rem; line-height: 1.05; }
.trio .mono { color: var(--accent); display: block; margin-bottom: 12px; }
.trio ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--muted); }

/* cafe */
.menu { background: var(--bg); color: var(--fg); padding: 28px; border: 2px solid var(--fg); align-self: start; }
.menu h3 { margin: 0 0 2px; font-size: 2rem; line-height: 1; }
.menu .mono { color: var(--muted); display: block; margin-bottom: 16px; }
.menu .row { display: grid; gap: 2px; padding: 14px 0; border-top: 1px dashed var(--line); }
.menu dt { font-weight: 700; }
.menu dd { margin: 0; color: var(--muted); font-size: 0.96rem; }
.menu dl { margin: 0; }

/* rows */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); align-items: baseline; }
.rows li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .rows li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.rows strong { font-family: var(--f-display); font-weight: 800; font-size: 1.55rem; line-height: 1.05; letter-spacing: -0.02em; }
.rows .tag { color: var(--accent); display: block; margin-top: 8px; }
.rows span.d { color: var(--muted); max-width: 58ch; }
.band-forest .rows li { border-top-color: rgba(245, 237, 216, 0.25); }
.band-forest .rows li:last-child { border-bottom-color: rgba(245, 237, 216, 0.25); }
.band-forest .rows span.d { color: var(--on-forest-muted); }
.band-forest .rows .tag { color: #e9a77d; }

/* table */
.tablewrap { overflow-x: auto; margin-top: 28px; border: 2px solid var(--fg); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--sand); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.hl td { background: var(--tint); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.foot { color: var(--muted); margin-top: 14px; font-size: 0.95rem; }

/* visit */
.facts { display: grid; margin: 0 0 24px; }
.facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--ink-line); }
.facts dt { color: var(--on-ink-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.signup { display: grid; gap: 14px; align-content: start; }
.signup label { display: grid; gap: 6px; }
.signup input, .signup select { font: inherit; padding: 14px; background: transparent; color: var(--on-ink); border: 2px solid var(--on-ink); border-radius: 0; width: 100%; min-width: 0; }
.signup select option { color: #1b1b1b; background: #f5edd8; }
.signup input::placeholder { color: var(--on-ink-muted); }
.signup .note { color: var(--on-ink-muted); min-height: 1.5em; margin: 0; }
.signup .big { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; }

footer { padding-block: 32px 44px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; color: var(--muted); }
footer .logo { height: 54px; width: auto; color: var(--fg); }

/* rail */
.rail { position: fixed; right: max(10px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 15; height: min(60vh, 500px); display: none; pointer-events: none; }
@media (min-width: 1440px) { .rail { display: block; } }
.rail-line { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.rail-fill { position: absolute; right: 0; bottom: 0; width: 2px; background: var(--accent); height: 0%; }
.rail-ticks { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.rail-ticks li { position: absolute; right: 12px; transform: translateY(50%); white-space: nowrap; color: var(--muted); pointer-events: auto; }
.rail-ticks a { text-decoration: none; }
.rail-ticks li.on { color: var(--fg); font-weight: 500; }
.rail-ticks li.on a::after { content: " —"; color: var(--accent); }
.rail-read { position: absolute; right: 12px; bottom: -34px; white-space: nowrap; color: var(--fg); }



.hero-photo { position: absolute; z-index: -1; top: -8px; bottom: -40px; left: 50%; width: 100vw; margin-left: -50vw; background: url(img/chalk.jpg) center 30% / cover; opacity: 0.24; filter: grayscale(1) sepia(0.4) contrast(1.1); -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-photo { opacity: 0.14; } }
:root[data-theme="dark"] .hero-photo { opacity: 0.14; }
/* photos: warm film prints */
.print { margin: 0; background: var(--card); padding: 10px 10px 0; border-radius: 22px; box-shadow: var(--shadow); transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.2s; }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; filter: grayscale(1) sepia(0.32) contrast(1.06); }
.print .ph { display: block; overflow: hidden; border-radius: 14px; }
.print figcaption { padding: 10px 6px 12px; color: var(--muted); }
.print:hover { transform: rotate(0deg) scale(1.02) !important; box-shadow: var(--shadow-up); }
.prints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.prints .print:nth-child(1) { transform: rotate(-2.2deg); }
.prints .print:nth-child(2) { transform: rotate(1.8deg); margin-top: 44px; }
.prints .ph { aspect-ratio: 4 / 5.2; }
.print.wide-r .ph { aspect-ratio: 4 / 4.6; }
.print.pad { margin-top: 28px; max-width: 30rem; transform: rotate(-1.4deg); }
.print.pad .ph { aspect-ratio: 5 / 4; }
.print.pad img { object-position: 30% 70%; }
.print.rope-p { grid-column: 1 / -1; transform: rotate(1deg); }
.print.rope-p .ph { aspect-ratio: 16 / 9; }
.print.rope-p img { object-position: 50% 64%; }
.banner { margin: 40px 0 0; }
.banner .ph { aspect-ratio: 21 / 7; }
.banner img { object-position: 50% 62%; }
.band-photo { background-image: linear-gradient(rgba(13, 13, 10, 0.84), rgba(13, 13, 10, 0.9)), url(img/climber.jpg); background-size: cover; background-position: center 40%; }
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (max-width: 880px) { .prints .print:nth-child(2) { margin-top: 24px; } .banner .ph { aspect-ratio: 16 / 9; } }
/* scroll rope + chalk */
.rope { position: absolute; left: max(28px, 3vw); right: max(28px, 3vw); bottom: 0; height: 3px; border-radius: 3px; background: var(--line); pointer-events: none; }
.rope-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--sun), var(--accent)); }
.rope-man { position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--sun); color: var(--on-sun); box-shadow: var(--shadow); display: grid; place-items: center; will-change: transform; }
.rope-man svg { width: 16px; height: 22px; display: block; color: inherit; }
#chalk { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }
/* ---- rounder, friendlier, livelier pass ---- */
:root { --card: #d6c196; --sun: #a37b48; --on-sun: #17120a; --sun-tint: rgba(120, 85, 40, 0.24); --shadow: 0 1px 2px rgba(40, 25, 5, 0.18), 0 8px 24px rgba(40, 25, 5, 0.16); --shadow-up: 0 2px 4px rgba(40, 25, 5, 0.2), 0 14px 32px rgba(40, 25, 5, 0.24); --r: 26px; --r-sm: 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card: #221f17; --sun: #c4a075; --sun-tint: rgba(196, 160, 117, 0.18); --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-up: 0 2px 4px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(0, 0, 0, 0.5); } }
:root[data-theme="dark"] { --card: #221f17; --sun: #c4a075; --sun-tint: rgba(196, 160, 117, 0.18); --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-up: 0 2px 4px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(0, 0, 0, 0.5); }

::selection { background: var(--sun); color: var(--on-sun); }
.top { border-bottom: 0; border-radius: 0 0 28px 28px; box-shadow: var(--shadow); }
.nav a:not(.nav-cta) { padding: 8px 14px; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.nav a:not(.nav-cta):hover { background: var(--tint); }
.nav-cta { border-radius: 999px; padding: 10px 18px; box-shadow: var(--shadow); transition: transform 0.2s, filter 0.2s; }
.nav-cta:hover { transform: translateY(-2px); }
.btn { border-radius: 999px; padding: 14px 24px; box-shadow: var(--shadow); transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.2s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-up); }
.btn:active { transform: scale(0.97); }
.btn.ghost { box-shadow: none; border-width: 2px; }
.status { border-radius: 999px; background: var(--card); box-shadow: var(--shadow); border: 0; padding: 8px 16px; }
.hero { position: relative; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero::before { width: 560px; height: 560px; right: -8%; top: -80px; background: radial-gradient(circle at 40% 40%, var(--sun-tint), transparent 68%); }
.hero::after { width: 480px; height: 480px; left: -12%; bottom: -120px; background: radial-gradient(circle at 50% 50%, var(--tint), transparent 68%); }
.wallbox { position: relative; }
.wall { border: 0; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-up); }
.wall .hold { stroke-linejoin: round; stroke-width: 7; }
.wall .h-a { stroke: var(--hold-a); } .wall .h-b { stroke: var(--hold-b); } .wall .h-c { stroke: var(--hold-c); }
.wall .route { stroke: var(--accent); stroke-width: 8; stroke-linejoin: round; }
.sticker { position: absolute; z-index: 4; top: -18px; right: -6px; transform: rotate(7deg); background: var(--forest); color: var(--on-forest); font-family: var(--f-display); font-weight: 800; font-size: 1rem; line-height: 1.05; letter-spacing: -0.01em; padding: 12px 16px; border-radius: 20px; box-shadow: var(--shadow-up); text-align: center; max-width: 11.5rem; }
.conf { position: absolute; z-index: 3; width: 10px; height: 10px; border-radius: 3px; pointer-events: none; }
.marquee { margin: 28px 0; border-radius: 999px; transform: rotate(-1.2deg); box-shadow: var(--shadow); padding: 14px 0; }
.marquee span:nth-child(even) { color: var(--sun); }
.band { margin: 20px 0; border-radius: 40px; padding-inline: clamp(20px, 4vw, 56px); box-shadow: var(--shadow); }
.numbers { gap: 12px; }
.numbers > div { background: rgba(245, 237, 216, 0.07); border: 0; border-radius: 22px; padding: 22px; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.2s; }
.numbers > div:hover { transform: translateY(-4px) rotate(-0.6deg); background: rgba(245, 237, 216, 0.12); }
.numbers .proof { padding: 18px 22px; }
.numbers .n { color: var(--sun); }
.ladder { display: grid; gap: 10px; }
.ladder li { background: var(--card); border: 0; border-radius: 20px; padding: 16px 20px; box-shadow: var(--shadow); transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.2s; }
.ladder li:last-child { border-bottom: 0; }
.ladder li:hover { transform: translateX(6px) scale(1.01); box-shadow: var(--shadow-up); }
.bar { height: 10px; border-radius: 999px; overflow: hidden; }
.bar::after { border-radius: 999px; background: linear-gradient(90deg, var(--sun), var(--accent)); }
.points li::before { border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px var(--tint); }
.trio { gap: 20px; }
.trio > div { background: var(--card); border: 0; border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.2s; }
.trio > div:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--shadow-up); }
.trio .mono { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--tint); }
.menu { border: 0; border-radius: 30px; box-shadow: var(--shadow-up); transform: rotate(1.2deg); transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); }
.menu:hover { transform: rotate(0deg) scale(1.02); }
.rows { display: grid; gap: 12px; }
.rows li { background: var(--card); border: 0; border-radius: 24px; padding: 22px 26px; box-shadow: var(--shadow); transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.2s; }
.rows li:last-child { border-bottom: 0; }
.rows li:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.rows .tag { display: block; width: fit-content; margin-top: 10px; padding: 3px 12px; border-radius: 999px; background: var(--tint); }
.band-forest .rows li { background: rgba(245, 237, 216, 0.09); box-shadow: none; border: 0; }
.band-forest .rows li:hover { background: rgba(245, 237, 216, 0.14); }
.band-forest .rows .tag { background: rgba(233, 167, 125, 0.2); }
.tablewrap { border: 0; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
tr.hl td { background: var(--sun-tint); }
tr.hl td:first-child::before { content: "★ "; color: var(--accent); }
.signup input, .signup select { border-radius: 16px; border: 2px solid var(--ink-line); background: rgba(245, 237, 216, 0.06); transition: border-color 0.2s, background 0.2s; }
.signup input:focus, .signup select:focus { border-color: var(--sun); background: rgba(245, 237, 216, 0.1); outline: none; }
.facts div { border-top: 0; background: rgba(245, 237, 216, 0.07); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; }
.rv { opacity: 0; transform: translateY(26px) scale(0.97); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: drift 16s ease-in-out infinite alternate; }
  .hero::after { animation: drift 20s ease-in-out infinite alternate-reverse; }
  .sticker { animation: sticker 4s ease-in-out infinite; }
  .wall .hold { transform-box: fill-box; transform-origin: center; animation: bob 6s ease-in-out infinite; }
  .wall .h-b { animation-duration: 7.5s; animation-delay: -2s; }
  .wall .h-c { animation-duration: 5s; animation-delay: -3.5s; }
  .wall .route { animation: pulse 2.4s ease-in-out infinite; }
  .bar::after { animation: grow 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero .logo { animation: pop 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .brand:hover .logo, .hero .logo:hover, footer .logo:hover { animation: wiggle 0.7s ease-in-out; }
  .status i { animation: ping 2s ease-out infinite; }
}
@keyframes drift { to { transform: translate(40px, 30px) scale(1.08); } }
@keyframes sticker { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-7px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes pop { from { opacity: 0; transform: scale(0.85) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg) scale(1.03); } 45% { transform: rotate(3deg) scale(1.03); } 70% { transform: rotate(-2deg); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* Dirt Bag font: the marker letters already carry their weight and spacing, so drop the tight
   tracking that was tuned for Bricolage and give the blobs a little air. */
h2, h3, .hero h2.claim, .marquee span, .numbers .n, .grade, .rows strong, .signup .big, .sticker, .menu h3, .trio h3 {
  font-synthesis: none; letter-spacing: 0.01em; word-spacing: 0.08em;
}
h2 { line-height: 1.04; }
.hero h2.claim { line-height: 1.12; }

/* ---- Monochrome pass: black top band, dark green logo, everything else black / grey / white ---- */
:root {
  --logo-green: #ffd716;
  --bg: #f3f3f3; --fg: #111111; --muted: #4a4a4a; --line: rgba(0, 0, 0, 0.18);
  --accent: #111111; --on-accent: #ffffff; --tint: rgba(0, 0, 0, 0.07);
  --sand: #d6d6d6; --on-sand: #111111;
  --ink: #0d0d0d; --on-ink: #ffffff; --on-ink-muted: #b3b3b3; --ink-line: rgba(255, 255, 255, 0.2);
  --forest: #3a3a3a; --on-forest: #ffffff; --on-forest-muted: #cfcfcf;
  --wall: #dedede; --hold-a: #5c5c5c; --hold-b: #ffffff; --hold-c: #111111;
  --card: #ffffff; --sun: #8c8c8c; --on-sun: #111111; --sun-tint: rgba(0, 0, 0, 0.08);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-up: 0 2px 4px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo-green: #ffd716;
    --bg: #161616; --fg: #f2f2f2; --muted: #b0b0b0; --line: rgba(255, 255, 255, 0.18);
    --accent: #f2f2f2; --on-accent: #111111; --tint: rgba(255, 255, 255, 0.08);
    --sand: #262626; --on-sand: #f2f2f2;
    --ink: #050505; --on-ink: #ffffff; --on-ink-muted: #a6a6a6; --ink-line: rgba(255, 255, 255, 0.18);
    --forest: #2c2c2c; --on-forest: #ffffff; --on-forest-muted: #bdbdbd;
    --wall: #1f1f1f; --hold-a: #8a8a8a; --hold-b: #e6e6e6; --hold-c: #f2f2f2;
    --card: #222222; --sun: #9a9a9a; --on-sun: #111111; --sun-tint: rgba(255, 255, 255, 0.08);
  }
}
:root[data-theme="dark"] {
  --logo-green: #ffd716;
  --bg: #161616; --fg: #f2f2f2; --muted: #b0b0b0; --line: rgba(255, 255, 255, 0.18);
  --accent: #f2f2f2; --on-accent: #111111; --tint: rgba(255, 255, 255, 0.08);
  --sand: #262626; --on-sand: #f2f2f2;
  --ink: #050505; --on-ink: #ffffff; --on-ink-muted: #a6a6a6; --ink-line: rgba(255, 255, 255, 0.18);
  --forest: #2c2c2c; --on-forest: #ffffff; --on-forest-muted: #bdbdbd;
  --wall: #1f1f1f; --hold-a: #8a8a8a; --hold-b: #e6e6e6; --hold-c: #f2f2f2;
  --card: #222222; --sun: #9a9a9a; --on-sun: #111111; --sun-tint: rgba(255, 255, 255, 0.08);
}
/* top band: black, with the green logo and light nav */
.top { background: #000000; color: #ffffff; }
.top .nav a:not(.nav-cta):hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.top .nav-cta, .top .nav .nav-cta:hover { background: #ffffff; color: #000000; }
.top .rope { background: rgba(255, 255, 255, 0.22); }
.top .rope-fill { background: linear-gradient(90deg, #8c8c8c, #ffffff); }
.brand .logo, .hero .logo, footer .logo { color: var(--logo-green); fill: var(--logo-green); }
/* pastel green needs a hard black edge to stay legible on the light page */
.hero .logo, footer .logo { filter: drop-shadow(3px 3px 0 #111111) drop-shadow(-1px -1px 0 #111111); }
/* replace the warm accents that were written as fixed colours */
.band-forest .kicker b, .band-ink .kicker b, .numbers .n, .band-forest .rows .tag { color: #d9d9d9; }
.band-forest .rows .tag { background: rgba(255, 255, 255, 0.14); }
.signup select option { color: #111111; background: #ffffff; }
.hero-photo { filter: grayscale(1) contrast(1.1); }
.print img { filter: grayscale(1) contrast(1.06); }
.wall .route { fill: var(--fg); stroke: var(--fg); }
.marquee span:nth-child(even) { color: #9a9a9a; }

/* ---- Top band: centred, spinning 3D logo above a centred menu ---- */
.top .wrap { flex-direction: column; justify-content: center; gap: 6px; }
.top .nav { justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.brand { perspective: 700px; padding-top: 2px; }
.spin3d { display: block; position: relative; width: 96px; height: 70px; transform-style: preserve-3d; }
.spin3d svg.logo { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: visible; }
.spin3d svg.depth { color: #c9a000; fill: #c9a000; }
:root[data-theme="dark"] .spin3d svg.depth { color: #b38f00; fill: #b38f00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .spin3d svg.depth { color: #b38f00; fill: #b38f00; } }
@media (max-width: 860px) { .spin3d { width: 64px; height: 47px; } }
@keyframes spin3d { from { transform: rotateY(0deg) rotateX(8deg); } to { transform: rotateY(360deg) rotateX(8deg); } }
@media (prefers-reduced-motion: no-preference) {
  .spin3d { animation: spin3d 6s linear infinite; }
  .brand:hover .spin3d { animation-duration: 1.6s; }
  .brand:hover .logo { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .spin3d { transform: rotateY(-22deg) rotateX(8deg); } }

/* hero: real rock photo in place of the drawn wall */
.rockwall { margin: 0; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-up); background: var(--ink); position: relative; aspect-ratio: 4 / 5; }
.rockwall img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.12); }
.rockwall figcaption { position: absolute; left: 16px; bottom: 14px; color: #ffffff; background: rgba(0, 0, 0, 0.55); padding: 6px 12px; border-radius: 999px; }
.hero-photo { display: none; }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-grid > div { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero .logo { margin-inline: auto; }
.hero h2.claim { max-width: 22ch; }
.hero .lede { max-width: 46ch; }
.cta-row, .hero-meta { justify-content: center; }

/* ---- Header logo glitch, every 10-20 seconds ---- */
@keyframes glitch {
  0%, 100% { transform: none; filter: none; clip-path: inset(0 0 0 0); }
  8% { transform: translate(-5px, 0) skewX(9deg); filter: drop-shadow(4px 0 #ffffff) drop-shadow(-4px 0 #c9a000); clip-path: inset(8% 0 58% 0); }
  16% { transform: translate(6px, 1px) skewX(-6deg); clip-path: inset(56% 0 10% 0); }
  24% { transform: translate(-3px, -1px); filter: invert(1) hue-rotate(40deg); clip-path: inset(0 0 0 0); }
  32% { transform: translate(4px, 0) skewX(12deg); filter: drop-shadow(-4px 0 #ffffff) drop-shadow(4px 0 #c9a000); clip-path: inset(30% 0 36% 0); }
  44% { transform: translate(-6px, 2px); filter: none; clip-path: inset(70% 0 0 0); }
  56% { transform: translate(3px, -2px) skewX(-10deg); filter: drop-shadow(3px 0 #ffffff); clip-path: inset(0 0 62% 0); }
  68% { transform: translate(-2px, 0); filter: invert(1); clip-path: inset(0 0 0 0); }
  80% { transform: translate(5px, 0) skewX(5deg); filter: drop-shadow(-3px 0 #c9a000); clip-path: inset(40% 0 25% 0); }
  92% { transform: translate(-1px, 0); filter: none; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: no-preference) { .top .brand.glitch { animation: glitch 0.7s steps(2, end) 1; } }
/* ---- Video backdrop for the whole site ---- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; }
.backdrop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: grayscale(1) brightness(1.35) contrast(0.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .backdrop video { opacity: 0.55; filter: grayscale(1) brightness(0.75) contrast(1.05); } }
:root[data-theme="dark"] .backdrop video { opacity: 0.55; filter: grayscale(1) brightness(0.75) contrast(1.05); }
/* ---- Underground zine pass ---- */
html, body { overflow-x: clip; }
.band-ink .btn:not(.ghost), .band-forest .btn:not(.ghost) { background: #ffffff; color: #000000; border-color: #ffffff; }
/* heavier photocopy grain */
body::after { opacity: 0.13; }
/* kickers read like rubber stamps */
.kicker b { display: inline-block; border: 2px solid currentColor; padding: 1px 8px 0; transform: rotate(-2deg); border-radius: 4px; }
/* taped photos */
.print, .tp { position: relative; }
.print::before, .tp::before { content: ""; position: absolute; z-index: 2; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(235, 235, 235, 0.72); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transform: rotate(-3deg); }
.band-ink .print::before { background: rgba(200, 200, 200, 0.5); }
/* crew wall */
.crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; margin-top: 40px; }
@media (max-width: 880px) { .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tp { margin: 0; background: var(--card); padding: 10px 10px 0; box-shadow: var(--shadow); transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); }
.tp:nth-child(odd) { transform: rotate(-2deg); } .tp:nth-child(even) { transform: rotate(1.6deg); margin-top: 18px; }
.tp:hover { transform: rotate(0) scale(1.03); }
.tp .ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; }
.tp img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.15); }
.tp figcaption { padding: 10px 4px 12px; color: var(--muted); }
.tp.open .ph { background: repeating-linear-gradient(-45deg, #1a1a1a 0 12px, #222 12px 24px); display: grid; place-items: center; }
.open-in { display: grid; gap: 4px; text-align: center; color: #fff; padding: 12px; }
.open-in b { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.05; }
.open-in small { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #bdbdbd; }
/* headlines slam in */
.zone h2.rv { opacity: 0; transform: scale(1.35) rotate(-2.5deg); transition: opacity 0.25s ease, transform 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
.zone h2.rv.in { opacity: 1; transform: none; }
/* intro */
.intro { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; display: none; place-items: center; text-align: center; cursor: pointer; }
.intro.on { display: grid; }
.intro-l1 { font-family: var(--f-display); font-size: clamp(3rem, 12vw, 8rem); margin: 0; line-height: 1; }
.intro-l2 { margin: 18px 0 0; color: #9a9a9a; }
@media (prefers-reduced-motion: no-preference) {
  .intro.on .intro-l1 { animation: stamp 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both 0.15s; }
  .intro.on .intro-l2 { animation: fadeup 0.5s ease both 0.75s; }
  .intro.out { animation: lift 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
}
@keyframes stamp { from { opacity: 0; transform: scale(2.2) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lift { to { transform: translateY(-100%); } }
/* founding card */
.card { margin-top: 6px; background: #f2f2f2; color: #111; border-radius: 18px; padding: 18px 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); transform: rotate(-1.5deg); position: relative; overflow: hidden; }
.card::after { content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); pointer-events: none; }
.card-top, .card-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 0.68rem; color: #555; }
.card-no { font-family: var(--f-display); font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; margin: 14px 0 4px; color: var(--logo-green); -webkit-text-stroke: 2px #111111; paint-order: stroke fill; }
.card-name { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; margin-bottom: 14px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .card.pop { animation: stamp 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; } }
.share { color: var(--on-ink) !important; border-color: var(--on-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .wall .climber { transition: none; }
}

/* clear, friendly handwriting (Patrick Hand) for paragraph text (menus, forms, tables and labels keep the clean sans) */
:root { --f-script: "Patrick Hand", "Nunito", "Segoe UI", system-ui, sans-serif; }
main p:not(.mono):not(.big), main .rows .d, main .note blockquote p { font-family: var(--f-script); font-size: 1.2rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.01em; }
main .note blockquote p { font-size: 1.3rem; }

/* ================= multi-page additions ================= */
/* menu dropdown (lives in the black top band) */
.top { position: sticky; }
.top .nav { align-items: center; }
.menu-btn { font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 9px 16px; transition: background 0.2s, border-color 0.2s; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); border-color: #ffffff; }
.menu-btn i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.menu-btn[aria-expanded="true"] i { transform: translateY(1px) rotate(-135deg); }
.menu-btn:focus-visible, .menu-panel a:focus-visible, .nav-cta:focus-visible, .tile:focus-visible, .pg:focus-visible, .foot-nav a:focus-visible { outline: 3px solid #ffd716; outline-offset: 3px; }
.menu-panel { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: min(calc(100vw - 32px), 640px);
  max-height: calc(100vh - 150px); overflow: auto; z-index: 30; background: #0d0d0d; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 28px; padding: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .menu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .menu-panel { grid-template-columns: minmax(0, 1fr); } }
.menu-panel h4 { margin: 0 0 6px 10px; color: #8c8c8c; font-weight: 500; }
.menu-panel a { display: block; padding: 9px 10px; border-radius: 14px; color: #ffffff; text-decoration: none; font-family: var(--f-body, inherit); font-size: 0.98rem; letter-spacing: 0; text-transform: none; font-weight: 500; transition: background 0.15s; }
.menu-panel a:hover { background: rgba(255, 255, 255, 0.14); }
.menu-panel a.on { background: #ffffff; color: #000000; }
@media (prefers-reduced-motion: no-preference) { .menu-panel:not([hidden]) { animation: menu-in 0.18s ease-out; } }
@keyframes menu-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* home: explore tiles */
.tiles { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 22px 54px; border-radius: 28px; background: var(--card); color: var(--fg);
  text-decoration: none; box-shadow: var(--shadow); transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.2s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-up, var(--shadow)); }
.tile .mono { color: var(--muted); }
.tile h3 { margin: 0; font-family: var(--f-display); font-size: 1.7rem; line-height: 1.05; }
.tile p { margin: 0; color: var(--muted); }
.tile i { position: absolute; left: 22px; bottom: 18px; font-style: normal; font-size: 1.5rem; color: var(--fg); transition: transform 0.2s; }
.tile:hover i { transform: translateX(6px); }

/* crew: real photos only */
.crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* founder's note */
.note { margin: 28px 0 0; max-width: 72ch; padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.note blockquote { margin: 0; display: grid; gap: 1.1em; }
.note blockquote p { margin: 0; font-size: 1.1rem; line-height: 1.65; }
.note figcaption { margin-top: 22px; color: var(--muted); }

.note-part { margin-top: clamp(28px, 5vw, 48px); }
.note-part h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.note-part .note { margin-top: 14px; }

/* contact */
.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.contact-cards .tile { padding-bottom: 54px; }
.contact-cards h3.em { font-size: clamp(1.1rem, 4.2vw, 1.5rem); overflow-wrap: anywhere; }
.facts a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-contact { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.foot-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-contact a:hover { color: var(--accent); }
.foot-contact a:focus-visible { outline: 3px solid #ffd716; outline-offset: 3px; }

/* previous / next */
.pager { display: flex; justify-content: space-between; align-items: stretch; gap: 14px; padding-block: 8px 56px; flex-wrap: wrap; }
.pg { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 16px 22px; border-radius: 28px; background: var(--card); color: var(--fg); text-decoration: none; box-shadow: var(--shadow);
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.pg:hover { transform: translateY(-3px); }
.pg .mono { color: var(--muted); }
.pg b { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; }
.pg.next { text-align: right; margin-left: auto; }
.pg.prev::before, .pg.next::after { content: none; }

/* footer links */
.foot-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.foot-nav a { color: inherit; text-decoration: none; }
.foot-nav a:hover { color: var(--accent); text-decoration: underline; }

/* a page is one room: give the first block some air under the header */
main > .zone:first-child, main > .band:first-child { margin-top: 8px; }
main > .band:first-child .zone { padding-top: 72px; }

/* hand-drawn yellow art, shown as it is (no grayscale filter) */
.art-zone { padding-top: 24px; padding-bottom: 24px; display: grid; justify-items: center; }
.art { margin: 0; width: min(560px, 100%); transform: rotate(var(--tilt, 0deg)); border-radius: 44px 90px 56px 100px / 70px 50px 90px 60px; overflow: hidden; box-shadow: 0 3px 4px rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.3); }
.art img { display: block; width: 100%; height: auto; }


/* faces you'll know: founder spotlight */
.crew-founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 28px; }
.crew-founder .tp { transform: rotate(-2deg); margin: 0; }
.founder-bio { min-width: 0; }
.founder-bio h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 10px 0 14px; line-height: 1.05; }
.founder-bio .pull { margin: 18px 0 0; padding: 4px 0 4px 18px; border-left: 5px solid #ffd716; }
.founder-bio .pull p { margin: 0; font-size: 1.45rem; line-height: 1.35; color: var(--fg); }
.founder-bio .mono.muted { margin-top: 18px; }
@media (max-width: 760px) { .crew-founder { grid-template-columns: minmax(0, 1fr); } .crew-founder .tp { max-width: 380px; } }

/* easter egg: the Scrap Yard claw replaces the spinning logo for one second */
.top .brand { position: relative; }
.top .brand .claw { position: absolute; left: 50%; top: 50%; width: 66px; height: 64px; margin: -32px 0 0 -33px; transform-style: preserve-3d; opacity: 0; pointer-events: none; }
.top .brand .claw svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #ffd716; backface-visibility: visible; }
.top .brand .claw svg.depth { fill: #c9a000; }
.top .brand.egg .spin3d { visibility: hidden; }
.top .brand.egg .claw { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .top .brand .claw { animation: spin3d 6s linear infinite; } .top .brand:hover .claw { animation-duration: 1.6s; } }
@media (max-width: 860px) { .top .brand .claw { width: 46px; height: 44px; margin: -22px 0 0 -23px; } }

/* hero video: no native play/pause overlay anywhere */
.backdrop, .backdrop video { pointer-events: none; }
.backdrop video::-webkit-media-controls, .backdrop video::-webkit-media-controls-panel, .backdrop video::-webkit-media-controls-play-button, .backdrop video::-webkit-media-controls-start-playback-button, .backdrop video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }

/* inverted boxes: black cards, white text (was white cards, black text) */
.rows li, .note, .tile, .pg, .trio > div, .ladder li, .tablewrap, .print, .tp, .status, .band-forest .rows li {
  --card: #000000; --fg: #ffffff; --muted: #cfcfcf; --accent: #ffffff; --tint: rgba(255, 255, 255, 0.14); --line: rgba(255, 255, 255, 0.2);
  background: #000000; color: #ffffff;
}
.rows li *, .note *, .tile *, .pg *, .trio > div *, .ladder li *, .tablewrap *, .status * { color: inherit; }
.rows span.d, .tile p, .pg span, .note figcaption { color: #cfcfcf; }
.rows .tag { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.tablewrap th { background: #1a1a1a; color: #cfcfcf; }
.tablewrap td, .tablewrap th { border-color: rgba(255, 255, 255, 0.18); }
.band-forest .rows li:hover { background: #111111; }

/* Puerto Rican flag beside the footer logo */
.foot-brand { display: inline-flex; align-items: center; gap: 14px; }
.pr-flag { height: 38px; width: auto; display: block; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* home: one compact Why Puerto Rico box */
.pr-summary { max-width: 720px; margin-top: 24px; padding: clamp(22px, 4vw, 34px); border-radius: 24px; background: #000000; color: #ffffff; box-shadow: var(--shadow); }
.pr-summary ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.pr-summary li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; align-items: baseline; }
.pr-summary li b { color: #ffd716; font-weight: 500; }
.pr-summary li span { color: #e6e6e6; font-family: var(--f-script, inherit); font-size: 1.15rem; line-height: 1.4; }
.pr-summary .btn.ghost { color: #ffffff; border-color: #ffffff; }
@media (max-width: 560px) { .pr-summary li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* the sign-up status line is plain text, not a card */
.signup .note { background: none; box-shadow: none; padding: 0; margin: 0; max-width: none; border-radius: 0; min-height: 1.5em; color: var(--on-ink-muted, #b3b3b3); }