/* Editorial system */
:root {
 --paper:#fff; --paper-dim:#f3f5f7; --ink:#111827; --ink-soft:#4b5563; --ink-mute:#596579;
 --navy-950:#111827; --navy-900:#111827; --navy-700:#29364a; --navy-border:#d9dee7;
 --copper:#2457e8; --copper-deep:#1946c5; --copper-bright:#2457e8; --copper-tint:#eaf0ff;
 --font-body:'Inter',system-ui,sans-serif; --font-display:'Source Serif 4',Georgia,serif; --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--copper-deep);text-decoration:none;text-underline-offset:5px}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--copper);outline-offset:5px}
.skip-link{position:absolute;top:12px;left:16px;transform:translateY(-200%);padding:10px 16px;background:var(--ink);color:white;z-index:100}
.skip-link:focus{transform:none}
.site-header,.content,.footer-inner{max-width:1240px;margin:auto;padding-left:40px;padding-right:40px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;border-bottom:1px solid var(--navy-border)}
.nav-brand{font:500 36px/1.15 var(--font-display);letter-spacing:-1.4px;color:var(--ink)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:15px;color:var(--ink);padding:10px 0}
.nav-links a.active{color:var(--copper-deep);text-decoration:underline;text-decoration-thickness:2px}
.content{padding-top:64px;padding-bottom:80px}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;line-height:1.12}
h1{font-size:clamp(38px,4.6vw,64px);margin:16px 0 28px}
p{margin:0 0 22px}
.hero{padding:0 0 56px}
.editorial-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center}
.hero-eyebrow,.section-label{font:12px/1.6 var(--font-mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-mute);margin:0 0 24px}
.hero h1{font-size:clamp(42px,5.5vw,76px);letter-spacing:-.048em;margin:0 0 24px;line-height:1.04}
.hero h1 em{color:var(--copper);font-weight:400;margin-right:.08em}
.hero .lede{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:48ch}
.editorial-link{font:500 23px var(--font-display)}
.hero-figure{margin:0;padding:20px 0 12px 32px;border-left:1px solid var(--navy-border)}
.hero-figure figcaption{font:500 28px/1.2 var(--font-display);letter-spacing:-.025em}
.hero-figure p{font-size:12px;line-height:1.7;color:var(--ink-mute);margin:28px 0 12px}
.hero-figure>a{font-size:14px}
.mini-timeline{margin-top:52px}
.mini-row{display:grid;grid-template-columns:125px 1fr;align-items:center;gap:12px;margin:0 0 48px;font-size:12px}
.mini-row:last-child{margin-bottom:0}
.mini-track{height:14px;border-bottom:1px solid #abb5c6;position:relative}
.mini-bar{display:block;height:14px;position:relative}
.mini-bar b{position:absolute;right:0;bottom:23px;white-space:nowrap;font-weight:400;color:var(--ink)}
.mini-stock{width:23.0769%;background:var(--copper)}
.mini-ready{width:92.3077%;background:var(--ink)}
.mini-gap{margin-left:23.0769%;width:69.2308%;background:repeating-linear-gradient(135deg,white,white 3px,var(--copper) 3px,var(--copper) 4px)}
.featured-writing,.author-strip{display:grid;grid-template-columns:180px 1fr;gap:36px;border-top:1px solid var(--navy-border);padding:36px 0}
.featured-writing .section-label{padding-top:12px}
.note-list{margin-bottom:40px}
.note-item{display:block;position:relative;padding:30px 38px 32px 0;border-top:1px solid var(--navy-border);color:var(--ink)}
.note-item-link{display:block;color:inherit}
.note-item-link:hover{text-decoration:none}
.note-item-link:hover .note-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;color:var(--copper-deep)}
.note-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.note-title{font:500 34px/1.2 var(--font-display);letter-spacing:-.025em;color:var(--ink);margin:0 0 16px}
.note-date{display:block;font:12px/1.8 var(--font-mono);color:var(--ink-mute);white-space:nowrap}
.note-excerpt{font-size:18px;color:var(--ink-soft);margin:0 0 18px}
.note-tags{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.tag{font-size:12px;color:var(--ink-mute)}
.tag:hover{color:var(--copper-deep);text-decoration:underline}
.tag+.tag:before{content:'/';margin-right:14px;color:#8793a5}
.topic-chip-row{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 40px}
.topic-chip{font:12px var(--font-mono);letter-spacing:.4px;color:var(--ink-mute);padding:6px 14px;border:1px solid var(--navy-border);border-radius:999px}
.topic-chip:hover{color:var(--copper-deep);border-color:var(--copper);text-decoration:none}
.project-item{padding:28px 0;border-top:1px solid var(--navy-border)}
.project-item:first-child{border-top:0}
.project-title{font:500 26px var(--font-display);color:var(--ink);margin:0 0 10px}
.project-body{color:var(--ink-soft);max-width:66ch;margin:0 0 14px}
.project-item.is-placeholder{opacity:.7}
.featured-writing .note-list{margin:0}
.featured-writing .note-item:first-child{border:0;padding-top:0}
.featured-writing .note-title{font-size:clamp(32px,4vw,52px);line-height:1.1}
.read-arrow{position:absolute;right:0;top:10px;color:var(--copper);font-size:24px}
.author-strip h2{font-size:26px;margin:5px 0}
.author-strip p{color:var(--ink-soft);max-width:66ch;margin-bottom:12px;font-size:16px}
.author-strip a{font-size:15px}
.page-title{max-width:850px}
.writing-intro{max-width:65ch;color:var(--ink-soft);margin-bottom:48px}
.prose{max-width:70ch;margin:auto}
.prose p{color:var(--ink-soft)}
.prose h2{font-size:30px;margin:40px 0 20px}
.about-page>p:nth-of-type(2){font-size:22px;color:var(--ink);line-height:1.6}
.essay{max-width:1000px;margin:auto}
.post-header{max-width:900px;margin:0 auto 44px;padding-bottom:32px;border-bottom:1px solid var(--navy-border)}
.post-title{font-size:clamp(38px,4.7vw,64px);line-height:1.08;margin:22px 0}
.post-meta{font-size:14px;color:var(--ink-mute)}
.post-meta span{margin:0 10px}
.post-body{max-width:66ch;margin:auto}
.post-body p,.post-body li{color:var(--ink-soft)}
.post-body h2{font-size:32px;line-height:1.2;margin:48px 0 22px}
.post-body li{margin-bottom:16px}
.post-body a,.prose a{text-decoration:underline}
.post-body blockquote{margin:32px 0;padding:8px 24px;border-left:3px solid var(--copper)}
.post-body pre{overflow:auto;padding:20px;background:var(--paper-dim)}
.post-body code{font-family:var(--font-mono);font-size:.9em}
.contact-card{max-width:860px;padding:0;min-height:440px}
.contact-card>p:not(.section-label){max-width:60ch;color:var(--ink-soft)}
.contact-links{display:flex;flex-direction:column;margin-top:48px}
.contact-links a{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:20px;padding:22px 0;border-top:1px solid var(--navy-border);font-size:18px;overflow-wrap:anywhere}
.contact-links a>span:first-child{color:var(--ink-mute);font-size:14px}
.site-footer{border-top:1px solid var(--navy-border)}
.footer-inner{display:flex;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:30px;font-size:14px;color:var(--ink-mute)}
.footer-links{display:flex;gap:24px}
.footer-links a{color:var(--ink-mute)}
@media(max-width:1000px){.editorial-hero{grid-template-columns:1.15fr 1fr;gap:28px}.hero-figure{padding-left:24px}.mini-row{grid-template-columns:1fr;margin-bottom:36px;gap:30px}.hero-figure figcaption{font-size:25px}.mini-timeline{margin-top:28px}}
@media(max-width:760px){.site-header,.content,.footer-inner{padding-left:22px;padding-right:22px}.nav{flex-wrap:wrap;gap:14px;padding:22px 0}.nav-brand{font-size:30px}.nav-links{gap:22px}.nav-links a{font-size:14px}.content{padding-top:38px;padding-bottom:48px}.editorial-hero{grid-template-columns:1fr;gap:36px}.hero h1{font-size:clamp(40px,8.5vw,62px);max-width:13ch}.hero .lede{font-size:18px}.hero-figure{border-left:0;border-top:1px solid var(--navy-border);padding:28px 0 0}.mini-row{grid-template-columns:125px 1fr;gap:12px;margin-bottom:44px}.mini-timeline{margin-top:48px}.hero{padding-bottom:36px}.featured-writing,.author-strip{grid-template-columns:1fr;gap:12px;padding:28px 0}.featured-writing .section-label{padding:0;margin-bottom:12px}.note-item-top{display:block}.note-title{font-size:30px}.note-date{white-space:normal;margin-bottom:12px}.note-excerpt{font-size:17px}.post-title{font-size:38px}.post-body{font-size:18px}.post-body h2{font-size:28px}.contact-links a{grid-template-columns:1fr auto;gap:6px;font-size:17px}.contact-links a>span:first-child{grid-column:1/-1}.footer-inner{flex-wrap:wrap}.about-page>p:nth-of-type(2){font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Interactive recovery figure */
.recovery-figure { margin: 36px 0; padding: 26px; border: 1px solid #c4b9a8; border-radius: 12px; background: #fffdf8; }
.recovery-figure h2 { font-size: 27px; margin: 8px 0 12px; }
.recovery-figure p { font-size: 15px; }
.figure-label { font: 12px var(--font-mono); color: var(--copper-deep); text-transform: uppercase; letter-spacing: 1px; }
.dependency-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; list-style: none; margin: 24px 0 16px; }
.dependency-chain li { position: relative; margin: 0; }
.dependency-chain li:not(:last-child)::after { content: '→'; position: absolute; right: -12px; top: 24px; color: var(--ink-soft); }
.dependency-chain button { width: 100%; height: 100%; padding: 13px 8px; text-align: left; border: 1px solid #b8b0a4; background: var(--paper); border-radius: 6px; color: var(--ink); font: 600 13px var(--font-body); cursor: pointer; }
.dependency-chain button span { display: block; margin-top: 7px; font-size: 12px; font-weight: 400; line-height: 1.5; }
.dependency-chain button[aria-pressed="true"] { background: var(--navy-900); color: white; border-color: var(--navy-900); }
.chain-detail { min-height: 78px; padding: 14px; background: var(--paper); border-left: 3px solid var(--copper); }
.recovery-controls { margin: 24px 0; }
.recovery-controls label { display: block; font-size: 14px; font-weight: 600; }
.recovery-controls select { display: block; width: 100%; margin: 8px 0; padding: 12px 8px; border: 1px solid #8d8172; border-radius: 6px; background: white; color: var(--ink); font: 14px var(--font-body); }
.recovery-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 20px 0 8px; }
.recovery-inputs output { display: block; font: 16px var(--font-mono); margin-top: 6px; }
.recovery-inputs input { display: block; width: 100%; min-height: 44px; accent-color: var(--navy-900); cursor: pointer; }
.figure-reset { padding: 10px 12px; background: white; border: 1px solid #8d8172; border-radius: 6px; color: var(--ink); cursor: pointer; font: 13px var(--font-body); }
.recovery-figure button:focus-visible, .recovery-figure input:focus-visible, .recovery-figure select:focus-visible { outline: 3px solid var(--copper-deep); outline-offset: 4px; }
.timeline-axis { display: flex; justify-content: space-between; font: 11px var(--font-mono); color: var(--ink-soft); margin: 24px 0 18px; }
.timeline-label { font-size: 13px; margin: 12px 0 5px; color: var(--ink-soft); }
.timeline-track { height: 18px; background: #e8e3da; border-radius: 3px; overflow: hidden; }
.timeline-bar { height: 100%; }
.stock-bar { background: #35675e; }
.ready-bar { background: var(--navy-700); }
.gap-bar { background: repeating-linear-gradient(135deg, #9b472c, #9b472c 5px, #c5744c 5px, #c5744c 9px); }
.recovery-figure .recovery-result { color: var(--navy-950); font: 600 22px/1.4 var(--font-display); margin-bottom: 12px; }
.recovery-figure .figure-assumptions { font-size: 12px; line-height: 1.65; color: var(--ink-soft); }
#recovery-title { scroll-margin-top: 130px; }
@media (max-width: 640px) {
  .recovery-figure { margin: 28px 0; padding: 18px 14px; }
  .dependency-chain { grid-template-columns: 1fr; gap: 16px; }
  .dependency-chain li:not(:last-child)::after { content: '↓'; left: 16px; top: auto; bottom: -17px; }
  .dependency-chain button { padding: 12px; font-size: 14px; }
  .dependency-chain button span { margin-top: 4px; }
  .recovery-inputs { grid-template-columns: 1fr; gap: 10px; }
  .chain-detail { min-height: 0; }
}

/* Isometric illustrations keep the constraint attached to physical objects. */
.scene-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.supply-scene { margin: 22px -12px 18px; padding: 18px 10px 12px; border-radius: 10px; background: linear-gradient(160deg,#eef2ef,#f7f0e2); border: 1px solid #ded9cd; }
.scene-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 0 8px; color: #4a5d65; font: 11px/1.5 var(--font-mono); }
.scene-event { color: #96432f; }
.illustrated-chain { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; margin: 18px 0; }
.illustrated-chain li:not(:last-child)::after { right: -7px; top: 53px; font-size: 17px; z-index: 2; }
.illustrated-chain li:first-child::after { content: '›'; }
.illustrated-chain button { border: 1px solid transparent; padding: 4px 2px 12px; border-radius: 8px; text-align: center; background: transparent; }
.illustrated-chain button:hover { background: #ffffffa8; border-color: #c5ccc6; }
.illustrated-chain button[aria-pressed="true"] { background: #fffdf6; border-color: #9b784b; color: var(--ink); box-shadow: 0 3px 10px #344e5812; }
.illustrated-chain button svg { display: block; width: 100%; height: auto; }
.illustrated-chain button .node-title { font: 600 12px/1.4 var(--font-body); margin: 7px 0 0; color: #253f4b; }
.illustrated-chain button span { font-size: 11px; line-height: 1.4; color: #4b5d63; margin: 6px 0 0; }
.illustrated-chain button #scene-production-label { color: #99402d; }
.supply-scene[data-covered="true"] #scene-production-label { color: #286657; }
.scene-response { display: flex; align-items: center; gap: 12px; padding: 12px; border-top: 1px dashed #b8c3ba; }
.scene-response .response-mark { color: #577366; font-size: 28px; }
.scene-response p { font-size: 12px; color: #435963; margin: 0; }
@media (min-width: 900px) {
  .recovery-figure { margin-left: -26px; margin-right: -26px; }
}
@media (max-width: 640px) {
  .supply-scene { margin-left: -5px; margin-right: -5px; padding: 16px 10px 6px; }
  .illustrated-chain { grid-template-columns: 1fr; gap: 14px; }
  .illustrated-chain button { display: grid; grid-template-columns: 118px 1fr; grid-template-rows: 1fr 1fr; column-gap: 12px; padding: 4px 10px 4px 0; text-align: left; align-items: center; }
  .illustrated-chain button svg { grid-row: 1 / 3; }
  .illustrated-chain button .node-title { font-size: 15px; align-self: end; margin: 0 0 4px; }
  .illustrated-chain button span { font-size: 12px; align-self: start; margin: 0; }
  .illustrated-chain li:not(:last-child)::after { content: '↓'; left: 54px; right: auto; top: auto; bottom: -18px; }
  .illustrated-chain li:first-child::after { content: '↓'; }
}

/* Match the existing interactive illustration to the editorial system. */
.recovery-figure{background:#f8faff;border-color:#d9dee7;border-radius:0;padding:28px;margin:40px 0}
.recovery-figure h2{margin-top:8px}
.recovery-figure p{font-size:16px}
.recovery-figure .figure-assumptions{font-size:14px}
.figure-label,.scene-heading,.scene-response p,.timeline-axis{font-size:12px}
.recovery-figure .recovery-result{font-size:28px;color:var(--ink);padding-top:20px;border-top:1px solid var(--navy-border)}
.supply-scene{background:#fff;border-color:#d9dee7;border-radius:0}
.scene-heading{color:var(--ink-soft)}
.illustrated-chain button[aria-pressed="true"]{background:#edf2ff;border-color:var(--copper);box-shadow:none}
.illustrated-chain button .node-title{font-size:14px;color:var(--ink)}
.illustrated-chain button span{font-size:12px;color:var(--ink-soft)}
.chain-detail{background:#eef3ff;border-left-color:var(--copper)}
.stock-bar{background:var(--copper)}
.ready-bar{background:var(--ink)}
.gap-bar{background:repeating-linear-gradient(135deg,#dce5ff,#dce5ff 4px,#2457e8 4px,#2457e8 5px)}
.timeline-track{background:#e4e9f1;border-radius:0}
.timeline-label{font-size:14px}
.recovery-controls select,.figure-reset{font-size:15px;border-color:#8693a6;border-radius:3px}
.recovery-inputs input{accent-color:var(--copper)}
#recovery-title{scroll-margin-top:28px}
@media(min-width:1100px){.recovery-figure{margin-left:-70px;margin-right:-70px}}
@media(max-width:640px){.recovery-figure{padding:20px 16px;margin:32px 0}.recovery-figure .figure-assumptions{font-size:14px}.illustrated-chain button .node-title{font-size:15px}.hero-figure p{font-size:12px}}
