/* ==========================================================================
   Sports Injury Ledger - sportsinjuryledger.com
   A training-log publication for athletes in the St. Louis metro.

   Concept:    A ledger. Every setback gets an entry. Every entry gets a date.
   Type:       Saira Condensed (display, the stadium scoreboard voice)
               Petrona (reading prose, the bound-book voice)
               JetBrains Mono (numbers, dates, register labels, the ledger column)
   Palette:    infield green ink (#14211a) on cool chalk paper (#eef1ea),
               lane red (#b8271f) as the single hot accent, pine (#1f5e3d) for
               links and secondary structure, white lane lines on the dark hero.
   Signature:  the red margin rule. Every ledger has one. It runs down the left
               of the takeaways box, the callouts, the featured room, and the
               hover state of an index row. Paired with faint horizontal ruling
               (the lines of the page) and a numbered "ENTRY 01" column in mono.
   Mark:       four lane lines crossed by one rising stroke, the lane change.
   ========================================================================== */

:root {
  --canvas: #eef1ea;
  --canvas-2: #e4e9e0;
  --paper: #fbfcf7;
  --paper-2: #f4f6f0;

  --ink: #14211a;
  --ink-2: #24352c;
  --body: #2b3a31;
  --muted: #55645b;
  --faint: #7f8c84;

  --line: #cfd8cc;
  --line-2: #dfe5da;
  --rule: #b9c4b6;

  --red: #b8271f;
  --red-deep: #8f1d17;
  --red-wash: #f8e9e7;

  --pine: #1f5e3d;
  --pine-deep: #164a30;
  --pine-wash: #e6efe8;

  --hero: #10281c;
  --hero-2: #0b1d14;
  --onhero: #f0f4ea;
  --onhero-soft: #b8c9bb;
  --onhero-faint: #7e9485;

  --display: "Saira Condensed", "Arial Narrow", Impact, sans-serif;
  --serif: "Petrona", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --shell: 1180px;
  --read: 720px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ruling: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(20, 33, 26, 0.07) 31px, rgba(20, 33, 26, 0.07) 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "onum" 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }
::selection { background: var(--red-wash); color: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 36px; }
.read { max-width: var(--read); margin: 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.005em;
}
h1 em, h2 em, h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--red);
  letter-spacing: 0;
}

