/* ============================================================
   CASE STUDY — reusable empty scaffold
   Editorial document. Monochrome; one tint used only for the
   Results block and the tradeoff cards.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --paper:#fff; --tint:#f4f4f4; --ink:#111; --mut:#8c8c8c; --faint:#b4b4b4;
  --rule:#e4e4e4; --rule-strong:#111; --slot:#fbfbfb; --slot-line:#d2d2d2;
  --sans:'Manrope',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --gutter:clamp(22px,5vw,80px); --maxw:1180px; --measure:70ch;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;text-wrap:pretty}
a{color:var(--ink)}a:hover{color:var(--mut)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- top bar ---------- */
.cs-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.cs-top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
.cs-back{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:600}
.cs-back .arrow{transition:transform .3s}
.cs-back:hover .arrow{transform:translateX(-4px)}
.cs-crumb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ---------- guidance note (the writing brief) ---------- */
.note{max-width:64ch;margin:0 0 12px;font-size:13px;line-height:1.5;font-style:italic;color:var(--mut)}
.note::before{content:"BRIEF";display:inline-block;font-style:normal;font-weight:700;font-size:9px;letter-spacing:.16em;
  color:var(--faint);border:1px solid var(--slot-line);border-radius:2px;padding:3px 5px 2px;margin-right:9px;vertical-align:2px}
