/* ============================================================
   TOKENS
   Palette is brand-derived: rust and gunmetal are locked from the
   wordmark; the darks are cool graphite rather than a tinted black,
   so the ground reads as unlit metal rather than as "dark mode".
   ============================================================ */
:root{
  --rust:        #C4531D;
  --rust-lit:    #E9701F;
  --forge:       #FFB25C;
  --hot:         #FFF3E2;
  --gunmetal:    #B7BBC2;
  --gunmetal-dim:#7E858F;
  --graphite:    #101316;
  --iron:        #171B20;
  --edge:        #262C34;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rule: 1px solid var(--edge);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--graphite);
  color:#D7DBE0;
  font-family:'Rokkitt', Georgia, serif;
  font-weight:400;
  font-size:clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--gunmetal); text-underline-offset:0.22em; text-decoration-thickness:1px; }
a:hover{ color:var(--rust-lit); }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--rust-lit);
  outline-offset:3px;
}

h1,h2,h3{ font-weight:800; line-height:1.12; letter-spacing:-0.01em; margin:0; color:#EDEFF2; }

/* ============================================================
   STING LAYER
   ============================================================ */
#sting{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(120% 90% at 50% 78%, #1a1f25 0%, #0d1013 58%, #08090b 100%);
  display:block;
}
#sting[hidden]{ display:none; }

#forge{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  will-change:transform, filter;
}

#flash{
  position:absolute; inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

#wordmark-layer{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%) translateY(calc(-1 * clamp(150px, 27vh, 250px)));
  width:min(460px, 58vw);
  opacity:0;
  pointer-events:none;
}
#wordmark-layer svg{ display:block; width:100%; height:auto; }

#prompt{
  position:absolute;
  left:50%; bottom:clamp(48px, 11vh, 108px);
  transform:translateX(-50%);
  opacity:0;
  border:0; background:none; padding:0.6em 1.2em;
  color:var(--gunmetal);
  font-family:'Oswald', system-ui, sans-serif;
  font-weight:500;
  font-size:0.8125rem;
  letter-spacing:0.22em;
  cursor:pointer;
}

/* ============================================================
   SITE
   ============================================================ */
#site{
  opacity:0;
  transition:opacity .8s ease;
}
#site.on{ opacity:1; }

.wrap{
  width:min(1080px, 100% - (var(--gutter) * 2));
  margin-inline:auto;
}

/* --- masthead --- */
.masthead{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2rem);
  padding-block:clamp(1.25rem, 3vw, 2rem);
  border-bottom:var(--rule);
}
.mark{
  width:clamp(64px, 8vw, 92px); aspect-ratio:431/560; height:auto;
  background:url('fist-128.png') center/contain no-repeat;
  flex:none;
  image-rendering:pixelated;
}
.masthead .lockup{ width:min(380px, 44vw); }
.masthead .lockup svg{ display:block; width:100%; height:auto; }

.nav{
  margin-left:auto;
  display:flex; gap:clamp(1rem, 3vw, 2.25rem);
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.875rem;
  letter-spacing:0.06em;
}
.nav a{ text-decoration:none; color:var(--gunmetal-dim); }
.nav a:hover{ color:var(--rust-lit); }

/* --- lede --- */
.lede{
  padding-block:clamp(3.5rem, 11vw, 7rem) clamp(2.5rem, 8vw, 5rem);
}
.lede h1{
  font-size:clamp(2.6rem, 1.5rem + 5.5vw, 5rem);
  text-wrap:balance;
  max-width:18ch;
}
.lede p{
  max-width:var(--measure);
  margin:clamp(1.25rem, 3vw, 2rem) 0 0;
  color:#AEB4BC;
}

/* --- rivet rule: the wordmark's own device, reused as a section boundary --- */
.rivet{
  display:flex; align-items:center; gap:0;
  margin-block:clamp(2rem, 6vw, 3.5rem);
}
.rivet::before, .rivet::after{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--edge); flex:none;
}
.rivet span{ flex:1; height:1px; background:var(--edge); }