/* ---------- register label: mono, uppercase, red tick ---------- */
.reg {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.reg::before { content: ""; width: 18px; height: 2px; background: var(--red); flex: 0 0 auto; }
.reg.quiet { color: var(--muted); }
.reg.quiet::before { background: var(--rule); }

.mono { font-family: var(--mono); }

/* ---------- emergency strip ---------- */
.er-strip {
  background: var(--hero-2);
  color: var(--onhero-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.er-strip .shell { padding-top: 10px; padding-bottom: 10px; display: flex; gap: 12px; align-items: baseline; }
.er-strip b { color: #fff; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; white-space: nowrap; }
.er-strip .short { display: none; }
.er-strip b::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--red); margin-right: 9px; transform: translateY(-1px); }

/* ---------- masthead ---------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead .shell {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-top: 26px; padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 46px; height: 46px; flex: 0 0 auto; color: var(--ink); }
.brand .mark svg { width: 46px; height: 46px; display: block; }
.brand .mark .lane { color: var(--red); }
.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-name small {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pine);
  margin-top: 7px;
}
.masthead-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  line-height: 1.7;
}
.masthead-meta b { color: var(--ink); font-weight: 600; }

/* ---------- nav: the ledger's column heads ---------- */
.navband { background: var(--paper); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 40; }
.navband .shell { padding: 0 36px; }
.nav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 14px 10px 13px 0;
  margin-right: 12px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav a span { color: var(--red); margin-right: 6px; font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.nav a.about { margin-left: auto; margin-right: 0; padding-right: 0; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 22px 12px;
  border: 2px solid var(--red);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; transform: translateY(-1px); }
.btn .arw { font-family: var(--mono); font-size: 16px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.onhero.ghost { color: var(--onhero); border-color: var(--onhero-soft); }
.btn.onhero.ghost:hover { background: var(--onhero); color: var(--hero); border-color: var(--onhero); }

/* ---------- home hero: dark ledger page + photo ---------- */
.hero { background: var(--hero); color: var(--onhero); position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(240, 244, 234, 0.06) 39px, rgba(240, 244, 234, 0.06) 40px);
  pointer-events: none;
}
.hero .shell {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 56px; padding-bottom: 60px;
}
.hero-copy { position: relative; padding-left: 28px; border-left: 3px solid var(--red); }
.hero .reg { color: var(--onhero-soft); margin-bottom: 22px; }
.hero .reg::before { background: var(--red); }
.hero h1 {
  color: #fff;
  font-size: clamp(46px, 5.8vw, 78px);
  line-height: 0.94;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 22px;
}
.hero h1 em { color: #f2b8b2; text-transform: none; font-size: 0.86em; }
.hero .lede { font-size: 19.5px; line-height: 1.6; color: var(--onhero-soft); max-width: 52ch; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-actions .tel { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--onhero-soft); text-decoration: none; }
.hero-actions .tel b { color: #fff; font-weight: 600; }
.hero-actions .tel:hover b { color: #f2b8b2; }
.hero-fig { margin: 0; position: relative; }
.hero-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid rgba(240, 244, 234, 0.18); }
.hero-fig figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onhero-faint);
  margin-top: 12px;
  line-height: 1.6;
}
.hero-stamp {
  position: absolute; top: -14px; right: -14px;
  background: var(--red); color: #fff;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 12px;
}

/* ---------- generic section rhythm ---------- */
section { padding: 76px 0; }
.section-head { margin-bottom: 40px; max-width: 760px; }
.section-head .reg { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 0.98; text-transform: uppercase; }
.section-head h2 em { font-size: 0.78em; }
.section-head p { margin: 16px 0 0; color: var(--muted); font-size: 17.5px; max-width: 62ch; }

/* ---------- standing entry (home feature) ---------- */
.standing { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.standing .shell { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.standing-copy .reg { margin-bottom: 18px; }
.standing-copy h2 { font-size: clamp(32px, 3.8vw, 46px); text-transform: uppercase; margin-bottom: 18px; }
.standing-copy h2 em { font-size: 0.8em; }
.standing-copy p { margin: 0 0 16px; color: var(--body); font-size: 17.5px; }
.standing-copy p:last-child { margin-bottom: 0; }

figure.fig { margin: 0; }
figure.fig img { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: var(--canvas-2); }
figure.fig figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.6;
  padding-left: 14px;
  border-left: 2px solid var(--red);
}

/* ---------- the ledger index ---------- */
.ledger { border-top: 2px solid var(--ink); }
.ledger-head {
  display: grid; grid-template-columns: 96px 1fr 190px; gap: 28px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  padding: 12px 0 10px; border-bottom: 1px solid var(--ink);
}
.row {
  display: grid; grid-template-columns: 96px 1fr 190px; gap: 28px;
  align-items: baseline;
  padding: 26px 0 26px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: padding-left 0.25s var(--ease), background 0.25s var(--ease);
}
.row::before {
  content: ""; position: absolute; left: -18px; top: 0; bottom: 0; width: 3px; background: var(--red);
  transform: scaleY(0); transform-origin: top; transition: transform 0.25s var(--ease);
}
.row:hover { padding-left: 10px; }
.row:hover::before { transform: scaleY(1); }
.row .no { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--red); line-height: 1; }
.row .no small { display: block; font-size: 10px; letter-spacing: 0.16em; color: var(--muted); margin-top: 7px; text-transform: uppercase; }
.row h3 { font-size: 30px; text-transform: uppercase; line-height: 0.98; margin-bottom: 9px; font-weight: 700; transition: color 0.2s var(--ease); }
.row:hover h3 { color: var(--red-deep); }
.row p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 62ch; }
.row .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine); line-height: 1.6; align-self: start; padding-top: 6px; }
.row.lead { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--red); padding: 30px 28px; margin: 28px 0 8px; }
.row.lead::before { display: none; }
.row.lead:hover { padding-left: 28px; }
.row.lead h3 { font-size: 40px; }
.row.lead p { font-size: 17px; max-width: 66ch; }

