/* ============================================================================
   Outerframe — the agency site.

   One stylesheet for all seven pages. This deliberately does NOT follow the
   demo/ pattern of re-declaring tokens inline in every page: that duplication
   is a known wart, and the server already serves .css with an ETag and
   revalidation (server.js sendFile), so an external sheet costs nothing.

   No inline <style> or <script> anywhere in site/. The global CSP can't drop
   'unsafe-inline' while demo/ needs it, but the new site shouldn't add to the
   pile — and a greenfield site that is already strict-CSP-clean is itself a
   small credibility artifact for a company that sells engineering.

   Palette note: Outerframe does NOT wear Summit's accent. Summit is the
   fictional company the product is shown in, and if this site wears its
   colours the demo reads as our own SaaS, which is the exact misread the
   positioning exists to prevent.

   Summit's accent was terracotta (#B55329) until it moved to deep slate blue
   (#2E5A7A). Terracotta sat at hue 18 against this site's teal at 176, a 158
   degree separation, which is near-complementary; at 77% and 58% saturation
   that pair vibrates, and every tour screenshot on this site was carrying it.
   Slate blue sits at 205, analogous to the teal rather than opposed to it.

   Note what that leaves of the old cold-ground argument. This comment used to
   say the cold ground made "terracotta-heavy" screenshots read as framed
   artifacts. Measured, the captures were never terracotta-heavy: they are
   bright, near-achromatic app screens, red minus blue between 1 and 4 points,
   with the accent on 1 to 3% of the pixels. And a bright screenshot separates
   from this paper ground by about 38 luminance points against 169 from an ink
   one, so a dark ground would frame them better, not worse. Keep the cold
   ground because not wearing the product's colours is an identity decision,
   which is defensible. Do not keep it on the legibility argument, which the
   numbers do not support.
   ========================================================================= */

:root {
  /* Ground */
  --ink:      #0E1113;
  --ink-2:    #171B1E;
  --panel:    #1E2428;
  --paper:    #F4F3F0;
  --white:    #FFFFFF;

  /* Accent — "blueprint" teal. The one genuinely subjective call in here;
     swapping these two lines re-skins the site. */
  --accent:   #2F6F6B;
  --accent-2: #24544F;
  --accent-3: #E8F0EF;

  /* Amber. Emphasis only — never a surface, never a large fill. */
  --signal:   #E0A33C;

  /* Text */
  --fg:       #0E1113;
  --fg-mut:   #5C6266;
  --fg-mut-2: #83898D;

  /* Structure */
  --line:     rgba(14, 17, 19, .11);
  --line-2:   rgba(14, 17, 19, .06);
  --surface:  #FFFFFF;
  --surface-2:#EDEBE7;

  --good:     #0C7A4A;
  --crit:     #C0392B;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --gut: 28px;
  --max: 1180px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --disp: "Inter Tight", Inter, -apple-system, sans-serif;
}

.dark {
  --paper:    #0E1113;
  --fg:       #F1EFEC;
  --fg-mut:   #9BA1A5;
  --fg-mut-2: #767C80;
  --line:     rgba(255, 255, 255, .14);
  --line-2:   rgba(255, 255, 255, .07);
  --surface:  #171B1E;
  --surface-2:#1E2428;
  --accent:   #4E9B95;
  --accent-2: #6BB5AF;
  --accent-3: #16302E;
  --good:     #3FBE85;
  --crit:     #E8705F;
}

/* ---------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; line-height: 1.14; letter-spacing: -.021em; margin: 0; }
h1 { font-size: clamp(34px, 5.4vw, 58px); letter-spacing: -.028em; }
h2 { font-size: clamp(26px, 3.5vw, 38px); }
h3 { font-size: 20px; letter-spacing: -.012em; }
h4 { font-size: 16px; letter-spacing: -.008em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

code, .mono { font-family: var(--mono); font-size: .88em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
  font-size: 14px; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--gut); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- typography --- */

.kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
/* The registration tick — the drafting-grid motif, reinterpreted from the
   demo's window mullions. */
.kicker::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; flex: none;
}
.kicker.on-dark { color: var(--signal); }

.lede { font-size: clamp(17px, 1.7vw, 19.5px); line-height: 1.62; color: var(--fg-mut); }
.lede-lg { font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--fg-mut); }
.small { font-size: 13.5px; color: var(--fg-mut); }
.tiny  { font-size: 12.5px; color: var(--fg-mut-2); }

.sec-head { max-width: 660px; margin: 0 0 44px; }
.sec-head p { margin-top: 14px; }

/* -------------------------------------------------------------- layout --- */

