.letter-page { letter-spacing: 0; }
.letter-page:has(> .nav) { padding-top: 82px; }
.letter-page > .nav.on-light { background: var(--bg); border-bottom-color: var(--line-soft); }
.letter-page > .nav .menu a, .letter-page > .nav .cta { letter-spacing: 0; }
.letter-page .menu .dd-menu a[href="/method.html"] { border-top: 1px solid var(--line); border-radius: 0; margin-top: 8px; padding-top: 16px; }
.letter-page .mmenu a.msub[href="/method.html"] { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 16px; }
.letter-page:has(> .nav) #about-letter, .letter-page:has(> .nav) #archive, .letter-page:has(> .nav) #signup { scroll-margin-top: 100px; }
.letter-page .archive-shortcut { margin-top: 24px; }
.letter-page .skip-link { z-index: 100; }
@media (max-width: 980px) {
  .letter-page:has(> .nav) { padding-top: 62px; }
  .letter-page:has(> .nav) #about-letter, .letter-page:has(> .nav) #archive, .letter-page:has(> .nav) #signup { scroll-margin-top: 80px; }
}
.letter-page *, .letter-page *::before, .letter-page *::after { letter-spacing: 0; }
.letter-page h1, .letter-page h2, .letter-page h3, .letter-page p { margin: 0; }
.letter-page [hidden] { display: none !important; }
.letter-page a:focus-visible, .letter-page button:focus-visible, .letter-page input:focus-visible { outline: 3px solid #476477; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; background: white; padding: 12px; }
.skip-link:focus { top: 12px; }
.letter-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }
.letter-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; padding: 18px 40px; border-bottom: 1px solid var(--line-soft); }
.letter-nav img, .letter-footer img { object-fit: contain; }
.letter-nav nav, .letter-footer nav { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.letter-nav a:hover, .letter-footer a:hover, .letter-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.letter-invitation { position: relative; isolation: isolate; display: grid; place-items: center; min-height: min(520px, calc(100svh - 160px)); padding: 44px 24px; text-align: center; }
.invitation-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.letter-invitation::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(252,251,249,.85); }
.invitation-content { width: min(100%, 700px); }
.letter-eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: #4f6272; }
.letter-invitation h1 { font-size: 62px; font-weight: 500; line-height: 1.08; margin-top: 16px; }
.letter-page .invitation-copy { font-size: 19px; line-height: 1.6; margin: 22px 0 28px; }
.letter-subscribe form { max-width: 570px; margin-inline: auto; text-align: left; }
.letter-subscribe .field label { display: block; font-size: 13px; margin-bottom: 8px; letter-spacing: 0; color: #4f6272; }
.letter-subscribe .field input::placeholder { color: #66625d; opacity: 1; }
.letter-form-line { display: flex; gap: 8px; }
.letter-form-line input { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1px solid #706e68; border-radius: 2px; background: white; font: inherit; font-size: 16px; color: var(--ink); }
.letter-form-line button { flex-shrink: 0; min-height: 52px; border: 1px solid var(--ink); border-radius: 2px; padding: 12px 18px; background: var(--ink); color: white; font: inherit; font-size: 14px; cursor: pointer; }
.letter-form-line button:hover { background: #3a352f; }
.letter-form-line button:disabled { opacity: .7; cursor: wait; }
.letter-page .signup-note { font-size: 12px; text-align: center; margin-top: 12px; color: #4c4943; }
.letter-page [data-form-error] { font-size: 14px; color: #852d2d; }
.letter-page [aria-invalid="true"] { border-color: #852d2d; }
#letter-success { padding: 12px 0; }
#letter-success h2 { font-size: 27px; }
#letter-success p { margin: 10px 0; }
#letter-success a { text-decoration: underline; text-underline-offset: 4px; }
.letter-archive { padding-block: 58px 80px; scroll-margin-top: 24px; border-top: 1px solid var(--line); }
.archive-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.archive-heading h2 { font-size: 34px; font-weight: 500; line-height: 1.2; margin-top: 12px; }
.archive-heading > p { font-size: 15px; color: var(--ink-3); }
.edition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 40px 28px; }
.edition-preview { max-width: 540px; }
.edition-cover { display: block; overflow: hidden; }
.edition-cover img { width: 100%; height: auto; aspect-ratio: 536 / 430; object-fit: cover; transition: transform .25s; }
.edition-cover:hover img { transform: scale(1.025); }
.edition-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 20px 0 10px; font-family: var(--mono); font-size: 10px; color: #4f6272; }
.edition-preview h3 { font-size: 27px; font-weight: 500; line-height: 1.2; }
.edition-preview h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.edition-preview p { font-size: 16px; margin: 14px 0 18px; color: var(--ink-2); }
.letter-text-link { display: inline-flex; gap: 20px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--ink); font-size: 14px; }
.letter-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 32px; border-top: 1px solid var(--line); }
.letter-footer p { font-size: 13px; color: var(--ink-3); }
.reading-header { max-width: 900px; margin: auto; padding: 48px 32px 36px; }
.reading-header .letter-eyebrow { margin-top: 42px; }
.reading-header h1 { font-size: 58px; font-weight: 500; line-height: 1.1; max-width: 760px; margin-top: 20px; }
.reading-header .reading-preview { font-size: 20px; margin-top: 24px; max-width: 560px; color: var(--ink-3); }
.reading-image { width: min(100%, 900px); height: auto; margin: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; }
.letter-body { max-width: 720px; margin: auto; padding: 48px 32px 64px; font-size: 19px; line-height: 1.85; }
.letter-body p { margin: 0 0 24px; }
.letter-body h2 { font-size: 13px; font-family: var(--mono); font-weight: 400; text-transform: uppercase; color: #4f6272; margin-bottom: 22px; }
.letter-body section { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 30px; }
.letter-body .letter-question { font-size: 25px; line-height: 1.5; font-weight: 500; }
.letter-body .salutation { font-size: 28px; }
.letter-body .signoff { margin-top: 42px; }
.letter-body .signoff strong { font-size: 28px; font-weight: 500; }
.reading-next { border-top: 1px solid var(--line); padding-top: 24px; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.invitation-description { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.invitation-content > .letter-text-link { margin-top: 28px; }
.letter-about, .letter-why { display: grid; grid-template-columns: 1fr 1.35fr; gap: 72px; padding-block: 72px; scroll-margin-top: 24px; }
.letter-about h2, .letter-why h2, .letter-subscribe h2 { font-size: 38px; font-weight: 500; line-height: 1.2; margin-top: 16px; }
.letter-about-copy > p, .letter-why > div > p:not(.letter-eyebrow) { font-size: 18px; line-height: 1.85; margin-bottom: 20px; }
.letter-contents { padding-block: 64px; background: #edf2f3; }
.letter-contents h2 { font-size: 34px; font-weight: 500; line-height: 1.25; margin-top: 16px; }
.letter-rhythm { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; padding: 0; margin: 40px 0 0; list-style: none; }
.letter-rhythm li { border-top: 1px solid #a7b7bf; padding-top: 24px; }
.letter-rhythm h3 { font-size: 24px; font-weight: 500; line-height: 1.3; margin: 18px 0 12px; }
.letter-rhythm p { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.letter-why .letter-welcome { font-style: italic; color: #4f6272; }
.letter-subscribe { padding-block: 64px; background: #edf2f3; scroll-margin-top: 24px; }
.subscribe-inner { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; align-items: center; }
.subscribe-inner > div > p:not(.letter-eyebrow) { font-size: 16px; margin-top: 20px; }
.subscribe-form { min-width: 0; }
@media (max-width: 700px) {
  .letter-wrap { padding-inline: 24px; }
  .letter-nav { min-height: 68px; padding: 14px 24px; gap: 16px; }
  .letter-nav img { width: 100px; height: 32px; }
  .letter-nav nav { gap: 16px; font-size: 12px; }
  .letter-invitation { padding: 32px 24px; }
  .invitation-description { font-size: 16px; }
  .letter-about, .letter-why, .subscribe-inner { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .letter-about, .letter-why { padding-block: 40px; }
  .letter-about h2, .letter-why h2, .letter-subscribe h2 { font-size: 30px; }
  .letter-about-copy > p, .letter-why > div > p:not(.letter-eyebrow) { font-size: 17px; }
  .letter-contents, .letter-subscribe { padding-block: 40px; }
  .letter-contents h2 { font-size: 28px; }
  .letter-rhythm { grid-template-columns: minmax(0,1fr); gap: 28px; margin-top: 28px; }
  .letter-rhythm li { padding-top: 18px; }
  .letter-rhythm h3 { margin-top: 10px; }
  .letter-invitation h1 { font-size: 42px; max-width: 340px; margin-inline: auto; }
  .letter-page .invitation-copy { font-size: 16px; margin: 18px 0 22px; }
  .letter-form-line { flex-direction: column; }
  .letter-form-line button { width: 100%; }
  .letter-archive { padding-block: 36px 56px; }
  .archive-heading { display: block; margin-bottom: 28px; }
  .archive-heading h2 { font-size: 28px; }
  .archive-heading > p { margin-top: 16px; }
  .letter-footer { gap: 20px; }
  .letter-footer nav { width: 100%; gap: 24px; }
  .reading-header { padding: 24px 24px 30px; }
  .reading-header h1 { font-size: 40px; }
  .reading-header .reading-preview { font-size: 18px; }
  .letter-body { padding: 32px 24px 48px; font-size: 18px; }
  .letter-body .letter-question { font-size: 23px; }
}
@media (max-height: 700px) and (max-width: 700px) {
  .letter-invitation { padding-block: 20px; }
  .letter-invitation h1 { font-size: 34px; margin-top: 10px; }
  .letter-page .invitation-copy { margin-block: 12px; }
  .letter-form-line input, .letter-form-line button { min-height: 44px; padding-block: 9px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .edition-cover img { transition: none; } }