/* ==========================================================================
   Improving Dental — shared stylesheet
   Sibling of the Z Dental editorial system (website-v2/brand/colors_and_type.css)
   in a quieter register: same tokens, no commerce components.
   Every page loads only this file; page-specific <style> blocks stay minimal.
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */

@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 800; font-style: italic; font-display: swap;
}

/* ---- Tokens (mirror of Z Dental palette) -------------------------------- */

:root {
  --z-deep: #0A3549;
  --z-deep-dark: #051F2A;
  --z-blue: #0079B1;
  --z-blue-tint: #CFE9F5;
  --craft-amber: #B4682D;
  --craft-amber-dark: #935321;
  --craft-amber-on-light: #9C5824;
  --paper-cream: #FAF5EB;
  --bone-light: #FDFBF4;
  --ink: #0F1417;
  --ink-80: #2A3C45;
  --ink-60: #566B74;
  --ink-40: #8A9499;
  --ink-20: #C4CBD0;
  --ink-10: #E4E7E9;

  --font-serif-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  --fs-display-l: clamp(48px, 6.5vw, 84px);
  --fs-display-m: clamp(36px, 4.5vw, 56px);
  --fs-display-s: clamp(28px, 3.5vw, 40px);
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-caption: 13px;
  --fs-mono-sm: 11px;

  --tracking-mono: 0.08em;
  --tracking-display: -0.02em;

  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --grain-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---- Base --------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper-cream);
  background-image: var(--grain-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.prose-wrap { max-width: 720px; margin: 0 auto; padding: 0 40px; }

/* ---- Typography ---------------------------------------------------------- */

.display-l, .display-m, .display-s {
  font-family: var(--font-serif-display);
  color: var(--z-deep);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.display-l { font-size: var(--fs-display-l); line-height: 1.05; }
.display-m { font-size: var(--fs-display-m); line-height: 1.08; }
.display-s { font-size: var(--fs-display-s); line-height: 1.12; }
.display-l em, .display-m em, .display-s em { font-style: italic; color: var(--craft-amber); }

p { color: var(--ink-80); margin: 0 0 16px; text-wrap: pretty; }
.body-l { font-size: var(--fs-body-l); }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-60); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--craft-amber-on-light);
}
.eyebrow-muted { color: var(--ink-60); }

.hairline-amber { display: block; height: 1px; width: 48px; background: var(--craft-amber); border: 0; }
.hairline-ink { height: 1px; background: var(--ink-20); border: 0; }

a { color: var(--craft-amber-on-light); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
a:hover { color: var(--craft-amber-dark); }

::selection { background: var(--z-deep); color: var(--paper-cream); }

/* ---- Masthead ------------------------------------------------------------ */

header.masthead { background: var(--paper-cream); border-bottom: 1px solid var(--ink-10); position: sticky; top: 0; z-index: 50; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }

.wordmark {
  font-family: var(--font-serif-display);
  font-size: 26px; color: var(--z-deep);
  border-bottom: 0; letter-spacing: var(--tracking-display);
  white-space: nowrap;
}
.wordmark em { font-style: italic; color: var(--craft-amber); }
.wordmark:hover { color: var(--z-deep); }

.masthead nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.masthead nav a {
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  color: var(--ink-80); border-bottom: 0; letter-spacing: 0;
}
.masthead nav a:hover { color: var(--craft-amber); }
.masthead nav a.active { color: var(--craft-amber); }

/* ---- Page head (pillar / article opening) -------------------------------- */

.page-head { padding: 72px 0 48px; text-align: center; }
.page-head .eyebrow { display: block; margin-bottom: 20px; }
.page-head .display-l, .page-head .display-m { margin: 0 auto 24px; max-width: 20ch; }
.page-head .dek {
  font-size: var(--fs-body-l); color: var(--ink-60);
  max-width: 58ch; margin: 0 auto;
}
.page-head .hairline-amber { margin: 32px auto 0; }

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

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding: 24px 0 96px; }

.article-card {
  background: var(--bone-light);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  border-bottom: 1px solid var(--ink-10);
  color: inherit;
}
a.article-card { transition: border-color .2s ease, transform .2s ease; padding-bottom: 28px; }
a.article-card:hover { border-color: var(--z-deep); transform: translateY(-2px); color: inherit; }

