/* ===================================================================
   somewho. — anonymous industrial electronica
   hand-set. no framework. no rounded corners. ever.
   =================================================================== */

@font-face{
  font-family:'Anton';
  src:url('/assets/fonts/anton-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;
}
@font-face{
  font-family:'Space Mono';
  src:url('/assets/fonts/spacemono-400-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('/assets/fonts/spacemono-700-latin.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --ink:      #14100E;   /* the dark  */
  --ink-2:    #1E1915;   /* logo bed  */
  --ink-3:    #241E19;
  --red:      #D83422;   /* signal    */
  --red-hot:  #FF3A22;
  --grey:     #84827C;   /* concrete  */
  --bone:     #CFCBC2;
  --bone-dim: #7C7770;
  --rule:     rgba(132,130,124,.22);

  --mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --display:'Anton', 'Arial Narrow', Impact, sans-serif;

  --gut: clamp(1.15rem, 4.4vw, 4.5rem);
  --rail-h: 46px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--rail-h) + 1rem);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--mono);
  font-size:clamp(.86rem, .5vw + .75rem, 1rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

::selection{ background:var(--red); color:#fff; }

/* ── overlays ─────────────────────────────────────────────────── */

#grain,#splat{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; display:block;
}
#splat{ z-index:1; opacity:.92; }
#grain{ z-index:9; mix-blend-mode:overlay; opacity:.5; }

.scan{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 2px,
    rgba(0,0,0,.24) 2px 3px
  );
  opacity:.34;
  mix-blend-mode:multiply;
}

/* vignette so the edges rot away */
body::after{
  content:''; position:fixed; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%, rgba(0,0,0,0) 42%, rgba(0,0,0,.62) 100%);
}

/* ── boot handshake ───────────────────────────────────────────── */

#boot{
  position:fixed; inset:0; z-index:100;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .5s ease .1s, visibility 0s linear .6s;
}
.boot-lines{
  font-size:.76rem; letter-spacing:.06em; color:var(--bone-dim);
  padding-inline:1.5rem; width:min(30rem,86vw);
}
.boot-lines span{ display:block; opacity:0; }
.boot-lines .boot-ok{ color:var(--red); }
body.booted #boot{ opacity:0; visibility:hidden; }
.no-js #boot{ display:none; }   /* never trap anyone behind the curtain */
.js body:not(.booted) main,.js body:not(.booted) .rail,.js body:not(.booted) .foot{ opacity:0; }
main,.rail,.foot{ transition:opacity .7s ease; }

/* ── rail ─────────────────────────────────────────────────────── */

.rail{
  position:fixed; top:0; left:0; right:0; z-index:20;
  height:var(--rail-h);
  display:flex; align-items:center; gap:var(--gut);
  padding-inline:var(--gut);
  border-bottom:1px solid var(--rule);
  background:rgba(20,16,14,.72);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  font-size:.68rem; letter-spacing:.16em; text-transform:lowercase;
}
.rail-mark{
  font-weight:700; text-decoration:none; letter-spacing:.02em;
  font-size:.82rem; text-transform:lowercase; margin-right:auto;
  white-space:nowrap;
}
.rail-mark i{ color:var(--red); font-style:normal; }
.rail-nav{ display:flex; gap:clamp(.9rem,2.2vw,2.1rem); }
.rail-nav a{
  text-decoration:none; color:var(--bone-dim);
  position:relative; padding-block:.35rem;
  transition:color .18s;
}
.rail-nav a b{ color:var(--red); font-weight:400; margin-right:.42em; }
.rail-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:.1rem;
  height:1px; background:var(--red); transition:right .22s ease;
}
.rail-nav a:hover,.rail-nav a:focus-visible,.rail-nav a.on{ color:var(--bone); }
.rail-nav a:hover::after,.rail-nav a.on::after{ right:0; }

.rail-stat{ color:var(--bone-dim); display:flex; align-items:center; gap:.5em; }
.blip{
  width:6px; height:6px; background:var(--red); display:block;
  animation:blip 1.9s steps(1,end) infinite;
}
@keyframes blip{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }

@media (max-width:860px){
  .rail-nav{ display:none; }
  .rail-stat{ margin-left:auto; }
}

/* ── shared section furniture ─────────────────────────────────── */

.kicker{
  font-size:.66rem; letter-spacing:.34em; text-transform:lowercase;
  color:var(--grey); margin:0 0 clamp(1.4rem,3vw,2.6rem);
  display:flex; align-items:center; gap:1rem;
}
.kicker::after{
  content:''; height:1px; flex:1; background:var(--rule); max-width:22vw;
}

.sec{
  position:relative; z-index:2;
  padding-inline:var(--gut);
  padding-block:clamp(5rem,13vh,10rem);
  border-top:1px solid var(--rule);
}

