/* Fieldnote. See docs/DESIGN.md: a surveyor's field book. */
:root {
  --paper: #F5F6F2;
  --paper-2: #E9ECE6;
  --sheet: #FFFFFF;
  --ink: #14213D;
  --ink-2: #47546B;
  --line: #C3CAC6;
  --flag: #2E6A5E;
  --flag-ink: #2A5F54;
  --mint: #A9D3C8;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --margin: 18px;
  --gutter: 20px;
  --bar: 64px;
}
@media (min-width: 700px) { :root { --margin: 56px; --gutter: 40px; } }
@media (min-width: 1000px) { :root { --margin: 96px; --gutter: 56px; --bar: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: var(--bar);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  background-color: var(--paper);
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--flag-ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 12px 16px; z-index: 20; }
.skip:focus { left: 0; }

/* concept note */
.concept {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px var(--gutter) 10px calc(var(--margin) + var(--gutter));
  background: var(--ink); color: var(--paper);
  font: 400 .75rem/1.5 var(--mono);
  position: relative; z-index: 2;
}
.concept[hidden] { display: none; }
.concept button {
  font: inherit; color: inherit; background: none; cursor: pointer;
  border: 1px solid currentColor; padding: 8px 12px; min-height: 36px; flex: none;
}
.concept :focus-visible { outline-color: var(--paper); }

/* pages */
.page {
  position: relative;
  padding: 72px var(--gutter) 72px calc(var(--margin) + var(--gutter));
  max-width: 1360px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1000px) { .page { padding-top: 112px; padding-bottom: 112px; } }
.folio {
  font: 600 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--flag-ink); margin-bottom: 20px;
}
.folio span { color: var(--ink); margin-left: .75em; }
h2 { font: 500 clamp(1.875rem, 4.6vw, 2.875rem)/1.1 var(--serif); letter-spacing: -.01em; max-width: 22ch; text-wrap: balance; }
h3 { font: 500 1.5rem/1.15 var(--serif); }
.aside { margin-top: 20px; max-width: 46ch; color: var(--ink-2); }

/* navbar */
.nav {
  position: sticky; top: 0; z-index: 9;
  display: flex; align-items: center; gap: 12px 28px; min-height: 64px;
  padding: 8px var(--gutter) 8px calc(var(--margin) + var(--gutter));
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.nav .wordmark { font-size: 1.6875rem; text-decoration: none; margin-right: auto; padding: 8px 0; }
.nav-toggle { font: 700 1rem/1 var(--sans); color: var(--ink); background: none; border: 1.5px solid var(--ink); padding: 0 16px; min-height: 44px; cursor: pointer; }
.nav-links { display: none; }
.nav[data-open] .nav-links { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100svh - 64px - var(--bar)); overflow-y: auto; background: var(--paper); border-bottom: 1px solid var(--line); padding: 4px var(--gutter) 12px calc(var(--margin) + var(--gutter)); }
.nav-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--paper-2); }
.nav-item > a { text-decoration: none; font-weight: 700; padding: 15px 0; }
.nav-more { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.nav-more::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); rotate: 45deg; translate: 0 -2px; transition: rotate .15s, translate .15s; }
.nav-item[data-open] .nav-more::before { rotate: -135deg; translate: 0 2px; }
.nav-sub { display: none; grid-column: 1 / -1; padding: 0 0 10px 14px; }
.nav-item[data-open] .nav-sub { display: grid; }
.nav-sub a { display: block; text-decoration: none; padding: 11px 0; }
.nav-sub a[aria-current] { font-weight: 700; }
.nav-sub li:last-child a { color: var(--flag-ink); font-weight: 700; }
.nav-cta { display: none; }
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .nav-links, .nav[data-open] .nav-links { display: flex; position: static; max-height: none; overflow: visible; gap: 26px; padding: 0; border: 0; background: none; }
  .nav-item { position: relative; display: flex; gap: 2px; border: 0; }
  .nav-item > a { font-weight: 400; font-size: 1rem; padding: 10px 0; }
  .nav-item > a:hover, .nav-item > a[aria-current] { box-shadow: inset 0 -2px 0 var(--flag); }
  .nav-more { width: 22px; height: 44px; }
  .nav-more::before { width: 6px; height: 6px; border-width: 1.5px; }
  .nav-sub { position: absolute; top: 100%; left: -18px; min-width: 280px; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 12%, transparent); }
  .nav-item:hover .nav-sub, .nav-item[data-open] .nav-sub { display: grid; }
  .nav-sub a { padding: 10px 12px; border-radius: 3px; }
  .nav-sub a:hover, .nav-sub a:focus-visible { background: var(--paper); }
  .nav-sub li:last-child { border-top: 1px solid var(--paper-2); margin-top: 6px; padding-top: 6px; }
  .nav-cta { display: flex; align-items: center; gap: 22px; margin-left: 12px; }
  .nav-phone { font: 600 .75rem/1 var(--mono); text-decoration: none; padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .nav-more::before { transition: none; } }
.btn-sm { min-height: 44px; padding: 8px 18px; font-size: 1rem; }