/* ---------- lanes band ---------- */
.lanes { background: var(--hero); color: var(--onhero-soft); position: relative; }
.lanes::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), rgba(240, 244, 234, 0.08) calc(25% - 1px), rgba(240, 244, 234, 0.08) 25%);
  pointer-events: none;
}
.lanes .shell { position: relative; z-index: 1; }
.lanes .reg { color: var(--onhero-soft); margin-bottom: 36px; }
.lanes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.lane { border-top: 1px solid rgba(240, 244, 234, 0.25); padding-top: 20px; }
.lane .no { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: #f2b8b2; display: block; margin-bottom: 14px; }
.lane h3 { color: #fff; font-size: 30px; text-transform: uppercase; margin-bottom: 12px; }
.lane p { margin: 0; font-size: 16px; line-height: 1.6; }
.lanes-foot { margin-top: 36px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--onhero-faint); }

/* ---------- featured clinic + rooms ---------- */
.clinic { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--red); padding: 36px 40px 34px; }
.clinic .reg { margin-bottom: 14px; }
.clinic h2 { font-size: clamp(32px, 3.6vw, 44px); text-transform: uppercase; margin-bottom: 8px; }
.clinic .tagline { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); margin: 0 0 18px; }
.clinic p { margin: 0 0 16px; font-size: 17px; max-width: 70ch; }
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 26px 0 26px; }
.room { padding: 22px 22px 22px 0; border-right: 1px solid var(--line); }
.room:last-child { border-right: none; }
.room + .room { padding-left: 22px; }
.room .reg { margin-bottom: 12px; }
.room h3 { font-size: 26px; text-transform: uppercase; margin-bottom: 8px; }
.room address { font-style: normal; font-size: 15px; line-height: 1.5; color: var(--body); margin-bottom: 10px; }
.room .hours { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; letter-spacing: 0.01em; }
.room .hours b { color: var(--red-deep); font-weight: 600; }
.room .tel { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; display: inline-block; margin-bottom: 10px; }
.room .tel:hover { color: var(--red-deep); }
.room .golink { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); text-decoration: none; display: block; }
.room .golink:hover { color: var(--red-deep); }
.room.near { background: var(--pine-wash); padding-left: 22px; margin-left: -22px; padding-right: 22px; }
.clinic-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.clinic .disclose { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--muted); margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); max-width: 90ch; }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.review { border-top: 2px solid var(--ink); padding-top: 18px; }
.review blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--ink); }
.review cite { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.reviews-note { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 24px; letter-spacing: 0.04em; }

/* ---------- article chrome ---------- */
.article-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: 60px 0 44px; position: relative; }
.article-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background-image: var(--ruling); pointer-events: none; opacity: 0.7;
  -webkit-mask-image: linear-gradient(to right, transparent 55%, #000 100%);
  mask-image: linear-gradient(to right, transparent 55%, #000 100%);
}
.article-head .shell { position: relative; z-index: 1; }
.article-head .read { margin-left: 0; }
.article-head .reg { margin-bottom: 22px; }
.article-head h1 { font-size: clamp(40px, 5.4vw, 70px); line-height: 0.96; text-transform: uppercase; margin-bottom: 20px; }
.article-head h1 em { font-size: 0.8em; }
.article-head .lede { font-size: 21px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 58ch; }
.entryline {
  display: flex; gap: 26px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ink);
}
.entryline b { color: var(--red-deep); font-weight: 600; }

