@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root {
    --ink: #eee9df;
    --muted: #9b968d;
    --night: #171817;
    --night-light: #20211e;
    --line: #363731;
    --lime: #d8ed6c;
    --coral: #ef846a;
    --mono: 'DM Mono', monospace;
    --sans: 'Manrope', sans-serif;
    --serif: 'Playfair Display', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--night); color: var(--ink); font-family: var(--sans); line-height: 1.6; margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--lime); }

.site-header,
.page-shell,
footer { margin: 0 auto; max-width: 1120px; padding-left: 28px; padding-right: 28px; }

.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 24px; padding-top: 24px; }
.wordmark { font-family: var(--serif); font-size: 1.15rem; }
.wordmark span { color: var(--coral); }
nav { align-items: center; display: flex; gap: 27px; }
nav a { color: var(--muted); font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; }
nav a:hover { color: var(--lime); }
.nav-action { border-bottom: 1px solid var(--coral); color: var(--ink); padding-bottom: 3px; }

.hero { display: grid; gap: 84px; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr); min-height: 610px; padding: 112px 0 92px; }
.eyebrow, .rail-label, .section-kicker, .writing-number { color: var(--muted); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow { color: var(--coral); margin: 0 0 27px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(4.3rem, 10vw, 8.4rem); letter-spacing: -0.09em; line-height: 0.88; margin: 0 0 48px; max-width: 800px; }
h1 em, .feature-note h2 em { color: var(--coral); font-family: var(--serif); font-weight: 500; letter-spacing: -0.08em; }
.intro-copy { color: #d0cbc1; font-size: 1.02rem; line-height: 1.7; margin-bottom: 32px; max-width: 570px; }
.social-links { display: flex; flex-wrap: wrap; gap: 23px; }
.social-links a, .inline-links a, .rail-heading a { border-bottom: 1px solid var(--line); font-size: 0.75rem; padding-bottom: 4px; }
.social-links a:hover, .inline-links a:hover, .rail-heading a:hover { border-color: var(--lime); }

.hero-rail { border-left: 1px solid var(--line); padding-left: 27px; }
.rail-item { border-bottom: 1px solid var(--line); padding: 0 0 23px; }
.rail-item + .rail-item { padding-top: 23px; }
.rail-label { margin-bottom: 10px; }
.rail-item h2 { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; line-height: 1.2; margin-bottom: 5px; }
.rail-item h2 span { color: var(--coral); font-family: var(--sans); font-size: 0.75rem; }
.rail-item > p:last-child { color: var(--muted); font-size: 0.72rem; line-height: 1.45; margin-bottom: 0; }

.lower-grid { border-top: 1px solid var(--line); display: grid; gap: 84px; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); padding: 63px 0 95px; }
.section-kicker { color: var(--coral); margin-bottom: 22px; }
.feature-note { background: var(--lime); color: var(--night); padding: 36px; }
.feature-note h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.08em; line-height: 0.95; margin-bottom: 24px; }
.feature-note h2 em { color: var(--night); }
.feature-note > p:not(.section-kicker) { font-size: 0.86rem; line-height: 1.6; max-width: 480px; }
.inline-links { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 30px; }
.inline-links a { border-color: var(--night); font-weight: 700; }
.inline-links a:hover { color: var(--night); }

.writing-rail { align-self: start; }
.rail-heading { align-items: baseline; display: flex; justify-content: space-between; }
.rail-heading .section-kicker { margin-bottom: 22px; }
.rail-heading a { color: var(--muted); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.writing-card { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 27px 1fr 18px; padding: 20px 0; }
.writing-card:first-of-type { border-top: 1px solid var(--line); }
.writing-number { color: var(--coral); }
.writing-card strong { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 500; }
.writing-card small { color: var(--muted); display: block; font-size: 0.7rem; line-height: 1.4; margin-top: 4px; }
.writing-card > span:last-child { color: var(--coral); }
.writing-card:hover strong { color: var(--lime); }

footer { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 28px; padding-top: 28px; }
footer p { color: var(--muted); font-family: var(--mono); font-size: 0.62rem; margin: 0; }
footer a { border-bottom: 1px solid var(--line); font-size: 0.72rem; padding-bottom: 3px; }

@media (max-width: 760px) {
    .site-header, .page-shell, footer { padding-left: 20px; padding-right: 20px; }
    .site-header { padding-bottom: 19px; padding-top: 19px; }
    nav { gap: 13px; }
    nav a:not(.nav-action) { display: none; }
    nav a { font-size: 0.59rem; }
    .hero { display: block; min-height: 0; padding: 75px 0 65px; }
    h1 { font-size: clamp(4rem, 19vw, 6.7rem); margin-bottom: 37px; }
    .intro-copy { font-size: 0.93rem; }
    .hero-rail { border-left: 0; border-top: 1px solid var(--line); margin-top: 63px; padding-left: 0; padding-top: 31px; }
    .lower-grid { display: block; padding-top: 52px; }
    .feature-note { padding: 27px; }
    .writing-rail { margin-top: 62px; }
    footer { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@media print {
    body { background: #fff; color: #111; }
    .site-header, .page-shell, footer { max-width: none; }
    nav, .social-links, .writing-rail { display: none; }
    .hero { display: block; min-height: auto; padding: 30px 0; }
    .hero-rail { border-color: #ddd; margin-top: 30px; padding: 20px 0 0; }
    .lower-grid { display: block; padding: 30px 0; }
    .feature-note { background: #eee; }
}