@charset "utf-8";

/* ==========================================================================
   Verio — visual system

   Blue, ink and pure white, brass held to accents only. Every surface is
   #ffffff: no cream, no beige, no tint, nothing that reads as "paper."
   Generous rounding, soft diffuse shadows tinted to the page's own hue,
   fully rounded controls. One typeface, Montserrat, throughout; structural
   labels are set in uppercase with wide tracking rather than a second
   family, which is where the page gets its character while everything else
   stays quiet.

   Motion is restrained on purpose: short, purposeful, never decorative for
   its own sake. Reveals are a translateY + fade, buttons get a press state,
   nothing spins or bounces. Every transition has a reason.

   Legibility floor, because the audience skews older: 18px base, 1.65 line
   height, 4.5:1 on every piece of body text, 48px minimum on primary
   controls, visible keyboard focus, reduced motion respected.
   ========================================================================== */

:root {
  /* Teal, drawn directly from the logo mark, is the spine of the site.
     --blue-900 is the exact background color of the logo badge; every other
     step is the old blue scale's lightness re-solved at the logo's hue, so
     each step lands at the same contrast ratio it always did. */
  --blue-900: #0c2b2a;
  --blue-800: #124846;
  --blue-700: #185e5c;
  --blue-600: #20817e;
  --blue-500: #269a96;
  --blue-400: #2fbcb7;
  --blue-200: #97e5e3;
  --blue-100: #cdf2f1;
  --blue-050: #eafaf9;

  /* Brass. The one warm note, used on rules, markers and small emphasis only.
     Never a large field, which is what keeps it looking like metal leaf on a
     printed page rather than a highlighter. */
  --brass-700: #7d5716;
  --brass-600: #9a6c1c;
  --brass-500: #c08b2c;
  --brass-400: #d9a94e;
  --brass-200: #ecd7a4;
  --brass-100: #f6ecd4;

  /* Ink, deeper than a neutral grey so headlines carry weight */
  --ink: #080d11;
  --ink-2: #414e58;
  --ink-3: #5a6771;

  --paper: #ffffff;
  --card: #ffffff;
  --card-sunk: #eafaf9;
  --edge: #e2e7eb;
  --edge-strong: #c7d0d7;

  /* Semantic. These carry meaning and are never decorative. */
  --flag: #9d2a20;
  --flag-soft: #fbeae8;
  --flag-edge: #e6c1bc;

  --safe: #1c6a4f;
  --safe-soft: #e3f0ea;
  --safe-edge: #b0d6c4;

  --warn: #7d5716;
  --warn-soft: #f6ecd4;
  --warn-edge: #e3cd97;

  --info: var(--blue-700);
  --info-soft: var(--blue-050);

  /* Kept so inline styles in templates keep resolving. */
  --mark: var(--brass-500);

  /* Inter, bold-to-black, for headers and display numerals -- it's the same
     geometric sans the logo wordmark is set in. Plus Jakarta Sans for
     everything meant to be read at length, so the two pair as one sans
     family rather than a serif/sans mix. */
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --stack: clamp(3.25rem, 7vw, 6rem);
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;

  --shadow-card: 0 1px 2px rgba(14, 26, 33, 0.04), 0 18px 40px -18px rgba(14, 26, 33, 0.20);
  --shadow-soft: 0 1px 2px rgba(14, 26, 33, 0.04), 0 8px 20px -10px rgba(14, 26, 33, 0.14);
  --shadow-btn: 0 1px 2px rgba(14, 26, 33, 0.10), 0 12px 22px -12px rgba(24, 94, 92, 0.7);
  --shadow-glow: 0 0 0 1px rgba(32, 129, 126, 0.06), 0 4px 16px -4px rgba(32, 129, 126, 0.18);
  --shadow-elevated: 0 2px 4px rgba(14, 26, 33, 0.04), 0 24px 50px -16px rgba(14, 26, 33, 0.28);
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");

  /* Two curves cover every transition on the site: ease-out for anything
     entering or responding to input, ease-in-out for anything moving while
     already on screen. Both are deliberately stronger than the CSS built-ins,
     which read as sluggish at UI speeds. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease: var(--ease-out);
}

/* Reader control: a real text-size switch, not a browser-zoom hint. */
html { font-size: 112.5%; }
html.text-large { font-size: 131.25%; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The header is sticky, so anything an in-page link jumps to has to stop
   clear of it rather than landing underneath. */
:target, section[id], [id].band, #main { scroll-margin-top: 6.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Native cross-page transition, Chrome-family only and fully optional: every
   other browser just navigates as normal, so this is pure upside. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 0.18em;
}

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

/* --- headings ----------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3rem); letter-spacing: -0.035em; line-height: 1.06; }
h3 { font-size: clamp(1.25rem, 1.08rem + 0.85vw, 1.65rem); letter-spacing: -0.02em; }
h4 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-700); text-decoration-thickness: 1.5px; text-decoration-color: var(--blue-200); }
a:hover { text-decoration-color: var(--blue-600); }

strong, b { font-weight: 700; color: var(--ink); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  padding: 0.08em 0.36em;
  border-radius: 5px;
  color: var(--blue-800);
}

hr { border: 0; border-top: 1px solid var(--edge); margin: 2.5rem 0; }

/* --- focus, always visible ---------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -5rem;
  z-index: 100;
  background: var(--blue-700);
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 0; }

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

/* --- layout ------------------------------------------------------------- */

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 780px; }
.measure { max-width: 62ch; }
.measure-tight { max-width: 50ch; }
.measure-wide { max-width: 78ch; }

