/* ===== Tir Anferth — grey sea, dawn, marble ===== */

@font-face {
  font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/young-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2");
}

:root {
  --sea-950: #080e15;
  --sea-900: #0d1721;
  --sea-850: #101d2a;
  --sea-800: #15263a;
  --sea-700: #1f3650;
  --sea-600: #2d4a69;
  --marble: #ece6d8;
  --marble-dim: #bdb8ab;
  --marble-faint: #8b9099;
  --ink: #0d1721;
  --dawn: #f2a65a;
  --dawn-hot: #ffd08f;
  --dawn-deep: #b86a3a;

  --albion: #55a362;   --albion-2: #d9b95e;
  --northumbria: #cf4b44; --northumbria-2: #c4955a;
  --mercia: #4f97cf;   --mercia-2: #b4c3d1;
  --wessex: #9468c4;   --wessex-2: #45aa8c;

  /* legacy names used by the inner pages */
  --bg: var(--sea-900); --bg2: var(--sea-850); --panel: var(--sea-800); --panel2: var(--sea-700);
  --parchment: var(--marble); --parchment-dim: var(--marble-dim);
  --gold: var(--dawn); --gold-bright: var(--dawn-hot); --gold-dim: var(--dawn-deep);
  --fg: #d5d9de; --fg2: #9fabb8; --fg3: #6c7b8b;
  --line: #22374d; --line2: #2f4a66;
  --northumbria-bronze: var(--northumbria-2); --albion-gold: var(--albion-2);
  --mercia-silver: var(--mercia-2); --wessex-emerald: var(--wessex-2);

  --f-display: "Young Serif", Georgia, "Times New Roman", serif;
  --f-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  background: var(--sea-900); color: var(--fg);
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: var(--dawn); text-decoration: none; transition: color .2s; }
a:hover { color: var(--dawn-hot); }
:focus-visible { outline: 2px solid var(--dawn-hot); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; color: var(--marble); line-height: 1.12; letter-spacing: -.005em; }
img, svg { max-width: 100%; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--dawn); color: var(--ink); padding: 8px 14px; z-index: 300; border-radius: var(--r); }
.skip:focus { left: 8px; }

/* ===== Navigation ===== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: linear-gradient(180deg, rgba(8,14,21,.78), rgba(8,14,21,0));
  transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(10,18,27,.88); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.nav-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.nav-brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 21px; color: var(--marble); letter-spacing: .01em; }
.nav-brand:hover { color: var(--dawn-hot); }
.nav-brand svg { width: 30px; height: 30px; flex: none; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--marble-dim); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--marble); }
.nav-links a.active { color: var(--marble); border-bottom-color: var(--dawn); }
.nav-links a.nav-cta { color: var(--ink); background: var(--dawn); padding: 8px 16px; border-radius: 999px; border: 0; font-weight: 600; }
.nav-links a.nav-cta:hover { background: var(--dawn-hot); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line2); color: var(--marble); font-size: 18px; width: 42px; height: 42px; border-radius: var(--r); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10,18,27,.97); border-bottom: 1px solid var(--line); padding: 8px 24px 18px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-links a.nav-cta { margin-top: 12px; text-align: center; }
}

/* ===== Hero: the sky is scroll-driven (see hero.js) ===== */
.hero { position: relative; height: 230vh; background: var(--sea-950); }
.hero-stage { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,10,16,.62) 0%, rgba(6,10,16,.18) 45%, rgba(6,10,16,0) 70%),
              linear-gradient(0deg, rgba(8,14,21,.85) 0%, rgba(8,14,21,0) 34%); }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px 15vh; max-width: 1240px; margin: 0 auto; }
