/* Fieldnote Financial: an almanac for uneven money.
   Tokens first, then base, then components, then pages, then motion and print. */

:root {
  color-scheme: light;

  /* Palette (seeds from the brief, plus derived tints) */
  --oat: #EFE8DA;
  --oat-hi: #F7F2E8;
  --field: #E3DCC8;
  --field-deep: #D3CAB0;
  --slate: #2F3E4E;
  --slate-deep: #232F3B;
  --ink: #1E2730;
  --copper: #B5651D;          /* large type, bars and decoration only */
  --copper-text: #8A4A12;     /* text-safe copper */
  --copper-light: #E8A468;    /* copper for dark backgrounds */
  --sage: #DDE5D3;
  --sage-deep: #BFCDB0;
  --muted: #46525F;
  --faint: #A9B6C2;           /* text on slate only */
  --alert-bg: #F8E9DA;
  --rule: rgba(47, 62, 78, 0.34);
  --rule-soft: rgba(47, 62, 78, 0.16);

  /* Type */
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem);

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;

  --radius: 8px;
  --gutter: clamp(16px, 4vw, 40px);
  --cur-pad: 1.9rem;

  --paper-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(30, 39, 48, 0.18),
    0 10px 24px -10px rgba(30, 39, 48, 0.3), 0 28px 50px -30px rgba(30, 39, 48, 0.35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .22 0 0 0 0 .27 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--oat);
  background-image: var(--grain), radial-gradient(120% 60% at 50% -10%, var(--oat-hi), transparent 70%);
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 var(--s4);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.25rem; }
li { margin-bottom: var(--s2); }

a {
  color: var(--copper-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--ink); text-decoration-thickness: 3px; }

strong { font-weight: 700; }
em { font-style: italic; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--oat);
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--s4);
  top: -6rem;
  z-index: 100;
  padding: 0.8rem 1.1rem;
  background: var(--ink);
  color: var(--oat);
  font-weight: 700;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}
.skip:focus { top: 0; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Season bar (sticky) ---------- */
.season-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--slate);
  color: var(--oat);
  border-bottom: 3px solid var(--copper);
  box-shadow: 0 6px 18px -8px rgba(30, 39, 48, 0.5);
}
.season-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  padding-block: 4px;
}
.season-dial { flex: none; width: 34px; height: 34px; }
.season-dial .tick { fill: var(--faint); }
.season-dial .tick.is-now { fill: var(--copper-light); }
.season-text { flex: 1 1 auto; margin: 0; min-width: 0; line-height: 1.25; }
.season-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.season-name { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; }
.season-hemi {
  flex: none;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  font: 700 0.84rem/1.2 var(--sans);
  color: var(--oat);
  background: transparent;
  border: 2px solid var(--faint);
  border-radius: 999px;
  cursor: pointer;
}
.season-hemi:hover { background: var(--slate-deep); border-color: var(--oat); }
.season-bar :focus-visible,
.footer :focus-visible,
.panel--slate :focus-visible,
.band :focus-visible {
  outline-color: var(--oat);
  box-shadow: none;
}
@media (max-width: 479px) {
  .season-label, .season-ord { display: none; }
}

