/* Hallmark · route: custom (bespoke) · structure: street → topsoil → clay → rock → bedrock → cave · nav: N7 slab (hand-lettered) · footer: Ft5 statement in the cave */

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

html,
body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

/* paper tooth over everything, very faint */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

img,
svg { display: block; max-width: 100%; }

p { margin: 0; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.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;
}

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-variation-settings: "INFM" 100, "BNCE" 25;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* drawn strokes keep their weight at any size */
.fig path,
.fig ellipse,
.fig line { vector-effect: non-scaling-stroke; }

/* ---------- line boil: three hand-drawn takes swapped in turn ---------- */
.boil > .v { opacity: 0; animation: boil var(--dur-boil) step-end infinite; }
.boil > .v:nth-child(2) { animation-delay: calc(var(--dur-boil) / -3); }
.boil > .v:nth-child(3) { animation-delay: calc(var(--dur-boil) / -1.5); }

@keyframes boil {
  0% { opacity: 1; }
  33.34% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- header ---------- */
.top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-md);
  padding-inline: var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark img { width: 40px; height: 40px; border-radius: 50%; }

.top__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.top__links a { white-space: nowrap; }

.top__links [aria-disabled="true"] {
  color: var(--color-ink-soft);
  text-decoration-style: dashed;
  cursor: not-allowed;
}

.top__rule {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 10px;
  width: calc(100% - 2 * var(--gutter));
}

/* ---------- buttons, drawn ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0.35em 1.15em 0.45em;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
}

.btn__shape path { fill: var(--color-paper-note); stroke: var(--color-ink); stroke-width: 2.5px; vector-effect: non-scaling-stroke; transition: fill var(--dur-fast) var(--ease-out); }

.btn--dig .btn__shape path { fill: var(--color-accent); }

.btn:hover,
.btn.is-hover { transform: translate(-1px, -2px); }

.btn:hover .btn__shape path { fill: var(--color-accent-deep); }

.btn:not(.btn--dig):hover .btn__shape path { fill: var(--color-accent); }

.btn:active,
.btn.is-active { transform: translate(1px, 1px); }

.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.btn[disabled],
.btn[aria-disabled="true"] { cursor: not-allowed; color: var(--color-ink-soft); transform: none; }

.btn[disabled] .btn__shape path,
.btn[aria-disabled="true"] .btn__shape path { fill: transparent; stroke-dasharray: 6 5; }

.btn[data-state="success"] .btn__shape path { fill: var(--color-accent); }

.btn[data-state="error"] { color: var(--color-ink); }

.btn[data-state="error"] .btn__shape path { stroke-dasharray: 3 3; }

/* ---------- street (hero) ---------- */
.street { position: relative; padding-top: var(--space-xl); }

.street__head {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
  max-width: 62rem;
}

