/* fatcatcruz.com shared stylesheet (S1 foundation, 2026-09-26).
   Pages link this first; page-local <style> only adds what is unique to the page.

   Shared chrome markup (copy verbatim; no JS needed):

   <nav class="site-nav" aria-label="Site">
     <a class="logo" href="/">Fat Cat <span>Cruz</span></a>
     <div class="links">
       <a href="/machines">Machines</a><a href="/news">News</a><a href="/progress">Progress</a><a href="/press">Press</a>
     </div>
     <a class="pill" href="https://fatcatcruz.itch.io/fat-cat-cruz">Play free</a>
   </nav>

   <footer class="site-footer">
     <p><a href="/">Fat Cat Cruz</a> · <a href="/news">News</a> · <a href="/press">Press</a></p>
   </footer>

   Mark the current page's nav link with aria-current="page". */

:root{
  --gold:#d4a853;        /* 8.97:1 on --ink */
  --gold-dim:#a98742;
  --ink:#0a0a0c;         /* page background; theme-color */
  --panel:#14141a;
  --line:#26262e;        /* decorative hairlines only */
  --outline:#6c6859;     /* control borders: 3.54:1 on --ink, 3.29:1 on --panel */
  --text:#f4f1ea;
  --muted:#8e8a7d;       /* 5.73:1 on --ink */
  --frame:#04060a;       /* image wells; the hangar cards render on exactly this black (4,6,10) */
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1120px;
  --gutter:20px;
  color-scheme:dark;
}

/* ── base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img,picture,video,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.1;text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.lede{color:var(--muted);max-width:60ch}
.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}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Centred sections: headings and ledes centre as blocks, not just as text. */
.center{text-align:center}
.center h2,.center .lede{margin-inline:auto}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-block;padding:13px 26px;min-height:44px;font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;white-space:nowrap}
.btn.gold,.btn-gold{background:var(--gold);color:var(--ink)}
.btn.gold:hover,.btn-gold:hover{background:var(--gold-dim)}
.btn.ghost,.btn-outline{background:transparent;border-color:var(--outline);color:var(--text)}
.btn.ghost:hover,.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.center .btn-row{justify-content:center}

/* ── nav: one row on every width. Logo | scrolling link strip | Play pill ── */
.site-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:5px var(--gutter);background:var(--ink);border-bottom:1px solid var(--line);padding-top:max(5px,env(safe-area-inset-top))}
.site-nav .logo{flex:none;display:inline-block;padding:13px 0;font:600 13px/18px var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--text)}
.site-nav .logo span{color:var(--gold)}
.site-nav .links{flex:1 1 auto;min-width:0;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.site-nav .links::-webkit-scrollbar{display:none}
/* right-aligned when there is room; an auto margin collapses to 0 on overflow, so the first link is never cut off */
.site-nav .links a:first-child{margin-left:auto}
.site-nav .links a{display:inline-block;flex:none;padding:13px 8px;font:500 11px/18px var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--muted);transition:color .2s}
.site-nav .links a:hover,.site-nav .links a[aria-current="page"]{color:var(--gold)}
.site-nav .pill{flex:none;display:inline-block;padding:13px 16px;border-radius:999px;background:var(--gold);color:var(--ink);font:700 11px/18px var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background-color .2s}
.site-nav .pill:hover{background:var(--gold-dim)}
@media (max-width:720px){
  .site-nav{gap:8px;padding-left:16px;padding-right:12px}
  /* the strip scrolls; the fade says so */
  .site-nav .links{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .site-nav .links a{padding:13px 7px;letter-spacing:.12em}
  .site-nav .pill{padding:13px 12px;letter-spacing:.1em}
}
@media (max-width:359px){
  .site-nav .logo{letter-spacing:.1em;font-size:12px}
  .site-nav .pill{padding:13px 10px}
}

/* ── footer ───────────────────────────────────────────────────────── */
.site-footer{padding:32px var(--gutter);border-top:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.site-footer p{margin:0 auto;max-width:var(--wrap)}
/* underlined, so links are distinguishable without colour (link-in-text-block) */
.site-footer a{display:inline-block;padding:13px 8px;color:var(--text);text-decoration:underline;text-decoration-color:var(--outline);text-underline-offset:4px;white-space:nowrap}
.site-footer a:hover{color:var(--gold);text-decoration-color:var(--gold)}

/* ── image wells ──────────────────────────────────────────────────── */
/* Ratio classes go on the <img> itself; width/height attributes stay on the tag:
   <figure class="shot"><img class="r-16x9" src="/assets/frames/tile_hero_8barrel.webp" width="720" height="540" alt="…" loading="lazy"><figcaption>…</figcaption></figure> */
.r-16x9,.r-5x6,.r-21x9{width:100%;height:auto;object-fit:contain;background:var(--frame)}
.r-16x9{aspect-ratio:16/9}
.r-5x6{aspect-ratio:5/6}
.r-21x9{aspect-ratio:21/9}
.fill{object-fit:cover}
.shot{background:var(--frame);overflow:hidden}
.shot figcaption,.caption{padding:8px 12px;font-size:12px;color:var(--muted)}
/* Machines drawn small on their card (Donut, Calm Walker, Chaotic Mech): cap the display size. */
.card-cap{max-width:320px;margin-inline:auto}
.inengine{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Status tag for machines (generated by scripts/build-machines.py): "Recently added", "Coming soon" */
.tag{display:inline-block;align-self:flex-start;margin-top:6px;padding:2px 8px;border:1px solid var(--gold-dim);border-radius:999px;font:600 10px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap;vertical-align:middle}
.tag.soon{border-color:var(--outline);color:var(--muted)}
.roster-note .tag{margin-top:0}
.strip .tag{white-space:normal;letter-spacing:.08em;padding:2px 7px;border-radius:10px}