/* liminalstoat — shared house style. * * Source of truth: site/_assets/site.css in git. * Served at https://liminalstoat.com/assets/site.css (S3: stoat-site-assets, * key "assets/site.css", behind the CloudFront /assets/* behavior). * * Pages link this once: * and add only their own page-specific layout on top. The design tokens, * base reset, background wash, type defaults, and the shared "index" list * component all live here so a restyle is a one-file edit. * * Fonts are still loaded per-page in (EB Garamond + JetBrains Mono) * so a page can pick a different face without touching this file. */ :root { --bg: #0b0a0d; --ink: #e9e5da; --ink-soft: #b3ab9c; --ink-faint: #8a8276; --gold: #c9a961; --gold-soft: rgba(201, 169, 97, 0.55); --gold-faint: rgba(201, 169, 97, 0.16); --hairline: rgba(201, 169, 97, 0.12); --row-hover: rgba(201, 169, 97, 0.05); --serif: "EB Garamond", "Iowan Old Style", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } @media (prefers-color-scheme: light) { :root { --bg: #f3ecdd; --ink: #2c2014; --ink-soft: #5f5142; --ink-faint: #857458; --gold: #8f7233; --gold-soft: rgba(143, 114, 51, 0.6); --gold-faint: rgba(143, 114, 51, 0.2); --hairline: rgba(143, 114, 51, 0.18); --row-hover: rgba(143, 114, 51, 0.06); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-feature-settings: "onum" 1, "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Soft gold wash at the top of every page. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 120vw 70vh at 50% -8%, rgba(201, 169, 97, 0.06), transparent 62%); } ::selection { background: rgba(201, 169, 97, 0.20); color: var(--ink); } main { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: clamp(64px, 14vh, 150px) 24px clamp(80px, 12vh, 140px); } /* ── Hero / wordmark ─────────────────────────────────────────── */ header.hero { text-align: center; margin: 0 0 clamp(48px, 9vh, 88px); } .mark { font-family: var(--mono); font-size: clamp(52px, 12vw, 76px); line-height: 1; color: var(--gold); text-shadow: 0 0 38px rgba(201, 169, 97, 0.22); user-select: none; } .wordmark { margin: clamp(22px, 4vh, 34px) 0 0; font-size: 15px; font-weight: 400; letter-spacing: 0.42em; text-transform: lowercase; color: var(--ink-soft); padding-left: 0.42em; } /* ── Index list (home + any "list of sections" view) ─────────── */ nav.index { display: flex; flex-direction: column; gap: 2px; } a.entry { display: flex; align-items: center; gap: 18px; padding: 20px 14px; text-decoration: none; color: inherit; border-top: 1px solid var(--hairline); transition: background-color 160ms ease, padding-left 200ms ease; } nav.index a.entry:last-child { border-bottom: 1px solid var(--hairline); } @media (hover: hover) and (pointer: fine) { a.entry:hover { background: var(--row-hover); padding-left: 22px; } a.entry:hover .entry-arrow { opacity: 1; transform: translateX(0); } a.entry:hover .entry-glyph { color: var(--gold); } } .entry-glyph { flex-shrink: 0; width: 1.4em; text-align: center; font-size: 22px; color: var(--gold-soft); transition: color 160ms ease; } .entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .entry-title { font-size: 21px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); } .entry-blurb { font-size: 15px; font-style: italic; color: var(--ink-soft); } .entry-arrow { flex-shrink: 0; color: var(--gold-soft); font-size: 17px; opacity: 0; transform: translateX(-6px); transition: opacity 160ms ease, transform 160ms ease; } /* ── Colophon ────────────────────────────────────────────────── */ .colophon { position: relative; z-index: 1; text-align: center; margin: clamp(56px, 11vh, 110px) 0 0; font-size: 12px; letter-spacing: 0.14em; } .colophon a { color: var(--gold-soft); text-decoration: none; opacity: 0.55; transition: opacity 200ms ease, color 200ms ease; } .colophon a:hover { opacity: 1; color: var(--gold); } @media (max-width: 560px) { a.entry { gap: 14px; padding: 18px 8px; } .entry-title { font-size: 19px; } .entry-arrow { opacity: 1; transform: none; } }