/* ---------------------------------------------------------------------------
   Case-study pages. Same tokens, type and motion language as the home page —
   this file only carries what a project page needs, so it stays small.
   --------------------------------------------------------------------------- */
@import url("/fonts/general-sans.css");
@import url("/fonts/ruthie.css");

:root{
  --ink:#050505; --blood:#8c0003; --red:#c8000a; --ember:#ff1e14; --bone:#f3efec;
  --smoke:rgba(243,239,236,.52);
  --line:rgba(243,239,236,.14);
  --line-red:rgba(200,0,10,.3);
  --sans:"General Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --script:"Ruthie",cursive;
  --pad:clamp(18px,3.4vw,54px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow-x:clip){html{overflow-x:clip}}
body{
  background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:300;
  font-size:clamp(14px,.95vw,17px);line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video,svg{display:block;max-width:100%}
picture{display:contents}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul{list-style:none}
::selection{background:var(--red);color:#fff}
.mono{font-family:var(--sans);font-weight:400;font-size:clamp(10px,.72vw,12px);letter-spacing:.22em;text-transform:uppercase}
.script{font-family:var(--script);color:var(--ember)}
/* a search query or a filename quoted inline — a chip, not a terminal */
code{font-family:inherit;font-size:.92em;color:var(--bone);background:rgba(200,0,10,.13);
  border:1px solid rgba(200,0,10,.26);border-radius:4px;padding:.06em .4em;white-space:nowrap}

/* ---------- chrome ---------- */
.pnav{
  position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:clamp(14px,2vw,26px) var(--pad);
  background:linear-gradient(to bottom,rgba(5,5,5,.92),rgba(5,5,5,0));pointer-events:none;
}
.pnav a{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;color:var(--smoke);transition:color .35s var(--ease)}
.pnav a:hover{color:var(--bone)}
.pnav a .ar{color:var(--red)}

/* ---------- masthead ---------- */
.mast{padding:clamp(110px,16vh,190px) var(--pad) clamp(40px,7vh,80px);position:relative}
.mast__kicker{color:var(--red);margin-bottom:clamp(18px,3vh,30px)}
.mast h1{
  font-size:clamp(38px,8.4vw,132px);font-weight:400;line-height:.9;letter-spacing:-.04em;
  text-transform:uppercase;max-width:14ch;
}
.mast__line{margin-top:clamp(18px,3vh,32px);font-size:clamp(16px,1.8vw,28px);color:var(--bone);max-width:30ch;font-weight:300}
.mast__sub{margin-top:14px;color:var(--smoke);max-width:56ch}

.specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  margin-top:clamp(40px,7vh,80px);background:var(--line);border:1px solid var(--line);
}
.specs>div{background:var(--ink);padding:clamp(16px,1.8vw,24px)}
.specs dt{color:var(--red);margin-bottom:8px}
.specs dd{font-size:clamp(13px,1vw,16px);line-height:1.45}
.specs a{border-bottom:1px solid var(--line-red)}
.specs a:hover{border-color:var(--ember);color:#fff}

/* ---------- cover ---------- */
.cover{position:relative;margin:clamp(30px,5vh,60px) 0 0;padding:0 var(--pad)}
.cover__in{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0b0203;border:1px solid rgba(200,0,10,.22)}
.cover__in img,.cover__in video{width:100%;height:100%;object-fit:cover}
.cover__in::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(70,0,4,.18),rgba(5,5,5,.42));pointer-events:none}

/* ---------- generic section ---------- */
.sec{padding:clamp(70px,12vh,150px) var(--pad);position:relative}
.sec__head{margin-bottom:clamp(34px,6vh,66px)}
.sec__no{color:var(--red);display:block;margin-bottom:12px}
.sec h2{font-size:clamp(26px,4.6vw,66px);font-weight:400;line-height:.98;letter-spacing:-.03em;text-transform:uppercase;max-width:20ch}
/* Ruthie's x-height is tiny, so it needs a lot of point size to balance the caps — and at
   that size it can never share a line, so it gets its own, exactly like the home page */
.sec h2 .script{display:block;font-size:1.85em;line-height:.82;margin:.1em 0 0}

/* ---------- in short ---------- */
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,3vw,44px)}
.brief__b h3{font-size:clamp(15px,1.2vw,19px);font-weight:500;margin-bottom:12px;letter-spacing:-.01em}
.brief__b h3 span{color:var(--red);margin-right:10px;font-weight:400}
.brief__b p{color:var(--smoke);line-height:1.68}