/* cover */
.cover { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 0; }
.cover > * { min-width: 0; }
@media (min-width: 900px) {
  .cover { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 64px; row-gap: 56px; align-items: center; padding-top: 56px; padding-bottom: 0; }
  .facts { grid-column: 1 / -1; }
}
.wordmark { font: 500 1.5rem/1 var(--serif); }
.entry { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 .75rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.entry-no { color: var(--flag-ink); font-weight: 600; }
.poster { margin: 14px 0 0; font: 500 clamp(2.875rem, 7.6vw, 5.25rem)/1.02 var(--serif); letter-spacing: -.015em; max-width: 11ch; text-wrap: balance; }
.poster em { font-style: italic; color: var(--flag-ink); }
.lede { margin-top: 24px; font-size: 1.1875rem; line-height: 1.5; max-width: 36ch; }
.cover .cta { margin-top: 24px; }
.cover-team { margin: 0; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.team-grid a { display: block; }
.team-grid .portrait { border: 0; }
.next-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; margin-top: 6px; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--line); }
.next-card > * { grid-column: 1; }
.next-card a { grid-column: 2; grid-row: 1 / span 3; font-weight: 700; padding: 10px 0; }
.next-label { font: 600 .6875rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--flag-ink); }
.next-card b { font: 500 1.375rem/1.15 var(--serif); }
.next-card > span:not(.next-label) { font-size: .875rem; color: var(--ink-2); }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--flag); margin-right: .4em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts li { padding: 16px 12px 16px 0; display: grid; gap: 2px; align-content: start; }
.facts li:nth-child(n+3) { border-top: 1px solid var(--paper-2); }
.facts b { font: 500 1.375rem/1.15 var(--serif); }
.facts span { font: 400 .75rem/1.5 var(--mono); color: var(--ink-2); }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts li { padding: 22px 16px 26px 0; border-top: 0 !important; }
  .facts b { font-size: 1.6875rem; }
}
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 22px;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink);
  font: 700 1.0625rem/1.1 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--flag-ink); border-color: var(--flag-ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* observations: specimens */
.obs { margin-top: 40px; counter-reset: obs; display: grid; gap: 0 56px; }
@media (min-width: 900px) { .obs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obs li { counter-increment: obs; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; align-content: start; padding: 26px 0; border-top: 1px solid var(--line); }
.obs li::before { content: counter(obs, decimal-leading-zero); position: absolute; left: 0; top: 104px; width: 64px; text-align: center; font: 600 .6875rem/1 var(--mono); color: var(--flag-ink); }
.obs .ico { width: 64px; height: 64px; grid-row: 1 / span 3; }
.obs li > p { grid-column: 2; min-width: 0; }
.said { font: 500 clamp(1.4rem, 4.8vw, 1.95rem)/1.12 var(--serif); text-wrap: balance; }
.latin { font-style: italic; color: var(--flag-ink); }
.who { font: 400 .75rem/1.7 var(--mono); color: var(--ink-2); margin-top: 4px; }
.who b { color: var(--ink); font-weight: 600; margin-right: .5em; }
.obs + .aside { padding-top: 22px; border-top: 1px solid var(--line); margin-top: 0; max-width: none; }

/* route */
.trail { --pad: 66px; position: relative; margin-top: 44px; padding-left: var(--pad); }
@media (min-width: 860px) { .trail { --pad: 92px; } }
.trail-line { position: absolute; left: 4px; top: 0; width: 40px; height: 100%; overflow: visible; }
.trail-line path { fill: none; stroke-linecap: round; }
.trail-ghost { stroke: var(--ink); stroke-width: 1.5; opacity: .3; stroke-dasharray: .004 .008; }
.trail-ink { stroke: var(--flag); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.stops li { position: relative; padding-bottom: 48px; max-width: 36ch; }
.stops li:last-child { padding-bottom: 0; }
.node { position: absolute; left: calc(-1 * var(--pad)); top: -6px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); border: 2px solid var(--ink); }
.node .ico { width: 24px; height: 24px; }
.stop-when { font: 600 .75rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--flag-ink); }
.stop-when span { color: var(--ink-2); font-weight: 400; margin-left: .75em; }
.stops h3 { font-size: clamp(1.5rem, 4.6vw, 2.1rem); margin: 4px 0 6px; }
@media (min-width: 860px) { .stops li { padding-bottom: 68px; } }

/* ledger */
.ledger-wrap { position: relative; margin-top: 56px; max-width: 620px; }
.ledger {
  background: var(--sheet);
  border-top: 8px solid var(--ink);
  padding: 22px 20px 44px;
}
@media (min-width: 700px) { .ledger { padding: 28px 32px 52px; } }
.ledger-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 600 .75rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ledger dl > div { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.ledger dt { order: 1; min-width: 0; }
.ledger dl > div::after { content: ""; order: 2; flex: 1; min-width: 24px; border-bottom: 2px dotted var(--ink-2); transform: translateY(-.25em); }
.ledger dt i { display: block; font: 400 .75rem/1.6 var(--mono); color: var(--ink-2); }
.ledger dd { order: 3; font: 600 1.125rem/1 var(--mono); }
@media (min-width: 560px) { .ledger dt i { display: inline; margin-left: .6em; } }
.ledger .ledger-zero { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ink); font-weight: 700; }
.ledger .ledger-zero dd { color: var(--flag-ink); }
.ledger-note { margin-top: 16px; font-size: .9375rem; color: var(--ink-2); }

/* field guide */
.guide { margin-top: 40px; display: grid; gap: 0 48px; }
@media (min-width: 860px) { .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px 0; border-top: 1px solid var(--line); }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); border: 1px solid var(--ink); filter: grayscale(1) contrast(1.04); }
.guide h3 small { font: 400 .75rem/1 var(--mono); color: var(--ink-2); margin-left: .4em; }
.role { font-style: italic; color: var(--flag-ink); margin: 2px 0 8px; }
.guide-meta { margin-top: 12px; font: 400 .75rem/1.8 var(--mono); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: center; }
.guide-meta span { color: var(--ink); font-weight: 600; }
.guide-meta a { color: var(--ink); font-weight: 600; padding: 10px 0; }

@media (min-width: 560px) { .guide li { grid-template-columns: 132px minmax(0, 1fr); gap: 24px; } }