.article { padding: 48px 0 30px; }
.prose { font-family: var(--serif); font-size: 19px; line-height: 1.7; color: var(--body); }
.prose > p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 800; float: left; font-size: 76px; line-height: 0.74; padding: 9px 12px 0 0; color: var(--red);
}
.prose h2 { font-size: 34px; text-transform: uppercase; margin: 48px 0 14px; line-height: 0.98; }
.prose h2 em { font-size: 0.8em; }
.prose h3 { font-size: 24px; text-transform: uppercase; margin: 34px 0 10px; font-weight: 600; }
.prose p { margin: 0 0 20px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 24px; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 34px; margin-bottom: 12px; line-height: 1.6; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 18px; height: 2px; background: var(--red); }
.prose ol { counter-reset: led; }
.prose ol li { counter-increment: led; }
.prose ol li::before { content: counter(led, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--red-deep); }
.prose .cite { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.01em; }
.prose figure.fig { margin: 36px 0; }

/* the short entry (key takeaways) */
.takeaways {
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--red);
  padding: 26px 30px 24px; margin: 0 0 40px;
  background-image: var(--ruling); background-position: 0 10px;
}
.takeaways h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-deep); margin: 0 0 16px; font-weight: 600; }
.takeaways ul { margin: 0; padding: 0; list-style: none; }
.takeaways li { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink); padding-left: 34px; position: relative; margin-bottom: 10px; }
.takeaways li::before { content: counter(tk, decimal-leading-zero); counter-increment: tk; position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--red-deep); }
.takeaways ul { counter-reset: tk; }

/* margin note (callout) */
.note {
  border: 1px solid var(--line); border-left: 4px solid var(--pine); background: var(--paper);
  padding: 20px 26px; margin: 30px 0; font-size: 17px; line-height: 1.6; color: var(--ink);
}
.note b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pine); margin-bottom: 8px; font-weight: 600; }
.note.er { border-left-color: var(--red); }
.note.er b { color: var(--red-deep); }

/* ledger table inside prose (timelines) */
.timeline { border-top: 2px solid var(--ink); margin: 28px 0 34px; }
.timeline div { display: grid; grid-template-columns: 130px 1fr; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.timeline dt { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-deep); padding-top: 5px; }
.timeline dd { margin: 0; font-size: 17.5px; line-height: 1.6; }

/* CTA block: write entry one */
.cta {
  background: var(--hero); color: var(--onhero-soft);
  padding: 38px 40px; margin: 48px 0 0;
  position: relative; overflow: hidden;
}
.cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red); }
.cta .reg { color: var(--onhero-soft); margin-bottom: 14px; }
.cta h2 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); text-transform: uppercase; margin: 0 0 12px; }
.cta h2 em { color: #f2b8b2; font-size: 0.8em; }
.cta p { margin: 0 0 24px; max-width: 60ch; font-size: 17px; }
.cta-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.cta .tel { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--onhero-soft); text-decoration: none; }
.cta .tel b { color: #fff; font-weight: 600; }
.cta .tel:hover b { color: #f2b8b2; }
.cta .fine { font-family: var(--mono); font-size: 11px; color: var(--onhero-faint); margin: 22px 0 0; line-height: 1.6; letter-spacing: 0.02em; }

/* next entries */
.next { border-top: 2px solid var(--ink); margin-top: 48px; padding-top: 22px; }
.next h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-deep); margin: 0 0 10px; font-weight: 600; }
.next a {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline;
  font-family: var(--display); font-size: 24px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.next a span { font-family: var(--mono); font-size: 12px; color: var(--red); font-weight: 600; }
.next a:hover { color: var(--red-deep); padding-left: 6px; }

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--ink); margin-top: 10px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: grid; grid-template-columns: 52px 1fr 28px; gap: 16px; align-items: baseline;
  padding: 20px 0; font-family: var(--display); font-size: 25px; font-weight: 600; text-transform: uppercase; color: var(--ink); line-height: 1.02;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--red); }