.statement{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.05rem, 6.4vw, 6.1rem);
  line-height:.95;
  letter-spacing:-.012em;
  text-transform:lowercase;
  margin:0 0 clamp(2rem,5vw,3.6rem);
  max-width:19ch;
}
.statement em{ font-style:normal; color:var(--red); }
.statement.huge{ font-size:clamp(2.6rem, 10vw, 8.6rem); max-width:none; letter-spacing:-.02em; }

/* off-register screenprint — two plates, neither one quite lined up */
.misprint{
  text-shadow:
    -.028em  .034em 0 rgba(132,130,124,.20),
     .020em -.018em 0 rgba(216,52,34,.26);
}

.prose p{ margin:0 0 1.35em; max-width:44ch; color:var(--bone); }
.prose p:last-child{ margin-bottom:0; }
.prose .mark{
  color:var(--red); border-left:2px solid var(--red);
  padding-left:1rem; margin-top:2.2rem;
}

/* ── 00 hero ──────────────────────────────────────────────────── */

.hero{
  position:relative; z-index:2;
  min-height:100svh;
  padding:calc(var(--rail-h) + clamp(3rem,9vh,7rem)) var(--gut) clamp(3rem,7vh,5rem);
  display:flex; flex-direction:column; justify-content:center;
}
.hero .kicker{ position:absolute; top:calc(var(--rail-h) + clamp(1.6rem,5vh,3.4rem)); left:var(--gut); right:var(--gut); margin:0; }

.wordmark{
  margin:0 0 clamp(2.2rem,5vh,3.6rem);
  position:relative;
  width:min(1560px, calc(100% + var(--gut) * .55));
  margin-left:calc(var(--gut) * -.14);
}
.wordmark img{ width:100%; }

/* the carrier drops for a frame or two, every now and then */
.wordmark.drop img{ animation:drop-out .26s steps(4) 1; }
@keyframes drop-out{
  0%   { transform:translateX(0);      filter:none; }
  25%  { transform:translateX(-6px);   filter:drop-shadow(5px 0 0 rgba(216,52,34,.85)) drop-shadow(-4px 0 0 rgba(132,130,124,.6)); }
  50%  { transform:translateX(4px) skewX(-.6deg); filter:drop-shadow(-7px 0 0 rgba(216,52,34,.7)) saturate(1.6); }
  75%  { transform:translateX(-2px);   filter:drop-shadow(3px 0 0 rgba(132,130,124,.55)); }
  100% { transform:translateX(0);      filter:none; }
}

/* on small screens the mark bleeds the full width of the glass */
@media (max-width:760px){
  .wordmark{
    width:calc(100% + var(--gut) * 2);
    margin-left:calc(var(--gut) * -1);
  }
  .hero{ min-height:92svh; }
}

.hero-foot{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,5vw,4rem);
  align-items:flex-end; justify-content:space-between;
  border-top:1px solid var(--rule); padding-top:1.5rem;
}
.hero-lede{
  margin:0; font-size:clamp(.95rem,2.1vw,1.5rem);
  letter-spacing:.02em; color:var(--bone); max-width:22ch;
}
.hero-meta{
  margin:0; text-align:right; color:var(--bone-dim);
  font-size:.72rem; letter-spacing:.2em; text-transform:lowercase; line-height:2;
}
.hero-meta span{ color:var(--red); }
@media (max-width:700px){ .hero-meta{ text-align:left; } }

.cue{
  position:absolute; bottom:clamp(1rem,3.5vh,2.4rem); right:var(--gut);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--bone-dim);
  font-size:.6rem; letter-spacing:.28em; text-transform:lowercase;
  transition:color .2s;
}
.cue span{ writing-mode:vertical-rl; }
.cue svg{ animation:drop 2.6s ease-in-out infinite; }
.cue:hover{ color:var(--red); }
@keyframes drop{ 0%,100%{transform:translateY(0);opacity:.45} 50%{transform:translateY(7px);opacity:1} }
@media (max-width:700px){ .cue{ display:none; } }

/* ── ticker ───────────────────────────────────────────────────── */

.ticker{
  position:relative; z-index:2;
  overflow:hidden; border-block:1px solid var(--rule);
  background:var(--ink-2);
  padding-block:.75rem;
  transform:rotate(-.22deg);      /* crooked on purpose */
}
.ticker-track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker-track span{
  font-size:.74rem; letter-spacing:.34em; text-transform:lowercase;
  color:var(--grey); white-space:nowrap; padding-right:1.2rem;
}
.ticker-track i{ color:var(--red); font-style:normal; padding-inline:.55em; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── 01 doctrine ──────────────────────────────────────────────── */

.creed{ list-style:none; margin:0; padding:0; counter-reset:none; max-width:70rem; }
.creed li{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.3rem,3vw,2.1rem);
  border-top:1px solid var(--rule);
  align-items:baseline;
}
.creed li:last-child{ border-bottom:1px solid var(--rule); }
.creed span{
  font-family:var(--display); color:var(--red);
  font-size:1.5rem; line-height:1; text-transform:lowercase;
  letter-spacing:.04em;
}
.creed p{
  margin:0; max-width:56ch;
  font-size:clamp(.92rem,1.15vw,1.1rem);
}
@media (max-width:640px){
  .creed li{ grid-template-columns:2.6rem 1fr; gap:1rem; }
  .creed span{ font-size:1.1rem; }
}