.article-card .meta { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-60); }
.article-card h3 { font-family: var(--font-serif-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--z-deep); }
.article-card .card-dek { font-size: 14.5px; color: var(--ink-60); line-height: 1.5; flex: 1; }
.article-card .evidence-tag {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em; color: var(--craft-amber-on-light);
}

.chip-soon {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--ink-60);
  border: 1px solid var(--ink-20); border-radius: var(--radius-pill);
  padding: 4px 10px;
}

/* ---- Prose (article + about + sources body) ------------------------------ */

.prose { padding: 24px 0 96px; }
.prose h2 {
  font-family: var(--font-serif-display); font-weight: 400;
  font-size: var(--fs-display-s); line-height: 1.15; color: var(--z-deep);
  margin: 48px 0 20px; letter-spacing: var(--tracking-display);
}
.prose h2 em { font-style: italic; color: var(--craft-amber); }
.prose h3 { font-weight: 600; font-size: 19px; color: var(--ink); margin: 36px 0 12px; }
.prose p { font-size: 17px; line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 16px 22px; color: var(--ink-80); font-size: 17px; line-height: 1.65; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  border-left: 2px solid var(--craft-amber);
  padding: 4px 0 4px 24px; margin: 28px 0;
  font-family: var(--font-serif-display); font-size: 22px; line-height: 1.35; color: var(--z-deep);
}

/* ---- Sources block (bottom of every article) ----------------------------- */

.sources-block {
  background: var(--bone-light);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-lg);
  padding: 28px 32px; margin-top: 56px;
}
.sources-block .eyebrow { display: block; margin-bottom: 14px; }
.sources-block ol { margin: 0 0 0 20px; }
.sources-block li {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  color: var(--ink-60); margin-bottom: 10px; letter-spacing: 0.01em;
}
.sources-block li a { color: var(--craft-amber-on-light); }

/* ---- Footer -------------------------------------------------------------- */

footer.site-footer {
  background: var(--z-deep);
  color: rgba(250, 245, 235, 0.75);
  margin-top: 0;
  padding: 64px 0 40px;
}
.site-footer .wrap { display: flex; flex-direction: column; gap: 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-mission { max-width: 420px; }
.footer-mission .wordmark { color: var(--paper-cream); font-size: 24px; }
.footer-mission .wordmark em { color: var(--craft-amber); }
.footer-mission p { color: rgba(250, 245, 235, 0.65); font-size: 14.5px; margin-top: 14px; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-cols .col h4 {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: rgba(250, 245, 235, 0.5); font-weight: 500; margin-bottom: 16px;
}
.footer-cols .col a {
  display: block; font-size: 14px; color: rgba(250, 245, 235, 0.8);
  border-bottom: 0; margin-bottom: 10px;
}
.footer-cols .col a:hover { color: var(--craft-amber); }
.footer-bottom {
  border-top: 1px solid rgba(250, 245, 235, 0.15);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em; color: rgba(250, 245, 235, 0.5);
}
.footer-bottom a { color: rgba(250, 245, 235, 0.7); border-bottom: 0; }
.footer-bottom a:hover { color: var(--craft-amber); }

/* ==========================================================================
   Editorial soul layer — added in the art-direction pass.
   Scale drama, asymmetry, section numbering, illustration, micro-signatures.
   ========================================================================== */

:root {
  --z-blue-wash: #E7F1F7;      /* softened z-blue-tint for full bands */
  --amber-wash: #F6E7D6;       /* softened craft-amber for washes/chips */
  --fs-display-xl: clamp(64px, 8.5vw, 124px);
  --fs-stat: clamp(56px, 6vw, 88px);
}

.display-xl { font-family: var(--font-serif-display); color: var(--z-deep); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.0; font-size: var(--fs-display-xl); text-wrap: balance; }
.display-xl em { font-style: italic; color: var(--craft-amber); }

/* --- Numbered section eyebrows (the § system) --- */
.sec-eyebrow {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--ink-60);
}
.sec-eyebrow .sec-num { color: var(--craft-amber-on-light); }
.sec-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--ink-20); transform: translateY(-4px); }

/* --- Band rhythm --- */
.band-tint { background: var(--z-blue-wash); background-image: var(--grain-bg); }
.page-head.band-tint { padding: 64px 0 64px; }
.page-head.band-tint + .wrap .card-grid { padding-top: 56px; }
.band-bone { background: var(--bone-light); }

