/* ZeroGrav DM: the credits page, in the front page's colours and type. */

@font-face { font-family: "IM Fell English"; src: url(../assets/fonts/IMFellEnglish-400-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "IM Fell English SC"; src: url(../assets/fonts/IMFellEnglishSC-400-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya"; font-style: italic; src: url(../assets/fonts/Alegreya-400i-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; src: url(../assets/fonts/AlegreyaSans-400-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; src: url(../assets/fonts/AlegreyaSans-500-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Shadows Into Light"; src: url(../assets/fonts/ShadowsIntoLight-400-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Star Jedi"; src: url(../assets/fonts/StarJedi.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Aurebesh Bold"; src: url(../assets/fonts/AurebeshBold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../assets/fonts/IBMPlexMono-400-latin.woff2) format("woff2"); font-display: swap; }

:root {
  --sky-top: #04060c;
  --sky-bot: #080b17;
  --cream: #efe2c4;
  --ink-2: #a79f89;
  --ink-3: #676253;
  --brass-hi: #e7c27a;
  --line: rgba(239, 226, 196, .14);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--sky-bot); }
body { margin: 0; min-height: 100vh; color: var(--ink-2); font: 400 17px/1.6 "Alegreya Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* the sky and the two lights stay put while the page scrolls */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at 8% 18%, rgba(217, 166, 75, .12), transparent 70%),
    radial-gradient(56vmax 42vmax at 96% 78%, rgba(111, 184, 255, .1), transparent 70%),
    linear-gradient(180deg, var(--sky-top), var(--sky-bot)); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.page { max-width: 44rem; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top, 0px)) 20px calc(56px + env(safe-area-inset-bottom, 0px)); }
a { color: var(--brass-hi); text-underline-offset: 2px; text-decoration-color: rgba(231, 194, 122, .45); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 2px; }

.mark { display: inline-block; font-family: "IM Fell English", Georgia, serif; font-size: 22px; line-height: 1; color: var(--cream); text-decoration: none; }
.mark small { font-family: "IM Fell English SC", Georgia, serif; font-size: .62em; margin-left: .18em; color: var(--brass-hi); letter-spacing: .02em; }
h1 { margin: 36px 0 6px; font: 400 clamp(40px, 7vw, 56px)/1.05 "IM Fell English", Georgia, serif; color: var(--cream); }
.lede { margin: 0; font: italic 400 19px/1.5 "Alegreya", Georgia, serif; }

section { margin-top: 44px; }
h2 { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 400 22px/1.2 "IM Fell English SC", Georgia, serif; letter-spacing: .02em; color: var(--brass-hi); }
dl { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 14px 28px; margin: 0; }
dt { margin: 0; font-weight: 500; font-size: 17px; color: var(--cream); }
dd { margin: 0; }
section p { margin: 0 0 12px; }

/* each face's name set in itself, where that stays readable */
dt.fell { font: 400 20px/1.3 "IM Fell English", Georgia, serif; }
dt.alegreya { font: italic 400 19px/1.3 "Alegreya", Georgia, serif; }
dt.alegreya span { font-style: normal; }
dt.shadows { font: 400 21px/1.3 "Shadows Into Light", cursive; }
dt.plex { font: 400 16px/1.5 "IBM Plex Mono", ui-monospace, monospace; }
.specimen { display: block; margin-top: 2px; font-weight: 400; color: #93d5ff; }
.specimen.jedi { font: 400 17px/1.3 "Star Jedi", sans-serif; color: #d5ebff; }
.specimen.aurebesh { font: 400 14px/1.5 "Aurebesh Bold", sans-serif; }

.back { margin-top: 48px; font-size: 15px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  dd { margin-bottom: 14px; }
}