/* Heldway — an atlas of the long way round */

:root {
  --paper: #e7e2d5;
  --paper-2: #ddd7c8;
  --paper-3: #d2cbba;
  --ink: #1c201c;
  --ink-2: #464a42;
  --ink-3: #6b6c62;
  --rule: rgba(28, 32, 28, 0.28);
  --rule-soft: rgba(28, 32, 28, 0.14);
  --copper: #b0602f;
  --copper-text: #8f431b;
  --moss: #4f5d36;
  --stone: #8b877a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --edge: clamp(20px, 3vw, 44px);
  --journey-h: 206px;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--copper-text);
}

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

html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  background: var(--paper);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }
[hidden]:not(.label) { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- the plate */

.atlas {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--journey-h);
  height: 100vh;
  height: 100svh;
  min-height: 660px;
  overflow: hidden;
  isolation: isolate;
}

.stage {
  position: relative;
  grid-row: 1;
  overflow: hidden;
  background: linear-gradient(180deg, #a3aba8 0%, #d8d6cb 46%, #e3ded1 100%);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.stage.is-dragging { cursor: grabbing; }
.stage__canvas, .stage__plan, .stage__still {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.stage__canvas { opacity: 0; transition: opacity 0.9s ease; }
.stage.is-live .stage__canvas { opacity: 1; }
.stage__still {
  object-fit: cover;
  object-position: 62% 45%;
  opacity: 0.9;
  filter: saturate(0.9);
  transition: opacity 0.9s ease;
}
.stage.is-live .stage__still { opacity: 0; }
.stage__plan { background: var(--paper); }

.stage__status {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  margin: 0; padding: 10px 18px;
  font-style: italic; font-size: 18px; color: var(--ink-2);
  background: rgba(231, 226, 213, 0.8);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.stage__status[data-state="done"] { opacity: 0; }
.stage__status[data-state="error"] { font-style: normal; font-size: 15px; max-width: min(80%, 460px); text-align: center; }
.dots::after { content: "…"; }

.stage__hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); background: rgba(231, 226, 213, 0.72); padding: 5px 10px;
  opacity: 0; transition: opacity 0.8s ease; pointer-events: none; white-space: nowrap;
}
.stage__hint.is-shown { opacity: 1; }

/* the left margin of the plate: text sits on paper, the land fades in beneath it */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(231, 226, 213, 0.94) 0, rgba(231, 226, 213, 0.82) 21%, rgba(231, 226, 213, 0.35) 31%, rgba(231, 226, 213, 0) 40%),
    linear-gradient(180deg, rgba(231, 226, 213, 0.55) 0, rgba(231, 226, 213, 0) 16%);
}

/* neat line: the printed frame of the plate */
.neatline {
  position: absolute; inset: 12px; z-index: 4; pointer-events: none;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule-soft); outline-offset: 3px;
}
.neatline__tick {
  position: absolute; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-3);
}
.neatline__tick[data-edge="n"] { top: -1px; left: var(--at); transform: translate(-50%, -100%); padding-bottom: 2px; }
.neatline__tick[data-edge="n"]::after { content: ""; position: absolute; left: 50%; top: 100%; height: 7px; border-left: 1px solid var(--rule); }
.neatline__tick[data-edge="w"] { left: -1px; top: var(--at); transform: translate(-100%, -50%) rotate(-90deg) translateY(-8px); }
.neatline__imprint {
  position: absolute; right: 10px; bottom: calc(var(--journey-h) - 2px);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper); padding: 1px 6px; transform: translateY(50%);
}

/* masthead */
.masthead {
  position: absolute; z-index: 5; left: calc(var(--edge) + 4px); top: 30px;
  display: flex; align-items: baseline; gap: 14px;
}
.wordmark {
  margin: 0; font-weight: 400; font-size: 15px; letter-spacing: 0.46em; text-transform: uppercase;
  font-variant-numeric: lining-nums;
}
.tagline { margin: 0; font-style: italic; font-size: 14px; color: var(--ink-2); }

