/* ============================================================
   DEPICTION STUDIO — MERGED
   Base identity: press-proof (substrate, plates, registration, ink).
   Grafted mechanic: the running screen from the screening-room
   concept — a plate that plays the live site on command, and a
   dedicated Run Room where five sites play at full length.
   ============================================================ */

:root{
  --stock:#D9D9D4;
  --stock-2:#CFCFC9;
  --chalk:#F1F1ED;
  --graphite:#17181A;
  --room:#101114;
  --room-2:#191A1E;
  --ink-mag:#D6006D;
  --amber:#E8A23D;
  --grey:#7A7B78;
  --grey-2:#9A9B97;
  --rule:rgba(23,24,26,.18);
  --rule-soft:rgba(23,24,26,.10);
  --rule-inv:rgba(241,241,237,.16);

  --f-disp:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --f-ser:'Instrument Serif',Georgia,serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(18px,3.4vw,64px);

  /* semantic tokens the House Lights switch repaints */
  --sheet:#F1F1ED;     /* paper a plate is mounted on */
  --ink-2:#3A3B3D;     /* secondary body ink */
  --ink-3:#4A4B4D;     /* tertiary / caption ink */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--stock);color:var(--graphite);
  font-family:var(--f-disp);font-variation-settings:'wdth' 100;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink-mag);color:var(--chalk)}
:focus-visible{outline:1.5px solid var(--ink-mag);outline-offset:4px}

/* ---------- shared type ---------- */
.slug{
  font-family:var(--f-mono);font-size:10px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  line-height:1.4;
}
.slug--ink{color:var(--graphite)}
.slug--mag{color:var(--ink-mag)}
.slug--am{color:var(--amber)}
.slug--inv{color:rgba(241,241,237,.5)}
.ser{font-family:var(--f-ser);font-style:italic;font-weight:400}

.h-mega{
  font-family:var(--f-disp);
  font-variation-settings:'wdth' 118,'wght' 500;
  font-size:clamp(3.4rem,13.4vw,14rem);
  line-height:.82;letter-spacing:-.035em;margin:0;
  text-transform:uppercase;
}
.h-sec{
  font-variation-settings:'wdth' 112,'wght' 500;
  font-size:clamp(2rem,6.2vw,5.4rem);
  line-height:.9;letter-spacing:-.03em;margin:0;text-transform:uppercase;
}
.h-sub{
  font-variation-settings:'wdth' 105,'wght' 500;
  font-size:clamp(1.1rem,2vw,1.5rem);
  line-height:1.1;letter-spacing:-.015em;margin:0;text-transform:uppercase;
}
.body-lg{font-size:clamp(15px,1.35vw,18px);line-height:1.62;color:var(--ink-2);max-width:34em}
.body-sm{font-size:14px;line-height:1.6;color:var(--ink-3)}

/* ---------- page frame: crop marks + noise ---------- */
.frame{position:fixed;inset:0;pointer-events:none;z-index:90}
.crop{position:absolute;width:26px;height:26px}
.crop::before,.crop::after{content:'';position:absolute;background:var(--graphite);opacity:.55}
.crop::before{width:100%;height:1px;top:0;left:0}
.crop::after{width:1px;height:100%;top:0;left:0}
.crop.tl{top:12px;left:12px}
.crop.tr{top:12px;right:12px;transform:scaleX(-1)}
.crop.bl{bottom:12px;left:12px;transform:scaleY(-1)}
.crop.br{bottom:12px;right:12px;transform:scale(-1)}
body.is-room .crop::before,body.is-room .crop::after{background:var(--chalk);opacity:.4}

