/* ============================================================================
   VEIL & THORN — LAYOUT
   Nav, hero, section scaffolding, studio, process, footer.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   Nav
   ------------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s, backdrop-filter .4s, border-color .4s;
}
.nav.stuck{
  background:rgba(11,10,12,.88); backdrop-filter:blur(14px);
  border-bottom-color:rgba(253,194,219,.14);
}

/* Pages other than the home page have no hero for the nav to float over, so it
   wears its backdrop from the very top instead of waiting for a scroll that
   never uncovers anything. Set with <body class="sub">. */
body.sub .nav{
  background:rgba(11,10,12,.9); backdrop-filter:blur(14px);
  border-bottom-color:rgba(253,194,219,.14);
}

.brand{display:flex; align-items:center; gap:11px}
.brand__mark{width:26px; height:26px; fill:var(--pink); flex:none}
.brand__name{
  font-family:var(--display); font-weight:500; font-size:19px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}

.nav__links{display:flex; align-items:center; gap:26px}
.nav__links a{
  font-family:var(--data); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-soft); transition:color .25s;
}
.nav__links a:hover{color:var(--pink)}

.nav__end{display:flex; align-items:center; gap:12px}
.nav__cta{
  font-family:var(--data); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--pink); padding:9px 16px; color:var(--pink);
  transition:background .25s, color .25s;
}
.nav__cta:hover{background:var(--pink); color:var(--ink)}

/* Burger — hidden on desktop */
.nav__burger{
  display:none; width:42px; height:36px; padding:9px 8px;
  background:transparent; border:1px solid rgba(253,194,219,.35); cursor:pointer;
}
.nav__burger span{
  display:block; height:1.5px; background:var(--pink); border-radius:2px;
  transition:transform .3s, opacity .2s;
}
.nav__burger span + span{margin-top:5px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Seven links plus the brand and the CTA is a tight fit just above the mobile
   breakpoint — close the gaps rather than letting anything wrap. */
@media(max-width:1120px){ .nav__links{gap:17px} }
@media(max-width:990px){  .nav__links{gap:13px} .nav__links a{font-size:11px; letter-spacing:.14em} }

@media(max-width:900px){
  .nav__burger{display:block}
  .nav__links{
    position:fixed; inset:64px 0 auto 0; z-index:-1;
    flex-direction:column; align-items:stretch; gap:0;
    /* Solid, not translucent: this panel sits over the hero artwork, and a
       see-through menu makes the links hard to read exactly when someone is
       trying to navigate. */
    background:var(--ink);
    border-bottom:1px solid rgba(253,194,219,.14);
    padding:8px var(--pad) 24px;
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
  }
  .nav__links.open{transform:none; opacity:1; pointer-events:auto}
  .nav__links a{padding:15px 0; font-size:13px; border-bottom:var(--rule-faint)}
  .nav.stuck,.nav:has(.nav__links.open){background:rgba(11,10,12,.94); backdrop-filter:blur(14px)}
}
@media(max-width:420px){
  .nav__cta{display:none}
  .brand__name{font-size:17px}
}

/* ----------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:clamp(96px,14vh,140px) var(--pad) clamp(60px,10vh,110px);
  overflow:hidden;
}
.hero__plate{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #2A1B26 0%, #130E15 46%, var(--ink) 78%),
    var(--ink);
}
.hero__bloom{
  position:absolute; left:50%; top:46%; width:min(130vh,130vw); aspect-ratio:1;
  transform:translate(-50%,-50%); opacity:.55;
}
.hero__scan{
  position:absolute; inset:0; mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.026) 0 1px, transparent 1px 4px);
}

.hero__inner{
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:minmax(200px,300px) 1fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}

.hero__banner img{
  width:100%; height:auto;
  filter:drop-shadow(0 0 46px var(--pink-glow)) drop-shadow(0 22px 50px rgba(0,0,0,.7));
  will-change:transform;
}

.hero__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(46px,7.4vw,104px); line-height:.92; letter-spacing:.01em;
  margin:0 0 6px; display:flex; flex-wrap:wrap;
}
.hero__title .ltr{display:inline-block; will-change:transform}
.hero__title .sp{width:.28em}

.hero__strap{
  font-family:var(--data); font-size:clamp(13px,1.5vw,17px);
  letter-spacing:.42em; text-transform:uppercase; color:var(--pink);
  margin:0 0 22px; padding-bottom:20px; border-bottom:var(--rule);
}
.hero__lede{
  margin:0 0 28px; max-width:50ch;
  font-size:clamp(15.5px,1.4vw,18px); color:var(--bone-soft);
}

.hero__facts{
  list-style:none; margin:34px 0 0; padding:22px 0 0; border-top:var(--rule);
  display:flex; flex-wrap:wrap; gap:12px 40px;
}
.hero__facts li{display:flex; flex-direction:column; gap:2px}
.hero__facts b{
  font-family:var(--display); font-size:19px; font-weight:400;
  text-transform:uppercase; color:var(--pink); letter-spacing:.03em;
}
.hero__facts span{
  font-family:var(--data); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}

.scrollcue{
  position:absolute; right:var(--pad); bottom:clamp(24px,5vh,54px); z-index:2;
  display:flex; align-items:center; gap:10px; writing-mode:vertical-rl;
  font-family:var(--data); font-size:10.5px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--mute);
}
.scrollcue i{
  display:block; width:1px; height:60px;
  background:linear-gradient(var(--pink),transparent);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.3); opacity:.4} 50%{transform:scaleY(1); opacity:1}}

@media(max-width:860px){
  .hero{align-items:flex-end; padding-top:clamp(88px,12vh,120px)}
  .hero__inner{grid-template-columns:1fr; gap:26px}
  .hero__banner{width:min(180px,42vw)}
  .scrollcue{display:none}
}

/* ----------------------------------------------------------------------------
   Generic section
   ------------------------------------------------------------------------- */
.sec{padding:clamp(76px,10vw,160px) var(--pad); position:relative}
.sec__head{
  display:flex; flex-wrap:wrap; gap:18px 40px;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(34px,5vw,64px);
}
.sec__head p{margin:0; max-width:42ch; color:var(--bone-soft); font-size:15.5px}
.sec--road{background:linear-gradient(180deg, transparent, rgba(253,194,219,.045), transparent)}

/* ----------------------------------------------------------------------------
   Manifesto
   ------------------------------------------------------------------------- */
.manifesto{padding:clamp(84px,13vw,190px) var(--pad)}
.manifesto__text{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(25px,4.4vw,60px); line-height:1.1; max-width:20ch;
}
.manifesto__text w{display:inline-block; opacity:.14; transition:opacity .35s ease, color .35s ease}
.manifesto__text w.lit{opacity:1}
.manifesto__text w.hot{color:var(--pink)}
.manifesto__sig{margin:32px 0 0}

/* ----------------------------------------------------------------------------
   Studio
   ------------------------------------------------------------------------- */
.studio{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.4vw,52px); align-items:start}
.studio__main,
.studio__side{display:grid; gap:clamp(16px,2vw,22px); align-content:start}
@media(max-width:900px){ .studio{grid-template-columns:1fr} }