/* --- sections --- */
.section{ padding-block:clamp(1rem, 3vw, 2rem); }
.section h2{
  font-size:clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  margin-bottom:clamp(1rem, 2.5vw, 1.5rem);
}
.section p{ max-width:var(--measure); color:#AEB4BC; }
.section p + p{ margin-top:1em; }

/* --- game plate: corner brackets, lifted from the wordmark --- */
.plate{
  position:relative;
  padding:clamp(1.5rem, 4vw, 2.5rem);
  background:var(--iron);
  max-width:44rem;
}
.plate::before, .plate::after{
  content:''; position:absolute;
  width:22px; height:22px;
  border:2px solid var(--gunmetal-dim);
}
.plate::before{ left:10px; top:10px; border-right:0; border-bottom:0; }
.plate::after{ right:10px; bottom:10px; border-left:0; border-top:0; }

.plate h3{
  font-size:clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  color:var(--rust-lit);
}
.plate .meta{
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.8125rem;
  letter-spacing:0.1em;
  color:var(--gunmetal-dim);
  margin:0.5rem 0 1rem;
}
.plate p{ margin:0; }

/* The games plate carries a screenshot alongside the copy on anything wide
   enough for two columns. Padding is floored at 2rem so the corner bracket,
   which sits 10-32px in, never lands on the image when the two stack. */
.plate-game{
  max-width:60rem;
  padding:clamp(2rem, 4vw, 2.5rem);
  display:grid;
  gap:clamp(1.5rem, 3vw, 2rem);
  align-items:center;
}
.plate-body p{ max-width:var(--measure); }
.plate-shot{ display:block; line-height:0; }
.plate-shot img{
  display:block; width:100%; height:auto;
  border:var(--rule);
  background:var(--graphite);
  transition:border-color .2s ease;
}
.plate-shot:hover img{ border-color:var(--gunmetal-dim); }

@media (min-width: 46rem){
  .plate-game{ grid-template-columns:minmax(0, 1fr) minmax(0, 22rem); }
}
.go{
  display:inline-block;
  margin-top:1.5rem;
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.875rem;
  letter-spacing:0.08em;
  color:var(--rust-lit);
  text-decoration:none;
  border-bottom:1px solid var(--rust);
  padding-bottom:2px;
}
.go:hover{ color:var(--forge); border-color:var(--forge); }

/* --- download button --------------------------------------------------
   Solid --rust-lit with --graphite type. The obvious choice, --hot on
   --rust, measures 4.17:1 and misses the 4.5:1 AA floor for text this
   size; this pairing is 6.04:1, and 10.45:1 on the --forge hover.
   ------------------------------------------------------------------- */
.dl{
  display:inline-flex;
  flex-direction:column;
  gap:0.15rem;
  padding:0.7rem 1.4rem;
  background:var(--rust-lit);
  color:var(--graphite);
  text-decoration:none;
  font-family:'Oswald', system-ui, sans-serif;
  transition:background .15s ease, transform .15s ease;
}
.dl:hover{ background:var(--forge); color:var(--graphite); }
.dl:active{ transform:translateY(1px); }
.dl .dl-label{
  font-size:1rem;
  letter-spacing:0.06em;
}
.dl .dl-meta{
  font-size:0.75rem;
  letter-spacing:0.1em;
  /* Same ink, stepped back: a lighter tone here would drop under AA. */
  opacity:0.8;
}

/* Sits under the lede on the game page and inside the plate on the
   homepage, so it carries its own top margin rather than relying on
   whatever it happens to follow. */
.dl-block{ margin-top:clamp(1.5rem, 3vw, 2rem); }
.dl-note{
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.75rem;
  letter-spacing:0.08em;
  color:var(--gunmetal-dim);
  margin:0.75rem 0 0;
}

/* --- builds list ------------------------------------------------------
   One row per build. Older and prototype builds get appended here as
   further <li class="build">; the markup is the same minus .build-now.
   ------------------------------------------------------------------- */
.builds{ list-style:none; margin:0; padding:0; }
.build{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.5rem;
  padding:clamp(1rem, 2.5vw, 1.35rem) 0;
  border-top:var(--rule);
}
.build:last-child{ border-bottom:var(--rule); }
.build-id{ flex:1 1 16rem; }
.build-id h3{
  font-size:1.0625rem;
  margin:0;
  color:var(--gunmetal);
}
.build-now .build-id h3{ color:var(--rust-lit); }
.build-id .meta{
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.8125rem;
  letter-spacing:0.1em;
  color:var(--gunmetal-dim);
  margin:0.35rem 0 0;
}
.build .dl{ margin-left:auto; }
/* Superseded builds are still downloadable, just not the shout. */
.build:not(.build-now) .dl{
  background:transparent;
  color:var(--rust-lit);
  border:1px solid var(--rust);
  padding:0.55rem 1.1rem;
}
.build:not(.build-now) .dl:hover{
  background:transparent;
  color:var(--forge);
  border-color:var(--forge);
}

/* --- contact --- */
.contact ul{ list-style:none; margin:0; padding:0; }
.contact li{ margin-bottom:0.5rem; }
.contact .label{
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.8125rem;
  letter-spacing:0.1em;
  color:var(--gunmetal-dim);
  display:inline-block;
  min-width:7.5rem;
}

/* --- footer --- */
.foot{
  border-top:var(--rule);
  margin-top:clamp(3rem, 9vw, 6rem);
  padding-block:clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem);
  display:flex; align-items:center; gap:1rem;
  color:var(--gunmetal-dim);
  font-size:0.9375rem;
}
.foot .mark{ width:26px; height:34px; aspect-ratio:auto; opacity:0.55; }


