/* ============================================================
   AT Cabinetry — Cinematic homepage entrance
   "Through the Cabinet" — you start far out on a whole cabinet,
   scroll to travel in, its doors open, you pass inside, then the
   frame flashes to light and hands off to the working Design Studio.
   Uses the crisp vector cabinet (same one as the studio) so it's
   pin-sharp at any zoom and perfectly centered. Scrubbed by entrance.js.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- homepage-scoped overlay header (only where the entrance lives) ---- */
body:has(.ent-scene) .topbar{display:none}
body:has(.ent-scene) .site-header{
  position:fixed;left:0;right:0;top:0;
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease;
}
body:has(.ent-scene) .site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.62),rgba(8,6,4,0));
  opacity:1;transition:opacity .45s ease;
}
body:has(.ent-scene) .site-header.ent-solid::before{opacity:0}
body:has(.ent-scene) .site-header:not(.ent-solid) .brand-logo{filter:brightness(0) invert(1);opacity:.96}
body:has(.ent-scene) .site-header:not(.ent-solid) .nav a,
body:has(.ent-scene) .site-header:not(.ent-solid) .phone{color:rgba(245,240,231,.9)}
body:has(.ent-scene) .site-header:not(.ent-solid) .nav a:hover{color:#fff}
body:has(.ent-scene) .site-header:not(.ent-solid) .nav a.is-active{color:#fff}
body:has(.ent-scene) .site-header:not(.ent-solid) .nav a.is-active::after{background:var(--brass-2)}
body:has(.ent-scene) .site-header:not(.ent-solid) .search-toggle{color:rgba(245,240,231,.9)}
body:has(.ent-scene) .site-header:not(.ent-solid) .btn-solid{background:var(--brass);border-color:var(--brass);color:#fff}
body:has(.ent-scene) .site-header:not(.ent-solid) .btn-solid:hover{background:var(--brass-2);border-color:var(--brass-2)}
body:has(.ent-scene) .site-header:not(.ent-solid) .menu-toggle span{background:#fff}
body:has(.ent-scene) .site-header.ent-solid{
  background:rgba(247,244,237,.9);backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--line);
}

/* ============================================================
   THE ENTRANCE
   ============================================================ */
.ent-scene{position:relative;height:600vh;background:#0c0906}
.ent-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(125% 95% at 50% 42%,#241a12 0%,#160f0a 44%,#0a0705 100%);
}

/* warm glow that breathes behind the cabinet */
.ent-halo{
  position:absolute;left:50%;top:46%;width:78vmin;height:78vmin;z-index:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:opacity;
  background:radial-gradient(closest-side,rgba(224,153,107,.32),rgba(224,153,107,.06),transparent 72%);
}

/* the crisp vector cabinet — starts small (far), dollies in and opens */
.ent-stage{
  position:relative;z-index:2;width:min(25vh,54vw);margin-top:8vh;
  transform-origin:50% 54%;will-change:transform;
}
.ent-stage svg.cab{display:block;width:100%;height:auto;filter:drop-shadow(0 38px 60px rgba(0,0,0,.6))}
/* interior hidden until the doors open; kill studio.css's slow transitions so the
   cabinet tracks the scroll instantly (no lag) */
.ent-stage .cab .cab-interior{opacity:0}
.ent-stage .cab .cab-doors .door,
.ent-stage .cab .cab-interior,
.ent-stage .cab .cab-hardware,
.ent-stage .cab .cab-drawer,
.ent-stage .cab .door-face{transition:none!important}
/* doors flatten toward their outer stiles (hinges) as they open */
.ent-stage .cab .door{transform-box:fill-box}
.ent-stage .cab .door-left{transform-origin:left center}
.ent-stage .cab .door-right{transform-origin:right center}

/* vignette that deepens as we move inside */
.ent-vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(62% 58% at 50% 52%,transparent 0%,rgba(6,4,2,.92) 100%);
}
/* fine film grain for a shot-on-camera feel */
.ent-grain{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the final flash to light — hands off to the studio */
.ent-flash{
  position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(120% 100% at 50% 45%,#FCF8EF 0%,#F1E9DA 68%,#E7DDCB 100%);
}

/* ---- text beats over the scene ---- */
.ent-beats{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.ent-beat{
  position:absolute;text-align:center;max-width:min(920px,90vw);padding:0 24px;
  opacity:0;will-change:opacity,transform;
  text-shadow:0 2px 34px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.55);
}
.ent-beat .ey{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--brass-2);display:inline-flex;align-items:center;gap:14px;margin-bottom:20px;
}
.ent-beat .ey::before,.ent-beat .ey::after{content:"";height:1px;width:32px;background:var(--brass)}
.ent-beat h2{
  font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.02em;color:#F6F1E7;
  font-size:clamp(2.6rem,8vw,6rem);
}
.ent-beat h2 .brandmark{display:block;font-size:clamp(3rem,11vw,8.2rem);letter-spacing:-.03em}
/* first beat sits ABOVE the far-away cabinet so both read cleanly (wordmark → cabinet → scroll) */
.ent-beat[data-beat="1"]{align-self:start;margin-top:12vh}
.ent-beat[data-beat="1"] p{max-width:58ch}
.ent-beat h2 em{font-style:italic;color:var(--brass-2)}
.ent-beat p{
  margin-top:22px;font-size:clamp(1.02rem,1.8vw,1.35rem);color:#EBE3D5;font-weight:300;
  line-height:1.5;max-width:44ch;margin-inline:auto;
}

/* scroll cue */
.ent-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:8;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(240,232,220,.72);transition:opacity .4s;
}
.ent-cue .rail{position:relative;width:1px;height:46px;overflow:hidden;background:linear-gradient(var(--brass),transparent)}
.ent-cue .rail::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:#F6F1E7;animation:ent-drop 1.9s cubic-bezier(.7,0,.3,1) infinite}
@keyframes ent-drop{to{top:46px}}

/* ============================================================
   FULL-BLEED HOMEPAGE SHELL (kills the narrow centered column)
   ============================================================ */
.home main{overflow-x:clip}
.home-band{position:relative;padding-block:clamp(64px,9vw,124px)}
.home-band.ink{background:var(--ink);color:var(--bone)}
.home-band.paper{background:var(--bone)}
.home-band.paper-2{background:var(--bone-2)}
.bleed{width:100%;margin:0 auto;padding-inline:clamp(20px,5vw,80px)}
.bleed.wide{max-width:1640px}
.bleed.mid{max-width:1200px}
.band-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.4rem)}
.band-head.center{margin-inline:auto;text-align:center}
.band-head.center .eyebrow{justify-content:center}
.band-head h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.04;margin-bottom:1rem}
.home-band.ink .band-head h2{color:var(--bone)}
.home-band.ink .eyebrow{color:var(--brass-2)}
.lead-line{color:var(--muted);font-size:1.08rem;max-width:60ch;line-height:1.6}
.home-band.ink .lead-line{color:var(--muted-light)}

