/* SOUND BATH CALENDAR — v1 (2026-07-19 brand split).
   Tokens carried from the Firstwater design system chassis; light ground,
   utility register. One sheet: the calendar is the site.
   No JS anywhere — every rule below must hold with scripts blocked. */
:root {
  --ink: #0A0B0D;
  --paper: #F5F7FA;
  --gray: #98A1AB;
  --accent: #62B6E8;
  /* Accessible link blue on the paper ground: #1F6FA8 on #F5F7FA = 5.02:1
     (WCAG AA needs 4.5:1). The ice --accent stays for marks, not text. */
  --accent-on-light: #1F6FA8;
  --line: rgba(10, 11, 13, 0.14);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-on-light); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font: 600 0.75rem var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(10,11,13,0.65); display: block; margin-bottom: 1.2rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 2px; }

/* ---- sections (consonant with the chassis; light by default, no tall hero) */
.section { padding: 2.2rem 0 4rem; position: relative; }
.section--light { background: var(--paper); color: var(--ink); }
.section--light a { color: var(--accent-on-light); }

/* ---- masthead: compact, light, sticky. Wordmark · city anchors · slim
        digest capture. Two rows on small screens, one on wide. ---- */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead-inner { display: flex; align-items: center; gap: 1.4rem 2rem; padding-top: 0.7rem; padding-bottom: 0.7rem; flex-wrap: wrap; }