.faq summary .tog { font-family: var(--mono); font-size: 20px; color: var(--muted); text-align: right; }
.faq details[open] summary .tog { color: var(--red); }
.faq details[open] summary { color: var(--red-deep); }
.faq .a { padding: 0 0 24px 68px; font-size: 17.5px; line-height: 1.65; }
.faq .a p { margin: 0 0 14px; }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- rooms page ---------- */
.roomcards { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 36px 0 8px; }
.roomcard { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 26px 28px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; align-items: start; }
.roomcard .reg, .roomcard h2 { grid-column: 1 / -1; }
.roomcard address { grid-column: 1; }
.roomcard dl { grid-column: 2; grid-row: 3 / 5; }
.roomcard .btn { grid-column: 1; grid-row: 4; }
.roomcard.near { border-top-color: var(--red); }
.roomcard .reg { margin-bottom: 14px; }
.roomcard h2 { font-size: 34px; text-transform: uppercase; margin-bottom: 10px; }
.roomcard address { font-style: normal; font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.roomcard dl { margin: 0 0 16px; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--muted); }
.roomcard dl div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; border-top: 1px solid var(--line-2); padding: 7px 0; }
.roomcard dt { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; padding-top: 2px; }
.roomcard dd { margin: 0; color: var(--ink); }
.roomcard dd.closed { color: var(--red-deep); font-weight: 600; }
.roomcard .tel { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; margin-bottom: 16px; display: inline-block; }
.roomcard .tel:hover { color: var(--red-deep); }
.roomcard .btn { align-self: end; justify-self: start; font-size: 17px; padding: 10px 16px 9px; white-space: nowrap; }

/* ---------- about: standards list ---------- */
.standards { border-top: 2px solid var(--ink); margin: 24px 0 36px; }
.standards div { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.standards dt { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--red); padding-top: 4px; }
.standards dd { margin: 0; font-size: 17.5px; line-height: 1.6; }
.standards dd b { font-family: var(--display); font-size: 22px; text-transform: uppercase; font-weight: 600; color: var(--ink); display: block; margin-bottom: 4px; letter-spacing: 0.01em; }

