:root {
  --font-sans: "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --ink: #12251d; --forest: #174c36; --moss: #4d735f; --sage: #c8d8ca;
  --paper: #f8faf7; --white: #ffffff; --sand: #eee4cd; --gold: #b68b43;
  --line: #cfdbd2; --muted: #68766f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans), sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.site-header { width: min(1320px, calc(100% - 80px)); height: 92px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--forest); color: white; font-family: var(--font-serif), serif; font-size: 18px; font-weight: 600; letter-spacing: -7px; padding-right: 7px; }
.brand-mark span { color: #bcd2c2; }
.brand-name, .footer-brand { font-family: var(--font-serif), serif; font-size: 25px; font-weight: 600; letter-spacing: -.8px; }
.brand-name span, .footer-brand span { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 38px; font-size: 13px; font-weight: 600; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--moss); }
.subscribe-link { justify-self: end; display: flex; align-items: center; gap: 10px; color: var(--forest); font-size: 13px; font-weight: 700; }
.subscribe-link span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--forest); border-radius: 50%; }

.hero { width: min(1320px, calc(100% - 80px)); min-height: 690px; margin: 0 auto; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(58px, 8vw, 130px); align-items: center; padding: 66px 0 80px; }
.eyebrow, .section-kicker, .manifesto-label, .newsletter-kicker { margin: 0 0 28px; color: var(--moss); font-size: 11px; font-weight: 700; letter-spacing: 1.65px; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 25px; height: 1px; background: var(--gold); }
.hero h1 { margin: 0; font-family: var(--font-serif), serif; font-size: clamp(56px, 5.7vw, 88px); line-height: .89; letter-spacing: -3.8px; font-weight: 500; }
.hero h1 em { color: var(--forest); font-weight: 400; }
.hero-description { max-width: 460px; margin: 36px 0 0; color: var(--muted); font-size: 17px; line-height: 1.72; }
.featured-card { background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(23,76,54,.07); }
.featured-art { position: relative; height: 266px; overflow: hidden; background: var(--forest); color: white; }
.art-word { position: absolute; left: 38px; bottom: 24px; z-index: 2; font-family: var(--font-serif), serif; font-size: clamp(72px, 8vw, 114px); letter-spacing: -5px; line-height: .8; color: rgba(255,255,255,.94); }
.art-circle { position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.art-circle-one { width: 310px; height: 310px; right: -56px; top: -112px; }
.art-circle-two { width: 155px; height: 155px; right: 24px; top: -34px; background: #8ba992; border: 0; }
.art-line { position: absolute; left: 0; right: 0; top: 55px; height: 1px; background: rgba(255,255,255,.16); }
.art-index { position: absolute; top: 23px; right: 28px; z-index: 2; font-size: 10px; letter-spacing: 1.4px; }
.featured-copy { padding: 28px 34px 32px; }
.article-meta, .note-meta { display: flex; justify-content: space-between; gap: 20px; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 1.15px; }
.article-meta span:first-child, .note-meta span:first-child { color: var(--gold); }
.article-meta span:last-child, .note-meta span:last-child { color: var(--muted); }
.featured-copy h2 { margin: 21px 0 12px; font-family: var(--font-serif), serif; font-size: 37px; line-height: 1.04; letter-spacing: -1.2px; font-weight: 600; }
.featured-copy p { margin: 0 0 23px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.read-link, .note-card > a, .section-heading > a { display: inline-flex; align-items: center; gap: 13px; color: var(--forest); font-size: 12px; font-weight: 700; }

.notes-section { background: white; padding: 100px max(40px, calc((100% - 1320px) / 2)) 116px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 44px; }
.section-kicker { margin-bottom: 13px; }
.section-heading h2, .archive-intro h2 { margin: 0; font-family: var(--font-serif), serif; font-size: clamp(40px, 4.5vw, 58px); line-height: 1; letter-spacing: -2px; font-weight: 500; }
.section-heading > a { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.note-card { min-width: 0; }
.note-visual { position: relative; height: 210px; margin-bottom: 23px; overflow: hidden; }
.note-visual.sage { background: #dce7df; }
.note-visual.mint { background: #e8efe9; }
.note-visual.sand { background: var(--sand); }
.note-number { position: absolute; top: 26px; left: 28px; color: var(--forest); font-family: var(--font-serif), serif; font-size: 88px; line-height: 1; }
.note-shape { position: absolute; width: 180px; height: 180px; border: 1px solid rgba(23,76,54,.3); border-radius: 50%; right: -36px; bottom: -77px; }
.mint .note-shape { width: 110px; height: 110px; right: 25px; bottom: 43px; border-radius: 4px; transform: rotate(18deg); background: rgba(23,76,54,.08); }
.sand .note-shape { width: 155px; height: 62px; right: -8px; bottom: 15px; border-radius: 50%; transform: rotate(-12deg); background: rgba(182,139,67,.16); border-color: rgba(182,139,67,.45); }
.note-domain { position: absolute; left: 28px; bottom: 20px; color: var(--moss); font-size: 8px; font-weight: 700; letter-spacing: 1.3px; }
.note-meta { margin-bottom: 18px; }
.note-card h3 { margin: 0 0 12px; font-family: var(--font-serif), serif; font-size: 29px; line-height: 1.08; letter-spacing: -.6px; font-weight: 600; }
.note-card > p { min-height: 70px; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.manifesto { background: var(--forest); color: white; padding: 94px max(40px, calc((100% - 1080px) / 2)); text-align: center; }
.manifesto-label { color: #a9c2b1; }
.manifesto blockquote { margin: 0; font-family: var(--font-serif), serif; font-size: clamp(42px, 5.2vw, 69px); line-height: 1.07; letter-spacing: -2px; }
.manifesto blockquote em { color: #b7cdbd; }
.manifesto-details { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; max-width: 780px; margin: 58px auto 0; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.2); text-align: left; }
.manifesto-details p { margin: 0; color: #d5e0d8; font-size: 13px; line-height: 1.7; }

.archive { padding: 100px max(40px, calc((100% - 1320px) / 2)); background: var(--paper); display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.archive-list { border-top: 1px solid var(--line); }
.archive-item { display: grid; grid-template-columns: 45px 80px 1fr auto 25px; gap: 18px; align-items: center; min-height: 105px; border-bottom: 1px solid var(--line); transition: padding .2s ease, color .2s ease; }
.archive-item:hover { padding-left: 8px; color: var(--forest); }
.archive-index, .archive-date { color: var(--muted); font-size: 10px; letter-spacing: .6px; }
.archive-tag { color: var(--gold); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.archive-item strong { font-family: var(--font-serif), serif; font-size: 22px; line-height: 1.1; font-weight: 600; }
.archive-arrow { color: var(--forest); }

.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; padding: 80px max(40px, calc((100% - 1320px) / 2)); background: #dfe9e1; }
.newsletter h2 { margin: 0; font-family: var(--font-serif), serif; font-size: clamp(40px, 4vw, 57px); line-height: 1.03; letter-spacing: -1.8px; }
.newsletter-form label { display: block; margin-bottom: 10px; color: var(--moss); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; }
.input-row { display: flex; border-bottom: 1px solid var(--forest); }
.input-row input { flex: 1; min-width: 0; padding: 15px 0; border: 0; outline: none; background: transparent; color: var(--ink); }
.input-row input::placeholder { color: #77877e; }
.input-row button { border: 0; background: transparent; color: var(--forest); font-size: 12px; font-weight: 700; cursor: pointer; }
.newsletter-form > p { margin: 10px 0 0; color: var(--muted); font-size: 10px; }

footer { min-height: 190px; padding: 50px max(40px, calc((100% - 1320px) / 2)); display: grid; grid-template-columns: 1fr 1fr auto; gap: 35px; align-items: start; background: #102b20; color: white; }
.footer-brand { font-size: 27px; }
footer p, footer > span { color: #9fb2a6; font-size: 11px; }
footer div { display: flex; gap: 25px; justify-content: end; font-size: 11px; }
footer > span { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.12); }

@media (max-width: 960px) {
  .site-header { width: calc(100% - 40px); grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 45px; padding-top: 60px; }
  .hero-intro, .featured-card { max-width: 700px; }
  .notes-grid { grid-template-columns: 1fr 1fr; row-gap: 55px; }
  .note-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 14px); }
  .archive { grid-template-columns: 1fr; gap: 45px; }
  .newsletter { gap: 55px; }
}

@media (max-width: 650px) {
  .site-header { height: 74px; }
  .brand-name { font-size: 21px; }
  .brand-mark { width: 32px; height: 32px; }
  .subscribe-link { font-size: 0; }
  .subscribe-link span { font-size: 13px; }
  .hero { min-height: auto; padding: 55px 0 65px; }
  .hero h1 { font-size: 53px; line-height: .92; letter-spacing: -2.4px; }
  .eyebrow { font-size: 9px; line-height: 1.4; }
  .featured-art { height: 205px; }
  .art-word { left: 22px; font-size: 72px; }
  .featured-copy { padding: 24px; }
  .featured-copy h2 { font-size: 32px; }
  .notes-section, .archive { padding-left: 20px; padding-right: 20px; }
  .section-heading { align-items: start; }
  .section-heading > a { display: none; }
  .notes-grid { grid-template-columns: 1fr; }
  .note-card:last-child { grid-column: auto; max-width: none; }
  .note-visual { height: 225px; }
  .manifesto { padding-left: 20px; padding-right: 20px; }
  .manifesto-details { grid-template-columns: 1fr; gap: 22px; }
  .archive-item { grid-template-columns: 34px 1fr 22px; gap: 12px; padding: 18px 0; }
  .archive-tag, .archive-date { display: none; }
  .newsletter { grid-template-columns: 1fr; gap: 38px; padding-left: 20px; padding-right: 20px; }
  .input-row { display: block; }
  .input-row input { width: 100%; }
  .input-row button { width: 100%; padding: 15px 0; text-align: left; border-top: 1px solid rgba(23,76,54,.18); }
  footer { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  footer div { justify-content: start; flex-wrap: wrap; }
  footer > span { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.form-status { min-height: 18px; color: var(--forest) !important; font-weight: 600; }