section { padding: clamp(58px, 8vw, 104px) 0; }
section.tight { padding: clamp(40px, 5vw, 64px) 0; }
/* The header is sticky and 66px tall, so an anchored section would otherwise land with its
   own heading hidden underneath it — the one thing a deep link exists to show. */
section[id], [id]:target { scroll-margin-top: 88px; }

.band-ink   { background: var(--ink); color: #F1EFEC; }
.band-ink h1, .band-ink h2, .band-ink h3 { color: #FFF; }
.band-ink .lede, .band-ink .lede-lg, .band-ink p { color: #A8AEB2; }
.band-alt   { background: var(--surface-2); }
.band-line  { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
/* Alternate image side on wide screens; stacked mobile order stays copy-under-image. */
.split.rev > :first-child { order: 2; }
@media (max-width: 860px) { .split.rev > :first-child { order: 0; } }
.feature-rows { display: grid; gap: clamp(48px, 7vw, 88px); }

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 14px 24px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--accent); color: #fff; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--accent-2); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: transparent; border-color: var(--fg-mut); color: var(--fg); }

.btn.on-dark { background: #fff; color: var(--ink); }
.btn.on-dark:hover { background: #E6E3DE; }
.btn.ghost.on-dark { background: transparent; color: #F1EFEC; border-color: rgba(255,255,255,.26); }
.btn.ghost.on-dark:hover { border-color: rgba(255,255,255,.55); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.link-arrow::after { content: "→"; transition: transform .16s ease; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------- header --- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.site-head .inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
  height: 66px; display: flex; align-items: center; gap: 28px;
}

.wordmark {
  font-family: var(--disp); font-weight: 600; font-size: 19px; letter-spacing: -.03em;
  color: var(--fg); display: inline-flex; align-items: center; gap: 9px;
  /* The mark's point is painted from this, so it follows the theme the way the period does.
     The light accent only reaches 3.25:1 on the ink ground, which is why this has to resolve
     through --accent and not sit as a literal. The footer overrides it inline, because that
     band is dark even in the light theme. */
  --wm-dot: var(--accent);
}
.wordmark:hover { text-decoration: none; }

/* The name carries its own tight join. The period sits 1px off the "e" and that is the
   wordmark's character, so the anchor's larger gap must separate the mark from the word
   without also prising the period off the stem. Hence two nested flex contexts. */
.wm-name { display: inline-flex; align-items: baseline; gap: 1px; }
.wordmark i { font-style: normal; color: var(--accent); }

/* The Datum. Sized in em so it tracks the wordmark wherever that is set (19px in the header,
   18px in the footer) instead of needing a second rule per context. 1.37em puts it optically
   level with the word rather than out-shouting it: the mark's stroke is a fixed 2/32 of its
   box, so it gains weight as it grows and a larger mark reads louder than the name it labels. */
.wm-mark { width: 1.37em; height: 1.37em; flex: none; }

.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.site-nav a {
  font-size: 14.5px; font-weight: 500; color: var(--fg-mut);
  transition: color .14s ease;
}
.site-nav a:hover { color: var(--fg); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.site-nav .btn { font-size: 14px; padding: 10px 18px; color: #fff; }
.site-nav .btn:hover { color: #fff; }

.theme-btn {
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  color: var(--fg-mut); font-size: 15px; line-height: 1; padding: 0; flex: none;
}
.theme-btn:hover { color: var(--fg); border-color: var(--fg-mut-2); }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .site-nav {
    position: fixed; inset: 66px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 22px; margin: 0;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .site-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav a { padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 16px; }
  .site-nav .btn { margin-top: 16px; justify-content: center; padding: 14px; }
  .nav-toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 36px; height: 36px; background: transparent; border: 1px solid var(--line);
    border-radius: var(--r-sm); cursor: pointer; color: var(--fg); font-size: 16px; padding: 0;
  }
  .nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
}

/* --------------------------------------------------------------- hero --- */

.hero { padding: clamp(56px, 9vw, 116px) 0 clamp(48px, 6vw, 84px); position: relative; overflow: hidden; }
.hero-inner { max-width: 860px; position: relative; }
.hero h1 { margin-bottom: 22px; }
.hero .lede-lg { max-width: 640px; margin-bottom: 32px; }

/* Drafting grid, very faint. Pure CSS — no image request. */
.grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 0%, #000 0%, transparent 72%);
}
.grid-bg > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------- stat --- */

.stat-rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat-rail .stat { padding: 26px 26px 26px 0; border-right: 1px solid var(--line); }
.stat-rail .stat:last-child { border-right: 0; }
.stat-rail .stat:not(:first-child) { padding-left: 26px; }
@media (max-width: 780px) {
  .stat-rail { grid-template-columns: repeat(2, 1fr); }
  .stat-rail .stat:nth-child(2n) { border-right: 0; }
  .stat-rail .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.stat .n {
  font-family: var(--disp); font-size: clamp(28px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1; color: var(--fg); display: block; margin-bottom: 8px;
}
.stat .l { font-size: 13.5px; color: var(--fg-mut); line-height: 1.42; }
.band-ink .stat .n { color: #fff; }
.band-ink .stat .l { color: #969CA0; }
.band-ink .stat-rail { border-color: rgba(255,255,255,.15); }
.band-ink .stat-rail .stat { border-color: rgba(255,255,255,.15); }

/* -------------------------------------------------------------- cards --- */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.card h3 { letter-spacing: -.014em; }
.card p { font-size: 14.8px; color: var(--fg-mut); line-height: 1.62; }
.card .num {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--accent);
  font-weight: 500;
}
.band-ink .card { background: var(--ink-2); border-color: rgba(255,255,255,.11); }
.band-ink .card p { color: #969CA0; }

.card-flat { background: transparent; border: 0; border-top: 2px solid var(--fg); padding: 22px 0 0; }
.band-ink .card-flat { background: transparent; border: 0; border-top: 2px solid var(--signal); }

/* -------------------------------------------------------- proof strip --- */

.proof { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

.shot {
  display: block; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -14px rgba(0,0,0,.22);
  transition: transform .16s ease, box-shadow .16s ease;
}
a.shot:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 18px 34px -14px rgba(0,0,0,.28);
}
/* Screenshots are captured in Summit's LIGHT theme. In dark mode a bare light
   image glares, so the frame keeps its own pale surround and the image never
   abuts the dark page. */
.dark .shot { border-color: rgba(255,255,255,.16); background: #E9E7E3; }
.shot img { width: 100%; display: block; }
.shot .bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid var(--line-2); background: var(--surface-2);
}
.dark .shot .bar { background: #DCD9D4; border-color: rgba(0,0,0,.08); }
.shot .bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.16); display: block; }
.shot .bar span {
  font-family: var(--mono); font-size: 11px; color: #6B7175; margin-left: 6px;
}
.shot-cap { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--fg-mut); }
.shot-cap b { color: var(--fg); font-weight: 600; }

/* Placeholder shown when a capture is missing — labelled, never a broken image. */
.shot .pending {
  aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 24px; text-align: center;
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 10px, transparent 10px 20px);
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-mut-2); letter-spacing: .04em;
}

/* --------------------------------------------------------- the number --- */

.figure {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--disp); font-weight: 600; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(46px, 8vw, 84px);
}
.figure .unit { font-size: .46em; letter-spacing: -.02em; }
.figure.pos { color: var(--good); }
.figure.neg { color: var(--signal); }

.vs-row { display: flex; align-items: flex-end; gap: clamp(26px, 5vw, 60px); flex-wrap: wrap; }
.vs-row .vs-l { font-size: 13.5px; color: var(--fg-mut); margin-top: 10px; }
.band-ink .vs-row .vs-l { color: #969CA0; }

/* -------------------------------------------------------------- lists --- */

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.checks li { padding-left: 27px; position: relative; font-size: 15px; line-height: 1.58; color: var(--fg-mut); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 13px; height: 2px; background: var(--accent);
}
.checks li b, .checks li strong { color: var(--fg); font-weight: 600; }
.band-ink .checks li { color: #A8AEB2; }
.band-ink .checks li b { color: #fff; }
.band-ink .checks li::before { background: var(--signal); }

.checks.crosses li::before {
  background: none; color: var(--fg-mut-2); content: "—"; top: 0; width: auto; height: auto;
  font-weight: 600;
}

/* --------------------------------------------------------- the ladder --- */

.ladder { display: grid; gap: 0; counter-reset: phase; }
.ladder .rung {
  display: grid; grid-template-columns: 176px 1fr; gap: clamp(20px, 4vw, 48px);
  padding: 34px 0; border-top: 1px solid var(--line);
}
.ladder .rung:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .ladder .rung { grid-template-columns: 1fr; gap: 12px; } }
.ladder .ph {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; padding-top: 5px;
}
.ladder h3 { margin-bottom: 10px; }
.ladder .rung p { font-size: 15.2px; color: var(--fg-mut); max-width: 62ch; }
.ladder .own {
  margin-top: 14px; font-size: 13.5px; color: var(--fg); display: flex; gap: 8px;
  align-items: baseline;
}
.ladder .own b { font-weight: 600; }
.ladder .own::before { content: "↳"; color: var(--accent); }

/* ---------------------------------------------------------------- faq --- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 21px 40px 21px 0; position: relative; list-style: none;
  font-family: var(--disp); font-size: 17.5px; font-weight: 600; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 21px; font-weight: 400; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 60px 24px 0; font-size: 15.2px; color: var(--fg-mut); line-height: 1.66; }
.faq .a p { margin-bottom: .8em; }

/* -------------------------------------------------------------- forms --- */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.field .hint { font-size: 12.5px; color: var(--fg-mut-2); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 13px; width: 100%; transition: border-color .14s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-3);
}
.field textarea { resize: vertical; min-height: 116px; line-height: 1.55; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--crit); }
.field .err { font-size: 12.5px; color: var(--crit); font-weight: 500; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs
   but happily fill positioned ones. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13px; color: var(--fg-mut-2); line-height: 1.55; }

.form-status { border-radius: var(--r-sm); padding: 15px 17px; font-size: 14.5px; line-height: 1.55; }
.form-status.ok  { background: var(--accent-3); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.form-status.bad { background: color-mix(in srgb, var(--crit) 9%, transparent); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 26%, transparent); }
.dark .form-status.ok { color: #8FD3CC; }

.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 38px);
}

/* --------------------------------------------------------------- tour --- */

.tour-stage { display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; }
@media (max-width: 980px) { .tour-stage { grid-template-columns: 1fr; } }

.tour-frame {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #E9E7E3;
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 22px 48px -22px rgba(0,0,0,.32);
  position: relative;
}
.tour-frame img { width: 100%; display: block; }

.hot {
  position: absolute; border: 2px solid var(--signal); border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(14,17,19,.30);
  transition: all .32s cubic-bezier(.4,0,.2,1);
}
.hot .pin {
  position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--signal); color: var(--ink); font-size: 12px; font-weight: 700;
  display: grid; place-items: center; font-family: var(--mono);
}

.tour-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }
@media (max-width: 980px) { .tour-side { position: static; } }
.tour-step-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--accent); }
.tour-side h2 { font-size: 23px; }
.tour-side .cap { font-size: 15px; color: var(--fg-mut); line-height: 1.65; }

.tour-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tour-notes li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; color: var(--fg-mut); line-height: 1.5; }
.tour-notes .k {
  width: 20px; height: 20px; border-radius: 50%; background: var(--signal); color: var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

.tour-ctl { display: flex; align-items: center; gap: 10px; }
.tour-ctl .btn { padding: 11px 18px; font-size: 14px; }
.tour-ctl .pos { font-family: var(--mono); font-size: 12.5px; color: var(--fg-mut-2); margin-left: auto; }

.chapters { display: flex; flex-wrap: wrap; gap: 7px; }
.chapters button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 100px; border: 1px solid var(--line);
  background: transparent; color: var(--fg-mut); cursor: pointer; transition: all .14s ease;
}
.chapters button:hover { border-color: var(--fg-mut-2); color: var(--fg); }
.chapters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.tour-track { display: flex; gap: 4px; }
.tour-track i {
  flex: 1; height: 3px; border-radius: 2px; background: var(--line); display: block;
  transition: background .2s ease;
}
.tour-track i.done { background: var(--accent); }

/* -------------------------------------------------------------- misc --- */

.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 100px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--fg-mut);
}
.pill.live { border-color: color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.callout {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 22px; margin: 28px 0;
  font-size: 16.5px; line-height: 1.6; color: var(--fg);
}
.callout cite { display: block; margin-top: 10px; font-size: 13px; color: var(--fg-mut-2); font-style: normal; }
.band-ink .callout { border-color: var(--signal); color: #E6E3DE; }

.prose { max-width: 68ch; }
.prose h2 { margin: 46px 0 16px; }
.prose h3 { margin: 32px 0 12px; }
.prose p, .prose li { font-size: 16.2px; line-height: 1.72; color: var(--fg-mut); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

/* ------------------------------------------------------------- footer --- */

.site-foot { background: var(--ink); color: #8D9498; padding: 56px 0 34px; }
.site-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-foot .cols { grid-template-columns: 1fr; } }
.site-foot .wordmark { color: #fff; font-size: 18px; }
.site-foot h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #6B7175; font-weight: 500; margin-bottom: 15px;
}
.site-foot a { color: #A8AEB2; font-size: 14.5px; display: block; padding: 5px 0; }
.site-foot a:hover { color: #fff; text-decoration: none; }
.site-foot .blurb { font-size: 14.5px; line-height: 1.65; max-width: 34ch; margin-top: 14px; }
.site-foot .base {
  border-top: 1px solid rgba(255,255,255,.11); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: #6B7175;
}