/* ==========================================================================
   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-fold { display: none; }
.er-fold summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.er-fold summary::-webkit-details-marker { display: none; }
.er-fold .er-sum { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--onhero); }
.er-fold .er-tog::after { content: "+"; font-weight: 600; color: #f2b8b2; font-size: 14px; }
.er-fold[open] .er-tog::after { content: "-"; }
.er-fold .er-full { margin: 8px 0 2px; font-family: var(--serif); font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--onhero-soft); white-space: normal; }
.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 (Sep 13 polish): headline first, a start-here column, the plate below ---------- */
.hero { background: var(--hero); color: var(--onhero); position: relative; overflow: hidden; padding: 0; }
.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; }
.hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; padding-top: 64px; padding-bottom: 52px; }
.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(50px, 6.6vw, 94px);
  line-height: 0.9;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 26px;
}
.hero h1 em { display: block; color: #f2b8b2; text-transform: none; font-size: 0.8em; line-height: 1; margin-top: 0.1em; }
.hero .lede { font-size: 19.5px; line-height: 1.6; color: var(--onhero-soft); max-width: 54ch; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 14px 20px; 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; }

.starthere { background: var(--hero-2); border: 1px solid rgba(240, 244, 234, 0.16); border-top: 3px solid var(--red); padding: 26px 26px 22px; }
.starthere .reg { margin-bottom: 12px; }
.starthere h2 { color: #fff; font-size: 32px; text-transform: uppercase; line-height: 0.96; margin: 0 0 16px; }
.starthere ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(240, 244, 234, 0.2); }
.starthere li a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; padding: 15px 0 14px; border-bottom: 1px solid rgba(240, 244, 234, 0.12); text-decoration: none; color: var(--onhero-soft); }
.starthere .n { grid-row: 1 / 3; font-family: var(--mono); font-size: 17px; font-weight: 600; color: #f2b8b2; line-height: 1.3; }
.starthere .t { font-family: var(--display); font-size: 25px; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1; transition: color 0.2s var(--ease); }
.starthere .d { font-size: 15px; line-height: 1.5; }
.starthere li a:hover .t { color: #f2b8b2; }
.start-foot { font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--onhero-faint); margin: 16px 0 0; letter-spacing: 0.01em; }
.start-foot a { color: var(--onhero); }
.start-foot a:hover { color: #f2b8b2; }

.hero-plate { padding-bottom: 64px; }
.hero-fig { margin: 0; position: relative; }
.hero-fig img { width: 100%; height: auto; aspect-ratio: 1340 / 480; 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: 24px; z-index: 2;
  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; }
.standing, .entries, .clinic-band, .reviews-sec { padding: 84px 0; }
.section-head { margin-bottom: 40px; max-width: 760px; }
.section-head .reg, .section-head p.reg { margin-bottom: 18px; margin-top: 0; font-size: 11.5px; color: var(--red-deep); }
.clinic-band .section-head p.reg { color: var(--onhero-soft); }
.section-head h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 0.96; 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: statement left, prose right ---------- */
.standing { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.standing .shell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.standing-head .reg { margin-bottom: 18px; }
.standing-head h2 { font-size: clamp(38px, 4.6vw, 60px); text-transform: uppercase; line-height: 0.94; margin-bottom: 32px; }
.standing-head h2 em { display: block; font-size: 0.78em; margin-top: 0.08em; }
.standing-copy p { margin: 0 0 18px; color: var(--body); font-size: 18px; }
.standing-copy p:last-child { margin-bottom: 0; }
.standing-copy p.first { font-size: 22px; line-height: 1.5; color: var(--ink); }
.entry-card { margin: 30px 0 30px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.entry-card h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-deep); font-weight: 600; padding: 12px 0 10px; border-bottom: 1px solid var(--line); line-height: 1.3; }
.entry-card ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entry-card li { padding: 16px 12px 16px 0; border-right: 1px solid var(--line); font-family: var(--display); font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--ink); line-height: 1; }
.entry-card li + li { padding-left: 14px; }
.entry-card li:last-child { border-right: 0; }
.entry-card li span { display: block; font-family: var(--mono); font-size: 11px; color: var(--red); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.1em; }

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: three registers ---------- */
.entries .section-head { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 64px; align-items: end; margin-bottom: 44px; }
.entries .section-head p { margin: 0; }
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 2px solid var(--ink); }
.ledger-group { min-width: 0; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 600; padding: 14px 0 12px; border-bottom: 1px solid var(--ink); margin: 0; }
.group-head small { color: var(--muted); font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.row::before {
  content: ""; position: absolute; left: -14px; top: 22px; bottom: 22px; width: 3px; background: var(--red);
  transform: scaleY(0); transform-origin: top; transition: transform 0.25s var(--ease);
}
.row:hover::before { transform: scaleY(1); }
.row .no { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--red); line-height: 1.4; }
.row .tag { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine); margin-bottom: 7px; line-height: 1.4; }
.row h3 { font-size: 25px; text-transform: uppercase; line-height: 0.98; margin-bottom: 8px; 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: 15.5px; line-height: 1.55; }
.row.lead h3 { font-size: 31px; }
.row.lead .tag { color: var(--red-deep); font-weight: 600; }
.ledger-close { padding: 24px 0 0; }
.ledger-close p { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }

/* ---------- featured clinic band: lanes beside the intro, offices as cards ---------- */
.clinic-band { background: var(--hero); color: var(--onhero-soft); position: relative; }
.clinic-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), rgba(240, 244, 234, 0.06) calc(25% - 1px), rgba(240, 244, 234, 0.06) 25%);
  pointer-events: none;
}
.clinic-band .shell { position: relative; z-index: 1; }
.clinic-band .reg { color: var(--onhero-soft); }
.clinic-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; margin-bottom: 48px; }
.clinic-band .section-head { margin: 0; }
.clinic-band .section-head h2 { color: #fff; }
.clinic-band .section-head h2 em { color: #f2b8b2; }
.clinic-band .clinic-name { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--onhero-faint); margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid rgba(240, 244, 234, 0.18); max-width: none; }
.clinic-h { color: #fff; font-size: clamp(30px, 3.2vw, 40px); text-transform: uppercase; margin: 0 0 8px; }
.clinic-band .tagline { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #f2b8b2; margin: 0 0 18px; }
.clinic-band .clinic-intro { font-size: 17.5px; color: var(--onhero-soft); max-width: 60ch; margin: 0; }
.lanes-list { border-top: 2px solid var(--red); }
.lanes-list > .reg { margin: 16px 0 4px; }
.lane { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid rgba(240, 244, 234, 0.14); }
.lane .no { grid-row: 1 / 3; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #f2b8b2; padding-top: 7px; }
.lane h3 { color: #fff; font-size: 26px; text-transform: uppercase; margin: 0; }
.lane p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.lanes-foot { margin: 16px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.65; letter-spacing: 0.03em; color: var(--onhero-faint); }

.offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.office { background: var(--paper); color: var(--body); padding: 24px 24px 22px; border-top: 4px solid var(--ink); display: flex; flex-direction: column; }
.office.near { border-top-color: var(--red); }
.clinic-band .office .reg { color: var(--red-deep); margin-bottom: 12px; }
.clinic-band .office .reg.quiet { color: var(--muted); }
.office h3 { font-size: 36px; text-transform: uppercase; margin: 0 0 12px; color: var(--ink); }
.office address { font-style: normal; font-size: 16px; line-height: 1.5; color: var(--body); margin-bottom: 14px; }
.office .hours { font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.office .hours b { color: var(--red-deep); font-weight: 600; }
.office .tel { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; margin: auto 0 12px; }
.office .tel:hover { color: var(--red-deep); }
.office .golink { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 11px 16px 10px; text-decoration: none; transition: background 0.2s var(--ease); }
.office .golink span { font-family: var(--mono); font-size: 15px; }
.office.near .golink { background: var(--red); }
.office .golink:hover { background: var(--red-deep); color: #fff; }
.clinic-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.clinic-band .btn.ghost { color: var(--onhero); border-color: var(--onhero-soft); }
.clinic-band .btn.ghost:hover { background: var(--onhero); color: var(--hero); border-color: var(--onhero); }
.clinic-band .disclose { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--onhero-faint); margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(240, 244, 234, 0.14); max-width: 100ch; }

/* ---------- reviews: a short numbered register ---------- */
.reviews-sec .shell { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.reviews-sec .section-head { margin: 0; }
.reviews { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.review { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.review .no { grid-row: 1 / 3; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--red); padding-top: 9px; }
.review blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 27px; line-height: 1.3; 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: 8px; }
.reviews-note, .reviews-sec .section-head .reviews-note { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 24px; letter-spacing: 0.04em; line-height: 1.65; max-width: 40ch; }

@media (max-width: 980px) {
  .hero-top { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 52px; padding-bottom: 44px; }
  .standing .shell { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .entries .section-head { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .reviews-sec .shell { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .offices { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ledger-group + .ledger-group { margin-top: 34px; }
  .group-head { border-top: 2px solid var(--ink); }
}
@media (max-width: 680px) {
  .standing, .entries, .clinic-band, .reviews-sec { padding: 56px 0; }
  .hero-top { padding-top: 34px; padding-bottom: 36px; gap: 34px; }
  .hero-copy { padding-left: 18px; }
  .hero .reg { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(46px, 13.4vw, 62px); margin-bottom: 20px; }
  .hero .lede { font-size: 17.5px; margin-bottom: 26px; }
  .starthere { padding: 22px 18px 18px; }
  .starthere h2 { font-size: 28px; }
  .starthere .t { font-size: 23px; }
  .hero-plate { padding-bottom: 48px; }
  .hero-fig img { aspect-ratio: 16 / 9; }
  .hero-stamp { top: -10px; right: 10px; }
  .standing-head h2 { margin-bottom: 26px; }
  .standing-copy p.first { font-size: 19.5px; }
  .entry-card ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-card li:nth-child(2) { border-right: 0; }
  .entry-card li:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); }
  .entry-card li:nth-child(4) { border-top: 1px solid var(--line); }
  .row h3 { font-size: 25px; }
  .row.lead h3 { font-size: 28px; }
  .row::before { display: none; }
  .clinic-top { margin-bottom: 36px; }
  .lane { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lane .no { grid-row: auto; padding-top: 0; }
  .office { padding: 22px 20px 20px; }
  .office h3 { font-size: 32px; }
  .review blockquote { font-size: 22px; }
  .review { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
}

/* ---------- 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) {
  .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; }
  .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; }
  .btn { font-size: 18px; padding: 12px 18px 11px; }
  .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 header (Sep 13 polish): the wrapped nav took five rows (237px) and pushed the
   h1 below the first screen. One horizontally scrolling row, a fade on the right edge
   that says there is more, and the About link padded clear of the fade. */
@media (max-width: 700px) {
  .nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .nav a { white-space: nowrap; padding: 13px 0 12px; margin-right: 18px; }
  .nav a.about { margin-left: 0; padding-right: 40px; margin-right: 0; }
}
@media (max-width: 680px) {
  .er-strip .shell { display: block; padding-top: 8px; padding-bottom: 8px; }
  .er-strip .er-label, .er-strip .long { display: none; }
  .er-fold { display: block; }
  .masthead .shell { padding-top: 14px; padding-bottom: 12px; }
  .brand-name { font-size: 25px; }
  .brand-name small { margin-top: 5px; }
}

/* Desktop nav: eleven column heads overflowed the 1180 shell and hid 10 and About.
   Spread them across the row instead of scrolling them away. */
@media (min-width: 1121px) {
  .nav { justify-content: space-between; }
  .nav a { margin-right: 0; padding-right: 0; }
  .nav a.about { margin-left: 0; }
}