/* ==========================================================================
   VASTORE — INNER PAGES
   Case studies, insights, and the 404 / error screens.
   Requires /theme.css, which owns every token used here.
   ========================================================================== */

/* ==========================================================================
   SHARED CHROME
   ========================================================================== */

.page-header{
 position:sticky;top:0;z-index:60;
 background:color-mix(in srgb,var(--ink-950) 92%,transparent);
 color:var(--on-dark);
 border-bottom:1px solid var(--on-dark-line);
 backdrop-filter:blur(16px) saturate(140%);
}
.page-bar{
 width:min(var(--shell),calc(100% - var(--gutter) * 2));margin-inline:auto;
 min-height:clamp(66px,6vw,84px);
 display:flex;align-items:center;gap:var(--s-6);
}
.page-brand{flex:none;display:inline-flex}
.page-brand img{width:clamp(160px,14vw,208px);height:auto;transition:opacity var(--t-base) var(--ease)}
.page-brand:hover img{opacity:.82}

.page-nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.page-nav a{
 position:relative;padding-block:6px;
 font-size:var(--fs-small);font-weight:500;color:var(--on-dark-muted);
 transition:color var(--t-base) var(--ease);
}
.page-nav a::after{
 content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
 background:var(--ember-500);transform:scaleX(0);transform-origin:left;
 transition:transform var(--t-base) var(--ease-out);
}
.page-nav a:hover{color:var(--n-0)}
.page-nav a:hover::after,.page-nav a[aria-current=page]::after{transform:scaleX(1)}
.page-nav a[aria-current=page]{color:var(--n-0)}

.page-cta{
 position:relative;isolation:isolate;overflow:hidden;flex:none;
 display:inline-flex;align-items:center;gap:var(--s-3);
 padding:11px 19px;border-radius:var(--r-pill);
 border:1px solid var(--on-dark-line-strong);color:var(--n-0);
 font-size:var(--fs-small);font-weight:650;
 transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.page-cta::before{
 content:'';position:absolute;inset:0;z-index:-1;background:var(--grad-ember);
 transform:translateY(101%);transition:transform var(--t-base) var(--ease-out);
}
.page-cta:hover{border-color:transparent;color:var(--ink-900)}
.page-cta:hover::before{transform:translateY(0)}

/* Disclosure menu — no script involved */
.page-menu{display:none;margin-left:auto;position:relative}
.page-menu summary{
 list-style:none;cursor:pointer;
 width:44px;height:44px;border-radius:var(--r-sm);
 border:1px solid var(--on-dark-line-strong);
 display:grid;align-content:center;justify-items:center;gap:6px;
}
.page-menu summary::-webkit-details-marker{display:none}
.page-menu summary span{display:block;width:19px;height:1.7px;border-radius:2px;background:var(--n-0);transition:transform var(--t-base) var(--ease-spring)}
.page-menu[open] summary span:first-child{transform:translateY(4px) rotate(45deg)}
.page-menu[open] summary span:last-child{transform:translateY(-4px) rotate(-45deg)}
.page-menu>div{
 position:absolute;right:0;top:calc(100% + 12px);z-index:5;
 min-width:min(78vw,260px);
 display:grid;padding:var(--s-3);
 background:var(--ink-950);border:1px solid var(--on-dark-line-strong);
 border-radius:var(--r-md);box-shadow:var(--sh-xl);
 animation:menu-drop .28s var(--ease-out) both;
}
.page-menu>div a{
 padding:13px var(--s-4);border-radius:var(--r-xs);
 font-size:var(--fs-small);color:var(--on-dark-muted);
 transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.page-menu>div a:hover{background:var(--glass);color:var(--n-0)}
.page-menu-cta{margin-top:var(--s-2);background:var(--ember-500);color:var(--ink-900)!important;font-weight:700;text-align:center}
.page-menu-cta:hover{background:var(--ember-400)!important}
@keyframes menu-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Footer */
.page-footer{
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--ink-950);color:var(--on-dark);
 padding-block:clamp(44px,5vw,72px) var(--s-5);
 margin-top:clamp(56px,7vw,110px);
}
.page-footer::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse 60% 70% at 88% 0%,
   color-mix(in srgb,var(--ember-700) 20%,transparent),transparent 60%);
}
.page-footer-inner,.page-footer-base{
 position:relative;z-index:1;
 width:min(var(--shell),calc(100% - var(--gutter) * 2));margin-inline:auto;
}
.page-footer-inner{
 display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s-7);
 padding-bottom:var(--s-7);
}
.page-footer-inner img{width:clamp(170px,15vw,210px);height:auto;margin-bottom:var(--s-4)}
.page-footer-inner p{max-width:34ch;font-size:var(--fs-small);color:var(--on-dark-muted);line-height:1.7}
.page-footer-inner nav,.page-footer-contact{display:grid;gap:var(--s-3);align-content:start}
.page-footer-inner nav a,.page-footer-contact a,.page-footer-contact span{
 font-size:var(--fs-small);color:var(--on-dark-muted);
 transition:color var(--t-base) var(--ease);
}
.page-footer-inner nav a:hover,.page-footer-contact a:hover{color:var(--ember-400)}
.page-footer-base{
 display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);
 padding-top:var(--s-5);border-top:1px solid var(--on-dark-line);
 font-size:var(--fs-micro);color:var(--on-dark-faint);
}
.page-footer-base a{color:var(--on-dark-muted);transition:color var(--t-base) var(--ease)}
.page-footer-base a:hover{color:var(--ember-400)}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */

