/* 2Moons Rebirth website. Look: 2Moons UI (gold filigree on plum and black stone, blood red accents).
   Tokens shared with the launcher: web/brand/README.md */
:root {
  --ink: #0b0a12;          /* page base */
  --stone: #15131d;        /* stone sections (under the texture) */
  --plum: #241425;         /* leather sections */
  --gold: #e2b55c;         /* bright gold: buttons, kickers */
  --gilt: #c9a15d;         /* metal gold: lines, active states */
  --gilt-dim: #7d6236;
  --line: rgba(201, 161, 93, .3);
  --blood: #9e2328;
  --bone: #f1e6cc;         /* headings */
  --text: #d9d2c3;         /* body */
  --ash: #a09cab;          /* secondary */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Alegreya Sans", "Segoe UI", sans-serif;
  --gutter: clamp(18px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 1.22rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; color: var(--bone); text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 24px rgba(226,181,92,.18); }
h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }
.kicker { font: 600 1rem/1.2 var(--caps); letter-spacing: .18em; color: var(--gold); margin: 0 0 .7rem; text-shadow: 0 1px 0 #000; }

/* ---------- section surfaces ---------- */
.sec { position: relative; padding-block: clamp(64px, 8vw, 110px); }
.stone { background: linear-gradient(rgba(11,10,18,.55), rgba(11,10,18,.7)), url(img/ui/stone.webp) 0 0 / 512px repeat, var(--stone); }
.leather { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(158,35,40,.18), transparent 70%), linear-gradient(rgba(20,8,16,.45), rgba(20,8,16,.6)), url(img/ui/leather.webp) 0 0 / 512px repeat, var(--plum);
  border-block: 1px solid #3a2212; box-shadow: inset 0 12px 30px rgba(0,0,0,.6), inset 0 -12px 30px rgba(0,0,0,.6); }
.sec-title { text-align: center; max-width: 900px; margin: 0 auto 2.4rem; }
.sec-title > p:not(.kicker) { color: var(--ash); font-size: 1.3rem; margin: 1rem auto 0; }
.divider { width: min(560px, 90%); margin: 1.4rem auto 0; opacity: .95; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 1.8rem; }
.emblem { display: flex; align-items: center; gap: .55em; }
.emblem::before { content: ""; width: 1.05em; height: 1.05em; flex: none; background: url(img/ui/medallion.png) center / contain no-repeat; filter: drop-shadow(0 2px 4px #000); }
.sec-link { font: 600 .95rem/1 var(--caps); letter-spacing: .14em; text-decoration: none; }
.sec-link::after { content: " \203A"; }

/* ornate frame: gold double rule + four filigree corners (pre-rotated PNGs) */
.ornate { position: relative; margin: 0; padding: 9px; background: linear-gradient(#2b1d10, #120c07);
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0,0,0,.65); }
.ornate::before { content: ""; position: absolute; inset: 3px; border: 2px solid var(--gilt); outline: 1px solid rgba(201,161,93,.35); outline-offset: 2px; pointer-events: none; z-index: 1; }
.ornate::after { content: ""; position: absolute; inset: -14px; pointer-events: none; z-index: 2;
  background:
    url(img/ui/corner-tl.png) top left / 78px no-repeat,
    url(img/ui/corner-tr.png) top right / 78px no-repeat,
    url(img/ui/corner-bl.png) bottom left / 78px no-repeat,
    url(img/ui/corner-br.png) bottom right / 78px no-repeat; }
.ornate img { width: 100%; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer;
  font: 700 .98rem/1 var(--caps); letter-spacing: .12em; text-decoration: none;
  padding: .95em 1.7em; color: #1d1204;
  background: linear-gradient(#f7dc8f, #e2b55c 42%, #b07d27 100%);
  border: 1px solid #f9e3a6; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px #2a1906, 0 6px 18px rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(255,236,180,.6);
  transition: filter .15s, box-shadow .15s;
}
.btn:hover { color: #1d1204; filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px #2a1906, 0 0 22px rgba(226,181,92,.45), 0 6px 18px rgba(0,0,0,.55); }
.btn-outline { color: var(--gold); background: rgba(11,10,18,.55); border-color: var(--gilt); text-shadow: 0 1px 0 #000; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.4); }
.btn-outline:hover { color: var(--bone); filter: none; background: rgba(36,20,37,.8); box-shadow: 0 0 0 1px #000, 0 0 18px rgba(226,181,92,.25); }
.btn-lg { font-size: 1.2rem; padding: 1.1em 2.3em; }
.btn-sm { font-size: .98rem; padding: .85em 1.45em; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- header: dark bar, logo badge hangs below it ---------- */
.site-header { position: sticky; top: 0; z-index: 30; height: 76px;
  background: linear-gradient(#17131f, #0d0b14); border-bottom: 1px solid #3b2a14; box-shadow: 0 1px 0 rgba(201,161,93,.25), 0 8px 24px rgba(0,0,0,.6); }
.site-header-inner { max-width: 1680px; height: 100%; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
.badge { flex: none; display: block; width: 190px; }
.badge img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.menu { display: flex; gap: clamp(18px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.menu a { color: var(--bone); text-decoration: none; font: 600 1.06rem/1 var(--display); letter-spacing: .08em; }
.menu a:hover { color: var(--gold); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.burger { display: none; position: relative; }
.burger summary { list-style: none; cursor: pointer; width: 44px; height: 40px; display: grid; place-items: center; border: 1px solid var(--gilt-dim); }
.burger summary::-webkit-details-marker { display: none; }
.burger summary span, .burger summary span::before, .burger summary span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--bone); position: relative; }
.burger summary span::before { position: absolute; top: -6px; } .burger summary span::after { position: absolute; top: 6px; }
.burger ul { position: absolute; right: 0; top: calc(100% + 12px); min-width: 230px; list-style: none; margin: 0; padding: 8px 0; background: #15121d; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.burger a { display: block; padding: .75em 1.2em; color: var(--bone); text-decoration: none; }
.burger a:hover { background: var(--plum); }
@media (max-width: 920px) { nav[aria-label="Main"] { display: none; } .burger { display: block; } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } }
@media (max-width: 560px) { .header-actions .btn-outline, .header-actions .logout, .acct { display: none; } }
@media (max-width: 460px) { .header-actions a.btn:not(.btn-outline) { display: none; } .badge { width: 132px; } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: -76px;
  min-height: min(100svh, 980px); display: grid; place-items: center; text-align: center; padding: 130px var(--gutter) 150px; }
.hero-art { position: absolute; inset: 0; z-index: -2; background: url(img/hero-1280.webp) 62% 30% / cover no-repeat; }
@media (min-width: 1300px) { .hero-art { background-image: url(img/hero.webp); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 50% at 50% 55%, rgba(11,10,18,.7), transparent 72%), linear-gradient(rgba(11,10,18,.45), transparent 30%, transparent 70%, rgba(11,10,18,.5)); }
.hero-inner { max-width: 980px; display: grid; justify-items: center; }
.hero-logo { width: clamp(280px, 46vw, 640px); margin-bottom: 1.6rem; filter: drop-shadow(0 8px 28px rgba(0,0,0,.85)); }
.hero h1 { font-size: clamp(1.9rem, 4vw, 3.4rem); text-shadow: 0 3px 0 #000, 0 0 30px rgba(0,0,0,.9), 0 0 50px rgba(226,181,92,.2); }
.hero-sub { font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: var(--bone); max-width: 56ch; margin: 1rem auto 2rem; text-shadow: 0 1px 10px #000, 0 0 2px #000; }
.platform { margin: 1.4rem 0 0; color: var(--ash); font-size: 1.05rem; text-shadow: 0 1px 6px #000; }
.skyline { position: absolute; inset: auto 0 -1px 0; height: clamp(70px, 9vw, 140px); background: var(--ink);
  -webkit-mask: url(img/ui/skyline.png) bottom center / 100% 100% no-repeat; mask: url(img/ui/skyline.png) bottom center / 100% 100% no-repeat; }

/* ---------- status band ---------- */
.band { position: relative; background: linear-gradient(rgba(70,10,16,.55), rgba(40,6,10,.75)), url(img/ui/leather.webp) 0 0 / 420px repeat, #3a0d12;
  border-block: 2px solid #6e4a1d; box-shadow: inset 0 1px 0 #e2b55c66, inset 0 -1px 0 #e2b55c66, 0 10px 30px rgba(0,0,0,.6); }
.band-inner { max-width: 1600px; margin-inline: auto; padding: 18px var(--gutter); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.band-medal { width: 78px; filter: drop-shadow(0 3px 6px #000); }
.band-text { margin: 0; color: #e7d7d0; }
.band-text b { display: block; font: 600 1.5rem/1.2 var(--display); color: var(--bone); text-shadow: 0 2px 0 #000; }
.band-facts { margin: 0 0 0 auto; display: flex; gap: clamp(18px, 3.5vw, 48px); }
.band-facts div { display: flex; flex-direction: column-reverse; align-items: center; }
.band-facts dd { margin: 0; font: 700 2.5rem/1 var(--display); color: var(--gold); text-shadow: 0 2px 0 #000; }
.band-facts dt { font: 600 .85rem/1.4 var(--caps); letter-spacing: .16em; color: #d8b9a8; }
@media (max-width: 760px) { .band-facts { margin-left: 0; } }

/* ---------- news ---------- */
.lead-story a, .stories a { color: inherit; text-decoration: none; display: block; }
.lead-story a { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); background: linear-gradient(#1d1824, #13101a); border: 1px solid #3a2c1a; box-shadow: 0 0 0 1px #000, 0 16px 40px rgba(0,0,0,.5); }
.lead-text { padding: clamp(26px, 3.4vw, 48px); align-self: center; }
.lead-text h3 { font-size: clamp(1.7rem, 2.7vw, 2.3rem); margin-bottom: 1rem; }
.lead-text p { color: var(--text); font-size: 1.2rem; }
.lead-story img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.more { font: 600 .95rem/1 var(--caps); letter-spacing: .14em; color: var(--gold); }
.more::after { content: " \203A"; }
.stories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 14px 0 2.4rem; }
.stories a { height: 100%; background: linear-gradient(#1d1824, #13101a); border: 1px solid #3a2c1a; box-shadow: 0 0 0 1px #000; transition: border-color .2s; }
.stories img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stories h3 { font-size: 1.22rem; padding: 18px 20px 22px; }
.stories a:hover, .lead-story a:hover { border-color: var(--gilt); }
.stories a:hover h3, .lead-story a:hover h3 { color: var(--gold); }
@media (max-width: 960px) { .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lead-story a { grid-template-columns: 1fr; } .lead-story img { order: -1; } }
@media (max-width: 520px) { .stories { grid-template-columns: 1fr; } }

/* ---------- feature tabs ---------- */
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin-bottom: 2.4rem; }
.tabs button { font: 600 1.12rem/1 var(--display); letter-spacing: .06em; color: var(--ash); background: none; border: 0; padding: 10px 4px 12px; cursor: pointer; border-bottom: 2px solid transparent; text-shadow: 0 1px 0 #000; }
.tabs button:hover { color: var(--bone); }
.tabs button[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--gold); box-shadow: 0 8px 12px -10px var(--gold); }
.panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.panel + .panel { margin-top: 56px; }
.js .panel + .panel { margin-top: 0; }
.panel[hidden] { display: none; }
.panel-text h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 1rem; }
.panel-text p { color: var(--text); font-size: 1.28rem; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } .tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } .tabs button { flex: none; } }

/* ---------- classes ---------- */
.classes { background: radial-gradient(ellipse 60% 70% at 70% 60%, rgba(120,30,40,.22), transparent 70%), linear-gradient(#0b0a12, #120f1a 50%, #0b0a12); }
.class-picker { display: none; }
.js .class-picker { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin: 0 auto 3.4rem; max-width: 1280px; }
.class-picker a { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--ash); font: 600 .8rem/1.25 var(--display); text-align: center; }
.class-picker img { width: 100%; max-width: 92px; aspect-ratio: 1; border-radius: 50%; border: 2px solid #5c4524; box-shadow: 0 0 0 1px #000, 0 4px 10px rgba(0,0,0,.6); filter: grayscale(.7) brightness(.75); transition: filter .2s, border-color .2s, box-shadow .2s; }
.class-picker a:hover img { filter: none; }
.class-picker a[aria-current="true"] { color: var(--gold); }
.class-picker a[aria-current="true"] img { filter: none; border-color: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 16px rgba(226,181,92,.55); }
.cls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.cls + .cls { margin-top: 64px; }
.js .cls { display: none; }
.js .cls.is-active { display: grid; margin-top: 0; animation: fade .4s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cls .ornate { max-width: 540px; justify-self: center; width: 100%; }
.cls .ornate img { aspect-ratio: 3 / 4; object-fit: cover; }
.cls h3 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); margin-bottom: 1.1rem; }
.cls p { font-size: 1.35rem; color: var(--text); max-width: 46ch; }
.schools { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 1.6rem 0 0; }
.schools li { font: 600 .95rem/1 var(--display); letter-spacing: .05em; color: var(--bone); padding: .55em .9em; background: linear-gradient(#2a1f2e, #191320); border: 1px solid #5c4524; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
@media (max-width: 900px) { .js .class-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cls { grid-template-columns: 1fr; } .cls .ornate { order: -1; max-width: 360px; } }
@media (max-width: 480px) { .class-picker span { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .cls.is-active { animation: none; } html { scroll-behavior: auto; } }

/* ---------- world ---------- */
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
.plates img { aspect-ratio: 16 / 10; object-fit: cover; }
.plates figcaption { position: absolute; inset: auto 7px 7px; padding: 48px 22px 18px; background: linear-gradient(transparent, rgba(8,6,12,.92)); z-index: 1; }
.plates b { display: block; font: 600 clamp(1.4rem, 2.1vw, 1.9rem)/1.1 var(--display); color: var(--bone); text-shadow: 0 2px 0 #000; }
.plates i { color: var(--ash); }
@media (max-width: 760px) { .plates { grid-template-columns: 1fr; } }

/* ---------- split call to action ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; border-block: 6px solid transparent;
  border-image: repeating-linear-gradient(90deg, #6e4a1d 0 22px, #c9a15d 22px 26px, #6e4a1d 26px 48px) 6; }
.split-card { position: relative; min-height: 340px; display: flex; align-items: center; overflow: hidden; text-decoration: none; color: var(--text); padding: 32px clamp(24px, 4vw, 56px); }
.split-card.new { justify-content: flex-end; text-align: right; background: linear-gradient(90deg, rgba(60,10,16,.2), rgba(40,6,10,.85) 55%), url(img/ui/leather.webp) 0 0 / 420px, #3a0d12; }
.split-card.back { background: linear-gradient(270deg, rgba(20,20,40,.2), rgba(14,14,30,.88) 55%), url(img/ui/stone.webp) 0 0 / 420px, #16162a; border-left: 2px solid #6e4a1d; }
.split-card img { position: absolute; top: 0; height: 120%; width: auto; max-width: none; opacity: .85; transition: transform .5s ease;
  -webkit-mask: linear-gradient(to bottom, #000 55%, transparent); mask: linear-gradient(to bottom, #000 55%, transparent); }
.split-card.new img { left: 0; -webkit-mask: linear-gradient(90deg, #000 40%, transparent 90%); mask: linear-gradient(90deg, #000 40%, transparent 90%); }
.split-card.back img { right: 0; -webkit-mask: linear-gradient(270deg, #000 40%, transparent 90%); mask: linear-gradient(270deg, #000 40%, transparent 90%); }
.split-card:hover img { transform: scale(1.04); }
.split-text { position: relative; max-width: 440px; display: grid; gap: .5rem; }
.split-text .kicker { margin: 0; }
.split-text b { font: 600 clamp(1.8rem, 2.9vw, 2.4rem)/1.15 var(--display); color: var(--bone); text-shadow: 0 2px 0 #000; }
.split-card:hover b { color: var(--gold); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .split-card.back { border-left: 0; border-top: 2px solid #6e4a1d; } }

/* ---------- footer ---------- */
.site-footer { background: linear-gradient(rgba(10,8,12,.75), rgba(10,8,12,.9)), url(img/ui/stone.webp) 0 0 / 420px, #0d0b10; padding: 64px 0 36px; text-align: center; color: var(--ash); font-size: 1.08rem; }
.footer-logo { width: 230px; margin: 0 auto 1.6rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.site-footer a { color: var(--bone); text-decoration: none; font: 600 1rem/1.4 var(--display); letter-spacing: .06em; }
.site-footer a:hover { color: var(--gold); }
.site-footer p { max-width: 640px; margin-inline: auto; }
.copy { font-size: .85rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(201,161,93,.15); }

/* ---------- inner pages ---------- */
.page-head { position: relative; isolation: isolate; text-align: center; padding: 120px var(--gutter) 90px; margin-top: -76px;
  background: linear-gradient(rgba(11,10,18,.5), rgba(11,10,18,.8)), url(img/intro-town.webp) center 40% / cover; }
.page-head h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
.page-head p { margin: 1rem auto 0; color: var(--bone); }
.page-head .skyline { height: clamp(50px, 7vw, 100px); }
.articles { max-width: 1200px; margin-inline: auto; }
.article { padding: 44px clamp(22px, 4vw, 52px); margin-bottom: 36px; background: linear-gradient(#1b1622, #120f18); border: 1px solid #3a2c1a; box-shadow: 0 0 0 1px #000, 0 16px 40px rgba(0,0,0,.45); }
.article time { font: 600 .92rem/1 var(--caps); letter-spacing: .14em; color: var(--gold); }
.article h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: .5rem 0 1.4rem; }
.article .ornate { margin-bottom: 1.8rem; }
.article .ornate img { aspect-ratio: 16 / 9; object-fit: cover; }
.article h3 { font-size: 1.55rem; margin: 1.6rem 0 .6rem; }
.article ul { padding-left: 1.2em; }
.article li { margin-bottom: .35em; }
.article li::marker { color: var(--gold); }

form { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
label { display: grid; gap: .35rem; font-weight: 500; color: var(--bone); }
label small { color: var(--ash); font-weight: 400; }
input { font: inherit; color: var(--bone); background: #0f0d15; border: 1px solid #4a3a24; padding: .75em .9em; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
input:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
input:user-invalid { border-color: var(--blood); }
.form-msg { min-height: 1.6em; margin: 0; }
.form-msg.err { color: #e9857c; }
.form-msg.ok { color: var(--gold); }

/* ---------- header: logged in ---------- */
.acct { display: flex; align-items: center; gap: 8px; color: var(--bone); font: 600 1.05rem/1 var(--display); letter-spacing: .04em; }
.acct img { width: 26px; filter: drop-shadow(0 1px 2px #000); }
.logout { background: none; border: 0; color: var(--ash); font: inherit; font-size: 1.05rem; cursor: pointer; padding: 6px 4px; }
.logout:hover { color: var(--gold); }

/* ---------- log in / create account popups (native <dialog>) ---------- */
.modal {
  width: min(520px, calc(100vw - 32px)); padding: 64px clamp(24px, 5vw, 44px) 32px; overflow: visible;
  color: var(--text); border: 1px solid var(--gilt);
  background:
    url(img/ui/corner-tl.png) top left / 56px no-repeat, url(img/ui/corner-tr.png) top right / 56px no-repeat,
    url(img/ui/corner-bl.png) bottom left / 56px no-repeat, url(img/ui/corner-br.png) bottom right / 56px no-repeat,
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(158,35,40,.28), transparent 70%),
    linear-gradient(rgba(22,10,20,.72), rgba(12,8,14,.92)), url(img/ui/leather.webp) 0 0 / 420px, var(--plum);
  box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(201,161,93,.18), 0 30px 80px rgba(0,0,0,.8);
}
.modal[open] { animation: rise .28s ease-out; }
.modal::backdrop { background: radial-gradient(ellipse at center, rgba(20,8,16,.6), rgba(5,4,10,.88)); backdrop-filter: blur(3px); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal-medal { position: absolute; top: -40px; left: 50%; width: 84px; transform: translateX(-50%); filter: drop-shadow(0 6px 12px rgba(0,0,0,.8)); }
.modal h2 { font-size: clamp(1.7rem, 3.6vw, 2.2rem); text-align: center; }
.modal-sub { text-align: center; color: var(--ash); margin: .7rem auto 0; max-width: 34ch; }
.modal form:not(.modal-x) { margin-top: 1.6rem; }
.modal .btn-lg { width: 100%; margin-top: .4rem; }
.modal-switch { text-align: center; margin: 1.2rem 0 0; color: var(--ash); }
.modal-x { position: absolute; top: 10px; right: 12px; margin: 0; }
.modal-x button { width: 36px; height: 36px; font-size: 1.6rem; line-height: 1; color: var(--ash); background: none; border: 0; cursor: pointer; }
.modal-x button:hover { color: var(--gold); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 40; max-width: min(560px, calc(100vw - 32px)); margin: 0;
  padding: 14px 20px; color: var(--bone); background: linear-gradient(#2a1420, #180b14); border: 1px solid var(--gilt); box-shadow: 0 12px 30px rgba(0,0,0,.7);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- motion (off for prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hero: the key art drifts slowly; the logo breathes a warm glow */
  .hero-art { animation: dawn 2.4s ease-out both, drift 46s ease-in-out 2.4s infinite alternate; }
  @keyframes drift { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.6%, -1.2%); } }
  .hero-logo { animation: breathe 5.5s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { filter: drop-shadow(0 8px 28px rgba(0,0,0,.85)) drop-shadow(0 0 0 rgba(226,181,92,0)); }
    50%      { filter: drop-shadow(0 8px 28px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(226,140,70,.45)); }
  }

  /* embers rising through the hero (motion.js adds them) */
  .embers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .embers i { position: absolute; bottom: -8px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #ffe2a0, #f08a3c 55%, transparent 72%); box-shadow: 0 0 6px 1px rgba(240,138,60,.7);
    animation: ember var(--d) linear var(--delay) infinite; }
  @keyframes ember {
    0%   { transform: translate(0, 0); opacity: 0; }
    12%  { opacity: .95; }
    70%  { opacity: .6; }
    100% { transform: translate(var(--sway), -85vh); opacity: 0; }
  }

  /* medallions and dividers breathe */
  .band-medal, .modal-medal, .emblem::before, .acct img { animation: medal 4.5s ease-in-out infinite; }
  @keyframes medal { 50% { filter: drop-shadow(0 0 10px rgba(226,140,70,.65)) drop-shadow(0 3px 6px #000); } }
  .divider { animation: divider 6s ease-in-out infinite; }
  @keyframes divider { 50% { filter: drop-shadow(0 0 8px rgba(226,181,92,.5)); } }

  /* gold buttons: a light sweep every few seconds */
  .btn:not(.btn-outline) { position: relative; overflow: hidden; }
  .btn:not(.btn-outline)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,250,230,.55) 50%, transparent 65%);
    transform: translateX(-130%); animation: shine 7s ease-in-out infinite; }
  @keyframes shine { 0%, 78% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

  /* the chosen class floats gently */
  .js .cls.is-active .ornate { animation: float 6s ease-in-out infinite; }
  @keyframes float { 50% { transform: translateY(-10px); } }

  /* framed cards lift on hover */
  .plates figure, .stories a, .lead-story a, .split-card { transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .45s; }
  .plates figure:hover, .stories a:hover { transform: translateY(-6px); }
  .plates figure:hover img, .lead-story a:hover img { transform: scale(1.04); }
  .plates img, .lead-story img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .lead-story a { overflow: hidden; }

  /* scroll reveal (motion.js adds .reveal, then .in once visible) */
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease var(--stagger, 0ms), transform 1s cubic-bezier(.2,.7,.2,1) var(--stagger, 0ms); }
  .reveal.in { opacity: 1; transform: none; }
}