/* ============================================================================
   STL Posture Lab  |  stlposturelab.com
   A lab notebook on how bodies stand. Observations, not judgments.

   Concept:    posture treated as data. Every page is an entry in the notebook,
               numbered, dated, and written in the voice of a careful observer.
   Type:       Space Grotesk (display, the instrument) / IBM Plex Sans (reading
               and UI) / Martian Mono (register labels, readings, figure numbers)
   Palette:    graphite ink on cool ruled paper, lab blue (#0f4c81) for structure,
               one amber flag (#e8a013) for the observation worth acting on,
               deep slate (#0b1622) for the hero plate and the dark bands.
   Signature:  the plumb line. A vertical hairline that ends in an amber pointer,
               used as the mark, the register tick, the section divider, and the
               notebook margin rule that runs down the left of every article.
   Devices:    ruled-paper backgrounds, OBS. and FIG. numbering in mono caps,
               one italic phrase per headline set in the display face.
   ============================================================================ */

:root {
  --canvas: #f7f8fa;
  --canvas-2: #eef1f5;
  --paper: #ffffff;
  --paper-2: #fbfcfd;
  --rule: #e2e5e9;
  --rule-soft: #edf0f3;
  --rule-blue: #d6e2ee;

  --ink: #101418;
  --ink-2: #2a3138;
  --muted: #5a6068;
  --faint: #8a9099;

  --blue: #0f4c81;
  --blue-deep: #0a3a63;
  --blue-wash: #e9f1f8;
  --amber: #e8a013;
  --amber-deep: #b87a08;
  --amber-wash: #fdf4e1;

  --slate: #0b1622;
  --slate-2: #122233;
  --on-slate: #f2f6fb;
  --on-slate-soft: #b9c6d4;

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --shell: 1180px;
  --read: 720px;
  --r: 4px;
  --r-lg: 8px;
  --ease: cubic-bezier(0.3, 0.02, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--amber); color: var(--ink); padding: 8px 12px; z-index: 99; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- Register label: the plumb tick ---------- */
.reg {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.reg::before {
  content: "";
  width: 2px; height: 14px;
  background: var(--blue);
  flex: 0 0 auto;
  position: relative;
}
.reg.amber { color: var(--amber-deep); }
.reg.amber::before { background: var(--amber); }

/* ---------- Plumb divider ---------- */
.plumb { display: flex; align-items: center; gap: 0; margin: 0; }
.plumb::before, .plumb::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.plumb i {
  width: 2px; height: 22px; margin: 0 16px; flex: 0 0 auto;
  background: var(--blue);
  position: relative;
}
.plumb i::after {
  content: ""; position: absolute; left: -4px; bottom: -6px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--amber);
}

/* ---------- Emergency strip ---------- */
.er-strip {
  background: var(--slate);
  color: var(--on-slate-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.er-strip .shell { padding-top: 9px; padding-bottom: 9px; display: flex; gap: 12px; align-items: flex-start; }
.er-strip .shell::before {
  content: ""; flex: 0 0 auto; width: 2px; height: 16px; background: var(--amber); margin-top: 3px;
}
.er-strip strong { color: #fff; font-weight: 600; }

/* ---------- Masthead ---------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--rule); }
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 40px; height: 40px; color: var(--blue); flex: 0 0 auto; }
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1;
}
.brand-name span {
  display: block; font-family: var(--mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 5px;
}
.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--rule); border-radius: var(--r);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); padding: 9px 12px; cursor: pointer;
}
.nav-toggle i { width: 14px; height: 2px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }
.nav {
  display: none;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}
.nav.open { display: flex; }
.nav a {
  font-family: var(--display); font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink-2);
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
}
.nav a[aria-current="page"] { color: var(--blue); }
.nav a:hover { color: var(--blue); }
.masthead .shell { flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--amber); color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.005em;
  padding: 14px 22px; border-radius: var(--r); border: 1px solid var(--amber-deep);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: #f0b030; color: var(--ink); transform: translateY(-1px); }
.btn .arw { font-family: var(--mono); font-size: 13px; }
.btn.line { background: transparent; color: var(--ink); border-color: var(--ink-2); }
.btn.line:hover { background: var(--paper); }
.btn.on-dark.line { color: var(--on-slate); border-color: rgba(255,255,255,0.35); }
.btn.on-dark.line:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ---------- Hero (home): the specimen plate ---------- */
.hero {
  background: var(--slate);
  color: var(--on-slate);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 34px);
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 70%);
  mask-image: linear-gradient(to right, #000 0%, transparent 70%);
}
.hero .shell { position: relative; padding-top: 52px; padding-bottom: 56px; display: grid; gap: 36px; }
.hero .reg { color: var(--amber); }
.hero .reg::before { background: var(--amber); }
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 8.6vw, 64px); line-height: 1.0; letter-spacing: -0.03em;
  color: #fff; margin: 20px 0 20px;
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--amber); letter-spacing: -0.02em; }
.hero .lede { font-size: 18px; line-height: 1.6; color: var(--on-slate-soft); max-width: 52ch; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-meta {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-slate-soft);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.plate { margin: 0; }
.plate img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.12); }
.plate figcaption {
  margin-top: 12px; font-family: var(--text); font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--on-slate-soft); line-height: 1.55;
}
.plate figcaption b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); font-weight: 600; margin-right: 8px; }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
.section-head { max-width: 700px; margin-bottom: 30px; }
.section-head h2, .h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(27px, 5.4vw, 38px); line-height: 1.06; letter-spacing: -0.028em; color: var(--ink); margin: 14px 0 0;
}
.section-head h2 em, .h2 em, .obs h3 em { font-style: italic; font-weight: 400; color: var(--blue); }
.section-head p { color: var(--muted); margin: 14px 0 0; font-size: 17px; }

