:root { color-scheme: light; --paper: #faf6ef; --surface: #fffdf9; --ink: #29231f; --muted: #71675f; --line: #e5dbce; --accent: #8a3b2b; --accent-hover: #6d2d22; --accent-ink: #fffaf5; --soft-accent: #f0e3d9; --quiet: #eee8df; --shadow: 0 14px 36px rgb(57 38 26 / 8%); --reading-size: 21px; --sans: "Avenir Next", Avenir, "Segoe UI", sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --page-width: 1160px; --reading-width: 720px; background: var(--paper); color: var(--ink); } html[data-theme="cream"] { color-scheme: light; --paper: #faf6ef; --surface: #fffdf9; --ink: #29231f; --muted: #71675f; --line: #e5dbce; --accent: #8a3b2b; --accent-hover: #6d2d22; --accent-ink: #fffaf5; --soft-accent: #f0e3d9; --quiet: #eee8df; --shadow: 0 14px 36px rgb(57 38 26 / 8%); } html[data-theme="white"] { color-scheme: light; --paper: #ffffff; --surface: #ffffff; --ink: #28231f; --muted: #675f58; --line: #e7e1d8; --accent: #8a3b2b; --accent-hover: #6d2d22; --accent-ink: #fffaf5; --soft-accent: #f3e8df; --quiet: #f2eee8; --shadow: 0 14px 36px rgb(57 38 26 / 7%); } html[data-theme="dark"] { color-scheme: dark; --paper: #211e1b; --surface: #2b2723; --ink: #f3ece3; --muted: #c1b5a8; --line: #4a4139; --accent: #d18a72; --accent-hover: #e0a18b; --accent-ink: #211814; --soft-accent: #49332c; --quiet: #37312c; --shadow: 0 16px 40px rgb(0 0 0 / 24%); } @media (prefers-color-scheme: dark) { html:not([data-theme]), html[data-theme="system"] { color-scheme: dark; --paper: #211e1b; --surface: #2b2723; --ink: #f3ece3; --muted: #c1b5a8; --line: #4a4139; --accent: #d18a72; --accent-hover: #e0a18b; --accent-ink: #211814; --soft-accent: #49332c; --quiet: #37312c; --shadow: 0 16px 40px rgb(0 0 0 / 24%); } } * { box-sizing: border-box; } html { min-width: 320px; scroll-behavior: smooth; } body { min-width: 320px; min-height: 100dvh; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } button, a { -webkit-tap-highlight-color: transparent; } a { color: var(--accent); text-underline-offset: 0.18em; } a:hover { color: var(--accent-hover); } button { color: inherit; font: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } ::selection { color: var(--accent-ink); background: var(--accent); } .site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 76px; padding: 12px max(16px, calc((100vw - var(--page-width)) / 2)); border-bottom: 1px solid var(--line); background: var(--paper); } .site-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-family: var(--serif); font-size: 25px; font-weight: 700; letter-spacing: -0.045em; text-decoration: none; } .site-brand:hover { color: var(--ink); } .brand-mark { display: inline-grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-family: var(--serif); font-size: 19px; font-style: italic; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font-size: 14px; font-weight: 650; text-decoration: none; } .nav-links a:hover { color: var(--accent); } .page-shell { width: min(var(--page-width), 100%); margin-inline: auto; padding: 38px 16px 76px; } .eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: 0.13em; line-height: 1.35; text-transform: uppercase; } .hero-card { position: relative; display: grid; min-height: 380px; grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); } .hero-card > :first-child { align-self: center; padding: 42px clamp(24px, 5vw, 68px); } .hero-card h1 { max-width: 620px; margin: 0 0 18px; font-family: var(--serif); font-size: clamp(38px, 5vw, 64px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.03; } .hero-card p:not(.eyebrow) { max-width: 490px; color: var(--muted); font-size: 18px; line-height: 1.65; } .hero-card img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: center; } .story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px; } .story-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); transition: transform 180ms ease, box-shadow 180ms ease; } .story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .story-card > a { display: block; color: inherit; text-decoration: none; } .story-card-image { width: 100%; aspect-ratio: 1.58 / 1; background: var(--quiet); object-fit: cover; } .story-card > :not(a), .story-card-copy { padding: 0 20px 20px; } .story-card h2 { margin: 15px 0 8px; font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.17; } .story-card p { margin: 0; color: var(--muted); } .story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; color: var(--muted); font-size: 13px; line-height: 1.45; } .story-meta > * + *::before { content: "·"; margin-right: 11px; color: var(--accent); } .reader-page { width: min(100%, 940px); margin-inline: auto; padding: 20px 16px 72px; } .reader-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 -16px 30px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper); } .reader-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .reader-toolbar button, [data-font-decrease], [data-font-increase], [data-theme-choice] { min-width: 44px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 650; } .reader-toolbar button:hover { border-color: var(--accent); } .reader-toolbar [aria-pressed="true"] { border-color: var(--accent); background: var(--soft-accent); box-shadow: inset 0 0 0 1px var(--accent); } .reader-toolbar-label { margin-right: 2px; color: var(--muted); font-size: 13px; font-weight: 700; } .reading-content { width: min(100%, var(--reading-width)); margin-inline: auto; color: var(--ink); font-family: var(--serif); font-size: var(--reading-size); line-height: 1.7; overflow-wrap: break-word; } .reading-content h1, .reading-content h2, .reading-content h3 { color: var(--ink); font-family: var(--serif); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; } .reading-content h1 { margin: 0.22em 0 0.28em; font-size: clamp(36px, 7vw, 58px); } .reading-content h2 { margin: 1.8em 0 0.55em; font-size: 1.55em; } .reading-content p { margin: 0 0 1.15em; } .reading-content .lede { color: var(--muted); font-size: 1.12em; line-height: 1.6; } .reading-content img, .reading-content figure { width: 100%; height: auto; margin: 1.8em 0; border-radius: 5px; } .reading-content figcaption { margin-top: 9px; color: var(--muted); font-family: var(--sans); font-size: 13px; line-height: 1.5; } .reading-content blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.15em; border-left: 3px solid var(--accent); color: var(--muted); font-size: 1.12em; font-style: italic; } .reading-content hr { width: 54px; margin: 2.4em auto; border: 0; border-top: 2px solid var(--accent); } .ad-slot { display: grid; min-height: 110px; margin: 36px 0; place-items: center; border-block: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .chapter-nav { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; margin: 42px 0; padding-top: 22px; border-top: 1px solid var(--line); } .chapter-nav a, .continue-link, .read-next > a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--accent); font-weight: 700; text-decoration: none; } .chapter-nav a:hover, .continue-link:hover, .read-next > a:hover { border-color: var(--accent); background: var(--soft-accent); } .continue-link { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .continue-link:hover { background: var(--accent-hover); color: var(--accent-ink); } .chapter-list { margin: 32px 0; padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); } .chapter-list h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 25px; } .chapter-list ol { margin: 0; padding-left: 1.3em; } .chapter-list li { padding: 5px 0; } .read-next { margin-top: 54px; padding: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); } .read-next h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 29px; } .read-next p { color: var(--muted); } .topic-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; margin: 32px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .topic-heading h1, .topic-heading h2, .popular-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4.5vw, 46px); font-weight: 550; letter-spacing: -0.04em; line-height: 1.08; } .popular-section { margin-top: 54px; } .popular-section h2 { margin-bottom: 20px; font-size: 34px; } .home-card-ad { display: grid; min-height: 145px; margin: 34px 0; padding: 18px; place-items: center; border: 1px dashed var(--line); background: var(--quiet); color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .site-footer { margin-top: 64px; padding: 34px max(16px, calc((100vw - var(--page-width)) / 2)) 28px; border-top: 1px solid var(--line); background: var(--surface); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .site-footer a { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 650; } .legal-copy { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; } @media (max-width: 760px) { .site-header { min-height: 66px; } .site-brand { font-size: 23px; } .nav-links { gap: 10px; } .nav-links a { padding-inline: 4px; font-size: 13px; } .page-shell { padding-top: 24px; } .hero-card { grid-template-columns: 1fr; } .hero-card > :first-child { padding: 30px 24px 24px; } .hero-card img { min-height: 210px; max-height: 300px; } .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 520px) { .site-header { padding-inline: 16px; flex-wrap: wrap; gap: 8px; } .brand-mark { width: 34px; height: 34px; } .nav-links { gap: 4px; } .page-shell { padding-inline: 16px; } .story-grid { grid-template-columns: 1fr; gap: 16px; } .story-card { display: grid; grid-template-columns: 38% minmax(0, 1fr); } .story-card-image { height: 100%; min-height: 148px; aspect-ratio: auto; } .story-card-copy, .story-card > :not(a) { padding: 13px 14px; } .story-card h2 { margin: 0 0 8px; font-size: 21px; } .story-card p { font-size: 14px; line-height: 1.45; } .story-meta { gap: 4px 8px; font-size: 12px; } .story-meta > * + *::before { margin-right: 7px; } .reader-page { padding-inline: 16px; } .reader-toolbar { align-items: flex-start; margin-bottom: 23px; } .reader-toolbar-group { gap: 6px; } .reader-toolbar-label { width: 100%; } .reader-toolbar button, [data-font-decrease], [data-font-increase], [data-theme-choice] { padding-inline: 11px; } .chapter-nav { gap: 8px; } .chapter-nav a { flex: 1; padding-inline: 9px; font-size: 14px; text-align: center; } .read-next { padding: 21px; } } .home-tagline { margin: 0 0 28px; font-family: var(--serif); font-size: 22px; text-align: center; } .reader-cover { width: 100%; height: auto; max-height: 390px; object-fit: cover; border-radius: 6px; } .reader-heading { margin-top: 28px; } .reader-heading .story-meta { margin-top: 16px; } .closing-line { max-width: var(--reading-width); margin: 32px auto; font-family: var(--serif); font-size: var(--reading-size); line-height: 1.7; } .story-card h2 a { color: var(--ink); text-decoration: none; } .story-card h2 a:hover { color: var(--accent); } .story-card .story-meta { margin-top: 16px; } .home-card-ad { grid-column: 1 / -1; } .chapter-list a { display: inline-flex; min-height: 44px; align-items: center; } .skip-link { position: absolute; z-index: 20; left: 16px; top: -100px; padding: 12px 20px; background: var(--surface); } .skip-link:focus { top: 8px; } .topic-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0; } .topic-filters a { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 16px; border: 1px solid var(--line); border-radius: 5px; text-decoration: none; } .topic-filters [aria-current="page"] { background: var(--soft-accent); border-color: var(--accent); } .chapter-nav { flex-wrap: wrap; } .chapter-nav .continue-link { flex: 1 1 100%; padding: 16px 20px; font-size: 18px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .chapter-nav .continue-link:hover { background: var(--accent-hover); color: var(--accent-ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .hero-card h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.03em; } .hero-card img { height: auto; min-height: 0; aspect-ratio: 1200 / 760; align-self: center; object-fit: cover; } .reader-heading h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.15; } @media (max-width: 520px) { .reader-toolbar { position: static; flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 18px; padding: 8px 0; } .reader-toolbar-label { display: none; } .reader-toolbar-group { flex-wrap: nowrap; gap: 4px; } .reader-toolbar button, [data-font-decrease], [data-font-increase], [data-theme-choice] { min-width: 40px; min-height: 40px; padding: 6px 9px; font-size: 13px; } .reader-heading h1 { font-size: 26px; } .hero-card h1 { font-size: 28px; } } @media (max-width: 520px) { .reader-toolbar { margin-inline: 0; } } .members-box { margin: 36px 0 8px; padding: 28px 24px; border: 2px solid var(--accent); border-radius: 6px; background: var(--soft-accent); text-align: center; } .members-box h2 { font-family: var(--serif); font-size: 26px; margin: 6px 0 10px; text-wrap: balance; } .members-box p { margin: 0 0 16px; } .members-box .continue-link { display: inline-block; } .members-soon { font-weight: 600; } .members-tag { font-size: .72em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-left: 6px; } .members-have { margin-top: 14px !important; font-size: .95em; } .unlock-form { display: flex; flex-direction: column; gap: 10px; max-width: 32rem; margin: 12px 0 18px; } .unlock-form input[type=text] { font: inherit; font-size: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; } .unlock-form button { align-self: flex-start; cursor: pointer; font: inherit; } .unlock-error { color: #b3261e; font-weight: 600; }