/* Layout: a quiet journal. Narrow reading column, one wide photo moment per page, plum used only for links, labels and the signup. */
:root {
  --bg: #FAF9F7;
  --surface: #F1EEEA;
  --fg: #22201F;
  --muted: #6E6762;
  --rule: #E2DDD7;
  --accent: #7E3A55;
  --photo-a: #C9B8A8;
  --photo-b: #8D7C86;
  --display: "Gloock", "Georgia", serif;
  --body: "Source Serif 4", "Georgia", serif;
  --ui: "Figtree", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161415; --surface: #201D1F; --fg: #ECE7E3; --muted: #A39B96;
    --rule: #34302F; --accent: #D79BB3; --photo-a: #4A3F3A; --photo-b: #3A3040;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161415; --surface: #201D1F; --fg: #ECE7E3; --muted: #A39B96;
  --rule: #34302F; --accent: #D79BB3; --photo-a: #4A3F3A; --photo-b: #3A3040;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 18px; line-height: 1.7; padding-inline: 20px; padding-block: 0 64px; }
.wrap { max-width: 1040px; margin: 0 auto; }
.read { max-width: 660px; margin: 0 auto; }
a { color: var(--accent); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


header.site { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.brand { font-family: var(--display); font-size: 24px; letter-spacing: -0.01em; color: var(--fg); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--ui); font-size: 14px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--fg); }

.hero { padding-block: 56px 40px; display: grid; gap: 28px; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 8vw, 84px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; max-width: 14ch; }
.hero p { font-style: italic; color: var(--muted); font-size: clamp(18px, 2.4vw, 22px); margin: 0; max-width: 34ch; }

.photo { position: relative; width: 100%; max-width: 100%; border-radius: 3px; overflow: hidden; background: linear-gradient(160deg, var(--photo-a), var(--photo-b)); display: grid; place-items: center; }
.photo span { font-family: var(--ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; opacity: 0.85; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; }
.photo.wide { aspect-ratio: 21 / 9; }
.photo.post { aspect-ratio: 3 / 2; }
img.pic { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.hero-img { aspect-ratio: 21 / 9; object-position: center bottom; }
.wide-img { aspect-ratio: 4 / 3; object-position: center 50%; margin: 2em 0; }
@media (max-width: 600px) { .hero-img { aspect-ratio: 4 / 3; } }
.feat-img { aspect-ratio: 4 / 5; object-position: center 60%; }
.lead-img { aspect-ratio: 4 / 5; object-position: center 55%; margin-block: 8px 44px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2em 0; }
.pair img { aspect-ratio: 3 / 4; object-position: center 35%; }

.label { font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.meta { font-family: var(--ui); font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; }

.featured { padding-block: 56px; border-bottom: 1px solid var(--rule); }
.featured { display: grid; gap: 48px; }
.featured > div { min-width: 0; display: grid; gap: 14px; max-width: 660px; }
.featured > div + div { border-top: 1px solid var(--rule); padding-top: 40px; }
.featured h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; margin: 0; text-wrap: balance; }
.featured h2 button { all: unset; cursor: pointer; }
.featured h2 button:hover { color: var(--accent); }
.featured p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .featured { grid-template-columns: 1fr; gap: 24px; } }

.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-block: 48px; }
.ethos { display: grid; gap: 14px; padding-block: 56px 8px; max-width: 760px; }
.ethos-line { margin: 0; font-family: var(--display); font-size: clamp(26px, 4vw, 38px); line-height: 1.2; text-wrap: balance; }
.cat.soon { background: transparent; border: 1px dashed var(--accent); }
.cat.soon h3 { font-style: italic; }
.cat.wide { grid-column: 1 / -1; }
.cat { background: var(--surface); padding: 28px; border-radius: 3px; display: grid; gap: 8px; min-width: 0; }
.cat h3 { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 0; }
.cat p { margin: 0; color: var(--muted); font-size: 16px; }
.cat-link { font: inherit; color: inherit; text-align: left; border: 0; cursor: pointer; transition: transform .2s ease; }
.cat-link:hover { transform: translateY(-2px); }
.cat-link:hover h3 { color: var(--accent); }
.more { font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.next-story { width: 100%; margin-block: 24px 48px; }
.next-story h3 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; text-wrap: balance; }
.soon-page { padding-block: 64px 24px; display: grid; gap: 18px; }
.soon-page h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7vw, 68px); line-height: 1.05; margin: 0; }
.soon-page .lede { font-style: italic; color: var(--muted); font-size: 21px; margin: 0; }
.inline-img { aspect-ratio: 4 / 5; object-position: center 40%; margin: 2em 0; }
.harbor { object-position: center 70%; }
.lead-wide { aspect-ratio: 4 / 3; object-position: center 60%; }
.rays { aspect-ratio: 4 / 5; object-position: center 45%; }
.museum { object-position: center 30%; }
.series-note { font-family: var(--ui); font-size: 14px; color: var(--muted); margin: 0; }
.inline-link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.series { display: grid; gap: 16px; margin-top: 12px; }
.series .soon-card { margin-top: 0; }
.lead-fig { margin: 8px 0 44px; }
.lead-fig .lead-img { margin: 0; }
figcaption { font-family: var(--ui); font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 12px; font-style: italic; }
.soon-card { border: 1px dashed var(--accent); border-radius: 3px; padding: 28px; display: grid; gap: 8px; margin-top: 12px; }
.soon-card h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 0; }
.soon-card p { margin: 0; color: var(--muted); }
.soon-card a { font-family: var(--ui); font-weight: 600; font-size: 15px; }
@media (max-width: 560px) { .cats { grid-template-columns: 1fr; } }