.wordmark { font: 700 0.95rem var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.masthead-cities { display: flex; gap: 1.3rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.masthead-cities::-webkit-scrollbar { display: none; }
.masthead-cities a { color: rgba(10,11,13,0.62); text-decoration: none; font: 600 0.82rem var(--font-body); white-space: nowrap; }
.masthead-cities a:hover { color: var(--ink); }
.masthead-digest { display: flex; gap: 0.5rem; align-items: center; }
.masthead-digest input[type="email"] { width: 15.5rem; max-width: 38vw; background: transparent; border: 1px solid rgba(10,11,13,0.25); padding: 0.45rem 0.7rem; font: 400 0.85rem var(--font-body); color: var(--ink); }
.masthead-digest-link { display: none; font: 600 0.82rem var(--font-body); color: var(--accent-on-light); text-decoration: none; white-space: nowrap; }
.masthead-digest-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .masthead-digest { display: none; }
  .masthead-digest-link { display: inline; order: 2; }
  .masthead-cities { order: 3; flex-basis: 100%; }
  .masthead-inner { row-gap: 0.5rem; }
}

/* ---- buttons ---- */
.btn { display: inline-block; font: 600 0.95rem var(--font-body); text-decoration: none; padding: 0.95rem 2rem; border: none; cursor: pointer; transition: filter .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-slim { padding: 0.5rem 1rem; font-size: 0.82rem; }

/* ---- forms (digest capture) ---- */
.contact-form { max-width: 34rem; }
.form-field { display: block; margin-bottom: 1.6rem; }
.form-field span { display: block; font: 600 0.75rem var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(10,11,13,0.65); margin-bottom: 0.5rem; }
.form-field input, .form-field select { width: 100%; background: transparent; border: 1px solid rgba(10,11,13,0.25); padding: 0.85rem 1rem; font: 400 1rem var(--font-body); color: var(--ink); }
.form-field input:focus, .form-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form-note { max-width: 34rem; color: rgba(10,11,13,0.65); margin: 0 0 1.4rem; }
.digest-block { max-width: 34rem; margin-top: 4.5rem; padding-top: 2.6rem; border-top: 1px solid var(--line); scroll-margin-top: 90px; }

/* ---- calendar root: answer-first head (no hero, no image, no animation) */
.cal-h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 500; margin: 0.6rem 0 0.9rem; letter-spacing: -0.01em; }
.cal-updated { color: rgba(10,11,13,0.55); font-size: 0.85rem; letter-spacing: 0.03em; margin: 0 0 1rem; }
/* Answer-first, machine-extractable summary (speakable via schema). */
.cal-summary { font: 500 1.12rem var(--font-display); color: var(--ink); max-width: 44rem; margin: 0 0 1.6rem; line-height: 1.45; }

.cal-jump { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; margin: 0 0 2.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.cal-jump a { color: var(--accent-on-light); text-decoration: none; font: 600 0.76rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.cal-jump a:hover { text-decoration: underline; }

/* ---- filters (Track B B.5, progressive enhancement) — the bar is hidden
        until filters.js reveals it, so no-JS visitors see every row. The
        [hidden] rules override .cal-row's display:grid / .cal-band's block. */
.cal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.6rem; margin: 0 0 2rem; padding: 0.85rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-filters__field select { background: transparent; border: 1px solid rgba(10,11,13,0.25); padding: 0.4rem 0.7rem; font: 400 0.9rem var(--font-body); color: var(--ink); }
.cal-filters__check { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.86rem var(--font-body); color: var(--ink); cursor: pointer; }
.cal-filters__check input { width: 1rem; height: 1rem; accent-color: var(--accent-on-light); }
.cal-filters[hidden], .cal-row[hidden], .cal-band[hidden] { display: none; }

/* ---- filter facet: primary controls (area + free) stacked over the tag
        chips (CAL-01). The bar becomes a column so the tags wrap below. ---- */
.cal-filters { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.cal-filters__primary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.6rem; }
.cal-filters__tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; }
.cal-filters__axis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; }
.cal-filters__axislabel { font: 600 0.66rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(10,11,13,0.45); margin-right: 0.15rem; }

/* ---- tag chips (CAL-01): a display chip on rows/event pages + a toggle
        variant in the filter facet. Radius 0 per DESIGN.md. ---- */
.cal-tag { display: inline-flex; align-items: center; gap: 0.3rem; font: 600 0.68rem var(--font-body); letter-spacing: 0.03em; color: var(--accent-on-light); border: 1px solid rgba(10,11,13,0.18); padding: 0.1rem 0.45rem; line-height: 1.5; }
.cal-tag--toggle { cursor: pointer; }
.cal-tag--toggle input { width: 0.85rem; height: 0.85rem; accent-color: var(--accent-on-light); margin: 0; }
.cal-tag--toggle:hover { border-color: var(--accent-on-light); }
.cal-row__tags, .cal-event__tags { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; margin: 0.5rem 0 0; padding: 0; }
.cal-event__tags { margin: 0.4rem 0 1.4rem; }

/* ---- add-to-calendar menu (CAL-01): a no-JS <details> disclosure on the
        event page offering Google/Apple/Outlook/.ics launch links. ---- */
.cal-addcal { margin: 0 0 2rem; }
.cal-addcal__summary { cursor: pointer; display: inline-block; list-style: none; }
.cal-addcal__summary::-webkit-details-marker { display: none; }
.cal-addcal[open] .cal-addcal__summary { margin-bottom: 0.6rem; }
.cal-addcal__menu { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.cal-addcal__opt { color: var(--accent-on-light); font: 600 0.9rem var(--font-body); text-decoration: none; }
.cal-addcal__opt:hover { text-decoration: underline; }

/* ---- ICS subscribe / download (Track B B.4) ---- */
.cal-ics { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; align-items: baseline; margin: 0 0 2rem; }
.cal-ics a { text-decoration: none; }
.cal-ics a:hover { text-decoration: underline; }
.cal-ics__sub { color: var(--accent-on-light); font: 600 0.86rem var(--font-body); }
.cal-ics__dl { color: rgba(10,11,13,0.55); font: 600 0.82rem var(--font-body); }

/* ---- temporal bands: the root's axis (Today · This weekend · This week ·
        The weeks ahead). Each renders only when it has rooms. ---- */
.cal-band { margin-bottom: 3.4rem; scroll-margin-top: 90px; }
.cal-band:last-of-type { margin-bottom: 2rem; }
.cal-band__h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin: 0 0 1.2rem; }

/* ---- calendar rows: dense on desktop, cards on mobile (B.3) ---- */
.cal-rows { border-top: 1px solid var(--line); }
.cal-row { display: grid; grid-template-columns: 78px 1fr; gap: 0 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); align-items: start; }

/* Tear-off date rail: weekday over numeral over time. The Today band omits the
   date, so a time-only rail sits at the top of the column. */
.cal-row__when { display: flex; flex-direction: column; align-items: flex-start; gap: 0.02rem; line-height: 1.05; }
.cal-row__dow { font: 600 0.72rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10,11,13,0.5); }
.cal-row__dnum { font: 500 1.5rem var(--font-display); color: var(--ink); letter-spacing: -0.02em; }
.cal-row__time { color: rgba(10,11,13,0.6); font-size: 0.85rem; margin-top: 0.15rem; }

/* Body = optional flyer thumbnail (one consistent frame) + the text column.
   Rows with no image render with no frame — the text simply fills the row. */
.cal-row__body { display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; }
.cal-row__media { flex: 0 0 auto; width: 104px; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(10,11,13,0.05); border-radius: 2px; }
.cal-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-row__text { min-width: 0; flex: 1 1 auto; }

/* Marks line above the name: the city chip (every row) + Firstwater's marks. */
.cal-row__marks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem; margin-bottom: 0.25rem; }
.cal-row__city { font: 600 0.68rem var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-on-light); }
.cal-row__tag { font: 600 0.66rem var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-light); }
.cal-row__ours { font: 600 0.62rem var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(10,11,13,0.5); }