.note b{font-style:normal;font-weight:600;color:#6f6f6f}

/* ---------- empty slots ---------- */
.slot{border:1px dashed var(--slot-line);border-radius:3px;background:var(--slot)}
.slot.on-tint{background:#fff}
.slot-hook{min-height:56px;max-width:30ch}
.slot-para{min-height:120px;max-width:var(--measure)}
.slot-line{min-height:52px}
.slot-diagram{min-height:420px;display:grid;place-items:center}
.slot-diagram::after{content:"diagram";font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.slot-name{min-height:56px;max-width:16ch}

/* ---------- section chrome ---------- */
.sec{padding:clamp(56px,7vw,104px) 0;border-top:1px solid var(--rule)}
.sec-head{display:block;margin-bottom:22px}
.sec-no{display:block;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--faint)}
.sec-title{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sec-body{display:block}
@media(max-width:720px){
  .sec-head,.sec-body{grid-template-columns:1fr}
  .sec-body>:first-child{grid-column:1}
  .sec-no{padding-top:0}
}

/* ---------- I · fold: hook + problem + built + results ---------- */
.fold{padding-top:8px;padding-bottom:clamp(36px,4vw,52px)}
.hook{display:grid;gap:18px}
.hook-note{margin-bottom:0}
.hook-slots{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:clamp(20px,3vw,44px);align-items:start}
.hook-label,.pair-label{font-size:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.hook .slot-name{border-width:1px}
@media(max-width:860px){.hook-slots{grid-template-columns:1fr}}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px);margin-top:14px;
  padding-top:12px;border-top:1px solid var(--rule)}
.pair h2{margin:0 0 10px;font-size:clamp(19px,1.9vw,23px);font-weight:700;letter-spacing:-.015em}
.pair .slot-para{min-height:88px}
@media(max-width:860px){.pair{grid-template-columns:1fr}}

/* ---------- IV · results (tinted, most prominent block) ---------- */
.results{margin-top:22px;background:var(--tint);border:1px solid #dcdcdc;border-radius:4px;padding:20px}
.results-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:6px}
.results-head h2{margin:0;font-size:clamp(22px,2.3vw,28px);font-weight:800;letter-spacing:-.02em}
.results-key{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6f6f6f;
  border:1px solid #cfcfcf;border-radius:100px;padding:4px 9px;background:#fff}
.results-rows{display:grid;gap:6px;margin-top:10px}
.rrow{display:grid;grid-template-columns:190px minmax(0,1fr) 130px;gap:14px;align-items:stretch;
  background:#fff;border:1px solid #e2e2e2;border-radius:3px;padding:8px 12px}
.rrow .slot{min-height:26px;background:#fcfcfc}
.rrow-status{display:grid;gap:6px}
.rrow-status .slot{min-height:26px}
.rrow-hint{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);align-self:center}
@media(max-width:820px){.rrow{grid-template-columns:1fr;gap:10px}}

/* ---------- VI · decisions & tradeoffs ---------- */
.tradeoffs{display:grid;gap:16px}
.trade{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 18px;background:var(--tint);
  border-left:3px solid var(--rule-strong);border-radius:0 4px 4px 0;padding:20px 22px}
.trade-no{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#9a9a9a;line-height:1.1}
.trade-fields{display:grid;gap:10px}
.tf{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center}
.tf-label{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6f6f6f}
.tf .slot{min-height:46px;background:#fff}
.tf.tall .slot{min-height:62px}
@media(max-width:720px){.tf{grid-template-columns:1fr;gap:6px}.trade{grid-template-columns:1fr}.trade-no{margin-bottom:8px}}

/* ---------- VII · video ---------- */
.embed{position:relative;aspect-ratio:16/9;width:100%;max-width:920px}
.chapters{max-width:920px;margin-top:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.chap{border:1px dashed var(--slot-line);border-top:2px solid #cfcfcf;border-radius:0 0 3px 3px;background:var(--slot);
  min-height:38px;display:grid;place-items:center}
.chap span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.video-second{margin-top:clamp(26px,3vw,40px);padding-top:22px;border-top:1px dashed var(--slot-line);max-width:920px}
.optional{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#6f6f6f;border:1px solid var(--slot-line);border-radius:100px;padding:4px 9px;margin-bottom:10px;background:#fff}
.embed-sm{aspect-ratio:16/9;width:100%;max-width:520px}

/* ---------- VIII · links ---------- */
.links{display:flex;flex-wrap:wrap;gap:14px}
.link-slot{flex:0 1 260px;min-width:220px;border:1px solid var(--rule);border-radius:4px;padding:16px 18px;background:#fff}
.link-label{font-size:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.link-slot .slot{min-height:44px}
.link-note{margin-top:14px}

.cs-foot{border-top:1px solid var(--rule);padding:26px 0 60px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.results .note{max-width:100%;margin-bottom:0}
.pair h2{margin-bottom:8px}

/* filled body copy */
.filled{max-width:var(--measure);font-size:14.5px;line-height:1.5}
.filled p{margin:0 0 8px}
.filled p:last-child{margin-bottom:0}
.pair .filled{max-width:100%}

/* filled results rows */
.rrow.filled-row{grid-template-columns:150px minmax(0,1fr) 108px;align-items:baseline;padding:12px 14px}
.rmetric{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6f6f6f}
.rfig{font-size:14.5px;line-height:1.5}
.rfig b{font-weight:700}
.rstat{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6f6f6f;justify-self:start;border:1px solid #cfcfcf;border-radius:100px;padding:3px 9px 2px;white-space:nowrap}
@media(max-width:820px){.rrow.filled-row{grid-template-columns:1fr;gap:6px}}

/* Breaks out of the text measure via the wrap's own padding, so the bleed is
   relative to the content column and the 240px sidebar can't push it off-screen. */
.arch-fig{margin:0 calc(-1 * var(--gutter)) 6px;width:auto}
.arch-link{display:block;text-decoration:none}
.arch-img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:4px;background:#fff}
.arch-cap{padding-left:var(--gutter);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:10px}
.arch-link:hover+.arch-cap{color:var(--ink)}
.arch-cap .arrow{display:inline-block;transition:transform .3s}
.arch-fig:hover .arch-cap .arrow{transform:translate(2px,-2px)}


.cs-list{margin:0;padding:0;list-style:none;display:grid;gap:11px;max-width:70ch}
.cs-list li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.6;text-wrap:pretty}
.cs-list li::before{content:"•";position:absolute;left:2px;top:0;color:#9a9a9a;line-height:1.6}
.tf-val{font-size:14.5px;line-height:1.5;max-width:62ch}
.trade .tf{align-items:baseline}

.link-a{display:inline-flex;align-items:baseline;gap:7px;min-height:44px;font-size:14.5px;line-height:1.4;text-decoration:none;border-bottom:1px solid var(--ink);align-self:center}
.link-a:hover{border-color:var(--mut)}
.link-a .arrow{transition:transform .3s}
.link-a:hover .arrow{transform:translate(2px,-2px)}
.link-slot{display:flex;flex-direction:column}

/* ---------- shared sidebar (injected by sidebar.js) ---------- */
#sidebar:empty{display:none}
body.has-sidebar #sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;overflow:auto;z-index:30;
  background:var(--paper);border-right:1px solid var(--rule);padding:30px 22px 40px;display:grid;gap:24px;align-content:start}
body.has-sidebar{padding-left:240px}
.wg-top,.wg-group{display:grid;gap:7px;font-size:14.5px}
.wg-top{padding-bottom:20px;border-bottom:1px solid var(--rule)}
.wg-group+.wg-group{padding-top:20px;border-top:1px solid var(--rule)}
.wg-group-name{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.wg-group a,.wg-top a{text-decoration:none;color:var(--ink);line-height:1.45}
.wg-group a:hover{color:var(--mut)}
.wg-group a.is-active{font-weight:700}
.wg-pending{color:#9c9c9c;cursor:default;line-height:1.45;display:inline-flex;align-items:baseline;gap:8px}
.wg-pending em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#b4b4b4;border:1px solid var(--slot-line);border-radius:100px;padding:3px 6px 2px}
@media(max-width:900px){
  body.has-sidebar{padding-left:0}
  body.has-sidebar #sidebar{display:none}
}

/* cap body measure at ~72 characters */
.filled{max-width:545px}
.pair .filled{max-width:100%}
.tf-val{max-width:545px}

.wg-standalone{display:grid;gap:7px;font-size:14.5px;padding-top:20px;border-top:1px solid var(--rule)}
.wg-standalone a{text-decoration:none;color:var(--ink);line-height:1.45}
.wg-standalone a:hover{color:var(--mut)}
.wg-ext{display:inline-flex;align-items:baseline;gap:6px}
.wg-ext-i{font-size:10px;color:#b0b0b0;transition:transform .25s,color .25s}
.wg-ext:hover .wg-ext-i{color:var(--mut);transform:translate(1px,-1px)}
.wg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wg-top a.is-active,.wg-standalone a.is-active{font-weight:700}

.wg-mark{font-size:19px;font-weight:600;letter-spacing:.01em;line-height:1;text-decoration:none;color:#171717;justify-self:start}
.wg-mark:hover{color:var(--mut)}