/* Wat: styles. Uses only names from tokens.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-5);
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse 80% var(--lamp-h) at 50% 0, var(--lamp), transparent), var(--grain);
  background-repeat: no-repeat, repeat;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: var(--w-regular); text-wrap: balance; }
p { text-wrap: pretty; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }

a {
  color: var(--forest);
  text-decoration-line: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 0.18em;
  transition: color var(--t-quick) var(--ease-even), text-decoration-color var(--t-quick) var(--ease-even);
}
a:hover { color: var(--saffron); }

:focus-visible {
  outline: var(--line-2) solid var(--focus);
  outline-offset: var(--line-3);
  border-radius: var(--r-1);
}

::selection { background: var(--ochre); color: var(--action-ink); }

.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--card);
  border: var(--hair) solid var(--ink);
  transform: translateY(-200%);
  z-index: 5;
}
.skip:focus { transform: none; }

.vh {
  position: absolute;
  width: var(--hair);
  height: var(--hair);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Layout ---------- */

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ---------- Text atoms ---------- */

.label {
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--saffron);
}
.label-ink { color: var(--ink-2); }

.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
}
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}
.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  max-width: var(--measure);
}
.note { font-size: var(--fs-note); color: var(--ink-2); }
.small { font-size: var(--fs-small); color: var(--ink-2); line-height: var(--lh-snug); }
.mono { font-family: var(--mono); font-size: var(--fs-small); font-variant-numeric: lining-nums tabular-nums; }
em, .it { font-style: italic; }
strong { font-weight: var(--w-bold); }

.rule {
  display: block;
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--hair) solid var(--rule-strong);
}
.rule-double {
  height: var(--s-1);
  border-bottom: var(--hair) solid var(--rule-strong);
}
.rule-ochre { border-top-color: var(--ochre); }

/* ---------- Masthead: the running head of the pamphlet ---------- */

.masthead { padding-top: var(--s-4); }
.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-3);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: var(--lh-ui);
}
@media (min-width: 30rem) { .wordmark { font-size: var(--fs-small); } }
.wordmark:hover { color: var(--ink); }
.wordmark svg { width: var(--s-5); height: var(--s-6); flex: none; color: var(--forest); }
.wordmark .leaf-fill { fill: currentColor; opacity: 0.16; }
.wordmark .leaf-line { fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration-color: transparent;
}
.nav a:hover { color: var(--saffron); text-decoration-color: currentColor; }
.nav a[aria-current="page"] {
  color: var(--saffron);
  text-decoration-color: var(--ochre);
  text-decoration-thickness: var(--line-2);
  text-underline-offset: 0.5em;
}
.masthead-row { position: relative; }
.masthead-join { order: 2; margin-left: auto; }
.nav { order: 3; width: 100%; gap: var(--s-1) var(--s-4); }
.wordmark { order: 1; }
@media (max-width: 29.99rem) {
  .wordmark { letter-spacing: var(--track-tight); gap: var(--s-1); }
  .masthead .masthead-join { padding-inline: var(--s-3); }
}
@media (max-width: 22.49rem) {
  .masthead .masthead-join { display: none; }
}
@media (min-width: 56rem) {
  .nav { order: 2; width: auto; margin-left: auto; gap: var(--s-1) var(--s-5); }
  .masthead-join { order: 3; margin-left: var(--s-4); }
}

/* ---------- Buttons: a key that gives ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-5);
  border: var(--hair) solid var(--ink);
  border-radius: var(--r-2);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-note);
  font-weight: var(--w-bold);
  line-height: var(--lh-ui);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-key);
  transition:
    transform var(--t-press) var(--ease-settle),
    box-shadow var(--t-press) var(--ease-settle),
    background-color var(--t-quick) var(--ease-even),
    color var(--t-quick) var(--ease-even),
    border-color var(--t-quick) var(--ease-even);
}
.btn:hover { background: var(--sunk); color: var(--ink); }
.btn:active { transform: translateY(var(--line-2)); box-shadow: var(--shadow-none); }
.btn-primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-ink);
}
.btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-ink); }
.btn-quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: var(--shadow-none);
  padding-inline: var(--s-1);
  color: var(--forest);
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 0.18em;
  font-weight: var(--w-regular);
}
.btn-quiet:hover { background: transparent; color: var(--saffron); }
.btn-small { padding-inline: var(--s-4); font-size: var(--fs-small); }
.btn .arrow { transition: transform var(--t-quick) var(--ease-settle); }
.btn:hover .arrow, .go:hover .arrow { transform: translateX(var(--s-1)); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-weight: var(--w-bold);
}
.go .arrow { display: inline-block; transition: transform var(--t-quick) var(--ease-settle); }

/* ---------- Hero ---------- */