.hero-title { font-size: clamp(60px, 11.5vw, 168px); line-height: .9; color: var(--marble); text-shadow: 0 2px 40px rgba(0,0,0,.45); letter-spacing: -.02em; }
.hero-title span { display: block; }
.hero-title span + span { margin-left: .55em; color: var(--dawn-hot); }
.hero-sub { margin-top: 22px; max-width: 34ch; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.38; color: var(--marble); text-shadow: 0 1px 18px rgba(0,0,0,.6); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; font: 600 16px/1 var(--f-body); border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .2s, border-color .2s, color .2s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--dawn); color: var(--ink); }
.btn-primary:hover { background: var(--dawn-hot); color: var(--ink); }
.btn-ghost { background: rgba(8,14,21,.35); color: var(--marble); border-color: rgba(236,230,216,.4); backdrop-filter: blur(4px); }
.btn-ghost:hover { border-color: var(--dawn-hot); color: var(--dawn-hot); }
.hero-facts { position: absolute; right: 24px; bottom: 15vh; display: grid; gap: 14px; text-align: right; }
.hero-facts div { line-height: 1.15; }
.hero-facts dt { font-size: 13px; color: var(--marble-dim); }
.hero-facts dd { font-family: var(--f-display); font-size: 30px; color: var(--marble); }
@media (max-width: 900px) {
  .hero-facts { position: static; grid-template-columns: repeat(4, auto); justify-content: start; gap: 22px; text-align: left; margin-top: 30px; }
  .hero-facts dd { font-size: 22px; }
  .hero-copy { padding-bottom: 8vh; }
}
@media (max-width: 520px) { .hero-facts { grid-template-columns: repeat(2, auto); } }

/* ===== Sections ===== */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.band { padding: 112px 0; position: relative; }
.band-alt { background: var(--sea-850); }
.band h2 { font-size: clamp(34px, 4.6vw, 58px); max-width: 16ch; }
.lead { margin-top: 20px; max-width: 54ch; font-size: 19px; color: var(--fg); }

/* arrival */
.arrival { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .arrival { grid-template-columns: 1fr; gap: 40px; } }
.rules-line { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; }
.rules-line div { font-size: 15px; color: var(--fg2); }
.rules-line b { color: var(--marble); font-weight: 600; }

.chat { background: #0a121b; border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #101c29; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--marble-faint); }
.chat-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--sea-600); }
.chat-bar span { margin-left: 8px; }
.chat-log { padding: 18px 18px 22px; min-height: 330px; font: 14.5px/1.5 var(--f-mono); }
.chat-line { margin: 0 0 12px; color: #c8d0d8; opacity: 1; }
.chat-line .who { color: var(--dawn); }
.chat-line.herald .who { color: var(--albion-2); }
.chat-line.sys { color: #7e8d9b; }
.chat-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--dawn-hot); vertical-align: -2px; margin-left: 2px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* kingdoms: four panels, one open */
.realms-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.panels { display: flex; gap: 12px; height: 520px; }
.panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: var(--sea-800); cursor: pointer; text-align: left; color: inherit; font: inherit; padding: 0; transition: flex-grow .55s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.panel.open { flex-grow: 4.2; cursor: default; }
.panel::before { content: ""; position: absolute; inset: 0; background: var(--tint); opacity: .22; transition: opacity .4s; }
.panel.open::before { opacity: .34; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,21,0) 30%, rgba(8,14,21,.88) 100%); }
.panel:hover { border-color: var(--accent); }
.panel .sigil { position: absolute; left: 50%; top: 34%; width: 120px; height: 120px; transform: translate(-50%, -50%); color: var(--accent); opacity: .9; transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .3s; z-index: 1; }
.panel.open .sigil { left: 32px; top: 32px; transform: none; width: 84px; height: 84px; }
.panel-name { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 24px 28px; }
.panel-name h3 { font-size: 30px; color: var(--marble); white-space: nowrap; }
.panel .motto { display: block; margin-top: 4px; font-style: italic; color: var(--marble-dim); font-size: 16px; }
.panel-body { max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .5s ease, opacity .4s ease .1s, visibility 0s .5s; }
.panel.open .panel-body { visibility: visible; transition-delay: 0s, .1s, 0s; }
.pbtn { all: unset; cursor: pointer; font: inherit; color: inherit; }
.pbtn:focus-visible { outline: 2px solid var(--dawn-hot); outline-offset: 6px; border-radius: 4px; }
.panel-name h3 { font-weight: 400; }
.panel.open .panel-body { max-height: 320px; opacity: 1; }
.panel-body p { margin-top: 14px; max-width: 46ch; color: #dde2e7; font-size: 17px; }
.panel-body .tags { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.panel-body .tags span { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: rgba(8,14,21,.55); border: 1px solid var(--accent); color: var(--marble); }
.panel-body a { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--accent); }
.panel:not(.open) .panel-name { writing-mode: vertical-rl; transform: rotate(180deg); top: 0; padding: 26px 20px; display: flex; align-items: center; }
.panel:not(.open) .motto { display: none; }
.panel:not(.open) h3 { font-size: 26px; }
.p-albion { --accent: var(--albion-2); --tint: linear-gradient(160deg, #2e6a3c, #d9b95e 140%); }
.p-northumbria { --accent: #e5736c; --tint: linear-gradient(160deg, #8f2a27, #c4955a 150%); }
.p-mercia { --accent: #7bb6e0; --tint: linear-gradient(160deg, #1f5f90, #b4c3d1 150%); }
.p-wessex { --accent: #b793e0; --tint: linear-gradient(160deg, #5f3a8c, #45aa8c 150%); }
@media (max-width: 860px) {
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; min-height: 84px; }
  .panel.open { min-height: 440px; }
  .panel:not(.open) .panel-name { writing-mode: horizontal-tb; transform: none; padding: 26px 28px; position: relative; }
  .panel:not(.open) .sigil { left: auto; right: 24px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); }
  .panel.open .panel-name { position: absolute; }
}

/* timeline: a real sequence */
.steps { list-style: none; margin-top: 54px; position: relative; display: grid; gap: 0; counter-reset: s; max-width: 860px; }
.steps::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--dawn), var(--sea-600)); }
.steps li { position: relative; padding: 0 0 38px 74px; counter-increment: s; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-900); border: 2px solid var(--dawn); color: var(--dawn-hot); font: 400 20px var(--f-display); }
.band-alt .steps li::before { background: var(--sea-850); }
.steps h3 { font-size: 24px; margin-bottom: 6px; padding-top: 6px; }
.steps p { color: var(--fg); max-width: 56ch; }

