/* Camelot Solo Codex: dusk-slate ground, gilded display type, realm colours as heraldic accents. */
:root{
  --bg:#eceef2; --panel:#ffffff; --fg:#1a1f27; --muted:#59636f; --line:#d4d9e0;
  --gold:#8a6414; --alb:#b0242c; --mid:#2459b0; --hib:#1f7e3f; --code:#e4e8ee;
  --hero1:#1b2333; --hero2:#3a2a4a; --herofg:#f3efe6;
  --display:"Cinzel Decorative","Cormorant SC",Georgia,serif; --head:"Cormorant SC",Georgia,serif;
  --body:"Literata",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#11151c; --panel:#181e27; --fg:#e4e7ec; --muted:#9aa4b1; --line:#2a323e;
  --gold:#dcb65a; --alb:#e76c72; --mid:#76a2ec; --hib:#62c381; --code:#202733;
  --hero1:#0b0f17; --hero2:#261a33; color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 var(--body)}
.inner{max-width:1100px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
a{color:var(--gold)}
code{font:.84em var(--mono);background:var(--code);padding:1px 6px;border-radius:5px;white-space:nowrap}

.hero{position:relative;color:var(--herofg);background:radial-gradient(1200px 500px at 70% -10%,#6b4a8a55,transparent 60%),linear-gradient(160deg,var(--hero1),var(--hero2));padding-block:72px 56px;overflow:hidden}
.sky{position:absolute;inset:0 0 auto;height:560px;pointer-events:none;background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 33% 12%,#fff8 50%,transparent 51%),radial-gradient(1.2px 1.2px at 58% 30%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 76% 16%,#fff9 50%,transparent 51%),radial-gradient(1.4px 1.4px at 88% 40%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 44% 44%,#fff5 50%,transparent 51%);z-index:1}
.hero .inner{position:relative;z-index:2}
.hero code{background:#ffffff18;color:#fff}
.eyebrow{font:600 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d9c48c;margin:0 0 14px}
h1{font:700 clamp(2.4rem,7vw,4.6rem)/1.02 var(--display);margin:0 0 18px;letter-spacing:.01em;text-wrap:balance;text-shadow:0 2px 24px #0008}
h1 span{color:#e8c65e}
.lede{max-width:62ch;font-size:1.12rem;color:#e6e0d3;margin:0}
.crests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
@media (max-width:720px){.crests{grid-template-columns:minmax(0,1fr)}}
.crest{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px 16px;border-radius:14px;text-decoration:none;color:#fff;background:#ffffff10;border:1px solid #ffffff22;transition:transform .2s,background .2s}
.crest:hover,.crest:focus-visible{transform:translateY(-3px);background:#ffffff1c}
.crest .glyph{grid-row:1/3;width:48px;height:56px;display:grid;place-items:center;font-size:1.6rem;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
.crest.alb .glyph{background:#b0242c}.crest.mid .glyph{background:#2459b0}.crest.hib .glyph{background:#1f7e3f}
.crest b{font:700 1.15rem var(--head);letter-spacing:.04em}
.crest small{color:#d8d2c6;font-size:.82rem}
.stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin:34px 0 0}
.stats div{display:flex;flex-direction:column-reverse}
.stats dt{font:600 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#cbbf9c}
.stats dd{margin:0;font:700 2.2rem/1 var(--head);color:#fff;font-variant-numeric:tabular-nums}

.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .inner{display:flex;gap:4px 18px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.bar a{font:600 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap}
.bar a:hover,.bar a:focus-visible{color:var(--gold)}

section{padding-block:64px;border-bottom:1px solid var(--line)}
.kicker{font:600 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
h2{font:700 clamp(1.8rem,4vw,2.6rem)/1.1 var(--head);margin:0 0 14px;letter-spacing:.02em;text-wrap:balance}
h3{font:600 1.08rem var(--body);margin:0 0 6px}
p{max-width:68ch}
.sub{color:var(--muted);margin-top:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:820px){.split,.two{grid-template-columns:minmax(0,1fr);gap:20px}}

.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 58px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.steps li::before{content:counter(s);position:absolute;left:16px;top:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .9rem var(--head);background:var(--gold);color:var(--bg)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;min-width:0;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px -14px #0006}
.card.alb{border-top:3px solid var(--alb)}.card.mid{border-top:3px solid var(--mid)}.card.hib{border-top:3px solid var(--hib)}
.card p{margin:0;color:var(--muted)}

.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:12px;border-radius:3px;transform:rotate(45deg);background:var(--gold)}

.chatlog{margin:0;background:#0f141c;color:#d7e1ea;border-radius:14px;padding:16px 18px;font:.9rem/1.55 var(--mono);border:1px solid #263142;min-height:260px;box-shadow:inset 0 0 40px #0006;min-width:0}
.chatlog figcaption{color:#8fa3b8;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.chatlog ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.chatlog .who{color:#7fd3a0}.chatlog .you{color:#e8c65e}.chatlog .foe{color:#ee8a8a}

.brackets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 24px}
@media (max-width:640px){.brackets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brackets div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.brackets b{font:700 1.1rem var(--head)}
.brackets span{font:600 .85rem var(--mono);color:var(--gold);font-variant-numeric:tabular-nums}

.exp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
@media (max-width:760px){.exp{grid-template-columns:minmax(0,1fr)}}
.exp article{position:relative;padding:22px 22px 18px;border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 12%,var(--panel)),var(--panel));border:1px solid var(--line);min-width:0}
.exp h3{font:700 1.4rem var(--head);letter-spacing:.03em}
.exp p{color:var(--muted);margin:0 0 10px}
.pill{display:inline-block;font:600 .75rem var(--mono);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:999px;padding:2px 10px;margin:0!important}
.aside{margin-top:22px;color:var(--muted)}

.search{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
input[type=search]{font:1rem var(--body);padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);flex:1 1 280px;min-width:0}
input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.count{font:.85rem var(--mono);color:var(--muted)}
.tablewrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
td:first-child{font-family:var(--mono);white-space:nowrap;color:var(--gold)}
tr:last-child td{border-bottom:0}

.road{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.road li{display:flex;gap:12px;align-items:baseline}
.s{font:600 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.s.now{background:color-mix(in srgb,var(--hib) 18%,transparent);color:var(--hib)}
.s.soon{background:color-mix(in srgb,var(--mid) 18%,transparent);color:var(--mid)}

footer{padding-block:28px;color:var(--muted);font-size:.88rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.crest,.card{transition:none}}