.case-wrap,.post-wrap,.journal-wrap,.stop-wrap{
 width:min(920px,calc(100% - var(--gutter) * 2));margin-inline:auto;
}

.case-hero,.post-hero,.journal-hero{
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--ink-900);color:var(--on-dark);
 padding-block:clamp(44px,5.5vw,80px) clamp(40px,5vw,70px);
}
.case-hero::before,.post-hero::before,.journal-hero::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(ellipse 60% 70% at 88% 0%,color-mix(in srgb,var(--ember-700) 26%,transparent),transparent 62%),
  radial-gradient(ellipse 50% 60% at 4% 100%,color-mix(in srgb,var(--ink-500) 42%,transparent),transparent 60%);
}
.case-hero>*,.post-hero>*,.journal-hero>*{position:relative;z-index:1}

.case-back{
 display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
 font-size:var(--fs-small);font-weight:600;color:var(--on-dark-muted);
 transition:color var(--t-base) var(--ease),gap var(--t-base) var(--ease-out);
}
.case-back:hover{color:var(--ember-400);gap:var(--s-3)}

.case-sector{
 margin-top:var(--s-4);
 font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--track-label);
 text-transform:uppercase;color:var(--ember-400);
}
.case-hero h1{margin-top:var(--s-3);font-size:clamp(34px,4.6vw,62px);line-height:1.05}
.case-lead{margin-top:var(--s-5);max-width:54ch;font-size:var(--fs-lead);line-height:1.65;color:var(--on-dark-muted)}

.case-meta{
 display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-8);
 margin-top:var(--s-7);padding-top:var(--s-5);
 border-top:1px solid var(--on-dark-line);
}
.case-meta dt{font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-faint)}
.case-meta dd{margin:4px 0 0;font:650 var(--fs-small)/1.3 var(--display);letter-spacing:-.02em}
.case-meta dd a{border-bottom:1px solid var(--on-dark-line-strong);padding-bottom:2px;transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.case-meta dd a:hover{color:var(--ember-400);border-color:var(--ember-400)}

.case-shot{
 margin:clamp(-34px,-3vw,-20px) 0 0;
 border-radius:var(--r-lg);overflow:hidden;
 background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-xl);
}
.case-shot picture{display:block}
.case-shot img{width:100%;height:auto;display:block}
.case-shot figcaption{
 padding:var(--s-4) var(--s-5);
 font-size:var(--fs-micro);color:var(--ink-soft);border-top:1px solid var(--line);
}

.case-body{margin-top:clamp(40px,5vw,64px);display:grid;gap:clamp(30px,3.4vw,44px)}
.case-body h2{font-size:var(--fs-h3);font-weight:650}
.case-body p{margin-top:var(--s-4);font-size:var(--fs-lead);line-height:1.75;color:var(--ink-muted)}
.case-list{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-3)}
.case-list li{
 display:flex;gap:var(--s-3);align-items:flex-start;
 padding:var(--s-4) var(--s-5);border-radius:var(--r-md);
 background:var(--surface);border:1px solid var(--line);
 font-size:var(--fs-small);line-height:1.6;
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out);
}
.case-list li::before{
 content:'';flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;
 background:var(--grad-ember);
}
.case-list li:hover{border-color:var(--ember-300);transform:translateX(4px)}