/* ── 02 / 03 splits ───────────────────────────────────────────── */

.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,6vw,6rem); align-items:start;
}
.split .statement{ margin-bottom:0; }
.split-r{ margin-top:clamp(2.5rem,7vw,5rem); align-items:end; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

.anon{ background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }

.pull{
  font-family:var(--display); text-transform:lowercase;
  font-size:clamp(1.6rem,3.9vw,3.1rem); line-height:1.02;
  margin:0; color:var(--bone);
  border-left:3px solid var(--red); padding-left:clamp(1rem,2vw,1.8rem);
}
.pull em{ font-style:normal; color:var(--red); }

.human{ background:var(--ink-2); }

/* ── 04 transmit ──────────────────────────────────────────────── */

.transmit-note{ max-width:52ch; color:var(--bone-dim); margin:0 0 clamp(2rem,5vw,3rem); }

.signal-form{ max-width:44rem; }
.field{
  display:flex; align-items:stretch;
  border:1px solid var(--rule);
  background:rgba(0,0,0,.28);
  transition:border-color .2s;
}
.field:focus-within{ border-color:var(--red); }
.prompt{
  display:grid; place-items:center; padding-inline:1rem;
  color:var(--red); font-weight:700; border-right:1px solid var(--rule);
}
.field input{
  flex:1; min-width:0;
  background:none; border:0; outline:0;
  color:var(--bone); font:inherit; letter-spacing:.04em;
  padding:1.05rem .9rem;
}
.field input::placeholder{ color:#5A554F; }
.field button{
  background:var(--red); color:#0E0B09; border:0;
  font:inherit; font-weight:700; text-transform:lowercase;
  letter-spacing:.14em; font-size:.7rem;
  padding-inline:clamp(1rem,3vw,2.2rem);
  cursor:pointer; white-space:nowrap;
  transition:background .16s, color .16s;
}
.field button:hover,.field button:focus-visible{ background:var(--red-hot); }
.field button:active{ background:var(--bone); }
@media (max-width:620px){
  .field{ flex-wrap:wrap; }
  .field input{ flex-basis:calc(100% - 3.5rem); }
  .field button{ flex-basis:100%; padding-block:1rem; border-top:1px solid var(--rule); }
}

.form-msg{
  min-height:1.5em; margin:.9rem 0 0;
  font-size:.72rem; letter-spacing:.16em; text-transform:lowercase;
  color:var(--grey);
}
.form-msg.err{ color:var(--red); }
.form-msg.ok{ color:var(--bone); }

/* ── foot ─────────────────────────────────────────────────────── */

.foot{
  position:relative; z-index:2;
  padding:clamp(2.5rem,6vw,4rem) var(--gut) clamp(2rem,5vw,3rem);
  border-top:1px solid var(--rule);
  background:var(--ink);
}
.foot-row{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:baseline; justify-content:space-between;
}
.foot-row-b{
  margin-top:clamp(2rem,5vw,3.4rem); padding-top:1.2rem;
  border-top:1px solid var(--rule);
}
.foot-mark{
  font-family:var(--display); font-size:clamp(2rem,7vw,4.4rem);
  line-height:.9; margin:0; text-transform:lowercase; color:var(--bone);
}
.foot-mark i{ color:var(--red); font-style:normal; }
.foot-line,.foot-legal{
  margin:0; font-size:.66rem; letter-spacing:.24em;
  text-transform:lowercase; color:var(--bone-dim);
}
.foot-line span{ color:var(--red); }
.foot-links{ display:flex; gap:1.6rem; font-size:.66rem; letter-spacing:.24em; text-transform:lowercase; }
.foot-links a{ text-decoration:none; color:var(--bone-dim); border-bottom:1px solid var(--rule); padding-bottom:.2rem; }
.foot-links a:hover{ color:var(--red); border-color:var(--red); }

/* ── reveal ───────────────────────────────────────────────────── */

.js [data-reveal]{ opacity:0; transform:translateY(14px); }
.js [data-reveal].in{
  opacity:1; transform:none;
  transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
}

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ── mercy ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .scan,#grain{ display:none; }
  .ticker-track{ animation:none; }
}