/* ---------- Masthead & nav ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding-block: var(--s3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand__name em { font-weight: 400; color: var(--copper-text); }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--copper); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--copper);
  background: var(--field);
  border-radius: 6px 6px 0 0;
}
@media (max-width: 600px) {
  .nav { width: 100%; }
  .nav ul { gap: var(--s1); }
  .nav a { padding-inline: 0.65rem; font-size: 0.93rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0.65rem 1.3rem;
  font: 700 1rem/1.2 var(--sans);
  color: var(--oat);
  background: var(--slate);
  border: 2px solid var(--slate);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink), 0 8px 14px -8px rgba(30, 39, 48, 0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--oat); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--slate); box-shadow: none; }
.btn--ghost:hover { background: var(--slate); color: var(--oat); }
.btn--copper { background: var(--copper-text); border-color: var(--copper-text); color: var(--oat-hi); box-shadow: 0 2px 0 #5F3209, 0 8px 14px -8px rgba(95, 50, 9, 0.7); }
.btn--copper:hover { background: #6E3A0C; border-color: #6E3A0C; color: var(--oat-hi); }
.btn--small { min-height: 44px; padding: 0.4rem 1rem; font-size: 0.93rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block: var(--s5); }
.panel--slate .btn--ghost, .band .btn--ghost { color: var(--oat); border-color: var(--oat); }
.panel--slate .btn--ghost:hover, .band .btn--ghost:hover { background: var(--oat); color: var(--ink); }
.band .btn { background: var(--oat); color: var(--ink); border-color: var(--oat); box-shadow: 0 2px 0 var(--ink); }
.band .btn:hover { background: var(--oat-hi); color: var(--ink); }
.band .btn--ghost { background: transparent; color: var(--oat); border-color: var(--oat); box-shadow: none; }
.band .btn--ghost:hover { background: var(--oat); color: var(--ink); }

/* ---------- Type helpers ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-text);
}
.kicker::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--copper);
}
.lead {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--slate);
  max-width: 38em;
}
.small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

.orn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-block: var(--s7);
  color: var(--slate);
}
.orn::before, .orn::after { content: ""; flex: 1; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); height: 4px; }
.orn span {
  width: 14px; height: 14px; flex: none;
  background: var(--copper);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--oat), 0 0 0 4px var(--copper);
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  padding-block: clamp(2rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(circle at 76% 46%, transparent 0 46px, rgba(47, 62, 78, 0.075) 46px 47px);
  mask-image: linear-gradient(90deg, transparent 5%, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 60%);
}
.hero__grid {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s7); }
}
.hero h1 { margin-bottom: var(--s5); }
.hero h1 .accent { color: var(--copper-text); font-style: italic; }
.hero__aside { display: grid; gap: var(--s4); }
.hero-note {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------- Wheel plate & SVG ---------- */
.plate {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  aspect-ratio: 1;
  padding: 2.2%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--oat-hi) 0 58%, var(--field) 100%);
  box-shadow: 0 0 0 2px var(--slate), 0 0 0 9px var(--oat), 0 0 0 10px var(--slate),
    0 34px 60px -26px rgba(30, 39, 48, 0.55), inset 0 0 50px rgba(47, 62, 78, 0.14);
}
.plate--sm { max-width: 31rem; }