/* plate title */
.plate-title {
  position: absolute; z-index: 5; left: calc(var(--edge) + 4px); top: 84px;
  width: min(360px, 30vw);
}
.plate-title__no {
  margin: 0 0 10px; display: flex; gap: 12px; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-text);
}
.plate-title__region { color: var(--ink-2); }
.plate-title__region::before { content: "·"; margin-right: 12px; color: var(--ink-3); }
.plate-title__name {
  margin: 0; font-weight: 400; font-style: italic;
  font-size: clamp(44px, 4.6vw, 70px); line-height: 0.96; letter-spacing: -0.012em;
  text-wrap: balance;
}
.plate-title__epigraph {
  margin: 16px 0 0; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); max-width: 30ch;
  text-wrap: pretty;
}
.stats {
  margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, auto); gap: 0 18px; justify-content: start;
  border-top: 1px solid var(--rule); padding-top: 10px;
}
.stats div { margin: 0; }
.stats dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin: 2px 0 0; font-size: 18px; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* the three plates */
.plates {
  position: absolute; z-index: 5; right: calc(var(--edge) + 4px); top: 26px;
  display: flex; gap: 6px;
}
.plate-btn {
  display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 8px 14px 8px 8px;
  background: rgba(231, 226, 213, 0.62);
  border: 0; border-top: 1px solid var(--rule);
  cursor: pointer; text-align: left;
  transition: background-color 0.25s ease;
}
.plate-btn:hover { background: rgba(231, 226, 213, 0.9); }
.plate-btn[aria-pressed="true"] { background: var(--paper); border-top: 3px solid var(--copper); padding-top: 6px; }
.plate-btn__glyph { width: 44px; height: 44px; flex: none; opacity: 0.75; }
.plate-btn[aria-pressed="true"] .plate-btn__glyph { opacity: 1; }
.plate-btn__text { display: grid; gap: 1px; }
.plate-btn__no { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--copper-text); }
.plate-btn__name { font-size: 15px; line-height: 1.15; white-space: nowrap; }
.plate-btn__meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.plate-btn[aria-busy="true"] .plate-btn__meta::after { content: " · surveying"; }

