/* case-study.css — shared layout for all 6 case study pages */


/* ===== TOKENS ===== */
:root{
  --bg:#0A1121;--text:#EDEAE3;--muted:#8C93A6;--accent:#2BA37A;
  --voice:rgba(237,234,227,.78);--rule:rgba(237,234,227,.12);
  --sans:'DM Sans',system-ui,sans-serif;--serif:'EB Garamond',Georgia,serif;
  /* type scale */
  --cs-eyebrow:11px;
  --cs-h1:clamp(3rem,6.5vw,8rem);
  --cs-thesis:1.75rem;
  --cs-section-head:1.625rem;
  --cs-body:1.0625rem;
  --cs-rail-value:0.9375rem;
  --cs-quote:1.5rem;
}

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
.wr{max-width:1680px;margin:0 auto;padding:0 80px}

/* ===== NAV ===== */
nav{display:flex;justify-content:space-between;align-items:center;padding-top:56px}
.wm{display:inline-flex;align-items:center;text-decoration:none;position:relative}
.wm-full{display:block;width:214px;height:22px;overflow:hidden;transition:opacity .2s}
.wm-full img{width:571px;height:571px;margin:-268px 0 0 -183px;display:block}
.wm-init{display:block;width:64px;height:22px;overflow:hidden;position:absolute;top:50%;left:0;transform:translateY(-50%);opacity:0;transition:opacity .2s}
.wm-init img{width:587px;height:587px;margin:-277px 0 0 -272px;display:block}
.wm:hover .wm-full{opacity:0}
.wm:hover .wm-init{opacity:1}
nav ul{display:flex;gap:36px;list-style:none}
nav a{font-family:var(--sans);font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:rgba(237,234,227,.72);text-decoration:none;transition:color .2s}
nav a.here{color:var(--text)}
nav a:hover{color:var(--accent)}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--accent);padding:56px 0 40px;display:flex;justify-content:space-between;align-items:flex-end;margin-top:10vh}
.fl{font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.5rem);color:var(--voice);line-height:1.35}
.fr{font-family:var(--sans);font-size:13px;color:var(--muted);text-align:right;line-height:2}
.fr a{color:var(--muted);text-decoration:none;transition:color .2s}
.fr a:hover{color:var(--accent)}