.grain{
  position:fixed;inset:-50%;pointer-events:none;z-index:89;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- cursor ---------- */
.cur{
  position:fixed;top:0;left:0;z-index:120;pointer-events:none;
  width:9px;height:9px;border-radius:50%;background:var(--ink-mag);
  transform:translate(-50%,-50%);
  transition:width .5s var(--ease),height .5s var(--ease),background .4s;
  display:none;mix-blend-mode:normal;
}
.cur__txt{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chalk);opacity:0;transition:opacity .3s;white-space:nowrap;
}
body.cur-on .cur{display:block}
.cur.is-lg{width:74px;height:74px}
.cur.is-lg .cur__txt{opacity:1;transition-delay:.1s}
.cur.is-am{background:var(--amber)}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding:20px var(--gut) 14px;
  transition:color .5s ease;
}
.hdr__mark{display:flex;align-items:baseline;gap:9px}
.hdr__mark b{
  font-variation-settings:'wdth' 116,'wght' 600;font-size:14px;
  letter-spacing:.01em;text-transform:uppercase;
}
.hdr__nav{display:flex;gap:26px}
.hdr__nav a{position:relative;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.hdr__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__right{display:flex;justify-content:flex-end;align-items:center;gap:16px}
.hdr__cta{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid currentColor;padding:7px 13px;border-radius:999px;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.hdr__cta:hover{background:var(--ink-mag);border-color:var(--ink-mag);color:var(--chalk)}
body.is-room .hdr{color:var(--chalk)}
body.is-room .hdr .slug{color:rgba(241,241,237,.45)}

/* ---------- layout helpers ---------- */
.sec{position:relative;padding-inline:var(--gut)}
.rule{height:1px;background:var(--rule);width:100%}
.eyebrow{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:clamp(28px,5vw,64px);
}
.eyebrow .n{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--ink-mag)}
.eyebrow .t{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.eyebrow .r{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--grey)}
.eyebrow--inv{border-color:var(--rule-inv)}
.eyebrow--inv .t{color:var(--chalk)}
.eyebrow--inv .r{color:rgba(241,241,237,.4)}
.eyebrow--inv .n{color:var(--amber)}

/* registration target */
.reg{width:22px;height:22px;flex:none;position:relative;color:var(--graphite)}
.reg svg{display:block;width:100%;height:100%}
.reg--spin svg{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.15s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv-clip] > *{clip-path:inset(0 0 101% 0);transition:clip-path 1.35s var(--ease)}
[data-rv-clip].in > *{clip-path:inset(0 0 0 0)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;padding-top:clamp(96px,13vh,150px);
  padding-bottom:36px;display:flex;flex-direction:column;justify-content:space-between;
}
.hero__grid{
  position:absolute;inset:0 var(--gut);display:grid;
  grid-template-columns:repeat(12,1fr);pointer-events:none;z-index:0;opacity:.5;
}
.hero__grid span{border-left:1px solid var(--rule-soft)}
.hero__grid span:last-child{border-right:1px solid var(--rule-soft)}

.hero__top{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:14px 40px}
.hero__top p{margin:0}
.hero__top p:last-child{text-align:right}

.hero__stage{
  position:relative;z-index:2;margin-top:auto;padding-top:4vh;
  background-color:var(--stock);
  background-image:repeating-linear-gradient(to right,var(--rule-soft) 0 1px,transparent 1px calc(100%/12));
}
.hero__plate{
  position:absolute;right:2%;bottom:0;width:min(34vw,420px);
  aspect-ratio:3/4.1;z-index:1;
  box-shadow:0 34px 90px -50px rgba(0,0,0,.7);
}
.hero__plate::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.22));
  transition:opacity .6s var(--ease);
}
.hero__plate:hover::after{opacity:.25}
.hero__runtag{
  position:absolute;left:10px;top:10px;z-index:5;display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(16,17,20,.55);backdrop-filter:blur(6px);padding:6px 10px 6px 8px;border-radius:999px;
  opacity:0;transform:translateY(-4px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hero__plate:hover .hero__runtag{opacity:1;transform:none}
.hero__runtag i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px var(--amber);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero__type{position:relative;z-index:3;mix-blend-mode:difference;color:var(--chalk)}
.hero__type .ln{display:block;overflow:hidden}
.hero__type .ln i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.5s var(--ease)}
.loaded .hero__type .ln i{transform:none}
.hero__type .ln:nth-child(2) i{transition-delay:.12s}
.hero__l2{display:flex;align-items:flex-end;flex-wrap:wrap;gap:clamp(12px,3vw,44px);max-width:min(100%,62vw)}
.hero__l2 .h-mega{font-variation-settings:'wdth' 62,'wght' 500}

.hero__say{
  position:relative;z-index:4;margin:26px 0 0;
  font-family:var(--f-ser);font-style:italic;
  font-size:clamp(1.15rem,2.5vw,2rem);line-height:1.25;max-width:15ch;
  color:var(--graphite);
}
.hero__say em{font-style:italic;color:var(--ink-mag)}

.hero__foot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(28px,5vh,54px)}
.scrollcue{display:flex;align-items:center;gap:10px}
.scrollcue .bar{width:46px;height:1px;background:var(--graphite);position:relative;overflow:hidden}
.scrollcue .bar::after{content:'';position:absolute;inset:0;background:var(--ink-mag);transform:translateX(-100%);animation:cue 2.6s var(--ease-2) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* hero plate crossfade */
.xfade{position:absolute;inset:0;overflow:hidden;background:var(--sheet)}
.xfade > .mini-frame{opacity:0;transition:opacity 1.6s var(--ease)}
.xfade > .mini-frame.on{opacity:1}

/* ============================================================
   COLOR BAR / DENSITY STRIP
   ============================================================ */
.bar{border-block:1px solid var(--rule);overflow:hidden;background:var(--stock-2)}
.bar__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.bar__set{display:flex}
.bar__cell{
  display:flex;align-items:center;gap:12px;padding:11px 22px;border-right:1px solid var(--rule-soft);
  white-space:nowrap;
}
.bar__cell i{width:13px;height:13px;flex:none;display:block}
.bar__cell span{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
@keyframes slide{to{transform:translateX(-50%)}}
.bar:hover .bar__track{animation-play-state:paused}

/* ============================================================
   STATEMENT
   ============================================================ */
.state{padding-block:clamp(80px,13vw,180px)}
.state__wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.state__lead{
  font-variation-settings:'wdth' 92,'wght' 400;
  font-size:clamp(1.5rem,3.9vw,3.15rem);line-height:1.14;letter-spacing:-.028em;
  margin:0;max-width:19ch;
}
.state__lead .ser{font-size:1.06em;line-height:.9}
.state__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,4vw,60px);padding-top:8px}
.state__cols h4{margin:0 0 10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mag)}
.state__cols p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2)}