/* Impact Crater Studios — palette sampled from the studio mark itself.
   void/stone/teal/ember are the mark's own colours, not invented. */
:root{
  --void:#060505;
  --void-2:#0c0a0a;
  --stone:#c5bcac;      /* body text: the mark's stone, never pure white */
  --stone-hi:#f1ece0;
  --teal:#02c5ca;
  --teal-hi:#08e9ed;
  --ember:#a28469;
  --rule:#1d1a18;
  --measure:38rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--stone);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--teal);color:var(--void);padding:.6rem 1rem;
  font:500 .8rem/1 "IBM Plex Mono",monospace;
}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--teal-hi);outline-offset:3px}

/* ── the plate: the mark, glowing in the dark ───────────────────── */
.plate{position:fixed;inset:0;z-index:0;pointer-events:none}
.plate img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 34%;
  display:block;
}
/* scrim so live type reads over the lower art */
.plate::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 50% 34%, rgba(2,197,202,.10), transparent 70%),
    linear-gradient(to bottom, rgba(6,5,5,.30) 0%, rgba(6,5,5,.10) 30%,
                    rgba(6,5,5,.82) 62%, var(--void) 88%);
}

/* ── signature: one shockwave, once, from the point of impact ───── */
.shock{
  position:absolute;left:50%;top:34%;
  width:12px;height:12px;margin:-6px 0 0 -6px;
  border:1px solid var(--teal-hi);border-radius:50%;
  opacity:0;
  animation:shock 2.1s cubic-bezier(.16,.7,.24,1) .35s 1 both;
}
.shock--2{display:none}
@keyframes shock{
  0%  {transform:scale(1);   opacity:.85}
  70% {opacity:.14}
  100%{transform:scale(120); opacity:0}
}

/* ── chrome ─────────────────────────────────────────────────────── */
.topbar{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:1.4rem clamp(1.1rem,4vw,3rem);
}
.tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.tag--dim{color:#6b625a}

main{position:relative;z-index:2}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{
  min-height:min(84svh,52rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(1.1rem,4vw,3rem) clamp(2.5rem,6vh,4.5rem);
}
.name{
  margin:0 0 .9rem;
  font-weight:800;
  font-size:clamp(2.1rem,1rem + 6.4vw,5.5rem);
  line-height:.94;
  letter-spacing:-.022em;
  color:var(--stone-hi);
  text-wrap:balance;
}
.name__a,.name__b{display:block}
.name__b{
  color:var(--stone);
  font-weight:600;
  letter-spacing:.02em;
}
.lede{
  margin:0;max-width:var(--measure);
  font-size:clamp(1rem,.9rem + .5vw,1.3rem);
  color:var(--stone);
}

/* ── in-development record ──────────────────────────────────────── */
.record{
  background:var(--void);
  border-top:1px solid var(--rule);
  padding:clamp(2.6rem,7vh,4.5rem) clamp(1.1rem,4vw,3rem);
}
.eyebrow{
  margin:0 0 1.1rem;
  font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);
}
.title{
  margin:0 0 2rem;
  font-size:clamp(1.5rem,.9rem + 2.4vw,2.6rem);
  font-weight:600;line-height:1.1;letter-spacing:-.01em;
  color:var(--stone-hi);
}
.title__sub{display:block;color:var(--stone);font-weight:400;letter-spacing:.01em}

.spec{
  margin:0;display:flex;flex-wrap:wrap;gap:.9rem 2.6rem;
}
.spec div{display:flex;flex-direction:column;gap:.3rem}
.spec dt{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#6b625a;
}
.spec dd{margin:0;font-size:.9rem;color:var(--stone-hi);display:flex;align-items:center;gap:.5rem}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 8px var(--teal);
  flex:none;
}

/* ── foot ───────────────────────────────────────────────────────── */
.foot{
  position:relative;z-index:2;background:var(--void);
  border-top:1px solid var(--rule);
  padding:1.6rem clamp(1.1rem,4vw,3rem) 2.4rem;
}
.foot p{margin:0;font-size:.82rem}
.foot a{color:var(--stone);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.foot a:hover{color:var(--teal-hi);border-bottom-color:var(--teal)}

@media (max-width:759px){
  .plate img{object-position:center 30%}
  .shock{top:30%}
}

@media (prefers-reduced-motion:reduce){
  .shock{display:none}
  *{animation:none!important;transition:none!important}
}

/* ── the title card ─────────────────────────────────────────────────
   Void & Valor carries its own identity: indigo, not the studio teal.
   The palette shift is the structure — teal is the studio, indigo is
   the game. Values are V&V brand canon, not invented here. */
.record{--rift:#4b2eff;--glow:#8b5cff}

.card{
  display:grid;gap:clamp(1.4rem,3vw,2.8rem);
  grid-template-columns:1fr;
  align-items:center;
  max-width:78rem;
}
@media (min-width:900px){ .card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} }

.card__art{
  display:block;position:relative;
  border:1px solid #1d1a2c;border-radius:2px;
  overflow:hidden;
  background:#0b0b10;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.card__art img{display:block;width:100%;height:auto}
.card__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(11,11,16,.55), transparent 55%);
  pointer-events:none;
}
.card__art:hover,.card__art:focus-visible{
  border-color:var(--rift);
  box-shadow:0 0 0 1px var(--rift), 0 18px 60px -28px var(--glow);
}

.card__body{min-width:0}
.tagline{
  margin:0 0 1.8rem;max-width:34rem;
  font-size:clamp(1rem,.92rem + .35vw,1.18rem);
  color:var(--stone);
}
.record .eyebrow{color:var(--glow)}
.record .dot{background:var(--glow);box-shadow:0 0 8px var(--glow)}

.more{margin:1.8rem 0 0}
.more a{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone-hi);text-decoration:none;
  border-bottom:1px solid var(--rift);padding-bottom:3px;
}
.more a:hover{color:var(--glow);border-bottom-color:var(--glow)}

/* the engineering claim speaks in the utility voice: a stated fact,
   not a sales line. */
.fact{
  margin:.95rem 0 0;
  font-size:.78rem;letter-spacing:.09em;
  color:#8a8177;
}
.foot p{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline}
.foot__est{color:#6b625a;font-size:.76rem;letter-spacing:.1em}
/* no topbar now — give the hero the full viewport */
.hero{min-height:min(92svh,56rem);padding-top:clamp(3rem,8vh,6rem)}

/* The scrim was anchored to the viewport, so on a tall window the hero copy
   landed in a bright part of the art and the mono line dropped below usable
   contrast. Anchor it to the text block instead — it then holds at any height. */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:72%;
  background:linear-gradient(to bottom,
    rgba(6,5,5,0) 0%, rgba(6,5,5,.45) 38%, rgba(6,5,5,.86) 74%, var(--void) 100%);
  z-index:-1;pointer-events:none;
}
.fact{color:#a2988c}

/* spec labels and the footer line were at 3.41:1 — below WCAG AA for text
   this size. Lifted to clear 4.5:1 against the void ground. */
.spec dt{color:#968b7e}
.foot__est{color:#8a8076}