.band { padding-block: var(--stack); }
.band-card {
  background: var(--paper);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.band-ink {
  background:
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(32, 129, 126, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(47, 188, 183, 0.08) 0%, transparent 50%),
    linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: #c7e7e6;
  position: relative;
}
.band-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.25;
  pointer-events: none;
}
.band-ink h1, .band-ink h2, .band-ink h3 { color: #fff; position: relative; z-index: 1; }
.band-ink a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.45); position: relative; z-index: 1; }
.band-ink strong { color: #fff; }
.band-ink > .wrap { position: relative; z-index: 1; }

.stack > * + * { margin-top: 1.15rem; }
.stack-lg > * + * { margin-top: 2rem; }

.split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); }
}

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.eyebrow {
  position: relative;
  padding-top: 1.15rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* blue-700 rather than blue-600: at 14px this has to clear 4.5:1 on the
     tinted band as well as on white. */
  color: var(--blue-700);
  margin: 0 0 1rem;
  display: block;
}
.eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-500), var(--brass-400));
  border-radius: 2px;
}
.band-ink .eyebrow { color: var(--brass-200); }
.band-ink .eyebrow::before { background: var(--brass-400); }

.lead { font-size: 1.16rem; line-height: 1.6; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.small { font-size: 0.9rem; }

/* --- site header -------------------------------------------------------- */

/* The trust line moved into the hero, where people actually read it, so the
   header is now a single uncluttered bar. */
.utilitybar { display: none; }
.utilitybar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.7rem;
  padding-block: 0.3rem;
}
.utilitybar p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-200);
}
@media (max-width: 34rem) {
  .utilitybar p { display: none; }
  .utilitybar-inner { justify-content: flex-end; }
}

.textsize {
  border: 1px solid var(--edge-strong);
  background: #fff;
  color: var(--ink-2);
  border-radius: var(--pill);
  padding: 0.32rem 0.7rem;
  font: 600 0.78rem/1.2 var(--body);
  cursor: pointer;
  white-space: nowrap;
  min-height: 2rem;
}
.textsize { transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background 0.15s var(--ease-out), transform 0.12s var(--ease-out); }
.textsize:hover { border-color: var(--ink); color: var(--ink); }
.textsize:active { transform: scale(0.96); }
.textsize[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.8) blur(16px) saturate(1.2);
  -webkit-backdrop-filter: saturate(1.8) blur(16px) saturate(1.2);
  border: 1px solid transparent;
  border-bottom-color: var(--edge);
  border-radius: 0;
  margin-inline: 0;
  transition:
    box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
    background 0.3s var(--ease-out), margin-inline 0.3s var(--ease-out),
    top 0.3s var(--ease-out), border-radius 0.3s var(--ease-out);
}
/* Once the page has moved, the bar lifts off the top edge into a floating
   capsule rather than staying flush. Flat at rest, so the very first thing a
   visitor sees is not already mid-transition. */
.masthead.is-stuck {
  top: 0.75rem;
  margin-inline: clamp(0.75rem, 2.5vw, 1.75rem);
  border-color: var(--edge);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(8, 13, 17, 0.04), 0 20px 44px -18px rgba(8, 13, 17, 0.32);
}
@media (max-width: 30rem) {
  /* A pill nav on a narrow phone eats too much of the little width there is;
     it stays a flush bar there and just picks up the shadow. */
  .masthead.is-stuck { top: 0; margin-inline: 0; border-radius: 0; }
}
@supports not (backdrop-filter: blur(1px)) {
  .masthead { background: #fff; }
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.7rem;
  flex-wrap: nowrap;
  transition: min-height 0.25s var(--ease-out);
}
.masthead.is-stuck .masthead-inner { min-height: 4.15rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-right: auto;
  padding-block: 0.5rem;
  white-space: nowrap;
}
/* The logo is a wide wordmark badge, not a square icon, so only the height
   is fixed and width follows its own aspect ratio. */
.brand-mark { height: 2.2rem; width: auto; flex: none; }
.brand small {
  display: block;
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
  line-height: 1.25;
  margin-top: 0.3rem;
  white-space: normal;
}

.nav { display: flex; align-items: center; gap: 0.1rem; flex-wrap: nowrap; }
.nav a {
  display: inline-block;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}
.nav a:hover { color: var(--blue-700); background: var(--blue-050); }
.nav a[aria-current="page"] { color: var(--blue-700); background: var(--blue-050); }

.nav-tools { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.nav-cta { min-height: 2.7rem; white-space: nowrap; padding-inline: 1.05rem; font-size: 0.85rem; }

/* Menu for narrow screens: <details>, so it works with JavaScript switched off. */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--edge-strong);
  border-radius: var(--pill);
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.menu-panel {
  position: absolute;
  right: 0;
  left: auto;
  width: min(20rem, calc(100vw - 2 * var(--gutter)));
  z-index: 40;
  margin-top: 0.65rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px rgba(14, 26, 33, 0.04), 0 24px 50px -16px rgba(14, 26, 33, 0.3);
  padding: 0.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: menuSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes menuSlideIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-panel a {
  display: block;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.menu-panel a + a { border-top: 1px solid var(--edge); }
.menu-panel a:hover { background: var(--blue-050); color: var(--blue-700); transform: translateX(4px); }

@media (max-width: 84rem) and (min-width: 78.01rem) {
  .masthead .brand small { display: none; }
}
.menu-textsize { display: none; }
@media (max-width: 78rem) {
  .masthead-inner { min-height: 4.3rem; }
  .nav { display: none; }
  .menu { display: block; }
  /* Below the nav breakpoint the reader control lives inside the menu panel,
     so the bar itself stays down to a wordmark and one button. */
  .masthead .nav-tools > .textsize { display: none; }
  .menu-panel .menu-textsize { display: block; width: 100%; margin-top: 0.5rem; }
  /* A long wordmark has to be allowed to wrap once the nav collapses,
     otherwise it pushes the menu button off the edge. */
  .masthead .brand { font-size: 1.2rem; white-space: normal; min-width: 0; }
}
@media (max-width: 48rem) {
  /* The menu panel already carries "Book a session", and twice is clutter.
     Scoped to beat the .btn display rule further down the file. */
  .masthead .nav-tools .nav-cta { display: none; }
}
@media (max-width: 30rem) {
  .masthead .brand { font-size: 1.05rem; }
  .brand small { display: none; }
  .brand-mark { height: 1.9rem; width: auto; }
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.1rem;
  padding: 0.8rem 1.7rem;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  background: var(--blue-700);
  color: #fff;
  font: 700 1rem/1.25 var(--body);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-btn);
  transition: transform 0.14s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.16s var(--ease-out), color 0.15s ease;
  position: relative;
}
.btn:hover {
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 1px 2px rgba(18, 24, 28, 0.1), 0 18px 32px -12px rgba(31, 92, 128, 0.7);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(0.97); background: var(--blue-800); }

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--edge-strong);
  box-shadow: var(--shadow-soft);
}
.btn-secondary:hover { background: #fff; color: var(--blue-700); border-color: var(--blue-500); box-shadow: var(--shadow-soft); }

.btn-mark { background: var(--blue-100); border-color: var(--blue-200); color: var(--blue-800); box-shadow: none; }
.btn-mark:hover { background: var(--blue-200); color: var(--blue-900); }

.btn-danger { background: var(--flag); box-shadow: 0 1px 2px rgba(18, 24, 28, 0.08), 0 10px 20px -10px rgba(163, 42, 34, 0.6); }
.btn-danger:hover { background: #83201a; }

.btn-small { min-height: 2.5rem; padding: 0.4rem 1.05rem; font-size: 0.9rem; }
.btn-block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--edge); border-color: var(--edge); color: var(--ink-3);
  cursor: not-allowed; pointer-events: none; box-shadow: none;
}