/* ---- studio handoff intro (emerges from the flash) ---- */
.studio-open{
  position:relative;text-align:center;
  padding:clamp(3.4rem,7vw,6rem) 24px clamp(1rem,2vw,1.6rem);
  background:linear-gradient(180deg,#F1E9DA 0%,var(--bone) 60%);
}
.studio-open .eyebrow{justify-content:center;color:var(--brass)}
.studio-open h2{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;margin:.5rem auto 1rem;max-width:20ch}
.studio-open p{color:var(--muted);max-width:56ch;margin:0 auto;font-size:1.08rem;line-height:1.6}

/* ============================================================
   SERVICES — editorial mosaic (varied sizes, full-bleed)
   ============================================================ */
.mosaic{
  display:grid;gap:16px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(150px,15.5vw,230px);
  grid-template-areas:
    "kit kit kit kit com com"
    "kit kit kit kit com com"
    "blt blt bth bth com com";
}
.m-tile{
  position:relative;overflow:hidden;border-radius:5px;background:var(--ink-2);
  text-decoration:none;color:var(--bone);isolation:isolate;
}
.m-tile.kit{grid-area:kit}
.m-tile.com{grid-area:com}
.m-tile.blt{grid-area:blt}
.m-tile.bth{grid-area:bth}
.m-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);z-index:-1;
}
.m-tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(9,7,4,.82) 0%,rgba(9,7,4,.28) 42%,rgba(9,7,4,.05) 70%);
  transition:background .4s;
}
.m-tile:hover img{transform:scale(1.055)}
.m-tile:hover::after{background:linear-gradient(0deg,rgba(9,7,4,.86) 0%,rgba(9,7,4,.34) 50%,rgba(9,7,4,.08) 80%)}
.m-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.1rem,2vw,1.7rem)}
.m-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);display:block;margin-bottom:.5rem}
.m-tile h3{font-family:var(--serif);font-weight:500;line-height:1.05;margin-bottom:.35rem;font-size:clamp(1.25rem,2.1vw,1.9rem)}
.m-tile.kit h3{font-size:clamp(1.7rem,3vw,2.6rem)}
.m-tile p{font-size:.92rem;color:#E4DCCD;max-width:42ch;font-weight:300;
  opacity:0;max-height:0;transform:translateY(6px);transition:opacity .4s,transform .4s,max-height .4s}
.m-tile:hover p,.m-tile:focus-visible p{opacity:1;max-height:80px;transform:none}
.m-see{margin-top:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-2);display:inline-flex;gap:.4rem}
.m-see::after{content:"→";transition:transform .3s}
.m-tile:hover .m-see::after{transform:translateX(4px)}

/* ---- work / lookbook full-bleed grid ---- */
.home-work .finder{max-width:920px;margin-inline:auto}
.home-work .lookbook-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:2.4rem}
.home-work .lookbook-grid .tile{border-radius:5px;overflow:hidden}

/* widen the reused centered sections so the page reads full-bleed, not columnar */
.home .home-wide .wrap{max-width:1500px}
.home .two-col{gap:clamp(2rem,5vw,6rem)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .home-work .lookbook-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  body:has(.ent-scene) .site-header{position:sticky}
  .ent-scene{height:560vh}
  .ent-stage{width:min(30vh,66vw)}
  .mosaic{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:clamp(160px,34vw,210px);
    grid-template-areas:
      "kit kit"
      "kit kit"
      "com com"
      "com com"
      "blt bth";
  }
  .m-tile p{opacity:1;max-height:none;transform:none}
  .home-work .lookbook-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .ent-beat .ey{letter-spacing:.28em}
  .mosaic{
    grid-template-columns:1fr;
    grid-auto-rows:200px;
    grid-template-areas:"kit" "kit" "com" "com" "blt" "bth";
  }
  .home-work .lookbook-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .ent-cue .rail::after{animation:none}
}