/* The shell every page wears: the palette tokens, the head cluster, the band and the desk notice. */
:root {
  --ink-dark: #4a3826; /* dark walnut ink: borders, buttons, prose, emphasis */
  --ink-brown: #6b5a40; /* flourish brown: taglines, captions, asides */
  --ink-faded: #857257; /* faded ink: nav, footer, small labels */
  --line-tan: #b9a77f; /* pale tan hairline: rules and frame borders */
  --parchment: #efe6cf; /* the sheet ground */
  --parchment-panel: #f4ecd8; /* raised panels, cards, and pinned slips */
  --parchment-bright: #fff7e4; /* the lit cream: hovers and the reveal */
  --parchment-deep: #e6d9b8; /* the pressed tan: code chips */
  --line-faint: #cdbd97; /* the softer hairline, a shade lighter than --line-tan */
  /* The ONE depth a chart rests at; anything laid OVER a chart inside the mount opts out (src/styles/shared/living-chart.css). */
  --sheet-shadow: 0 12px 34px rgb(from var(--chart-ink) r g b / 0.4);
  --stage-shadow: 0 18px 60px rgb(from var(--chart-ink) r g b / 0.55);
  --ink-annals: #3f3122; /* the chronicler's iron-gall: journal entries */
  --ink-surveyor: #7a5f38; /* the surveyor's walnut italic: journal prologue */
  --ink-surveyor-faded: #99855f; /* the surveyor's unbolded gutter days */
  --control-cream: #f8f1e0; /* the control idiom's cream fill */
  --ink-press: #5d4831; /* the dark primary pressed (hover) */
  --control-gold: #f0e3bd; /* the featured action-link's parchment gold */
  --control-gold-lit: #f7edcd; /* the gold, lit on hover */
  --ink-tale: #54452f; /* the tale/note ink: place-card tales, atlas notes */
  --iron-red: #7a1f12; /* the site's ink red (hunt star, statuses) */
  --chart-paper: #f2e8cf; /* the antique chart's paper: primary lettering, cartouche ground */
  --chart-ink: #3d2f1f; /* the chart's lettering ink: every site shadow */
  --the-deep:
    radial-gradient(
      120% 90% at 50% 30%,
      rgb(from var(--ink-dark) r g b / 0) 40%,
      rgb(from var(--chart-ink) r g b / 0.55) 100%
    ),
    radial-gradient(
      80% 70% at 30% 20%,
      color-mix(in srgb, var(--ink-dark) 90%, var(--parchment) 10%) 0%,
      var(--ink-dark) 55%,
      var(--chart-ink) 100%
    );
  /* The reserved walnut band the head cluster stands on (Issue #461 ruling 5): the sheet scrolls beneath the band, never beneath bare lettering. */
  --band-h: 7.6rem;
  --chrome-x: 1.6rem;
  --chrome-y: 1.4rem;
  --trail-gap: 0.6rem;
  --trail-line: 1rem;
}
/* A palette inversion, not a dark mode: form controls stay light. */
:root {
  color-scheme: light;
}
body {
  margin: 0;
  background: var(--chart-ink);
  color: var(--ink-dark);
  font-family: var(--font-body, "Iowan Old Style", "Palatino", Georgia, serif);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--the-deep);
  background-color: var(--chart-ink);
}
main {
  margin-inline: auto;
}
.wordmark,
.room-name,
.rooms,
footer {
  font-family: var(--font-display, "Iowan Old Style", "Palatino", Georgia, serif);
}
header.chrome {
  position: fixed;
  left: var(--chrome-x);
  top: var(--chrome-y);
  z-index: 10;
  line-height: normal;
  text-align: left;
  pointer-events: none;
}
header.chrome :is(a, summary) {
  pointer-events: auto;
}
.wordmark {
  font-size: 2.1rem;
  letter-spacing: 0.12em;
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
}
.wordmark a {
  color: var(--parchment-bright);
  text-decoration: none;
}
.tagline {
  font-family: var(--font-flourish, "Iowan Old Style", "Palatino", Georgia, serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--parchment);
  margin: 0;
}
.rooms {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-faded);
  margin: 0.55rem 0 0;
}
.rooms .sep {
  margin: 0 0.35em;
  opacity: 0.7;
}
.rooms a {
  color: var(--parchment);
  text-decoration: none;
}
.rooms a:hover,
.rooms a:focus-visible {
  color: var(--parchment-bright);
}
header.chrome :is(a, summary):focus-visible,
footer a:focus-visible {
  outline-color: var(--parchment-bright);
}
.rooms [aria-current="page"] {
  display: inline-block;
  vertical-align: top;
  color: var(--parchment-bright);
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
}
.trail {
  font-family: var(--font-display, "Iowan Old Style", "Palatino", Georgia, serif);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  margin: var(--trail-gap) 0 0;
}
.trail a {
  color: var(--parchment);
  text-decoration: none;
}
.trail a:hover,
.trail a:focus-visible {
  color: var(--parchment-bright);
}
.trail [aria-current="page"],
.trail .here {
  color: var(--parchment-bright);
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}
.trail .way {
  margin: 0 0.45em;
  color: var(--parchment);
  font-size: 0.78rem;
  vertical-align: -0.04em;
  line-height: var(--trail-line);
}
.trail > :not(.way) {
  white-space: nowrap;
}
.also {
  font-family: var(--font-flourish, "Iowan Old Style", "Palatino", Georgia, serif);
  font-style: italic;
  font-size: 0.62rem;
  color: var(--parchment);
  margin: 0.55rem 0 0;
}
.also a {
  color: var(--parchment);
  text-decoration-color: rgb(from var(--parchment) r g b / 0.55);
  text-underline-offset: 0.25em;
}
:root:has(.band):has(.trail) {
  --band-h: 10.6rem;
}
@media screen {
  body.room:has(.band):has(.trail) {
    --room-pad-top: calc(var(--band-h) + 0.2rem);
  }
}
.band {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--the-deep);
  background-color: var(--chart-ink);
  clip-path: inset(0 0 calc(100% - var(--band-h)) 0);
}
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--band-h);
  height: 14px;
  background: linear-gradient(rgb(from var(--chart-ink) r g b / 0.45), transparent);
}
.room-name {
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  margin: 0;
}
.room-tagline {
  font-family: var(--font-flourish, "Iowan Old Style", "Palatino", Georgia, serif);
  font-style: italic;
  color: var(--ink-brown);
  margin: 0;
}
/* The rooms stand clear of the band; a chart room has no band to clear. */
body.room {
  --room-pad-top: 8.4rem;
  padding: var(--room-pad-top) 2.2rem 1.6rem;
}
body.room.chart-room {
  --room-pad-top: 0px;
  padding: 0;
}
/* A px floor, not a viewport-unit one: under the harness's emulated resize Chrome still resolved `vw` against the old window at the resize event, so a floor written in `vw` laid the head cluster out against a 640 page (measured 2026-10-06). */
@media screen {
  html:has(body.room) {
    overflow-x: auto;
  }
  body {
    min-width: 1024px;
    box-sizing: border-box;
  }
  .desk-layer.on {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 100vh;
    margin: calc(-1 * var(--room-pad-top)) -2.2rem calc(var(--room-pad-top) - 100vh);
    contain: layout;
    pointer-events: none;
  }
  body.room.chart-room .desk-layer.on {
    margin-inline: 0;
  }
}
.desk-layer:not(.on) {
  display: contents;
}
/* The interim desk panel: a room not yet dressed for the deep wears it so nothing ships ink-on-walnut; desk="open" stops the class rendering, so the rule retires itself room by room. */
main.desk-panel {
  background: var(--parchment);
  border: 1px solid var(--line-tan);
  box-shadow: var(--sheet-shadow);
  padding: 1.8rem clamp(1.25rem, 3vw, 2.75rem) 2.75rem;
}
/* The landing ceremony (Issue #461 ruling 6): the sheet settles onto the desk and the chrome inks in just after, on every arrival; motion.css's reduced-motion blanket collapses both to an instant swap. */
@keyframes sheet-land {
  from {
    opacity: 0;
    transform: translateY(10px) scale(1.004);
  }
}
@keyframes ink-in {
  from {
    opacity: 0;
  }
}
/* The settle rides the desk panel, never main: a transform on main would re-anchor the fixed furniture it hosts (the folio, the slip) for the length of the animation. */
body.room main.desk-panel {
  animation: sheet-land 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
body.room header.chrome,
body.room footer {
  animation: ink-in 0.5s 0.18s ease-out both;
}
footer {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--line-tan);
  padding: 1.4rem 0 1.8rem;
  margin: 0;
  line-height: normal;
}
footer a {
  color: inherit;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.desk-notice {
  display: none;
  --fit: 1;
  --u: calc(1rem * var(--fit));
}
.desk-notice.on {
  display: block;
  position: fixed;
  z-index: 48;
  left: 50%;
  bottom: calc(var(--u) * 1.6 + var(--desk-lift, 0px));
  translate: -50% 0;
  rotate: -1.2deg;
  box-sizing: border-box;
  width: calc(var(--u) * 20);
  max-width: calc(100% - var(--u) * 2.4);
  padding: calc(var(--u) * 1.15) calc(var(--u) * 1.3) calc(var(--u) * 1.2);
  background: var(--parchment);
  color: var(--ink-dark);
  text-align: center;
  line-height: 1.42;
  font-family: var(--font-body, "Iowan Old Style", "Palatino", Georgia, serif);
  border: calc(1.5px * var(--fit)) solid var(--ink-dark);
  box-shadow:
    0 0 0 calc(3px * var(--fit)) var(--parchment),
    0 0 0 calc(5px * var(--fit)) var(--ink-dark),
    0 0 calc(10px * var(--fit)) calc(12px * var(--fit)) rgb(from var(--chart-ink) r g b / 0.6),
    0 calc(12px * var(--fit)) calc(34px * var(--fit)) calc(8px * var(--fit)) rgb(from var(--chart-ink) r g b / 0.65);
}
.desk-notice p {
  margin: 0;
}
.desk-notice .dn-head {
  font-family: var(--font-display, "Iowan Old Style", "Palatino", Georgia, serif);
  font-weight: 400;
  letter-spacing: 0.12em;
  font-size: calc(var(--u) * 1.2);
  line-height: 1.2;
  color: var(--ink-brown);
}
.desk-notice .dn-body {
  font-size: var(--u);
  margin-top: calc(var(--u) * 0.5);
}
.desk-notice button.dn-go {
  display: block;
  margin: calc(var(--u) * 0.85) auto 0;
  min-height: calc(var(--u) * 2.75);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.2);
  font-size: var(--u);
  letter-spacing: 0.06em;
  border-width: calc(1.5px * var(--fit));
  border-radius: calc(4px * var(--fit));
}
.desk-notice button.dn-go:focus-visible {
  outline-width: calc(2px * var(--fit));
  outline-offset: calc(2px * var(--fit));
}
@media print {
  .band,
  header.chrome,
  .desk-notice.on {
    display: none;
  }
  body {
    background: none;
  }
  body::before {
    display: none;
  }
  body.room {
    padding: 0;
  }
  main.desk-panel {
    background: none;
    border: none;
    box-shadow: none;
  }
}