/* booking */
.booker {
  margin-top: 32px; max-width: 720px;
  background-color: var(--sheet);
  border: 1px solid var(--line); border-top: 4px solid var(--ink);
  padding: 22px 18px 26px;
}
@media (min-width: 700px) { .booker { padding: 30px 32px 36px; } }
.thread { display: flex; flex-wrap: wrap; gap: 8px; }
.thread:not(:empty) { margin-bottom: 22px; }
.thread button {
  font: 400 .75rem/1.3 var(--mono); color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--ink); padding: 9px 12px; min-height: 40px; cursor: pointer; text-align: left;
}
.thread button b { font-weight: 600; }
.thread button:hover { background: var(--ink); color: var(--paper); }
.step .step-q { font: 500 clamp(1.6rem, 5.4vw, 2.3rem)/1.15 var(--serif); letter-spacing: 0; max-width: none; margin-bottom: 6px; outline: none; }
.step .hint { color: var(--ink-2); margin-bottom: 16px; }
.opts { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 560px) { .opts.two { grid-template-columns: 1fr 1fr; } }
.opt {
  font: 700 1.0625rem/1.25 var(--sans); color: var(--ink); background: var(--sheet);
  border: 1.5px solid var(--ink); padding: 14px 16px; min-height: 56px; text-align: left; cursor: pointer;
}
.opt small { display: block; font: 400 .875rem/1.4 var(--sans); color: var(--ink-2); margin-top: 2px; }
.opt:hover { background: var(--ink); color: var(--paper); }
.opt:hover small { color: var(--paper); }
.match { padding: 18px 0; border-top: 1px solid var(--line); }
.match:first-of-type { margin-top: 18px; }
.match h3 { margin: 0; font: 500 1.3125rem/1.2 var(--serif); }
.match p { font: 400 .75rem/1.7 var(--mono); color: var(--ink-2); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.slot {
  font: 600 .75rem/1.3 var(--mono); color: var(--ink); background: var(--sheet);
  border: 1.5px solid var(--ink); padding: 10px 12px; min-height: 48px; cursor: pointer;
}
.slot:hover { background: var(--ink); color: var(--paper); }
.field { display: grid; gap: 6px; margin-top: 16px; }
.field label { font-weight: 700; }
.field input {
  font: 400 1.0625rem/1.3 var(--sans); color: var(--ink); background: var(--sheet);
  border: 1.5px solid var(--ink); border-radius: 0; padding: 13px 14px; min-height: 52px; width: 100%; max-width: 360px;
}
.fine { margin-top: 14px; font-size: .875rem; color: var(--ink-2); max-width: 52ch; }
.err { margin-top: 12px; color: var(--flag-ink); font-weight: 700; }
.step .btn { margin-top: 18px; }
.ticket {
  margin-top: 6px; background: var(--ink); color: var(--paper); padding: 24px 22px;
  -webkit-mask: radial-gradient(10px at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(10px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(10px at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(10px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
}
.ticket p:first-child { font: 600 .75rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.ticket .step-q { margin: 8px 0; color: var(--paper); }
.ticket p { font: 400 .75rem/1.7 var(--mono); }

/* transcript */
.transcript { margin-top: 40px; max-width: 760px; }
.transcript > div { padding: 22px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.transcript dt, .transcript dd { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); }
.transcript dt { font: 500 1.375rem/1.2 var(--serif); }
.transcript span { font: 600 .75rem/2.2 var(--mono); color: var(--flag-ink); }
.transcript dd span { color: var(--ink-2); line-height: 2.5; }

/* house rules */
.rules ol { margin-top: 36px; counter-reset: r; max-width: 900px; }
.rules li { counter-increment: r; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); font: 500 clamp(1.25rem, 3vw, 1.6875rem)/1.25 var(--serif); text-wrap: balance; }
.rules li::before { content: counter(r); font: 500 clamp(1.5rem, 3.4vw, 2rem)/1 var(--serif); color: var(--flag-ink); min-width: 1.2em; }

/* crisis band */
.crisis {
  position: relative; z-index: 2;
  background: var(--ink); color: var(--paper);
  padding: 44px var(--gutter) 44px calc(var(--margin) + var(--gutter));
  display: grid; gap: 12px 40px; align-items: center;
}
@media (min-width: 760px) { .crisis { grid-template-columns: auto minmax(0, 46ch); } }
.crisis .crisis-num { font: 500 clamp(4rem, 14vw, 6.5rem)/.9 var(--serif); color: var(--mint); letter-spacing: -.01em; }
.crisis-num a { text-decoration: none; }
.crisis p { font-size: 1.125rem; max-width: 46ch; }
.crisis :focus-visible { outline-color: var(--paper); }

/* footer */
.foot { position: relative; z-index: 2; background: var(--paper-2); padding: 44px var(--gutter) 40px calc(var(--margin) + var(--gutter)); }
.foot .wordmark { font-size: 2rem; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin: 26px 0; font-size: .9375rem; }
@media (min-width: 800px) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1100px; } }
.foot-cols nav { display: grid; align-content: start; }
.foot-cols b { font: 600 .75rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--flag-ink); margin-bottom: 6px; }
.foot-cols a { text-decoration: none; padding: 7px 0; }
.foot-cols a:hover { text-decoration: underline; }
.foot-reach { font-size: .9375rem; margin-bottom: 18px; }
.foot-fine { font: 400 .75rem/1.7 var(--mono); color: var(--ink-2); max-width: 70ch; padding-top: 18px; border-top: 1px solid var(--ink); }

/* talk to the front desk: a call panel */
.talk {
  width: min(480px, calc(100vw - 2 * var(--margin))); max-height: min(680px, calc(100dvh - 32px));
  padding: 26px 24px 22px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--sheet); color: var(--ink);
}
.talk[open] { display: flex; flex-direction: column; }
.talk::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.talk-head { display: flex; justify-content: space-between; align-items: center; }
.talk-head .folio { margin: 0; }
.talk-x { background: none; border: 0; padding: 10px 0 10px 16px; font: 700 .9375rem/1 var(--sans); color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.talk h2 { margin-top: 10px; font: 500 1.875rem/1.15 var(--serif); }
.talk-note { margin-top: 10px; color: var(--ink-2); }
.talk-status { margin-top: 18px; padding: 12px 14px; background: var(--paper); border-left: 3px solid var(--line); font-weight: 700; }
.talk[data-state="live"] .talk-status { border-left-color: var(--flag); }
.talk[data-state="error"] .talk-status { border-left-color: var(--ink); }
.talk-log { list-style: none; margin: 14px 0 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: grid; gap: 10px; align-content: start; }
.talk-log:empty { display: none; }
.talk-log li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 8px; line-height: 1.45; }
.talk-log b { font: 700 .75rem/1.95 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--flag-ink); }
.talk-log .you b { color: var(--ink-2); }
.talk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.talk-actions .btn { flex: 1 1 auto; }
.talk-fine { margin-top: 14px; font-size: .875rem; color: var(--ink-2); }
.talk-x, .talk { border-radius: 3px; }
.talk [hidden] { display: none; }

