/* ==========================================================================
   Arcestra article template (blog/*). Loaded after site.css.
   ========================================================================== */

/* reading progress */
.rprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:300;pointer-events:none}
.rprog i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--teal),var(--lime));box-shadow:0 0 12px rgba(0,230,202,.6)}

/* hero */
.ahero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(48px,7vw,104px)) 0 clamp(48px,6vw,84px);border-bottom:1px solid var(--line-faint)}
.ahero__art{position:absolute;inset:0 0 0 auto;width:min(62vw,980px);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);mask-image:linear-gradient(90deg,transparent,#000 38%);opacity:.9}
.ahero__art .art__cover{position:absolute;inset:0;aspect-ratio:auto;background:radial-gradient(70% 80% at 70% 30%,rgba(0,230,202,.16),rgba(0,230,202,0) 70%)}
.ahero__art svg{transform:scale(1.04);transform-origin:70% 50%}
.ahero::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(7,17,15,0),var(--ground));pointer-events:none}
.ahero .wrap{position:relative;z-index:1}
.ahero__inner{max-width:880px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ahero__kick{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ahero__kick a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.ahero__kick a:hover{color:var(--teal)}
.ahero__kick i{width:4px;height:4px;border-radius:50%;background:var(--ink-4)}
.ahero__kick .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.ahero h1{margin:0;font-weight:300;font-size:clamp(36px,5.2vw,72px);line-height:1.04;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.ahero__dek{margin:0;max-width:62ch;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink-2)}
.ahero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ahero__meta b{font-weight:500;color:var(--ink)}
.ahero__meta span{display:inline-flex;align-items:center;gap:8px}
.ahero__meta span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink-4)}

/* share */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.share a,.share button{appearance:none;cursor:pointer;display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(12,26,23,.6);box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--ink-2);transition:color .25s,box-shadow .25s,background .25s}
.share a:hover,.share button:hover{color:var(--teal);box-shadow:inset 0 0 0 1px rgba(0,230,202,.5)}
.share a:focus-visible,.share button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.share svg{width:16px;height:16px;fill:currentColor}
.share button[data-copied]::after{content:"Copied";position:absolute;transform:translateY(-34px);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.share button{position:relative}

/* body grid */
.abody{padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px)}
.abody__grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,6vw,104px);align-items:start}

/* table of contents */
.atoc{position:sticky;top:calc(var(--nav-h) + 28px);display:flex;flex-direction:column;gap:14px}
.atoc__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.atoc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-left:1px solid var(--line-faint)}
.atoc ol a{position:relative;display:grid;grid-template-columns:24px 1fr;gap:6px;padding:9px 0 9px 16px;font-size:13.5px;line-height:1.4;color:var(--ink-3);text-decoration:none;transition:color .3s}
.atoc ol a b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;color:var(--ink-4);padding-top:2px;transition:color .3s}
.atoc ol a::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--teal),var(--lime));transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.atoc ol a:hover{color:var(--ink-2)}
.atoc ol a.on{color:var(--ink)}
.atoc ol a.on b{color:var(--teal)}
.atoc ol a.on::before{transform:scaleY(1)}
.atoc ol a.done b{color:var(--ink-3)}
.atoc__cta{margin-top:10px;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:inset 0 0 0 1px var(--line-soft)}
.atoc__cta p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.atoc__cta .btn{align-self:flex-start}
.atoc details{display:none}

/* prose */
.prose{max-width:720px;font-size:clamp(17px,1.15vw,18.5px);line-height:1.78;color:var(--ink-2)}
.prose > p{margin:0 0 1.35em}
.prose > p.lead{font-size:1.2em;line-height:1.62;color:var(--ink)}
.prose > p.lead::first-letter{float:left;font-weight:300;font-size:4.1em;line-height:.86;margin:.06em .12em 0 -.02em;color:transparent;background:linear-gradient(135deg,var(--teal),var(--lime));-webkit-background-clip:text;background-clip:text}
.prose strong{font-weight:500;color:var(--ink)}
.prose em{font-style:italic;color:var(--ink)}
.prose a{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(0,230,202,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--teal)}
.prose code{font-family:var(--mono);font-size:.86em;padding:.1em .35em;border-radius:6px;background:rgba(0,230,202,.08);color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--teal)}
.a-sec{scroll-margin-top:calc(var(--nav-h) + 24px);margin:clamp(56px,6vw,88px) 0 22px;display:flex;flex-direction:column;gap:14px}
.a-sec__k{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.a-sec__k b{font-weight:500;color:var(--teal)}
.a-sec__k::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),rgba(0,230,202,0))}
.a-sec h2{margin:0;font-weight:300;font-size:clamp(28px,2.7vw,40px);line-height:1.12;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}

/* stat callout */
.a-stat{position:relative;margin:clamp(36px,4vw,52px) 0;padding:clamp(26px,3vw,38px) clamp(24px,3vw,40px);border-radius:22px;overflow:hidden;background:radial-gradient(90% 120% at 0% 0%,rgba(0,230,202,.14),rgba(0,230,202,0) 60%),linear-gradient(180deg,#10261F,var(--panel));box-shadow:inset 0 0 0 1px rgba(0,230,202,.28),0 30px 80px -40px rgba(0,230,202,.35)}
.a-stat::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(170,230,220,.16) 1px,transparent 1.4px);background-size:18px 18px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);pointer-events:none}
.a-stat__n{position:relative;display:block;font-weight:300;font-size:clamp(52px,6.4vw,92px);line-height:1;letter-spacing:-.05em;color:transparent;background:linear-gradient(120deg,#E9FBF8 10%,var(--teal) 55%,var(--lime));-webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums}
.a-stat__c{position:relative;margin:14px 0 0;max-width:52ch;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* pull quote */
.a-pull{position:relative;margin:clamp(44px,5vw,64px) 0;padding:6px 0 6px clamp(22px,3vw,36px)}
.a-pull::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--teal),var(--lime));box-shadow:0 0 18px rgba(0,230,202,.45)}
.a-pull p{margin:0;font-weight:300;font-size:clamp(24px,2.4vw,34px);line-height:1.28;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.a-pull figcaption{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.a-pull--lime::before{background:linear-gradient(180deg,var(--lime),var(--teal))}
.a-pull--lime figcaption{color:var(--lime)}

/* inline cta */
.a-cta{margin:clamp(40px,5vw,60px) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:clamp(22px,2.6vw,30px);border-radius:20px;background:linear-gradient(120deg,rgba(0,230,202,.1),rgba(196,255,0,.06));box-shadow:inset 0 0 0 1px rgba(0,230,202,.3)}
.a-cta p{margin:0;max-width:34ch;font-size:clamp(19px,1.6vw,22px);line-height:1.35;letter-spacing:-.015em;color:var(--ink)}

/* article end */
.a-end{margin-top:clamp(56px,6vw,80px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-faint);display:flex;flex-direction:column;gap:28px}
.a-tags{display:flex;flex-wrap:wrap;gap:8px}
.a-tags span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 11px;border-radius:999px;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-soft)}
.a-src{border-radius:18px;background:rgba(12,26,23,.5);box-shadow:inset 0 0 0 1px var(--line-soft)}
.a-src summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.a-src summary::-webkit-details-marker{display:none}
.a-src summary b{font-weight:500;color:var(--teal)}
.a-src summary::after{content:"+";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);color:var(--teal);font-size:15px;transition:transform .3s var(--ease)}
.a-src[open] summary::after{transform:rotate(45deg)}
.a-src ol{margin:0;padding:4px 22px 22px 44px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.a-src li::marker{font-family:var(--mono);font-size:11px;color:var(--teal)}
.a-src a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(0,230,202,.3);text-underline-offset:3px}
.a-src a:hover{color:var(--teal)}
.a-author{display:flex;align-items:center;gap:16px}
.a-author img{width:44px;height:44px;border-radius:50%;padding:8px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.a-author b{display:block;font-weight:400;color:var(--ink)}
.a-author span{display:block;font-size:13.5px;color:var(--ink-3)}

/* related */
.arel{padding:clamp(56px,6vw,96px) 0;border-top:1px solid var(--line-faint)}
.arel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(28px,3vw,40px)}

