/* Helena project site - self-contained design system (#64).
   One accent (Helena green), system font stack, dark-first with a light
   surface, responsive. No framework. */

:root {
  --green: #16a34a;
  --green-bright: #22c55e;
  --green-dark: #15803d;
  --ink: #0b1220;
  --bg: #0d1117;
  --bg-2: #131a24;
  --surface: #161d29;
  --surface-2: #1c2533;
  --line: #243044;
  --text: #e6edf3;
  --muted: #9aa7b8;
  --radius: 14px;
  --maxw: 1080px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --glow: 0 0 0 1px rgba(34, 197, 94, .25), 0 12px 40px rgba(34, 197, 94, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(34, 197, 94, .14), transparent 60%),
    radial-gradient(700px 400px at -10% 10%, rgba(22, 163, 74, .10), transparent 55%),
    var(--bg);
  line-height: 1.6;
}

a { color: var(--green-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Keyboard focus ring (only for keyboard nav, not mouse clicks). WCAG 2.4.7;
   green-bright on the dark bg is ~8.3:1, well past the 3:1 UI-component floor. */
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }

/* Skip-to-content link: off-screen until focused, then pinned top-left. WCAG 2.4.1. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus {
  left: 8px; top: 8px; padding: 8px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--green);
}
#main { scroll-margin-top: 72px; }

/* <picture> wraps responsive <img> (webp source + png fallback); keep it a
   plain block so the existing `.win/.shot/.page-hero-art img` rules govern size. */
picture { display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---- Top nav ---- */
.nav {
  position: sticky; top: 0; z-index: 20;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(13, 17, 23, .72);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background .25s ease;
}
.nav.scrolled { background: rgba(13, 17, 23, .9); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.nav .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
/* Logo: the real app icon (transparent PNG) shown directly on the header, no
   tile behind it. */
.brand .logo {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  transition: transform .2s ease;
}
.brand:hover .logo { transform: translateY(-1px) rotate(-4deg) scale(1.04); }
.brand .logo img { width: 44px; height: 44px; display: block; }

.nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); padding: 8px 12px; border-radius: 10px; font-size: 15px;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
/* Right-hand button cluster in the nav. */
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.nav-cta a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.nav-cta a:hover { transform: translateY(-1px); text-decoration: none; }
.nav-cta a.icon-only { padding: 9px; }
.nav-cta a .ic { font-size: 15px; }
.nav-cta a.icon-only .ic { font-size: 17px; }
.nav-cta .ghost { color: var(--text); border: 1px solid var(--line); background: var(--surface); }
.nav-cta .ghost:hover { border-color: var(--green); color: var(--green-bright); }
/* Support links styled like the NUTS project: a white rounded badge (so the
   pink heart and the coloured Buy Me a Coffee brand mark read against the dark
   nav instead of washing out), the sponsor heart always pink, and the coffee
   link using the official BMC brand mark (an image, so it keeps its colour). */
.nav-cta .sponsor,
.nav-cta .coffee { background: #fff; border-color: rgba(0, 0, 0, .08); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.nav-cta .sponsor { color: #db61a2; }
.nav-cta .sponsor:hover { border-color: #db61a2; color: #db61a2; }
.nav-cta .coffee:hover { border-color: #e2b100; }
/* Microsoft Store CTA — ghost button with a Windows-blue hover accent. */
.nav-cta .store:hover { border-color: #0067b8; color: #2b88d8; }
/* Raster brand marks (e.g. Buy Me a Coffee) in the icon-only nav buttons. */
.ic-img { height: 18px; width: auto; display: inline-block; vertical-align: -0.28em; flex: 0 0 auto; }
.nav-cta .solid { color: #04210f; background: var(--green-bright); box-shadow: 0 6px 18px rgba(34, 197, 94, .25); }
.nav-cta .solid:hover { background: var(--green); }

/* Inline icons (Font Awesome Free paths; see website/README.md). Inherit the
   text colour so they recolour with their button/link. */
.ic { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 12px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green-bright); color: #04210f; box-shadow: 0 8px 22px rgba(34, 197, 94, .28); }
.btn-primary:hover { background: var(--green); text-decoration: none; box-shadow: 0 12px 30px rgba(34, 197, 94, .4); }
.btn-ghost { border-color: var(--line); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--green); text-decoration: none; }
/* GitHub CTA: a plain "GitHub" text button on desktop; the icon only shows when
   it collapses to an icon-only button on phones (see the 640px query). */
.btn-github { display: inline-flex; align-items: center; gap: 8px; }
.btn-github svg { display: none; width: 18px; height: 18px; }

/* ---- Hero ---- */
.hero { padding: 76px 0 44px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 44px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.04; margin: 0 0 16px; letter-spacing: -.025em; }
.hero h1 .accent { color: var(--green-bright); }
.hero p.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 560px; margin: 0 0 26px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .sub { margin-top: 18px; color: var(--muted); font-size: 14px; }
.hero .sub b { color: var(--text); font-weight: 700; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; border-radius: 999px;
  margin-bottom: 20px;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* ---- Hero box: two stacked, framed app windows with a green glow ---- */
.hero-box { position: relative; min-height: 340px; perspective: 1400px; }
/* Shared soft green glow behind the framed hero / page-hero / tribute art.
   Alpha varies per host via --glow-a; some hosts also tweak the inset. */
.glow {
  position: absolute; inset: -8% -6% -12% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 60% 40%, rgba(34, 197, 94, var(--glow-a, .26)), transparent 70%);
  filter: blur(10px);
}
.hero-box .glow { --glow-a: .28; }
.hero-box .win { position: absolute; width: 100%; border-radius: 12px; display: block; }
.hero-box .win img { width: 100%; height: auto; display: block; }
.hero-box .win-back {
  top: 0; right: -4%; width: 78%; z-index: 1; opacity: .82;
  transform: rotate(3deg) translateZ(-40px);
}
.hero-box .win-front {
  top: 18%; left: -2%; width: 96%; z-index: 2;
  rotate: -2deg; --bob-y: -12px;
  animation: bob 7s ease-in-out infinite;
}
/* One shared "bob" for every floating element. Each keeps its own static tilt
   via the independent `rotate` property, so the keyframe only moves `translate`
   and doesn't have to re-declare each element's rotation (which is what forced
   four near-identical keyframes before). Per-element distance via --bob-y. */
@keyframes bob { 50% { translate: 0 var(--bob-y, -10px); } }

/* ---- Hero divider: an elegant rule with the Helena mark, bridging the hero
   and the rest of the page ---- */
.hero-divider { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 26px auto 6px; padding: 0 20px; }
.hero-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 25%, rgba(34, 197, 94, .35) 50%, var(--line) 75%, transparent); }
.hero-divider .mark { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); box-shadow: 0 0 0 7px rgba(34, 197, 94, .06), var(--shadow); }
.hero-divider .mark img { width: 28px; height: 28px; display: block; --bob-y: -4px; animation: bob 6s ease-in-out infinite; }

/* ---- Per-page hero: a two-column header with a framed screenshot on the
   right, so every page opens with a visual instead of an empty gap ---- */
.page-hero { overflow: hidden; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.page-hero-grid.no-art { display: block; }
.page-title { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.01em; margin: .15em 0 .3em; }
.page-lead { color: var(--muted); max-width: 560px; font-size: 18px; margin: 0; }
.no-art .page-lead { max-width: 720px; }
.page-hero-art { position: relative; }
.page-hero-art .glow { inset: -10% -6% -14% -6%; }
.page-hero-art img { position: relative; z-index: 1; width: 100%; height: auto; display: block;
  rotate: -1.5deg; --bob-y: -9px; animation: bob 7s ease-in-out infinite; }

/* ---- Section ---- */
section { padding: 56px 0; }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 8px; letter-spacing: -.01em; }
.section-head p { color: var(--muted); margin: 0; max-width: 680px; }
.eyebrow { color: var(--green-bright); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }

/* Headline band between sections. */
.band { text-align: center; padding: 26px 0; }
.band h2 { font-size: clamp(24px, 4vw, 34px); margin: 0 auto; max-width: 760px; letter-spacing: -.02em; }
.band h2 .accent { color: var(--green-bright); }
.band p { color: var(--muted); margin: 10px auto 0; max-width: 620px; }

/* ---- Cards grid ---- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(34, 197, 94, .5); box-shadow: var(--shadow); }
.card h3 { margin: 0 0 8px; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: rgba(34,197,94,.14); color: var(--green-bright); flex: 0 0 auto; font-size: 18px;
  transition: transform .2s ease; }
.card:hover .ico { transform: scale(1.08) rotate(-4deg); }

/* ---- Feature list (detailed) ---- */
.feature { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 26px 0; border-top: 1px solid var(--line); }
.feature h3 { margin: 0; font-size: 20px; }
.feature .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tag { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; background: var(--surface); }

/* ---- Roadmap timeline ---- */
.timeline { position: relative; margin: 10px 0; padding-left: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 18px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--green) , var(--line)); }
.tl-item { position: relative; padding: 0 0 26px 52px; }
.tl-dot { position: absolute; left: 9px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--line); background: var(--surface-2); }
.tl-item.done .tl-dot { background: var(--green-bright); box-shadow: 0 0 0 2px var(--green); }
.tl-item.active .tl-dot { background: #f59e0b; box-shadow: 0 0 0 2px #b45309; }
.tl-item .tl-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; transition: transform .2s ease, border-color .2s ease; }
.tl-item .tl-card:hover { transform: translateX(4px); border-color: rgba(34, 197, 94, .4); }
.tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-head h2, .tl-head h3 { margin: 0; font-size: 17px; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.badge.shipped { background: rgba(34,197,94,.16); color: var(--green-bright); }
.badge.progress { background: rgba(245,158,11,.16); color: #fbbf24; }
.badge.planned { background: rgba(154,167,184,.16); color: var(--muted); }
.tl-card p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 3px 9px; border-radius: 8px; }

/* progress meter */
.meter { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-bright)); }
.meter-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin: 6px 2px 0; }

