/* Smited — laid out like the RuneScape site, recoloured dark red and grey. */
:root {
  --night: #0b0e15;
  --iron: #141a24;
  --iron-2: #1b2230;
  --edge: #2a3446;
  --pewter: #9a958f;
  --bone: #ece3d2;
  --muted: #b6ac9b;
  --gold: #d8b36a;
  --gold-deep: #9c7633;
  --ruby: #8f0a0f; /* blood red */
  --ruby-hi: #b5121a;
  --ruby-lo: #5c0508;
  --frame: #6e5630; /* thin card borders: a muted version of the gold */
  --title: #d2ac6c; /* gold, the same as the line under the navbar: heading ornaments and card corners */

  /* One face throughout: Montserrat. */
  --f-body: 'Montserrat', 'Segoe UI', Arial, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 100px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--bone);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

[hidden] { display: none !important; }
:focus, :focus-visible { outline: none; } /* no focus outlines anywhere */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ruby); color: #fff; padding: 8px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Buttons: chipped champagne-gold metal plates matching the navbar, in the nav font ---------- */
/* The plate lives on ::before so the #chipped filter (index.html) roughens its edges without
   blurring the text. Bevel: lit top and left edges, shaded bottom and right. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.btn {
  /* polished gold: bright top, a sharp darker band through the middle, lighter again at the foot.
     Slightly see-through so the scuffed texture shows. */
  --plate: rgba(236,212,160,.92) 0%, rgba(214,180,118,.92) 22%, rgba(184,144,82,.92) 49%, rgba(150,112,52,.94) 51%, rgba(176,138,76,.92) 78%, rgba(206,172,112,.92) 100%;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 32px;
  font: 700 .9375rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .01em;
  color: #1e1406; text-shadow: 0 1px 0 rgba(255,236,190,.4); /* near-black brown, engraved into the metal */
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    url('../img/btn-cracks.svg') center / 1600px 84px repeat-x, /* cracks, a little stronger than the navbar's */
    linear-gradient(var(--plate)),
    url('../img/grunge.jpg') center / 1400px,
    #9a7438;
  box-shadow:
    inset 2px 2px 0 rgba(255,244,214,.55),  /* lit top and left edges */
    inset -2px 0 0 rgba(0,0,0,.45),        /* shaded right edge */
    inset 0 -3px 0 rgba(0,0,0,.35),        /* shaded bottom edge */
    inset 0 0 12px rgba(0,0,0,.35);        /* vignette into the edges */
  filter: url(#chipped) drop-shadow(0 3px 4px rgba(0,0,0,.65));
}
.btn::after { /* 1px highlight square set a little in from the edge, all the way round */
  content: ''; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  border: 1px solid rgba(255,240,200,.5);
}
.btn:hover { --plate: rgba(246,226,178,.92) 0%, rgba(228,196,134,.92) 22%, rgba(200,160,96,.92) 49%, rgba(166,126,62,.94) 51%, rgba(192,154,90,.92) 78%, rgba(220,188,128,.92) 100%; }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 38px; padding: 0 24px; }
.btn-lg { height: clamp(50px, 5vw, 56px); padding: 0 44px; font-size: 1.0625rem; }