/* the road ahead: steps beside a pull quote */
.steps-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; }
.steps-grid .steps { margin-top: 54px; }
.pull { position: sticky; top: 120px; margin-top: 54px; padding: 34px 0 0 34px; border-left: 3px solid var(--dawn); font: 400 clamp(26px, 3vw, 38px)/1.2 var(--f-display); color: var(--marble); }
.pull footer { margin-top: 18px; font: 500 15px var(--f-body); color: var(--fg2); }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; gap: 20px; } .pull { position: static; } }

/* numbers: bars on a log scale */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 54px; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
.cmp-group h3 { font-size: 24px; margin-bottom: 4px; }
.cmp-group > p { font-size: 15px; color: var(--fg2); margin-bottom: 22px; }
.bar { display: grid; grid-template-columns: 150px 1fr 54px; gap: 14px; align-items: center; margin: 12px 0; font-size: 15px; }
.bar .lbl { color: var(--marble-dim); }
.bar .track { display: block; height: 16px; border-radius: 8px; background: var(--sea-800); overflow: hidden; }
.bar .fill { display: block; height: 100%; width: var(--w); border-radius: 8px; background: var(--sea-600); transform-origin: left; }
.bar.us .fill { background: linear-gradient(90deg, var(--dawn-deep), var(--dawn-hot)); }
.bar.us .lbl, .bar.us .val { color: var(--dawn-hot); font-weight: 700; }
.bar .val { font-family: var(--f-display); font-size: 19px; text-align: right; color: var(--marble); }
.js .bar .fill { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .compare.in .fill { transform: scaleX(1); }
@media (max-width: 520px) { .bar { grid-template-columns: 110px 1fr 46px; gap: 10px; } }
.fineprint { margin-top: 28px; font-size: 14px; color: var(--fg3); }

/* connect */
.connect { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .connect { grid-template-columns: 1fr; gap: 36px; } }
.ticket { background: var(--marble); color: var(--ink); border-radius: 14px; padding: 34px 34px 30px; position: relative; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.ticket h3 { color: var(--ink); font-size: 26px; }
.ticket .addr { margin: 18px 0 6px; font: 700 clamp(26px, 4.2vw, 40px)/1.1 var(--f-body); letter-spacing: -.01em; word-break: break-all; }
.ticket .addr small { font-weight: 500; font-size: .5em; color: #4a5766; }
.ticket p { color: #2b3a4a; font-size: 15px; }
.ticket .btn-primary { background: var(--ink); color: var(--marble); margin-top: 18px; }
.ticket .btn-primary:hover { background: var(--sea-700); color: var(--dawn-hot); }
.copied { margin-left: 12px; font-size: 14px; font-weight: 600; color: #2a7a45; opacity: 0; transition: opacity .2s; }
.copied.on { opacity: 1; }
.howto { counter-reset: h; list-style: none; display: grid; gap: 16px; }
.howto li { counter-increment: h; padding-left: 46px; position: relative; color: var(--fg); }
.howto li::before { content: counter(h); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--dawn); color: var(--dawn-hot); display: grid; place-items: center; font: 400 16px var(--f-display); }
.howto b { color: var(--marble); }
.tools { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.tools a { padding: 10px 18px; border: 1px solid var(--line2); border-radius: 999px; color: var(--marble); font-weight: 600; font-size: 15px; }
.tools a:hover { border-color: var(--dawn); color: var(--dawn-hot); }

/* ===== Inner pages ===== */
.section { max-width: 1200px; margin: 0 auto; padding: 80px 24px; }
.section-title { font-size: clamp(32px, 4.4vw, 54px); margin-bottom: 14px; text-wrap: balance; }
.section-subtitle { color: var(--fg2); font-size: 19px; max-width: 62ch; margin-bottom: 18px; }
.divider { width: 84px; height: 3px; margin: 22px 0 40px; background: linear-gradient(90deg, var(--dawn), transparent); border-radius: 2px; }
.page-head { padding: 140px 24px 10px; max-width: 1200px; margin: 0 auto; position: relative; }

.content-page { max-width: 820px; margin: 0 auto; padding: 130px 24px 80px; }
.content-page h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 10px; }
.content-page h2 { font-size: 30px; }
.content-page .page-sub { color: var(--fg2); font-size: 19px; max-width: 58ch; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 28px; }
.stat-card { display: block; background: var(--sea-800); border: 1px solid var(--line); padding: 24px; border-radius: 10px; transition: transform .2s, border-color .2s; }
.stat-card:hover { transform: translateY(-3px); border-color: var(--dawn-deep); }
.stat-card .stat-value { font-family: var(--f-display); font-size: 26px; color: var(--marble); }
.stat-card .stat-label { font-size: 14px; color: var(--fg2); margin-top: 4px; }

.info-card { background: var(--sea-800); border: 1px solid var(--line); padding: 30px; border-radius: 12px; margin-bottom: 24px; }
.info-card h3 { font-size: 24px; margin-bottom: 16px; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.info-table th { font-size: 13px; color: var(--fg3); font-weight: 600; }
.info-table td.setting { font-family: var(--f-display); font-size: 19px; color: var(--dawn-hot); white-space: nowrap; }
.info-table td:last-child { color: var(--fg2); font-size: 15px; }
.info-table tr:hover td { background: rgba(242,166,90,.05); }
@media (max-width: 640px) { .info-table td:last-child, .info-table th:last-child { display: none; } }

.connection-box { background: var(--marble); color: var(--ink); border-radius: 12px; padding: 30px; margin: 24px 0; }
.connection-box .label { font-size: 14px; font-weight: 600; color: #4a5766; }
.connection-box .ip { font: 700 clamp(26px, 5vw, 38px)/1.15 var(--f-body); margin: 2px 0 12px; }

.rule-item { margin: 0 0 26px; padding-left: 20px; border-left: 3px solid var(--dawn-deep); }
.rule-item h3 { font-size: 21px; margin-bottom: 6px; color: var(--marble); }
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item summary { font-family: var(--f-display); font-size: 21px; color: var(--marble); cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; font: 400 26px var(--f-body); color: var(--dawn); width: 18px; transition: transform .2s; }
.faq-item[open] summary::before { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 12px 0 0 32px; max-width: 64ch; }
.faq-item .faq-answer p + p, .faq-item .faq-answer ul { margin-top: 10px; }
.placeholder-box { background: var(--sea-800); border: 1px dashed var(--line2); padding: 40px 30px; border-radius: 12px; margin: 22px 0; }
.placeholder-box .ph-icon { font-size: 36px; margin-bottom: 10px; }
.placeholder-box h3 { font-size: 24px; margin-bottom: 6px; }
.placeholder-box p { color: var(--fg2); max-width: 52ch; }

/* realms page */
.realm-section { border-top: 1px solid var(--line); padding: 72px 24px; position: relative; --k: var(--dawn); }
.realm-albion { --k: var(--albion-2); } .realm-northumbria { --k: #e5736c; } .realm-mercia { --k: #7bb6e0; } .realm-wessex { --k: #b793e0; }
.realm-section::before { content: ""; position: absolute; left: 0; top: 72px; width: 4px; height: 86px; background: var(--k); border-radius: 0 3px 3px 0; }
.realm-header { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.realm-header .realm-crest { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--k); color: var(--k); display: grid; place-items: center; font: 400 24px var(--f-display); }
.realm-header h2 { font-size: clamp(34px, 4.4vw, 52px); color: var(--k); }
.realm-header .realm-motto { margin-left: auto; font-style: italic; color: var(--marble-dim); font-size: 18px; }
.realm-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; }
@media (max-width: 860px) { .realm-body { grid-template-columns: 1fr; } .realm-header .realm-motto { margin-left: 0; width: 100%; } }
.realm-description p { margin-bottom: 18px; max-width: 62ch; font-size: 18px; line-height: 1.7; }
.realm-sidebar { background: var(--sea-800); border: 1px solid var(--line); padding: 24px; border-radius: 12px; align-self: start; }
.realm-sidebar h4 { font: 700 15px var(--f-body); color: var(--marble); margin-bottom: 10px; }
.realm-names { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.realm-name { font-size: 14px; padding: 3px 11px; background: var(--sea-900); border: 1px solid var(--line); border-radius: 999px; color: var(--fg2); }
.adjectives { display: flex; gap: 8px; flex-wrap: wrap; }
.adjective { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--k, var(--line2)); color: var(--marble); }

/* comparison page */
.cmp-wrap { max-width: 1160px; margin: 0 auto; padding: 130px 24px 70px; }
.cmp-eyebrow { font-size: 14px; color: var(--fg3); }
.cmp-wrap h1 { font-size: clamp(32px, 4.6vw, 56px); margin: 8px 0 14px; text-wrap: balance; max-width: 22ch; }
.cmp-lede { color: var(--fg); max-width: 68ch; margin-bottom: 20px; font-size: 18px; }
.cmp-verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.cmp-tile { background: var(--sea-800); border: 1px solid var(--line); padding: 16px 18px; border-radius: 10px; min-width: 0; }
.cmp-tile .k { font-size: 13px; color: var(--fg3); }
.cmp-tile .v { font: 400 28px/1.1 var(--f-display); margin: 4px 0 2px; color: var(--marble); }
.cmp-tile .s { color: var(--fg2); font-size: 14px; }
.cmp-tile.flag { border-left: 4px solid #d95a52; } .cmp-tile.ok { border-left: 4px solid #3fae6a; }
.cmp-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0; font-size: 14px; color: var(--fg2); }
.cmp-controls label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.cmp-controls select { font: inherit; color: var(--fg); background: var(--sea-800); border: 1px solid var(--line2); padding: 4px 8px; border-radius: 6px; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; font-size: 13px; color: var(--fg2); margin-bottom: 10px; align-items: center; }
.cmp-ramp { display: inline-flex; vertical-align: middle; margin: 0 6px; } .cmp-ramp i { display: inline-block; width: 18px; height: 12px; }
.cmp-scrollx { overflow-x: auto; border: 1px solid var(--line); background: var(--sea-800); border-radius: 10px; }
table.hm { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 900px; width: 100%; }
table.hm th { position: sticky; top: 0; background: var(--sea-800); z-index: 2; font-weight: 600; text-align: left; padding: 9px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--fg2); white-space: nowrap; }
table.hm th.num { text-align: center; }
table.hm td { padding: 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.hm td.name { padding: 6px 10px; white-space: nowrap; font-weight: 600; position: sticky; left: 0; background: var(--sea-800); z-index: 1; max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
table.hm td.name small { display: block; font-weight: 400; color: var(--fg3); font-size: 11px; }
table.hm td.cell { text-align: center; font-variant-numeric: tabular-nums; font-size: 12.5px; min-width: 72px; }
.cell div { margin: 2px; padding: 7px 4px; border-radius: 3px; color: var(--fg); cursor: default; }
.cell div.dk { color: #fff; } .cell div.na { color: var(--fg3); background: transparent; }
tr.hl td { background: rgba(242,166,90,.08); } tr.hl td.name { color: var(--dawn-hot); background: #1b2a36; }
.cmp-st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cmp-row2 { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 20px; align-items: start; margin-top: 36px; }
@media (max-width: 820px) { .cmp-row2 { grid-template-columns: 1fr; } }
.cmp-chart { background: var(--sea-800); border: 1px solid var(--line); padding: 12px 12px 6px; border-radius: 10px; }
svg text { font-family: var(--f-body); font-size: 11px; fill: var(--fg2); }
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .dot { fill: #4f97cf; fill-opacity: .75; stroke: var(--sea-800); stroke-width: 2; }
svg .dot.dead { fill: var(--fg3); fill-opacity: .55; } svg .dot.mark { fill: var(--dawn); fill-opacity: 1; } svg .lbl { fill: var(--fg); }
.cmp-rec { background: var(--sea-800); border: 1px solid var(--line); padding: 18px 20px; border-radius: 10px; }
.cmp-rec h3 { font-size: 21px; margin: 0 0 10px; }
.cmp-rec table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cmp-rec td, .cmp-rec th { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp-rec th { color: var(--fg3); font-weight: 600; font-size: 12px; }
.cmp-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line2); color: var(--fg2); }
.cmp-pill.c { border-color: #d95a52; color: #ef8a83; } .cmp-pill.g { border-color: #3fae6a; color: #6fd196; }
ul.cmp-notes { padding-left: 20px; color: var(--fg); max-width: 72ch; } ul.cmp-notes li { margin: 8px 0; } ul.cmp-notes b { color: var(--marble); }
.cmp-tip { position: fixed; pointer-events: none; background: var(--marble); color: var(--ink); font-size: 12px; padding: 6px 9px; border-radius: 6px; max-width: 320px; z-index: 200; display: none; line-height: 1.35; }
.cmp-src { font-size: 13px; color: var(--fg3); margin-top: 28px; } .cmp-src a { color: var(--fg2); }
.cmp-wrap h2 { font-size: 28px; margin: 44px 0 12px; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) { .cell div { transition: transform .08s; } .cell div:hover { transform: scale(1.06); } }

/* ===== Footer ===== */
.footer { background: var(--sea-950); border-top: 1px solid var(--line); padding: 64px 24px 26px; margin-top: 0; }
.footer-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 800px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { color: var(--fg2); font-size: 15px; max-width: 34ch; margin-top: 12px; }
.footer-col h4 { font: 700 14px var(--f-body); color: var(--marble); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--fg2); font-size: 15px; margin-bottom: 8px; }
.footer-col a:hover { color: var(--dawn-hot); }
.footer-bottom { max-width: 1240px; margin: 40px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--line); color: var(--fg3); font-size: 14px; }

.center { text-align: center; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel, .panel-body, .panel .sigil { transition: none; }
  .js .bar .fill { transition: none; }
  .chat-caret { animation: none; }
}


/* ===== T7-3 home page set pieces (assets/js/fx.js). Each block is one toggle. ===== */
.fx-rays, .fx-mist, .fx-vig, .fx-grain, .fx-bar, .fx-flare, .fx-star, .fx-birds, .fx-embers { position: absolute; pointer-events: none; }

/* rays: conic beams from the sun, strength = --rays (scroll) */
.fx-rays { inset: 0; overflow: hidden; opacity: calc(var(--rays, .5) * .6);
  -webkit-mask-image: radial-gradient(ellipse 150% 160% at var(--sx, 70%) var(--sy, 40%), #000 0%, rgba(0,0,0,.6) 55%, transparent 96%);
  mask-image: radial-gradient(ellipse 150% 160% at var(--sx, 70%) var(--sy, 40%), #000 0%, rgba(0,0,0,.6) 55%, transparent 96%); }
.fx-ray { position: absolute; left: var(--sx, 70%); top: var(--sy, 40%); height: 210vh; margin-left: -3vw; transform-origin: 50% 0;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(255,200,140,0), rgba(255,214,160,.5) 50%, rgba(255,200,140,0)); }

/* mist: three blurred banks at the waterline, drifting, parallax on scroll */
.fx-mist { left: -30%; width: 160%; height: 20%; opacity: .5; /* soft by gradient, no blur filter: cheap on phones */
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(200,212,230,.34), rgba(200,212,230,0) 100%); }
.fx-m1 { top: 54%; margin-top: calc(var(--p, 0) * -34px); animation: fxDrift 70s ease-in-out infinite alternate; }
.fx-m2 { top: 60%; margin-top: calc(var(--p, 0) * -64px); opacity: .42; animation: fxDrift 52s ease-in-out infinite alternate-reverse; }
.fx-m3 { top: 66%; margin-top: calc(var(--p, 0) * -96px); opacity: .55; height: 24%; animation: fxDrift 38s ease-in-out infinite alternate; }
@keyframes fxDrift { from { transform: translateX(-9%); } to { transform: translateX(9%); } }

/* embers: canvas over the lower 40 percent of the hero */
.fx-embers { left: 0; bottom: 0; width: 100%; height: 40%; }

/* grain and vignette: noise tile with soft jitter, dark corners */
.fx-vig { inset: 0; background: radial-gradient(ellipse 120% 95% at 50% 46%, rgba(0,0,0,0) 55%, rgba(4,8,14,.62) 100%); }
.fx-grain { inset: -40px; opacity: .55; animation: fxGrain 1s steps(6) infinite; background-size: 96px 96px; } /* tile is drawn by fx.js */
@keyframes fxGrain { 0% { transform: translate(0,0); } 20% { transform: translate(-14px,9px); } 40% { transform: translate(11px,-12px); } 60% { transform: translate(-8px,-6px); } 80% { transform: translate(13px,12px); } 100% { transform: translate(0,0); } }

/* cinema: letterbox bars retract with scroll (--bar 1 to 0), title tracks out, a flare sweeps once */
.fx-bar { left: 0; right: 0; height: 9vh; background: #04070b; z-index: 6; }
.fx-bar-t { top: 0; transform: translateY(calc((1 - var(--bar, 1)) * -100%)); }
.fx-bar-b { bottom: 0; transform: translateY(calc((1 - var(--bar, 1)) * 100%)); }
.fxon-cinema .hero-title { animation: fxTrack 2.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fxTrack { from { letter-spacing: .14em; opacity: 0; filter: blur(8px); } 60% { opacity: 1; } to { letter-spacing: -.02em; opacity: 1; filter: blur(0); } }
.fx-flare { left: 0; top: 63%; width: 46%; height: 3px; z-index: 4; opacity: 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,228,180,.9), rgba(255,255,255,1), rgba(255,228,180,.9), transparent);
  box-shadow: 0 0 24px 6px rgba(255,200,130,.5); mix-blend-mode: screen; animation: fxFlare 2.2s ease-out 1.1s 1 both; }
@keyframes fxFlare { 0% { opacity: 0; transform: translateX(-60%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%); } }

/* sky: one shooting star, one flight of birds */
.fx-star { left: 18%; top: 12%; width: 150px; height: 2px; opacity: 0; transform: rotate(24deg); transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); box-shadow: 0 0 10px 1px rgba(200,220,255,.5);
  animation: fxStar 1.3s ease-in 3.2s 1 both; }
@keyframes fxStar { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 1; } 100% { opacity: 0; translate: 300px 134px; } }
.fx-birds { left: 0; top: 17%; width: 200px; height: 60px; color: #0a1018; opacity: .8; animation: fxFly 26s linear 6s 1 both; }
.fx-bird { position: absolute; display: block; animation: fxFlap .9s ease-in-out infinite alternate; }
@keyframes fxFly { from { transform: translateX(-240px) translateY(10px); } to { transform: translateX(110vw) translateY(-40px); } }
@keyframes fxFlap { from { scale: 1 1; } to { scale: 1 .55; } }

/* reveal: heading wipe, staggered rise (--d set per sibling) */
.fxon-reveal .fx-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.2,.7,.2,1); }
.fxon-reveal .fx-wipe.fx-in { clip-path: inset(0 -2% 0 0); }
.fxon-reveal .fx-rise { opacity: 0; translate: 0 28px; transition: opacity .8s ease var(--d, 0ms), translate .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.fxon-reveal .fx-rise.fx-in { opacity: 1; translate: 0 0; }

/* sigil: glow and colour wash in the panel accent on open */
.fxon-sigil .panel.open .sigil { filter: drop-shadow(0 0 14px var(--accent)) drop-shadow(0 0 34px var(--accent)); animation: fxPulse 3.4s ease-in-out infinite alternate; }
.fxon-sigil .panel.open { box-shadow: inset 0 0 140px -34px var(--accent), 0 0 40px -18px var(--accent); }
@keyframes fxPulse { from { opacity: .78; } to { opacity: 1; } }

/* reduced motion: no loops, bars stay open, still frame keeps rays, mist, grain and glow */
.fxon-still .fx-grain, .fxon-still .fx-rays, .fxon-still .fx-mist { animation: none; }
.fxon-still .fx-bar, .fxon-still .fx-flare { display: none; }
.fxon-still .fxon-sigil .panel.open .sigil { animation: none; }
@media (max-width: 700px) { .fx-bar { height: 5vh; } .fx-grain { opacity: .4; } .fx-ray { height: 95vh; } }

/* nav: keep everything on one line (Control 20 Oct) */
.nav-brand, .nav-links a { white-space: nowrap; }
.nav-links { gap: clamp(12px, 1.4vw, 26px); }
@media (max-width: 1120px) and (min-width: 861px) { .nav-links { gap: 10px; } .nav-links a { font-size: 13px; } .nav-brand { font-size: 18px; } .nav-links a.nav-cta { padding: 6px 12px; } }
/* nav: breathing room between brand and links (Control 20 Oct) */
.nav-inner { gap: 28px; }
.nav-brand { flex: none; }
@media (max-width: 1240px) and (min-width: 861px) { .nav-inner { gap: 18px; padding-left: 16px; padding-right: 16px; } .nav-brand { font-size: 19px; gap: 8px; } .nav-links { gap: 12px; } .nav-links a { font-size: 14px; } }
@media (max-width: 1040px) and (min-width: 861px) { .nav-inner { gap: 12px; } .nav-brand { font-size: 17px; } .nav-brand svg { width: 24px; height: 24px; } .nav-links { gap: 9px; } .nav-links a { font-size: 12.5px; } .nav-links a.nav-cta { padding: 5px 10px; } }

/* Open rollout banner (home) */
.open-banner { position: absolute; top: 88px; left: 0; right: 0; z-index: 6; background: rgba(8,14,21,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid rgba(242,166,90,.55); border-bottom: 1px solid rgba(242,166,90,.55); }
.open-banner-in { max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.open-banner h2 { margin: 0; font-size: clamp(1.25rem, 2.8vw, 1.8rem); line-height: 1.2; color: var(--marble); }
.open-banner p { margin: 4px 0 0; max-width: 64ch; color: var(--marble); opacity: .92; font-size: 16px; line-height: 1.4; }
.open-banner-links { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px), (max-height: 640px) { .open-banner p { display: none; } .open-banner-in { padding: 10px 16px; } }
@media (max-width: 640px) { .open-banner-links { gap: 8px; } .open-banner-links .btn { padding: 8px 14px; font-size: 14px; } }
.open-banner ~ .hero-copy { padding-bottom: 10vh; }