/* ============================================================
   NN/WORKS — Editorial homepage
   Static hero · infinite horizontal scaling image strip
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --line:rgba(10,10,10,.14);
  --mute:rgba(10,10,10,.5);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}
/* dotted grid background — sits behind all page content */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(10,10,10,.528) 1.1px, transparent 1.4px);
  background-size:104px 104px; background-position:0 0;
}

.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

::selection{background:var(--ink);color:var(--paper)}

/* ============================================================
   LOADING INTRO
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:1000;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:42px;
  transition:opacity .8s var(--ease), visibility .8s;
}
.intro.done{opacity:0; visibility:hidden; pointer-events:none}
.intro-mark{
  width:min(420px,56vw); height:auto;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.intro-mark img{
  display:block; width:100%; height:auto;
  clip-path:inset(100% 0 0 0);
  transform:translateY(18px);
  animation:markReveal 1s var(--ease) .15s forwards;
}
@keyframes markReveal{ to{clip-path:inset(0 0 0 0); transform:translateY(0)} }
.intro-bar{ width:200px; height:1.5px; background:var(--line); position:relative; overflow:hidden; }
.intro-bar i{ position:absolute; inset:0 100% 0 0; background:var(--ink); transition:right .15s linear; }
.intro-pct{
  position:absolute; bottom:34px; left:0; right:0; text-align:center;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--mute);
}

/* ============================================================
   FIXED NAV — mix-blend difference
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 36px;
  color:var(--ink); pointer-events:none;
  background:rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid rgba(10,10,10,.08);
}
.nav-left{display:flex; align-items:center; gap:13px; pointer-events:auto}
.nav-seal{
  width:30px; height:30px; border-radius:50%; border:1.4px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Anton",sans-serif; font-size:13px; letter-spacing:-.02em; line-height:1;
}
.nav-wordmark{ font-family:"Anton",sans-serif; font-size:17px; letter-spacing:.01em; line-height:1; text-decoration:none; color:inherit; display:flex; align-items:center; }
.nav-wordmark img{ display:block; height:26px; width:auto; }
.nav-links{display:flex; gap:30px; pointer-events:auto}
.nav-links a{
  position:relative; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  text-decoration:none; color:inherit; font-weight:600; padding-bottom:2px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}

/* ============================================================
   INFINITE IMAGE STRIP  (bottom-anchored)
   ============================================================ */
.strip{
  position:fixed; inset:0; z-index:200;
  pointer-events:none;            /* slots re-enable below */
}
.shot{
  position:absolute; bottom:0; left:0;
  transform-origin:bottom left;   /* scale grows up + right from bottom-left so tiles pack flush */
  will-change:transform;
  backface-visibility:hidden;
}
.shot .clip{
  position:relative; overflow:hidden; background:#e9e8e4;
  width:100%; height:100%;
}
.shot media-slot{ position:absolute; inset:0; width:100%; height:100%; pointer-events:auto; }
.ph{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(10,10,10,.04) 0 11px, rgba(10,10,10,0) 11px 22px),
    linear-gradient(180deg,#eeece8,#e0ded9);
}

/* ============================================================
   STATIC HERO  (top-left, does not move)
   ============================================================ */
.veil{
  position:fixed; top:0; left:0; z-index:300;
  width:min(42vw,640px); height:54vh;
  background:linear-gradient(108deg,
     var(--paper) 0%, var(--paper) 38%, rgba(255,255,255,.85) 60%, rgba(255,255,255,0) 84%);
  pointer-events:none;
}
.hero{
  position:fixed; top:88px; left:36px; z-index:400;
  max-width:70vw; pointer-events:none;
}
.hero-words{margin-bottom:24px}
.hero-line{overflow:hidden; display:block; padding-top:.02em}
.hero-line > span{
  display:block;
  font-family:"Anton",sans-serif;
  font-size:clamp(44px,11.5vw,165px);
  line-height:.94; letter-spacing:-.005em; text-transform:uppercase;
  transform:translateY(110%);
}
.reveal .hero-line > span{ transform:translateY(0); transition:transform 1.05s var(--ease); }
.reveal .hero-line:nth-child(2) > span{transition-delay:.1s}

.hero-tag{
  font-family:"Anton",sans-serif;
  font-size:clamp(14px,1.5vw,24px); line-height:1.06; letter-spacing:.005em;
  text-transform:uppercase; max-width:min(56vw,600px);
  opacity:0; transform:translateY(20px);
}
.hero-sub{
  margin-top:14px; font-family:"Anton",sans-serif;
  font-size:clamp(13px,1.15vw,18px); letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink);
  opacity:0; transform:translateY(20px);
}
.reveal .hero-tag{opacity:1; transform:translateY(0); transition:opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s}
.reveal .hero-sub{opacity:1; transform:translateY(0); transition:opacity .9s var(--ease) .6s, transform .9s var(--ease) .6s}

/* ============================================================
   SCROLL HINT (bottom-left)
   ============================================================ */
/* ============================================================
   CASE STUDY CARD (top-right, dismissible)
   ============================================================ */
.casecard{
  position:fixed; top:92px; right:34px; z-index:500;
  width:300px; padding:11px;
  display:flex; align-items:center; gap:11px;
  background:var(--paper); border:1px solid var(--line);
  opacity:0; transform:translateY(-10px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.casecard.show{opacity:1; transform:translateY(0)}
.casecard.dismiss{opacity:0; transform:translateY(-8px); pointer-events:none}
.casecard image-slot{flex:0 0 auto; width:46px; height:58px}
.cc-text{flex:1 1 auto; min-width:0}
.cc-title{font-size:12px; font-weight:700; letter-spacing:.01em; line-height:1.2}
.cc-sub{font-size:11px; line-height:1.3; color:var(--mute); margin-top:3px}
.cc-x{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:18px; height:18px; color:var(--ink); flex:0 0 auto;
  display:flex; align-items:flex-start; justify-content:center; pointer-events:auto;
  align-self:flex-start;
}
.cc-x svg{width:12px; height:12px}

/* ============================================================
   SCROLL HINT (bottom-left)
   ============================================================ */
.hint{
  position:fixed; bottom:30px; left:34px; z-index:500;
  display:flex; align-items:center; gap:12px;
  mix-blend-mode:difference; color:#fff;
  opacity:0; transition:opacity .6s var(--ease);
}
.hint.show{opacity:1}
.hint .lbl{font-size:10px; letter-spacing:.34em; text-transform:uppercase; font-weight:600}
.hint .bar{ width:60px; height:1.5px; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.hint .bar i{ position:absolute; top:0; bottom:0; left:0; width:40%; background:#fff; animation:hintSlide 1.9s var(--ease) infinite; }
@keyframes hintSlide{ 0%{transform:translateX(-110%)} 60%,100%{transform:translateX(260%)} }

@media (max-width:720px){
  .nav{ padding:14px 18px; }
  .nav-wordmark img{ height:21px; }
  .nav-links{ gap:14px; }
  .nav-links a{ font-size:9px; letter-spacing:.14em; }
  .hero{ top:70px; left:18px; max-width:92vw; }
  .hero-line > span{ font-size:clamp(56px,15vw,84px); }
  .hero-words{ margin-bottom:16px; }
  .hero-tag{ max-width:90vw; }
  .veil{ display:none; }
  .casecard{ display:none; }
  .hint{ left:18px; }
}
@media (max-width:430px){
  .nav-links{ gap:10px; }
  .nav-links a{ font-size:8px; letter-spacing:.08em; }
  .nav-wordmark img{ height:19px; }
}