.wheel { display: block; width: 100%; height: 100%; overflow: visible; touch-action: manipulation; }
.wheel text { font-family: var(--sans); }
.wheel .grid-ring { fill: none; stroke: var(--rule-soft); stroke-width: 1.2; }
.wheel .spoke { stroke: var(--rule-soft); stroke-width: 1; }
.wheel .hub { fill: var(--oat-hi); stroke: var(--slate); stroke-width: 2.5; }
.wheel .w-base { fill: var(--slate); }
.wheel .w-surplus { fill: var(--copper); stroke: var(--oat-hi); stroke-width: 1; }
.wheel .w-short { fill: url(#hatch); stroke: var(--copper-text); stroke-width: 2; stroke-dasharray: 6 4; }
.wheel .w-empty { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 6; }
.wheel .w-hit { fill: transparent; cursor: pointer; }
.wheel .w-halo { fill: none; stroke: var(--oat-hi); stroke-width: 10; opacity: 0; stroke-linejoin: round; }
.wheel .w-ring { fill: none; stroke: var(--ink); stroke-width: 3.5; opacity: 0; stroke-linejoin: round; }
.wheel .wedge { outline: none; }
.wheel .wedge:focus-visible .w-halo,
.wheel .wedge:focus-visible .w-ring,
.wheel .wedge.is-selected .w-ring,
.wheel .wedge.is-selected .w-halo { opacity: 1; }
.wheel .wedge:hover .w-ring { opacity: 1; }
.wheel .lab-bg { fill: transparent; }
.wheel .lab { font-size: 23px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.wheel .wedge.is-selected .lab-bg { fill: var(--ink); }
.wheel .wedge.is-selected .lab { fill: var(--oat-hi); }
.wheel .steady-halo { fill: none; stroke: var(--oat-hi); stroke-width: 6; }
.wheel .steady-line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-dasharray: 3 7; stroke-linecap: round; }
.wheel .now-mark { fill: var(--copper); stroke: var(--ink); stroke-width: 2; }
.wheel .c-kicker { font-size: 17px; font-weight: 700; letter-spacing: 0.14em; fill: var(--copper-text); text-anchor: middle; text-transform: uppercase; }
.wheel .c-value { font-family: var(--serif); font-size: 38px; font-weight: 700; fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.wheel .c-sub { font-size: 17px; fill: var(--muted); text-anchor: middle; }
.wheel .hatch-bg { fill: var(--oat-hi); }
.wheel .hatch-line { stroke: var(--copper); stroke-width: 3.2; }
.wheel .pending-text { font-family: var(--serif); font-size: 26px; font-style: italic; fill: var(--muted); text-anchor: middle; }
.wheel .bars { transform-origin: 330px 330px; transform-box: view-box; }
.wheel.is-sweeping .bars {
  animation: sweep 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  animation-delay: calc(var(--i) * 30ms);
}
@keyframes sweep {
  from { transform: rotate(-22deg) scale(0.6); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s5);
  list-style: none;
  padding: 0;
  margin: var(--s5) 0 0;
  font-size: var(--step--1);
}
.legend li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.legend svg { width: 28px; height: 20px; flex: none; }
.legend .k-base { fill: var(--slate); }
.legend .k-surplus { fill: var(--copper); }
.legend .k-short { fill: url(#legend-hatch); stroke: var(--copper-text); stroke-width: 1.6; stroke-dasharray: 4 3; }
.legend .k-steady { stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 2 5; stroke-linecap: round; fill: none; }
.legend .hatch-bg { fill: var(--oat-hi); }
.legend .hatch-line { stroke: var(--copper); stroke-width: 3; }

/* ---------- Month card (home) ---------- */
.monthcard {
  position: relative;
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--oat-hi);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--copper);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
.monthcard h2, .monthcard h3 { font-size: var(--step-2); margin-bottom: var(--s2); }
.monthcard .figure-line { font-family: var(--serif); font-size: var(--step-1); margin-bottom: var(--s3); color: var(--slate); }
.monthcard p:last-child { margin-bottom: 0; }

/* ---------- Sections & almanac entries ---------- */
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--field { background: var(--field); border-block: 1px solid var(--rule); }
.section--sage { background: var(--sage); border-block: 1px solid var(--rule); }
.section__head { max-width: 46rem; margin-bottom: var(--s6); }

.entry {
  position: relative;
  display: grid;
  gap: var(--s4) var(--s6);
  padding-block: var(--s6);
  border-top: 2px solid var(--slate);
}
.entry::before {
  content: "";
  position: absolute;
  top: 4px; left: 0; right: 0;
  border-top: 1px solid var(--slate);
}
.entry__no {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1;
  color: var(--copper);
  margin: 0;
}
.entry__no small {
  display: block;
  margin-top: var(--s2);
  font: 700 0.76rem/1.2 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.entry__body > :last-child { margin-bottom: 0; }
.entry__body h2, .entry__body h3 { margin-bottom: var(--s3); }
.entry__body p { max-width: 40em; }

.margin {
  align-self: start;
  padding: 0 0 0 var(--s4);
  border-left: 3px solid var(--copper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--muted);
}
.margin::before {
  content: "In the margin";
  display: block;
  margin-bottom: var(--s2);
  font: 700 0.76rem/1.2 var(--sans);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-text);
}
.margin p { margin-bottom: var(--s2); }
.margin p:last-child { margin-bottom: 0; }
.margin a { font-style: normal; font-weight: 700; }

@media (min-width: 62rem) {
  .entry { grid-template-columns: 6rem minmax(0, 1fr) 15.5rem; }
  .entry--two { grid-template-columns: minmax(0, 1fr) 15.5rem; }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .entry { grid-template-columns: 5rem minmax(0, 1fr); }
  .entry .margin { grid-column: 2; }
  .entry--two { grid-template-columns: minmax(0, 1fr); }
  .entry--two .margin { grid-column: 1; }
}

.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 1.7rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.9rem; height: 0.9rem;
  background: var(--copper);
  transform: rotate(45deg) scale(0.78);
}

/* ---------- Cards (households, steps) ---------- */
.cards {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--s5);
  background: var(--oat-hi);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
.card::before, .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
}
.card::before { transform: translate(5px, 5px) rotate(0.6deg); }
.card::after { transform: translate(10px, 9px) rotate(1.1deg); opacity: 0.7; }
.cards { isolation: isolate; }
.card h3 { font-size: var(--step-1); margin-bottom: var(--s2); }
.card p:last-child { margin-bottom: 0; }
.card .sketch { width: 100%; height: 64px; margin-bottom: var(--s3); }
.sketch .s-fill { fill: var(--slate); }
.sketch .s-sur { fill: var(--copper); }
.sketch .s-base { stroke: var(--rule); stroke-width: 1.5; }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.steps li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: var(--s5) var(--s4) var(--s4);
  background: var(--sage);
  border: 1px solid var(--sage-deep);
  border-radius: var(--radius);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: -1.1rem; left: var(--s4);
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  font: 700 1.15rem/1 var(--serif);
  color: var(--oat);
  background: var(--slate);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--sage);
}
.steps li strong { display: block; margin-bottom: var(--s1); font-family: var(--serif); font-size: 1.1rem; }