.band-ink .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); box-shadow: none; }
.band-ink .btn-secondary:hover { background: #fff; color: var(--blue-900); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.link-plain { text-decoration: none; color: inherit; }
.link-arrow {
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  color: var(--blue-700);
  transition: color 0.15s ease;
}
.link-arrow::after { content: "\2192"; transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow:hover { color: var(--blue-600); text-decoration: underline; text-decoration-thickness: 1.5px; }

/* --- hero --------------------------------------------------------------- */

/* The homepage opens on an actual room from an actual session: a real photo
   panel, not a graphic and not a photo dissolved into a gradient behind
   text. Mobile gets the photo first (it's first in the DOM, and the default
   flex direction is column), so it is the literal first thing on the page.
   Desktop puts it beside the text via row-reverse, so the photo still leads
   the eye without needing to come before the headline in reading order. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--head-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 62rem) {
  .hero { flex-direction: row-reverse; }
}

.hero-photo-panel {
  flex: 0 0 auto;
  height: 34vh;
  min-height: 12rem;
  overflow: hidden;
  position: relative;
}
.hero-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  display: block;
  /* The room was genuinely lit like this -- dim, fluorescent, one bright
     screen -- so this lifts shadows enough to read the room clearly
     without editing what was actually there. */
  filter: brightness(1.14) contrast(1.05) saturate(1.04);
}
/* Softens the seam where the photo meets the text panel, so it reads as
   one continuous surface instead of two rectangles pushed together. On
   mobile the seam is horizontal (photo sits above the text); on desktop
   it's vertical (photo sits beside it), so the gradient direction flips
   with the layout. */
.hero-photo-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18%;
  background: linear-gradient(to top, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
@media (min-width: 62rem) {
  .hero-photo-panel { flex: 0 0 56%; height: auto; min-height: 0; }
  .hero-photo-panel::after {
    inset: 0 auto 0 0;
    width: 18%;
    height: auto;
    background: linear-gradient(to right, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
  }
}

.hero-text-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--paper);
  padding-block: clamp(1.5rem, 4.5vh, 3rem);
}
.hero-text-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.4;
  pointer-events: none;
}
.hero-text-panel > .wrap { position: relative; width: 100%; }

.hero h1 {
  margin-bottom: min(0.6rem, 1.2vh);
  font-size: min(clamp(2rem, 1.2rem + 3vw, 3.4rem), 6.4vh);
  line-height: 1.04;
}
.hero-sub {
  font-size: min(clamp(1.02rem, 0.95rem + 0.45vw, 1.26rem), 2.3vh);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 40ch;
}
.hero-actions { margin-top: min(1.6rem, 3vh); }
.hero .trustline { margin-top: min(1.6rem, 3vh); padding-top: min(1.2rem, 2.3vh); gap: 0.5rem 1.5rem; }
.hero-reassure { margin-top: 1.4rem; font-size: 0.95rem; color: var(--ink-3); max-width: 46ch; }

/* Below the split point the photo panel and the text panel are both
   competing for the same one-screen budget, so everything tightens up a
   notch -- the photo still reads as a real, substantial photo, not a
   strip, and the full call-to-action row still clears the fold. */