.case-cta,.post-cta,.journal-cta{
 position:relative;isolation:isolate;overflow:hidden;
 margin-top:clamp(44px,5vw,70px);padding:clamp(28px,3.4vw,46px);
 border-radius:var(--r-xl);
 background:var(--grad-ink);color:var(--on-dark);
}
.case-cta::before,.post-cta::before,.journal-cta::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse 60% 100% at 92% 20%,
   color-mix(in srgb,var(--ember-600) 28%,transparent),transparent 64%);
}
.case-cta>*,.post-cta>*,.journal-cta>*{position:relative;z-index:1}
.case-cta h2,.post-cta h2,.journal-cta h2{font-size:var(--fs-h3);font-weight:650}
.case-cta p,.post-cta p,.journal-cta p{margin-top:var(--s-3);max-width:46ch;color:var(--on-dark-muted);font-size:var(--fs-small);line-height:1.7}
.case-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-6)}
.post-cta .button,.journal-cta .button{margin-top:var(--s-6)}
.case-alt{
 display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
 font-size:var(--fs-small);font-weight:600;color:var(--on-dark-muted);
 border-bottom:1px solid var(--on-dark-line-strong);
 transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.case-alt:hover{color:var(--ember-400);border-color:var(--ember-400)}

.case-next,.post-next{margin-top:clamp(44px,5vw,70px)}
.case-next h2,.post-next h2{
 font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--track-label);
 text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-4);
}
.case-next ul,.post-next ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.case-next a,.post-next a{
 display:flex;align-items:center;gap:var(--s-4);
 padding:var(--s-5);border-radius:var(--r-md);
 background:var(--surface);border:1px solid var(--line);
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.case-next a:hover,.post-next a:hover{border-color:var(--ember-300);transform:translateX(5px);box-shadow:var(--sh-sm)}
.case-next small,.post-next small{
 flex:none;width:clamp(120px,16vw,190px);
 font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.case-next strong,.post-next strong{flex:1;font:650 var(--fs-body)/1.35 var(--display);letter-spacing:-.025em}
.case-next span,.post-next span{flex:none;font-size:20px;color:var(--brand-deep);transition:transform var(--t-base) var(--ease-spring)}
.case-next a:hover span,.post-next a:hover span{transform:translate(3px,-3px)}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */

.journal-kicker{
 display:flex;align-items:center;gap:var(--s-3);
 font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-label);
 text-transform:uppercase;color:var(--on-dark-muted);
}
.journal-kicker>span{width:var(--s-5);height:2px;border-radius:2px;background:var(--grad-ember)}
.journal-hero h1{margin-top:var(--s-5);font-size:clamp(34px,4.8vw,64px);line-height:1.04}
.journal-hero h1 em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.journal-lead{margin-top:var(--s-5);max-width:52ch;font-size:var(--fs-lead);line-height:1.65;color:var(--on-dark-muted)}

.journal-list{list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;display:grid;gap:var(--s-3)}
.journal-list a{
 display:block;padding:clamp(24px,2.8vw,36px);
 border-radius:var(--r-lg);
 background:var(--surface);border:1px solid var(--line);
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.journal-list a:hover{border-color:var(--ember-300);transform:translateY(-4px);box-shadow:var(--sh-md)}
.journal-meta{
 display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
 font-size:var(--fs-micro);color:var(--ink-soft);
}
.journal-topic{
 padding:5px 11px;border-radius:var(--r-pill);
 background:var(--brand-tint);color:var(--brand-deep);font-weight:700;
 letter-spacing:.06em;text-transform:uppercase;
}
.post-hero .journal-meta{color:var(--on-dark-faint);margin-top:var(--s-4)}
.post-hero .journal-topic{background:var(--glass);color:var(--ember-400)}
.journal-list h2{margin-top:var(--s-4);font-size:var(--fs-h3);font-weight:650}
.journal-list p{margin-top:var(--s-3);max-width:62ch;font-size:var(--fs-small);line-height:1.7;color:var(--ink-muted)}
.journal-more{
 display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-5);
 font-size:var(--fs-small);font-weight:650;color:var(--brand-deep);
}
.journal-list a:hover .journal-more span{display:inline-block;transform:translate(3px,-3px)}
.journal-more span{transition:transform var(--t-base) var(--ease-spring)}

/* ==========================================================================
   ARTICLE
   ========================================================================== */

.post-hero h1{margin-top:var(--s-4);font-size:clamp(31px,4.2vw,56px);line-height:1.07;max-width:20ch}
.post-lead{margin-top:var(--s-5);max-width:56ch;font-size:var(--fs-lead);line-height:1.65;color:var(--on-dark-muted)}

.post-body{max-width:68ch;margin-top:clamp(36px,4.4vw,60px)}
.post-body h2{
 margin-top:clamp(34px,3.6vw,50px);
 font-size:var(--fs-h3);font-weight:650;
}
.post-body h2:first-child{margin-top:0}
.post-body p{margin-top:var(--s-5);font-size:var(--fs-lead);line-height:1.8;color:var(--ink-muted)}
.post-body ul,.post-body ol{margin:var(--s-5) 0 0;padding-left:0;list-style:none;counter-reset:step;display:grid;gap:var(--s-4)}
.post-body li{
 position:relative;padding-left:var(--s-8);
 font-size:var(--fs-body);line-height:1.75;color:var(--ink-muted);
}
.post-body ul li::before{
 content:'';position:absolute;left:var(--s-5);top:.62em;
 width:8px;height:8px;border-radius:50%;background:var(--grad-ember);
}
.post-body ol li{counter-increment:step}
.post-body ol li::before{
 content:counter(step,decimal-leading-zero);
 position:absolute;left:0;top:.1em;
 font:700 var(--fs-small)/1.6 var(--mono);color:var(--brand-deep);
}
.post-body blockquote{
 margin:clamp(30px,3.4vw,44px) 0 0;padding:var(--s-6);
 border-left:3px solid var(--ember-500);border-radius:0 var(--r-md) var(--r-md) 0;
 background:var(--brand-tint);
}
.post-body blockquote p{
 margin:0;font-family:var(--display);font-size:var(--fs-h4);
 line-height:1.5;letter-spacing:-.02em;color:var(--ink-800);
}

/* ==========================================================================
   404 / ERROR
   ========================================================================== */

.stop{
 position:relative;isolation:isolate;overflow:hidden;
 display:grid;place-items:center;
 min-height:clamp(440px,68vh,680px);
 background:var(--ink-900);color:var(--on-dark);
 padding-block:var(--s-9);
}
.stop::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(ellipse 50% 60% at 78% 10%,color-mix(in srgb,var(--ember-700) 30%,transparent),transparent 62%),
  radial-gradient(ellipse 50% 60% at 10% 92%,color-mix(in srgb,var(--ink-500) 46%,transparent),transparent 60%);
}
.stop-wrap{position:relative;z-index:1;text-align:center}
.stop-code{
 font:700 clamp(58px,10vw,132px)/1 var(--display);letter-spacing:-.06em;
 background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stop h1{margin-top:var(--s-4);font-size:clamp(28px,3.6vw,48px);line-height:1.1}
.stop-lead{margin:var(--s-5) auto 0;max-width:46ch;font-size:var(--fs-lead);line-height:1.65;color:var(--on-dark-muted)}
.stop-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-5);margin-top:var(--s-7)}
.stop-alt{
 display:inline-flex;align-items:center;min-height:44px;
 font-size:var(--fs-small);font-weight:600;color:var(--on-dark-muted);
 border-bottom:1px solid var(--on-dark-line-strong);
 transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.stop-alt:hover{color:var(--ember-400);border-color:var(--ember-400)}
.stop-digest{margin-top:var(--s-6);font:400 var(--fs-micro)/1.6 var(--mono);color:var(--on-dark-faint)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
 .page-nav,.page-cta{display:none}
 .page-menu{display:block}
 .page-footer-inner{grid-template-columns:1fr 1fr}
 .page-footer-inner>div:first-child{grid-column:1/-1}
}

@media (max-width:760px){
 .case-meta{gap:var(--s-5)}
 .case-shot{margin-top:var(--s-6);border-radius:var(--r-md)}
 .case-next a,.post-next a{flex-wrap:wrap;gap:var(--s-2)}
 .case-next small,.post-next small{width:100%}
 .case-next strong,.post-next strong{flex:1 1 auto}
 .case-cta-actions{gap:var(--s-4)}
 .page-footer-inner{grid-template-columns:1fr;gap:var(--s-6)}
 .post-body li{padding-left:var(--s-7)}
 .post-body ul li::before{left:var(--s-4)}
}

/* ==========================================================================
   WORK INDEX
   ========================================================================== */

.work-grid{
 list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;
 display:grid;gap:var(--s-4);
}
.work-grid a{
 display:grid;grid-template-columns:minmax(0,300px) 1fr;align-items:center;gap:clamp(20px,2.6vw,38px);
 padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);
 background:var(--surface);border:1px solid var(--line);
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out),
            box-shadow var(--t-base) var(--ease-out);
}
.work-grid a:hover{border-color:var(--ember-300);transform:translateY(-4px);box-shadow:var(--sh-md)}
.work-grid picture{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--surface-sunken)}
.work-grid img{
 width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;object-position:top;display:block;
 transition:transform .8s var(--ease-out);
}
.work-grid a:hover img{transform:scale(1.04)}
.work-grid small{
 font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.work-grid h2{margin-top:var(--s-3);font-size:var(--fs-h3);font-weight:650}
.work-grid p{margin-top:var(--s-3);max-width:52ch;font-size:var(--fs-small);line-height:1.7;color:var(--ink-muted)}
.work-grid a:hover .journal-more span{display:inline-block;transform:translate(3px,-3px)}

@media (max-width:760px){
 .work-grid a{grid-template-columns:1fr;gap:var(--s-5)}
}