.hero { padding-block: var(--s-6) var(--s-7); }
.hero-grid { display: grid; gap: var(--s-7); }
.hero .label { margin-bottom: var(--s-4); }
.hero .lead { margin-top: var(--s-5); }
.hero .actions { margin-top: var(--s-5); }
.hero-facts {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.hero-facts li { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.hero-facts li::before {
  content: "";
  width: var(--s-2);
  height: var(--s-2);
  background: var(--ochre);
  transform: rotate(45deg) translateY(calc(-1 * var(--s-0)));
  flex: none;
}

.epigraph {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  align-content: center;
}
.epigraph blockquote {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-style: italic;
  max-width: var(--quote-w);
}
.epigraph figcaption { margin-top: var(--s-3); }
.leaf { width: var(--leaf-w); height: auto; color: var(--forest); overflow: visible; }
.leaf path { fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.leaf .leaf-wash { fill: var(--ochre); stroke: none; opacity: 0.14; }
.leaf .vein { stroke-width: var(--stroke-fine); }

@media (min-width: 56rem) {
  .hero { padding-block: var(--s-8) var(--s-8); }
  .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); }
  .epigraph { border-left: var(--hair) solid var(--rule-strong); padding-left: var(--s-7); }
}
@media (max-width: 55.99rem) {
  .epigraph { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .leaf { width: var(--s-8); }
}

/* ---------- Numbered sections ---------- */

.sec { padding-block: var(--s-7); }
.sec-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); padding-top: var(--s-4); }
.sec-num {
  font-size: var(--fs-numeral);
  line-height: var(--lh-tight);
  color: var(--saffron);
  font-style: italic;
  font-variant-numeric: oldstyle-nums;
}
@media (min-width: 64rem) {
  .sec-body, .sec-head { padding-left: var(--margin-col); position: relative; }
  .sec-num { position: absolute; left: 0; top: var(--s-3); }
  .sec-head { padding-top: var(--s-5); }
}

/* Entries: the list of things to do, set like a contents page */
.entries { border-top: var(--hair) solid var(--rule); }
.entry {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-5);
  border-bottom: var(--hair) solid var(--rule);
  position: relative;
}
.entry-n { color: var(--saffron); font-style: italic; font-size: var(--fs-h3); line-height: var(--lh-head); }
.entry p { color: var(--ink-2); max-width: var(--measure); }
.entry::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--hair));
  width: 100%;
  height: var(--hair);
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-turn) var(--ease-settle);
}
.entry:hover::after, .entry:focus-within::after { transform: scaleX(1); }
@media (min-width: 56rem) {
  .entry { grid-template-columns: var(--s-6) minmax(0, var(--entry-title-w)) minmax(0, 1fr) auto; align-items: baseline; }
}

/* Ledger: counts with dot leaders */
.ledger { display: grid; gap: var(--s-2); max-width: var(--measure); }
.ledger-row { display: flex; align-items: baseline; gap: var(--s-2); }
.ledger-row dt { order: 1; }
.ledger-row::before {
  content: "";
  order: 2;
  flex: 1;
  border-bottom: var(--line-2) dotted var(--rule-strong);
  transform: translateY(calc(-1 * var(--s-1)));
  min-width: var(--s-5);
}
.ledger-row dd { order: 3; font-variant-numeric: lining-nums tabular-nums; }
.ledger-total { font-weight: var(--w-bold); padding-top: var(--s-2); border-top: var(--hair) solid var(--ink); margin-top: var(--s-2); }
.ledger-total::before { border-bottom-color: transparent; }