/* bottom bar (phones and tablets) */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: var(--bar);
  display: grid; grid-template-columns: 1fr 1fr 1.6fr;
  background: var(--ink); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bar a { display: grid; place-items: center; color: var(--paper); text-decoration: none; font: 700 1rem/1 var(--sans); }
.bar a + a { border-left: 1px solid rgba(238, 242, 234, .3); }
.bar .bar-book { background: var(--paper); color: var(--ink); border: 0; box-shadow: inset 0 -5px 0 var(--flag); }
.bar :focus-visible { outline-color: var(--paper); outline-offset: -5px; }
.bar .bar-book:focus-visible { outline-color: var(--ink); }
@media (min-width: 1000px) { .bar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trail-ink { stroke-dashoffset: 0 !important; }
}

/* ---------- inner pages ---------- */
.crumbs { padding: 18px var(--gutter) 0 calc(var(--margin) + var(--gutter)); font: 400 .75rem/1.6 var(--mono); color: var(--ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; }
.crumbs li + li::before { content: "/"; margin-right: .6em; color: var(--flag-ink); }
.crumbs a { padding: 8px 0; display: inline-block; }
.crumbs + .page { padding-top: 28px; }
@media (min-width: 1000px) { .crumbs + .page { padding-top: 44px; } }
.title { font: 500 clamp(2.25rem, 6vw, 3.75rem)/1.05 var(--serif); letter-spacing: -.015em; max-width: 20ch; text-wrap: balance; }
.title small { font: 400 .8125rem/1 var(--mono); letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.title + .lede { max-width: 46ch; }
.h-sm { font: 500 1.5rem/1.2 var(--serif); letter-spacing: 0; margin: 30px 0 10px; max-width: none; }
.h-xs { font: 600 .75rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--flag-ink); margin: 20px 0 10px; max-width: none; }
.prose { max-width: 60ch; }
.prose p + p { margin-top: 14px; }
.title + .prose, .lede + .prose { margin-top: 24px; }
.small { font-size: .875rem; color: var(--ink-2); margin-top: 20px; }
.more { margin-top: 26px; }
.more a { font-weight: 700; }
.split { display: grid; gap: 32px; margin-top: 28px; }
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; align-items: start; } }
.feebox { background: var(--sheet); border: 1.5px solid var(--ink); border-top-width: 8px; padding: 22px 20px 24px; }
@media (min-width: 900px) { .feebox { position: sticky; top: 88px; } }
.feebox-fee { font: 500 clamp(2.6rem, 9vw, 3.5rem)/1 var(--serif); }
.feebox-note { font: 400 .75rem/1.7 var(--mono); color: var(--ink-2); margin-top: 6px; }
.openings .slots { margin-top: 0; }
a.slot { display: inline-grid; align-content: center; text-decoration: none; }
.slot small { display: block; font: 400 .6875rem/1.5 var(--mono); color: inherit; opacity: .8; }
.more-link { display: inline-block; margin-top: 12px; font-weight: 700; padding: 8px 0; }
.ticks { margin-top: 6px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; max-width: 56ch; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .34em; width: 14px; height: 8px; border-left: 2.5px solid var(--flag); border-bottom: 2.5px solid var(--flag); rotate: -45deg; }
.pull { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 22px; font: 500 clamp(1.5rem, 5vw, 2.1rem)/1.15 var(--serif); }
.pull .ico { width: 56px; height: 56px; }
.steps { margin-top: 32px; display: grid; gap: 0; counter-reset: st; max-width: 1000px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.steps li { counter-increment: st; border-top: 1px solid var(--line); padding: 18px 0 22px; display: grid; gap: 4px; align-content: start; }
.steps li::before { content: counter(st); font: 500 1.75rem/1 var(--serif); color: var(--flag-ink); }
.steps b { font: 500 1.5rem/1.2 var(--serif); }
.steps span { color: var(--ink-2); }
.index { margin-top: 32px; max-width: 860px; }
.index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
.index li:last-child a { border-bottom: 1px solid var(--line); }
.index b { font: 500 clamp(1.375rem, 4.4vw, 1.875rem)/1.15 var(--serif); }
.index span { font: 400 .75rem/1.6 var(--mono); color: var(--ink-2); }
.index a:hover b { text-decoration: underline; text-decoration-color: var(--flag); text-underline-offset: .15em; }
@media (max-width: 559px) { .index a { grid-template-columns: minmax(0, 1fr); } }
.ticks + .index { margin-top: 36px; }
.profile { display: grid; gap: 28px; }
.profile > * { min-width: 0; }
.profile-photo { max-width: 280px; }
@media (min-width: 800px) { .profile { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px; align-items: start; } .profile-photo { max-width: none; } }
.specs { margin-top: 26px; max-width: 560px; }
.specs.wide { max-width: 760px; margin-top: 32px; }
.specs > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.specs dt { font: 600 .75rem/2.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--flag-ink); }
.cta-band { background: var(--paper-2); }
.cta-band .cta { margin-top: 24px; }
.guide h3 a, .said a { text-decoration: none; }
.guide h3 a:hover, .said a:hover { text-decoration: underline; text-decoration-color: var(--flag); text-underline-offset: .12em; }
.guide-photo { display: block; }
.book .booker { margin-top: 28px; }