/* ---------- Observations band (home) ---------- */
.obs-grid { display: grid; gap: 20px; }
.obs {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 26px 24px 24px; position: relative;
}
.obs::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; background: var(--blue);
}
.obs .num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-deep); display: block; margin-bottom: 12px; }
.obs h3 { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink); }
.obs p { margin: 0 0 10px; font-size: 15.5px; color: var(--ink-2); }
.obs p:last-child { margin-bottom: 0; }

/* ---------- Notebook index (guide cards) ---------- */
.index { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.entries { display: grid; gap: 14px; }
.entry {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-2);
  padding: 20px 18px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.entry:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(15,76,129,0.45); color: var(--ink); }
.entry .no { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--blue); line-height: 1.4; padding-top: 4px; border-top: 2px solid var(--amber); }
.entry .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 7px; }
.entry h3 { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 8px; }
.entry:hover h3 { color: var(--blue); }
.entry p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.entry.lead { grid-column: 1 / -1; background: var(--blue-wash); border-color: var(--rule-blue); }
.entry.lead h3 { font-size: 24px; }
.entry.lead p { font-size: 16px; color: var(--ink-2); max-width: 60ch; }

/* ---------- Feature (photo + copy) ---------- */
.feature { border-top: 1px solid var(--rule); }
.feature .shell { display: grid; gap: 28px; align-items: center; }
.feature-copy h2 { margin-top: 14px; }
.feature-copy p { color: var(--ink-2); margin: 14px 0 0; }
figure.fig { margin: 0; }
figure.fig img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--rule); }
figure.fig figcaption {
  margin-top: 10px; font-family: var(--text); font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--muted); line-height: 1.6;
}
figure.fig figcaption b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-deep); font-weight: 600; margin-right: 8px; }