.cal-row__name { font-size: 1.12rem; font-weight: 500; margin: 0 0 0.15rem; letter-spacing: -0.01em; line-height: 1.25; }
.cal-row__name a { color: inherit; text-decoration: none; }
.cal-row__name a:hover { text-decoration: underline; text-decoration-color: var(--accent-on-light); }
.cal-row__meta { color: rgba(10,11,13,0.62); font-size: 0.92rem; margin: 0; max-width: 42rem; }
/* Practitioner cross-link on a row (CAL-02) — quiet, discovery not decoration. */
.cal-row__with { font-size: 0.85rem; color: rgba(10,11,13,0.6); margin: 0.15rem 0 0; }
.cal-row__with a { color: var(--accent-on-light); text-decoration: none; }
.cal-row__with a:hover { text-decoration: underline; }
/* Daniel's one line — the moat — as a margin voice: display face, set off from
   the facts by a quiet accent rule. */
.cal-row__note { font: 500 1.02rem var(--font-display); color: var(--ink); margin: 0.55rem 0 0; padding-left: 0.9rem; border-left: 2px solid var(--accent); max-width: 38rem; line-height: 1.4; }
.cal-row__cta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin: 0.55rem 0 0; }
.cal-row__cta a { color: var(--accent-on-light); font: 600 0.86rem var(--font-body); text-decoration: none; }
.cal-row__cta a:hover { text-decoration: underline; }

/* Firstwater's rows — one operator among many, still visibly its own. */
.cal-row--firstwater { border-left: 3px solid var(--accent); padding-left: 1.2rem; background: rgba(98,182,232,0.06); }

.cal-empty { color: rgba(10,11,13,0.55); font-size: 1rem; margin: 0; padding: 1.6rem 0; }
.cal-empty--all { padding: 2.6rem 0; }

/* ---- city pages: breadcrumb + other-areas nav (Track B B.2) ---- */
.cal-crumbs { font-size: 0.82rem; color: rgba(10,11,13,0.55); margin: 0 0 1.4rem; }
.cal-crumbs a { color: var(--accent-on-light); text-decoration: none; }
.cal-crumbs a:hover { text-decoration: underline; }
.cal-cities { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem; margin: 3.4rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.cal-cities__label { font: 600 0.72rem var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gray); }
.cal-cities a { color: var(--accent-on-light); text-decoration: none; font: 600 0.9rem var(--font-body); }
.cal-cities a:hover { text-decoration: underline; }

/* ---- FAQ — an answer surface for search/AI. Always visible for extraction. */
.cal-faq { margin: 5rem 0 0; padding-top: 3rem; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.cal-faq__item { margin: 0 0 1.8rem; max-width: 44rem; }
.cal-faq__q { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.5rem; }
.cal-faq__a { color: rgba(10,11,13,0.72); font-size: 0.98rem; line-height: 1.6; margin: 0; }

.cal-submit { margin: 3.5rem 0 0; padding-top: 2.4rem; border-top: 1px solid var(--line); color: rgba(10,11,13,0.7); }
.cal-submit a { color: var(--accent-on-light); }

/* ---- thanks page ---- */
.thanks-main { min-height: 55vh; }
.thanks-sub { color: rgba(10,11,13,0.65); max-width: 38rem; margin: 0.6rem 0 2rem; }

/* ---- footer: the byline bridge ---- */
.site-footer { border-top: 1px solid var(--line); padding: 2.6rem 0 3.2rem; }
.footer-inner { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-fine { color: rgba(10,11,13,0.55); font-size: 0.85rem; }
.footer-fine a { color: var(--accent-on-light); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 0.5rem; }
.footer-nav a { color: var(--accent-on-light); font: 600 0.9rem var(--font-body); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  /* Rows become self-contained cards; the day+time rail runs as one line. */
  .cal-rows { border-top: none; }
  .cal-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 0.85rem; }
  .cal-row__when { flex-direction: row; gap: 0.55rem; align-items: baseline; }
  .cal-row__dnum { font-size: 1.1rem; }
  .cal-row__time { margin-top: 0; }
  .cal-row--firstwater { padding-left: 1.1rem; }
  .cal-row__media { width: 84px; }
  /* First-viewport budget: stamp + summary + first rows above the fold. */
  .section { padding-top: 1.4rem; }
  .cal-h1 { margin-top: 0.2rem; }
  .cal-summary { font-size: 1rem; margin-bottom: 1.2rem; }
  .cal-jump { margin-bottom: 1.6rem; gap: 0.55rem 1.2rem; padding-bottom: 1rem; }
  .cal-band { margin-bottom: 3rem; }
}