/* ---------- Nav ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50; /* floats over the top of the hero and scrolls away with the page */
  height: var(--nav-h);
  /* logo | links centred on the page | log in */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  /* Fully clear: the hero art shows straight through, with just the gold line along the bottom. */
  background: transparent;
}
.nav::before { /* the hero art shows through in its own colours, dimmed and very slightly blurred */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav::after { /* thin gold line along the bottom that fades out towards both edges, like the reference */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #d2ac6c 18%, #e2c48a 50%, #d2ac6c 82%, transparent);
}
.nav-brand { justify-self: start; }
.nav-brand img { width: 250px; } /* the 3D logo, 83px tall in the 100px bar */
.nav-menu { display: contents; }
.nav-menu ul { display: flex; align-items: center; }
/* Account corner: a quiet Login text link beside the gold Register button */
.nav-account { justify-self: end; display: flex; align-items: center; gap: 22px; }
.nav-login { font: 700 1rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .01em; color: #fff; transition: none; }
.nav-login:hover { color: #d2ac6c; }
.nav-menu ul a {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 20px;
  font: 700 1.1875rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .01em;
  color: #fff;
}
.nav-menu ul a::after { /* gold underline drawn left to right on hover, matching the navbar's bottom lip */
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 4px; height: 2px;
  background: #d2ac6c;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-menu ul a:hover::after, .nav-menu ul a:focus-visible::after, .nav-menu ul a[aria-current]::after { transform: scaleX(1); }
.ico { width: 16px; height: 16px; flex: none; }

/* Hiscores dropdown: opens on hover or keyboard focus, as a solid textured panel with the gold frame. */
.has-sub { position: relative; }
.caret { width: 10px; height: 6px; flex: none; margin-left: 2px; transition: transform .15s ease; }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
.nav-menu .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60;
  min-width: 230px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: stretch;
  background:
    linear-gradient(rgba(22,30,43,.94), rgba(15,21,31,.97)),
    url('../img/grunge.jpg') center / cover,
    var(--iron);
  border: 1px solid var(--frame); border-top: 2px solid #d2ac6c;
  visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility .15s;
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { visibility: visible; opacity: 1; }
.nav-menu .sub-menu a { display: block; padding: 13px 22px; font-size: .9375rem; white-space: nowrap; }
.nav-menu .sub-menu a::after { content: none; }
.nav-menu .sub-menu a:hover { color: #d2ac6c; background: rgba(210,172,108,.08); }
@media (max-width: 1300px) and (min-width: 1101px) {
  .nav-brand img { width: 190px; }
  .nav-menu ul a { padding-inline: 12px; font-size: 1rem; }
  .nav-menu ul a::after { left: 12px; right: 12px; }
}
.nav-toggle { display: none; width: 44px; height: 44px; }
.bars, .bars::before, .bars::after { display: block; width: 24px; height: 2px; background: var(--bone); margin: auto; transition: transform .2s ease, opacity .2s ease; }
.bars::before, .bars::after { content: ''; position: relative; }
.bars::before { top: -7px; } .bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) { /* collapse the navbar into the menu button */
  .nav { grid-template-columns: 1fr auto; }
  .nav-brand img { width: 180px; }
  .nav-toggle { display: block; }
  .nav-menu {
    display: flex; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 20px;
    padding: 24px var(--gutter) 32px; background: #111723; border-bottom: 1px solid #2a3446;
    visibility: hidden;
  }
  .nav-menu.open { visibility: visible; }
  .nav-menu ul { flex-direction: column; align-items: stretch; }
  .nav-menu li { display: block; }
  .nav-menu ul a { display: flex; padding: 16px 4px; font-size: 1.125rem; border-bottom: 1px solid var(--edge); }
  .nav-menu ul a::after { left: 4px; right: auto; width: 60px; bottom: -1px; }
  /* Phone menu: the hiscores sit indented under Hiscores, always shown */
  .caret { display: none; }
  .nav-menu .sub-menu {
    position: static; transform: none; min-width: 0; padding: 0 0 0 18px;
    background: none; border: 0; visibility: inherit; opacity: 1; transition: none;
  }
  .nav-menu .sub-menu a { display: flex; padding: 14px 4px; font-size: 1rem; color: #cfc4b8; }
  .nav-account { align-self: flex-start; gap: 24px; }
  .nav-login { font-size: 1.0625rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh + 28px); /* fills the screen (the nav floats over its top); +28px pushes the separator fully below the fold */
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 64px; /* room for the floating nav */
  overflow: hidden;
}
.hero-art {
  position: absolute; inset: 0; z-index: -2;
  filter: contrast(1.12) saturate(1.08); /* a crisper, punchier look */
  /* The eye-boss dungeon art is 2:1, so it covers the hero with a dark pool behind the video
     and fades into the night at the bottom. */
  background:
    linear-gradient(180deg, rgba(11,14,21,.2) 0, rgba(11,14,21,0) 22%, rgba(11,14,21,.05) 65%, var(--night) 98%),
    radial-gradient(ellipse 40% 40% at 50% 45%, rgba(11,14,21,.4), transparent 75%),
    url('../img/hero-eye-boss.jpg') center 30% / cover no-repeat,
    linear-gradient(#121826, var(--night));
}
@media (max-width: 900px) {
  .hero-art {
    background:
      linear-gradient(180deg, rgba(11,14,21,.55), rgba(11,14,21,.6) 50%, var(--night) 100%),
      url('../img/hero-eye-boss.jpg') 50% 30% / cover no-repeat,
      linear-gradient(#121826, var(--night));
  }
}
/* Without a trailer the hero only needs to be about as tall as the 16:9 art. */
.hero:has(.trailer[hidden]) { min-height: clamp(620px, 56.4vw, 980px); padding-bottom: 80px; }

.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 900px; min-width: 0; }
/* The big calls to action: Play now, Register and the Join the Battle download */
.hero .btn-lg, .member .btn, .battle .btn-lg { height: 68px; padding: 0 44px; font-size: 1.375rem; }
.hero .btn-lg { margin-top: 32px; }


/* Launch countdown above the trailer: each digit on its own dark bevelled tile with a gold numeral,
   like the reference counter. */
.countdown { margin-bottom: 26px; text-align: center; }
.cd-title { font: 700 1.1875rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .01em; color: #fff; margin-bottom: 14px; } /* same as the nav links */
.cd-row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 1.4vw, 14px); }
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-digits { display: flex; gap: 4px; }
.cd-digits span {
  display: grid; place-items: center;
  width: clamp(34px, 4.6vw, 52px); height: clamp(46px, 6.2vw, 70px);
  font: 700 clamp(1.625rem, 3.4vw, 2.625rem)/1 'Quantico', var(--f-body); font-variant-numeric: tabular-nums;
  color: #e9c784;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0, transparent 45%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.1) 100%),
    linear-gradient(#26262a, #141417);
  border: 1px solid #5a4724;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.6);
  text-shadow: 0 1px 0 #6e4f1c, 0 2px 4px rgba(0,0,0,.8);
}
.cd-label { font: 700 .6875rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: #fff; }
.cd-sep { align-self: flex-start; font: 700 clamp(1.5rem, 3vw, 2.25rem)/1 'Quantico', var(--f-body); color: #d2ac6c; padding-top: clamp(8px, 1.4vw, 14px); text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.cd-live { font: 800 clamp(1.5rem, 3.4vw, 2.5rem)/1 var(--f-body); text-transform: uppercase; color: #e9c784; text-shadow: 0 2px 6px rgba(0,0,0,.8); }

/* Video frame: a chipped champagne-gold plate like the separators and buttons, heavily cracked, with a thin
   dark grey band round the video itself. The plate is on ::before so the #chipped filter roughens it, not the video. */
.trailer { position: relative; isolation: isolate; width: min(900px, 100%); padding: 14px; }
.trailer::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url('../img/frame-cracks.svg') 0 0 / 1600px 84px repeat, /* dense cracks */
    linear-gradient(rgba(226,196,138,.92), rgba(196,158,94,.92) 50%, rgba(146,108,50,.94)), /* the same champagne gold as the separators */
    url('../img/grunge.jpg') center / 1400px,
    #9a7438;
  box-shadow:
    inset 2px 2px 0 rgba(255,244,214,.45),  /* lit top and left edges */
    inset -2px -3px 0 rgba(0,0,0,.45),      /* shaded bottom and right */
    inset 0 0 18px rgba(60,40,10,.55);      /* shading into the edges */
  filter: url(#chipped) drop-shadow(0 14px 28px rgba(0,0,0,.7));
}
.trailer-screen {
  position: relative; aspect-ratio: 16 / 9; background: #0d0909;
  box-shadow: 0 0 0 1px #070707, 0 0 0 3px #19191a, 0 0 0 4px rgba(255,255,255,.07); /* dark seam, dark grey band, faint lit edge */
}
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Bands + stone separators ---------- */
.band { position: relative; isolation: isolate; padding: clamp(80px, 10vw, 130px) var(--gutter); }
.band-iron {
  background:
    linear-gradient(rgba(22,30,43,.86), rgba(15,21,31,.9)), /* midnight navy */
    url('../img/grunge.jpg') center / cover,
    var(--iron);
}

/* Separators: a straight cracked stone band across each seam, in the navbar's burnished gold. */
.divider { position: relative; z-index: 6; height: 0; pointer-events: none; }
.divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 18px;
  background: url('../img/frame-cracks.svg') 0 0 / 1600px 84px repeat,
    linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.25) 18%, transparent 34%, transparent 66%, rgba(0,0,0,.25) 82%, rgba(0,0,0,.7)), /* darker towards the ends, like the navbar */
    linear-gradient(rgba(226,196,138,.92) 0, rgba(210,172,108,.92) 48%, rgba(164,124,61,.94) 52%, rgba(138,102,48,.94) 100%), /* light gold over a darker gold underside, like the reference */
    url('../img/grunge.jpg') center / 1400px,
    #9a7438;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),  /* lit top edge */
    inset 0 -3px 0 rgba(0,0,0,.55),       /* dark lower edge */
    inset 0 0 10px rgba(0,0,0,.6),
    inset 0 0 16px rgba(0,0,0,.45);       /* deeper shading all round the inside */
  filter: url(#chipped) drop-shadow(0 4px 6px rgba(0,0,0,.7));
}
/* ---------- Grunge ---------- */
/* Every band gets the scratched-iron plate laid over it; plain bands use it as their surface. */
.hero::after, .band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/grunge.jpg') center / cover;
  mix-blend-mode: soft-light; opacity: .7;
}
.hero::after { z-index: -2; opacity: .12; } /* above the art; very light so the painting stays crisp */
.band::after { opacity: .28; } /* keep it strong in the hero, quieter below the first divider */

.wrap { max-width: var(--wrap); margin: 0 auto; }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Section headings like the RuneScape site: one line with a small ornament either side. */
h2 {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 22px);
  font: 800 clamp(2rem, 5vw, 3.25rem)/1.1 var(--f-body); text-transform: uppercase;
  color: #e8ded4; text-align: center;
}
h2::before, h2::after {
  content: ''; flex: none; width: clamp(36px, 6vw, 64px); height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cpath d='M10 6H64' stroke='%238a6a38' stroke-width='1.5'/%3E%3Cpath d='M6 1 11 6 6 11 1 6Z' fill='none' stroke='%23d2ac6c' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
h2::after { transform: scaleX(-1); }
.subtitle { margin-top: 14px; font: 800 clamp(1rem, 1.8vw, 1.3125rem)/1.3 var(--f-body); text-transform: uppercase; color: #e0d4c8; }

/* ---------- News ---------- */
.section-head { margin-bottom: 44px; }
.news-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
/* Framed card: the picture fills it and the title sits over a dark fade at the bottom. */
.post { position: relative; }
.post::after { /* small squares in each corner of the frame */
  content: ''; position: absolute; inset: -3px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--title), var(--title)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--title), var(--title)) 100% 0 / 7px 7px no-repeat,
    linear-gradient(var(--title), var(--title)) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--title), var(--title)) 100% 100% / 7px 7px no-repeat;
}
.post-link { position: relative; display: block; aspect-ratio: 5 / 4; border: 1px solid var(--frame); overflow: hidden; background: #141a24; }
.post-link:hover { border-color: var(--title); }
.post-img { position: absolute; inset: 0; background: linear-gradient(135deg, #2b2f3e, #3b1b1f); }
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-img.missing { display: grid; place-items: center; }
.post-img.missing img { display: none; }
.post-img.missing::after { content: ''; width: 45%; aspect-ratio: 364 / 121; background: url('../img/smited_logo.png') center / contain no-repeat; opacity: .9; }
.post-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 80px 20px 22px;
  background: linear-gradient(transparent, rgba(9,12,19,.92) 50%, rgba(9,12,19,.97));
}
.post h3 { font: 800 clamp(1.125rem, 1.8vw, 1.375rem)/1.2 var(--f-body); text-transform: uppercase; color: #e8ded4; }
.post time { display: block; margin-top: 8px; color: #cfc4b8; font-weight: 600; font-size: .875rem; }
.more { margin-top: 40px; font: 800 1.0625rem/1 var(--f-body); text-transform: uppercase; color: #cfc4b8; }
.more:hover { color: #fff; }

/* ---------- Membership ---------- */
.member {
  --crest: min(400px, 82vw); /* crest size, shared with the Register button below it */
  overflow-x: clip; /* the diamond points can poke past narrow screens */
  background:
    linear-gradient(180deg, rgba(10,14,22,.75), rgba(10,14,22,.6) 50%, rgba(10,14,22,.9)),
    url('../img/member-ice-statue.jpg') center / cover no-repeat,
    radial-gradient(ellipse 30% 30% at 84% 62%, rgba(255,200,150,.12), transparent 70%),
    #0d0a09;
}
.crest { position: relative; width: var(--crest); aspect-ratio: 1; margin: calc(var(--crest) * .15 + 16px) 0 0; display: grid; place-items: center; }
/* The diamond is 92% of the crest box, so its points reach 15% past the box; Register sits on the bottom one. */
.member .btn { margin-top: calc(var(--crest) * .15 - 34px); } /* centred on the diamond's bottom point */
.crest::before { /* the red diamond the crest sits in */
  content: ''; position: absolute; width: 92%; aspect-ratio: 1; border: 1.5px solid rgba(150,14,20,.9); transform: rotate(45deg);
  box-shadow: 0 0 80px rgba(130,10,16,.3), inset 0 0 80px rgba(130,10,16,.2);
}
.crest img {
  position: relative; width: 100%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
}
.crest.missing img { display: none; }
.crest.missing::after { /* CSS stand-in until crest.png exists */
  content: ''; position: relative; width: 52%; aspect-ratio: 5 / 6;
  background: radial-gradient(circle at 50% 36%, #ff4659, #a00f1f 45%, #4e0710 80%);
  border: 10px solid var(--gold);
  border-radius: 16px 16px 50% 50% / 16px 16px 62% 62%;
  box-shadow: 0 0 0 3px var(--gold-deep), 0 0 70px rgba(255,48,70,.45), inset 0 -18px 36px rgba(0,0,0,.45), inset 0 10px 22px rgba(255,255,255,.18);
}

/* Colour grade: section backgrounds get a cool blue cast to match the hero; hero and news pictures are left untinted. */
.member::before, .battle::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #1d3354; mix-blend-mode: color; opacity: .3;
}

/* ---------- Battle ---------- */
.battle h2 { margin-bottom: 28px; }
.battle {
  padding-block: clamp(120px, 16vw, 200px);
  background:
    radial-gradient(ellipse 34% 42% at 50% 52%, rgba(8,11,18,.78), transparent 75%),
    linear-gradient(180deg, rgba(13,18,28,.75), rgba(13,18,28,.4) 45%, rgba(8,11,18,.92)),
    url('../img/battle-battlefield.jpg') center 40% / cover no-repeat,
    linear-gradient(#0f1520, #080b12);
}

/* ---------- Inner pages (download.html) ---------- */
/* Inner pages (body.page-inner, e.g. download.html) get the homepage hero background: the same .hero-art
   layer and faint grunge film, fixed to the screen so it stays in place as you scroll.
   The navbar floats over it just as on the homepage. */
.page-art { position: fixed; inset: 0; z-index: -1; isolation: isolate; pointer-events: none; } /* stays put on screen while the page scrolls over it */
.page-art .hero-art { z-index: 0; }
.page-art::after { /* the homepage hero's faint grunge */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: url('../img/grunge.jpg') center / cover; mix-blend-mode: soft-light; opacity: .12;
}
.page-inner { position: relative; background: var(--night); }
.page-inner main { position: relative; z-index: 0; }
.page-body { padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 72px)); }
.page-body::after { content: none; } /* no texture over the art; the panels carry it */

/* Framed panel: thin muted-gold border with gold corner squares, like the news cards. */
.panel {
  position: relative; width: 100%; padding: 34px clamp(20px, 4vw, 40px);
  /* solid, with the scratched grunge texture */
  background:
    linear-gradient(rgba(22,30,43,.86), rgba(15,21,31,.9)),
    url('../img/grunge.jpg') center / cover,
    var(--iron);
  border: 1px solid var(--frame); text-align: left;
}
.panel::after {
  content: ''; position: absolute; inset: -3px; pointer-events: none;
  background:
    linear-gradient(var(--title), var(--title)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--title), var(--title)) 100% 0 / 7px 7px no-repeat,
    linear-gradient(var(--title), var(--title)) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--title), var(--title)) 100% 100% / 7px 7px no-repeat;
}
.panel-title { display: block; font: 800 1.375rem/1.2 var(--f-body); text-transform: uppercase; color: #e8ded4; margin-bottom: 14px; }
.panel-title::before, .panel-title::after { content: none; }
.panel-text { color: var(--muted); margin-bottom: 26px; }
.panel a:not(.btn), .dl-help a { color: var(--title); }
.panel a:not(.btn):hover, .dl-help a:hover { color: #fff; }

.dl-card { max-width: 820px; text-align: center; }
.dl-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.dl-buttons .btn { gap: 12px; min-width: 200px; }
.dl-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; margin-top: 48px; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.steps li::before { content: counter(step); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--title); color: var(--title); font-weight: 800; font-size: .875rem; }
.steps span { padding-top: 2px; }
.panel code { font: 600 .875em/1 ui-monospace, Consolas, monospace; color: #e8ded4; background: rgba(210,172,108,.12); border: 1px solid rgba(210,172,108,.25); padding: 2px 6px; white-space: nowrap; }
.dl-note { color: var(--muted); margin-top: 14px; }
.dl-note:first-of-type { margin-top: 0; }
.steps + .dl-note { margin-top: 18px; }
.dl-hash code, .dl-note code { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; } /* long values must wrap on phones */
.dl-help { margin-top: 40px; color: var(--muted); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.8); } /* readable over the art */

/* ---------- Register / login box (register.html) ---------- */
.auth-card { max-width: 520px; text-align: left; }
.auth-card .panel-title { font-size: 1.75rem; }
.auth-switch { margin-bottom: 18px; font-size: .9375rem; color: var(--muted); }
.auth-form { display: grid; gap: 18px; margin-top: 6px; }
.field { display: grid; gap: 7px; }
.field span { font: 700 .8125rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .02em; color: #e8ded4; }
.field input {
  width: 100%; height: 46px; padding: 0 14px;
  font: 500 1rem var(--f-body); color: #fff;
  background: rgba(6,9,15,.65); border: 1px solid var(--frame); border-radius: 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.field input:hover { border-color: #8a6a38; }
.field input:focus { outline: none; border-color: #d2ac6c; background: rgba(6,9,15,.85); }
.field input[aria-invalid="true"] { border-color: #c4444a; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--muted); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #d2ac6c; cursor: pointer; }
.form-msg { padding: 12px 14px; font-size: .9375rem; border: 1px solid; }
.form-msg.error { color: #f0b4b4; background: rgba(140,20,26,.25); border-color: rgba(196,68,74,.6); }
.form-msg.info { color: #e8ded4; background: rgba(210,172,108,.1); border-color: var(--frame); }
.auth-form .btn { width: 100%; margin-top: 4px; }
.auth-help { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--frame); font-size: .9375rem; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { /* same scratched navy texture as the news section */
  background:
    linear-gradient(rgba(22,30,43,.86), rgba(15,21,31,.9)),
    url('../img/grunge.jpg') center / cover,
    var(--iron);
  padding: 64px var(--gutter) 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.footer img { width: 170px; }
.footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; font-weight: 600; font-size: .9375rem; text-transform: uppercase; }
.footer ul a { color: #fff; transition: none; } /* colour change only, no animation */
.footer ul a:hover { color: #d2ac6c; } /* the gold of the line under the navbar */
.footer small { color: #e8ded4; font-weight: 600; font-size: .875rem; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}