.notice {
  padding: var(--s4) var(--s5);
  background: var(--oat-hi);
  border: 2px solid var(--slate);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--field-deep);
  font-size: var(--step--1);
}
.notice strong { font-family: var(--serif); font-size: 1.05rem; }
.notice p:last-child { margin-bottom: 0; }

.band {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--slate);
  color: var(--oat);
  overflow: hidden;
  isolation: isolate;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(circle at 92% 120%, transparent 0 34px, rgba(239, 232, 218, 0.1) 34px 35px);
}
.band h2 { color: var(--oat); }
.band p { max-width: 38em; }
.band a:not(.btn) { color: var(--copper-light); }
.band a:not(.btn):hover { color: var(--oat); }

/* ---------- Tool pages ---------- */
.tool-hero { padding-block: clamp(1.75rem, 4vw, 3.5rem) var(--s5); }
.tool-hero h1 { font-size: var(--step-3); }
.tool-hero .lead { margin-bottom: 0; }

.workbench {
  display: grid;
  gap: var(--s6);
  align-items: start;
  padding-bottom: var(--s7);
}
@media (min-width: 64rem) {
  .workbench--wheel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .workbench--wheel .sticky { position: sticky; top: 4.5rem; }
}

.panel {
  position: relative;
  padding: var(--s5);
  background: var(--oat-hi);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
.panel--slate {
  background: var(--slate);
  background-image: radial-gradient(130% 80% at 100% 0, rgba(239, 232, 218, 0.1), transparent 60%);
  color: var(--oat);
  border-color: var(--ink);
}
.panel--slate h2, .panel--slate h3 { color: var(--oat); }
.panel--slate a { color: var(--copper-light); }
.panel--slate .muted, .panel--slate .hint { color: var(--faint); }
.panel h2, .panel h3 { font-size: var(--step-2); }
.panel > :last-child { margin-bottom: 0; }

.preset-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.panel .label { margin: var(--s4) 0 var(--s2); }
.preset-row .btn { min-height: 44px; padding-inline: 1rem; font-size: 0.9rem; }

.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field > label, .field > .label, .label {
  font-weight: 700;
  font-size: 0.97rem;
}
.hint { font-size: var(--step--1); color: var(--muted); margin: 0; }
.input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #FCFAF4;
  border: 2px solid var(--slate);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(30, 39, 48, 0.08);
}
textarea.input { min-height: 8.5rem; line-height: 1.5; resize: vertical; }
select.input { padding-right: 2rem; }
.input::placeholder { color: #5A6572; opacity: 1; }
.input:hover { border-color: var(--ink); }
.input[aria-invalid="true"] { background: var(--alert-bg); border-color: var(--copper-text); border-style: dashed; }
.money { position: relative; display: block; }
.money__cur {
  position: absolute;
  left: 0.8rem; top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}
.money .input { padding-left: var(--cur-pad); }
.field-error {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--copper-text);
}
.field-error:empty { display: none; }
.field-error::before { content: "\26A0\00a0"; }
.panel--slate .input { background: var(--oat-hi); border-color: var(--oat); }
.panel--slate .field-error { color: var(--copper-light); }
.panel--slate .input[aria-invalid="true"] { background: var(--alert-bg); }
.panel--slate .money__cur { color: var(--muted); }
.panel--slate .field > label, .panel--slate .label { color: var(--oat); }