@media (max-width: 61.99rem) {
  .hero-photo-panel { height: 30vh; min-height: 10.5rem; }
  .hero-text-panel { padding-block: clamp(1rem, 2.8vh, 1.75rem); }
  .hero h1 { font-size: min(clamp(1.8rem, 1.1rem + 3vw, 3rem), 5vh); margin-bottom: min(0.5rem, 1vh); }
  .hero-sub { font-size: min(clamp(0.98rem, 0.9rem + 0.4vw, 1.15rem), 1.9vh); }
  .hero-actions { margin-top: min(1.1rem, 2vh); }
  .hero .trustline { margin-top: min(1rem, 1.8vh); padding-top: min(0.85rem, 1.5vh); gap: 0.4rem 1.25rem; }
}
/* Shorter phones (SE-class and similar) can't fit the trustline row without
   shrinking text below the site's legibility floor -- the trustline is the
   most dispensable element here since "always free" and "no account" are
   both repeated elsewhere on the page, so it's what gives. */
@media (max-width: 61.99rem) and (max-height: 50rem) {
  .hero-photo-panel { height: 26vh; min-height: 9rem; }
  .hero-text-panel { padding-block: clamp(0.85rem, 2vh, 1.4rem); }
  .hero .trustline { display: none; }
}

/* Left-aligned to the same gutter the headline and buttons start at, not
   centered on the panel -- that keeps it anchored to the text column it
   belongs to no matter how wide the photo gets, so it can't end up
   crowding the photo's edge. */
.hero-text-panel .scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 1.5rem;
}
@media (max-width: 61.99rem), (max-height: 46rem) {
  .hero-text-panel .scroll-cue { display: none; }
}
@media (max-height: 39rem) {
  .hero { min-height: 0; }
}

/* --- stat figures ------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
.figure {
  padding: 1.5rem 1.35rem;
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
  margin: -1px 0 0 -1px;
  transition: background 0.2s ease;
}
.figure:hover { background: var(--blue-050); }
.figure-n {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 2rem + 3.2vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  display: block;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.figure-label { display: block; margin-top: 0.5rem; font-size: 0.95rem; color: var(--ink-2); line-height: 1.35; }
.figure-note { display: block; margin-top: 0.3rem; font-size: 0.83rem; color: var(--ink-3); }

.band-ink .figures { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.band-ink .figure { border-top-color: rgba(255, 255, 255, 0.16); border-left-color: rgba(255, 255, 255, 0.16); }
.band-ink .figure-n { color: #fff; }
.band-ink .figure-label { color: #c2e4e3; }
.band-ink .figure-note { color: #8ebebd; }

/* --- cards -------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-elevated); }
.card-sunk { background: var(--blue-050); border-color: var(--blue-100); box-shadow: none; }
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-link:hover { border-color: var(--blue-200); box-shadow: var(--shadow-elevated); transform: translateY(-3px); }
.card-link:active { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.card h3 { margin-bottom: 0.4rem; }

/* A card that opens on a real photo instead of an icon or a color field.
   The image bleeds to the card's own edges, then the usual padding comes
   back for whatever sits underneath it. */
.card-photo { padding: 0; overflow: hidden; }
.card-photo > img { width: 100%; margin: 0; }
.card-photo-body { padding: clamp(1.35rem, 3vw, 2rem); }
.card-photo-portrait > img { max-width: 14rem; margin-inline: auto; }
.card-photo-portrait .card-photo-body { text-align: center; }