.btn, .opt, .slot, .field input, .nav-toggle, .thread button { border-radius: 3px; }
.portrait { border-color: var(--line); }
.feebox { border: 1px solid var(--line); border-top: 4px solid var(--ink); }

/* ------------------------------------------------------------------
   Design options. Colour themes, a softer feel and colour photographs,
   switched by attributes on <html>. Used by the design preview (add
   ?design to any address); the chosen set becomes the default later. */
html[data-theme="garden"] { --paper: #F6F2E8; --paper-2: #E9E7D8; --sheet: #FFFDF8; --ink: #1E2A24; --ink-2: #4A574F; --line: #CBCFBE; --flag: #3F6B4F; --flag-ink: #345A42; --mint: #BCD8C0; }

/* colour photographs instead of black and white */
html[data-photos="colour"] .portrait { filter: saturate(.92); }

/* a softer feel: round corners, lighter lines, more air */
html[data-feel="soft"] .btn, html[data-feel="soft"] .nav-toggle, html[data-feel="soft"] .slot { border-radius: 999px; }
html[data-feel="soft"] .btn { padding-left: 26px; padding-right: 26px; }
html[data-feel="soft"] .btn-line { border-color: var(--line); }
html[data-feel="soft"] .opt, html[data-feel="soft"] .field input, html[data-feel="soft"] .thread button { border-radius: 14px; }
html[data-feel="soft"] .portrait { border: 0; border-radius: 18px; }
html[data-feel="soft"] .team-grid { gap: 10px; }
html[data-feel="soft"] .next-card, html[data-feel="soft"] .feebox, html[data-feel="soft"] .talk, html[data-feel="soft"] .nav-sub { border-radius: 18px; border-color: var(--line); }
html[data-feel="soft"] .feebox { border-width: 1px; }
html[data-feel="soft"] .next-card { box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent); border-color: transparent; }
html[data-feel="soft"] .ticket { border-radius: 18px; -webkit-mask: none; mask: none; }
html[data-feel="soft"] .talk-status { border-left: 0; border-radius: 12px; }
html[data-feel="soft"] .node { border: 1.5px solid var(--line); background: var(--paper-2); }
html[data-feel="soft"] .obs li { border-top-color: transparent; background: var(--sheet); border-radius: 18px; padding: 24px 22px; margin-bottom: 14px; }
html[data-feel="soft"] .obs li::before { left: 22px; top: 100px; }
html[data-feel="soft"] .obs { gap: 0 16px; }
html[data-feel="soft"] .cta-band { border-radius: 28px; margin-left: var(--margin); margin-right: var(--margin); }
html[data-feel="soft"] .poster em { font-style: italic; }
@media (min-width: 1000px) { html[data-feel="soft"] .crisis { border-radius: 28px 28px 0 0; } }

/* no drawings: a numeral leads each item */

/* the design preview panel itself; fixed colours so it reads on every theme */

/* ------------------------------------------------------------------
   The chosen look (12 November 2026): Garden colours, soft shapes,
   colour photographs, delicate abstract marks in soft colours, and a
   quiet moving background. */
