/* case-studies/case-studies.css — shared tokens & components for all 5 case studies
   Visual vocabulary matches weekly-report Briefing: paper, ink, gold rails, dense type. */

:root{
  --ink:#06101C; --ink-2:#132338; --paper:#FAF7F0; --sand:#E7DFCE; --sand-2:#F3EEE2;
  --gold:#BA8E35; --gold-pale:#F4E9C2; --gold-soft:#F0E6D2; --gold-fg:#7A5916; --gold-bright:#E4D38B;
  --green:#22583A; --green-bg:#E7F0EA; --red:#8A2A2E; --red-bg:#F7E2E2;
  --slate:#2B2F36; --mute:#8A8374; --line:#E7DFCE;
  --font-sans:"Outfit","Segoe UI",system-ui,sans-serif;
  --font-serif:"Source Serif 4",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#E7E3DB;font-family:var(--font-sans);font-feature-settings:"ss01","tnum";font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;color:var(--ink)}
.wrap{max-width:820px;margin:24px auto;background:#fff;box-shadow:0 1px 0 rgba(12,26,43,.04)}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.serif{font-family:var(--font-serif)}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* Header */
.hdr{background:var(--ink);color:var(--paper)}
.hdr-top{padding:20px 40px 14px;border-bottom:1px solid rgba(228,211,139,.14);display:flex;justify-content:space-between;align-items:center}
.hdr-logo{font-family:var(--font-sans);font-weight:800;font-size:18px;letter-spacing:-.02em}
.hdr-logo span{color:var(--gold-bright);font-weight:300}
.hdr-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:rgba(228,211,139,.55)}
.hdr-logo-img{height:26px;width:auto;display:block}
.ft-logo-img{height:18px;width:auto;display:block}
.hdr-body{padding:26px 40px 26px}
.hdr-eye{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(228,211,139,.7);font-weight:700}
.hdr-title{font-size:36px;font-weight:800;letter-spacing:-.028em;color:var(--paper);margin-top:8px;line-height:1.02}
.hdr-title em{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--gold-bright)}
.hdr-sub{font-size:13.5px;color:rgba(250,247,240,.7);margin-top:10px;line-height:1.5;max-width:640px}
.rail{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(228,211,139,.14);border-bottom:1px solid rgba(228,211,139,.14)}
.rail.cols-3{grid-template-columns:repeat(3,1fr)}
.rail > div{padding:14px 16px;border-left:1px solid rgba(228,211,139,.14)}
.rail > div:first-child{border-left:none}
.rail-l{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:rgba(228,211,139,.55);text-transform:uppercase;font-weight:700}
.rail-v{font-size:26px;font-weight:800;color:var(--paper);margin-top:5px;letter-spacing:-.02em;line-height:1}
.rail-v .suf{font-size:13px;color:rgba(228,211,139,.55);font-weight:500;margin-left:2px}
.rail-v.gold{color:var(--gold-bright)}
.rail-v.green{color:#9FD3B0}
.rail-v.red{color:#E6A5A9}

/* Karl's read */
.karl{padding:28px 40px 30px;background:var(--paper);border-bottom:1px solid var(--sand)}
.karl-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.karl-head::before{content:"";display:inline-block;width:22px;height:1px;background:var(--gold)}
.karl-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.karl-by{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--mute);letter-spacing:.04em}
.karl-body{font-family:var(--font-serif);font-size:18px;line-height:1.55;color:var(--ink-2);font-weight:400}
.karl-body em{font-style:italic;color:var(--gold-fg)}
.karl-body p{margin:0 0 10px}
.karl-body p:last-child{margin-bottom:0}

/* Sections */
.sec{padding:24px 40px 22px;border-bottom:1px solid var(--sand)}
.sec:last-of-type{border-bottom:none}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.sec-num{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:.14em}
.sec-title{font-size:16px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.sec-title em{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--gold-fg)}
.sec-meta{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--mute);letter-spacing:.04em}

/* Body copy */
.lede{font-family:var(--font-serif);font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 14px}
.body{font-size:14px;line-height:1.62;color:var(--ink-2)}
.body p{margin:0 0 10px}
.body p:last-child{margin-bottom:0}
.body strong{color:var(--ink);font-weight:600}

