/* The site pages: the same night, moonlight and monospace as the game. */
:root { --night: #0B1020; --ink: #05070d; --moon: #EEF2FF; --meadow: #5ED38A; --ember: #FF9A3D; --dim: #8592ad; --line: rgba(238, 242, 255, 0.28);
  --mono: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--moon); font: 400 15px/1.6 var(--mono); }
a { color: var(--meadow); }
.cap { font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.3em; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.top .logo { line-height: 0; }
.top .logo img { height: 22px; width: auto; }
.play { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--meadow); color: var(--meadow); text-decoration: none; letter-spacing: 0.3em; font-variant: small-caps; text-transform: lowercase; background: rgba(8, 12, 26, 0.7); }
.play:hover, .play:focus-visible { background: rgba(94, 211, 138, 0.12); }
.doc { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.doc h1 { font-size: 20px; font-weight: 500; letter-spacing: 0.3em; font-variant: small-caps; text-transform: lowercase; }
.doc h2 { font-size: 15px; font-weight: 600; color: var(--ember); margin-top: 28px; }
.doc .draft { border: 1px dashed var(--line); padding: 8px 12px; color: var(--dim); font-size: 13px; }
.foot { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 12px; }
.foot a { color: var(--dim); text-decoration: none; letter-spacing: 0.16em; font-variant: small-caps; text-transform: lowercase; }
/* The landing page: key art full-bleed, the logo, one line, one button. */
.hero { position: relative; min-height: min(100svh, 920px); display: flex; align-items: flex-end; overflow: hidden; background: var(--night); }
.hero .art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero .art:not([style]) { background: radial-gradient(circle at 70% 24%, rgba(238, 242, 255, 0.9) 0 5%, rgba(160, 190, 255, 0.15) 6%, transparent 22%), linear-gradient(180deg, #0B1020 0 56%, #0d1730 56% 70%, #08140f 70%); }
.hero .glyphs { position: absolute; inset: 0; margin: 0; overflow: hidden; color: rgba(94, 211, 138, 0.35); font: 600 12px/1.25 var(--mono); white-space: pre; pointer-events: none; }
.hero .copy { position: relative; padding: 0 max(20px, env(safe-area-inset-left)) max(48px, env(safe-area-inset-bottom)); max-width: 720px; }
.hero .mark { display: block; font-size: clamp(38px, 9vw, 72px); letter-spacing: 0.45em; font-weight: 600; text-shadow: 0 0 28px rgba(160, 190, 255, 0.45); margin: 0 0 8px; }
.hero .mark img { width: min(460px, 78vw); height: auto; display: block; }
.hero p { margin: 0 0 22px; color: var(--moon); font-size: clamp(15px, 2.4vw, 19px); }
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feats div { background: var(--ink); padding: 22px 20px; }
.feats b { display: block; color: var(--ember); font-weight: 500; letter-spacing: 0.24em; font-variant: small-caps; text-transform: lowercase; margin-bottom: 4px; }
.feats span { color: var(--dim); }
/* The world, the kin, the callings, the raid, the forge (same as under the title). */
.t-site { background: #0B1020; border-top: 1px solid rgba(238, 242, 255, 0.18); }
.t-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 56px 24px; box-sizing: border-box; }
.t-row:nth-child(even) .t-pic { order: 2; }
.t-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.t-row h2, .t-band h2 { margin: 0 0 10px; font: 500 15px "DejaVu Sans Mono", Menlo, monospace; color: #FF9A3D; letter-spacing: 0.32em; font-variant: small-caps; text-transform: lowercase; }
.t-row p { margin: 0; color: #c9d1e6; max-width: 40ch; }
.t-band { max-width: 1100px; margin: 0 auto; padding: 40px 24px; box-sizing: border-box; border-top: 1px solid rgba(238, 242, 255, 0.12); }
.t-band ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.t-band b { display: block; color: #EEF2FF; font-weight: 600; letter-spacing: 0.1em; }
.t-band span { color: #8592ad; }
@media (max-width: 720px) { .t-row { grid-template-columns: 1fr; gap: 16px; padding: 36px 16px; } .t-row:nth-child(even) .t-pic { order: 0; } .t-pic img { max-width: 420px; margin: 0 auto; } }
.t-foot { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; padding: 24px 16px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(238, 242, 255, 0.12); }
.t-foot a { color: #8592ad; text-decoration: none; font-size: 12px; letter-spacing: 0.16em; font-variant: small-caps; text-transform: lowercase; padding: 6px 2px; }