/* ---------- Field site (featured clinic + rooms) ---------- */
.site-band { background: var(--slate); color: var(--on-slate-soft); position: relative; overflow: hidden; }
.site-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 80% at 100% 0%, rgba(15,76,129,0.55), transparent 60%);
}
.site-band .shell { position: relative; }
.site-band .reg { color: var(--amber); }
.site-band .reg::before { background: var(--amber); }
.site-band h2 { color: #fff; }
.site-band h2 em { color: var(--amber); }
.site-band .intro { color: var(--on-slate-soft); max-width: 62ch; margin: 14px 0 28px; }
.rooms { display: grid; gap: 14px; }
.room {
  background: var(--slate-2); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg);
  padding: 22px 20px 20px; position: relative;
}
.room.nearest { border-color: var(--amber); }
.room .r-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 10px; }
.room h3 { font-family: var(--display); font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 8px; letter-spacing: -0.02em; }
.room address { font-style: normal; font-size: 15px; color: var(--on-slate); line-height: 1.5; margin: 0 0 10px; }
.room .hrs { font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--on-slate-soft); margin: 0 0 16px; letter-spacing: 0.02em; }
.room .tel { color: #fff; font-family: var(--display); font-weight: 700; font-size: 17px; text-decoration: none; display: block; margin-bottom: 12px; }
.room .tel:hover { color: var(--amber); }
.room .go { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); text-decoration: none; }
.room .go:hover { color: #fff; }
.site-foot-note { font-size: 13.5px; color: var(--on-slate-soft); margin: 26px 0 0; max-width: 72ch; line-height: 1.6; }
.site-foot-note a { color: #fff; }

/* ---------- Remarks (the three published reviews) ---------- */
.remarks { display: grid; gap: 14px; }
.remark {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 22px 22px 18px; margin: 0;
  position: relative;
}
.remark p { font-family: var(--display); font-size: 19px; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 12px; }
.remark cite { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.remarks-note { font-size: 13.5px; color: var(--muted); margin: 16px 0 0; }

/* ---------- CTA block ---------- */
.cta {
  background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--amber); border-radius: var(--r-lg);
  padding: 26px 24px; margin: 36px 0 0;
}
.cta h2, .cta h3 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; margin: 10px 0 10px; color: var(--ink); }
.cta h2 em, .cta h3 em { font-style: italic; font-weight: 400; color: var(--blue); }
.cta p { margin: 0 0 16px; color: var(--ink-2); font-size: 16px; }
.cta .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta .tel { font-family: var(--display); font-weight: 700; color: var(--ink); text-decoration: none; font-size: 16px; }
.cta .tel:hover { color: var(--blue); }
.cta .small { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* ---------- Article ---------- */
.article-head { background: var(--canvas); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.article-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(15,76,129,0.07) 0, rgba(15,76,129,0.07) 1px, transparent 1px, transparent 34px);
  -webkit-mask-image: linear-gradient(to right, transparent 35%, #000 100%);
  mask-image: linear-gradient(to right, transparent 35%, #000 100%);
}
.article-head .shell { max-width: var(--read); position: relative; padding-top: 44px; padding-bottom: 36px; }
.article-head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 7vw, 46px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); margin: 16px 0 16px;
}
.article-head h1 em { font-style: italic; font-weight: 400; color: var(--blue); letter-spacing: -0.02em; }
.article-head .lede { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 58ch; }
.byline {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.article .shell { max-width: var(--read); }
.prose { padding: 36px 0 16px; position: relative; }
.prose { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); }
.prose > * { position: relative; }
.prose p { margin: 0 0 20px; }
.prose > h2, .faq-item h2 {
  font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; color: var(--ink);
  margin: 44px 0 14px; padding-left: 16px; border-left: 2px solid var(--blue);
}
.prose > h2 em, .faq-item h2 em { font-style: italic; font-weight: 400; color: var(--blue); }
.prose .rooms { grid-template-columns: 1fr; margin: 6px 0 30px; }
.prose .room .r-tag { margin-bottom: 4px; }
.prose .room .hrs { margin-bottom: 0; }
@media (min-width: 560px) {
  .prose .room { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
  .prose .room .r-tag, .prose .room h3 { grid-column: 1 / -1; }
  .prose .room .tel { margin-bottom: 0; }
}
.prose h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); margin: 30px 0 8px; }
.prose ul, .prose ol { margin: 0 0 22px; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: 7px; width: 2px; height: 16px; background: var(--blue); }
.prose ul li::after { content: ""; position: absolute; left: 3px; top: 22px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--amber); }
.prose ol { counter-reset: lab; }
.prose ol li { counter-increment: lab; padding-left: 40px; }
.prose ol li::before { content: counter(lab, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--blue); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose figure.fig { margin: 30px 0; }
.prose .cite { font-size: 14px; color: var(--muted); }

/* findings box (key takeaways) */
.findings {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 22px 22px 18px; margin: 0 0 32px;
}
.findings h2 { margin: 0 0 14px; padding: 0; border: none; line-height: 1.4; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-deep); display: flex; align-items: center; gap: 10px; }
.findings h2::before { content: ""; width: 2px; height: 14px; background: var(--amber); }
.findings ul { margin: 0; }
.findings li { font-size: 15.5px; line-height: 1.5; margin-bottom: 10px; color: var(--ink); }
.findings li:last-child { margin-bottom: 0; }