/* Bullet list (briefing-style) */
.blist{list-style:none;padding:0;margin:0}
.blist li{display:grid;grid-template-columns:16px 1fr;gap:8px;padding:6px 0;border-bottom:1px dotted var(--sand);font-size:13px;line-height:1.5;color:var(--ink-2)}
.blist li:last-child{border-bottom:none}
.blist li::before{content:"→";color:var(--gold);font-weight:700;font-size:11px;line-height:1.7}
.blist li strong{color:var(--ink);font-weight:600;display:block;font-size:13px;margin-bottom:1px}
.blist.tight li{padding:4px 0;font-size:12.5px}

/* Stat tile grid */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sand);border:1px solid var(--sand);margin:12px 0}
.stats.cols-3{grid-template-columns:repeat(3,1fr)}
.stats.cols-2{grid-template-columns:repeat(2,1fr)}
.stat{background:#fff;padding:14px 14px 12px}
.stat-l{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.stat-v{font-size:26px;font-weight:800;color:var(--ink);margin-top:5px;letter-spacing:-.02em;line-height:1}
.stat-v .suf{font-size:13px;color:var(--mute);font-weight:500;margin-left:2px}
.stat-v.gold{color:var(--gold-fg)}
.stat-v.green{color:var(--green)}
.stat-v.red{color:var(--red)}
.stat-n{font-size:11px;color:var(--mute);margin-top:6px;line-height:1.4}

/* Quote pull */
.pull{margin:16px 0;padding:18px 22px 18px 26px;background:var(--paper);border-left:3px solid var(--gold);position:relative}
.pull-body{font-family:var(--font-serif);font-size:17px;line-height:1.5;color:var(--ink-2);font-style:italic}
.pull-by{margin-top:10px;font-family:var(--font-mono);font-size:10px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.pull-by strong{color:var(--ink);font-weight:700;text-transform:none;letter-spacing:.02em;font-family:var(--font-sans);font-size:11px}

/* About / metadata box */
.about{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--sand);margin:12px 0}
.about > div{padding:12px 14px;border-left:1px solid var(--sand)}
.about > div:first-child{border-left:none}
.about-l{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:4px}
.about-v{font-size:13px;color:var(--ink);font-weight:500;line-height:1.4}

/* Footer */
.ft{background:var(--ink);color:rgba(250,247,240,.65);padding:20px 40px;font-size:11px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--font-mono);letter-spacing:.04em}
.ft a{color:var(--gold-bright);text-decoration:none}
.ft-mark{font-family:var(--font-sans);font-weight:800;font-size:13px;color:var(--paper);letter-spacing:-.02em}
.ft-mark span{color:var(--gold-bright);font-weight:300}

/* Index page bits */
.idx-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sand);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.idx-card{background:#fff;padding:24px 28px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:background .15s}
.idx-card:hover{background:var(--paper)}
.idx-card-eye{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;justify-content:space-between;align-items:baseline}
.idx-card-eye .num{color:var(--mute);font-weight:500}
.idx-card-name{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.05}
.idx-card-head{font-family:var(--font-serif);font-size:15px;line-height:1.45;color:var(--ink-2);font-weight:400}
.idx-card-stats{display:flex;gap:18px;margin-top:8px;padding-top:10px;border-top:1px dotted var(--sand)}
.idx-card-stat{display:flex;flex-direction:column;gap:2px}
.idx-card-stat-v{font-size:18px;font-weight:800;color:var(--gold-fg);letter-spacing:-.02em;line-height:1}
.idx-card-stat-l{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.idx-card-meta{margin-top:auto;padding-top:8px;font-family:var(--font-mono);font-size:10px;color:var(--mute);letter-spacing:.06em;display:flex;justify-content:space-between}
.idx-card-meta .arrow{color:var(--gold);font-weight:700}

/* Print */
@media print{
  @page{size:letter portrait;margin:0.35in}
  html,body{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  .wrap{box-shadow:none;margin:0;max-width:100%}
  /* Keep small atomic blocks together; let large sections flow across pages */
  .stats,.pull,.about,.rail,.karl{break-inside:avoid;page-break-inside:avoid}
  .hdr-body{break-inside:avoid;page-break-inside:avoid}
  .sec-head{break-after:avoid;page-break-after:avoid}
  .blist li{break-inside:avoid;page-break-inside:avoid}
  .stat{break-inside:avoid;page-break-inside:avoid}
  .ft{break-before:avoid;page-break-before:avoid}
  /* Reduce padding on print so content fills more of each page */
  .hdr-body{padding:20px 32px 22px}
  .karl{padding:20px 32px 22px}
  .sec{padding:18px 32px 18px}
  .ft{padding:14px 32px}
}