/* instruments */
.instruments {
  position: absolute; z-index: 5; right: calc(var(--edge) + 4px); top: 104px;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 560px;
}
.seg { display: flex; border: 1px solid var(--ink); background: rgba(231, 226, 213, 0.78); }
.seg__btn {
  border: 0; background: transparent; padding: 0 14px; min-height: 38px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.seg__btn + .seg__btn { border-left: 1px solid var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tool {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 11px;
  border: 1px solid var(--ink); background: rgba(231, 226, 213, 0.78); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.tool:hover, .seg__btn:hover { background-color: rgba(231, 226, 213, 1); }
.seg__btn[aria-pressed="true"]:hover { background: var(--ink); }
.tool--quiet { border-color: var(--rule); }
.tool__icon { width: 16px; height: 16px; fill: currentColor; flex: none; }
.tool__state { color: var(--copper-text); }
#play { background: var(--ink); color: var(--paper); }
#play:hover { background: #2d332d; }
#play .i-pause { display: none; }
#play[aria-pressed="true"] .i-pause { display: inline; }
#play[aria-pressed="true"] .i-play { display: none; }
#sound[aria-pressed="false"] .i-wave { opacity: 0.25; }

.toggles {
  position: absolute; z-index: 5; right: calc(var(--edge) + 4px); top: 152px;
  display: flex; gap: 8px;
}

/* inset plan */
.inset {
  position: absolute; z-index: 5; left: calc(var(--edge) + 4px);
  bottom: calc(var(--journey-h) + 22px);
  width: 196px; margin: 0;
}
.inset__canvas {
  display: block; width: 196px; height: 196px; cursor: crosshair;
  background: var(--paper); box-shadow: 0 0 0 1px var(--rule);
}
.inset__caption {
  margin: 6px 0 0; display: flex; justify-content: space-between; gap: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}

/* projected labels */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.label {
  position: absolute; left: 0; top: 0; will-change: transform;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.35s ease;
}
.label[hidden] { display: flex; opacity: 0; }
.label__text {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-variant: small-caps;
  white-space: nowrap; color: var(--ink);
  text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px rgba(231, 226, 213, 0.8);
  transform: translateY(-100%);
}
.label__text small { display: block; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--ink-2); font-variant: normal; }
.label__stem { width: 1px; height: 18px; background: var(--ink); opacity: 0.7; transform: translateY(-100%); }
.label--walker .label__text {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: none; font-variant: normal;
  color: var(--paper); background: var(--ink); padding: 3px 7px 4px; text-shadow: none;
}
.label--walker .label__stem { height: 10px; background: var(--ink); opacity: 1; }
.label.is-current .label__text { color: var(--copper-text); }

/* journey band */
.journey {
  grid-row: 2; position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 34px;
  padding: 16px calc(var(--edge) + 4px) 26px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.readout {
  grid-column: 2; grid-row: 1;
  display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: baseline;
  padding-left: 48px;
}
.readout__cell { display: inline-flex; gap: 8px; align-items: baseline; }
.readout__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.readout__v { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
#rElev { color: var(--copper-text); }

.profile {
  grid-column: 2; grid-row: 2; position: relative; min-height: 110px; margin-top: 4px;
  cursor: ew-resize; touch-action: none; outline: none;
}
.profile:focus-visible { box-shadow: var(--focus); }
.profile__svg { position: absolute; inset: 0; display: block; overflow: visible; }
.profile__hatchline { stroke: var(--ink); stroke-width: 0.6; opacity: 0.32; }
.profile__area { stroke: none; }
.profile__line { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.profile__walked-area { fill: rgba(176, 96, 47, 0.2); }
.profile__walked-line { fill: none; stroke: var(--copper); stroke-width: 2.2; stroke-linejoin: round; }
.profile__rule { stroke: var(--rule-soft); stroke-width: 1; stroke-dasharray: 2 3; }
.profile__baseline { stroke: var(--ink); stroke-width: 1; }
.profile__tick { stroke: var(--ink); stroke-width: 1; }
.profile__axis { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-3); letter-spacing: 0.04em; }
.profile__way-stem { stroke: var(--ink); stroke-width: 0.8; stroke-dasharray: 1.5 2.5; opacity: 0.6; }
.profile__way-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.profile__way-label { font-family: var(--serif); font-size: 11.5px; letter-spacing: 0.06em; fill: var(--ink-2); }
.profile__way.is-passed .profile__way-dot { fill: var(--copper); stroke: var(--copper-text); }
.profile__way.is-passed .profile__way-label { fill: var(--copper-text); }
.profile__cursor-line { stroke: var(--copper-text); stroke-width: 1.4; }
.profile__cursor-dot { fill: var(--copper); stroke: var(--paper); stroke-width: 2; }
.profile.is-dragging .profile__cursor-dot { r: 6; }

.note {
  grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: start;
  display: grid; gap: 6px; padding-top: 2px;
}
.note__place {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-variant: small-caps; color: var(--copper-text);
}
.note__text { font-size: 16px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.note.is-changing .note__text, .note.is-changing .note__place { opacity: 0.25; }
.note__text, .note__place { transition: opacity 0.3s ease; }

.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }

/* ---------------------------------------------------------------- colophon */

.colophon {
  position: relative; background: var(--paper-2);
  padding: clamp(48px, 7vw, 96px) calc(var(--edge) + 4px) 40px;
  border-top: 1px solid var(--rule);
}
.colophon__inner {
  display: grid; grid-template-columns: 1.1fr 1.2fr 1.2fr 0.9fr; gap: 28px 48px; max-width: 1400px;
}
.colophon__title {
  margin: 0; font-weight: 400; font-style: italic; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02;
}
.colophon h3 {
  margin: 6px 0 12px; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-text);
}
.colophon p, .colophon li { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.colophon p { margin: 0 0 12px; max-width: 46ch; }
.howto { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.howto b { font-weight: 400; color: var(--ink); font-style: italic; }
kbd {
  font-family: var(--mono); font-size: 11px; padding: 0 5px; border: 1px solid var(--rule); border-bottom-width: 2px; background: var(--paper);
  white-space: nowrap;
}
.legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.legend li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.legend svg { width: 40px; height: 14px; flex: none; overflow: visible; }
.lg-index { fill: none; stroke: #5b3b27; stroke-width: 1.6; }
.lg-minor { fill: none; stroke: #5b3b27; stroke-width: 0.8; opacity: 0.6; }
.lg-stream { fill: none; stroke: #3b4f58; stroke-width: 1.3; }
.lg-water { fill: none; stroke: #5f7676; stroke-width: 1; }
.lg-walked { stroke: var(--copper); stroke-width: 3; }
.lg-ahead { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; }
.lg-way { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.lg-waydot { fill: var(--ink); }
.lg-walker { fill: none; stroke: var(--copper); stroke-width: 1.6; }
.lg-staff { stroke: var(--ink); stroke-width: 1.2; }
.colophon__imprint {
  margin: clamp(40px, 6vw, 72px) 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}

/* ------------------------------------------------------------ narrower desk */

@media (max-width: 1180px) {
  .plate-btn__meta { display: none; }
  .plate-btn__name { font-size: 14px; }
  .plate-title { width: 300px; }
  .instruments { max-width: 420px; }
}

/* short desktop windows: the inset gives way to the title */
@media (max-height: 820px) and (min-width: 761px) {
  .inset { display: none; }
}

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

@media (max-width: 760px) {
  :root { --stage-h: max(360px, 56svh); --edge: 16px; }
  .atlas {
    display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible;
  }
  .stage { flex: none; height: var(--stage-h); order: 1; }
  .stage::after { background: linear-gradient(180deg, rgba(231, 226, 213, 0.7) 0, rgba(231, 226, 213, 0) 24%); }
  .neatline { inset: 8px; bottom: auto; height: calc(var(--stage-h) - 16px); }
  .neatline__tick, .neatline__imprint { display: none; }

  .masthead { top: 20px; left: 22px; flex-direction: column; gap: 2px; }
  .wordmark { font-size: 13px; letter-spacing: 0.4em; }
  .tagline { font-size: 12.5px; }

  .instruments {
    top: calc(var(--stage-h) - 58px); left: 20px; right: 20px; max-width: none;
    justify-content: space-between; gap: 6px; flex-wrap: nowrap;
  }
  .seg__btn { padding: 0 11px; min-height: 40px; font-size: 10.5px; letter-spacing: 0.08em; }
  #play .tool__label { font-size: 10.5px; }
  #play { padding: 0 12px 0 10px; }
  .toggles { top: 16px; right: 16px; gap: 6px; }
  .toggles .tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .toggles .tool__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .plates {
    position: static; order: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    padding: 0 12px; background: var(--paper); border-bottom: 1px solid var(--rule-soft);
  }
  .plate-btn {
    flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 8px 6px 9px;
    background: transparent; border-top: 3px solid transparent;
  }
  .plate-btn[aria-pressed="true"] { background: transparent; padding-top: 8px; }
  .plate-btn__glyph { display: none; }
  .plate-btn__name { font-size: 14px; white-space: normal; }

  .journey {
    order: 3; display: flex; flex-direction: column; gap: 6px;
    padding: 12px 16px 20px; border-top: 0;
  }
  .readout { order: 1; padding-left: 0; gap: 4px 14px; justify-content: space-between; }
  .readout__cell { flex-direction: column; gap: 0; }
  .readout__cell--wide { display: none; }
  .readout__v { font-size: 13.5px; }
  .profile { order: 2; height: 118px; flex: none; margin-top: 2px; }
  .note { order: 3; padding-top: 6px; }
  .note__text { font-size: 15px; }

  .plate-title {
    position: static; order: 4; width: auto; padding: 22px 16px 30px;
    background: var(--paper); border-top: 1px solid var(--rule-soft);
  }
  .plate-title__name { font-size: 38px; }
  .plate-title__epigraph { font-size: 16px; max-width: none; }
  .stats { grid-template-columns: repeat(2, auto); gap: 10px 28px; }

  .inset { display: none; }
  .stage__hint { bottom: 72px; }
  .stage__status { font-size: 16px; }

  .colophon__inner { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .seg__btn { padding: 0 8px; font-size: 10px; }
  #play .tool__label { font-size: 10px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .seg__btn[aria-pressed="true"], .plate-btn[aria-pressed="true"], #play[aria-pressed="true"] { outline: 2px solid CanvasText; }
}