/* ---------- decisions ---------- */
.dec{display:flex;flex-direction:column;gap:clamp(30px,6vh,70px)}
.dec__i{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,26px);
  padding-top:clamp(24px,4vh,40px);border-top:1px solid var(--line);
}
@media (min-width:861px){.dec__i{grid-template-columns:5.5rem minmax(0,1fr)}}
.dec__n{font-size:clamp(28px,3.4vw,52px);line-height:.9;color:var(--red);font-weight:400}
.dec__b h3{font-size:clamp(19px,2.3vw,34px);font-weight:400;line-height:1.12;letter-spacing:-.02em;margin-bottom:16px;max-width:22ch}
.dec__b p{color:var(--smoke);line-height:1.72;max-width:66ch}
.dec__b p+p{margin-top:14px}
.dec__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dec__tags li{border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}

/* ---------- under the hood ---------- */
.hood{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(14px,1.8vw,22px)}
.hood__c{
  border:1px solid var(--line);border-radius:18px;padding:clamp(18px,1.9vw,26px);
  background:linear-gradient(150deg,#0d0304 0%,#070202 60%,#0a0203 100%);
}
.hood__c h4{color:var(--ember);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;margin-bottom:11px}
.hood__c p{color:var(--smoke);font-size:clamp(12px,.9vw,14.5px);line-height:1.6}

/* ---------- outcome ---------- */
.out{display:flex;flex-direction:column;gap:0}
.out__i{display:grid;gap:6px 24px;padding:clamp(18px,2.4vh,26px) 0;border-top:1px solid var(--line)}
@media (min-width:861px){.out__i{grid-template-columns:13rem minmax(0,1fr)}}
.out__k{color:var(--red)}
.out__v{color:rgba(243,239,236,.82);line-height:1.68;max-width:62ch}
.note{margin-top:clamp(24px,4vh,40px);color:var(--smoke);font-size:clamp(12px,.88vw,14px);max-width:58ch;line-height:1.7}

/* ---------- shots ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(12px,1.6vw,20px)}
.shots figure{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0b0203;border:1px solid rgba(200,0,10,.18)}
.shots img,.shots video{width:100%;height:100%;object-fit:cover}

/* ---------- next ---------- */
.next{padding:clamp(70px,12vh,140px) var(--pad) clamp(90px,14vh,170px);border-top:1px solid var(--line)}
.next a{display:block}
.next__k{color:var(--red);margin-bottom:18px}
.next h2{font-size:clamp(32px,6.4vw,96px);font-weight:400;line-height:.94;letter-spacing:-.035em;text-transform:uppercase;transition:color .4s var(--ease)}
.next a:hover h2{color:var(--ember)}
.next__cta{margin-top:clamp(40px,7vh,80px);display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:11px;background:var(--red);color:#fff;
  padding:14px 26px;border-radius:999px;font-weight:500;font-size:clamp(12px,.9vw,14px);
  letter-spacing:.12em;text-transform:uppercase;transition:translate .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 0 40px rgba(200,0,10,.4);
}
.btn:hover{translate:0 -2px;box-shadow:0 0 56px rgba(200,0,10,.6)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:13px 24px;border-radius:999px;color:var(--smoke);
  font-size:clamp(11px,.8vw,13px);letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.btn-ghost:hover{border-color:var(--red);color:var(--bone)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px)}
.no-js .rv,.ready .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}
@media (max-width:720px){
  .mast h1{max-width:none}
  .sec h2{max-width:none}
}