/* ===== Story detail pages ===== */
/* shared bits lifted from v6 */
.harrow{display:inline-block;vertical-align:-0.16em;margin-left:7px;stroke:currentColor;fill:none}
.logo img.mark{width:auto;height:34px;border:0;border-radius:0;transform:none;background:none}
.nav ul a.active{color:#fff;border-bottom-color:#fff}
section{padding:96px 0;position:relative}
section.story-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 60px));border-top:1.5px dashed rgba(255,255,255,0.17)}
.ph{display:block;filter:drop-shadow(0 16px 26px rgba(3,10,40,0.42))}

/* ============ STORY HERO ============ */
.story-hero{padding:54px 0 0;text-align:center;overflow:hidden}
.breadcrumb{display:inline-flex;align-items:center;gap:9px;font-family:'Saira',sans-serif;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--faint);margin-bottom:22px}
.breadcrumb a{text-decoration:none;color:var(--faint)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.5}
.breadcrumb .here{color:var(--sky)}
.cat-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.cat-chip{font-family:'Saira',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:#fff;border:1.5px solid var(--line-mid);border-radius:30px;padding:6px 15px}
.cat-chip.lead{background:#fff;color:var(--bg-deep);border-color:#fff}
.story-hero h1{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(38px,6.4vw,82px);line-height:0.98;text-transform:uppercase;letter-spacing:-1.5px;text-wrap:balance;max-width:960px;margin:0 auto}
.story-hero h1 em{font-style:normal;color:var(--sky)}
.story-dek{margin:28px auto 0;font-size:clamp(17px,1.5vw,20px);color:var(--soft);max-width:660px;line-height:1.62;text-wrap:pretty}
.story-dek strong{color:#fff;font-weight:600}
.byline{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:26px;font-size:13px;color:var(--faint)}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--faint)}
.byline a{color:var(--sky);text-decoration:none}
.byline a:hover{text-decoration:underline}
.byline .tag-here{font-family:'Caveat',cursive;font-weight:600;font-size:20px;color:var(--success)}

/* the "is this yours" honesty line */
.disclo{max-width:620px;margin:30px auto 0;display:flex;gap:14px;align-items:flex-start;text-align:left;border:1.5px dashed rgba(255,255,255,0.32);border-radius:12px;padding:18px 22px;background:rgba(255,255,255,0.035)}
.disclo .mk{font-family:'Caveat',cursive;font-weight:700;font-size:30px;color:var(--success);line-height:1;flex:none;margin-top:-2px}
.disclo p{font-size:14.5px;color:var(--soft);line-height:1.6;text-wrap:pretty}
.disclo p strong{color:#fff;font-weight:600}

/* ============ STAT STRIP ============ */
.stat-strip{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{position:relative;padding:6px 28px;text-align:center}
.stat + .stat::before{content:"";position:absolute;left:0;top:8px;bottom:8px;border-left:1.5px dashed rgba(255,255,255,0.28)}
.stat .big{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,58px);line-height:1;color:#fff;white-space:nowrap}
.stat .big em{font-style:normal;color:var(--sky)}
.stat .arrow-to{font-family:'Caveat',cursive;font-weight:700;font-size:21px;color:var(--success);display:block;margin-top:8px}
.stat p{font-size:13px;color:var(--soft);margin-top:8px;line-height:1.45;max-width:200px;margin-left:auto;margin-right:auto}

/* ============ READABLE BODY ============ */
.prose{max-width:720px;margin:0 auto}
.prose .kicker{font-family:'Caveat',cursive;font-weight:600;font-size:24px;color:var(--success);display:block;margin-bottom:10px}
.prose h2{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;line-height:1.12;letter-spacing:-0.5px;margin-bottom:22px;text-wrap:balance}
.prose h2 em{font-style:normal;color:var(--sky)}
.prose p{font-size:17px;line-height:1.74;color:var(--soft);margin-bottom:20px;text-wrap:pretty}
.prose p strong{color:#fff;font-weight:600}
.prose p:last-child{margin-bottom:0}

/* extraction window (line-art, blueprint vocabulary) */
.coin-window{max-width:760px;margin:8px auto 0}
.cw-frame{border:2.5px solid #fff;border-radius:14px;background:rgba(255,255,255,0.04);filter:drop-shadow(0 22px 36px rgba(3,10,40,0.42));overflow:hidden;transform:rotate(-0.6deg)}
.cw-head{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:2px solid rgba(255,255,255,0.5)}
.cw-head i{width:9px;height:9px;border-radius:50%;border:2px solid #fff;display:block;flex:none}
.cw-head em{font-style:normal;font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin-left:8px}
.cw-head .chip{margin-left:auto;font-family:'Saira',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--success);border:2px solid var(--success);border-radius:20px;padding:3px 11px}
.cw-body{display:grid;grid-template-columns:0.85fr 1.15fr;gap:0}
.cw-doc{padding:24px 22px;border-right:2px dashed rgba(255,255,255,0.22);position:relative}
.cw-doc .pg{border:2px solid rgba(255,255,255,0.5);border-radius:6px;padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.cw-doc .pg i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,0.22)}
.cw-doc .pg i:nth-child(3){width:78%}
.cw-doc .pg i:nth-child(6){width:62%}
.cw-doc .pg i.hot{background:var(--sky);height:8px;width:88%}
.cw-doc .stamp{position:absolute;bottom:14px;right:14px;font-family:'Caveat',cursive;font-weight:700;font-size:17px;color:var(--success);transform:rotate(-5deg)}
.cw-out{padding:22px 22px;display:flex;flex-direction:column;gap:11px}
.cw-out .ext{display:flex;align-items:center;gap:11px;font-size:13.5px;color:#fff}
.cw-out .ext .ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--success);color:var(--bg-deep);display:grid;place-items:center;font-size:12px;font-weight:700}
.cw-out .ext span{color:var(--soft)}
.cw-out .ext b{font-family:'Saira',sans-serif;font-weight:600;color:#fff;margin-left:auto;white-space:nowrap}
.cw-out .more{font-family:'Caveat',cursive;font-weight:600;font-size:19px;color:var(--success);margin-top:4px}
.cw-cap{text-align:center;font-size:12.5px;color:var(--faint);margin-top:16px}

/* ============ BEFORE / AFTER (from v6) ============ */
.ba-grid{display:grid;grid-template-columns:1fr 90px 1fr;gap:0;align-items:stretch;max-width:1000px;margin:0 auto}
.ba-card{border-radius:14px;padding:34px 34px 30px;position:relative}
.ba-before{border:2px solid rgba(255,255,255,0.30);background:rgba(255,255,255,0.03);transform:rotate(-1deg)}
.ba-after{border:2.5px solid #fff;background:rgba(255,255,255,0.06);filter:drop-shadow(0 22px 36px rgba(3,10,40,0.42));transform:rotate(1deg)}
.ba-tag{font-family:'Saira',sans-serif;font-weight:800;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;display:inline-block;padding:6px 14px;border-radius:30px;margin-bottom:8px}
.ba-before .ba-tag{color:var(--faint);border:2px solid var(--line-mid)}
.ba-after .ba-tag{color:var(--ink);background:#fff}
.ba-card h3{font-family:'Saira',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;color:#fff;margin:4px 0 22px;line-height:1.15}
.ba-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.ba-card li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.ba-before li{color:var(--soft)}
.ba-after li{color:#fff}
.ba-ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:1px}
.ba-before .ba-ico{border:2px solid var(--line-mid);color:var(--faint)}
.ba-after .ba-ico{background:var(--success);color:#0A35A0}
.ba-mid{display:flex;align-items:center;justify-content:center;position:relative;z-index:3}
.ba-mid svg{width:88px;display:block}
.ba-mid .lbl{position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(-4deg);font-family:'Caveat',cursive;font-weight:700;font-size:22px;color:var(--success);white-space:nowrap}

/* ============ IMPACT NUMBERS ============ */
.impact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:46px 40px;max-width:920px;margin:0 auto}
.impact{position:relative}
.impact .num{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(40px,5vw,64px);line-height:1;color:#fff}
.impact .num em{font-style:normal;color:var(--sky)}
.impact p{font-size:15px;color:var(--soft);margin-top:12px;max-width:340px;line-height:1.55}
.impact p strong{color:#fff;font-weight:600}
.impact .note{font-family:'Caveat',cursive;font-weight:600;font-size:20px;color:var(--success);display:block;margin-top:8px}
.impact:nth-child(1){transform:rotate(-0.5deg)}
.impact:nth-child(4){transform:rotate(0.5deg)}

/* pull quote */
.pull{max-width:820px;margin:0 auto;text-align:center;position:relative;padding:0 20px}
.pull .qm{font-family:'Caveat',cursive;font-weight:700;font-size:80px;color:rgba(255,255,255,0.4);line-height:0.6;display:block;margin-bottom:6px}
.pull blockquote{font-family:'Saira',sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,40px);line-height:1.18;color:#fff;text-transform:uppercase;letter-spacing:-0.5px;text-wrap:balance}
.pull blockquote em{font-style:normal;color:var(--sky)}
.pull .src{display:block;margin-top:22px;font-size:13px;color:var(--faint);text-transform:uppercase;letter-spacing:1.2px;font-family:'Saira',sans-serif;font-weight:600}

/* ============ BRIDGE TO US ============ */
.bridge-wrap{display:grid;grid-template-columns:1fr 0.92fr;gap:60px;align-items:center;max-width:1040px;margin:0 auto}
.bridge-copy .kicker{font-family:'Caveat',cursive;font-weight:600;font-size:24px;color:var(--success);display:block;margin-bottom:10px}
.bridge-copy h2{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,42px);text-transform:uppercase;line-height:1.1;letter-spacing:-0.5px;margin-bottom:20px;text-wrap:balance}
.bridge-copy h2 em{font-style:normal;color:var(--sky)}
.bridge-copy p{font-size:16px;line-height:1.72;color:var(--soft);margin-bottom:16px;max-width:460px;text-wrap:pretty}
.bridge-copy p strong{color:#fff;font-weight:600}
.napkin{position:relative;border:2.5px solid #fff;border-radius:14px;background:rgba(255,255,255,0.04);padding:32px 34px 28px;filter:drop-shadow(0 22px 34px rgba(3,10,40,0.42));transform:rotate(-0.8deg)}
.napkin .scr{position:absolute;top:-30px;right:8%;font-family:'Caveat',cursive;font-weight:600;font-size:21px;color:var(--success)}
.napkin h4{font-family:'Caveat',cursive;font-weight:700;font-size:26px;color:#fff;margin-bottom:18px}
.nrow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1.5px dashed rgba(255,255,255,0.3)}
.nrow span{font-size:14px;color:var(--soft)}
.nrow b{font-family:'Caveat',cursive;font-weight:700;font-size:24px;color:#fff;white-space:nowrap}
.ntot{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.ntot span{font-family:'Saira',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;color:#fff}
.ntot b{font-family:'Caveat',cursive;font-weight:700;font-size:30px;color:var(--success);white-space:nowrap}

/* ============ CTA ============ */
.cta{text-align:center;position:relative}
.cta .hand{display:block;margin-bottom:10px}
.cta h2{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(34px,5vw,60px);text-transform:uppercase;line-height:1.06;letter-spacing:-1px}
.cta h2 em{font-style:normal;color:var(--sky)}
.cta p{margin:22px auto 34px;color:var(--soft);max-width:560px;font-size:17px;line-height:1.7}
.cta-form{display:flex;align-items:stretch;gap:8px;background:#fff;border-radius:9px;padding:7px;width:min(540px,100%);margin:0 auto;box-shadow:0 16px 30px rgba(3,10,40,0.4)}
.cta-form input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:'Inter',sans-serif;font-size:15.5px;color:var(--ink);padding:0 16px}
.cta-form input::placeholder{color:#8A93AB}
.cta-form button{flex:none;background:var(--bg-deep);color:#fff;font-family:'Saira',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.6px;border:0;border-radius:5px;padding:14px 26px;cursor:pointer;transition:transform .16s,background .2s;white-space:nowrap}
.cta-form button:hover{transform:translateY(-1px);background:#0A2A6E}
.cta .channels{margin-top:26px;font-size:14px;color:var(--soft)}
.cta .channels a{color:var(--success);text-decoration:none}
.cta .channels a:hover{text-decoration:underline}
.cta .micro{display:block;margin-top:14px;font-family:'Caveat',cursive;font-weight:600;font-size:21px;color:var(--success)}

/* sources */
.sources{max-width:720px;margin:0 auto;font-size:12.5px;color:var(--faint);line-height:1.7}
.sources b{font-family:'Saira',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--soft);display:block;margin-bottom:8px}
.sources a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.sources a:hover{color:#fff}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .bridge-wrap{grid-template-columns:1fr;gap:44px}
  .napkin{max-width:460px;margin:0 auto}
}
@media (max-width:767px){
  section{padding:64px 0}
  .story-hero{padding:40px 0 0}
  .stat-strip{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .stat{padding:6px 16px}
  .stat:nth-child(3)::before{display:none}
  .stat + .stat::before{top:50%;transform:translateY(-50%);height:48px;bottom:auto}
  .impact-grid{grid-template-columns:1fr;gap:34px}
  .cw-body{grid-template-columns:1fr}
  .cw-doc{border-right:0;border-bottom:2px dashed rgba(255,255,255,0.22)}
  .ba-grid{grid-template-columns:1fr;gap:46px;max-width:480px}
  .ba-mid{transform:rotate(90deg);height:60px}
  .ba-mid .lbl{top:50%;left:120%;transform:translateY(-50%) rotate(-90deg)}
  .cta-form{flex-direction:column;padding:10px;gap:10px}
  .cta-form input{padding:10px 14px;text-align:center}
  .cta-form button{padding:14px}
}
@media (max-width:480px){
  .container{padding:0 20px}
  section.story-sec::before{width:calc(100% - 40px)}
  .stat .big{font-size:clamp(30px,9vw,44px)}
}

/* ===== Story gallery (index) ===== */
.harrow{display:inline-block;vertical-align:-0.16em;margin-left:7px;stroke:currentColor;fill:none}
.logo img.mark{width:auto;height:34px;border:0;border-radius:0;transform:none;background:none}
.nav ul a.active{color:#fff;border-bottom-color:#fff}

/* ============ HERO ============ */
.idx-hero{padding:62px 0 0;text-align:center}
.idx-hero .hand{display:inline-block;margin-bottom:16px}
.idx-hero h1{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(48px,9vw,116px);line-height:0.9;text-transform:uppercase;letter-spacing:-2px}
.idx-hero p.lead{margin:24px auto 0;font-size:clamp(17px,1.6vw,20px);color:var(--soft);max-width:620px;line-height:1.62;text-wrap:pretty}
.idx-hero p.lead strong{color:#fff;font-weight:600}

/* ============ GALLERY ============ */
.gallery{padding:84px 0 104px;position:relative}
.gallery::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 60px));border-top:1.5px dashed rgba(255,255,255,0.17)}
.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 44px}
.story-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.story-card:nth-child(odd){transform:rotate(-0.8deg)}
.story-card:nth-child(even){transform:rotate(0.8deg)}
.story-card:hover{transform:translateY(-10px) rotate(0) scale(1.015)}
.story-card:active{transform:translateY(-4px) rotate(0) scale(1.005)}

.sc-frame{border:2.5px solid #fff;border-radius:14px;background:rgba(255,255,255,0.04);filter:drop-shadow(0 20px 32px rgba(3,10,40,0.42));overflow:hidden;transition:filter .26s ease,background .26s ease}
.story-card:hover .sc-frame{background:rgba(255,255,255,0.07);filter:drop-shadow(0 30px 46px rgba(3,10,40,0.55))}
.sc-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:2px solid rgba(255,255,255,0.5)}
.sc-bar i{width:9px;height:9px;border-radius:50%;border:2px solid #fff;display:block;flex:none}
.sc-bar em{font-style:normal;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin-left:8px}
.sc-bar .chip{margin-left:auto;font-family:'Saira',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--success);border:2px solid var(--success);border-radius:20px;padding:3px 11px}

.sc-stats{display:grid;grid-template-columns:1fr 1fr;gap:0}
.sc-stat{padding:30px 24px;text-align:center;position:relative}
.sc-stat + .sc-stat::before{content:"";position:absolute;left:0;top:24px;bottom:24px;border-left:1.5px dashed rgba(255,255,255,0.28)}
.sc-stat .big{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,52px);line-height:1;color:#fff;white-space:nowrap;transition:color .26s ease}
.story-card:hover .sc-stat .big{color:var(--sky)}
.sc-stat .big em{font-style:normal;color:var(--sky)}
.sc-stat span{display:block;font-family:'Caveat',cursive;font-weight:600;font-size:18px;color:var(--success);margin-top:8px}

.sc-meta{display:flex;align-items:center;gap:12px;margin:24px 2px 10px}
.sc-co{font-family:'Saira',sans-serif;font-weight:800;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:#fff}
.sc-cat{font-family:'Saira',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);border-left:1.5px solid var(--line-mid);padding-left:12px}
.story-card h3{font-family:'Saira',sans-serif;font-weight:800;font-size:clamp(22px,2.4vw,28px);text-transform:uppercase;line-height:1.1;letter-spacing:-0.5px;color:#fff;margin:0 2px 12px;text-wrap:balance;transition:color .26s ease}
.story-card h3 em{font-style:normal;color:var(--sky)}
.story-card:hover h3{color:var(--sky)}
.story-card p{font-size:15px;line-height:1.6;color:var(--soft);margin:0 2px 18px;text-wrap:pretty}
.sc-read{display:inline-flex;align-items:center;font-family:'Caveat',cursive;font-weight:700;font-size:22px;color:var(--success);margin:0 2px;transition:color .26s ease}
.sc-read svg{transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.story-card:hover .sc-read{color:var(--sky)}
.story-card:hover .sc-read svg{transform:translate(5px,-5px)}

/* upcoming / submit note */
.idx-foot{margin-top:64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.idx-foot .hand{font-size:24px}
.idx-foot .btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

@media (max-width:767px){
  .idx-hero{padding:44px 0 0}
  .gallery{padding:60px 0 72px}
  .story-grid{grid-template-columns:1fr;gap:44px}
  .story-card:nth-child(n){transform:none}
  .story-card:hover{transform:translateY(-4px)}
}
@media (max-width:480px){
  .container{padding:0 20px}
  .gallery::before{width:calc(100% - 40px)}
  .sc-stat{padding:24px 16px}
}