/* ═══════════════════════════════════════════
   WITHMEDIA DESIGN SYSTEM
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0a0a0a; --black2:#0c0c0c; --black3:#141414; --black4:#1c1c1c;
  --white:#f2f0eb; --white2:#e0ddd6;
  --muted:rgba(242,240,235,0.42);
  --muted2:rgba(242,240,235,0.18);
  --muted3:rgba(242,240,235,0.07);
  --red:#c9193f; --red2:#e8285a; --red-glow:rgba(201,25,63,0.2);
  --green:#10b981; --blue:#4a5cff;
  --line:rgba(242,240,235,0.065);
  --line2:rgba(242,240,235,0.13);
  --ff:'Bebas Neue',sans-serif;
  --fs:'Syne',sans-serif;
  --fm:'DM Mono',monospace;
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}
html{background:var(--black);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{background:var(--black);color:var(--white);font-family:var(--fs);font-weight:300;overflow-x:hidden;line-height:1.5;min-height:100vh;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;}

/* Film grain */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}

/* ─────────── SHARED NAV ─────────── */
.wm-nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.75rem;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:rgba(5,5,5,0.75);border-bottom:1px solid var(--line);
}
.wm-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--ff);font-size:1.2rem;letter-spacing:.08em;}
.wm-brand .dot{width:7px;height:7px;background:var(--red);border-radius:50%;animation:pulse 2s infinite;}
.wm-brand .slash{color:var(--red);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(.8);}}

.wm-back{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--fm);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding:.55rem 1rem;border:1px solid var(--line2);border-radius:100px;
  transition:all .3s var(--ease-out);
}
.wm-back:hover{background:var(--white);color:var(--black);border-color:var(--white);}
.wm-back .arrow{display:inline-block;transition:transform .3s var(--ease-out);}
.wm-back:hover .arrow{transform:translateX(-3px);}

.wm-crumb{font-family:var(--fm);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);display:none;}
@media(min-width:640px){.wm-crumb{display:flex;gap:.6rem;align-items:center;}}
.wm-crumb span{opacity:.5;}

/* ─────────── UTILITY TYPE ─────────── */
.wm-eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--fm);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.wm-eyebrow::before{content:'';width:24px;height:1px;background:var(--red);}
.wm-h1{font-family:var(--ff);font-size:clamp(3rem,10vw,9rem);line-height:.9;letter-spacing:-.01em;}
.wm-h1 .stroke{-webkit-text-stroke:2px var(--white);color:transparent;font-style:italic;}
.wm-h1 .red{color:var(--red);}
.wm-h2{font-family:var(--ff);font-size:clamp(2.5rem,6vw,5rem);line-height:.95;letter-spacing:-.005em;}
.wm-h2 .stroke{-webkit-text-stroke:1.5px var(--white);color:transparent;font-style:italic;}
.wm-h3{font-family:var(--ff);font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:.95;letter-spacing:-.005em;}
.wm-lead{font-size:clamp(1rem,1.3vw,1.2rem);color:var(--white2);line-height:1.55;max-width:620px;}
.wm-body{font-size:1rem;color:var(--white2);line-height:1.6;}
.wm-muted{color:var(--muted);font-size:.95rem;}

/* ─────────── BUTTONS ─────────── */
.wm-btn{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fm);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;padding:.9rem 1.6rem;border-radius:100px;transition:all .3s var(--ease-out);
  border:1px solid transparent;white-space:nowrap;
}
.wm-btn.primary{background:var(--red);color:var(--white);}
.wm-btn.primary:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 8px 24px var(--red-glow);}
.wm-btn.ghost{border-color:var(--line2);color:var(--white);}
.wm-btn.ghost:hover{background:var(--white);color:var(--black);border-color:var(--white);}
.wm-btn.solid{background:var(--white);color:var(--black);}
.wm-btn.solid:hover{background:var(--red);color:var(--white);}
.wm-btn .arrow{transition:transform .3s var(--ease-out);}
.wm-btn:hover .arrow{transform:translate(3px,-3px);}

.wm-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--fm);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.4rem .8rem;background:var(--muted3);border:1px solid var(--line2);border-radius:100px;color:var(--white2);
}
.wm-chip.live{background:var(--red);color:var(--white);border-color:var(--red);}
.wm-chip.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--white);animation:pulse 1.5s infinite;}

/* ─────────── SECTION / CONTAINER ─────────── */
.wm-container{max-width:1400px;margin:0 auto;padding:0 2rem;width:100%;}
.wm-section{padding:5rem 0;}
.wm-section.lg{padding:7rem 0;}
.wm-section.sm{padding:3rem 0;}

/* ─────────── PROJECT HEADER (inside each project page) ─────────── */
.proj-header{
  padding:5rem 2rem 4rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.proj-header .vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 20%,var(--red-glow),transparent 55%);}
.proj-header-content{position:relative;max-width:1400px;margin:0 auto;}
.proj-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;
  font-family:var(--fm);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);}
.proj-meta .num{color:var(--red);}
.proj-meta .divider{width:20px;height:1px;background:var(--muted2);}
.proj-title-row{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:flex-end;}
@media(max-width:800px){.proj-title-row{grid-template-columns:1fr;gap:1.5rem;}}
.proj-title{font-family:var(--ff);font-size:clamp(3rem,9vw,8rem);line-height:.9;letter-spacing:-.01em;}
.proj-title em{color:var(--red);font-style:normal;}
.proj-title .stroke{-webkit-text-stroke:2px var(--white);color:transparent;font-style:italic;}
.proj-lead{color:var(--white2);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;}
.proj-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}

/* ─────────── FOOTER ─────────── */
.wm-footer{padding:3rem 2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;
  font-family:var(--fm);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);margin-top:4rem;}
.wm-footer a:hover{color:var(--red);}

/* ─────────── REVEAL ANIMATION ─────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}