/* hidden /answers pages. No aura.js here, so nothing waits on a reveal. */
@font-face { font-family: 'Alliance No. 2'; src: url('/assets/fonts/AllianceNo2-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Alliance No. 2'; src: url('/assets/fonts/AllianceNo2-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #08090b;
  --fg: #f3f1ec;
  --fg-dim: rgb(243 241 236 / .66);
  --fg-line: rgb(243 241 236 / .2);
  --gutter: clamp(16px, 3.9vw, 56px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--fg); font: 400 18px/1.55 'Alliance No. 2', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .2em; text-decoration-color: var(--fg-dim); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

header { display: flex; align-items: center; justify-content: space-between; padding: 24px var(--gutter); }
.mark { display: inline-flex; align-items: center; gap: 10px; font-family: 'Geist', sans-serif; font-size: 20px; line-height: 1; letter-spacing: -.01em; text-decoration: none; }
.mark img { width: auto; height: 30px; }

.skip { position: absolute; left: var(--gutter); top: -64px; padding: 10px 16px; background: var(--fg); color: var(--ink); }
.skip:focus { top: 16px; }

main { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) 40px; }
footer { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) 56px; font-size: 15px; color: var(--fg-dim); }
h1 { margin: 0 0 32px; font-size: clamp(32px, 5vw, 56px); line-height: 1.08; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
h2 { margin: 56px 0 16px; padding-top: 32px; border-top: 1px solid var(--fg-line); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 500; }
h3 { margin: 28px 0 8px; font-size: 18px; line-height: 1.35; font-weight: 500; }
p { margin: 0 0 16px; color: var(--fg-dim); }
h1 + p { font-size: 15px; }
.byline + p { color: var(--fg); }
ul { margin: 0 0 16px; padding-left: 20px; color: var(--fg-dim); }
li { margin-bottom: 8px; }

.wide { overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16px; }
th, td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--fg-line); text-align: left; vertical-align: top; }
th { font-weight: 500; }
td { color: var(--fg-dim); }
td:first-child { color: var(--fg); }

.book { display: inline-block; margin-top: 56px; padding: 14px 24px; border: 1px solid var(--fg); text-decoration: none; font-weight: 500; }
.book:hover { background: var(--fg); color: var(--ink); }