/* ----------------------------------------------------------------------------
   Process
   ------------------------------------------------------------------------- */
.process{
  display:grid; grid-template-columns:minmax(220px,.8fr) 1.4fr;
  gap:clamp(24px,5vw,80px); align-items:start;
}
.process__stick{position:sticky; top:clamp(96px,14vh,150px)}
.process__stick .h-lg{max-width:11ch; margin-bottom:18px}

.steps{border-top:var(--rule)}
.step{
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:clamp(22px,3.2vw,42px) 0; border-bottom:var(--rule);
  opacity:.32; transition:opacity .5s ease;
}
.step.on{opacity:1}
.step__no{
  font-family:var(--display); font-size:clamp(26px,3.2vw,44px);
  line-height:1; color:var(--pink);
}
.step h3{
  margin:0 0 8px; font-family:var(--display); font-weight:400;
  font-size:clamp(19px,2.2vw,28px); text-transform:uppercase; letter-spacing:.02em;
}
.step p{margin:0; color:var(--bone-soft); max-width:50ch; font-size:15.5px}
.step .small{margin-top:10px}
@media(max-width:820px){
  .process{grid-template-columns:1fr}
  .process__stick{position:static}
  .step{grid-template-columns:44px 1fr; gap:14px}
}

/* ----------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.foot{border-top:var(--rule); padding:clamp(46px,6vw,78px) var(--pad) 28px}
.foot__grid{
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:clamp(22px,3.4vw,50px); margin-bottom:42px;
}
.foot .brand{margin-bottom:18px}
.foot h3{
  margin:0 0 14px; font-family:var(--data); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--pink-hot);
}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px}
.foot ul a{color:var(--bone-soft); transition:color .25s}
.foot ul a:hover{color:var(--pink)}
.foot__seo{font-size:13.5px; color:var(--mute); line-height:1.8; max-width:60ch; margin:0}
.foot__bar{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  border-top:var(--rule); padding-top:22px;
}
@media(max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot__grid{grid-template-columns:1fr} }