/* Gen X True Stories — static site */ :root { color-scheme: light dark; --bg: #f3efe6; --bg-deep: #e8e2d4; --ink: #1a1814; --ink-soft: #4a453c; --muted: #6e675c; --rule: #cfc6b4; --card: #faf7f0; --header-bg: rgba(250, 247, 240, 0.92); --accent: #2f6b3a; /* absinthe green */ --accent-hot: #c45c26; /* primary-color nod without kindergarten */ --link: #1e4d8c; --glow-green: rgba(47, 107, 58, 0.07); --glow-orange: rgba(196, 92, 38, 0.06); --shadow: rgba(26, 24, 20, 0.08); --max: 38rem; --wide: 52rem; --font-story: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif; } /* Follow OS / browser dark mode */ @media (prefers-color-scheme: dark) { :root { --bg: #141210; --bg-deep: #1c1916; --ink: #ebe6dc; --ink-soft: #c4bdb0; --muted: #9a9286; --rule: #3a3530; --card: #1e1b18; --header-bg: rgba(20, 18, 16, 0.92); --accent: #6fbf7a; --accent-hot: #e08a4f; --link: #8cb4e8; --glow-green: rgba(111, 191, 122, 0.08); --glow-orange: rgba(224, 138, 79, 0.06); --shadow: rgba(0, 0, 0, 0.35); } } /* Manual override (optional toggle sets data-theme on ) */ html[data-theme="light"] { color-scheme: light; --bg: #f3efe6; --bg-deep: #e8e2d4; --ink: #1a1814; --ink-soft: #4a453c; --muted: #6e675c; --rule: #cfc6b4; --card: #faf7f0; --header-bg: rgba(250, 247, 240, 0.92); --accent: #2f6b3a; --accent-hot: #c45c26; --link: #1e4d8c; --glow-green: rgba(47, 107, 58, 0.07); --glow-orange: rgba(196, 92, 38, 0.06); --shadow: rgba(26, 24, 20, 0.08); } html[data-theme="dark"] { color-scheme: dark; --bg: #141210; --bg-deep: #1c1916; --ink: #ebe6dc; --ink-soft: #c4bdb0; --muted: #9a9286; --rule: #3a3530; --card: #1e1b18; --header-bg: rgba(20, 18, 16, 0.92); --accent: #6fbf7a; --accent-hot: #e08a4f; --link: #8cb4e8; --glow-green: rgba(111, 191, 122, 0.08); --glow-orange: rgba(224, 138, 79, 0.06); --shadow: rgba(0, 0, 0, 0.35); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 112.5%; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(ellipse 120% 80% at 10% -20%, var(--glow-green), transparent 50%), radial-gradient(ellipse 80% 60% at 100% 0%, var(--glow-orange), transparent 45%), var(--bg); font-family: var(--font-ui); line-height: 1.5; } a { color: var(--link); text-underline-offset: 0.15em; } a:hover { color: var(--accent-hot); } .wrap { width: min(100% - 2rem, var(--wide)); margin-inline: auto; } /* Header */ .site-header { border-bottom: 1px solid var(--rule); background: var(--header-bg); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; } .site-header .inner { width: min(100% - 2rem, var(--wide)); margin-inline: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; } .brand { font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--ink); } .brand span { color: var(--accent); font-weight: 800; } .nav { display: flex; gap: 1.1rem; font-size: 0.9rem; } .nav a { text-decoration: none; color: var(--ink-soft); } .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; } /* Home hero */ .hero { padding: 3rem 0 2rem; border-bottom: 1px solid var(--rule); } .hero h1 { margin: 0 0 0.75rem; font-family: var(--font-story); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .hero .lede { margin: 0; max-width: 32rem; font-size: 1.1rem; color: var(--ink-soft); } .hero .meta { margin: 1.25rem 0 0; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; } /* Story list */ .section { padding: 2.5rem 0 3.5rem; } .section h2 { margin: 0 0 1.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .story-card { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 1.25rem 1.35rem; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .story-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px var(--shadow); transform: translateY(-1px); color: inherit; } /* Theme toggle */ .theme-toggle { appearance: none; border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.8rem; padding: 0.25rem 0.55rem; border-radius: 0.25rem; cursor: pointer; line-height: 1.2; } .theme-toggle:hover { color: var(--ink); border-color: var(--muted); } .story-card .num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.35rem; } .story-card h3 { margin: 0 0 0.4rem; font-family: var(--font-story); font-size: 1.35rem; font-weight: 700; line-height: 1.25; } .story-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .story-card .when { display: block; margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted); } /* Story page */ .story-header { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--rule); max-width: var(--max); margin-inline: auto; } .story-header .crumb { font-size: 0.85rem; margin: 0 0 1rem; } .story-header .crumb a { text-decoration: none; color: var(--muted); } .story-header .crumb a:hover { color: var(--link); } .story-header h1 { margin: 0 0 0.75rem; font-family: var(--font-story); font-size: clamp(1.75rem, 4vw, 2.35rem); line-height: 1.2; letter-spacing: -0.02em; } .story-header .deck { margin: 0; color: var(--ink-soft); font-size: 1.05rem; } .story-body { max-width: var(--max); margin: 0 auto; padding: 2rem 0 4rem; font-family: var(--font-story); font-size: 1.05rem; line-height: 1.65; } .story-body p { margin: 0 0 1.1rem; } .story-body p.disclaimer { font-family: var(--font-ui); font-size: 0.9rem; color: var(--muted); border-left: 3px solid var(--rule); padding-left: 0.9rem; margin-bottom: 1.75rem; } .story-body p:last-child { margin-bottom: 0; font-weight: 600; } .story-end { max-width: var(--max); margin: 0 auto 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--muted); } /* About */ .prose { max-width: var(--max); margin: 0 auto; padding: 2.5rem 0 4rem; } .prose h1 { font-family: var(--font-story); font-size: 2rem; margin: 0 0 1rem; } .prose p { font-family: var(--font-story); font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1rem; } /* Footer */ .site-footer { border-top: 1px solid var(--rule); padding: 1.5rem 0 2.5rem; font-size: 0.85rem; color: var(--muted); } .site-footer .inner { width: min(100% - 2rem, var(--wide)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } .site-footer a { color: var(--muted); } @media (max-width: 540px) { html { font-size: 100%; } .site-header .inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .hero { padding-top: 2rem; } } @media print { .site-header, .site-footer, .nav, .crumb { display: none; } body { background: white; font-size: 12pt; } .story-body { max-width: none; } }