/* ciaran-trevino.com — SWITCHBACKS
   One continuous drawn line runs the page: ten switchbacks from Pivotal at 14,
   resolving into the actual permitted Twin Peaks route, then on to what is next.
   Fog and asphalt, vest yellow earned by 25 spotters. Fraunces / Archivo / JetBrains Mono.
   Motion is CSS scroll-driven only; JS-off, reduced-motion and Firefox get the
   finished page with the line fully drawn. */

@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ground: #f3f4f2;
  --surface: #ffffff;
  --ink: #1b1d1e;
  --muted: #5d6367;
  --hairline: #d8dad6;
  --line: #1b1d1e;
  --yellow: #e5b800;
  --yellow-ink: #7a6300;
  /* the route chapter stays a physical night in both themes */
  --asphalt: #131517;
  --asphalt-2: #191c1f;
  --asphalt-text: #e4e6e7;
  --asphalt-muted: #9aa0a4;
  --asphalt-hair: #2a2e32;
  --chalk: #e4e6e7;
  --vest: #f5c400;
  /* clippings stay newsprint in both themes */
  --paper: #f4f1e8;
  --paper-ink: #1b1813;
  --paper-muted: #5c564a;
  --paper-hair: #cfc8b8;
  --display: "Fraunces", Georgia, serif;
  --text: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #131517;
    --surface: #191c1f;
    --ink: #e4e6e7;
    --muted: #9aa0a4;
    --hairline: #2a2e32;
    --line: #e4e6e7;
    --yellow: #f5c400;
    --yellow-ink: #f5c400;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0313rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--yellow); color: #1b1d1e; }

.mono { font-family: var(--mono); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

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

.hero { min-height: 86svh; display: flex; flex-direction: column; padding-top: 2rem; }

.toprail {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.7813rem; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
  padding-bottom: 1rem; border-bottom: 1px solid var(--hairline);
}
.toprail a { text-decoration: none; color: var(--muted); }
.toprail a:hover { color: var(--ink); }
.toprail .rlinks { display: flex; gap: 1.4rem; }

.claim {
  margin: auto 0;
  padding: 3.5rem 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.6vw, 3.1rem);
  line-height: 1.22;
  max-width: 21em;
  text-wrap: pretty;
}
.claim .place { white-space: nowrap; }
.claim em { font-style: normal; border-bottom: 3px solid var(--yellow); }

.hero-receipts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem;
  font-family: var(--mono); font-size: 0.8125rem; color: var(--muted);
  margin-top: 2.2rem;
}
.hero-receipts span::before { content: "+ "; color: var(--yellow-ink); }

.hero-line { display: block; margin-top: 1.6rem; height: 12svh; min-height: 70px; }
.hero-line svg { height: 100%; width: 100%; display: block; }

/* ---------------- ledger ---------------- */

.ledger { padding-block: 3rem 1rem; }
.kicker {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
  margin-bottom: 1.6rem;
}
.kicker b { color: var(--yellow-ink); font-weight: 400; }

.ledger ol { list-style: none; border-top: 1px solid var(--hairline); }
.ledger li { border-bottom: 1px solid var(--hairline); }
.ledger a {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.2rem; align-items: baseline;
  padding: 0.72rem 0.2rem; text-decoration: none;
  font-family: var(--mono); font-size: 0.875rem;
}
.ledger a:hover { background: color-mix(in srgb, var(--yellow) 9%, transparent); }
.ledger .yr { color: var(--muted); }
.ledger .go { color: var(--muted); font-size: 0.8125rem; }
.ledger a:hover .go { color: var(--yellow-ink); }

/* ---------------- the descent ---------------- */

.descent { padding-top: 1.5rem; }
.descent-grid { display: grid; grid-template-columns: 1fr 8.5rem 1fr; }

.seg { grid-column: 2; height: 100%; width: 100%; display: block; }
.seg path, .hero-line path, .tail-line path {
  fill: none; stroke: var(--line); stroke-width: 2.25px;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}

.sb { padding: 1.9rem 0 2.6rem; max-width: 34rem; }
.sb.left  { grid-column: 1; justify-self: end; text-align: right; padding-right: 0.4rem; }
.sb.right { grid-column: 3; justify-self: start; padding-left: 0.4rem; }
.sb .plate {
  font-family: var(--mono); font-size: 0.7813rem; letter-spacing: 0.06em;
  color: var(--muted); display: flex; align-items: center; gap: 0.7rem;
}
.sb.left .plate { justify-content: flex-end; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 3px;
  padding: 0.22rem 0.55rem;
  font-family: var(--mono); font-size: 0.7188rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink);
}
.chip img, .chip svg { height: 15px; width: auto; display: block; }
.sb h3 { font-size: 1.45rem; margin-top: 0.55rem; }
.sb .role { color: var(--muted); font-size: 0.9063rem; margin-top: 0.1rem; }
.sb .story { margin-top: 0.7rem; font-size: 0.9688rem; text-wrap: pretty; }
.sb .receipt {
  margin-top: 0.8rem; font-family: var(--mono); font-size: 0.8125rem;
  color: var(--yellow-ink);
}
.sb.left .receipt::after { content: " ●"; }
.sb.right .receipt::before { content: "● "; }
.sb details { margin-top: 0.7rem; font-size: 0.875rem; }
.sb summary {
  cursor: pointer; font-family: var(--mono); font-size: 0.7813rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.sb summary:hover { color: var(--ink); }
.sb details div { margin-top: 0.6rem; color: var(--muted); }
.sb details a { color: var(--ink); }

/* ---------------- route chapter ---------------- */

.route-chapter {
  background: var(--asphalt); color: var(--asphalt-text);
  padding: 4.5rem 0 4rem; margin: 2rem 0;
}
.route-chapter .kicker { color: var(--asphalt-muted); }
.route-chapter .kicker b { color: var(--vest); }
.route-lead {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem); max-width: 24em; text-wrap: pretty;
}

