/* ==========================================================================
   Mirebox — site styles
   Palette pulled from the original: base #095739, contrast #8bb99d,
   logo green #0E9648, logo gray #6E6F72.
   ========================================================================== */

:root{
  --mire:#095739;          /* base green */
  --mire-deep:#052E1F;     /* deeper bed */
  --mire-abyss:#02150E;    /* near-black green */
  --mire-lift:#0C6F49;     /* raised surface */
  --moss:#8bb99d;          /* body text */
  --moss-dim:#5E8A72;      /* quiet text */
  --signal:#0E9648;        /* brand green */
  --signal-hot:#2FD97A;    /* terminal accent */
  --steel:#6E6F72;         /* logo gray */
  --bone:#D9D9D9;          /* bright text */
  --ink:#353535;

  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gutter:clamp(20px,5vw,64px);
  --measure:1180px;
  --rule:1px solid rgba(139,185,157,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--mire);
  color:var(--moss);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .25vw,1.12rem);
  line-height:1.62;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--signal-hot);text-decoration:none;border-bottom:1px solid rgba(47,217,122,.35)}
a:hover{color:var(--bone);border-bottom-color:var(--bone)}

::selection{background:var(--signal);color:#02150E}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--signal);color:#02150E;padding:.7em 1.2em;font-family:var(--mono);
}
.skip:focus{left:8px;top:8px}

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

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--signal-hot);
  display:block;
}
.lede{
  font-size:clamp(1.3rem,1.05rem + 1.15vw,2rem);
  line-height:1.22;
  font-weight:400;
  color:var(--bone);
  letter-spacing:-.01em;
}
.aside{
  font-family:var(--mono);
  font-size:.82rem;
  line-height:1.75;
  letter-spacing:.02em;
  color:var(--moss-dim);
  text-transform:uppercase;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(2,21,14,.45) 0%,rgba(2,21,14,0) 28%,rgba(2,21,14,.12) 52%,rgba(5,46,31,.86) 88%,var(--mire) 100%),
    radial-gradient(120% 70% at 50% 100%,rgba(9,87,57,.55),transparent 70%);
}
/* a breath of green cast over the photo, so the hero and the rest of the
   site read as one surface. No scan lines — they moire on high-DPI screens. */
.hero__veil::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(9,87,57,0) 45%,rgba(9,87,57,.28) 100%);
}

.hero__inner{
  position:relative;
  padding-bottom:clamp(40px,9vh,96px);
  padding-top:22vh;
}
.hero__logo{
  width:min(460px,74vw);
  filter:drop-shadow(0 6px 24px rgba(2,21,14,.75));
}
.hero__tag{
  margin-top:1.4rem;
  font-family:var(--mono);
  font-size:clamp(.82rem,.74rem + .35vw,1.02rem);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 2px 14px rgba(2,21,14,.9);
  min-height:2.6em;
}
.cursor{
  display:inline-block;width:.5em;height:1.05em;
  background:var(--signal-hot);vertical-align:-.15em;margin-left:.15em;
  box-shadow:0 0 12px rgba(47,217,122,.8);
}
.blink{animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.hero__sub{
  margin-top:.9rem;
  max-width:46ch;
  color:var(--moss);
  text-shadow:0 2px 12px rgba(2,21,14,.8);
}

.hero__foot{
  margin-top:clamp(28px,6vh,64px);
  display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:center;
  border-top:var(--rule);padding-top:1.1rem;
}
.hero__foot .aside{margin:0}
.scroll-cue{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--moss-dim);
  display:inline-flex;align-items:center;gap:.6em;border:0;
}
.scroll-cue span{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ==========================================================================
   THE BOX (interactive)
   ========================================================================== */
.box-section{
  background:var(--mire-abyss);
  padding-block:clamp(64px,11vh,132px);
  border-top:1px solid rgba(47,217,122,.16);
  position:relative;
}
.box-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 0%,rgba(14,150,72,.16),transparent 65%);
}
.box-head{position:relative;text-align:center;margin-bottom:2.6rem}
.box-head h2{
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);
  font-weight:500;line-height:1.06;letter-spacing:-.02em;
  color:var(--bone);margin-top:.9rem;
}
.box-head p{margin:1.1rem auto 0;max-width:56ch;color:var(--moss)}

.terminal{
  position:relative;
  max-width:880px;margin:0 auto;
  background:linear-gradient(180deg,#03190F,#020D08);
  border:1px solid rgba(47,217,122,.28);
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(2,21,14,.9),0 40px 90px -30px rgba(0,0,0,.9),inset 0 0 80px rgba(14,150,72,.06);
  overflow:hidden;
}
.terminal__bar{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem 1rem;
  background:rgba(14,150,72,.09);
  border-bottom:1px solid rgba(47,217,122,.2);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss-dim);
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px rgba(14,150,72,.9)}
.terminal__bar .spacer{flex:1}
.terminal__bar .state{color:var(--signal-hot)}