/* article cards (shared with insights) */
.art{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;background:linear-gradient(180deg,rgba(17,35,31,.9),rgba(10,23,20,.9));box-shadow:inset 0 0 0 1px var(--line-soft);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.art:hover{box-shadow:inset 0 0 0 1px rgba(0,230,202,.45),0 24px 60px rgba(0,0,0,.35);transform:translateY(-3px)}
.art:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.art__cover{position:relative;aspect-ratio:16/8;background:radial-gradient(120% 90% at 80% 10%,rgba(0,230,202,.14),rgba(0,230,202,0) 60%),linear-gradient(180deg,#0E2722,#081512)}
.art__cover svg{position:absolute;inset:0;width:100%;height:100%}
.art__cover .g path{stroke:rgba(230,255,251,.06);fill:none}
.art__cover .a{fill:none;stroke:var(--teal);stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(0,230,202,.6))}
.art__cover .f{fill:rgba(0,230,202,.08)}
.art__cover .t path,.art__cover .t circle{fill:none;stroke:rgba(0,230,202,.5);stroke-width:1.4}
.art__cover .d{fill:var(--lime);filter:drop-shadow(0 0 8px var(--lime))}
.art__cover .r rect{fill:rgba(4,14,12,.9);stroke:rgba(0,230,202,.45)}
.art__cover .r .u{fill:rgba(0,230,202,.35);stroke:none}
.art__cover .w{fill:none;stroke:#7FDFFF;stroke-width:1.6;opacity:.7}
.art__cover .base{stroke:rgba(196,255,0,.55);stroke-dasharray:5 6;fill:none}
.art__cover .d2{fill:var(--lime)}
.art__cover text{font:500 13px var(--mono);fill:var(--lime)}
.art__body{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,26px);flex:1}
.art__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.art h3{margin:0;font-weight:300;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.art p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-3)}
.art__read{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}

/* hero art draws in */
@media (prefers-reduced-motion:no-preference){
  .ahero__art .a{stroke-dasharray:1400;stroke-dashoffset:1400;animation:a-draw 2.6s var(--ease) .2s forwards}
  @keyframes a-draw{to{stroke-dashoffset:0}}
}

/* responsive */
@media (max-width:1060px){
  .abody__grid{grid-template-columns:minmax(0,1fr)}
  .atoc{position:sticky;top:var(--nav-h);z-index:20;margin:0 calc(-1 * var(--gutter));padding:10px var(--gutter);background:rgba(7,17,15,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-faint)}
  .atoc > .atoc__h,.atoc > ol,.atoc__cta{display:none}
  .atoc details{display:block}
  .atoc summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  .atoc summary::-webkit-details-marker{display:none}
  .atoc summary span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--teal)}
  .atoc summary::after{content:"+";color:var(--teal);font-size:16px;transition:transform .3s}
  .atoc details[open] summary::after{transform:rotate(45deg)}
  .atoc details ol{list-style:none;margin:6px 0 4px;padding:0;border-left:1px solid var(--line-faint);max-height:60vh;overflow:auto}
  .arel__grid{grid-template-columns:minmax(0,1fr)}
  .ahero__art{width:120vw;bottom:auto;height:min(34%,230px);opacity:.4;-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 100%);mask-image:linear-gradient(180deg,#000 20%,transparent 100%)}   /* phones and tablets: the art stays above the summary text */
}
@media (max-width:760px){
  .prose > p.lead::first-letter{font-size:3.4em}
}
@media (prefers-reduced-motion:reduce){.rprog{display:none}}
@media (max-height:540px) and (orientation:landscape) and (max-width:1060px){.atoc{padding:4px var(--gutter)}.atoc summary{min-height:36px}.atoc details ol{max-height:calc(100svh - var(--nav-h) - 60px)}}   /* landscape phones: a slimmer section bar */
@media (max-height:540px) and (orientation:landscape){.ahero__art{width:120vw;bottom:auto;height:min(34%,150px);opacity:.4;-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 100%);mask-image:linear-gradient(180deg,#000 20%,transparent 100%)}}