/* Marks a spot that should hold a real photo once one exists. Built from
   the same tokens as everything else (dashed edge, card-sunk fill) so it
   reads as "not finished yet" without looking like a foreign placeholder
   graphic. Swap it for an <img> or a .card-photo when a photo is ready --
   see the HTML comment above each use for what that photo should show. */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 12rem;
  border: 2px dashed var(--edge-strong);
  border-radius: var(--radius-lg);
  background: var(--blue-050);
  color: var(--ink-3);
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 1.5rem;
}
.photo-placeholder-portrait { min-height: 16rem; max-width: 14rem; margin-inline: auto; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--pill);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  color: var(--blue-800);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.tag:hover { border-color: var(--blue-500); color: var(--blue-700); }
.tag-mark { background: var(--blue-100); border-color: var(--blue-200); color: var(--blue-900); }
.tag-flag { background: var(--flag-soft); border-color: var(--flag-edge); color: #7d2019; }
.tag-safe { background: var(--safe-soft); border-color: var(--safe-edge); color: #175540; }
.tag-info { background: var(--blue-050); border-color: var(--blue-100); color: var(--blue-800); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --- workshop rows ------------------------------------------------------ */

.event {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.event:hover { border-color: var(--blue-200); box-shadow: var(--shadow-elevated); }
@media (min-width: 46rem) {
  .event { grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: start; }
}
.event + .event { margin-top: 1rem; }

.datechip {
  border: 1px solid var(--brass-200);
  background: var(--brass-100);
  border-radius: var(--radius);
  text-align: center;
  padding: 0.7rem 0.5rem 0.8rem;
  min-width: 6.5rem;
  align-self: start;
  justify-self: start;
}
.datechip .m { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-700); }
.datechip .d { display: block; font-family: var(--serif); font-size: 2.6rem; font-weight: 400; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.datechip .t { display: block; font-size: 0.82rem; color: var(--ink-2); margin-top: 0.15rem; }

.event h3 { margin-bottom: 0.35rem; }
.event-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.93rem; color: var(--ink-3); margin: 0.6rem 0 0; }
.event-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
@media (min-width: 46rem) { .event-actions { min-width: 12rem; } }

.seats { font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--safe); }
.seats::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; flex: none; }
.seats.low { color: var(--warn); }
.seats.full { color: var(--flag); }

.meter { height: 0.5rem; background: var(--edge); border-radius: var(--pill); overflow: hidden; margin-top: 0.5rem; }
.meter > span { display: block; height: 100%; background: var(--blue-500); }
.meter.low > span { background: #c48a12; }
.meter.full > span { background: var(--flag); }

/* --- forms -------------------------------------------------------------- */

.form { max-width: 40rem; }
.field { margin-bottom: 1.5rem; }
.field > label, .fieldset > legend {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.hint { display: block; font-size: 0.9rem; color: var(--ink-3); margin: -0.1rem 0 0.55rem; line-height: 1.45; }

.input, select, textarea {
  width: 100%;
  font: 400 1rem/1.5 var(--body);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--edge-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  min-height: 3.1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
}
textarea { min-height: 8rem; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2320817e' d='M8 11L3 5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.9rem;
  padding-right: 2.6rem;
}
.input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
.input:focus, select:focus, textarea:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(38, 154, 150, 0.12);
  outline: none;
}
.input::placeholder, textarea::placeholder { color: #94a1ab; }

.field-error .input,
.field-error select,
.field-error textarea { border-color: var(--flag); background: #fffbfb; }

.err {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  margin-top: 0.45rem;
  color: #83201a;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}
.err::before {
  content: "!";
  flex: none;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--flag);
  color: #fff;
  font-family: var(--mono); font-size: 0.78rem;
  display: grid; place-items: center;
  margin-top: 0.12rem;
}

.fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.fieldset > legend { padding: 0; }

.choices { display: grid; gap: 0.65rem; margin-top: 0.6rem; }
@media (min-width: 34rem) { .choices-2 { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1.5px solid var(--edge-strong);
  border-radius: var(--radius);
  padding: 0.9rem 1.05rem;
  cursor: pointer;
  background: #fff;
  min-height: 3.4rem;
}
.choice:hover { border-color: var(--blue-400); }
.choice input { margin: 0.25rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--blue-600); flex: none; }
.choice:has(input:checked) { border-color: var(--blue-600); background: var(--blue-050); }
.choice-text { display: block; font-weight: 700; color: var(--ink); }
.choice-note { display: block; font-size: 0.88rem; color: var(--ink-3); font-weight: 400; margin-top: 0.15rem; }

.dates { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) { .dates { grid-template-columns: repeat(3, 1fr); } }

.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.required-note { font-size: 0.88rem; color: var(--ink-3); }

.req { color: var(--flag); font-weight: 700; }

/* --- notices ------------------------------------------------------------ */

.notice {
  border: 1px solid var(--edge);
  border-left: 4px solid var(--ink-3);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 1.05rem 1.2rem;
  margin-bottom: 1.5rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice-ok { border-color: var(--safe-edge); border-left-color: var(--safe); background: var(--safe-soft); }
.notice-warn { border-color: var(--warn-edge); border-left-color: #b07800; background: var(--warn-soft); }
.notice-error { border-color: var(--flag-edge); border-left-color: var(--flag); background: var(--flag-soft); }
.notice-info { border-color: var(--blue-100); border-left-color: var(--blue-600); background: var(--blue-050); }
.notice strong:first-child { display: block; margin-bottom: 0.2rem; color: var(--ink); }

/* --- flag lists --------------------------------------------------------- */
/* The marker is positioned rather than laid out as a grid item, so an item
   can hold any mix of links, badges and text. */

.flags { list-style: none; margin: 0; padding: 0; }
.flags li {
  position: relative;
  padding: 0.72rem 0 0.72rem 2.3rem;
  border-top: 1px solid var(--edge);
  line-height: 1.5;
}
.flags li:first-child { border-top: 0; }
.flags li::before {
  position: absolute;
  left: 0;
  top: 0.8rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.92rem;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  display: grid; place-items: center;
}
.flags-red li::before { content: "!"; background: var(--flag-soft); border: 1.5px solid var(--flag); color: var(--flag); }
.flags-green li::before { content: "\2713"; background: var(--safe-soft); border: 1.5px solid var(--safe); color: var(--safe); }

/* --- prose -------------------------------------------------------------- */

.prose { font-size: 1.06rem; line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.5rem; margin-top: 2.3rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.9rem; }
.prose h4 { font-size: 1.05rem; margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: 0.45rem; }
.prose blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--blue-400);
  color: var(--ink-2);
}
.prose a { font-weight: 600; }

/* --- quotes ------------------------------------------------------------- */

.quote {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-200), transparent);
  border-radius: 1px;
}
.quote:hover { border-color: var(--blue-200); box-shadow: var(--shadow-elevated); }
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote blockquote::before { content: "\201C"; color: var(--brass-500); }
.quote blockquote::after { content: "\201D"; color: var(--brass-500); }
.quote figcaption { margin-top: 0.95rem; font-size: 0.9rem; color: var(--ink-3); }
.quote figcaption::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; background: var(--brass-500); vertical-align: 0.3em; margin-right: 0.5rem; }

/* --- filter bar --------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.75rem; }
.filters form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.filters .input { width: auto; min-width: min(100%, 17rem); min-height: 2.9rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid var(--edge-strong);
  background: #fff;
  border-radius: var(--pill);
  padding: 0.45rem 1rem;
  font: 600 0.9rem/1.2 var(--body);
  color: var(--ink-2);
  text-decoration: none;
  min-height: 2.6rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.chip:hover { border-color: var(--blue-500); color: var(--blue-700); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(32, 129, 126, 0.1); }
.chip:active { transform: translateY(0) scale(0.97); }
.chip[aria-current="true"], .chip.is-on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: 0 2px 8px rgba(32, 129, 126, 0.2); }
.chip .n { font-family: var(--mono); font-size: 0.78rem; opacity: 0.8; }

/* --- tables ------------------------------------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.data th, table.data td { text-align: left; padding: 0.78rem 0.95rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
table.data th {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; background: var(--blue-050); white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--blue-050); }
table.data td.num { font-family: var(--mono); font-size: 0.86rem; white-space: nowrap; }

/* --- empty states ------------------------------------------------------- */

.empty {
  border: 1.5px dashed var(--edge-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--card);
}
.empty h2, .empty h3 { margin-bottom: 0.4rem; font-size: 1.22rem; }
.empty p { color: var(--ink-2); max-width: 48ch; }

/* --- footer ------------------------------------------------------------- */

.footer {
  background:
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(32, 129, 126, 0.15) 0%, transparent 50%),
    linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: #b4dad9;
  padding-block: clamp(2.75rem, 5vw, 4rem) 2rem;
  margin-top: var(--stack);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.3;
  pointer-events: none;
}
.footer > .wrap { position: relative; z-index: 1; }
.footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); transition: color 0.15s ease, text-decoration-color 0.15s ease; }
.footer a:hover { text-decoration-color: rgba(255, 255, 255, 0.8); }
.footer h2 { color: #fff; font-size: 1.1rem; margin-bottom: 0.8rem; letter-spacing: -0.01em; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { transition: transform 0.15s ease; }
.footer li:hover { transform: translateX(3px); }
.footer li + li { margin-top: 0.5rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}
.footer-warn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid var(--blue-400);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-top: 2rem;
  font-size: 0.93rem;
  color: #cae9e8;
  background: rgba(255, 255, 255, 0.04);
}
.footer-warn strong { color: #fff; }

/* --- disclosure (destructive actions, no browser dialogs) --------------- */

details.disclose { border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); }
details.disclose > summary {
  cursor: pointer;
  padding: 0.85rem 1.05rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 3rem;
  border-radius: var(--radius);
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::before { content: "\25B8"; color: var(--ink-3); transition: transform 0.15s ease; }
details.disclose[open] > summary::before { transform: rotate(90deg); }
details.disclose > summary:hover { background: var(--blue-050); }
details.disclose .disclose-body { padding: 1.1rem 1.05rem; border-top: 1px solid var(--edge); }
details.danger { border-color: var(--flag-edge); background: #fffcfc; }
details.danger > summary { color: #83201a; }
details.danger > summary:hover { background: var(--flag-soft); }

/* --- admin -------------------------------------------------------------- */

body.admin { background: #f6f9fb; }

.adminbar { background: linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%); color: #c2e4e3; }
.adminbar-top { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.adminbar-top-inner { display: flex; align-items: center; gap: 0.75rem; min-height: 3.7rem; flex-wrap: wrap; }
.adminbar-inner { display: flex; align-items: center; min-height: 3rem; }
.adminbar .brand { color: #fff; font-size: 1.15rem; margin-right: auto; padding-block: 0.4rem; }
.adminbar .brand small { color: #8ebebd; }
.adminbar nav { display: flex; flex-wrap: wrap; gap: 0.15rem; width: 100%; padding-block: 0.4rem; }
.adminbar nav a {
  color: #c2e4e3; text-decoration: none;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 0.5rem 0.7rem; border-radius: var(--pill); white-space: nowrap;
}
.adminbar nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.adminbar nav a[aria-current="page"] { background: #fff; color: var(--blue-900); }
.adminbar .who { font-size: 0.85rem; color: #8ebebd; }
.adminbar form { display: inline; margin: 0; }
.adminbar .signout {
  display: inline-block;
  background: none; border: 1.5px solid rgba(255, 255, 255, 0.3); color: #dcf1f0;
  border-radius: var(--pill);
  padding: 0.45rem 0.95rem; font: 600 0.86rem/1.3 var(--body); cursor: pointer; text-decoration: none;
}
.adminbar .signout:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.1); }

.admin-main { padding-block: 2.25rem 4rem; }
.admin-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.75rem; }
.admin-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.4rem); margin: 0; }
.admin-head .sub { color: var(--ink-3); margin: 0.35rem 0 0; }

.panel {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.15rem, 2.5vw, 1.7rem);
  box-shadow: var(--shadow-soft);
}
.panel + .panel { margin-top: 1.25rem; }
.panel > h2 { font-size: 1.2rem; margin-bottom: 0.9rem; }
.panel-head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.panel-head h2 { margin: 0; font-size: 1.2rem; }

.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.tile {
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem; text-decoration: none; color: inherit; display: block;
  box-shadow: var(--shadow-soft);
}
.tile:hover { border-color: var(--blue-300, var(--blue-200)); box-shadow: var(--shadow-card); }
.tile .n { font-family: var(--serif); font-size: 2.7rem; font-weight: 400; line-height: 1; letter-spacing: -0.01em; display: block; color: var(--ink); }
.tile .l { display: block; margin-top: 0.4rem; font-size: 0.92rem; color: var(--ink-2); }
.tile.alert { border-color: var(--warn-edge); background: var(--warn-soft); }
.tile.bad { border-color: var(--flag-edge); background: var(--flag-soft); }

.pill {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 0.24rem 0.6rem; border-radius: var(--pill);
  border: 1px solid var(--edge-strong); background: #fff; color: var(--ink-2); white-space: nowrap;
}
.pill-pending { background: var(--warn-soft); border-color: var(--warn-edge); color: #6d4700; }
.pill-confirmed, .pill-approved { background: var(--safe-soft); border-color: var(--safe-edge); color: #175540; }
.pill-declined, .pill-cancelled { background: var(--flag-soft); border-color: var(--flag-edge); color: #7d2019; }
.pill-waitlisted { background: var(--blue-050); border-color: var(--blue-200); color: var(--blue-800); }

.stack-form { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
@media (min-width: 44rem) { .row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-left: 2px solid var(--edge); padding: 0 0 1.1rem 1.1rem; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -0.42rem; top: 0.42rem;
  width: 0.72rem; height: 0.72rem; border-radius: 50%;
  background: var(--edge-strong); border: 2px solid var(--card);
}
.timeline li.kind-status::before { background: var(--safe); }
.timeline li.kind-email::before { background: var(--blue-500); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline .when { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); display: block; }
.timeline .who { font-size: 0.82rem; color: var(--ink-3); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.15rem; margin: 0; }
.kv dt { font-size: 0.85rem; color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); }
@media (max-width: 32rem) { .kv { grid-template-columns: 1fr; gap: 0.15rem 0; } .kv dd { margin-bottom: 0.7rem; } }

.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem;
  background: linear-gradient(160deg, var(--blue-700) 0%, var(--blue-900) 100%);
}
.login-card {
  width: 100%; max-width: 26rem; background: var(--card);
  border-radius: var(--radius-lg); padding: clamp(1.7rem, 4vw, 2.5rem);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}

/* --- page headers -------------------------------------------------------
   Interior pages used to be a headline floating in dead space. Every page now
   opens with the same shape: label, headline, one paragraph, an action row,
   and a panel on the right so no half of the screen is left empty. */

.pagehead {
  padding-block: clamp(2.75rem, 5.5vw, 4.25rem) clamp(2.75rem, 5.5vw, 4.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--edge);
  position: relative;
  overflow: hidden;
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.pagehead > .wrap { position: relative; z-index: 1; }
.pagehead-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 64rem) {
  .pagehead-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.pagehead h1 { margin-bottom: 0.75rem; }
.pagehead .lead { max-width: 44ch; }
.pagehead-actions { margin-top: 1.9rem; }
.pagehead-note { margin-top: 1.15rem; font-size: 0.92rem; color: var(--ink-3); max-width: 46ch; }

/* The header already supplies the breathing room above the next section. */
.pagehead + .band { padding-top: clamp(2.25rem, 4vw, 3.5rem); }

/* Headlines in a page header sit in a narrower column than the home hero, so
   they get their own ceiling rather than wrapping to five lines. */
.pagehead h1 { font-size: clamp(2.1rem, 1.25rem + 2.9vw, 3.2rem); }

/* The right-hand panel. Brass top edge, mono labels, hairline rows. */
.facts {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 3px solid var(--brass-500);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: clamp(1.3rem, 2.5vw, 1.75rem);
  box-shadow: 0 2px 4px rgba(14, 26, 33, 0.04), 0 20px 40px -16px rgba(14, 26, 33, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.facts h2 {
  font-size: 1.05rem;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin-bottom: 1rem;
}
.facts-list { list-style: none; margin: 0; padding: 0; }
.facts-list li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.72rem 0;
  border-top: 1px solid var(--edge);
}
.facts-list li:first-child { border-top: 0; padding-top: 0; }
.facts-list li:last-child { padding-bottom: 0; }
.facts-list dt, .facts-list .k { color: var(--ink-3); font-size: 0.93rem; }
.facts-list dd, .facts-list .v { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.facts-list .v-serif { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.facts-foot { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--edge); }

/* --- trust line ---------------------------------------------------------
   The three things a visitor most needs to know before they will fill in a
   form, sitting directly under the buttons rather than in a banner. */

.trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--edge);
}
.trustline span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trustline span::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  background-color: var(--safe);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l4 4 8-9' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l4 4 8-9' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- hard numbers -------------------------------------------------------
   A quieter, wider relative of .figures, for putting real counts high on a
   page instead of making people scroll to find out whether this is real. */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.metric {
  padding: 1.7rem 1.5rem 1.7rem 1.5rem;
  border-left: 1px solid var(--edge);
  transition: background 0.2s ease;
}
.metric:first-child { border-left: 0; }
.metric:hover { background: var(--blue-050); }
.metric-n {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.75rem + 2.4vw, 3.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--blue-700);
  font-variant-numeric: lining-nums tabular-nums;
}
.metric-l { display: block; margin-top: 0.55rem; font-size: 0.94rem; line-height: 1.35; color: var(--ink-2); }
.metric-s { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--ink-3); }
@media (max-width: 46rem) {
  .metric { border-left: 0; border-top: 1px solid var(--edge); }
  .metric:first-child { border-top: 0; }
}



/* --- numbered steps -----------------------------------------------------
   Numbered because this genuinely is a sequence: each step only makes sense
   after the one before it. */

.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 2.7rem;
  border-top: 3px solid var(--ink);
  transition: border-color 0.25s ease;
}
.step:hover { border-top-color: var(--blue-600); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--brass-700);
}
.step h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.step p { color: var(--ink-2); margin: 0; }
.step-note { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.band-ink .step { border-top-color: var(--brass-400); }
.band-ink .step::before { color: var(--brass-200); }
.band-ink .step p { color: #c3d5df; }
.band-ink .step-note { color: #9db3bf; }

/* --- section rule, borrowed from the reference and given a meaning ------
   The three segments are the three semantic colours the whole site runs on:
   what to watch for, who we are, what is dangerous. */

.band-rule { position: relative; }
.band-rule::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--brass-500) 0 34%,
    var(--blue-600) 34% 67%,
    var(--flag) 67% 100%
  );
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- scroll reveals -----------------------------------------------------
   The .reveal class is added by JavaScript, never by the templates, so with
   scripting blocked every element simply stays visible. Reduced motion gets
   no transform and no delay. */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.6s var(--ease-out),
      transform 0.6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   One screen per header

   Every page opens on a header that is exactly one screen tall: no more, so
   there is no dead space, and no less, so nothing is cut in half by the fold.

   Two things make that hold at any window size rather than only at the one it
   was designed on:

   1. 100svh, not 100vh. On a phone, vh is measured against the *largest*
      viewport, the one you only get after the browser chrome retracts, so a
      100vh block is taller than the screen the moment you land on it. svh is
      the small viewport, which is what the reader actually sees first.
   2. Type in the header is sized min(<normal size>, <share of the height>).
      On a tall window the normal size wins and nothing looks shrunken. On a
      short laptop the height-based value wins and the whole header quietly
      scales down to fit instead of pushing its last line under the fold.

   Below 39rem of height the rule is dropped entirely. At that point the screen
   is a landscape phone, and honestly filling it is worse than scrolling.
   ========================================================================== */

:root { --head-h: 4.75rem; }

/* The hero has its own self-contained sizing rules (see "hero" above) since
   it's a photo-plus-text split rather than a single grid like every other
   header on the site. Everything below this point is .pagehead only. */
.pagehead {
  min-height: calc(100svh - var(--head-h));
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: clamp(1.25rem, 4.5vh, 3.25rem);
}
.pagehead > .wrap { align-self: center; width: 100%; }
.pagehead-grid { align-items: center; }

/* Interior pages: the intro text and the aside sharing one screen. */
.pagehead h1 {
  font-size: min(clamp(1.95rem, 1.2rem + 2.8vw, 3.2rem), 6.3vh);
  line-height: 1.04;
  margin-bottom: min(0.65rem, 1.3vh);
}
.pagehead .lead { font-size: min(1.2rem, 2.3vh); line-height: 1.5; margin-bottom: min(1rem, 2vh); }
.pagehead-actions { margin-top: min(1.7rem, 3.2vh); }
.pagehead-note { margin-top: min(1.05rem, 2vh); font-size: min(0.92rem, 1.9vh); }
.pagehead .facts { align-self: center; }

/* Stacked layout. One screen means the words, and the card that illustrates
   them is what you get for scrolling: cramming both into a phone screen would
   shrink the type past the point an older reader can use it. */
@media (max-width: 61.99rem) {
  .pagehead { min-height: 0; padding-block: 0; }
  .pagehead-grid { gap: 0; }
  .pagehead-grid > *:first-child {
    min-height: calc(100svh - var(--head-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(1.15rem, 3.5vh, 2.5rem);
  }
  .pagehead .facts { margin-bottom: clamp(2rem, 6vh, 3.5rem); }
}

/* Landscape phones and other very short windows opt out. */
@media (max-height: 39rem) {
  .pagehead,
  .pagehead-grid > *:first-child { min-height: 0; }
}

/* A quiet cue that there is more below, so a full-height header never reads as
   the end of the page. It is decorative and hidden from screen readers. */

/* Zero-height marker at the foot of the header. It exists only so the cue has
   somewhere to jump to that is one screen down, whatever that screen is. */
.anchor-stop { display: block; height: 0; scroll-margin-top: var(--head-h); }

.scroll-cue {
  justify-self: center;
  align-self: end;
  margin-top: clamp(1.25rem, 3.5vh, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.scroll-cue:hover { color: var(--blue-700); }
.scroll-cue .chev {
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--edge-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue .chev { animation: nudge 2.4s var(--ease) infinite; }
  @keyframes nudge {
    0%, 62%, 100% { transform: translateY(0); }
    76% { transform: translateY(4px); }
  }
}
@media (max-width: 61.99rem), (max-height: 46rem) {
  .scroll-cue { display: none; }
}

/* A soft inner highlight on the tinted card variant, and a matching ring
   behind the flag-list icons. Small, but they're the only two spots on the
   page where a shadow is doing real work rather than just sitting there. */
.card-sunk { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(14, 26, 33, 0.04); }
.flags-green li::before { box-shadow: 0 0 0 3px rgba(28, 106, 79, 0.1); }
.flags-red li::before { box-shadow: 0 0 0 3px rgba(157, 42, 32, 0.1); }

/* The seat meter's fill animates when the count changes. */
.meter > span { transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* The scroll cue is a real link; it gets a hover ring like anything else
   clickable. */
.scroll-cue:hover .chev { box-shadow: 0 0 0 4px rgba(32, 129, 126, 0.08); }

/* A form error shakes once, briefly, so it isn't missed. */
.field-error .err::before { animation: shake 0.3s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Print styles */
@media print {
  .masthead, .utilitybar, .footer, .adminbar, .skip, .no-print, .filters { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .band, .admin-main { padding-block: 0; }
  .card, .panel, .figures, .event { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}