/* arkemodi.com V3 SITE SKIN — "the void". One universe across every page: ink-void background,
   Ignition accents, the dot-hero band up top, dark content sections below. Sub-pages share this
   file + void-hero.js so nothing ever feels like a different website. */
:root{
  --ignition:#FF4A2E; --ink:#0B0B10; --ink2:#14141b; --paper:#FAFAF8; --stone:#8E8A82;
  --ink-body:#B9B6AE; --line:#26262e; --beige:#CBBFA6;
  --sans:"Helvetica Neue",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"SF Mono","JetBrains Mono","IBM Plex Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;}
.k{color:var(--ignition);}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}
section{padding:clamp(3rem,7vw,5.4rem) 0;position:relative;}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin:0 0 1.1rem;}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--ignition);z-index:80;}

/* the nav pill — identical on every page, including the journey home */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:1rem;
  background:rgba(11,11,16,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:.5rem 1rem .5rem .8rem;white-space:nowrap;}
.nav .brand{display:flex;align-items:center;gap:.45rem;font-weight:800;letter-spacing:-.03em;text-decoration:none;font-size:1rem;}
.nav .brand svg{width:18px;height:auto;display:block;}
.nav .links{display:none;gap:1.1rem;font-size:.84rem;color:var(--ink-body);}
.nav .links a{text-decoration:none;}
.nav .links a:hover,.nav .links a.on{color:#fff;}
@media (min-width:880px){ .nav .links{display:flex;} }
.nav .cta{font-size:.8rem;font-weight:700;background:var(--ignition);border-radius:999px;padding:.4rem .85rem;text-decoration:none;color:#fff;}
/* mobile menu — injected by shared JS; the pill's links are hidden under 880px so phones need this */
.nav .burger{display:inline-flex;align-items:center;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .2rem;gap:.4rem;}
.nav .burger::before{content:"☰";font-size:1rem;}
@media (min-width:880px){ .nav .burger{display:none;} }
#mobileMenu{position:fixed;inset:0;z-index:96;background:rgba(7,7,11,.97);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.15rem;padding:2rem;}
#mobileMenu.on{display:flex;}
#mobileMenu a{font-size:clamp(1.5rem,6vw,2.1rem);font-weight:800;letter-spacing:-.03em;text-decoration:none;}
#mobileMenu a:active{color:var(--ignition);}
#mobileMenu .sml{font-size:1rem;font-weight:600;color:var(--ink-body);}
#mobileMenu .close{position:absolute;top:18px;right:18px;background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:999px;padding:.5rem 1rem;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;}
.draft{position:fixed;left:12px;bottom:12px;z-index:70;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone);background:rgba(11,11,16,.72);border:1px solid rgba(255,255,255,.1);
  border-radius:6px;padding:.35rem .6rem;}

/* dot-hero (sub-pages): the canvas is FIXED behind the whole page; as content scrolls up over it,
   the formation BURSTS APART and the dots part like a curtain — the transition IS the scroll. */
.hero3d{position:relative;height:100vh;min-height:520px;display:flex;align-items:flex-end;}
.hero3d canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;}
.hero3d .veil{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 100% at 50% 40%,transparent 52%,rgba(7,7,11,.8) 100%);}
/* Content must not guillotine the world — same rule as the home page. Sections are FEATHERED and
   translucent, so the dot field stays visible behind the copy and the hero's burst gets to finish
   instead of being cut off by the first solid panel. Feather is 72px here (not the home page's 110)
   because sub-page sections carry less padding, and the copy must sit on the solid part. */
section:not(.hero3d){position:relative;z-index:1;
  background:linear-gradient(to bottom,
    rgba(11,11,16,0) 0,rgba(11,11,16,.84) 72px,
    rgba(11,11,16,.84) calc(100% - 72px),rgba(11,11,16,0) 100%);}
footer.site{position:relative;z-index:1;
  background:linear-gradient(to bottom,rgba(11,11,16,0) 0,var(--ink) 96px);}
