/* ==========================================================================
   VASTORE — SITE LAYOUT
   Header, portfolio, footer and the legacy preview dialog.
   Reads every colour, size and easing from /theme.css. No raw hex here.
   ========================================================================== */

/* ==========================================================================
   HEADER — sticky, condenses on scroll, blurs the content behind it
   ========================================================================== */

.site-header{
 position:sticky;top:0;z-index:60;
 background:color-mix(in srgb,var(--ink-900) 88%,transparent);
 color:var(--on-dark);
 border-bottom:1px solid transparent;
 backdrop-filter:blur(16px) saturate(140%);
 transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
            box-shadow var(--t-base) var(--ease);
}
.site-header.is-condensed{
 background:color-mix(in srgb,var(--ink-950) 94%,transparent);
 border-bottom-color:var(--on-dark-line);
 box-shadow:0 12px 40px -18px rgb(6 11 21 / .8);
}

.navigation{
 min-height:clamp(70px,7vw,92px);
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);
 transition:min-height var(--t-base) var(--ease);
}
.site-header.is-condensed .navigation{min-height:clamp(62px,5.6vw,72px)}

.brand{display:inline-flex;align-items:center;flex:none}
.vastore-logo{
 width:clamp(168px,15vw,224px);height:auto;max-width:none;
 transition:width var(--t-base) var(--ease),opacity var(--t-base) var(--ease);
}
.brand:hover .vastore-logo{opacity:.82}
.site-header.is-condensed .vastore-logo{width:clamp(156px,13vw,196px)}

.navigation nav{
 display:flex;align-items:center;gap:clamp(16px,1.9vw,30px);
 font-size:var(--fs-small);font-weight:500;color:var(--on-dark-muted);
}
/* Link with a rule that wipes in from the left */
.navigation nav>a:not(.nav-contact){position:relative;padding-block:6px}
.navigation nav>a:not(.nav-contact)::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);
}
.navigation nav>a:not(.nav-contact):hover{color:var(--n-0)}
.navigation nav>a:not(.nav-contact):hover::after{transform:scaleX(1)}

