/* Campground, direction A: "The Revision". Shared styles for index.html and stoke.html. */

:root {
  --sheet: #F1EEE2;
  --ink: #1C1B19;
  --muted: #5E5B52;
  --rule: #CFCAB8;
  --purple: #8A2585;   /* only stoke's revisions */
  --brown: #9A5A2C;    /* contours, stoke.html only */
  --wood: #DDE6C6;     /* map panels, stoke.html only */
  --water: #2A6592;

  --pad: clamp(16px, 4vw, 56px);
  --gap: clamp(16px, 1.8vw, 28px);
  --max: 1360px;
  --nav: 64px;
  --head: var(--nav);

  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --ease-ink: cubic-bezier(.3, 0, .1, 1);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--sheet); color: var(--ink);
  font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
img, svg, canvas { display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--sheet); padding: 10px 14px; font: 600 15px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- type ---------- */
.display { font: 500 clamp(40px, 4.6vw, 72px)/1.03 var(--sans); letter-spacing: -0.03em; }
h2, .h2 { font: 500 clamp(30px, 3.1vw, 48px)/1.08 var(--sans); letter-spacing: -0.025em; }
.flow { font: italic 400 clamp(30px, 3.8vw, 60px)/1.14 var(--serif); letter-spacing: -0.01em; }
.body { font-size: 18px; line-height: 1.6; max-width: 60ch; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.wordmark-stoke { font: italic 500 clamp(112px, 13vw, 200px)/0.82 var(--serif); letter-spacing: -0.035em; color: var(--purple); }
.num { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--sheet); }
.top-in {
  height: var(--nav); display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 20px/1 var(--sans); letter-spacing: -0.03em; }
.brand svg { width: 22px; height: 20px; color: var(--ink); }
.top nav { display: flex; gap: 28px; }
.top nav a { font: 500 16px/1 var(--sans); text-decoration: none; padding: 8px 0; position: relative; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out; }
.top nav a:hover::after { transform: scaleX(1); }
.top nav a[aria-current="page"]::after { height: 2px; bottom: 0; background: var(--purple); transform: scaleX(1); }
.js.motion .top nav a[aria-current="page"]:not(.drawn)::after { animation: underline .4s .15s var(--ease-ink) both; }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--sheet);
  font: 600 15px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: background .12s ease-out, color .12s ease-out;
}
.btn .ar { display: inline-block; transition: transform .12s ease-out; }
.btn:hover { background: var(--sheet); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--sheet); }
.btn:hover .ar.r { transform: translateX(3px); }
.btn:hover .ar.d { transform: translateY(3px); }
.btn:hover .ar.ne { transform: translate(2px, -2px); }
.btn.big { font-size: 18px; padding: 18px 28px; }

/* ---------- split-flap ---------- */
.flap { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flap .c { display: inline-block; }
.flap .c.dot { display: inline-flex; justify-content: center; width: .3em; margin-right: -.04em; letter-spacing: 0; }
.flap .c.f { transform: translateY(-6%); opacity: .55; }

/* ---------- receipts: measurements, legible but quiet ---------- */
.rc { font: 400 13px/1.5 var(--mono); color: var(--muted); }
.body .rc, p .rc-in { font-family: var(--mono); font-size: .85em; }
.sig { margin-top: 24px; font: italic 400 24px/1.3 var(--serif); }

/* ---------- the two-line bar: the route unrolled ----------
   ink = the original time (100%), purple = the time with stoke (ratio). Nothing is drawn for what's saved:
   the empty run between the purple end and a dotted hairline dropped from the ink end is the saving.
   Both lines end flat. */
.rbar { position: relative; }
.rb-row { position: relative; height: 26px; font: 400 12px/1 var(--mono); white-space: nowrap; }
.rb-row + .rb-row { margin-top: 14px; }
.rb-l { position: absolute; left: 0; top: 0; }
.rb-v { position: absolute; top: 0; right: 0; }
.rb-row.s { color: var(--purple); }
.rb-row.s .rb-v { right: calc(100% - var(--r)); }
.rb-line { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--ink); transform-origin: left; }
.rb-row.s .rb-line { width: var(--r); background: var(--purple); }
.rb-drop { position: absolute; left: calc(100% - .5px); top: 26px; height: 40px; border-left: 1px dotted var(--ink); }
.js.motion .rbar .rb-row.s .rb-line { transform: scaleX(0); }
.js.motion .rbar .rb-row.s .rb-v { opacity: 0; }
.js.motion .rbar.in .rb-row.s .rb-line { transform: scaleX(1); transition: transform var(--ink-ms, .8s) var(--ease-ink); }
.js.motion .rbar.in .rb-row.s .rb-v { opacity: 1; transition: opacity .2s calc(var(--ink-ms, .8s) - .05s); }

/* ---------- profile chart ---------- */
.chart { position: relative; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart text { font: 400 12px var(--mono); fill: var(--muted); }
.chart .val { fill: var(--ink); font-size: 13px; }
.chart .val.strong { font-weight: 500; }
.chart .axis { stroke: var(--ink); stroke-width: 1; opacity: .35; }
.chart .grid-l { stroke: var(--ink); stroke-width: 1; opacity: .12; }
.chart .base { stroke: var(--ink); stroke-width: 1.25; }
.chart .line { fill: none; stroke: var(--purple); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--purple); }
.chart .base-l { fill: var(--ink); }
.chart .lead { stroke: var(--ink); stroke-width: 1; opacity: .5; }

/* ---------- section rhythm ---------- */
.sec { padding-block: clamp(96px, 12vw, 176px); }

/* ---------- contact (A6 / S6) ---------- */
.contact .grid { align-items: end; row-gap: 40px; }
.contact .c-text { grid-column: 1 / 8; }
.contact .c-text p { margin-top: 24px; max-width: 40em; }
.contact .c-act { grid-column: 9 / 13; justify-self: start; }

/* ---------- footers ---------- */
.foot { padding: 0 0 32px; }
.foot-in { border-top: 1px solid var(--ink); padding-top: 64px; }
.foot-mark { position: relative; }
.foot-mark canvas.ink { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.foot-hint { font: 400 12px/1.4 var(--mono); color: var(--muted); transition: opacity .6s ease; }
.foot-line { margin-top: 24px; font: 400 13px/1.4 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 .6em; }
.foot-line a { text-decoration: none; }
.foot-line a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* camp mark draw-on (A4, S4 terminus) */
.camp-draw path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.camp-draw circle { transform-box: fill-box; transform-origin: center; }

/* ---------- phone ---------- */
@media (max-width: 759px) {
  :root { --nav: 52px; }
  body { font-size: 17px; }
  .display { font-size: 40px; }
  h2, .h2 { font-size: 30px; }
  .flow { font-size: 28px; }
  .body { font-size: 17px; }
  .grid { display: block; }
  .brand { font-size: 19px; gap: 8px; }
  .brand svg { width: 20px; height: 18px; }
  .top nav { gap: 20px; }
  .top nav a { font-size: 15px; }
  .btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .btn { width: 100%; }
  .sec { padding-block: 72px; }
  .contact { text-align: center; }
  .contact .c-text p { margin-inline: auto; }
  .contact .c-act { display: flex; justify-content: center; margin-top: 40px; justify-self: stretch; width: 100%; }
  .contact .btn.big { width: 100%; max-width: 360px; font-size: 17px; }
  .sig { font-size: 20px; }
  .rc { font-size: 12px; }
  .rb-line { height: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}
.nw { white-space: nowrap; }