.tape{position:relative;z-index:1;background:rgba(11,11,16,.6);}
.hero-copy{position:relative;z-index:1;width:100%;padding-bottom:clamp(1.6rem,4vh,3rem);text-align:center;
  will-change:opacity,transform;}
.hero-copy h1{font-size:clamp(2.6rem,8vw,5.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;margin:0;
  text-shadow:0 4px 40px rgba(7,7,11,.9);text-wrap:balance;}
.hero-copy .sub{color:var(--ink-body);font-size:clamp(1rem,2.4vw,1.25rem);max-width:46ch;margin:1rem auto 0;}

/* content */
.lead-h{font-size:clamp(1.9rem,5.4vw,3.2rem);letter-spacing:-.04em;font-weight:800;line-height:1.04;margin:0 0 1.2rem;
  max-width:22ch;text-wrap:balance;}
.prose{font-size:1.08rem;color:var(--ink-body);max-width:58ch;}
.prose+.prose{margin-top:1rem;}
.prose b{color:#fff;font-weight:600;}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:clamp(1.3rem,3vw,1.9rem);}
.cards{display:grid;grid-template-columns:1fr;gap:1.1rem;}
@media (min-width:760px){ .cards.c2{grid-template-columns:1fr 1fr;} .cards.c3{grid-template-columns:1fr 1fr 1fr;} }
.card h3{margin:.1rem 0 .6rem;font-size:1.2rem;letter-spacing:-.02em;}
.card p{margin:0;color:var(--ink-body);font-size:.98rem;}
.card .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--ignition);}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem;}
.chips span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:.42rem .75rem;color:var(--ink-body);}
.chips .hot{border-color:rgba(255,74,46,.6);color:var(--ignition);}
.foot-sic{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--stone);margin-top:1rem;}
.tape{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.75rem 0;margin:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-body);
  display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;justify-content:center;}
.tape .tri{color:var(--ignition);}
.btn{position:relative;display:inline-block;background:var(--ignition);color:#fff;font-weight:700;font-size:1rem;
  text-decoration:none;padding:.9rem 1.6rem;border-radius:10px;border:0;cursor:pointer;font-family:inherit;overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease;}
.btn::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .45s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(255,74,46,.6);}
.btn:hover::before{left:130%;}
.ghost{color:var(--ignition);text-decoration:none;font-weight:700;border-bottom:2px solid var(--ignition);padding-bottom:2px;}
.still{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:0;}
.still img{display:block;width:100%;height:auto;}
.still figcaption{position:absolute;left:0;bottom:0;background:rgba(7,7,11,.82);color:#fff;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .8rem;}
.still figcaption .k{color:var(--ignition);}

/* forms (contact) */
form.void{display:flex;flex-direction:column;gap:1.1rem;background:var(--ink2);border:1px solid var(--line);
  border-radius:16px;padding:clamp(1.4rem,3.5vw,2rem);}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);}
.field:focus-within label{color:var(--ignition);}
.field input,.field textarea{font-family:inherit;font-size:1rem;color:#fff;background:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;width:100%;}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ignition);box-shadow:0 0 0 3px rgba(255,74,46,.18);}
.form-note{font-size:.82rem;color:var(--stone);margin:0;}

footer.site{border-top:1px solid var(--line);padding:2.6rem 0 3.2rem;margin-top:2rem;}
footer.site .row{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;justify-content:center;font-size:.86rem;color:var(--ink-body);}
footer.site .row a{text-decoration:none;}
footer.site .row a:hover{color:#fff;}
footer.site .legal{margin-top:1.6rem;text-align:center;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;color:var(--stone);line-height:1.8;}

/* film modal (shared) */
#player{position:fixed;inset:0;z-index:95;background:rgba(5,5,8,.95);display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem 1rem;}
#player.on{display:flex;}
#player video{max-width:min(94vw,520px);max-height:82vh;border-radius:10px;box-shadow:0 30px 80px -20px #000;}
#closePlayer{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;
  padding:.5rem 1rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }