/* Shared styles for project case-study pages.
   Imported by every project HTML file via <link rel="stylesheet" href="_template.css">. */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --mute:#7a7a7a;
  --line:#e9e9e9;
  --maxw:1400px;
  --gutter:clamp(20px, 3.5vw, 40px);
  --section:clamp(80px, 12vw, 160px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  font-size:15px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.uppercase{font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.95}
.editorial{font-family:'Fraunces','Times New Roman',serif;font-weight:300;font-style:italic;letter-spacing:-0.015em;line-height:1}
.label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--mute)}

/* ── Header (matches main page) ── */
header{
  position:sticky;top:0;z-index:50;
  background:#ffffff;
  border-bottom:1px solid var(--line);
}
.nav{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;height:64px;
}
.nav .left{justify-self:start}
.nav .center{justify-self:center}
.nav .right{justify-self:end}
.logo-mark{display:block;height:30px;width:auto;filter:invert(1)}
nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0}
nav a{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.06em;
  padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s ease;
}
@media (hover:hover){nav a:hover{border-color:var(--ink)}}
.nav .right{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em}
@media (hover:hover){.nav .right a:hover{opacity:0.6;transition:opacity .2s ease}}

/* ── Mobile menu trigger ── */
.menu-toggle{
  display:none;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;
  background:none;border:0;padding:8px 0;cursor:pointer;color:var(--ink);
}
.menu-toggle .lines{position:relative;display:inline-block;width:18px;height:10px;flex:0 0 18px}
.menu-toggle .lines::before,
.menu-toggle .lines::after{
  content:'';position:absolute;left:0;right:0;height:1.6px;background:currentColor;
  transition:transform .25s ease, top .25s ease, bottom .25s ease;
}
.menu-toggle .lines::before{top:0}
.menu-toggle .lines::after{bottom:0}

/* ── Mobile menu overlay ── */
.menu-overlay{
  position:fixed;inset:0;background:#000;color:#fff;
  z-index:60;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  display:flex;flex-direction:column;
  padding:80px var(--gutter) 32px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.menu-overlay.is-open{opacity:1;pointer-events:auto}
.menu-overlay .top{
  position:absolute;top:0;left:0;right:0;height:64px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--gutter);
}
.menu-overlay .top img{height:30px;width:auto}
.menu-overlay .close{
  background:none;border:0;cursor:pointer;color:#fff;
  font-family:'Inter',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  padding:8px 0;
}
.menu-overlay nav{margin:auto 0}
.menu-overlay nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.menu-overlay nav a{
  color:#fff;text-decoration:none;
  font-family:'Inter',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.005em;
  font-size:clamp(38px, 11vw, 72px);line-height:0.98;
  display:block;padding:4px 0;
}
.menu-overlay .meta{
  margin-top:32px;padding-top:24px;border-top:1px solid #1a1a1a;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  color:#9b9b9b;font-size:12px;letter-spacing:0.06em;
}
.menu-overlay .meta strong{
  display:block;color:#fff;font-weight:700;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  margin-bottom:6px;
}
.menu-overlay .meta a{color:#fff}

@media (max-width:760px){
  nav ul{display:none}
  .nav .right{display:none}
  .menu-toggle{display:inline-flex;position:absolute;right:0;top:50%;transform:translateY(-50%)}
}

/* ── Project intro ── */
.project-intro{
  padding:clamp(60px,9vw,120px) 0 clamp(48px,6vw,80px);
  border-bottom:1px solid var(--line);
}
.project-intro .container{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
}
.project-intro .crumb{
  grid-column:1 / -1;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
  margin-bottom:clamp(20px,3vw,40px);
}
.project-intro h1{
  grid-column:1 / span 9;
  margin:0;
  font-size:clamp(40px,7vw,112px);
  line-height:0.95;letter-spacing:-0.025em;
  font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;
}
.project-intro h1 .it{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  text-transform:none;letter-spacing:-0.025em;
}
.project-intro .meta{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:clamp(40px,5vw,72px);
  padding-top:24px;border-top:1px solid var(--line);
}
.project-intro .meta .col{display:flex;flex-direction:column;gap:6px}
.project-intro .meta .col span:first-child{
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
}
.project-intro .meta .col span:last-child{
  font-size:14px;font-weight:500;color:var(--ink);
}
.project-intro .lede{
  grid-column:1 / span 8;
  margin:clamp(40px,5vw,64px) 0 0;
  font-size:clamp(18px,1.6vw,22px);line-height:1.45;
  max-width:60ch;
}
.project-intro .lede em{font-family:'Fraunces',serif;font-style:italic;font-weight:300}
@media (max-width:760px){
  .project-intro .container{grid-template-columns:1fr}
  .project-intro h1,.project-intro .lede{grid-column:1 / -1}
  .project-intro .meta{grid-template-columns:repeat(2,1fr)}
}

/* ── Horizontal scrolling image stack ── */
.case-stack{
  padding:clamp(48px,6vw,80px) 0 clamp(80px,10vw,120px);
  position:relative;
}
.case-stack .scroll-hint{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 var(--gutter) 24px;
  font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
}
.case-stack .scroll-hint .arrow{font-size:14px;letter-spacing:0;animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{
  0%,100%{transform:translateX(0);opacity:.5}
  50%{transform:translateX(6px);opacity:1}
}
.case-stack .scroll-area{
  display:flex;
  gap:clamp(14px,1.4vw,22px);
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 var(--gutter) 8px;
  cursor:grab;
  -ms-overflow-style:none;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  user-select:none;
  /* GPU promotion + isolation so paints don't cascade */
  will-change:scroll-position;
  transform:translateZ(0);
  contain:content;
}
.case-stack .scroll-area::-webkit-scrollbar{display:none}
.case-stack .scroll-area.dragging{cursor:grabbing}
.case-stack figure{
  margin:0;
  flex:0 0 auto;
  height:clamp(400px, 60vh, 640px);
  position:relative;
  /* Each figure gets its own paint layer */
  contain:layout paint;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.case-stack img{
  height:100%;
  width:auto;
  display:block;
  background:#f3f3f3;
  pointer-events:none; /* drag passes through to scroll-area */
}
.case-stack figcaption{
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
  margin-top:10px;
}
/* Progress bar at the bottom */
.case-stack .progress{
  margin:24px var(--gutter) 0;
  height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.case-stack .progress-bar{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--ink);
  width:0%;
  transition:width .15s ease-out;
}
@media (max-width:760px){
  .case-stack figure{height:60vh}
}

/* ── Bottom nav ── */
.case-foot{
  border-top:1px solid var(--line);
  padding:clamp(40px,5vw,72px) 0;
}
.case-foot .container{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
}
.case-foot a{
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  font-weight:600;
}
.case-foot .next{
  text-align:right;
  font-size:clamp(20px,2.4vw,32px);
  letter-spacing:-0.015em;text-transform:none;font-weight:500;
}
.case-foot .next .it{font-family:'Fraunces',serif;font-style:italic;font-weight:300}
.case-foot a:hover{opacity:0.6;transition:opacity .2s ease}
@media (max-width:760px){
  .case-foot .container{grid-template-columns:1fr;gap:16px}
  .case-foot .next{text-align:left}
}

/* ── Footer (matches main) ── */
footer{
  background:#000000;color:#9b9b9b;
  padding:24px 0 28px;
  font-size:12px;
}
footer .container{display:flex;justify-content:space-between;align-items:center;letter-spacing:0.04em}
footer a{color:#9b9b9b}
footer a:hover{color:#fff}
@media (max-width:760px){footer .container{flex-direction:column;gap:8px;align-items:flex-start}}