.split { display: grid; gap: var(--s-6); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}

/* ---------- Cards: index cards, notices on a board ---------- */

.card {
  position: relative;
  background: var(--card);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-card);
  padding: var(--s-4) var(--s-4) var(--s-5);
  transition: transform var(--t-quick) var(--ease-settle), box-shadow var(--t-quick) var(--ease-settle), border-color var(--t-quick) var(--ease-even);
}
@media (min-width: 30rem) { .card { padding: var(--s-5) var(--s-5) var(--s-5); } }
.card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: var(--hair) solid var(--ochre);
}
.card-lift:hover { transform: translateY(calc(-1 * var(--s-0))) rotate(var(--tilt)); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }

.notice {
  background: var(--card);
  border: var(--hair) solid var(--rule);
  border-left: var(--line-3) solid var(--ochre);
  border-radius: var(--r-1);
  padding: var(--s-4) var(--s-5);
}
.notice-fee { background: var(--fee); color: var(--fee-ink); border-color: transparent; border-left-color: var(--ochre); }

/* ---------- Tags ---------- */

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-0) var(--s-2);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-1);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: var(--lh-snug);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag-fee { background: var(--fee); color: var(--fee-ink); border-color: var(--ochre); border-style: dashed; }
.tag-online { color: var(--forest); border-color: var(--forest); }

.kind { display: inline-flex; align-items: center; gap: var(--s-2); }
.mark { width: var(--s-3); height: var(--s-3); flex: none; overflow: visible; }
.mark-group { fill: var(--forest); }
.mark-temple { fill: var(--ochre); }
.mark-retreat { fill: none; stroke: var(--saffron); stroke-width: 2; }

/* ---------- Form fields ---------- */

.field { display: grid; gap: var(--s-2); }
.field > label, .field-label { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); line-height: var(--lh-ui); }
.input, .select {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--s-2) var(--s-4);
  background: var(--card);
  border: var(--hair) solid var(--rule-strong);
  border-bottom: var(--line-2) solid var(--ink);
  border-radius: var(--r-2) var(--r-2) var(--r-0) var(--r-0);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  transition: border-color var(--t-quick) var(--ease-even), background-color var(--t-quick) var(--ease-even), box-shadow var(--t-quick) var(--ease-even);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder { color: var(--ink-2); font-style: italic; opacity: 1; }
.input:hover, .select:hover { border-color: var(--ink); }
.input:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--focus);
  border-bottom-color: var(--focus);
  box-shadow: 0 var(--line-2) 0 var(--focus);
}
.select {
  min-height: var(--tap);
  padding-right: var(--s-7);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-size: var(--s-2) var(--s-2);
  background-position: right calc(var(--s-4) + var(--s-2)) center, right var(--s-4) center;
  background-repeat: no-repeat;
  font-size: var(--fs-note);
}
.search { position: relative; }
.search svg { position: absolute; left: var(--s-4); top: 50%; width: var(--s-5); height: var(--s-5); transform: translateY(-50%); stroke: var(--ink-2); fill: none; stroke-width: var(--stroke-mark); stroke-linecap: round; pointer-events: none; }
.search .input { padding-left: calc(var(--s-4) + var(--s-5) + var(--s-3)); }

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  cursor: pointer;
  font-size: var(--fs-note);
  line-height: var(--lh-ui);
}
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  margin: 0;
  border: var(--hair) solid var(--ink);
  border-radius: var(--r-1);
  background: var(--card);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-even);
}
.check input::after {
  content: "";
  width: var(--s-3);
  height: var(--s-2);
  border-left: var(--line-2) solid var(--action-ink);
  border-bottom: var(--line-2) solid var(--action-ink);
  transform: rotate(-45deg) translate(var(--hair), calc(-1 * var(--hair))) scale(0);
  transition: transform var(--t-quick) var(--ease-settle);
}
.check input:checked { background: var(--action); border-color: var(--action); }
.check input:checked::after { transform: rotate(-45deg) translate(var(--hair), calc(-1 * var(--hair))) scale(1); }

