@charset "utf-8";

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

   Blue, white and warm cream. Clean white surfaces, generous rounding, soft
   diffuse shadows, fully rounded controls. Structural labels are set in
   uppercase monospace with wide tracking, which is where the page gets its
   character; everything else stays quiet.

   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 {
  /* Blue is the client's, and stays the spine of the site. */
  --blue-900: #0d2b3c;
  --blue-800: #14455f;
  --blue-700: #1c5a7c;
  --blue-600: #2c7ba5;
  --blue-500: #3e93be;
  --blue-400: #6bb2d6;
  --blue-200: #b9ddef;
  --blue-100: #dceef8;
  --blue-050: #eff8fc;

  /* 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;

  /* Paper stock */
  --cream: #f2ece1;
  --cream-2: #f9f5ec;

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

  --paper: #ffffff;
  --card: #ffffff;
  --card-sunk: #eff8fc;
  --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);

  /* Type. The serif appears only on numerals and quotes, which is what makes
     it read as an accent rather than a second voice. */
  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --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(28, 90, 124, 0.7);
  --shadow-glow: 0 0 0 1px rgba(44, 123, 165, 0.06), 0 4px 16px -4px rgba(44, 123, 165, 0.18);
  --shadow-elevated: 0 2px 4px rgba(14, 26, 33, 0.04), 0 24px 50px -16px rgba(14, 26, 33, 0.28);
  --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 50%, var(--blue-800) 100%);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 10% 20%, var(--blue-100) 0%, transparent 50%),
                   radial-gradient(ellipse 60% 50% at 85% 70%, rgba(185, 221, 239, 0.3) 0%, transparent 50%);
  --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")

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 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;
  }
}

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(--cream);
  border-top: 1px solid #e5dcc9;
  border-bottom: 1px solid #e5dcc9;
}
.band-ink {
  background:
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(44, 123, 165, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(107, 178, 214, 0.08) 0%, transparent 50%),
    linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: #d3e3ec;
  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
     cream 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:hover { border-color: var(--ink); color: var(--ink); }
.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-bottom: 1px solid var(--edge);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
/* A shadow only once the page has moved, so the bar is flat at rest. */
.masthead.is-stuck {
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(8, 13, 17, 0.06), 0 12px 40px -16px rgba(8, 13, 17, 0.35);
}
@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;
}

.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;
}
.brand-mark { width: 2.4rem; height: 2.4rem; flex: none; }
/* Joining words drop back so the meaningful words carry the wordmark. */
.brand .link-word { color: var(--blue-600); font-weight: 600; }
.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.05rem;
  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 { width: 2rem; height: 2rem; }
}

/* --- 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: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 40%, var(--blue-700) 100%);
  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.12s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.15s ease;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
  border-radius: inherit;
}
.btn:hover {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 40%, var(--blue-700) 100%);
  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(0px); }

.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; }

/* --- the signature: a scam message with the giveaways marked ------------ */

.tell {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 3px solid var(--brass-500);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 2px 4px rgba(14, 26, 33, 0.04), 0 24px 50px -16px rgba(14, 26, 33, 0.22);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.tell-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tell-head .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--flag); flex: none; }

.tell-body { padding: 1.5rem 1.4rem 1.2rem; }

.tell-from {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-3);
  margin: 0 0 0.8rem;
}
.tell-message {
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: 6px 18px 18px 18px;
  padding: 1.1rem 1.2rem;
  margin: 0;
}

mark.hl {
  background-color: transparent;
  background-image: linear-gradient(var(--blue-100), var(--blue-100));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  color: inherit;
  padding: 0.1em 0.16em;
  box-shadow: inset 0 -0.62em 0 -0.06em rgba(99, 175, 213, 0.42);
  border-radius: 3px;
  font-weight: 700;
}
mark.hl sup {
  font-family: var(--mono);
  font-size: 0.6em;
  font-weight: 600;
  color: var(--blue-700);
  margin-left: 0.15em;
  vertical-align: super;
}

@media (prefers-reduced-motion: no-preference) {
  .tell-message mark.hl { animation: swipe 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .tell-message mark.hl:nth-of-type(1) { animation-delay: 0.35s; }
  .tell-message mark.hl:nth-of-type(2) { animation-delay: 0.75s; }
  .tell-message mark.hl:nth-of-type(3) { animation-delay: 1.15s; }
  @keyframes swipe {
    from { background-size: 0% 100%; box-shadow: inset 0 -0.62em 0 -0.06em rgba(99, 175, 213, 0); }
    to   { background-size: 100% 100%; box-shadow: inset 0 -0.62em 0 -0.06em rgba(99, 175, 213, 0.42); }
  }
}

.tell-notes { list-style: none; margin: 1.25rem 0 0; padding: 0; counter-reset: tell; }
.tell-notes li {
  position: relative;
  padding: 0.65rem 0 0.65rem 2.5rem;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-2);
  border-top: 1px solid var(--edge);
}
.tell-notes li::before {
  counter-increment: tell;
  content: counter(tell);
  position: absolute;
  left: 0;
  top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
  background: var(--blue-600);
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  display: grid; place-items: center;
}
.tell-foot {
  margin: 0;
  padding: 1.05rem 1.4rem;
  background: var(--blue-050);
  border-top: 1px solid var(--blue-100);
  color: var(--ink-2);
  font-size: 0.95rem;
}
.tell-foot strong { color: var(--blue-800); }

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