/* ===== BACK LINK ===== */
.back{display:inline-block;margin-top:48px;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.back:hover{color:var(--accent)}


/* ===== SCROLL REVEAL ===== */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.rv.rv-in{opacity:1;transform:none}

/* ===== PAGE HEADER (above rail) ===== */
.cs-page-header{margin-top:8vh;margin-bottom:0}
.cs-eyebrow{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:var(--cs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:rgba(237,234,227,.52);display:block;margin-bottom:24px;font-weight:500}
.cs-h1{font-family:var(--serif);font-size:var(--cs-h1);font-weight:400;letter-spacing:-.03em;line-height:1.06;margin-bottom:28px}
.cs-h1 em{font-style:italic}
.cs-thesis{font-family:var(--serif);font-size:var(--cs-thesis);font-weight:400;font-style:normal;color:var(--text);line-height:1.35;max-width:900px;margin-top:16px;text-wrap:balance}

/* ===== TWO-COLUMN LAYOUT ===== */
.cs-layout{display:grid;grid-template-columns:260px 1fr;gap:0 72px;margin-top:7vh;align-items:start}

/* rail */
.cs-rail{position:sticky;top:96px;align-self:start;height:fit-content}
.cs-rail-section{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--rule)}
.cs-rail-label{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:var(--cs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:rgba(237,234,227,.38);display:block;margin-bottom:18px;font-weight:500}
.cs-rail-fact{margin-bottom:20px}
.cs-rail-fact:last-child{margin-bottom:0}
.cs-rail-fact-label{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.cs-rail-fact-val{font-family:var(--serif);font-size:var(--cs-rail-value);color:var(--text);line-height:1.4;display:block}

/* rail TOC */
.cs-toc{display:flex;flex-direction:column}
.cs-toc-item{display:flex;align-items:baseline;gap:12px;padding:11px 0;font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:12px;color:var(--muted);text-decoration:none;transition:color .2s;border-bottom:1px solid var(--rule)}
.cs-toc-item:first-of-type{border-top:1px solid var(--rule)}
.cs-toc-n{font-size:10px;letter-spacing:.08em;color:rgba(237,234,227,.28);flex-shrink:0;transition:color .2s;font-variant-numeric:tabular-nums}
.cs-toc-item:hover{color:var(--text)}
.cs-toc-item:hover .cs-toc-n,.cs-toc-item.active .cs-toc-n{color:var(--accent)}
.cs-toc-item.active{color:var(--text)}

/* main column */
.cs-main{min-width:0}

/* sections */
.cs-section{padding-top:120px}
.cs-section:first-child{padding-top:0}
.cs-section-eyebrow{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,234,227,.62);display:block;margin-bottom:24px;font-weight:500}
.cs-section-head{font-family:var(--serif);font-size:var(--cs-section-head);font-weight:400;font-style:normal;color:var(--text);line-height:1.3;max-width:680px;margin-bottom:20px}
.cs-body{max-width:680px}
.cs-body p{font-size:1.125rem;line-height:1.72;color:rgba(237,234,227,.78)}
.cs-body p+p{margin-top:20px}

/* verdict callout (labeled statement, no border — use instead of cs-pq when the line is editorial diagnosis, not a quote) */
.cs-verdict{margin:32px 0;padding:24px 0;border-top:1px solid var(--rule)}
.cs-verdict-eyebrow{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,234,227,.62);display:block;margin-bottom:12px;font-weight:500}
.cs-verdict p{font-family:var(--serif);font-size:1.125rem;color:var(--text);line-height:1.6;font-style:normal}

/* pull-quote (spec: 24px italic, left green border, max one per section) */
.cs-pq{padding-left:28px;border-left:2px solid var(--accent);margin:32px 0}
.cs-pq p{font-family:var(--serif);font-style:italic;font-size:var(--cs-quote);color:var(--text);line-height:1.4}

/* legacy .pq — kept for article page compat, upgraded to spec size */
.pq{padding-left:28px;border-left:2px solid var(--accent);margin:32px 0}
.pq p{font-family:var(--serif);font-style:italic;font-size:var(--cs-quote);color:var(--text);line-height:1.4}

/* ===== SHARED CONTENT COMPONENTS ===== */

/* case-nav */
.case-nav{display:flex;justify-content:space-between;padding:40px 0 0;border-top:1px solid var(--rule);margin-top:8vh}
.case-nav a{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.case-nav a:hover{color:var(--accent)}

/* stats-row (AVGL, Knowledge System) */
.stats-row{display:flex;gap:56px;padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:6vh 0;flex-wrap:wrap}
.stat-num{font-size:clamp(2.5rem,4vw,3.8rem);font-style:italic;color:var(--text);line-height:.95;letter-spacing:-.03em;display:block}
.stat-label{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}

/* plates (section pages) */
.plates-label{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,234,227,.5);display:block;margin-bottom:5vh;margin-top:6vh;font-weight:500}
.plate{margin-bottom:8vh}
/* last plate in a section relinquishes its bottom margin — the next section's padding-top owns that gap instead of stacking */
.cs-section>.plate:last-child{margin-bottom:0}
/* first plate directly after body copy gets explicit top gap; plate-to-plate gaps rely on margin-bottom:8vh from the preceding plate */
.cs-section .cs-body+.plate{margin-top:72px}
.plate-img{background:#EAE6DC;padding:20px;box-shadow:0 24px 72px rgba(0,0,0,.4);cursor:zoom-in}
.plate-img img{width:100%;display:block}
.plate-cap{padding-top:16px;display:flex;gap:20px;align-items:baseline}
.plate-num{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.plate-text{font-style:italic;font-size:.97rem;color:var(--voice);line-height:1.52}

/* lightbox (section pages) */
.lb{position:fixed;inset:0;background:rgba(10,17,33,.96);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s}
.lb.open{opacity:1;pointer-events:all}
.lb-wrap{position:relative;display:flex;align-items:center;gap:28px}
.lb-wrap img{max-width:min(86vw,1200px);max-height:84vh;display:block;object-fit:contain}
.lb-close{position:absolute;top:-44px;right:0;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .2s}
.lb-close:hover{color:var(--text)}
.lb-btn{font-family:var(--sans);font-size:22px;color:rgba(237,234,227,.35);background:none;border:none;cursor:pointer;padding:8px;transition:color .2s;flex-shrink:0}
.lb-btn:hover{color:var(--text)}
.lb-capbar{position:absolute;bottom:-44px;left:0;right:0;display:flex;gap:16px;align-items:baseline}
.lb-capnum{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.lb-captext{font-style:italic;font-size:.9rem;color:var(--voice)}

/* breakout (article pages) */
.breakout{font-family:var(--serif);font-style:italic;font-size:clamp(3rem,6.5vw,8rem);font-weight:400;letter-spacing:-.03em;line-height:1.0;color:var(--accent);padding:7vh 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:6vh 0;display:block}

/* article shared */
.article{max-width:680px;margin-bottom:0}
.article p{font-size:var(--cs-body);line-height:1.65;color:rgba(237,234,227,.62)}
.article p+p{margin-top:20px}
.article .lede{font-size:1.125rem;line-height:1.65}
.art-hdivider,.pe-hdivider,.sec-divider{border:none;border-top:1px solid var(--rule);margin:6vh 0 4vh}

/* outcome rows (both article pages) */
.outcome-rows{border-top:1px solid var(--rule);margin-bottom:8vh}
.outcome-row{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:20px 0;border-bottom:1px solid var(--rule)}
.or-label{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.or-val{font-size:.97rem;line-height:1.65;color:var(--voice)}

/* ===== PARALLEL ITEM GRID — reusable for 2–5 discrete parallel items ===== */
/* Usage: <div class="pg-grid pg-grid--3"> <div class="pg-item"> ... </div> </div>  */
/* Content inside .pg-item: pg-item-label, pg-item-stat, pg-item-name, pg-item-body, pg-item-footer, pg-item-mono */
.pg-grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pg-grid--2{grid-template-columns:repeat(2,1fr)}
.pg-grid--3{grid-template-columns:repeat(3,1fr)}
.pg-grid--4{grid-template-columns:repeat(4,1fr)}
.pg-grid--5{grid-template-columns:repeat(5,1fr)}
.pg-item{background:var(--bg);padding:28px}
.pg-item-label{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:16px}
.pg-item-stat{font-size:clamp(2rem,3vw,2.8rem);font-style:italic;color:var(--text);letter-spacing:-.03em;line-height:.95;display:block;margin-bottom:12px}
.pg-item-name{font-family:'PPNeweMontreal',system-ui,sans-serif;font-size:.9rem;font-weight:500;color:var(--text);display:block;margin-bottom:8px}
.pg-item-body{font-size:.88rem;line-height:1.72;color:var(--voice)}
.pg-item-footer{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.pg-item-mono{font-family:monospace;font-size:.8rem;color:var(--muted)}

/* ===== BREAKPOINTS ===== */
@media(max-width:900px){
  .pg-grid--3,.pg-grid--5{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:1024px){
  .cs-layout{grid-template-columns:1fr;gap:0}
  .cs-rail{position:static;margin-bottom:5vh;padding-bottom:4vh;border-bottom:1px solid var(--rule)}
  .cs-rail-section{display:flex;flex-wrap:wrap;gap:32px;padding-bottom:24px;margin-bottom:24px}
  .cs-rail-section .cs-rail-label{width:100%;margin-bottom:4px}
  .cs-rail-fact{min-width:100px;margin-bottom:0}
  .cs-toc{flex-direction:row;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:8px;padding-top:4px}
  .cs-toc-item{border-top:none;border-bottom:none;padding:8px 20px 8px 0;font-size:11px}
  .cs-toc-item:first-of-type{border-top:none}
  .cs-section{padding-top:60px}
  .cs-section:first-child{padding-top:0}
}

@media(max-width:760px){
  .wr{padding:0 24px}
  nav{padding-top:36px;flex-wrap:wrap;gap:8px 0}
  .wm{width:100%}
  .wm-full{display:none}
  .wm-init{position:static;transform:none;opacity:1}
  nav ul{gap:20px;width:100%}
  .cs-toc{flex-direction:column}
  .cs-toc-item{width:100%;padding:10px 0;border-bottom:1px solid var(--rule)}
  .cs-toc-item:first-of-type{border-top:1px solid var(--rule)}
  footer{flex-direction:column;gap:24px;align-items:flex-start}
  .fr{text-align:left}
  .stats-row{gap:32px}
  .outcome-row{grid-template-columns:1fr}
  .pg-grid--2,.pg-grid--3,.pg-grid--4,.pg-grid--5{grid-template-columns:1fr}
  :root{--cs-thesis:1.375rem;--cs-section-head:1.375rem;--cs-quote:1.25rem;--cs-h1:2.5rem}
  .breakout{font-size:2.25rem}
}