/* Chips: index tabs */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-2);
  background: transparent;
  font-size: var(--fs-note);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-settle), background-color var(--t-quick) var(--ease-even), color var(--t-quick) var(--ease-even), border-color var(--t-quick) var(--ease-even);
}
.chip:hover { border-color: var(--ink); background: var(--card); }
.chip:active { transform: translateY(var(--press)); }
.chip .n { font-size: var(--fs-small); font-style: italic; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; transition: color var(--t-quick) var(--ease-even); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] .n, .chip[aria-selected="true"] .n { color: var(--paper); }
.chip-small { min-height: var(--s-6); padding: var(--s-1) var(--s-3); font-size: var(--fs-small); }
@media (pointer: coarse) { .chip-small { min-height: var(--tap); } }

/* ---------- Find ---------- */

.pagehead { padding-block: var(--s-6) var(--s-5); }
.pagehead .lead { margin-top: var(--s-3); }

.finder { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); }
.finder-row { display: grid; gap: var(--s-3) var(--s-5); align-items: end; }
.finder-more { display: grid; gap: var(--s-1) var(--s-5); }
@media (min-width: 40rem) {
  .finder-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finder-more { display: flex; flex-wrap: wrap; align-items: center; }
}
@media (min-width: 64rem) {
  .finder-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s-7); align-items: end; }
}

.results-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--scrim);
  border-top: var(--hair) solid var(--ink);
  border-bottom: var(--hair) solid var(--rule);
}
.results-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-4); min-height: var(--field-h); }
.count { font-size: var(--fs-note); line-height: var(--lh-ui); }
.count strong { font-size: var(--fs-h3); font-variant-numeric: lining-nums tabular-nums; display: inline-block; min-width: 2ch; }
.viewtabs { display: flex; gap: var(--s-2); }

.find-grid { display: grid; gap: var(--s-6); padding-block: var(--s-5) var(--s-8); align-items: start; }
@media (max-width: 63.99rem) {
  .find-grid[data-view="list"] .chart-col { display: none; }
  .find-grid[data-view="chart"] .list-col { display: none; }
}
@media (min-width: 64rem) {
  .find-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s-7); }
  .viewtabs { display: none; }
  .chart-col { position: sticky; top: calc(var(--field-h) + var(--s-5)); }
}

.listing-list { display: grid; gap: var(--s-4); }
.listing h3 { font-size: var(--fs-h3); line-height: var(--lh-head); }
.listing .trad { font-style: italic; color: var(--ink-2); font-size: var(--fs-note); margin-top: var(--s-1); }
.listing .about { margin-top: var(--s-3); font-size: var(--fs-note); line-height: var(--lh-snug); }
.listing .place { font-size: var(--fs-small); color: var(--ink-2); }
.listing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); }
.listing-foot .btn-quiet { margin-left: auto; font-size: var(--fs-note); }
.listing.is-sel { border-color: var(--saffron); box-shadow: inset var(--line-3) 0 0 var(--ochre), var(--shadow-lift); }

.empty { padding: var(--s-6) var(--s-5); text-align: left; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }

