/* Realm of Aetherion — whitepaper layout (loads after styles.css) */
.wp-hero { padding-block: clamp(2.4rem, 1.6rem + 4vw, 4.5rem) 1rem; }
.wp-hero .version { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.8rem; }
.wp-hero h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem); margin: 1rem 0 0; letter-spacing: 1px; }
.wp-hero p { color: var(--ink-dim); max-width: 720px; margin: 0.8rem 0 0; font-size: 1.1rem; }

.wp { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: start; padding-bottom: var(--space-section); }

.toc { position: sticky; top: 92px; font-size: 0.92rem; border-left: 1px solid var(--line); padding-left: 1.1rem; max-height: calc(100vh - 120px); overflow-y: auto; }
.toc strong { display: block; font-family: var(--font-display); color: var(--gold); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.7rem; }
.toc a { display: block; color: var(--muted); padding: 0.3rem 0; line-height: 1.35; border: 0; }
.toc a:hover { color: var(--ink); }

.wp-body { max-width: 840px; min-width: 0; }
.wp-body section { scroll-margin-top: 92px; }
.wp-body h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); color: var(--gold-bright); margin: 2.8rem 0 0.4rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.wp-body h2:first-child { margin-top: 0; }
.wp-body h3 { font-size: 1.2rem; color: var(--ink); margin: 1.7rem 0 0.3rem; }
.wp-body p { color: var(--ink-dim); margin: 0.7rem 0; }
.wp-body ul { color: var(--ink-dim); padding-left: 1.2rem; }
.wp-body li { margin: 0.35rem 0; }
.wp-body strong { color: var(--ink); }
.wp-body a { text-decoration: underline; text-underline-offset: 3px; }

.wp-body .lead { font-size: 1.15rem; color: var(--ink); }

table.wp-table { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: 0.94rem; }
.wp-table th, .wp-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line-soft); }
.wp-table th { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; color: var(--gold); }
.wp-table tr:hover td, .wp-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.table-scroll { overflow-x: auto; }

.wp-body pre { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 1.1rem 1.2rem; overflow-x: auto; margin: 1rem 0; }
.wp-body code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.88rem; color: var(--gold-bright); }
.wp-body pre code { color: var(--ink-dim); }
.wp-body p code, .wp-body li code, .wp-body td code { background: rgba(216,178,74,0.1); padding: 0.05rem 0.35rem; border-radius: 5px; }

.callout { border-left: 3px solid var(--gold); background: rgba(216,178,74,0.06); padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; margin: 1.2rem 0; }
.callout.warn { border-left-color: var(--ember); background: rgba(255,107,61,0.07); }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 2.5rem; color: var(--ink-dim); }

@media (max-width: 880px) {
  .wp { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.2rem; margin-bottom: 1.5rem; columns: 2; }
}