:root{
  --gut:clamp(20px,4.5vw,72px);--r:22px;
  --bg:#0B0B0C;--panel:#151517;--panel2:#1B1B1F;
  --line:#28282C;--line2:#3A3A42;
  --text:#F5F4F1;--mute:#9C9CA3;--mute2:#6E6E78;--orange:#F06A1A;
}
/* ==========================================================================
   impact.css  |  Impact detail pages (/work/*)  |  load AFTER wn-system.css
   Hero orientation = ONE class on the hero:  imp-hero--landscape | imp-hero--portrait
   Tune nav clearance in one place: --imp-nav on .imp-hero (desktop 90px).
   All hover/show/hide lives in classes here. Never put border or box-shadow inline
   on a tile, inline beats :hover.
   ========================================================================== */
.imp-page{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.imp-page *{box-sizing:border-box}
.imp-page a{color:var(--text);text-decoration:none}
.imp-page img{max-width:100%;display:block}
.imp-page::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ---------- HERO (shared) ---------- */
.imp-hero{--imp-nav:90px;position:relative;width:100%;overflow:hidden;display:grid}
.imp-hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--bg)}
.imp-hero-media{position:relative;z-index:1;overflow:hidden}
.imp-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.imp-hero-media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#0B0B0C 0%,rgba(11,11,12,.6) 15%,transparent 40%),linear-gradient(180deg,transparent 60%,rgba(11,11,12,.5) 85%,#0B0B0C 100%)}
.imp-hero-text{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center}
.imp-client{font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-size:clamp(14px,1.6vw,20px);text-transform:uppercase;letter-spacing:.08em;color:transparent;-webkit-text-stroke:1.2px var(--mute);line-height:1.2}
.imp-headline{font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-size:clamp(28px,4.2vw,60px);text-transform:uppercase;line-height:1;margin:12px 0 0;letter-spacing:-.025em;max-width:18ch;text-wrap:balance}

/* ---------- HERO: LANDSCAPE ---------- */
.imp-hero--landscape{min-height:1000px;grid-template-columns:minmax(340px,55%) 1fr;align-items:center}
.imp-hero--landscape .imp-hero-media{position:absolute;top:var(--imp-nav);bottom:0;right:0;width:60%}
.imp-hero--landscape .imp-hero-text{grid-column:1/3;padding:64px var(--gut);max-width:1400px}

/* ---------- HERO: PORTRAIT ---------- */
.imp-hero--portrait{min-height:480px;grid-template-columns:1fr minmax(340px,60%)}
.imp-hero--portrait .imp-hero-text{grid-column:1;grid-row:1;padding:64px var(--gut)}
.imp-hero--portrait .imp-hero-media{grid-column:2;grid-row:1;aspect-ratio:4/5;min-height:100%;margin-top:var(--imp-nav)}

/* ---------- HERO: MOBILE (image on top, headline over its fade) ---------- */
@media(max-width:820px){
  .imp-hero,.imp-hero--landscape,.imp-hero--portrait{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:80px}
  .imp-hero .imp-hero-media{order:-1;position:relative;top:auto;right:auto;bottom:auto;width:100%;min-height:0;margin-top:0}
  .imp-hero--landscape .imp-hero-media{aspect-ratio:5/4}
  .imp-hero--portrait .imp-hero-media{aspect-ratio:4/5;max-height:70vh}
  .imp-hero .imp-hero-media::after{background:linear-gradient(180deg,transparent 50%,rgba(11,11,12,.65) 80%,#0B0B0C 100%)}
  .imp-hero .imp-hero-text{margin-top:-72px;padding:0 var(--gut) 32px;max-width:none}
}

/* ---------- BODY ----------
   Story blocks are <section> elements. wn-system.css styles bare <section>
   (padding, border, gutter), so these rules use .imp-page .imp-block to win
   on specificity and strip all of that back to a clean 50px rhythm.
   Section titles mirror .imp-related-title (Archivo Black, uppercase, 36px cap)
   and body copy mirrors .imp-lede (Inter, up to 20px). Edit both in one place. */
.imp-article{max-width:800px;margin:0 auto;padding:64px var(--gut) 80px}
.imp-lede{font-size:clamp(17px,1.5vw,20px);color:var(--mute);line-height:1.65;margin:0}
.imp-video{margin-top:32px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.imp-video iframe{width:100%;height:100%;border:0;display:block}
.imp-page .imp-block{margin:50px 0 0;padding:0;border:0}
.imp-page .imp-block h2{font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-weight:400;font-size:clamp(22px,3vw,36px);text-transform:uppercase;line-height:1.05;letter-spacing:-.02em;margin:0 0 18px}
.imp-page .imp-block p{font-size:clamp(17px,1.5vw,20px);color:var(--mute);line-height:1.65;margin:0 0 16px}
.imp-page .imp-block p:last-child{margin-bottom:0}
.imp-fig{margin:24px 0 0;border-radius:var(--r);overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.imp-fig img{width:100%;height:auto}

/* ---------- KEEP EXPLORING ---------- */
.imp-related{padding:0 var(--gut) 80px;max-width:1400px;margin:0 auto}
.imp-related-in{border-top:1px solid var(--line);padding-top:64px}
.imp-kicker{font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.imp-related-title{font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-size:clamp(22px,3vw,36px);text-transform:uppercase;line-height:1;margin:14px 0 0;letter-spacing:-.02em}
.imp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.imp-tile{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;overflow:hidden;background:#1B1B1E;border:1px solid var(--line);border-radius:var(--r);transition:border-color .35s ease,box-shadow .35s ease}
.imp-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:5;background:linear-gradient(90deg,rgba(255,92,0,0),var(--orange) 45%,rgba(255,92,0,.25) 100%);opacity:.55;transition:opacity .35s ease}
.imp-tile:hover,.imp-tile:focus-visible{border-color:rgba(255,92,0,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 2px 4px rgba(0,0,0,.4),0 30px 70px -32px rgba(255,92,0,.28)}
.imp-tile:hover::before,.imp-tile:focus-visible::before{opacity:1}
.imp-tile:focus-visible{outline:none}
.imp-tile-media{position:absolute;inset:0;transition:transform .6s ease;will-change:transform}
.imp-tile:hover .imp-tile-media,.imp-tile:focus-visible .imp-tile-media{transform:scale(1.045)}
.imp-tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.imp-tile-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,11,12,.55) 62%,rgba(11,11,12,.94) 100%)}
.imp-tile-body{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;gap:6px;padding:22px 24px}
.imp-tile-name{font-family:'Archivo Black','Arial Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(17px,1.6vw,22px);line-height:1.1}
.imp-tile-tag{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.imp-tile-tag b{color:var(--orange);font-weight:500;margin-right:6px}
@media(max-width:760px){.imp-related-grid{grid-template-columns:1fr}}

/* ---------- INTERNAL open-item chips (delete each page's block before sign-off) ---------- */
.imp-flags{max-width:800px;margin:56px auto 0;padding:20px 22px;border:1px dashed var(--line2);border-radius:14px;background:rgba(240,106,26,.04)}
.imp-flags-tag{display:inline-block;font-family:'Outfit','JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.imp-flags ul{margin:0;padding-left:18px}
.imp-flags li{font-family:'Outfit',sans-serif;font-size:12.5px;line-height:1.5;color:var(--mute2);margin:4px 0}