/* The chart: an engraved sheet */
.chart {
  background: var(--card);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-card);
  padding: var(--s-2);
}
.chart-inner { border: var(--hair) solid var(--ink); padding: var(--s-0); }
.chart-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-2) var(--s-3);
  border: var(--hair) solid var(--ink);
  border-bottom: 0;
}
.chart-title .it { font-size: var(--fs-note); }
.chart-frame { position: relative; border: var(--hair) solid var(--ink); background: var(--chart-sea); aspect-ratio: 3 / 2; overflow: hidden; }
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.chart-svg.is-near { cursor: pointer; }
.chart-svg .grat { fill: none; stroke: var(--chart-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .grat-eq { stroke: var(--rule-strong); stroke-dasharray: 1 5; stroke-linecap: round; }
.chart-svg .shore { fill: none; stroke: var(--chart-coast); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-svg .shore-3 { stroke-width: 11; opacity: 0.07; }
.chart-svg .shore-2 { stroke-width: 6; opacity: 0.1; }
.chart-svg .land { fill: var(--chart-land); stroke: var(--chart-coast); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-svg .lake { fill: var(--chart-sea); stroke: var(--chart-coast); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.chart-svg .deg { font-family: var(--serif); font-style: italic; font-size: calc(var(--u, 1) * 10px); fill: var(--ink-2); }
.dot { transform-origin: 0 0; }
.dot .m { transition: transform var(--t-turn) var(--ease-settle), opacity var(--t-turn) var(--ease-even); stroke: var(--mark-edge); stroke-width: 0.8; }
.dot.k-group .m { fill: var(--forest); }
.dot.k-temple .m { fill: var(--ochre); }
.dot.k-retreat .m { fill: var(--chart-sea); stroke: var(--saffron); stroke-width: 1.8; }
.dot.is-off .m { transform: scale(0.45); opacity: 0.16; }
.dot.is-new .m { animation: dot-wet var(--t-dry) var(--ease-settle) both; }
.dot .halo { fill: none; stroke: var(--wet); stroke-width: var(--stroke-mark); opacity: 0; }
.dot.is-sel .m { transform: scale(1.5); fill: var(--wet); stroke: var(--ink); }
.dot.is-sel .halo { opacity: 1; transform: scale(1.9); animation: halo var(--t-dry) var(--ease-settle) 2; }
@keyframes dot-wet {
  from { transform: scale(2.4); fill: var(--wet); opacity: 0; }
  35% { opacity: 1; }
  to { transform: scale(1); }
}
@keyframes halo {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(3.4); opacity: 0; }
}

.compass { position: absolute; left: var(--s-3); bottom: var(--s-3); width: var(--s-7); height: var(--s-7); color: var(--ink-2); pointer-events: none; }
.compass path { fill: none; stroke: currentColor; stroke-width: 1; }
.compass .n-half { fill: currentColor; }
.compass text { font-family: var(--serif); font-size: 9px; fill: currentColor; text-anchor: middle; }

.chart-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-1) var(--s-1); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); padding: var(--s-2) var(--s-1); font-size: var(--fs-small); color: var(--ink-2); }
.chart-pick {
  margin-top: var(--s-2);
  border-top: var(--hair) solid var(--rule);
  padding: var(--s-3) var(--s-1) var(--s-1);
  min-height: var(--pick-h);
  display: grid;
  align-content: start;
  gap: var(--s-1);
}
.chart-pick .h3 { font-size: var(--fs-body); font-weight: var(--w-bold); }
.chart-pick > * { animation: deal var(--t-turn) var(--ease-settle) both; }

/* ---------- Join ---------- */

.join { background: var(--sunk); border-block: var(--hair) solid var(--rule-strong); }
.join-form { display: grid; gap: var(--s-4); max-width: var(--measure); }
.join-form .actions { margin-top: var(--s-2); }
.form-answer { min-height: var(--s-7); font-size: var(--fs-note); color: var(--ink-2); }
.form-answer.is-said { color: var(--ink); animation: dry var(--t-dry) var(--ease-even) both; }

/* ---------- Footer: colophon ---------- */

.colophon { padding-block: var(--s-7) var(--s-8); }
.colophon-grid { display: grid; gap: var(--s-5); padding-top: var(--s-5); }
.colophon p { max-width: var(--measure); }
.colophon nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.colophon nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (min-width: 56rem) {
  .colophon-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-8); }
}

/* ---------- Toast: a slip of paper ---------- */

.toast-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--s-4);
  display: grid;
  justify-items: center;
  padding-inline: var(--gutter);
  pointer-events: none;
  z-index: 10;
}
.toast {
  max-width: var(--toast-w);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-note);
  line-height: var(--lh-snug);
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--t-turn) var(--ease-settle), transform var(--t-turn) var(--ease-settle);
}
.toast.is-up { opacity: 1; transform: none; }

/* ---------- Design-language page ---------- */