.month-grid {
  display: grid;
  gap: var(--s3) var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  margin: 0 0 var(--s4);
  padding: 0;
  min-width: 0;
}
@media (min-width: 30rem) { .month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.month-grid .field { margin-bottom: 0; }
.month-grid legend { padding: 0; margin-bottom: var(--s3); font-weight: 700; }
.month-grid .field-error { grid-column: 1 / -1; }

.range-field { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
input[type="range"] { width: 100%; min-height: 44px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; accent-color: var(--slate); }
input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: var(--field-deep); box-shadow: inset 0 0 0 2px var(--slate); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -9px; border-radius: 50%; background: var(--slate); border: 3px solid var(--oat-hi); box-shadow: 0 0 0 2px var(--slate), 0 3px 6px rgba(30, 39, 48, 0.35); }
input[type="range"]::-moz-range-track { height: 12px; border-radius: 999px; background: var(--field-deep); box-shadow: inset 0 0 0 2px var(--slate); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--slate); border: 3px solid var(--oat-hi); box-shadow: 0 0 0 2px var(--slate); }

.summary-live { margin: var(--s3) 0 0; font-size: var(--step--1); font-weight: 700; color: var(--copper-text); min-height: 1.4em; }

/* Readout under wheel */
.readout {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--oat-hi);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--slate);
  border-radius: var(--radius);
  min-height: 5.5rem;
}
.readout strong { font-family: var(--serif); font-size: var(--step-1); }
.readout p { margin: 0; }

/* Result figures */
.figures {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  margin: var(--s5) 0;
}
.figure {
  padding: var(--s4) var(--s5);
  background: var(--oat-hi);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--slate);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