.street__head h1 {
  text-wrap: balance;
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.hl { position: relative; white-space: nowrap; }

.hl > svg {
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  top: 0.22em;
  bottom: -0.02em;
  width: calc(100% + 0.24em);
  height: 0.9em;
  z-index: -1;
}

.hl > svg path { fill: var(--color-accent); }

.street__head h1 .hl { isolation: isolate; }

.street__sub {
  margin-top: var(--space-sm);
  font-size: var(--text-xl);
  line-height: 1.2;
  max-width: 40ch;
}

.street__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.street__ca {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.street__ca code {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.scene {
  position: relative;
  height: var(--scene-h, 520px);
  margin-top: calc(var(--space-2xl) * -1);
}

.scene > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scene .price { font-family: var(--font-display); font-weight: 800; }

.scene .tag { transform-box: fill-box; transform-origin: 50% 0; }

.scene .tag.is-new { animation: slap 360ms var(--ease-out); }

@keyframes slap {
  from { transform: rotate(-14deg) scale(1.35); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

.scene .stall-name { font-family: var(--font-display); font-weight: 700; }

/* speech bubbles */
.bubble {
  position: absolute;
  z-index: 3;
  max-width: 14rem;
  padding: 0.6em 1.1em 0.75em;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  color: var(--color-ink);
}

.bubble > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}

.bubble > svg path { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }

.bubble { isolation: isolate; }

.bubble--dark > svg path { fill: var(--color-cave); stroke: var(--color-cave-ink); }

.bubble--dark { color: var(--color-cave-ink); }

/* ---------- the dig ---------- */
.dig { position: relative; isolation: isolate; }

.shaft-col {
  position: absolute;
  top: 0;
  right: var(--gutter);
  width: var(--shaft-w);
  z-index: 1;
  pointer-events: none;
}

.shaft {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.miner-wrap {
  position: sticky;
  top: 38vh;
  height: calc(var(--shaft-w) * 1.9);
}

.miner { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.miner .tool { animation: jab 620ms var(--ease-in-out) infinite alternate; transform-box: view-box; }

@keyframes jab { from { transform: translateY(-3%); } to { transform: translateY(3%); } }

.miner .clod { animation: toss 1240ms var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }

.miner .clod:nth-of-type(2) { animation-delay: -310ms; }
.miner .clod:nth-of-type(3) { animation-delay: -620ms; }
.miner .clod:nth-of-type(4) { animation-delay: -930ms; }

@keyframes toss {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), -70px); opacity: 0; }
}

.depth {
  position: absolute;
  top: -2.2em;
  right: 0;
  padding: 0.1em 0.5em 0.2em;
  background: var(--color-paper-note);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: rotate(-3deg);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-note);
}

.stratum {
  position: relative;
  padding-block: var(--space-4xl) var(--space-3xl);
  padding-inline: var(--gutter) calc(var(--gutter) + var(--shaft-w) + var(--shaft-gap));
}

.stratum__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  height: calc(100% + 44px);
  width: 100%;
  z-index: 0;
}

.stratum > :not(.stratum__bg) { position: relative; z-index: 2; }

.stratum__name {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0.05em 0.5em 0.15em;
  background: var(--color-paper-note);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-note);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.stratum h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.05;
  max-width: 22ch;
}

.lead {
  margin-top: var(--space-md);
  max-width: 44ch;
  font-size: var(--text-md);
}

.lead + .lead { margin-top: var(--space-sm); }

/* topsoil: field notes */
.notes {
  display: grid;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
}

.note-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl) var(--space-2xl);
  align-items: center;
}

.note-row--flip > :first-child { order: 2; }

.note-row--wide { grid-template-columns: minmax(0, 1fr); }

.num {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "INFM" 100, "BNCE" 25;
  font-weight: 800;
  font-size: var(--text-number);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.num small { font-size: 0.42em; font-weight: 700; }

.note-text p { max-width: 34ch; }

.note-text p + p { margin-top: var(--space-xs); }

.src {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

.fig { width: 100%; height: auto; overflow: visible; }

.fig--pie { max-width: 320px; justify-self: center; }

.fig--heap-narrow { max-width: 360px; }

.fig--podium { max-width: 440px; }

.fig text { font-family: var(--font-display); font-weight: 700; fill: var(--color-ink); }

.punch {
  margin-top: var(--space-3xl);
  max-width: 24ch;
  font-family: var(--font-display);
  font-variation-settings: "INFM" 100, "BNCE" 25;
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1.15;
}

/* clay: fossil bands */
.fossils {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.fossil-row {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.fossil-row dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  line-height: 1.1;
}

.fossil-row dt span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.fossil-row dd { margin: 0; min-width: 0; }

.fossil-row svg { width: 100%; height: auto; overflow: visible; }

/* rock: the pinned note */
.pinned {
  position: relative;
  max-width: 36rem;
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  transform: rotate(-1.2deg);
  isolation: isolate;
}

.pinned > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
}

.pinned > svg .sheet { fill: var(--color-paper-note); stroke: var(--color-ink); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }

.pinned > svg .nail { fill: var(--color-ink); }

.pinned p { font-size: var(--text-lg); line-height: 1.3; }

.pinned p + p { margin-top: var(--space-md); }

.pinned .sig {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  text-align: right;
}

.nots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
}

.nots li { text-decoration: line-through; text-decoration-thickness: 3px; }

/* bedrock: the strip */
.strip {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-md);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  isolation: isolate;
}

.panel > svg.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
}

.panel > svg.frame path { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 3px; vector-effect: non-scaling-stroke; }