.clippings { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.clip {
  background: var(--paper); color: var(--paper-ink);
  border: 1px solid var(--paper-hair);
  padding: 1.5rem 1.6rem 1.4rem;
}
.clip .outlet {
  font-family: var(--mono); font-size: 0.7188rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-muted);
}
.clip h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.18; margin-top: 0.7rem; text-wrap: balance; }
.clip h3 a { text-decoration: none; }
.clip h3 a:hover { text-decoration: underline; text-decoration-color: var(--paper-ink); }
.clip .byline { font-family: var(--mono); font-size: 0.75rem; color: var(--paper-muted); margin-top: 0.7rem; }
.clip .excerpt { font-size: 0.9375rem; margin-top: 0.9rem; color: var(--paper-ink); }
.clip .readlink { display: inline-block; margin-top: 1rem; font-family: var(--mono); font-size: 0.75rem; color: var(--paper-muted); }
.clip .readlink:hover { color: var(--paper-ink); }

.pull {
  margin: 3.2rem auto 0; max-width: 30em;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem); line-height: 1.3; text-wrap: pretty;
}
.pull footer { font-family: var(--mono); font-style: normal; font-size: 0.7813rem; color: var(--asphalt-muted); margin-top: 1rem; }

.routemap { margin-top: 3.2rem; }
.routemap svg { width: 100%; height: auto; display: block; }
.routemap .roadline { fill: none; stroke: var(--chalk); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.routemap .dots { fill: none; stroke: var(--vest); stroke-width: 9; stroke-linecap: round; }
.routemap text { font-family: var(--mono); font-size: 13px; fill: var(--asphalt-muted); letter-spacing: 0.14em; }
.routemap .endpt { fill: var(--chalk); }
.routemap svg.routemap-portrait { display: none; }

.route-receipts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem; margin-top: 2.6rem;
  font-family: var(--mono); font-size: 0.7813rem; letter-spacing: 0.1em;
  color: var(--asphalt-muted); text-transform: uppercase;
}
.route-receipts span::before { content: "▸ "; color: var(--vest); }

/* ---------------- systems yard ---------------- */

.yard { padding-block: 3.5rem 1rem; }
.yard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0.5rem; }
.case {
  border: 1px solid var(--hairline); background: var(--surface);
  padding: 1.6rem 1.7rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.case .lab { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow-ink); }
.case h3 { font-size: 1.4rem; }
.case .what { font-size: 0.9375rem; text-wrap: pretty; }
.case .evidence {
  font-family: var(--mono); font-size: 0.7813rem; line-height: 1.75;
  border-left: 2px solid var(--yellow); padding: 0.5rem 0 0.5rem 0.9rem;
  color: var(--muted); margin-top: auto;
}
.case .evidence b { color: var(--ink); font-weight: 400; }

/* ---------------- where the line goes ---------------- */

.next { padding-block: 3.5rem 0; }
.next p { max-width: 38em; text-wrap: pretty; }
.next .cta {
  display: inline-block; margin-top: 1.5rem;
  font-family: var(--mono); font-size: 0.875rem; text-decoration: none;
  background: var(--ink); color: var(--ground);
  padding: 0.75rem 1.3rem; border-radius: 3px;
}
.next .cta:hover { background: var(--yellow); color: #1b1d1e; }

/* ---------------- line's end ---------------- */

.tail-line { display: block; height: 110px; margin-top: 2.5rem; }
.tail-line svg { height: 100%; width: 100%; display: block; }
.enddot { fill: var(--yellow); }

footer.end {
  border-top: 1px solid var(--hairline);
  padding: 1.8rem 0 3.2rem;
  font-family: var(--mono); font-size: 0.7813rem; color: var(--muted);
}
footer.end .wrap { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; }
footer.end a { text-decoration: none; color: var(--muted); }
footer.end a:hover { color: var(--ink); }
footer.end .cols { display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; }

/* ---------------- motion (scroll-driven, fully gated) ----------------
   Default state everywhere above: line drawn, content visible.
   Only inside supporting browsers with motion allowed does anything animate. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .seg path, .hero-line path {
      stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    .routemap .roadline {
      stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 55%;
    }
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------------- mobile ---------------- */

@media (max-width: 52rem) {
  .descent-grid { grid-template-columns: 1.4rem 1fr; }
  .seg { grid-column: 1; }
  .sb, .sb.left, .sb.right {
    grid-column: 2; justify-self: start; text-align: left;
    padding-left: 0.9rem; padding-right: 0;
  }
  .sb.left .plate { justify-content: flex-start; }
  .sb.left .receipt::after { content: ""; }
  .sb.left .receipt::before { content: "● "; }
  .clippings { grid-template-columns: 1fr; }
  .yard-grid { grid-template-columns: 1fr; }
  .ledger a { grid-template-columns: 3.2rem 1fr; }
  .ledger .go { display: none; }
  .routemap svg.routemap-landscape { display: none; }
  .routemap svg.routemap-portrait { display: block; max-width: 22rem; margin: 0 auto; }
  .claim { padding-top: 2.5rem; }
}