.terminal__screen{
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.75;
  padding:1.1rem 1.15rem;
  height:min(52vh,420px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(47,217,122,.4) transparent;
}
.terminal__screen::-webkit-scrollbar{width:8px}
.terminal__screen::-webkit-scrollbar-thumb{background:rgba(47,217,122,.35);border-radius:8px}

.ln{white-space:pre-wrap;word-break:break-word;margin:0}
.ln--sys{color:var(--moss-dim)}
.ln--you{color:var(--bone)}
.ln--you::before{content:"you  ";color:var(--steel)}
.ln--box{color:var(--signal-hot);text-shadow:0 0 14px rgba(47,217,122,.35)}
.ln--box::before{content:"box  ";color:var(--signal);opacity:.75}
.ln--glitch{color:#9BE8BE;opacity:.85;font-style:italic}
.ln--warn{color:#E8C46B}

.terminal__form{
  display:flex;align-items:center;gap:.6rem;
  border-top:1px solid rgba(47,217,122,.2);
  padding:.55rem .9rem;
  background:rgba(14,150,72,.05);
}
.terminal__prompt{font-family:var(--mono);color:var(--signal-hot);font-size:.9rem}
.terminal__form input{
  flex:1;background:transparent;border:0;outline:0;
  font-family:var(--mono);font-size:.9rem;color:var(--bone);
  padding:.45rem 0;
}
.terminal__form input::placeholder{color:rgba(110,111,114,.9)}
.terminal__form button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  background:transparent;color:var(--signal-hot);
  border:1px solid rgba(47,217,122,.45);border-radius:4px;
  padding:.45em .95em;cursor:pointer;transition:background .18s,color .18s;
}
.terminal__form button:hover{background:var(--signal);color:#02150E;border-color:var(--signal)}

.terminal__hint{
  position:relative;
  margin:1.1rem auto 0;max-width:880px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--moss-dim);
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:space-between;
}

/* ==========================================================================
   STORY
   ========================================================================== */
.chapter{padding-block:clamp(56px,10vh,120px)}
.chapter--deep{background:var(--mire-deep)}
.chapter--abyss{background:var(--mire-abyss)}
.chapter--ink{background:var(--ink);color:var(--bone)}

.title-block{padding-block:clamp(60px,12vh,140px);text-align:center}
.title-block h1{
  font-size:clamp(2.4rem,1.4rem + 4.4vw,5rem);
  font-weight:400;line-height:.98;letter-spacing:-.035em;
  color:var(--bone);margin-top:1rem;
}
.title-block p{margin:1.4rem auto 0;max-width:52ch}

/* 40 / 60 editorial split, as on the original */
.split{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(24px,5vw,72px);
  align-items:start;
}
.split--flip{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:1.6rem}
.duo p + p{margin-top:1rem}
.stack > * + *{margin-top:1.15rem}

figure.frame{border-radius:12px;overflow:hidden;background:var(--mire-abyss);box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
figure.frame img{width:100%;height:100%;object-fit:cover}
figure.frame--tall img{aspect-ratio:9/14}

.pull{
  text-align:center;
  padding-block:clamp(48px,9vh,110px);
}
.pull p{
  font-size:clamp(1.5rem,1.05rem + 2.2vw,3rem);
  line-height:1.14;font-weight:400;letter-spacing:-.02em;
  color:var(--bone);max-width:18ch;margin-inline:auto;
}

/* full-bleed parallax-ish cover */
.cover{
  min-height:min(88svh,760px);
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  position:relative;
}
@media (min-width:900px){ .cover{background-attachment:fixed} }
.cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(2,21,14,.55),rgba(2,21,14,.15) 40%,rgba(2,21,14,.75));
}

.tail p + p{margin-top:1.1rem}
.tail .beat{
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  line-height:1.24;color:var(--bone);font-weight:400;
}
.gap-lg{height:clamp(48px,9vh,110px)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{
  background:var(--mire-abyss);
  border-top:1px solid rgba(47,217,122,.16);
  padding-block:clamp(44px,7vh,80px);
}
.site-foot__grid{
  display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between;
}
.site-foot img{width:190px;opacity:.85}
.site-foot .aside{text-transform:none;letter-spacing:.04em}
.site-foot nav{display:flex;gap:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.site-foot nav a{border:0;color:var(--moss-dim)}
.site-foot nav a:hover{color:var(--signal-hot)}
.legal{margin-top:2.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:rgba(94,138,114,.75)}

/* ==========================================================================
   404
   ========================================================================== */
.void{
  min-height:100svh;display:grid;place-items:center;text-align:center;
  background:var(--mire-abyss);
}
.void__code{
  font-family:var(--mono);font-size:clamp(4rem,10vw,9rem);line-height:1;
  color:var(--signal);letter-spacing:-.04em;text-shadow:0 0 40px rgba(14,150,72,.45);
}
.void h1{font-size:clamp(1.4rem,1rem + 1.8vw,2.3rem);font-weight:400;color:var(--bone);margin-top:1rem}
.void p{margin-top:1rem;max-width:44ch;margin-inline:auto}
.void .backlink{
  display:inline-block;margin-top:2.2rem;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(47,217,122,.45);
  border-radius:4px;padding:.7em 1.4em;
}
.void .backlink:hover{background:var(--signal);color:#02150E}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-in{opacity:1;transform:none}

@media (max-width:760px){
  .split,.split--flip,.duo{grid-template-columns:minmax(0,1fr)}
  .hero__inner{padding-top:16vh}
  .site-foot__grid{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .cover{background-attachment:scroll}
}

/* ---------- utilities (kept out of inline styles so CSP can stay strict) ---------- */
.cover--silhouette{background-image:url('/assets/silhouette.jpg')}
.foot-tag{margin-top:.9rem}
.page-logo{width:min(260px,54vw);margin:0 auto 2.6rem}
.void .page-logo{margin-bottom:2.5rem}
.plain{border:0}