/* --- Manifesto pull quote --- */
.manifesto { padding: 96px 0; }
.manifesto .quote {
  position: relative;
  font-family: var(--font-serif-display);
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.14; color: var(--z-deep);
  letter-spacing: var(--tracking-display);
  max-width: 21ch;
}
.manifesto .quote em { font-style: italic; color: var(--craft-amber); }
.manifesto .quote::before {
  content: "\201C";
  position: absolute; left: -0.55em; top: -0.12em;
  font-size: 1.9em; line-height: 1; color: var(--craft-amber);
  opacity: 0.85;
}
.manifesto .attribution { margin-top: 28px; }

/* --- Feature (lead-story) card --- */
.feature-card {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  background: var(--z-deep); background-image: var(--grain-bg);
  border-radius: var(--radius-lg); overflow: hidden;
  color: inherit; border-bottom: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3, 0 20px 40px rgba(10,53,73,0.12)); color: inherit; }
.feature-card .fc-body { padding: 52px 56px; display: flex; flex-direction: column; gap: 18px; }
.feature-card .fc-num {
  font-family: var(--font-serif-display); font-style: italic;
  font-size: 20px; color: var(--craft-amber);
}
.feature-card h3 {
  font-family: var(--font-serif-display); font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1;
  color: var(--paper-cream); letter-spacing: var(--tracking-display);
}
.feature-card h3 em { font-style: italic; color: var(--craft-amber); }
.feature-card p { color: rgba(250,245,235,0.72); font-size: 16px; max-width: 46ch; flex: 1; margin: 0; }
.feature-card .fc-cta {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--paper-cream);
}
.feature-card .fc-cta::after { content: " →"; color: var(--craft-amber); }
.feature-card .fc-art {
  background: var(--bone-light);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; min-height: 280px;
}
.feature-card .fc-art img { max-width: 100%; max-height: 320px; }

/* --- Pillar page-head art --- */
.page-head .head-art { display: flex; justify-content: center; margin-bottom: 28px; }
.page-head .head-art img { max-height: 150px; width: auto; }

/* --- Spot illustrations on cards --- */
.article-card .spot, .pillar-card .spot { height: 96px; display: flex; align-items: flex-start; }
.article-card .spot img, .pillar-card .spot img { height: 96px; width: auto; }

/* --- Stat, editorial scale --- */
.stat-xl .num {
  font-family: var(--font-serif-display); font-size: var(--fs-stat);
  line-height: 1.0; color: var(--z-deep); letter-spacing: var(--tracking-display);
}
.stat-xl .num em { font-style: italic; color: var(--craft-amber); }
.stat-xl .lbl {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--ink-60); margin-top: 12px; max-width: 30ch;
}

/* --- Article micro-signatures --- */
.prose > p:first-of-type::first-letter {
  font-family: var(--font-serif-display);
  float: left; font-size: 3.55em; line-height: 0.82;
  padding: 6px 10px 0 0; color: var(--craft-amber);
}
.prose blockquote { position: relative; padding-left: 34px; border-left: 0; }
.prose blockquote::before {
  content: "\201C";
  position: absolute; left: -6px; top: -0.08em;
  font-family: var(--font-serif-display);
  font-size: 2.6em; line-height: 1; color: var(--craft-amber); opacity: 0.9;
}

/* --- Reveal on scroll (progressive enhancement; JS adds .in) --- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-card .fc-art { min-height: 200px; order: -1; }
  .feature-card .fc-body { padding: 32px 28px; }
  .manifesto { padding: 64px 0; }
  .manifesto .quote::before { left: -0.1em; top: -0.7em; }
}

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 760px) {
  .wrap, .prose-wrap { padding: 0 22px; }
  .masthead .wrap { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
  .masthead nav { gap: 16px; }
  .page-head { padding: 48px 0 32px; }
  .footer-cols { gap: 36px; }
}

/* ============ Citation-layer additions (Aug 2026 GEO pass) ============ */
/* Content layer only — no art-direction change. */

.last-updated {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 20px;
}

.faq-block {
  border-top: 1px solid var(--ink-20);
  margin-top: 56px;
  padding-top: 36px;
}
.faq-block > h2 { margin-top: 0; }
.faq-block h3 { margin-top: 28px; }