/* earth and water tones: sage, terracotta earth, sand, sky, slate, clay. No pink or lilac, so the site reads as welcoming to everyone. */
:root { --c-sage: #86AD93; --c-earth: #C9987C; --c-sand: #E0C48C; --c-sky: #86AFC9; --c-slate: #8C9DBD; --c-clay: #BFA07E; }

/* smaller, finer drawings */
.obs li { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; }
.obs .ico { width: 48px; height: 48px; margin-top: -2px; }
.obs li::before, html[data-feel="soft"] .obs li::before { width: 48px; top: 80px; font-weight: 400; opacity: .7; }
html:not([data-feel="soft"]) .obs li::before { top: 78px; }
.pull { grid-template-columns: 48px minmax(0, 1fr); }
.pull .ico { width: 48px; height: 48px; }

/* background: four blurred washes behind everything. They sit still until
   the page scrolls, then drift past each other and trade places. */
.aura { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --sy: 0; }
.aura i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.aura i:nth-child(1) { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: var(--c-sage);
  transform: translate3d(calc(var(--sy) * 18vw), calc(var(--sy) * 46vh), 0); opacity: .34; }
.aura i:nth-child(2) { width: 44vmax; height: 44vmax; right: -16vmax; top: 6vh; background: var(--c-sky);
  transform: translate3d(calc(var(--sy) * -22vw), calc(var(--sy) * -30vh), 0); opacity: calc(.30 - var(--sy) * .14); }
.aura i:nth-child(3) { width: 40vmax; height: 40vmax; left: 18vw; bottom: -26vmax; background: var(--c-sand);
  transform: translate3d(calc(var(--sy) * 26vw), calc(var(--sy) * -52vh), 0); opacity: .30; }
.aura i:nth-child(4) { width: 46vmax; height: 46vmax; right: -10vmax; bottom: -30vmax; background: var(--c-earth);
  transform: translate3d(calc(var(--sy) * -30vw), calc(var(--sy) * -58vh), 0); opacity: calc(.10 + var(--sy) * .24); }
@media (prefers-reduced-motion: no-preference) {
  .aura { animation: breathe 28s ease-in-out infinite alternate; }
  @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1.5vh); } }
}
/* let the washes show through the page's own panels a little */
html[data-feel="soft"] .obs li, html[data-feel="soft"] .next-card { background: color-mix(in srgb, var(--sheet) 78%, transparent); }
.nav { background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ------------------------------------------------------------------
   Calm layer (12 November 2026). The owner's note: the site felt hard,
   chunky and stuck to the left. This centres the page, lightens every
   heavy block and slows the pace. */
:root { --edge: max(clamp(20px, 5vw, 56px), calc((100vw - 1180px) / 2 + 56px)); }

/* one centred column instead of a left-hand one */
.page { max-width: 1180px; margin-inline: auto; padding: 64px clamp(20px, 5vw, 56px); border-bottom: 0; }
@media (min-width: 1000px) { .page { padding-top: 88px; padding-bottom: 88px; } }
.nav, .concept, .crisis, .foot { padding-left: var(--edge); padding-right: var(--edge); }
.page.center > .folio, .page.center > h2, .page.center > .aside { text-align: center; margin-left: auto; margin-right: auto; }
.page.center > .transcript { margin-left: auto; margin-right: auto; }

/* lighter type */
h2 { font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; }
.poster { font-weight: 400; font-size: clamp(2.75rem, 6.4vw, 4.5rem); line-height: 1.05; }
.folio { font: italic 400 1.0625rem/1.4 var(--serif); letter-spacing: 0; text-transform: none; color: var(--flag-ink); margin-bottom: 10px; }
.entry { text-transform: none; letter-spacing: 0; font-size: .9375rem; }
.said { font-weight: 400; font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.25; }
.lede { color: var(--ink-2); }

/* the demonstration note: a quiet line, not a bar */
.concept { justify-content: center; gap: 14px; padding-top: 5px; padding-bottom: 5px; background: color-mix(in srgb, var(--paper-2) 55%, transparent); color: var(--ink-2); font-size: .75rem; }
.concept button { border: 0; padding: 6px 2px; min-height: 0; text-decoration: underline; color: var(--ink-2); }
.concept :focus-visible { outline-color: var(--ink); }

/* buttons: lighter, greener, less tall */
.btn { min-height: 46px; padding: 10px 24px; font-size: 1rem; background: var(--flag-ink); border-color: var(--flag-ink); border-width: 1px; }
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn-line { background: color-mix(in srgb, var(--sheet) 60%, transparent); color: var(--ink); border-color: var(--line); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: .9375rem; }

/* hero facts, centred and airy */
.facts { text-align: center; border-top-color: color-mix(in srgb, var(--line) 60%, transparent); }
.facts li { padding: 22px 8px; justify-items: center; }
.facts b { font-weight: 400; font-size: 1.5rem; }

/* a breath between the hero and everything else */
.breath { display: grid; justify-items: center; gap: 22px; padding: 56px 20px 24px; text-align: center; }
.breath-ring { position: relative; width: 112px; height: 112px; }
.breath-ring i { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-sage) 34%, transparent); }
.breath-ring i:nth-child(2) { inset: 18px; background: color-mix(in srgb, var(--c-sky) 40%, transparent); }
.breath-ring i:nth-child(3) { inset: 38px; background: color-mix(in srgb, var(--c-sand) 60%, transparent); }
.breath-line { font: italic 400 clamp(1.375rem, 3vw, 1.875rem)/1.3 var(--serif); }
.breath-line span { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .breath-ring i { animation: inhale 9s ease-in-out infinite; }
  .breath-ring i:nth-child(2) { animation-delay: -.5s; }
  .breath-ring i:nth-child(3) { animation-delay: -1s; }
  @keyframes inhale { 0%, 100% { transform: scale(.74); opacity: .6; } 45%, 55% { transform: scale(1.1); opacity: 1; } }
  .rise { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; }
  .rise.in { opacity: 1; transform: none; }
}

/* the way in: four steps across the page on wide screens */
.stops h3 { font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.stop-when { text-transform: none; letter-spacing: 0; font: italic 400 .9375rem/1.5 var(--serif); }
html[data-feel="soft"] .node { width: 44px; height: 44px; border-width: 1px; background: var(--paper); }
@media (min-width: 900px) {
  .trail { padding-left: 0; margin-top: 56px; }
  .trail-line { display: none; }
  .stops { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .stops::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 22px; border-top: 1.5px dashed var(--line); }
  .stops li { padding: 0; max-width: none; text-align: center; }
  .stops li p { margin-inline: auto; max-width: 24ch; }
  .node { position: relative; left: auto; top: auto; margin: 0 auto 16px; z-index: 1; }
}

/* fees: words on one side, a soft card on the other */
.duo { display: grid; gap: 36px; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; } }
.duo .ledger-wrap { margin-top: 0; max-width: none; }
.ledger { border: 0; border-radius: 24px; padding: 26px 28px 24px; background: color-mix(in srgb, var(--sheet) 82%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 6%, transparent); }
.ledger-head { text-transform: none; letter-spacing: 0; font: italic 400 .9375rem/1.5 var(--serif); color: var(--ink-2); border-bottom-color: var(--line); }
.ledger dl > div::after { border-bottom: 1px dotted var(--line); }
.ledger dd { font: 500 1.125rem/1 var(--serif); }
.ledger .ledger-zero { border-top-color: var(--line); font-weight: 400; }

/* clinicians and questions: soft, no ruled lines */
.guide { gap: 16px; }
.guide li { border-top: 0; padding: 18px; border-radius: 24px; background: color-mix(in srgb, var(--sheet) 70%, transparent); text-align: left; }
.guide-meta { font-size: .8125rem; }
.transcript > div { border-top-color: color-mix(in srgb, var(--line) 55%, transparent); text-align: left; }
.transcript dt { font-weight: 400; }

