:root { --paper:#f4efe4; --sheet:#fbf8f1; --kraft:#e6d8bd; --rule:#d9d1c1; --ink:#1f2a44; --soft:#56607a; --pencil:#b5412c; --wash:#e9ecf2; --serif:"Newsreader","Iowan Old Style",Georgia,serif; --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 18px/1.65 var(--serif); }
a { color:inherit; } a:hover { color:var(--pencil); }
button { font:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid var(--pencil); outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; letter-spacing:-.025em; }
h2 { font-size:clamp(2.5rem,4.4vw,4rem); line-height:1.07; }
h3 { font-size:clamp(1.7rem,2.3vw,2.1rem); line-height:1.12; }
em { font-weight:400; }
.container { width:min(100% - clamp(40px,10vw,128px),1200px); margin-inline:auto; }
.narrow { width:min(100% - clamp(40px,18vw,280px),920px); margin-inline:auto; }
.section { padding-block:clamp(90px,11vw,160px); }
.skip-link { position:fixed; top:-70px; left:15px; z-index:100; background:var(--ink); color:var(--sheet); padding:10px; font:500 14px var(--sans); }.skip-link:focus { top:15px; }
.site-header { height:72px; padding-inline:clamp(20px,5vw,64px); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:30; border-bottom:1px solid var(--rule); background:var(--paper); }
.wordmark { font:italic 400 27px/1 var(--serif); letter-spacing:-.035em; text-decoration:none; white-space:nowrap; }.wordmark:hover { color:var(--ink); }
.site-nav { display:flex; align-items:center; gap:clamp(18px,2.6vw,38px); }
.site-nav a { font:500 14px var(--sans); text-decoration:none; }.site-nav .nav-status { text-decoration:underline; text-underline-offset:5px; }
.menu-toggle { display:none; }
.hero { min-height:calc(100svh - 72px); display:flex; align-items:center; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(32px,5vw,80px); align-items:center; padding-block:25px 35px; }
.hero-copy { position:relative; z-index:2; padding-block:0; }
.hero h1 { font-size:clamp(3.3rem,5vw,5.5rem); line-height:1.04; font-weight:350; margin-bottom:22px; max-width:690px; }
.hero h1 em { display:block; font-style:italic; }
.hero-copy>p { max-width:570px; color:var(--soft); font-size:clamp(19px,1.45vw,22px); line-height:1.52; margin-bottom:24px; }
.hero-actions { display:flex; flex-direction:column; align-items:flex-start; gap:21px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:12px 27px; font:500 16px var(--sans); text-decoration:none; border-radius:2px; transition:transform .2s,box-shadow .2s; }
.button-primary { background:var(--ink); color:var(--sheet); gap:9px; }.button-primary:hover { color:var(--sheet); transform:translateY(-2px); box-shadow:0 7px 20px -10px var(--ink); }
.button small { font:400 12px var(--sans); opacity:.74; border-left:1px solid rgba(255,255,255,.4); padding-left:10px; }
.text-link { font:500 15px var(--sans); text-decoration:underline; text-underline-offset:6px; }.text-link span { margin-left:5px; }
.hero-art { min-width:0; height:660px; position:relative; }
.envelope { position:absolute; width:104%; height:45%; background:var(--kraft); left:0; bottom:0; transform:rotate(1deg); box-shadow:0 18px 30px -25px rgba(31,42,68,.35); }
.envelope::before { content:""; position:absolute; inset:0; background:linear-gradient(148deg,transparent 49.8%,rgba(214,194,159,.7) 50%) left/50% 100% no-repeat,linear-gradient(212deg,transparent 49.8%,rgba(214,194,159,.7) 50%) right/50% 100% no-repeat; }
.envelope::after { content:""; position:absolute; left:0; right:0; bottom:0; height:64%; clip-path:polygon(0 100%,50% 3%,100% 100%); background:#eadcc2; }
.letter { position:absolute; top:2%; left:8%; width:90%; min-height:540px; padding:42px 44px 56px; background:var(--sheet); border:1px solid var(--rule); transform:rotate(1.5deg); box-shadow:0 24px 48px -24px rgba(31,42,68,.18); }
.email-meta { font:14px/1.6 var(--sans); color:var(--soft); border-bottom:1px solid var(--rule); padding-bottom:13px; margin-bottom:26px; }.email-meta p { margin:0; }.email-meta span { display:inline-block; width:70px; color:var(--ink); font-weight:600; }
.letter-body { max-width:390px; font-size:clamp(17px,1.5vw,20px); line-height:1.45; }.letter-body p { margin-bottom:17px; }
del { text-decoration-color:var(--pencil); text-decoration-thickness:2px; text-decoration-skip-ink:none; }
.margin-note { position:absolute; top:45%; right:2%; color:var(--pencil); font:italic 19px/1.1 var(--serif); transform:rotate(-5deg); text-align:right; }
.postmark { width:120px; height:120px; border:2px solid var(--ink); border-radius:50%; position:absolute; top:8px; right:12px; color:var(--ink); opacity:.68; transform:rotate(-11deg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.postmark::before { content:""; position:absolute; inset:5px; border:1px solid var(--ink); border-radius:50%; }
.postmark span { font:600 9px var(--sans); letter-spacing:.07em; text-transform:uppercase; }.postmark strong { font:500 21px/.96 var(--serif); text-transform:uppercase; }.postmark i { position:absolute; left:-84px; top:62px; width:85px; height:26px; background:repeating-linear-gradient(to bottom,transparent 0 4px,var(--ink) 5px 6px,transparent 7px 8px); transform:rotate(8deg); }
.how { border-top:1px solid var(--rule); }
.how h2 { max-width:700px; margin-bottom:64px; }.how h2 em { font-style:italic; }
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:grid; grid-template-columns:60px 1fr; gap:25px; border-top:1px solid var(--rule); padding:27px 0 34px; }.steps li:last-child { border-bottom:1px solid var(--rule); }
.number { font:italic 38px/1 var(--serif); color:var(--soft); }
.step-line { display:flex; align-items:baseline; gap:15px; }.step-line h3 { margin:0; white-space:nowrap; }.step-line .leader { flex:1; border-bottom:1px dotted var(--soft); transform:translateY(-4px); }.step-line em { font:italic 19px var(--serif); color:var(--soft); white-space:nowrap; }
.step-main p { max-width:650px; margin:13px 0 0; font-size:18px; line-height:1.56; color:var(--soft); }
.sample { background:#ede7dc; }
.sample-heading { text-align:center; margin-bottom:55px; }.sample-heading h2 { margin-bottom:10px; }.sample-heading p { font-style:italic; font-size:21px; color:var(--soft); }
.spread { display:grid; grid-template-columns:1fr 1fr; background:var(--sheet); border:1px solid var(--rule); box-shadow:0 18px 45px -32px rgba(31,42,68,.2); }
.draft-page,.reply-page { padding:clamp(30px,4vw,62px); min-width:0; }.draft-page { border-right:1px solid var(--rule); }.draft-page .email-meta { margin-bottom:46px; }
.draft-content { font-size:clamp(20px,1.9vw,26px); line-height:1.38; }.draft-content p { margin-bottom:30px; }
.editor-notes { list-style:none; counter-reset:notes; margin:40px 0 0; padding:20px 0 0; border-top:1px solid var(--rule); color:var(--pencil); font:italic 18px/1.4 var(--serif); }.editor-notes li { counter-increment:notes; margin-bottom:8px; }.editor-notes li::before { content:counter(notes) ". "; font:500 12px var(--sans); }
.reply-header { display:flex; justify-content:space-between; align-items:start; gap:10px; margin-bottom:30px; }.reply-header>span { font:italic 24px var(--serif); }.reply-postmark { width:103px; height:103px; border:2px solid var(--ink); box-shadow:inset 0 0 0 4px var(--sheet),inset 0 0 0 5px var(--ink); border-radius:50%; opacity:.65; transform:rotate(-12deg); display:flex; align-items:center; justify-content:center; text-align:center; font:500 19px/1 var(--serif); }
.sample-question { font:500 13px/1.45 var(--sans); color:var(--soft); margin-bottom:10px; }.sample-answer { font:400 28px/1.14 var(--serif); border-bottom:1px solid var(--rule); padding-bottom:28px; margin-bottom:27px; }
.reply-page section { margin-bottom:27px; }.reply-page section h3,.suggestion h3 { font:500 23px/1.1 var(--serif); margin-bottom:9px; }.reply-page section p,.suggestion p { font-size:18px; line-height:1.5; margin:0; }
.suggestion { background:var(--wash); border:1px solid #d0d7e2; padding:22px; }.suggestion h3 { margin-bottom:10px; }
.sample-link { display:inline-block; margin-top:34px; }
.readers h2 { margin-bottom:55px; }
.signature { border-top:1px solid var(--rule); padding:25px 0 30px; }.signature h3 { font-style:italic; margin-bottom:9px; }.signature p { color:var(--soft); font-size:19px; margin:0; }.signature+.signature { border-bottom:1px solid var(--rule); }
.reader-note { font:14px/1.5 var(--sans); color:var(--soft); margin:23px 0 0; }
.closed { background:var(--ink); color:var(--sheet); padding-block:clamp(90px,11vw,155px); }.closed-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:55px; align-items:end; }
.closed h2 { max-width:700px; margin-bottom:30px; }.closed h2 em { font-style:italic; }.closed p { color:#cfd4dd; max-width:620px; font-size:20px; line-height:1.52; }
.closed-action { text-align:right; }.closed-action button { background:var(--sheet); color:var(--ink); border:1px dashed var(--ink); border-radius:2px; width:min(100%,310px); min-height:58px; padding:11px 20px; display:flex; justify-content:space-between; align-items:center; cursor:not-allowed; font:500 17px var(--sans); }
.closed-action p { font:12px var(--sans); margin:12px 0 27px; }.closed-action a { font:500 14px var(--sans); text-decoration:underline; text-underline-offset:5px; }.closed-action a:hover { color:var(--sheet); }
.site-footer { padding:44px 0 60px; border-top:1px solid var(--rule); }.site-footer .container { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:25px; }.site-footer p,.site-footer a { margin:0; color:var(--soft); font:400 13px/1.55 var(--sans); }.site-footer p:first-child { color:var(--ink); }.site-footer a { text-align:right; }.site-footer a:hover { color:var(--pencil); }
@media(max-width:1000px) {
  .hero-grid { grid-template-columns:1fr 1fr; gap:24px; }.hero h1 { font-size:clamp(3.25rem,5.4vw,5.5rem); }.hero-art { height:590px; }.letter { min-height:510px; padding:35px 25px 45px; }.margin-note { font-size:15px; }
  .spread { grid-template-columns:1fr 1fr; }.draft-page,.reply-page { padding:30px; }.draft-content { font-size:20px; }
}
@media(max-width:820px) {
  .site-header { height:60px; }.wordmark { font-size:24px; }.menu-toggle { display:block; border:0; background:none; color:var(--ink); font:500 14px var(--sans); cursor:pointer; }
  .site-nav { display:none; position:absolute; top:60px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 18px 25px -20px rgba(31,42,68,.25); padding:24px; flex-direction:column; align-items:start; gap:19px; }.site-nav.is-open { display:flex; }.site-nav a { font:400 29px var(--serif); }
  .hero { min-height:0; }.hero-grid { display:block; padding-top:70px; padding-bottom:90px; }.hero-copy { padding:0; }.hero h1 { font-size:clamp(3.1rem,8vw,5.5rem); max-width:700px; }.hero-copy>p { max-width:650px; }
  .hero-art { max-width:600px; margin:65px auto 0; height:630px; }.letter { min-height:550px; padding:42px; }
  .spread { display:block; }.draft-page { border-right:0; border-bottom:1px solid var(--rule); }.draft-page,.reply-page { padding:clamp(25px,6vw,55px); }.draft-content { font-size:24px; }
  .closed-grid { display:block; }.closed-action { text-align:left; margin-top:50px; }.closed-action button { width:100%; max-width:350px; }.site-footer .container { grid-template-columns:1fr 1fr; }.site-footer a { text-align:left; }
}
@media(max-width:520px) {
  .container,.narrow { width:min(100% - 36px,1200px); }.hero-grid { padding-top:54px; }.hero h1 { font-size:clamp(47px,11.5vw,64px); margin-bottom:25px; }.hero-copy>p { font-size:18px; }.hero-art { margin-top:50px; height:475px; width:100%; }
  .envelope { height:38%; }.letter { left:4%; width:93%; min-height:420px; padding:25px 23px; }.email-meta { font-size:11px; margin-bottom:19px; }.email-meta span { width:55px; }.letter-body { font-size:16px; }.letter-body p { margin-bottom:12px; }.margin-note { right:4%; top:44%; font-size:13px; }.postmark { width:75px; height:75px; right:3px; top:5px; }.postmark::before { inset:3px; }.postmark span { font-size:6px; }.postmark strong { font-size:13px; }.postmark i { display:none; }
  .steps li { grid-template-columns:35px 1fr; gap:16px; }.number { font-size:31px; }.step-line { display:block; }.step-line h3 { white-space:normal; }.step-line .leader { display:none; }.step-line em { display:block; font-size:17px; }.step-main p { font-size:17px; }
  .sample-heading { text-align:left; }.draft-content { font-size:21px; }.reply-page section p,.suggestion p { font-size:17px; }.reply-header { margin-bottom:20px; }.reply-postmark { width:80px; height:80px; font-size:15px; }.sample-answer { font-size:25px; }
  .closed p { font-size:18px; }.site-footer .container { display:block; }.site-footer p,.site-footer a { display:block; margin-bottom:22px; }.site-footer a { text-align:left; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }