/* Holding pages for Wyrd Engine project domains. Self-hosted fonts (SIL OFL; see fonts/LICENSES.md). Same tokens as wyrdengine.com. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/fonts/fraunces-latin-9e509503.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-f6667783.woff2) format('woff2'); }
@font-face { font-family: 'Noto Sans Runic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/noto-sans-runic-runic-ed20640a.woff2) format('woff2'); unicode-range: U+16A0-16F8; }
:root {
  --bg: #141311; --fg: #efe8db; --fg-soft: #b9b0a2; --rule: #2d2a25; --accent: #b08d57; --accent-ink: #141311; --focus: #d8b77a;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --runic: "Noto Sans Runic", "Segoe UI Symbol", "Apple Symbols", Symbola, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #f4efe6; --fg: #1b1916; --fg-soft: #5e574d; --rule: #d9d0c1; --accent: #7a5c30; --accent-ink: #f4efe6; --focus: #7a5c30; color-scheme: light; } }
:root[data-theme="light"] { --bg: #f4efe6; --fg: #1b1916; --fg-soft: #5e574d; --rule: #d9d0c1; --accent: #7a5c30; --accent-ink: #f4efe6; --focus: #7a5c30; color-scheme: light; }
:root[data-theme="dark"] { --bg: #141311; --fg: #efe8db; --fg-soft: #b9b0a2; --rule: #2d2a25; --accent: #b08d57; --accent-ink: #141311; --focus: #d8b77a; color-scheme: dark; }
* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.6;
  padding-inline: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); padding-block: 0; }
.page { width: 100%; max-width: 40rem; margin-inline: auto; flex: 1; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4rem, 16vh, 9rem) 3rem; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.status { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 2.2rem + 4vw, 5rem); line-height: 1; letter-spacing: -.015em; margin: 0 0 1.25rem; }
.gloss { font-family: var(--display); font-weight: 300; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.45; margin: 0 0 2rem; max-width: 34ch; }
.gloss i { font-style: italic; }
.gloss .lang { display: block; font-family: var(--body); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: .35rem; }
.from { border-top: 1px solid var(--rule); padding-top: 1.25rem; margin: 0; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; color: var(--fg-soft); }
.from .mark { font-family: var(--runic); color: var(--accent); font-size: 1.3rem; line-height: 1; }
.from a { color: var(--fg); display: inline-block; padding-block: .6rem; }
footer { padding-block: 1.5rem 2.5rem; font-size: .8rem; color: var(--fg-soft); }