/* ---- Examples ---- */
.shot { margin: 18px 0 6px; }
.shot img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--ink); transition: transform .25s ease, box-shadow .25s ease; }
.shot img:hover { transform: translateY(-4px) scale(1.006); box-shadow: var(--glow); }
.shot figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; }
.example { padding: 30px 0; border-top: 1px solid var(--line); }
pre, code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-x: auto; font-size: 14px; }
code { background: var(--surface-2); padding: .12em .4em; border-radius: 6px; font-size: .9em; }
pre code { background: none; padding: 0; }

/* ---- prose (markdown content pages) ---- */
.prose h2 { margin-top: 36px; }
.prose ul { color: var(--muted); }
.prose li { margin: 4px 0; }

/* ---- Contribute ---- */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ---- Contact form (Web3Forms) ---- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
.contact-form { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; background: var(--ink); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #5d6b7e; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green-bright); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.field textarea { resize: vertical; min-height: 130px; }
.contact-form .h-captcha { margin: 6px 0 14px; }
.form-note { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* Discord callout + QR on the contact page. */
.discord-cta { display: flex; width: fit-content; align-items: center; gap: 9px; margin-top: 6px; padding: 11px 16px;
  border-radius: 10px; font-weight: 600; color: #fff; background: #5865f2; transition: transform .15s ease, box-shadow .15s ease; }
.discord-cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(88, 101, 242, .4); }
.discord-cta .ic { font-size: 18px; }
.qr-card { display: flex; width: fit-content; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px;
  background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
.qr-card img { width: 148px; height: 148px; display: block; image-rendering: pixelated; }
.qr-card span { color: #0b1220; font-size: 12px; font-weight: 600; letter-spacing: .02em; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--line); padding: 34px 0; color: var(--muted); font-size: 14px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--green-bright); }

/* ---- About ---- */
.author { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.avatar { width: 96px; height: 96px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-size: 40px; }
.avatar.photo { overflow: hidden; padding: 0; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* IDCT brand lockup: the logo is black-on-white, so it sits on a white chip. */
.idct-badge { display: inline-flex; align-items: center; margin-top: 12px; background: #fff;
  border-radius: 10px; padding: 7px 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease; }
.idct-badge:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.idct-badge img { height: 30px; width: auto; display: block; }

/* "The author" bio: the photo + IDCT logo sit on the left with the bio text
   vertically centred beside them (like the cat-photos section), with the same
   gentle bob. */
.author-bio { display: flex; align-items: center; gap: 30px; margin: 6px 0 12px; }
.author-figure { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; --bob-y: -4px; animation: bob 6s ease-in-out infinite; }
.author-figure .avatar { width: 150px; height: 150px; }
.author-figure .idct-badge { margin-top: 0; }
.author-figure .idct-badge img { height: 36px; }
.author-bio p { margin: 0; color: var(--muted); }

/* "Named after Helena" — the two photos "fly" on the right, mirroring the
   homepage hero: a faded, tilted back photo behind a larger floating front one,
   with the note in the left column. */
.tribute-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 40px;
  align-items: center; margin: 8px 0 36px; }
.tribute-text { color: var(--muted); max-width: 46ch; }
/* Photo widths capped in px so the box height stays predictable at any column
   width (a % width would let the tall portrait grow into the section below). */
.tribute-box { position: relative; min-height: 400px; }
.tribute-box .glow { --glow-a: .22; }
.tribute-box .cat-win { position: absolute; margin: 0; display: block; border-radius: 14px;
  overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--ink); }
.tribute-box .cat-win img { width: 100%; height: auto; display: block; }
.tribute-box .cat-win-back { top: 0; right: 0; width: min(56%, 236px); z-index: 1; opacity: .9; transform: rotate(3deg); }
.tribute-box .cat-win-front { top: 44px; left: 0; width: min(70%, 300px); z-index: 2; rotate: -2deg; --bob-y: -10px;
  animation: bob 7s ease-in-out infinite; }

/* ---- Scroll reveal (progressive enhancement; visible by default) ---- */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  /* The desktop hero is two rotated, overlapping windows floating over a glow;
     that composition doesn't read on a phone. Collapse it to a single, centred
     screenshot capped to a sensible width so it looks deliberate instead of a
     shrunken leftover of the animation. */
  .hero-box { min-height: 0; margin: 8px auto 0; max-width: 520px; }
  .hero-box .glow { inset: -6% 0 -6% 0; }
  .hero-box .win { position: relative; width: 100%; transform: none; rotate: none; translate: none; animation: none; }
  .hero-box .win-back { display: none; }
  /* The fancy PNG already carries its own window frame + shadow, so just clear
     the default <figure> margin and let it fill the column. */
  .hero-box .win-front { top: 0; left: 0; margin: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 22px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .page-hero-art { max-width: 460px; }
  .page-hero-art img { transform: none; rotate: none; translate: none; animation: none; }
}

/* ---- Phone (<=640px): all narrow-screen overrides live here ---- */
@media (max-width: 640px) {
  /* About page: stack the author lockup and the tribute photos. */
  .author-bio { flex-direction: column; align-items: flex-start; gap: 18px; }
  .tribute-grid { grid-template-columns: 1fr; gap: 22px; }
  .tribute-box { min-height: 0; display: flex; flex-direction: column; gap: 16px; }
  .tribute-box .glow { display: none; }
  .tribute-box .cat-win { position: relative; width: 100%; inset: auto;
    transform: none; rotate: none; translate: none; animation: none; opacity: 1; }

  /* Stacked, centred nav: brand on top, button cluster below it, page links
     last — every row centred on its own line. */
  .nav .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .brand { order: 1; width: 100%; justify-content: center; }
  .nav-cta { order: 2; width: 100%; margin-left: 0; justify-content: center; border-left: 0; padding-left: 0; }
  .nav-links { order: 3; width: 100%; margin-left: 0; justify-content: center; gap: 2px; }
  .nav-links a { padding: 6px 10px; }
  /* Collapse the Microsoft Store CTA to icon-only so the top row stays compact. */
  .nav-cta .store span { display: none; }
  .hero { padding: 44px 0 24px; }
  /* Collapse the hero/404 GitHub CTA to icon-only so the action row fits. */
  .actions .btn-github { padding: 12px; }
  .actions .btn-github svg { display: block; }
  .actions .btn-github span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .shot img:hover { transform: none; }
}

/* ---- Small utilities (replace one-off inline styles) ---- */
.muted { color: var(--muted); }
.text-center { text-align: center; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.btn-block { width: 100%; }
/* Visually hidden but announced to screen readers (e.g. the "opens in new tab"
   cue appended to external links by site.js). */
.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;
}

/* ---- Cookie-consent banner (prior-consent GA; see _includes/consent.html) ---- */
.consent-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; padding: 12px; }
.consent-banner.hidden { display: none; }
.consent-inner { max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 18px; box-shadow: 0 14px 44px rgba(0, 0, 0, .5); }
.consent-text { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.consent-btn { padding: 8px 18px; font-size: 14px; }
.consent-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.consent-open:hover { color: var(--green-bright); }