/*
  The stylesheet for the newsletter pages the `newsletter` function renders (issues, archives, the 404). Those
  pages are not part of the Next build, so this file and the fonts beside it sit at stable, unhashed paths.
  The colour tokens must match app/globals.css (test/newsletter-assets.test.mjs checks), and the masthead,
  footer and reading column follow globals.css and app/blog/blog.css.
*/
@font-face { font-family: "Young Serif"; src: url("/newsletter/assets/fonts/young-serif-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/newsletter/assets/fonts/hanken-grotesk-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --color-ground: #f6f3ec;
  --color-ground-2: #eeeae0;
  --color-ink: #191917;
  --color-ink-2: #4a4843;
  --color-rule: #ddd8cb;
  --color-accent: #f66b25;
  --color-accent-ink: #b03f06;
  --font-display: "Young Serif", Georgia, ui-serif, serif;
  --font-ui: "Hanken Grotesk", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --shell: 76rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.25rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--color-ground); color: var(--color-ink); font: 1.0625rem/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
img, iframe { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--color-accent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--color-accent); color: var(--color-ink); font: 0.875rem var(--font-mono); padding: 0.5rem 0.75rem; }
.skip-link:focus { left: 0; }
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.link { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.055em; }

/* Masthead (globals.css) */
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(1.25rem, 2.5vw, 2rem); }
.wordmark { display: inline-flex; line-height: 0; }
.wordmark img { width: 13.75rem; height: auto; }
.masthead-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.masthead-nav a { font: 500 0.9375rem var(--font-ui); color: var(--color-ink-2); text-decoration: none; padding-block: 0.35rem; }
.masthead-nav a.masthead-cta { display: inline-flex; gap: 0.45rem; padding: 0.55rem 1rem; border: 1.5px solid var(--color-ink); border-radius: 0.55rem; color: var(--color-ink); font-weight: 600; }
@media (max-width: 30rem) { .wordmark img { width: 9.5rem; } .masthead-nav { column-gap: 0.875rem; } .masthead-nav a { font-size: 0.875rem; } }

/* Footer (globals.css) */
.site-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 2rem 3rem; border-top: 1px solid var(--color-rule); font: 0.875rem var(--font-mono); color: var(--color-ink-2); }
.site-footer a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* An issue (mock 6) and an archive: the blog's reading column. */
.issue, .archive { max-width: 42rem; padding-block: 3rem 4rem; }
.issue-kicker { font: 700 0.75rem/1.2 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-ink); }
.issue-kicker a { text-decoration: none; }
.issue-title { margin-top: 0.5rem; font: 400 clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem)/1.04 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; }
.issue-meta { margin-top: 0.75rem; font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-2); }
.issue-body { margin-top: 2rem; font: 1.15rem/1.65 var(--font-ui); overflow-wrap: anywhere; }
.issue-body > * + * { margin-top: 1.1em; }
.issue-body h1, .issue-body h2 { font: 400 1.5rem/1.2 var(--font-display); letter-spacing: -0.025em; margin-top: 1.8em; }
.issue-body h3, .issue-body h4 { font: 400 1.2rem/1.25 var(--font-display); letter-spacing: -0.02em; margin-top: 1.5em; }
.issue-body a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.issue-body ul, .issue-body ol { padding-left: 1.4em; }
.issue-body li + li { margin-top: 0.4em; }
.issue-body img { height: auto; border-radius: 0.75rem; }
.issue-body blockquote { border-left: 4px solid var(--color-accent); padding-left: 1em; color: var(--color-ink-2); }
.issue-body pre { overflow-x: auto; padding: 1em; border-radius: 0.75rem; background: var(--color-ground-2); font: 0.9rem/1.5 var(--font-mono); }
.issue-body code { font-family: var(--font-mono); font-size: 0.9em; }
.issue-body hr { border: 0; border-top: 1px solid var(--color-rule); }
.issue-video { aspect-ratio: 16 / 9; }
.issue-video iframe { width: 100%; height: 100%; border: 0; border-radius: 1rem; }
.issue-more { margin-top: 2rem; }

/* The subscribe box (mock 6). */
.issue-sub { margin-top: 3rem; padding: 1.25rem; border-radius: 1rem; background: var(--color-ink); color: var(--color-ground); }
.issue-sub-title { font: 400 1.4rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.issue-sub-line { margin-top: 0.35rem; color: #bab6ac; font-size: 0.95rem; line-height: 1.4; }
.issue-sub-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.issue-sub-form input { flex: 1 1 12rem; min-width: 0; padding: 0.7rem 0.8rem; border: 1.5px solid var(--color-ground); border-radius: 0.6rem; background: transparent; color: var(--color-ground); font: 1rem var(--font-ui); }
.issue-sub-form input::placeholder { color: #8d887d; }
.issue-sub-form button { padding: 0.7rem 1rem; border: 0; border-radius: 0.6rem; background: var(--color-accent); color: var(--color-ink); font: 600 1rem var(--font-ui); cursor: pointer; }
.issue-sub-form button:disabled { opacity: 0.6; cursor: wait; }
.issue-sub-status { flex-basis: 100%; font-size: 0.9rem; }
.issue-sub-status:empty { display: none; }
.issue-sub-check { flex-basis: 100%; }
.issue-sub-check:empty { display: none; }
.issue-sub-link { display: inline-block; margin-top: 0.9rem; color: var(--color-accent); font-weight: 600; }

/* Archive */
.archive-blurb { margin-top: 0.75rem; color: var(--color-ink-2); font-size: 1.2rem; line-height: 1.45; }
.archive-heading { margin-top: 3rem; font: 400 1.5rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.archive-list { margin-top: 1rem; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.archive-list a { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 1rem; border-bottom: 1px solid var(--color-rule); text-decoration: none; }
.archive-list b { font: 400 1.3rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.archive-list span:not(.archive-meta) { color: var(--color-ink-2); }
.archive-meta { font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-2); }
.archive-empty { margin-top: 1rem; color: var(--color-ink-2); }