.navigation .nav-contact{
 position:relative;isolation:isolate;overflow:hidden;
 display:flex;align-items:center;gap:var(--s-4);
 padding:12px 20px;border-radius:var(--r-pill);
 border:1px solid var(--on-dark-line-strong);color:var(--n-0);font-weight:650;
 transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.nav-contact svg{width:16px;height:16px;transition:transform var(--t-base) var(--ease-spring)}
.nav-contact::before{
 content:'';position:absolute;inset:0;z-index:-1;
 background:var(--grad-ember);
 transform:translateY(101%);transition:transform var(--t-base) var(--ease-out);
}
.nav-contact:hover{border-color:transparent;color:var(--ink-900)}
.nav-contact:hover::before{transform:translateY(0)}
.nav-contact:hover svg{transform:translate(3px,-3px)}

/* Hamburger that morphs into a cross */
.menu-toggle{
 display:none;position:relative;width:46px;height:46px;flex:none;
 border-radius:var(--r-sm);border:1px solid var(--on-dark-line-strong);
}
.menu-toggle span{
 position:absolute;left:13px;width:20px;height:1.7px;border-radius:2px;background:var(--n-0);
 transition:transform var(--t-base) var(--ease-spring),opacity var(--t-fast) var(--ease);
}
.menu-toggle span:first-child{top:18px}
.menu-toggle span:last-child{top:26px}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ==========================================================================
   SELECTED WORK
   ========================================================================== */

.work{background:var(--paper);position:relative}
.work .section-heading{margin-bottom:var(--s-8)}

.portfolio-grid{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
 gap:clamp(36px,4.5vw,64px) clamp(20px,2.4vw,34px);
}
.project{min-width:0}

.project-preview{
 position:relative;isolation:isolate;
 width:100%;min-width:0;
 display:flex;flex-direction:column;gap:var(--s-5);
 padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px) clamp(24px,2.8vw,36px);
 border-radius:var(--r-lg);overflow:hidden;text-align:left;
 transition:box-shadow var(--t-base) var(--ease-out);
}
.project-preview::before{
 content:'';position:absolute;inset:0;z-index:-2;
 transition:filter var(--t-slow) var(--ease);
}
.project-preview::after{
 content:'';position:absolute;inset:0;z-index:-1;
 background:linear-gradient(142deg,color-mix(in srgb,var(--n-0) 42%,transparent),transparent 58%);
}
/* Project ground tones — one family, six hues, all from the same recipe */
.project-preview.sand::before{background:linear-gradient(155deg,#E4E9E6,#CFD9D6)}
.project-preview.blue::before{background:linear-gradient(155deg,#DDE4EF,#C6D2E5)}
.project-preview.plum::before{background:linear-gradient(155deg,#E2DFEC,#CDC9E0)}
.project-preview.green::before{background:linear-gradient(155deg,#DCE9E3,#C4DCD2)}
.project-preview.violet::before{background:linear-gradient(155deg,#E8E1EE,#D5C9E2)}
.project-preview.cyan::before{background:linear-gradient(155deg,#D8E8EC,#BEDAE2)}
.project-preview:hover::before{filter:saturate(1.22) brightness(1.03)}
.project-preview:hover{box-shadow:var(--sh-lg)}

.project-number{
 font-size:var(--fs-micro);font-weight:650;letter-spacing:.13em;
 color:var(--ink-600);text-transform:uppercase;
}

/* Browser chrome around each screenshot */
.site-window{
 display:block;width:100%;border-radius:var(--r-sm);overflow:hidden;
 background:var(--n-0);border:1px solid color-mix(in srgb,var(--n-0) 70%,transparent);
 box-shadow:var(--sh-md);
 transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.site-window picture{display:block;overflow:hidden}
.site-window img{
 width:100%;height:auto;aspect-ratio:1.49;object-fit:cover;object-position:top;
 transition:transform 1.1s var(--ease-out);
}
.project-preview:hover .site-window{transform:translateY(-8px) scale(1.012);box-shadow:var(--sh-xl)}
.project-preview:hover .site-window img{transform:scale(1.03)}

.window-bar{
 height:32px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
 padding:0 var(--s-3);line-height:1;flex:none;
 background:var(--n-0);color:var(--ink-soft);border-bottom:1px solid var(--line);
}
.window-dots{display:flex;gap:4px}
.window-dots i{width:6px;height:6px;display:block;border-radius:50%;background:var(--n-300)}
.window-dots i:first-child{background:#EFA9A0}
.window-dots i:nth-child(2){background:#EFCE93}
.window-dots i:nth-child(3){background:#AFD3B9}
.window-url{font:400 var(--fs-micro)/1 var(--mono);letter-spacing:0;white-space:nowrap;overflow:hidden}
.window-mark{font-size:12px}

/* Floating "enlarge" affordance */
.preview-label{
 position:absolute;left:50%;bottom:clamp(30px,3.4vw,48px);z-index:3;
 display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap;
 padding:10px 16px;border-radius:var(--r-pill);
 background:color-mix(in srgb,var(--ink-900) 94%,transparent);color:var(--on-dark);
 font-size:var(--fs-micro);font-weight:650;letter-spacing:.04em;
 box-shadow:var(--sh-md);backdrop-filter:blur(6px);
 opacity:0;transform:translate(-50%,10px) scale(.94);
 transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease-spring);
}
.preview-label svg{width:15px;height:15px;color:var(--ember-400)}
.project-preview:hover .preview-label,
.project-preview:focus-visible .preview-label{opacity:1;transform:translate(-50%,0) scale(1)}

.project-info{padding-top:var(--s-5)}
.project-label{
 font-size:var(--fs-micro);font-weight:650;letter-spacing:.15em;
 text-transform:uppercase;color:var(--ink-soft);
}
.project-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);margin-top:var(--s-2)}
.project-title h3{font-size:var(--fs-h3);font-weight:650}
.project-info p{margin:var(--s-3) 0 var(--s-5);font-size:var(--fs-small);line-height:1.7;color:var(--ink-muted);max-width:46ch}

.project-links{
 display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;
 border-top:1px solid var(--line);padding-top:var(--s-4);
 font-size:var(--fs-small);font-weight:650;
}
.project-links button,.project-links a{
 position:relative;display:inline-flex;align-items:center;gap:var(--s-2);
 min-height:44px;padding-block:0;
}
.project-links button::after{
 content:'';position:absolute;left:0;right:0;bottom:11px;height:1px;
 background:var(--line-strong);transition:background var(--t-base) var(--ease),right var(--t-base) var(--ease-out);
}
.project-links button:hover{color:var(--brand-deep)}
.project-links button:hover::after{background:var(--brand-deep);right:28%}
.project-links a span{font-size:17px;transition:transform var(--t-base) var(--ease-spring)}
.project-links a:hover{color:var(--brand-deep)}
.project-links a:hover span{transform:translate(3px,-3px)}

/* Link out to the longer project stories */
.portfolio-story-link{
 position:relative;overflow:hidden;
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
 margin-top:clamp(34px,4vw,56px);padding:var(--s-6) var(--s-5);
 border:1px solid var(--line);border-radius:var(--r-lg);
 background:var(--surface);
 font-size:var(--fs-body);font-weight:650;color:var(--ink-700);
 transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
            box-shadow var(--t-base) var(--ease-out);
}
.portfolio-story-link::before{
 content:'';position:absolute;inset:0;z-index:0;
 background:var(--grad-ember);opacity:0;
 transition:opacity var(--t-base) var(--ease);
}
.portfolio-story-link>*{position:relative;z-index:1}
.portfolio-story-link span{font-size:clamp(20px,2vw,26px);transition:transform var(--t-base) var(--ease-spring)}
.portfolio-story-link:hover{border-color:transparent;color:var(--ink-900);box-shadow:var(--sh-md)}
.portfolio-story-link:hover::before{opacity:1}
.portfolio-story-link:hover span{transform:translate(4px,-4px)}

/* ==========================================================================
   DISCIPLINE STRIP (retained for inner pages)
   ========================================================================== */

.discipline-strip{background:var(--ember-500);color:var(--ink-900)}
.discipline-strip .container{
 display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);
 min-height:78px;
}
.discipline-strip span{font:650 clamp(15px,1.4vw,21px)/1 var(--display);letter-spacing:-.025em}
.discipline-strip i{font-style:normal;font-size:26px;font-weight:400;opacity:.55}

/* ==========================================================================
   FOOTER — four columns, generous, with a live wordmark
   ========================================================================== */

footer{
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--ink-950);color:var(--on-dark);
 padding-block:clamp(52px,6vw,86px) var(--s-6);
}
footer::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse 70% 60% at 12% 0%,
   color-mix(in srgb,var(--ember-700) 22%,transparent),transparent 62%);
}
footer>.container{position:relative;z-index:2}

.footer-top{
 display:grid;grid-template-columns:1.5fr repeat(3,1fr);
 gap:var(--s-8) var(--s-7);
 padding-bottom:clamp(36px,4vw,58px);
}
.footer-top .brand{display:inline-block;margin-bottom:var(--s-5)}
.footer-top .brand img{width:clamp(180px,16vw,232px)}
.footer-top>div:first-child>p{
 max-width:34ch;font-size:var(--fs-small);line-height:1.75;color:var(--on-dark-muted);
}
.footer-social{display:flex;gap:var(--s-3);margin-top:var(--s-6)}
.footer-social a{
 width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
 border:1px solid var(--on-dark-line-strong);color:var(--on-dark-muted);
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
            border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-spring);
}
.footer-social svg{width:17px;height:17px}
.footer-social a:hover{
 background:var(--ember-500);color:var(--ink-900);border-color:transparent;
 transform:translateY(-3px);
}

.footer-col h4{
 font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--track-label);
 text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:var(--s-5);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.footer-col a,.footer-col span{font-size:var(--fs-small);color:var(--on-dark-muted);line-height:1.5}
.footer-col a{
 display:inline-flex;align-items:center;gap:var(--s-2);
 transition:color var(--t-base) var(--ease),gap var(--t-base) var(--ease-out);
}
.footer-col a::before{
 content:'';width:0;height:1px;background:var(--ember-500);
 transition:width var(--t-base) var(--ease-out);
}
.footer-col a:hover{color:var(--n-0)}
.footer-col a:hover::before{width:12px}

/* Legacy inline link row, still used by inner pages */
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-5);font-size:var(--fs-small);color:var(--on-dark-muted)}
.footer-links a:hover{color:var(--ember-400)}

.footer-bottom{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-4);
 border-top:1px solid var(--on-dark-line);padding-top:var(--s-5);
 font-size:var(--fs-micro);color:var(--on-dark-faint);
}
.footer-bottom a{color:var(--on-dark-muted);transition:color var(--t-base) var(--ease)}
.footer-bottom a:hover{color:var(--ember-400)}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s-5)}

/* ==========================================================================
   LEGACY PREVIEW DIALOG (native <dialog> variant)
   ========================================================================== */

.preview-dialog{
 border:0;padding:0;border-radius:var(--r-lg);
 width:min(1120px,calc(100vw - 44px));max-height:calc(100dvh - 44px);
 background:var(--surface);color:var(--ink);box-shadow:var(--sh-xl);overflow:auto;
}
.preview-dialog::backdrop{background:color-mix(in srgb,var(--ink-950) 88%,transparent);backdrop-filter:blur(10px)}
.dialog-top{
 position:sticky;top:0;z-index:1;
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
 padding:var(--s-5) var(--s-6);background:var(--surface);
}
.dialog-top p{margin:0 0 var(--s-1);font-size:var(--fs-micro);letter-spacing:.16em;color:var(--ink-soft)}
.dialog-top h2{font-size:var(--fs-h4)}
.close-preview{
 width:42px;height:42px;flex:none;border-radius:50%;
 background:var(--surface-sunken);font-size:17px;
 transition:background var(--t-base) var(--ease)
}
.close-preview:hover{background:var(--line)}
.dialog-image{background:var(--surface-sunken);padding:var(--s-4);overflow:auto;max-height:65dvh}
.dialog-image img{width:100%;height:auto;border-radius:var(--r-xs);box-shadow:var(--sh-sm)}
.dialog-bottom{
 position:sticky;bottom:0;
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
 padding:var(--s-4) var(--s-6);background:var(--surface);border-top:1px solid var(--line);
}
.dialog-bottom>span{color:var(--ink-muted);font-size:var(--fs-small);overflow-wrap:anywhere}
.dialog-bottom .button{padding:13px 20px;white-space:nowrap}

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

@media (max-width:1150px){
 .navigation nav{gap:var(--s-4);font-size:var(--fs-label)}
 .footer-top{grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-6)}
}

@media (max-width:900px){
 .portfolio-grid{gap:var(--s-7) var(--s-4)}
 .project-preview{padding:var(--s-4) var(--s-5) var(--s-6)}
 .project-title h3{font-size:var(--fs-h4)}
 .discipline-strip .container{gap:var(--s-4);min-height:68px}
}

/* The nav carries seven links plus a CTA, so it collapses earlier than
   the rest of the layout. */
@media (max-width:1080px){
 .menu-toggle{display:block}
 .navigation{min-height:74px}
 .navigation nav{
  position:absolute;top:100%;left:0;right:0;
  display:none;flex-direction:column;align-items:stretch;gap:0;
  padding:var(--s-4) var(--gutter) var(--s-6);
  background:var(--ink-950);
  border-bottom:1px solid var(--on-dark-line-strong);
  box-shadow:0 24px 50px -12px rgb(6 11 21 / .7);
  font-size:var(--fs-body);
 }
 .navigation nav.open{display:flex;animation:nav-drop .34s var(--ease-out) both}
 .navigation nav>a{padding-block:14px;border-bottom:1px solid var(--on-dark-line)}
 .navigation nav>a:not(.nav-contact)::after{display:none}
 .navigation nav .nav-contact{
  justify-content:space-between;margin-top:var(--s-4);border-bottom:0;padding-inline:20px;
 }}

@media (max-width:760px){
 .portfolio-grid{grid-template-columns:1fr;gap:var(--s-8)}
 .project-preview{border-radius:var(--r-md)}
 .preview-label{opacity:1;transform:translate(-50%,0);bottom:var(--s-6)}
 .project-links{gap:var(--s-5)}
 .portfolio-story-link{padding:var(--s-5) var(--s-4);font-size:var(--fs-small)}

 .discipline-strip .container{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-5);padding-block:var(--s-4);
 }
 .discipline-strip i{display:none}
 .discipline-strip span{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-small)}
 .discipline-strip span::before{content:'✳';font-size:14px;opacity:.6}

 .footer-top{grid-template-columns:1fr;gap:var(--s-7)}
 .footer-bottom{font-size:var(--fs-micro);padding-bottom:var(--s-9)}

 .preview-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:var(--r-md)}
 .dialog-top{padding:var(--s-4)}
 .dialog-image{padding:var(--s-2);max-height:60dvh}
 .dialog-image img{min-width:600px;max-width:none}
 .dialog-bottom{padding:var(--s-4);flex-direction:column;align-items:stretch}
 .dialog-bottom>span{text-align:center;font-size:var(--fs-micro)}
 .preview-dialog:not([open]){display:none}
}


@keyframes nav-drop{
 from{opacity:0;transform:translateY(-10px)}
 to{opacity:1;transform:translateY(0)}
}