/* promises: five small cards in a row */
.rules ol { max-width: none; display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 700px) { .rules ol { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.rules li { display: block; text-align: center; border-top: 0; padding: 26px 18px 28px; border-radius: 24px; background: color-mix(in srgb, var(--sheet) 70%, transparent); font: 400 1.125rem/1.35 var(--serif); }
.rules li::before { display: block; margin: 0 auto 10px; font: italic 400 1.375rem/1 var(--serif); color: var(--flag); min-width: 0; }

/* the closing invitation, centred */
.cta-band, html[data-feel="soft"] .cta-band { text-align: center; width: min(1068px, calc(100% - 2 * clamp(20px, 5vw, 56px))); margin: 24px auto 72px; border-radius: 32px; background: color-mix(in srgb, var(--paper-2) 62%, transparent); }
.cta-band h2, .cta-band .aside { margin-left: auto; margin-right: auto; }
.cta-band .cta { justify-content: center; }

/* crisis line: still on every page and easy to find, but gentle */
.crisis, html[data-feel="soft"] .crisis { background: color-mix(in srgb, var(--c-sage) 24%, var(--paper)); color: var(--ink); padding-top: 26px; padding-bottom: 26px; justify-content: center; border-radius: 0; }
.crisis .crisis-num { font-size: clamp(2.25rem, 5vw, 3rem); color: var(--flag-ink); }
.crisis p { font-size: 1rem; }
.crisis :focus-visible { outline-color: var(--ink); }
.foot-cols b { text-transform: none; letter-spacing: 0; font: italic 400 1rem/1.6 var(--serif); }

/* calm layer, continued: inner pages, booking and the phone bar */
.title { font-weight: 400; font-size: clamp(2.125rem, 5vw, 3.25rem); line-height: 1.1; }
.page:has(> .booker) > * { margin-left: auto; margin-right: auto; text-align: center; }
.manage .booker { text-align: center; }
.manage .ticket { text-align: left; margin-bottom: 20px; }
.manage .cta { justify-content: center; margin-top: 4px; }
.manage .slots { justify-content: center; }
.manage .hint { margin: 6px auto 0; max-width: 44ch; }
.ticket-link { margin-top: 14px; }
.ticket-link a { font-weight: 700; }
.page:has(> .booker) > .booker { text-align: left; }
.booker { border: 0; border-radius: 28px; background: color-mix(in srgb, var(--sheet) 84%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 6%, transparent); }
.step .step-q { font-weight: 400; font-size: clamp(1.5rem, 4vw, 1.875rem); }
.opt { font-weight: 400; border: 1px solid var(--line); }
.opt:hover, .slot:hover, .thread button:hover { background: color-mix(in srgb, var(--c-sage) 30%, var(--sheet)); color: var(--ink); border-color: var(--flag); }
.opt:hover small { color: var(--ink-2); }
.slot { border: 1px solid var(--line); font-weight: 400; font-size: .875rem; }
.thread button { border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.field input { border: 1px solid var(--line); border-radius: 14px; }
.field label { font-weight: 400; color: var(--ink-2); }
.feebox, html[data-feel="soft"] .feebox { border: 0; border-radius: 24px; background: color-mix(in srgb, var(--sheet) 84%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 6%, transparent); }
.feebox-fee { font-weight: 400; }
.match { border-top-color: color-mix(in srgb, var(--line) 55%, transparent); }

.bar { left: 12px; right: 12px; bottom: 10px; height: 56px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent); padding-bottom: 0; }
.bar a { color: var(--ink); font-weight: 400; }
.bar a + a { border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.bar .bar-book { background: var(--flag-ink); color: var(--paper); box-shadow: none; font-weight: 700; }
.bar :focus-visible, .bar .bar-book:focus-visible { outline-color: var(--ink); }
:root { --bar: 76px; }
@media (min-width: 1000px) { :root { --bar: 0px; } }

/* quiet mode: the visitor's own switch. No motion, no moving background, larger text. */
.quiet-offer { font-size: .9375rem; color: var(--ink-2); margin-top: -8px; }
.foot-quiet { font-size: .9375rem; color: var(--ink-2); margin-bottom: 8px; }
html[data-quiet] *, html[data-quiet] *::before, html[data-quiet] *::after { animation: none !important; transition: none !important; }
html[data-quiet] .rise { opacity: 1; transform: none; }
html[data-quiet] .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }

/* quiet mode, refined: a real switch, no page reload, and the colour stays.
   The washes hold still instead of vanishing, so the page stays warm. */
.quiet-switch { display: inline-flex; align-items: center; gap: 10px; font: inherit; color: var(--ink); background: none; border: 0; padding: 8px 0; cursor: pointer; }
.quiet-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line); transition: background .25s ease; flex: none; }
.quiet-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 25%, transparent); transition: transform .25s ease; }
.quiet-switch[aria-checked="true"] .quiet-track { background: var(--flag); }
.quiet-switch[aria-checked="true"] .quiet-track::after { transform: translateX(16px); }
.quiet-offer, .foot-quiet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; font-size: .9375rem; color: var(--ink-2); }
.foot-quiet { justify-content: flex-start; }
html[data-quiet] .aura i { transform: none !important; opacity: .22 !important; }
html[data-quiet] .breath-ring i { transform: scale(.92); opacity: .85; }

/* June's panel: a presence, not a form. A soft orb that breathes while she
   listens and pulses while she speaks, with the conversation as bubbles. */
.talk, html[data-feel="soft"] .talk { width: min(440px, calc(100vw - 24px)); padding: 26px 24px 20px; border: 0; border-radius: 32px; text-align: center;
  background: color-mix(in srgb, var(--sheet) 94%, transparent); box-shadow: 0 30px 80px color-mix(in srgb, var(--ink) 22%, transparent); }