/* --- hero image (game pages) --- */
.hero{
  /* The title art is transparent PNG-style WebP: let the page ground show
     through it rather than boxing it on a plate. */
  margin:clamp(1rem, 3vw, 2rem) 0 0;
  line-height:0;
}
.hero img{
  display:block; width:100%; height:auto;
}

/* --- screenshot filmstrip (game pages) -------------------------------
   A scroll-snapping horizontal track. It scrolls natively with a trackpad,
   a touch drag or the keyboard, so it works with no JS at all; the arrows
   and dots are added by the small inline script at the foot of the page
   and stay hidden until it runs, rather than sitting there dead.

   Slides are deliberately narrower than the text column. Full-width
   screenshots swamped the copy, and at this size the next one peeks in
   at the right edge, which is what tells you the strip scrolls.

   Shipped at the game's native 1440x1000 with an exact half-scale
   alternate; no image-rendering override, because the browser scales them
   to a non-integer width and `pixelated` would alias the UI text.
   ------------------------------------------------------------------ */
.shots{ --slide: min(78vw, 620px); }

.shots-track{
  list-style:none; margin:0; padding:0;
  display:flex;
  gap:clamp(1rem, 2.5vw, 1.75rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* Room for the focus ring, which would otherwise be clipped by the
     scroll container on the snapped slide. */
  padding:3px 3px 0.5rem;
  scroll-padding-inline:3px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--edge) transparent;
}
.shots-track::-webkit-scrollbar{ height:6px; }
.shots-track::-webkit-scrollbar-thumb{ background:var(--edge); }
.shots-track:focus-visible{ outline:2px solid var(--rust-lit); outline-offset:4px; }

.shots-track > li{
  flex:0 0 var(--slide);
  scroll-snap-align:start;
}
.shots figure{ margin:0; }
.shots img{
  display:block; width:100%; height:auto;
  border:var(--rule);
  background:var(--iron);
}
.shots figcaption{
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.8125rem;
  letter-spacing:0.08em;
  color:var(--gunmetal-dim);
  margin-top:0.75rem;
}

/* Slides settle as they reach the middle of the track and fall back as they
   leave it. Scroll-driven, so it tracks a drag exactly and costs no script.
   Browsers without view timelines simply get flat, fully-lit slides. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes shot-settle{
      entry 0%, exit 100% { opacity:.45; transform:scale(.94); }
      entry 100%, exit 0% { opacity:1;   transform:scale(1); }
    }
    .shots-track > li{
      animation:shot-settle linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% exit 100%;
    }
  }
}

/* --- filmstrip controls --- */
.shots-bar{
  display:flex; align-items:center; gap:0.75rem;
  margin-top:1rem;
}
.shots-nav{
  flex:none;
  width:2.25rem; height:2.25rem;
  display:grid; place-items:center;
  background:var(--iron);
  border:var(--rule);
  color:var(--gunmetal);
  font-family:'Oswald', system-ui, sans-serif;
  font-size:1.125rem; line-height:1;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.shots-nav:hover:not(:disabled){ color:var(--rust-lit); border-color:var(--rust); }
.shots-nav:disabled{ opacity:.35; cursor:default; }

.shots-dots{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0.5rem; align-items:center;
}
.shots-dots button{
  display:block;
  width:2rem; height:2px;
  padding:0; border:0;
  background:var(--edge);
  cursor:pointer;
  transition:background .2s ease;
}
.shots-dots button:hover{ background:var(--gunmetal-dim); }
.shots-dots button[aria-current="true"]{ background:var(--rust-lit); }
/* The bar is a shortcut for the scrolling the track already does, so keep
   it out of the tab order's way but leave it reachable and labelled. */
.shots-count{
  margin-left:auto;
  font-family:'Oswald', system-ui, sans-serif;
  font-size:0.75rem; letter-spacing:0.1em;
  color:var(--gunmetal-dim);
}

/* --- narrow screens ---------------------------------------------------
   The masthead has no room for mark + lockup + nav on a phone, and
   squeezing the lockup makes the wordmark illegible. Let the nav drop
   to its own row instead so the lockup keeps a readable size.
   ---------------------------------------------------------------- */
@media (max-width: 34rem){
  .masthead{ flex-wrap:wrap; row-gap:0.9rem; }
  .masthead .lockup{ width:min(300px, 62vw); }
  .nav{
    margin-left:0; width:100%;
    justify-content:flex-start;
    gap:1.5rem;
    padding-top:0.25rem;
    border-top:var(--rule);
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}