@charset "UTF-8";
:root { color-scheme: light; --paper: #f6f3ec; --ink: #252d31; --muted: #626660; --accent: #315e83; --wash: #dce6ec; --rule: #c9cbc3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; -webkit-font-smoothing: antialiased; }
body.cinema { --accent: #8a4935; --wash: #eadace; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
main { max-width: 1320px; margin: 0 auto; padding: 0 64px; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--ink); font-family: Arial, Helvetica, sans-serif; }
.name { font-size: 18px; font-weight: 600; letter-spacing: -.5px; text-decoration: none; }
.masthead a:last-child { font-size: 12px; text-decoration: none; }
.masthead a:last-child:hover { color: var(--accent); text-decoration: underline; }
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 50px; align-items: center; padding: 62px 0 64px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--accent); font: 10px/1.5 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1.8px; margin: 0 0 25px; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
h1 { font-size: clamp(38px, 4.35vw, 60px); font-weight: 400; line-height: 1.09; letter-spacing: -2.1px; margin: 0; max-width: 680px; text-wrap: balance; }
h1 em { color: var(--accent); font-weight: 400; }
.art { margin: 0; color: var(--accent); }
.art svg { display: block; width: 100%; height: auto; }
.art figcaption { display: flex; justify-content: space-between; padding-top: 14px; color: var(--muted); font: 9px/1.5 Arial, Helvetica, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding: 42px 0 70px; border-top: 1px solid var(--rule); align-items: start; }
h2 { margin: 0 0 22px; font: 10px/1.5 Arial, Helvetica, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent); }
.bio { font-size: 17px; line-height: 1.65; margin: 0; color: #4e5657; }
.introduction { font-size: 19px; line-height: 1.65; }
.introduction p { margin: 0 0 23px; }
.introduction > p:first-of-type { font-size: 23px; line-height: 1.48; }
.newsletter { margin-top: 34px; background: var(--wash); border-left: 3px solid var(--accent); padding: 26px 28px; }
.newsletter p { font-size: 18px; margin: 0 0 20px; }
.signup { display: inline-flex; align-items: center; gap: 30px; background: var(--accent); color: #fff; padding: 13px 18px; text-decoration: none; font: 13px/1.5 Arial, Helvetica, sans-serif; transition: background .15s ease; }
.signup:hover { background: var(--ink); }
#signup-note { display: block; margin-top: 13px; color: #4e5657; font: 11px/1.5 Arial, Helvetica, sans-serif; }
footer { border-top: 1px solid var(--rule); padding: 23px 0 30px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: 10px/1.5 Arial, Helvetica, sans-serif; letter-spacing: .3px; }
@media (max-width: 900px) { main { padding: 0 32px; } .hero { gap: 30px; } h1 { font-size: 43px; } .layout { gap: 40px; grid-template-columns: 1fr 1.7fr; } }
@media (max-width: 640px) { main { padding: 0 24px; } .masthead { padding: 25px 0; gap: 12px; } .name { font-size: 16px; } .masthead a:last-child { font-size: 11px; } .hero { grid-template-columns: 1fr; padding: 38px 0 32px; gap: 28px; } h1 { font-size: clamp(36px, 9.8vw, 52px); letter-spacing: -1.4px; } .eyebrow { font-size: 9px; margin-bottom: 20px; } .art { width: 100%; max-width: 360px; justify-self: center; } .art svg { max-height: 240px; } .layout { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 42px; } .author-card { border-bottom: 1px solid var(--rule); padding-bottom: 30px; } .monogram { float: left; margin: 0 15px 0 0; width: 34px; height: 34px; font-size: 17px; } .author-card h2 { padding-top: 9px; margin-bottom: 22px; } .bio { font-size: 16px; } .introduction { font-size: 18px; } .introduction > p:first-of-type { font-size: 21px; } .newsletter { padding: 23px 21px; } footer { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .signup { transition: none; } }

/* Identity leads; the newsletter follows. */
.identity { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; }
.identity h1 { font-size: clamp(48px, 5.8vw, 78px); margin-bottom: 26px; max-width: 620px; }
.identity .bio { max-width: 620px; font-size: 20px; line-height: 1.65; }
.portrait-block { margin: 0; width: 100%; max-width: 340px; justify-self: end; }
.portrait { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--wash); border: 1px solid var(--rule); }
.portrait-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; color: var(--accent); }
.portrait-placeholder svg { width: 38%; fill: currentColor; opacity: .3; }
.portrait-placeholder span { font: 11px/1.5 Arial, sans-serif; letter-spacing: .5px; }
.portrait-block figcaption { margin-top: 12px; color: var(--muted); font: 11px/1.5 Arial, sans-serif; }
.section-label { color: var(--accent); font: 10px/1.5 Arial, sans-serif !important; letter-spacing: 1.6px; text-transform: uppercase; scroll-margin-top: 30px; }
.introduction h2 { font: 400 clamp(30px, 3vw, 42px)/1.15 Georgia, serif; letter-spacing: -1px; text-transform: none; color: var(--ink); margin-bottom: 28px; text-wrap: balance; }
.introduction h2 em { color: var(--accent); }
.newsletter-art .art { max-width: 290px; }
@media (max-width: 900px) { .identity { gap: 35px; } .identity h1 { font-size: 54px; } .identity .bio { font-size: 18px; } }
@media (max-width: 640px) {
  .identity { grid-template-columns: 1fr; gap: 26px; }
  .identity-copy { display: contents; }
  .identity .eyebrow { grid-row: 1; margin: 0; }
  .identity h1 { grid-row: 2; margin: -10px 0 0; font-size: 48px; }
  .portrait-block { grid-row: 3; justify-self: start; max-width: 240px; }
  .identity .bio { grid-row: 4; font-size: 18px; }
  .newsletter-art { display: none; }
}