.panel__art { width: 100%; height: auto; aspect-ratio: 3 / 2; overflow: visible; }

.panel__cap { font-size: var(--text-md); line-height: 1.2; }

.panel__cap b { font-family: var(--font-display); font-weight: 800; }

.panel__no {
  position: absolute;
  top: -0.7em;
  left: 0.6em;
  padding: 0 0.35em;
  background: var(--color-accent);
  border: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  line-height: 1.2;
}

/* cave */
.stratum.cave {
  color: var(--color-cave-ink);
  padding-top: var(--space-md);
  padding-bottom: var(--space-2xl);
}

.cave .street__ca { color: var(--color-cave-soft); }

.cave .street__ca code { color: var(--color-cave-ink); }

.cave :focus-visible { outline-color: var(--color-focus-dark); }

.cave .stratum__name { background: var(--color-cave); color: var(--color-cave-ink); border-color: var(--color-cave-ink); }

.cave-scene {
  position: relative;
  height: clamp(360px, 34vw, 420px);
  margin-right: calc(-1 * (var(--shaft-w) + var(--shaft-gap)));
}

.cave-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.cave__title {
  margin-top: var(--space-xl);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1;
}

.cave__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  margin-top: var(--space-xl);
}

.cave .btn { color: var(--color-ink); }

.cave .btn:not(.btn--dig) .btn__shape path { fill: var(--color-paper-note); }

.cave .btn[disabled],
.cave .btn[aria-disabled="true"] { color: var(--color-cave-soft); }

.cave .btn[disabled] .btn__shape path,
.cave .btn[aria-disabled="true"] .btn__shape path { fill: transparent; stroke: var(--color-cave-soft); }

.fine {
  margin-top: var(--space-3xl);
  max-width: 60ch;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-cave-soft);
}

.fine p + p { margin-top: var(--space-sm); }

.fine a { color: var(--color-cave-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
}

@media (max-width: 900px) {
  .depth { display: none; }
}

@media (max-width: 860px) {
  .note-row { grid-template-columns: minmax(0, 1fr); }
  .note-row--flip > :first-child { order: 0; }
  .fossil-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

@media (max-width: 640px) {
  :root { --shaft-w: 64px; --shaft-gap: var(--space-sm); }
  .stratum { padding-block: var(--space-3xl) var(--space-2xl); }
  .strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .top__links { gap: var(--space-xs) var(--space-sm); }
  .top__links a:not(.btn) { display: none; }
  .top { flex-wrap: nowrap; }
  .depth { display: none; }
  .btn { font-size: var(--text-sm); padding-inline: 0.9em; }
  .bubble { max-width: 11rem; font-size: var(--text-sm); }
  .street__sub { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .boil > .v { animation: none; opacity: 0; }
  .boil > .v:first-child { opacity: 1; }
  .miner .tool,
  .miner .clod,
  .scene .tag.is-new { animation: none; }
  .miner .clod { opacity: 0; }
  .btn { transition: none; }
}

/* ---------- drawing classes (shared by every generated SVG) ---------- */
.ink { fill: none; stroke: var(--color-ink); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.ink.thin { stroke-width: 2px; }
.ink.hair { stroke-width: 1.3px; }
.ink.bold { stroke-width: 4.5px; }
.ink.cink { stroke: var(--color-cave-ink); }
.ink.soft { opacity: 0.45; }
.f-ink { fill: var(--color-ink); }
.f-cave-ink { fill: var(--color-cave-ink); }
.f-paper { fill: var(--color-paper); }
.f-note { fill: var(--color-paper-note); }
.f-accent { fill: var(--color-accent); }
.f-glow { fill: var(--color-accent-glow); }
.f-tunnel { fill: var(--color-tunnel); }
.f-topsoil { fill: var(--color-topsoil); }
.f-clay { fill: var(--color-clay); }
.f-rock { fill: var(--color-rock); }
.f-bedrock { fill: var(--color-bedrock); }
.f-cave { fill: var(--color-cave); }
.f-mole { fill: var(--color-bedrock); }
.t-ink { fill: var(--color-ink); }
.t-cave { fill: var(--color-cave-ink); }
.scene text,
.cave-scene text { font-family: var(--font-display); font-weight: 700; }