.figure--key { border-top-color: var(--copper); background: var(--sage); }
.figure dt { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.figure--key dt { color: var(--ink); }
.figure dd { margin: var(--s2) 0 0; }
.figure .big {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.figure .note { display: block; margin-top: var(--s2); font-size: var(--step--1); color: var(--muted); }
.figure--key .note { color: var(--ink); }

.empty {
  padding: var(--s5);
  text-align: center;
  background: var(--field);
  border: 2px dashed var(--muted);
  border-radius: var(--radius);
}
.empty p { margin-inline: auto; max-width: 30em; }
.empty p:last-child { margin-bottom: 0; }
.empty strong { font-family: var(--serif); font-size: var(--step-1); display: block; margin-bottom: var(--s2); }

.verdict {
  padding: var(--s4) var(--s5);
  border-left: 6px solid var(--copper);
  background: var(--oat-hi);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.45;
}
.verdict p:last-child { margin-bottom: 0; }

/* Tables */
.table-wrap { overflow-x: auto; margin-block: var(--s4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--oat-hi); }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table caption { text-align: left; padding: var(--s3) var(--s4); font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.table th, .table td { padding: 0.6rem var(--s3); text-align: left; border-top: 1px solid var(--rule-soft); vertical-align: top; }
.table thead th { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-top: 2px solid var(--slate); background: var(--field); }
.table td.n, .table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody th { font-weight: 700; }
.table tr.is-lean td, .table tr.is-lean th { background: #F3E6D3; }
.table tr.is-rich td, .table tr.is-rich th { background: #E9EEDF; }

/* ---------- Reserves page ---------- */
.gauge-grid {
  display: grid;
  gap: var(--s6);
  align-items: start;
  padding-bottom: var(--s7);
}
@media (min-width: 62rem) {
  .gauge-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gauge-grid .sticky { position: sticky; top: 4.5rem; }
}
.dial-card { display: grid; gap: var(--s4); }
.dial-wrap { width: 100%; max-width: 30rem; margin-inline: auto; }
.dial { display: block; width: 100%; height: auto; overflow: visible; }
.dial text { font-family: var(--sans); }
.dial .d-track { fill: var(--field); stroke: var(--rule); stroke-width: 1.2; }
.dial .d-lap1 { fill: var(--slate); }
.dial .d-lap2 { fill: url(#dial-hatch); stroke: var(--copper-text); stroke-width: 1.5; }
.dial .hatch-bg { fill: var(--oat-hi); }
.dial .hatch-line { stroke: var(--copper); stroke-width: 3.4; }
.dial .d-lab { font-size: 19px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.dial .d-start { fill: var(--ink); }
.dial .d-big { font-family: var(--serif); font-size: 56px; font-weight: 700; fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.dial .d-small { font-size: 19px; fill: var(--muted); text-anchor: middle; }
.dial .d-kicker { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; fill: var(--copper-text); text-anchor: middle; }
.dial .d-seg { transform-origin: 220px 220px; transform-box: view-box; }
.dial.is-sweeping .d-seg {
  animation: dialIn 0.5s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  animation-delay: calc(var(--i) * 20ms);
}
@keyframes dialIn { from { transform: rotate(-16deg) scale(0.8); opacity: 0.4; } to { transform: none; opacity: 1; } }

.runway-text { font-family: var(--serif); font-size: var(--step-1); line-height: 1.45; }
.runway-text strong { color: var(--ink); }

.two-col { display: grid; gap: var(--s5); }
@media (min-width: 46rem) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col h3 { font-size: var(--step-1); }

/* ---------- Checklist page ---------- */
.check-layout {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s7);
  align-items: start;
}
@media (min-width: 62rem) {
  .check-layout { grid-template-columns: 17rem minmax(0, 1fr); }
  .rail { position: sticky; top: 4.5rem; }
}
.rail {
  padding: var(--s5);
  background: var(--slate);
  color: var(--oat);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
.rail h2 { color: var(--oat); font-size: var(--step-1); }
.rail a { color: var(--oat); text-decoration: none; }
.rail a:hover { color: var(--copper-light); text-decoration: underline; }
.rail ol { list-style: none; padding: 0; margin: 0 0 var(--s4); counter-reset: r; }
.rail li { margin: 0; counter-increment: r; border-bottom: 1px solid rgba(239, 232, 218, 0.22); }
.rail li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
  padding-block: 0.3rem;
  font-size: 0.95rem;
}
.rail li a::before { content: counter(r, upper-roman) "."; color: var(--copper-light); font-family: var(--serif); font-weight: 700; min-width: 2rem; }
.rail li a span.t { flex: 1; }
.rail li a span.c { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--faint); }
.rail .meter { height: 10px; background: rgba(239, 232, 218, 0.22); border-radius: 999px; overflow: hidden; margin-bottom: var(--s2); }
.rail .meter span { display: block; height: 100%; width: 0; background: var(--copper-light); transition: width 0.4s ease; }
.rail .tally { margin: 0 0 var(--s4); font-weight: 700; }
.rail .btn { width: 100%; margin-bottom: var(--s2); }
.rail .btn--ghost { color: var(--oat); border-color: var(--oat); }
.rail .btn--ghost:hover { background: var(--oat); color: var(--ink); }
.rail .btn:not(.btn--ghost) { background: var(--oat); color: var(--ink); border-color: var(--oat); box-shadow: 0 2px 0 var(--ink); }
.rail .btn:not(.btn--ghost):hover { background: var(--oat-hi); }
.rail :focus-visible { outline-color: var(--oat); box-shadow: none; }
.rail .status { min-height: 1.4em; margin: var(--s2) 0 0; font-size: var(--step--1); color: var(--faint); }

.audience {
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--sage);
  border: 1px solid var(--sage-deep);
  border-radius: var(--radius);
}
.audience legend { padding: 0 var(--s2); font-weight: 700; font-family: var(--serif); font-size: 1.1rem; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--oat-hi);
  border: 2px solid var(--slate);
  border-radius: 999px;
}
.pill input:checked + span { background: var(--slate); color: var(--oat); }
.pill input:checked + span::before { content: "\2713\00a0"; }
.pill input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--sage); }

.group {
  position: relative;
  margin-bottom: var(--s6);
  padding: var(--s5);
  background: var(--oat-hi);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
.group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.group__no {
  font-family: var(--serif); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--copper);
}
.group h2 { font-size: var(--step-2); margin: 0; flex: 1 1 14rem; }
.group__count { font-size: 0.85rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.group__layout { display: grid; gap: var(--s4) var(--s6); }
@media (min-width: 52rem) { .group__layout { grid-template-columns: minmax(0, 1fr) 14rem; } }
.items { list-style: none; padding: 0; margin: 0; }
.item { margin: 0; border-top: 1px solid var(--rule-soft); }
.item[hidden] { display: none; }
.item label {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--s3);
  align-items: start;
  min-height: 48px;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
}
.item label:hover { background: rgba(227, 220, 200, 0.6); }
.item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.75rem; height: 1.75rem;
  margin: 0.05rem 0 0;
  background: #FCFAF4;
  border: 2px solid var(--slate);
  border-radius: 5px;
  cursor: pointer;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.item input[type="checkbox"]:checked {
  background-color: var(--slate);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23EFE8DA' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.item input[type="checkbox"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--oat-hi); }
.item .q { display: block; }
.item .q b { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--copper-text); }
.item .tag {
  display: inline-block;
  margin-left: var(--s2);
  padding: 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sage);
  border: 1px solid var(--sage-deep);
  border-radius: 999px;
  vertical-align: 0.1em;
}
.item input:checked ~ .q { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.notes-box textarea { min-height: 11rem; }
.print-only { display: none; }

/* ---------- Contact ---------- */
.postcard {
  position: relative;
  display: grid;
  gap: 0;
  margin-bottom: var(--s7);
  background: var(--oat-hi);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--paper-shadow);
  overflow: hidden;
}
.postcard::before {
  content: "";
  position: absolute; inset: 8px;
  border: 2px dashed var(--rule);
  border-radius: 6px;
  pointer-events: none;
}
.postcard__side { padding: clamp(1.5rem, 4vw, 2.5rem); position: relative; }
.postcard__side--addr { background: var(--field); border-top: 1px solid var(--rule); }
@media (min-width: 60rem) {
  .postcard { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .postcard__side--addr { border-top: 0; border-left: 2px solid var(--slate); }
}
.stamp {
  float: right;
  width: 88px; height: 104px;
  margin: 0 0 var(--s3) var(--s4);
  padding: 8px;
  background: var(--oat-hi);
  border: 3px double var(--copper-text);
  border-radius: 3px;
  transform: rotate(3deg);
  box-shadow: 0 2px 0 rgba(30, 39, 48, 0.2);
}
.stamp svg { width: 100%; height: 100%; display: block; }
.addr-line { font-family: var(--serif); font-size: clamp(1.05rem, 0.8rem + 1.1vw, 1.45rem); font-weight: 700; word-break: break-word; margin-bottom: var(--s3); }
.addr-lines { border-top: 1px solid var(--rule); margin-top: var(--s5); }
.addr-lines p { margin: 0; padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
.preview {
  margin: 0 0 var(--s4);
  padding: var(--s4);
  background: #FCFAF4;
  border: 1px dashed var(--muted);
  border-radius: 6px;
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 18rem;
  overflow: auto;
}
.faq details { border-top: 1px solid var(--rule); padding-block: var(--s2); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 48px;
  padding-block: 0.4rem;
  font-family: var(--serif); font-weight: 700; font-size: var(--step-1);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--copper-text); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 42em; }

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--s8);
  padding-block: var(--s7) var(--s6);
  background: var(--slate);
  color: var(--oat);
  border-top: 6px solid var(--copper);
}
.footer a { color: var(--oat); }
.footer a:hover { color: var(--copper-light); }
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 50rem) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer h2 { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--sans); color: var(--faint); margin-bottom: var(--s3); }
.footer .brand { color: var(--oat); }
.footer .brand__name em { color: var(--copper-light); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.footer p { max-width: 36em; }
.footer__legal {
  margin: var(--s6) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid rgba(239, 232, 218, 0.28);
  font-size: var(--step--1);
  color: #D9D3C5;
  max-width: none;
}
.footer__legal strong { color: var(--oat); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .wheel .bars, .dial .d-seg { transform: none !important; opacity: 1 !important; }
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  :root { --oat: #fff; --oat-hi: #fff; --field: #f1f1f1; }
  body { background: #fff; color: #000; font-size: 11pt; background-image: none; }
  .season-bar, .masthead, .skip, .footer__grid, .btn-row, .preset-row, .no-print, .rail, .hero::before, .band, .orn { display: none !important; }
  .footer { background: #fff; color: #000; border-top: 1px solid #000; margin-top: 1rem; padding-block: 0.5rem; }
  .footer p, .footer__legal { color: #000 !important; border: 0; font-size: 9pt; }
  .footer a { color: #000; }
  .print-only { display: block; }
  .panel, .group, .figure, .card, .readout, .verdict { box-shadow: none !important; background: #fff !important; border: 1px solid #555 !important; break-inside: avoid; }
  .card::before, .card::after { display: none; }
  .check-layout, .workbench, .gauge-grid { display: block; }
  .group__layout { display: block; }
  .group { margin-bottom: 0.8rem; }
  .margin { font-size: 9pt; margin-top: 0.4rem; }
  .plate { box-shadow: none; max-width: 15cm; background: #fff; }
  .wheel .w-base { fill: #333; }
  .wheel .w-surplus { fill: #888; }
  .wheel text { fill: #000; }
  .notes-box textarea { display: none; }
  .notes-box .print-only { white-space: pre-wrap; border: 1px solid #555; min-height: 5cm; padding: 0.4cm; }
  a { color: #000; text-decoration: none; }
  .entry { break-inside: avoid; }
  .section { padding-block: 0.6rem; }
  [data-print-hide] { display: none !important; }
}

@media (max-width: 40rem) {
  .table { font-size: 0.86rem; }
  .table th, .table td { padding: 0.5rem 0.4rem; }
  .table thead th { letter-spacing: 0.04em; font-size: 0.72rem; }
}