.spec { padding-block: var(--s-6); }
.spec-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--swatch-w)), 1fr)); }
.swatch { background: var(--card); border: var(--hair) solid var(--rule); border-radius: var(--r-1); overflow: hidden; }
.swatch-chips { display: grid; grid-template-columns: 1fr 1fr; height: var(--swatch-h); }
.swatch-chips span { background: var(--sw); border-bottom: var(--hair) solid var(--rule); }
.swatch-chips span + span { border-left: var(--hair) solid var(--rule); }
.swatch-body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: var(--s-0); }
.swatch-body .mono { color: var(--ink-2); }
.swatch-name { font-weight: var(--w-bold); line-height: var(--lh-ui); }

.type-row { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: var(--hair) solid var(--rule); }
@media (min-width: 56rem) { .type-row { grid-template-columns: var(--spec-label-w) minmax(0, 1fr); gap: var(--s-5); align-items: baseline; } }

.space-row { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-1); }
.space-row .mono { width: var(--space-label-w); flex: none; color: var(--ink-2); }
.space-bar { height: var(--s-3); background: var(--ochre); width: var(--w); border-radius: var(--r-0); }

.radius-row { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.radius-box { width: var(--s-8); height: var(--s-8); background: var(--card); border: var(--hair) solid var(--ink); display: grid; place-items: center; }
.shadow-box { background: var(--card); border: var(--hair) solid var(--rule); border-radius: var(--r-1); padding: var(--s-4); min-width: var(--shadow-box-w); }

.demo { border: var(--hair) dashed var(--rule-strong); border-radius: var(--r-1); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.demo-stage { min-height: var(--demo-h); display: grid; align-content: center; gap: var(--s-3); }
.demo-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--demo-w)), 1fr)); }

.idea { counter-reset: idea; display: grid; gap: var(--s-4); max-width: var(--measure-wide); }
.idea li { counter-increment: idea; display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr); font-size: var(--fs-lead); line-height: var(--lh-snug); }
.idea li::before { content: counter(idea); color: var(--saffron); font-style: italic; }

.theme-panel { background: var(--paper); color: var(--ink); border: var(--hair) solid var(--rule-strong); border-radius: var(--r-1); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }

/* ---------- Motion ---------- */

@keyframes dry {
  from { color: var(--wet); filter: blur(var(--blur-wet)); opacity: 0; }
  18% { opacity: 1; }
  55% { filter: blur(0); }
  to { filter: blur(0); opacity: 1; }
}
@keyframes deal {
  from { opacity: 0; transform: translateY(var(--rise-small)); }
  to { opacity: 1; transform: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Arrivals wait for the script; without it the page is simply there. */
.js .arrive { opacity: 0; transform: translateY(var(--rise)); }
.js .arrive.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-turn) var(--ease-settle) calc(var(--i, 0) * var(--stagger)),
    transform var(--t-turn) var(--ease-settle) calc(var(--i, 0) * var(--stagger));
}
.js .rule.arrive { opacity: 1; transform: scaleX(0); transform-origin: left; }
.js .rule.arrive.is-in { transform: scaleX(1); transition: transform var(--t-dry) var(--ease-settle) calc(var(--i, 0) * var(--stagger)); }
.js .ink.arrive { transform: none; }
.js .ink.arrive.is-in { animation: dry var(--t-dry) var(--ease-even) both; transition: none; }
.ink-again { animation: dry var(--t-dry) var(--ease-even) both; }

.js .leaf path:not(.leaf-wash) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .leaf.is-in path:not(.leaf-wash) { animation: draw var(--t-dry) var(--ease-even) calc(var(--d, 0) * var(--stagger)) forwards; }
.js .leaf .leaf-wash { opacity: 0; transition: opacity var(--t-dry) var(--ease-even) var(--t-turn); }
.js .leaf.is-in .leaf-wash { opacity: 0.14; }

.deal { animation: deal var(--t-turn) var(--ease-settle) calc(var(--i, 0) * var(--stagger)) both; }
.listing-list.is-leaving { opacity: 0; transition: opacity var(--t-press) var(--ease-even); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .js .arrive { opacity: 1; transform: none; }
  .js .rule.arrive { transform: none; }
  .card-lift:hover { transform: none; }
}

.pagehead-note { margin-top: var(--s-3); }
.finder-top { display: grid; gap: var(--s-5); }
.finder-more .btn-quiet { justify-self: start; }