/* field note (callout) */
.note {
  background: var(--blue-wash); border: 1px solid var(--rule-blue); border-radius: var(--r-lg);
  padding: 18px 20px; margin: 26px 0; font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.note strong { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; font-weight: 600; }
.note.er { background: var(--amber-wash); border-color: #f0dcb0; }
.note.er strong { color: var(--amber-deep); }

/* readings table (hour by hour etc.) */
.readings { width: 100%; border-collapse: collapse; margin: 6px 0 26px; font-size: 15.5px; }
.readings th, .readings td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.readings th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.readings td:first-child { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--blue); white-space: nowrap; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--rule); padding: 22px 0; }
.faq-item h2 { margin: 0 0 10px; font-size: 21px; padding-left: 16px; border-left: 2px solid var(--amber); }
.faq-item p { margin: 0 0 10px; }
.faq-item p:last-child { margin-bottom: 0; }

/* room cards on light pages */
.rooms.light .room { background: var(--paper); border-color: var(--rule); }
.rooms.light .room.nearest { border-color: var(--amber); }
.rooms.light .room h3 { color: var(--ink); }
.rooms.light .room address { color: var(--ink-2); }
.rooms.light .room .hrs { color: var(--muted); }
.rooms.light .room .tel { color: var(--ink); }
.rooms.light .room .tel:hover { color: var(--blue); }
.rooms.light .room .r-tag { color: var(--amber-deep); }
.rooms.light .room .go { color: var(--blue); }
.rooms.light .room .go:hover { color: var(--ink); }

/* related */
.related { border-top: 1px solid var(--rule); margin-top: 40px; padding-top: 24px; }
.related h2 { margin: 0 0 12px; padding: 0; border: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.related a {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; text-decoration: none; color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.related a span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; flex: 0 0 auto; }
.related a:hover { color: var(--blue); }
.related a:last-child { border-bottom: none; }

.disclosure-block {
  font-size: 13.5px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 18px;
}
.disclosure-block strong { color: var(--ink-2); font-weight: 600; }

/* ---------- Footer ---------- */
.foot { background: var(--canvas-2); border-top: 3px solid var(--blue); color: var(--muted); font-size: 14px; }
.foot .shell { padding-top: 44px; padding-bottom: 36px; }
.foot-grid { display: grid; gap: 30px; }
.foot-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); margin-bottom: 14px; }
.foot-brand .mark { width: 36px; height: 36px; color: var(--blue); }
.foot-brand b { font-family: var(--display); font-size: 17px; letter-spacing: -0.02em; display: block; line-height: 1; }
.foot-brand span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.foot p { margin: 0 0 10px; max-width: 46ch; line-height: 1.6; }
.foot h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; font-weight: 600; }
.foot a { color: var(--ink-2); text-decoration: none; display: block; margin-bottom: 9px; }
.foot a:hover { color: var(--blue); }
.foot .legal { border-top: 1px solid var(--rule); margin-top: 30px; padding-top: 20px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.foot .legal p { max-width: 100%; }
.foot .colophon { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 14px; }

/* ---------- Responsive: tablet and up ---------- */
@media (min-width: 760px) {
  .shell { padding: 0 32px; }
  .er-strip { font-size: 13px; }
  .masthead .shell { flex-wrap: nowrap; padding-top: 18px; padding-bottom: 18px; }
  .nav-toggle { display: none; }
  .nav { display: flex; flex-direction: row; width: auto; border: none; padding: 0; gap: 22px; }
  .nav a { padding: 4px 0; border: none; font-size: 14px; }
  .hero .shell { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 76px; }
  .hero h1 { font-size: clamp(44px, 5.2vw, 66px); }
  section { padding: 72px 0; }
  .obs-grid { grid-template-columns: repeat(3, 1fr); }
  .entries { grid-template-columns: repeat(2, 1fr); }
  .feature .shell { grid-template-columns: 1fr 1.1fr; gap: 44px; }
  .rooms { grid-template-columns: repeat(3, 1fr); }
  .remarks { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
  .article-head .shell { padding-top: 64px; padding-bottom: 44px; }
  .prose { padding: 44px 0 24px; font-size: 18.5px; }
  .prose > h2 { font-size: 28px; }
  .prose p, .prose ul, .prose ol, .prose h2, .prose h3, .prose .note, .prose .findings, .prose figure.fig, .prose table { position: relative; }
  .prose::before {
    content: ""; position: absolute; left: -28px; top: 0; bottom: 0; width: 1px; background: var(--amber); opacity: 0.6;
  }
  .cta { padding: 32px 30px; }
}
@media (min-width: 1040px) {
  .entries { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}