/* fourteenerwebsites.com. Statement, then the work (studio kit work-bands, rebuilt). Rules in DESIGN.md. */
@font-face { font-family: 'Overpass'; src: url('fonts/Overpass-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --snow: #EEF1F2; --granite: #141413; --rock: #5E6466; --lichen: #A9B0B3; --sign: #5B3A24;
  --alpenglow: #D4632F; --glacier: #5E93BF; --bg: #EEF1F2; /* gear only: anodized metal, rope, shells */
  --edge: clamp(20px, 2.8vw, 40px); --pad: clamp(20px, 4.2vw, 60px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--snow); }
body { margin: 0; color: var(--granite); font: 400 18px/1.55 'Overpass', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.field { position: absolute; inset: 0 0 auto; height: 100svh; z-index: 0; pointer-events: none; overflow: hidden; }
.field img, .field canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.field canvas { opacity: 0; transition: opacity 0.6s ease-out; }
.field canvas.is-live { opacity: 1; }
.field img { transition: opacity 0.7s ease-out 0.25s; }
.field.has-live-canvas img { opacity: 0; }
html.field-live .field { position: fixed; height: 100lvh; }
@media (prefers-reduced-motion: reduce) { .field canvas { transition: none; } }
header, main, footer { position: relative; z-index: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sign); outline-offset: 3px; }

/* The one action: a trailhead sign. Brown, snow border, snow letters. */
.sign {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border: 3px solid var(--snow);
  border-radius: 7px; background: var(--sign); color: var(--snow); outline: 1px solid var(--sign);
  font: 700 18px/1 'Overpass', sans-serif; letter-spacing: 0.01em; text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; touch-action: manipulation;
}
.sign:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sign:hover { background: #4A2F1D; } }
.label { font: 600 16px/1.3 'Overpass', sans-serif; }

/* Hero: facts in the corner bars, the belief on the left, the trailhead sign on the right; the first band peeks. */
.hero { min-height: calc(100svh - 64px); display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: var(--edge); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.where { display: flex; gap: 18px; color: var(--rock); }

/* The logo is a small routed sign plate: brown, a snow border inset from the edge, two lines of sign caps. */
.plate {
  display: inline-grid; padding: 9px 13px 7px; border-radius: 6px; background: var(--sign); color: var(--snow);
  border: 2px solid var(--snow); outline: 2px solid var(--sign); text-decoration: none;
  font: 800 16px/1.02 'Overpass', sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
}
.plate span:last-child { font-weight: 600; letter-spacing: 0.2em; font-size: 14px; }

.hero-main { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(32px, 5vw, 88px); align-items: end; }
.statement { width: fit-content; font: 850 clamp(48px, 6.8vw, 124px)/0.84 'Overpass', sans-serif; letter-spacing: -0.04em; text-transform: uppercase; }
/* Each line rises out of its own mask; the mask has room above and below so no cap or descender is ever cut. */
.mask { display: block; overflow: hidden; padding: 0.14em 0.04em 0.1em 0; margin: -0.14em 0 -0.1em; }
.mask > span { display: block; white-space: nowrap; }
.sub { width: fit-content; margin-top: clamp(22px, 2.4vw, 34px); max-width: 30ch; font-size: 22px; line-height: 1.4; text-wrap: balance; }

/* The trailhead sign: the page's destinations, routed in the brown plate like the signs at a Colorado trailhead. */
.trailhead {
  display: grid; padding: 18px 18px 10px; border-radius: 8px; background: var(--sign); color: var(--snow);
  border: 3px solid var(--snow); outline: 3px solid var(--sign);
}
.trailhead-name { margin: 4px 6px 12px; font: 800 14px/1.15 'Overpass', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.trailhead a {
  display: grid; grid-template-columns: 1fr auto 1.4em; align-items: baseline; gap: 12px; padding: 14px 6px 12px;
  border-top: 2px solid rgb(238 241 242 / 0.28); color: var(--snow); text-decoration: none; touch-action: manipulation;
  transition: background-color var(--t-hover) ease;
}
.trailhead .dest { font: 800 22px/1 'Overpass', sans-serif; white-space: nowrap; letter-spacing: 0.02em; text-transform: uppercase; }
.trailhead .dist { font: 600 16px/1 'Overpass', sans-serif; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; opacity: 0.85; }
.trailhead .arrow { font: 800 22px/1 'Overpass', sans-serif; text-align: right; }
.trailhead a:active { background: rgb(0 0 0 / 0.18); }
@media (hover: hover) and (pointer: fine) { .trailhead a:hover { background: rgb(0 0 0 / 0.16); } }
.bar-low .label { color: var(--rock); }
@media (max-width: 1000px) and (min-width: 701px) {
  .hero-main { grid-template-columns: 1fr; align-items: start; }
  .statement { font-size: 10vw; }
  .trailhead { max-width: 420px; }
}

/* Bands: each site plays in a browser window on granite, its name and status beside it. The recordings are
   websites full of their own words, so the copy sits next to the window, never on top of it. */
.bands { background: var(--granite); }
.band {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px);
  align-items: center; min-height: 100svh; padding: clamp(72px, 11vh, 140px) var(--pad); background: var(--granite);
  color: var(--snow); text-decoration: none; view-timeline: --band block;
}
.band:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.band:nth-child(even) .band-copy { order: 2; }
.band-copy { display: grid; gap: 14px; justify-items: start; }
.name { font: 800 clamp(40px, 4.6vw, 76px)/0.95 'Overpass', sans-serif; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap;
  font-size: min(clamp(40px, 4.6vw, 76px), calc((100vw - 2 * var(--pad)) * 0.34 / (var(--chars, 12) * 0.62))); }
.what { max-width: 30ch; font-size: 22px; line-height: 1.42; }
.who { color: var(--lichen); font-size: 16px; }
.screen { margin: 0; border-radius: 12px; overflow: hidden; background: #22221F; }
.screen-bar { display: flex; align-items: center; justify-content: center; height: 38px; background: #22221F; color: var(--lichen); font: 600 14px/1 'Overpass', sans-serif; }
.screen-bar span { padding: 6px 14px 4px; border-radius: 6px; background: rgb(238 241 242 / 0.07); }
.film { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0b0b0a; }
/* Solid chip = live, you can go there now. Outline chip = not public, and the band is not a link. */
.status { margin-top: 8px; border-radius: 999px; padding: 13px 22px 11px; font: 700 16px/1 'Overpass', sans-serif;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
a.band .status { background: var(--snow); color: var(--granite); }
article.band .status { border: 1.5px solid rgb(238 241 242 / 0.6); }
.band:focus-visible { outline: 3px solid var(--snow); outline-offset: -8px; }
a.band { touch-action: manipulation; }
a.band:active .status { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { a.band:hover .status { background: var(--sign); color: var(--snow); } }