@font-face{font-family:'Young Serif';src:url(/fonts/young-serif-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/fonts/instrument-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/fonts/instrument-sans-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/fonts/instrument-sans-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Reenie Beanie';src:url(/fonts/reenie-beanie-latin-400-normal.woff2) format('woff2');font-display:swap}
:root{--paper:#f4ecdf;--ink:#2b2420;--mut:#5e5247;--rust:#a8471c;--sage:#5d7a52;--line:#d8c9b4;--card:#fffaf1;
--serif:'Young Serif',Georgia,serif;--sans:'Instrument Sans',system-ui,sans-serif;--hand:'Reenie Beanie',cursive}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:18px/1.62 var(--sans);background-color:var(--paper);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0}
a{color:var(--rust)}
.hand{font-family:var(--hand);font-size:1.6em;line-height:1;color:var(--rust)}
.mast{display:flex;justify-content:space-between;align-items:center;max-width:1240px;margin:0 auto;padding:26px 32px;border-bottom:1.5px solid var(--ink)}
.brand{display:flex;gap:10px;align-items:center;font-family:var(--serif);font-size:21px;color:var(--ink);text-decoration:none}.brand svg{width:20px;height:25px;color:var(--rust)}
nav{display:flex;gap:28px;align-items:center}nav a{color:var(--ink);text-decoration:none;font-size:15px}
.talk{display:inline-block;background:var(--ink);color:var(--paper)!important;text-decoration:none;padding:9px 18px;border-radius:3px;font:600 15px var(--sans);border:0;cursor:pointer;box-shadow:3px 3px 0 var(--rust);transition:transform .15s,box-shadow .15s}
.talk:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--rust)}.talk.big{padding:15px 26px;font-size:16px}
section{max-width:1240px;margin:0 auto;padding:96px 32px}
.open{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:end;padding-top:84px}
.kicker{font-size:15px;color:var(--mut);margin:0 0 26px;max-width:30ch}
h1{font-size:clamp(44px,6.6vw,92px);letter-spacing:-.02em}
.mark{position:relative;white-space:nowrap}.mark:after{content:'';position:absolute;left:-4%;right:-6%;bottom:-.06em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C50 4 120 2 197 9' fill='none' stroke='%23a8471c' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.note{background:var(--card);padding:32px;transform:rotate(1.2deg);box-shadow:0 1px 0 var(--line),0 22px 40px -28px #4a311c88;position:relative;border-top:10px solid #e5d3b5}
.note p{margin:0 0 16px;font-size:17px}.scribble{position:absolute;width:110px;right:-24px;bottom:-34px}
.letter{max-width:820px;padding-top:24px}.letter p{font-size:21px;color:var(--mut);margin:0 0 20px}
.drop:first-letter{font-family:var(--serif);float:left;font-size:4.4em;line-height:.8;padding:8px 12px 0 0;color:var(--rust)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;border-bottom:1.5px solid var(--ink);padding-bottom:28px;margin-bottom:24px}
h2{font-size:clamp(34px,4.4vw,58px)}.sec-head p{color:var(--mut);font-size:15px;justify-self:end;margin:0;max-width:30ch}
.fix{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px dashed var(--line)}
.fix.flip{grid-template-columns:7fr 5fr}.fix.flip .fix-text{order:2}
.fix-n{font-family:var(--serif);font-size:15px;color:var(--rust);display:block;margin-bottom:12px}
.fix h3{font-size:clamp(28px,3vw,38px);margin-bottom:16px}.fix p{color:var(--mut);margin:0;max-width:44ch}
.fix-art{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:6px}
.fix-art figure{margin:0}.fix-art svg{width:100%;height:auto;display:block}
.before svg{transform:rotate(-2.5deg);filter:grayscale(.4)}.after svg{transform:rotate(1.5deg)}
.fix-art figcaption{font-size:13.5px;color:var(--mut);margin-top:12px;line-height:1.4}.fix-art figcaption .hand{display:block;font-size:28px}
.arrow{width:70px}
.how h2{margin-bottom:48px;max-width:12ch}
.diary{border-left:1.5px solid var(--ink);margin-left:12%;padding-left:40px}
.entry{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:22px 0;max-width:820px}.day{font-size:34px}.entry p{margin:0;color:var(--mut)}.entry strong{color:var(--ink);font-weight:600}
.cost{display:flex;justify-content:flex-end}.cost-card{max-width:640px;border:1.5px solid var(--ink);padding:44px;background:var(--card);transform:rotate(-.6deg)}
.cost-card h2{font-size:40px;margin-bottom:18px}.cost-card p{color:var(--mut);margin:0 0 14px}.aside{font-size:30px!important;color:var(--rust)!important}
.ask{display:grid;grid-template-columns:1fr 2fr;gap:56px}.ask h2{font-size:40px;max-width:9ch}
dl{margin:0;columns:2;column-gap:48px}dt{font-family:var(--serif);font-size:21px;margin-top:4px;break-after:avoid}dd{margin:6px 0 26px;color:var(--mut);font-size:16.5px;break-inside:avoid}
.talk-sec{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;border-top:1.5px solid var(--ink)}
.talk-intro p{color:var(--mut)}.sig{font-family:var(--hand);font-size:64px!important;color:var(--ink)!important;margin:30px 0 0;line-height:1}.sig-sub{margin:0;font-size:14px}
form{display:grid;gap:18px;background:var(--card);padding:36px;box-shadow:0 22px 40px -30px #4a311c88}.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:6px;font-size:14px;font-weight:500}.opt{color:var(--mut);font-weight:400}
input,select,textarea{font:16px var(--sans);padding:12px 2px;border:0;border-bottom:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:0}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--rust)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}form .talk{justify-self:start}
.status{margin:0;font-size:15px}.ok{color:var(--sage)}.err{color:#9b2c12}
.foot{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;padding:28px 32px 44px;border-top:1.5px solid var(--ink);font-size:14px;color:var(--mut)}.foot a{color:var(--mut)}
@media(max-width:900px){body{font-size:17px}section{padding:64px 22px}.mast{padding:18px 22px}nav a:not(.talk){display:none}
.open,.sec-head,.fix,.fix.flip,.ask,.talk-sec{grid-template-columns:1fr;gap:32px}.fix.flip .fix-text{order:0}.sec-head p{justify-self:start}
.note{transform:none}.scribble{display:none}.diary{margin-left:0;padding-left:20px}.entry{grid-template-columns:1fr;gap:4px}dl{columns:1}.letter p{font-size:19px}.fix-art{grid-template-columns:1fr 40px 1fr}.arrow{width:40px}form{padding:24px}}
@media(max-width:520px){.row{grid-template-columns:1fr}}

/* ===== v4 polish layer: spacing scale + 12-col grid, no ad-hoc offsets ===== */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
--maxw:1200px;--pad:var(--s6);--gut:var(--s5);--cols:12}
section,.mast,.foot{max-width:calc(var(--maxw) + 2*var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
section{padding-top:var(--s9);padding-bottom:var(--s9)}
.grid12,.open,.letter,.sec-head,.fix,.fix.flip,.how,.cost,.ask,.talk-sec{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s6)}
/* hero: headline 1–7, note 9–12, bottoms aligned */
.open{align-items:end;padding-top:var(--s8)}.open-head{grid-column:1/span 7}.note{grid-column:9/span 4;transform:none;margin:0;padding:var(--s6)}
.kicker{margin:0 0 var(--s5)}.note p{margin:0 0 var(--s4)}.note .talk{margin-top:var(--s2)}
/* letter: text in cols 3–10 */
.letter{padding-top:0}.letter>p{grid-column:3/span 8;margin:0;max-width:none}.letter>p+p{margin-top:calc(-1*var(--s6) + var(--s4))}
/* fixes */
.sec-head{grid-column:1/-1;align-items:end;padding-bottom:var(--s5);margin-bottom:0}.sec-head h2{grid-column:1/span 7}.sec-head p{grid-column:9/span 4;justify-self:stretch;max-width:none}
.fixes{display:block}
.fix{align-items:center;padding:var(--s8) 0;gap:var(--gut)}
.fix .fix-text{grid-column:1/span 5;order:0}.fix .fix-art{grid-column:7/span 6}
.fix.flip .fix-text{grid-column:8/span 5;order:2}.fix.flip .fix-art{grid-column:1/span 6;grid-row:1}
.fix-n{margin-bottom:var(--s3)}.fix h3{margin-bottom:var(--s4)}
.fix-art{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:var(--s3);align-items:start}
.fix-art .arrow{width:56px;align-self:center;margin-top:-48px}
.before svg,.after svg{transform:none}
.fix-art figcaption{margin-top:var(--s3);min-height:4.2em}.fix-art figcaption .hand{font-size:26px;margin-bottom:var(--s1)}
/* how: title cols 1–4, diary 5–12 */
.how h2{grid-column:1/span 4;margin:0;max-width:none}.diary{grid-column:5/span 8;margin:0;padding-left:var(--s6)}
.entry{grid-template-columns:120px minmax(0,1fr);gap:var(--s5);padding:var(--s4) 0;max-width:none;align-items:baseline}.day{font-size:30px;line-height:1}
/* cost: card cols 5–12, no rotation */
.cost{display:grid}.cost-card{grid-column:5/span 8;transform:none;max-width:none;padding:var(--s7)}.cost-card h2{margin-bottom:var(--s4)}.cost-card p{margin:0 0 var(--s3)}
/* ask: title 1–4, Q&A grid 5–12, aligned pairs */
.ask h2{grid-column:1/span 4;max-width:none}
.ask dl{grid-column:5/span 8;columns:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);row-gap:var(--s6);margin:0}
.qa dt{margin:0 0 var(--s2)}.qa dd{margin:0}
/* talk */
.talk-sec{align-items:start}.talk-intro{grid-column:1/span 5}.talk-sec form{grid-column:7/span 6}
.talk-intro p{margin:0 0 var(--s4)}.sig{margin:var(--s6) 0 0!important}
form{gap:var(--s4);padding:var(--s6)}.row{gap:var(--s4)}
.foot{padding-top:var(--s6);padding-bottom:var(--s7)}
.mast{padding-top:var(--s5);padding-bottom:var(--s5)}
@media(max-width:900px){:root{--pad:20px;--gut:16px}section{padding-top:var(--s8);padding-bottom:var(--s8)}
 .open,.letter,.sec-head,.fix,.fix.flip,.how,.cost,.ask,.talk-sec{grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
 .open-head,.note,.letter>p,.sec-head h2,.sec-head p,.fix .fix-text,.fix .fix-art,.fix.flip .fix-text,.fix.flip .fix-art,.how h2,.diary,.cost-card,.ask h2,.ask dl,.talk-intro,.talk-sec form{grid-column:1/-1;grid-row:auto;order:0}
 .letter>p+p{margin-top:0}.fix{padding:var(--s7) 0}.fix-art{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:var(--s2)}.fix-art .arrow{width:32px;margin-top:-40px}
 .diary{padding-left:var(--s4)}.entry{grid-template-columns:minmax(0,1fr);gap:var(--s1)}.ask dl{grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}.cost-card{padding:var(--s5)}form{padding:var(--s5)}}
h1,h2,h3{text-wrap:balance}h1{font-size:clamp(40px,5.6vw,80px);max-width:none}
.mark:after{left:0;right:0}
label{display:block}label input,label select,label textarea{display:block;width:100%;margin-top:var(--s2)}.opt{display:inline}
.talk-intro h2,.ask h2,.how h2{margin-bottom:var(--s4)}
.letter{padding-bottom:var(--s8)}
.cf-turnstile:empty{display:none}
/* v4 alignment fixes, desktop only (>900px) */
@media(min-width:901px){
 /* hero: top-aligned; note 8–12, pushed down by the kicker (2 lines of 15px/1.62 + --s5) so it starts level with the h1 */
 .open{align-items:start}.note{grid-column:8/span 5;margin-top:calc(2*15px*1.62 + var(--s5))}}
/* privacy + 404 */
.doc{max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:var(--s8) var(--pad)}
.doc-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);border-bottom:1.5px solid var(--ink);padding-bottom:var(--s5)}
.doc-head>*{grid-column:1/span 9}
.doc-head h1{font-size:clamp(40px,5.4vw,72px)}
.doc-date{margin:var(--s4) 0 0;color:var(--mut);font-size:15px}
.doc-body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);padding-top:var(--s5)}
.doc-body>*{grid-column:1/span 7;margin:0 0 var(--s4)}
.doc-body h2{font-size:28px;margin:var(--s6) 0 var(--s3)}
.doc-body h2:first-child{margin-top:0}
.doc-body ul{padding-left:1.2em}
.doc-body li{margin-bottom:var(--s2)}
.doc-sign{margin-top:var(--s6)!important;padding-top:var(--s4);border-top:1px solid var(--line);color:var(--mut);font-size:15px}
.foot-links{display:flex;gap:var(--s5);flex-wrap:wrap}
@media(max-width:900px){.doc{padding:var(--s7) var(--pad)}.doc-head>*,.doc-body>*{grid-column:1/-1}.doc-body h2{font-size:24px}.foot{flex-wrap:wrap;gap:var(--s3)}}