.hero {
  padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, var(--blue-100) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(185, 221, 239, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 10%, rgba(246, 236, 212, 0.15) 0%, transparent 50%),
    var(--paper);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.hero h1 { margin-bottom: 0.7rem; font-size: clamp(2.4rem, 1.45rem + 3.3vw, 3.6rem); }
.hero-sub { font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem); line-height: 1.55; color: var(--ink-2); max-width: 36ch; }
.hero-actions { margin-top: 2rem; }
.hero-reassure { margin-top: 1.4rem; font-size: 0.95rem; color: var(--ink-3); max-width: 46ch; }

/* --- 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;
}
.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: #cfe0ea; }
.band-ink .figure-note { color: #9fb9c8; }

/* --- 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; }

.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(--cream); border-color: #e2d9cb; color: #6b5a41; }
.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='%232c7ba5' 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(62, 147, 190, 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(44, 123, 165, 0.1); }
.chip[aria-current="true"], .chip.is-on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: 0 2px 8px rgba(44, 123, 165, 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(44, 123, 165, 0.15) 0%, transparent 50%),
    linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: #c2d6e1;
  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: #d6e5ee;
  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: #cfe0ea; }
.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: #9fb9c8; }
.adminbar .brand .link-word { color: var(--blue-400); }
.adminbar nav { display: flex; flex-wrap: wrap; gap: 0.15rem; width: 100%; padding-block: 0.4rem; }
.adminbar nav a {
  color: #cfe0ea; 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: #9fb9c8; }
.adminbar form { display: inline; margin: 0; }
.adminbar .signout {
  display: inline-block;
  background: none; border: 1.5px solid rgba(255, 255, 255, 0.3); color: #e4eef4;
  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:
    radial-gradient(ellipse 80% 60% at 10% 20%, var(--blue-100) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(185, 221, 239, 0.2) 0%, transparent 50%),
    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.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--safe);
  flex: none;
  box-shadow: 0 0 0 3px rgba(28, 106, 79, 0.12);
}

/* --- 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);
}
.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(24px); }
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
}
@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; }

.hero,
.pagehead {
  min-height: calc(100svh - var(--head-h));
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: clamp(1.25rem, 4.5vh, 3.25rem);
}
.hero > .wrap,
.pagehead > .wrap { align-self: center; width: 100%; }
.hero-grid, .pagehead-grid { align-items: center; }

/* The headline gets the largest share of the height, because it is the thing
   a first-time visitor reads. */
.hero h1 {
  font-size: min(clamp(2rem, 1.1rem + 3.1vw, 3.45rem), 6.6vh);
  line-height: 1.02;
  margin-bottom: min(0.6rem, 1.2vh);
}
.hero-sub {
  font-size: min(clamp(1.02rem, 0.95rem + 0.45vw, 1.26rem), 2.3vh);
  line-height: 1.5;
  max-width: 34ch;
}
.hero-actions { margin-top: min(1.6rem, 3.1vh); }
.hero .trustline { margin-top: min(1.7rem, 3.2vh); padding-top: min(1.3rem, 2.5vh); gap: 0.6rem 1.5rem; }

/* A slightly wider text column keeps the two hero buttons on one row, which
   saves a whole line of height at laptop widths. */
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
}

/* The marked-up message scales with the window too, so the card never becomes
   the reason the header overflows. */
.hero-tell { margin: 0; align-self: center; }
.hero-tell .tell-head { padding-block: min(0.9rem, 1.7vh); }
.hero-tell .tell-body { padding: min(1.35rem, 2.6vh) 1.3rem min(1rem, 2vh); }
.hero-tell .tell-from { font-size: min(0.8rem, 1.65vh); margin-bottom: min(0.75rem, 1.5vh); }
.hero-tell .tell-message {
  font-size: min(1.02rem, 2.05vh);
  line-height: 1.65;
  padding: min(1rem, 2vh) 1.1rem;
}
.hero-tell .tell-notes { margin-top: min(1.1rem, 2.2vh); }
.hero-tell .tell-notes li {
  padding-block: min(0.6rem, 1.2vh);
  font-size: min(0.95rem, 1.9vh);
  line-height: 1.5;
}
.hero-tell .tell-notes li::before { top: min(0.65rem, 1.3vh); }
.hero-tell .tell-foot { padding: min(1rem, 2vh) 1.3rem; font-size: min(0.93rem, 1.9vh); }