/* ---------- footer ---------- */
.foot { background: var(--hero-2); color: var(--onhero-soft); border-top: 6px solid var(--red); font-size: 15px; }
.foot .shell { padding-top: 56px; padding-bottom: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
.foot a { color: var(--onhero); text-decoration: none; }
.foot a:hover { color: #f2b8b2; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: #fff; }
.foot-brand .mark { width: 40px; height: 40px; color: #fff; }
.foot-brand .mark svg { width: 40px; height: 40px; display: block; }
.foot-brand .mark .lane { color: var(--red); }
.foot-brand .name { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 0.95; }
.foot-brand .name small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--onhero-faint); margin-top: 6px; font-weight: 500; }
.foot-lead { font-size: 15px; line-height: 1.6; color: var(--onhero-faint); max-width: 40ch; margin: 0; }
.foot h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--onhero-faint); margin: 0 0 16px; font-weight: 500; }
.foot-col a { display: block; margin-bottom: 10px; font-size: 15px; }
.foot-col .mono { font-size: 13px; color: var(--onhero-soft); }
.foot-disclose { border-top: 1px solid rgba(240, 244, 234, 0.12); margin-top: 40px; padding-top: 24px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--onhero-faint); max-width: 100ch; }
.foot-disclose p { margin: 0 0 12px; }
.foot-year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--onhero-faint); margin-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .nav a.about { margin-left: 12px; }
}
@media (max-width: 980px) {
  .hero .shell { grid-template-columns: 1fr; gap: 36px; padding-top: 52px; padding-bottom: 56px; }
  .hero-fig { order: -1; }
  .standing .shell { grid-template-columns: 1fr; gap: 30px; }
  .lanes-grid { grid-template-columns: 1fr; gap: 28px; }
  .rooms { grid-template-columns: 1fr; }
  .room { border-right: none; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .room + .room { padding-left: 0; }
  .room:last-child { border-bottom: none; }
  .room.near { margin-left: 0; padding-left: 18px; padding-right: 18px; }
  .reviews { grid-template-columns: 1fr; gap: 22px; }
  .roomcard { grid-template-columns: 1fr; }
  .roomcard address, .roomcard dl, .roomcard .btn { grid-column: 1; grid-row: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-about { grid-column: 1 / -1; }
  .masthead .shell { align-items: center; }
  .masthead-meta { display: none; }
}
@media (max-width: 680px) {
  body { font-size: 17px; }
  .shell, .navband .shell { padding-left: 20px; padding-right: 20px; }
  section { padding: 52px 0; }
  .er-strip .shell { flex-direction: column; gap: 4px; }
  .er-strip .long { display: none; }
  .er-strip .short { display: inline; }
  .navband { position: relative; }
  .navband::after { content: ""; position: absolute; top: 0; bottom: 2px; right: 0; width: 48px; background: linear-gradient(to right, rgba(251, 252, 247, 0), var(--paper)); pointer-events: none; }
  .brand-name { font-size: 26px; }
  .brand .mark, .brand .mark svg { width: 38px; height: 38px; }
  .nav a { padding: 12px 14px 11px 0; margin-right: 10px; font-size: 11px; }
  .nav a.about { margin-left: 0; padding-right: 14px; }
  .hero .shell { padding-top: 40px; padding-bottom: 46px; }
  .hero-copy { padding-left: 18px; }
  .hero h1 { font-size: clamp(44px, 13vw, 60px); }
  .hero .lede { font-size: 17.5px; }
  .hero-stamp { top: -10px; right: -6px; }
  .btn { font-size: 18px; padding: 12px 18px 11px; }
  .ledger-head { display: none; }
  .row, .row.lead { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .row.lead { padding: 24px 20px; }
  .row.lead:hover { padding-left: 20px; }
  .row:hover { padding-left: 0; }
  .row .no { font-size: 16px; }
  .row .no small { display: inline; margin-left: 10px; }
  .row h3, .row.lead h3 { font-size: 28px; }
  .row .tag { padding-top: 0; }
  .clinic { padding: 26px 20px 24px; }
  .article-head { padding: 40px 0 32px; }
  .article-head h1 { font-size: clamp(38px, 11vw, 52px); }
  .article-head .lede { font-size: 18.5px; }
  .prose { font-size: 18px; }
  .prose h2 { font-size: 30px; }
  .takeaways { padding: 22px 20px 20px; }
  .timeline div { grid-template-columns: 1fr; gap: 6px; }
  .cta { padding: 30px 22px; }
  .faq summary { grid-template-columns: 40px 1fr 24px; font-size: 21px; }
  .faq .a { padding-left: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .standards div { grid-template-columns: 44px 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- additions: educational line, footer emergency, section variants ---------- */
.edu { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--muted); margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--line); letter-spacing: 0.01em; }
.foot-er { font-size: 13.5px; line-height: 1.6; color: var(--onhero-faint); margin: 0 0 12px; }
.reviews-sec { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.er-sec { padding: 56px 0 64px; }
.er-sec .note { margin-top: 0; }
.row > div { min-width: 0; }
.prose a { color: var(--pine); font-weight: 600; }
.prose a.cite { font-weight: 400; }
.note a { color: var(--pine-deep); font-weight: 600; }
.foot-col .mono { margin-bottom: 14px; }
.prose .btn, .prose .btn:hover, .cta .btn, .cta .btn:hover { color: #fff; font-weight: 700; }
.roomcard .reg { margin-bottom: 2px; }
.roomcard h2 { margin-bottom: 2px; }

/* Cascade guard: the phone rule `.prose h2` shares specificity with the register
   labels inside .prose and is declared later, which inflated them at 390px.
   Re-declare their sizes last so they hold at every width. */
.next h2 { font-size: 11.5px; }
.prose .next h2 { font-size: 11.5px; }
.prose .takeaways h2 { font-size: 11.5px; }
.takeaways h2 { font-size: 11.5px; }

/* Phone nav: the horizontal scroller clipped section names mid-word and pushed the
   last item (often the call to action) off screen. Let it wrap instead. */
@media (max-width: 700px) {
  .nav { flex-wrap: wrap; white-space: normal; overflow-x: visible; row-gap: 6px;
    -webkit-mask-image: none; mask-image: none; }
  .nav::after, .nav::before { content: none; }
  .nav a { white-space: nowrap; }
}