.signup { border-top: 1px solid var(--rule); padding-block: 48px; display: grid; gap: 14px; text-align: left; }
.signup h3 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0; }
.signup p { margin: 0; color: var(--muted); }
.signup form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.signup input { flex: 1 1 220px; min-width: 0; font-family: var(--ui); font-size: 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg); color: var(--fg); }
.signup .btn { font-family: var(--ui); font-weight: 600; font-size: 15px; padding: 12px 22px; border: 0; border-radius: 3px; background: var(--accent); color: var(--bg); cursor: pointer; }
.signup .note { font-family: var(--ui); font-size: 13px; }

article { padding-block: 48px 8px; }
article header { display: grid; gap: 16px; margin-bottom: 36px; }
article h1 { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 6.5vw, 64px); line-height: 1.05; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
article .dek { font-style: italic; color: var(--muted); font-size: 21px; margin: 0; }
.post-photo { margin-block: 8px 44px; }
.prose p { margin: 0 0 1.35em; }
.prose p:first-of-type::first-letter { font-family: var(--display); float: left; font-size: 4.1em; line-height: 0.82; padding: 0.08em 0.1em 0 0; color: var(--accent); }
.prose blockquote { margin: 2em 0; padding: 0; font-family: var(--display); font-size: clamp(24px, 3.6vw, 32px); line-height: 1.25; text-wrap: balance; }
.back { font-family: var(--ui); font-size: 14px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }
footer { border-top: 1px solid var(--rule); padding-block: 28px; font-family: var(--ui); font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
@media (prefers-reduced-motion: no-preference) { .view { animation: rise .5s ease both; } @keyframes rise { from { transform: translateY(8px); } to { transform: none; } } }
a.cat, a.cat-link { text-decoration: none; color: inherit; display: grid; }
a.back { text-decoration: none; display: inline-block; }
a.back:hover { color: var(--fg); }
.featured h2 a { color: inherit; text-decoration: none; }
.featured h2 a:hover { color: var(--accent); }
a.brand { text-decoration: none; }
nav a[aria-current="page"] { color: var(--fg); }
a.inline-link { font: inherit; }
footer a.ig { color: var(--muted); text-decoration: none; }
footer a.ig:hover { color: var(--accent); }