/* Interior pages: the same idea, with 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) {
  .hero, .pagehead { min-height: 0; padding-block: 0; }
  .hero-grid, .pagehead-grid { gap: 0; }
  .hero-intro,
  .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);
  }
  .hero .trustline { margin-top: min(1.35rem, 2.6vh); padding-top: min(1.1rem, 2.1vh); gap: 0.45rem 1.25rem; }
  .hero-tell, .pagehead .facts { margin-bottom: clamp(2rem, 6vh, 3.5rem); }
}

/* Landscape phones and other very short windows opt out. */
@media (max-height: 39rem) {
  .hero, .pagehead,
  .hero-intro, .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. */
/* --- the three giveaways, unpacked below the fold -----------------------
   These used to sit inside the hero card, which made the card taller than the
   screen it had to fit inside. They read better with room anyway. */

.tells {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tells;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.tells li {
  position: relative;
  background: var(--card);
  border: 1px solid var(--edge);
  border-top: 3px solid var(--brass-500);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-soft);
}
.tells li::before {
  counter-increment: tells;
  content: counter(tells);
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.tells h3 { margin: 0 0 0.5rem; font-size: 1.12rem; }
.tells p { margin: 0; color: var(--ink-2); }
.tells strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.tell-foot .link-arrow { margin-left: 0.35rem; white-space: nowrap; }

/* 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; }
}

/* ==========================================================================
   Modern polish — enhancements that layer on top of the existing system
   ========================================================================== */

/* Smooth hover lift for all interactive cards and panels */
.card, .panel, .event, .quote, .tile, .facts {
  position: relative;
}

/* Band section separators with subtle top glow */
.band-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 123, 165, 0.08), transparent);
}
.band-card { position: relative; }

/* Refined eyebrow animation on scroll */
.eyebrow {
  transition: opacity 0.3s ease;
}

/* Grid items get staggered reveal effect */
.grid > * {
  transition: transform 0.2s ease;
}
.grid > *:hover {
  transform: translateY(-1px);
}

/* Modern focus ring for accessibility */
:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset 0.15s ease;
}
:focus-visible:active {
  outline-offset: 1px;
}

/* Button secondary refined hover */
.btn-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--edge-strong);
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover {
  background: #fff;
  color: var(--blue-700);
  border-color: var(--blue-400);
  box-shadow: 0 2px 4px rgba(14, 26, 33, 0.04), 0 12px 24px -10px rgba(44, 123, 165, 0.15);
  transform: translateY(-1px);
}

/* Refined card-sunk with subtle inner glow */
.card-sunk {
  background: var(--blue-050);
  border-color: var(--blue-100);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(14, 26, 33, 0.04);
}

/* Modern list items in flags */
.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);
}

/* Band-card subtle texture */
.band-card {
  position: relative;
}

/* Refined datechip */
.datechip {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.datechip:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(125, 87, 22, 0.12);
}

/* Refined meter bars */
.meter > span {
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Modern link-plain hover */
.link-plain {
  transition: color 0.15s ease;
}

/* Enhanced select dropdown */
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
}
select:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(62, 147, 190, 0.12);
  outline: none;
}

/* Refined progress indicator for seats */
.seats {
  transition: color 0.15s ease;
}
.seats::before {
  transition: transform 0.15s ease;
}
.seats:hover::before {
  transform: scale(1.2);
}

/* Modern empty state */
.empty {
  border: 1.5px dashed var(--edge-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--card);
  transition: border-color 0.2s ease;
}
.empty:hover {
  border-color: var(--blue-300, var(--blue-200));
}

/* Refined adminbar glass effect */
.adminbar {
  position: relative;
}
.adminbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Modern login card */
.login-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.5);
}

/* Page transitions for section bands */
.band {
  position: relative;
}

/* Enhanced scroll cue */
.scroll-cue .chev {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.scroll-cue:hover .chev {
  box-shadow: 0 0 0 4px rgba(44, 123, 165, 0.08);
}

/* Refined error messages */
.err::before {
  transition: transform 0.15s ease;
}
.field-error .err::before {
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Modern table hover */
table.data tbody tr {
  transition: background 0.15s ease;
}

/* Enhanced panel transitions */
.panel {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.panel:hover {
  box-shadow: var(--shadow-elevated);
}

/* Brand wordmark glow on hover */
.brand:hover .brand-mark {
  filter: drop-shadow(0 0 6px rgba(62, 147, 190, 0.3));
  transition: filter 0.2s ease;
}

/* 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, .tell, .figures, .event { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  mark.hl { box-shadow: none; background: #dceef8; }
}