.talk::backdrop { background: color-mix(in srgb, var(--ink) 28%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.talk-x { position: absolute; top: 14px; right: 20px; padding: 8px 0; font-weight: 400; font-size: .875rem; }
.talk-orb { position: relative; width: 104px; height: 104px; margin: 6px auto 14px; flex: none; }
.talk-orb i { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-sage) 36%, transparent); }
.talk-orb i:nth-child(2) { inset: 16px; background: color-mix(in srgb, var(--c-sky) 42%, transparent); }
.talk-orb i:nth-child(3) { inset: 34px; background: color-mix(in srgb, var(--c-sand) 70%, transparent); }
.talk[data-state="error"] .talk-orb i { background: color-mix(in srgb, var(--line) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .talk-orb i { animation: inhale 8s ease-in-out infinite; }
  .talk-orb i:nth-child(2) { animation-delay: -.4s; }
  .talk-orb i:nth-child(3) { animation-delay: -.8s; }
  .talk[data-mode="speaking"] .talk-orb i { animation: speak 1.5s ease-in-out infinite; }
  .talk[data-mode="speaking"] .talk-orb i:nth-child(2) { animation-delay: -.25s; }
  .talk[data-mode="speaking"] .talk-orb i:nth-child(3) { animation-delay: -.5s; }
  .talk[data-mode="listening"] .talk-orb i { animation: none; transform: scale(1.04); transition: transform .6s ease; }
  @keyframes speak { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.12); } }
}
.talk h2 { margin: 0 auto; font: 400 1.75rem/1.1 var(--serif); max-width: none; }
.talk-role { margin-top: 4px; font: italic 400 1rem/1.4 var(--serif); color: var(--ink-2); }
.talk-status, html[data-feel="soft"] .talk-status { margin: 14px auto 0; padding: 6px 14px; width: fit-content; max-width: 100%; border: 0; border-radius: 999px; font-weight: 400; font-size: .9375rem; background: var(--paper); color: var(--ink-2); }
.talk[data-state="live"] .talk-status { background: color-mix(in srgb, var(--c-sage) 28%, var(--sheet)); color: var(--ink); }
.talk-log { gap: 8px; margin-top: 16px; text-align: left; padding: 2px; }
.talk-log li { display: block; max-width: 86%; padding: 9px 14px; border-radius: 18px; font-size: .9375rem; line-height: 1.4; }
.talk-log li b { display: none; }
.talk-log .june { justify-self: start; background: color-mix(in srgb, var(--c-sage) 24%, var(--sheet)); border-bottom-left-radius: 6px; }
.talk-log .you { justify-self: end; background: color-mix(in srgb, var(--c-sand) 34%, var(--sheet)); border-bottom-right-radius: 6px; }
.talk-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.talk-hints li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); }
.talk-log:not(:empty) + .talk-hints { display: none; }
.talk-actions { justify-content: center; margin-top: 18px; }
.talk-actions .btn { flex: 0 1 auto; min-width: 140px; }
.talk-fine { margin-top: 14px; font-size: .75rem; line-height: 1.5; color: var(--ink-2); }

/* calm layer for the inner pages: centred headings, centred blocks, soft rows */
.page > .folio, .page > .title, .page > .lede, .page > h2, .page > .aside, .page > .small { text-align: center; margin-left: auto; margin-right: auto; }
.page > .index, .page > .transcript, .page > .ledger-wrap, .page > .specs, .page > .prose, .page > .steps, .page > .guide, .page > .openings { margin-left: auto; margin-right: auto; }
.page > .ticks { width: fit-content; max-width: 100%; margin: 20px auto 0; }
.page > .openings { width: fit-content; max-width: 100%; }
.page > .openings .slots { justify-content: center; }
.page > .more-link { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.crumbs { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

.index { max-width: 860px; display: grid; gap: 10px; }
.index a, .index li:last-child a { border: 0; padding: 18px 24px; border-radius: 20px; background: color-mix(in srgb, var(--sheet) 72%, transparent); transition: background .2s ease; }
.index a:hover { background: var(--sheet); }
.index b { font-weight: 400; font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.index span { font-size: .8125rem; }

.page > .ledger-wrap { max-width: 680px; margin-top: 40px; }
.specs > div { border-top-color: color-mix(in srgb, var(--line) 55%, transparent); }
.specs dt { text-transform: none; letter-spacing: 0; font: italic 400 1rem/1.6 var(--serif); }
.specs.wide { padding: 10px 28px; border-radius: 24px; background: color-mix(in srgb, var(--sheet) 72%, transparent); }
.specs.wide > div:first-child { border-top: 0; }
.steps { max-width: 1000px; }
.steps li { border-top: 0; padding: 22px; border-radius: 22px; background: color-mix(in srgb, var(--sheet) 70%, transparent); }
@media (min-width: 800px) { .steps { gap: 16px; } }
.steps b { font-weight: 400; }
.h-sm { font-weight: 400; }
.h-xs { text-transform: none; letter-spacing: 0; font: italic 400 1rem/1.6 var(--serif); }
.prose { text-align: left; }
.transcript span { font-weight: 400; }
.page > .openings { text-align: center; }

/* the held-visit card: the last dark slab, now a soft sage panel */
.ticket, html[data-feel="soft"] .ticket { background: color-mix(in srgb, var(--c-sage) 26%, var(--sheet)); color: var(--ink); border-radius: 22px; padding: 22px 24px; -webkit-mask: none; mask: none; }
.ticket p:first-child { color: var(--flag-ink); text-transform: none; letter-spacing: 0; font: italic 400 1rem/1.5 var(--serif); }
.ticket .step-q { color: var(--ink); font-weight: 400; }
.ticket p { font-size: .875rem; color: var(--ink-2); }
.manage .booker > .step-q { margin-left: auto; margin-right: auto; text-align: center; max-width: none; }
.manage .ticket .step-q { text-align: left; }