:root { --table:#173d35; --table-dark:#102e28; --paper:#f2ecdf; --paper-shadow:#d7c9b1; --ink:#263b32; --muted:#6d746c; --clay:#ad5d3d; --gold:#c99750; --line:rgba(38,59,50,.2); --serif:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif; --hand:'Comic Sans MS','Segoe Print',cursive; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--table-dark); }
body { min-width:320px; height:100svh; min-height:100svh; margin:0; overflow:hidden; color:var(--ink); background:var(--table-dark); font-family:var(--sans); line-height:1.6; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.11; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode:screen; }
button { font:inherit; cursor:pointer; } a { color:inherit; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:100; padding:10px 14px; color:var(--paper); background:var(--table-dark); border:1px solid var(--gold); }.skip-link:focus { top:12px; }
#experience { position:relative; width:100%; height:100svh; overflow:hidden; }
.screen { position:absolute; inset:0; display:none; overflow:hidden; }.screen.is-active { display:block; }.screen[hidden] { display:none; }

/* Cover */
.cover-screen { background:radial-gradient(ellipse at 50% 15%,#31584b 0,#173d35 46%,#102e28 100%); }.table-marks { position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.7; }.table-route { position:absolute; right:-8%; bottom:10%; width:58%; height:32%; border:1px solid rgba(201,151,80,.35); border-width:1px 0 0 1px; border-radius:100% 0 0 0; transform:rotate(-12deg); }.table-route::after { content:""; position:absolute; top:-5px; left:12%; width:9px; height:9px; border-radius:50%; background:var(--gold); }.table-note { position:absolute; left:6%; bottom:19%; color:rgba(242,236,223,.3); font:14px var(--hand); transform:rotate(-7deg); }
.cover-letter { position:absolute; top:50%; left:50%; width:min(650px,calc(100% - 30px)); height:min(820px,calc(100% - 46px)); overflow:hidden; transform:translate(-50%,-50%) rotate(-.6deg); color:var(--ink); background:var(--paper); box-shadow:18px 22px 0 rgba(5,22,18,.12),0 25px 70px rgba(0,0,0,.3); }
.cover-letter::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(38,59,50,.08) 32px 33px); }.cover-letter-top { position:absolute; top:28px; right:38px; left:38px; z-index:2; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.03em; }.cover-page { color:var(--clay); font-family:var(--serif); }
.cover-content { position:relative; z-index:3; width:75%; margin:0 auto; padding-top:18%; }.cover-kicker { margin:0 0 19px; color:var(--clay); font:12px var(--hand); transform:rotate(-2deg); }.cover-content h1 { margin:0; color:var(--ink); font:600 clamp(48px,8vw,76px)/.9 var(--serif); letter-spacing:-.055em; }.cover-content h1 em { color:var(--clay); font-style:normal; }.cover-subtitle { max-width:350px; margin:27px 0 30px; color:var(--muted); font:500 21px/1.3 var(--serif); }.cover-facts { display:flex; width:max-content; max-width:100%; flex-direction:column; gap:2px; padding:10px 0 10px 17px; border-left:2px solid var(--gold); color:var(--muted); font-size:12px; }.cover-facts strong { color:var(--ink); font:500 20px var(--serif); }.cover-handnote { margin:36px 0 0 16%; color:var(--clay); font:16px var(--hand); transform:rotate(-3deg); }
.cover-illustration { position:absolute; right:0; bottom:12%; left:0; height:30%; opacity:.6; }.hill { position:absolute; bottom:0; display:block; background:rgba(68,103,81,.18); clip-path:polygon(0 100%,50% 0,100% 100%); }.hill-far { right:0; width:70%; height:92%; }.hill-near { left:-12%; width:76%; height:65%; background:rgba(173,93,61,.12); }.river-line { position:absolute; bottom:-8%; left:42%; width:22%; height:72%; border-left:1px solid rgba(68,111,108,.6); border-radius:50%; transform:rotate(18deg); }
.fold-trigger { position:absolute; right:0; bottom:0; z-index:5; width:126px; height:112px; overflow:hidden; padding:0; border:0; color:var(--clay); background:transparent; text-align:left; }.fold-paper { position:absolute; right:-4px; bottom:-4px; display:block; width:112px; height:97px; background:linear-gradient(135deg,transparent 49%,#d8c9af 50%); filter:drop-shadow(-3px -3px 2px rgba(38,59,50,.14)); transition:transform .25s ease; }.fold-label { position:absolute; right:30px; bottom:31px; font:16px var(--hand); transform:rotate(-9deg); }.fold-arrow { position:absolute; right:12px; bottom:17px; font-size:18px; transform:rotate(-9deg); }.fold-trigger:hover .fold-paper,.fold-trigger:focus-visible .fold-paper,.fold-trigger:active .fold-paper { transform:translate(-6px,-6px); }.fold-trigger:hover .fold-label,.fold-trigger:focus-visible .fold-label { color:var(--gold); }.cover-outside-note { position:absolute; right:6%; bottom:4%; margin:0; color:rgba(242,236,223,.46); font:12px var(--hand); transform:rotate(3deg); }

/* Open letter */
.interior-screen { overflow-y:auto; padding:35px 16px 60px; background:radial-gradient(ellipse at 50% 0,#31584b 0,#173d35 58%,#102e28 100%); }.interior-toolbar { display:flex; width:min(820px,100%); justify-content:space-between; margin:0 auto 18px; color:rgba(242,236,223,.75); font-size:11px; }.back-cover { padding:4px 0; border:0; color:rgba(242,236,223,.82); background:none; font:14px var(--hand); }.back-cover:hover,.back-cover:focus-visible { color:var(--gold); }.letter-paper { position:relative; width:min(820px,100%); min-height:100%; margin:0 auto; padding:58px clamp(24px,7vw,92px) 44px; overflow:hidden; color:var(--ink); background:var(--paper); box-shadow:16px 20px 0 rgba(5,22,18,.15),0 25px 70px rgba(0,0,0,.28); }.letter-paper::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.15; background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(38,59,50,.09) 36px 37px); }.letter-paper::after { content:""; position:absolute; top:0; right:0; bottom:0; width:12px; opacity:.18; background:linear-gradient(90deg,transparent,rgba(38,59,50,.2)); }.letter-header,.letter-flow,.letter-footer { position:relative; z-index:1; }.letter-page-mark { display:flex; justify-content:space-between; margin-bottom:38px; color:var(--muted); font-size:10px; letter-spacing:.04em; }.letter-page-mark span:last-child { color:var(--clay); font-family:var(--serif); }.letter-header h2 { max-width:610px; margin:0; color:var(--ink); font:600 clamp(40px,7vw,68px)/.96 var(--serif); letter-spacing:-.05em; }.letter-lede { max-width:480px; margin:22px 0 30px; color:var(--muted); font:500 21px/1.3 var(--serif); }.practical-note { display:flex; max-width:510px; flex-direction:column; gap:2px; padding:12px 0 12px 17px; border-left:2px solid var(--gold); color:var(--muted); font-size:12px; }.practical-note strong { color:var(--ink); font:500 19px var(--serif); }.letter-thread { position:absolute; top:350px; bottom:170px; left:clamp(18px,5vw,66px); width:1px; background:repeating-linear-gradient(to bottom,var(--gold) 0 15px,transparent 15px 29px); opacity:.6; }.letter-flow { max-width:620px; margin:76px auto 0; }.letter-entry { position:relative; margin:0 0 88px; padding-left:28px; }.margin-mark { position:absolute; top:2px; left:-12px; color:var(--clay); font:12px var(--serif); }.entry-label { margin:0 0 14px; color:var(--clay); font:16px var(--hand); transform:rotate(-2deg); }.letter-entry p:not(.entry-label):not(.hand-note):not(.pencil-note):not(.closing-note) { margin:0 0 19px; font-size:17px; }.letter-entry h3 { margin:0 0 13px; color:var(--ink); font:500 29px/1.1 var(--serif); }.hand-note,.pencil-note { color:var(--clay); font:16px var(--hand); }.hand-note { margin:26px 0 0 12%; transform:rotate(-2deg); }.pencil-note { margin:23px 0 0 43%; color:var(--muted); transform:rotate(3deg); }.sketch-place { position:relative; height:115px; margin:23px 0 0; border-bottom:1px solid rgba(38,59,50,.2); }.sketch-hill { position:absolute; bottom:0; left:13%; width:68%; height:87px; border-top:2px solid var(--moss); border-radius:50% 50% 0 0; transform:skewX(-22deg); }.sketch-river { position:absolute; right:24%; bottom:-3px; width:35px; height:108px; border-left:2px solid #6e9c98; border-radius:50%; transform:rotate(25deg); }.sketch-dot { position:absolute; top:42px; left:49%; width:8px; height:8px; border-radius:50%; background:var(--clay); box-shadow:0 0 0 5px rgba(173,93,61,.14); }.possibility-notes { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:31px 0; }.possibility-notes p { margin:0; padding:12px; border-top:1px solid var(--line); color:var(--clay); font:17px var(--hand); transform:rotate(-1deg); }.possibility-notes p:nth-child(2) { transform:rotate(2deg); }.possibility-notes em { color:var(--muted); font-size:13px; }.stay-line { display:flex; flex-wrap:wrap; gap:0; margin:29px 0 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.stay-line span { flex:1 1 25%; padding:10px 7px; color:var(--muted); font:14px var(--hand); text-align:center; }.stay-line span + span { border-left:1px solid var(--line); }.loose-note { width:min(100%,330px); margin:28px 0 0 auto; padding:13px 16px; border:1px solid rgba(173,93,61,.36); background:rgba(209,154,80,.1); transform:rotate(-1deg); }.loose-note span,.loose-note strong { display:block; }.loose-note span { color:var(--clay); font:14px var(--hand); }.loose-note strong { margin-top:4px; color:var(--ink); font:500 16px var(--serif); }.closing-note { margin:65px 0 0; color:var(--clay); font:24px var(--hand); transform:rotate(-2deg); }.letter-footer { display:flex; justify-content:space-between; gap:15px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.no-script { position:fixed; inset:20px; z-index:100; padding:20px; color:var(--ink); background:var(--paper); }
@media (min-width:700px) { .cover-letter { width:min(690px,calc(100% - 120px)); }.cover-content { width:72%; }.interior-screen { padding:35px 40px 70px; }.letter-paper { padding-top:72px; }.letter-flow { margin-top:96px; }.interior-toolbar { margin-bottom:24px; } }
@media (max-width:520px) { .cover-letter { height:calc(100% - 32px); width:calc(100% - 24px); }.cover-letter-top { top:20px; right:22px; left:22px; }.cover-content { width:78%; padding-top:25%; }.cover-kicker { font-size:11px; }.cover-content h1 { font-size:clamp(43px,13vw,58px); }.cover-subtitle { margin:22px 0 27px; font-size:18px; }.cover-facts { font-size:11px; }.cover-facts strong { font-size:17px; }.cover-handnote { margin-top:27px; font-size:14px; }.fold-trigger { width:112px; height:102px; }.fold-paper { width:100px; height:88px; }.fold-label { right:26px; bottom:28px; }.cover-outside-note { display:none; }.interior-screen { padding:22px 10px 45px; }.interior-toolbar { padding:0 6px; font-size:10px; }.letter-paper { padding:40px 22px 32px; }.letter-page-mark { margin-bottom:30px; }.letter-header h2 { font-size:43px; }.letter-lede { font-size:18px; }.letter-thread { top:315px; left:11px; }.letter-flow { margin-top:66px; }.letter-entry { margin-bottom:72px; padding-left:19px; }.margin-mark { left:-8px; font-size:10px; }.letter-entry p:not(.entry-label):not(.hand-note):not(.pencil-note):not(.closing-note) { font-size:16px; }.letter-entry h3 { font-size:26px; }.possibility-notes { grid-template-columns:1fr; gap:9px; }.possibility-notes p:nth-child(2) { margin-left:12%; }.stay-line { display:block; }.stay-line span { display:block; text-align:left; padding-left:12px; }.stay-line span + span { border-top:1px solid var(--line); border-left:0; }.pencil-note { margin-left:18%; }.letter-footer { display:block; }.letter-footer span { display:block; margin-top:5px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }
.map-note { display:inline-block; margin-top:4px; color:var(--clay); font:16px var(--hand); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px; transform:rotate(-2deg); }.map-note:hover,.map-note:focus-visible { color:var(--gold); }
.place-note { display:flex; width:min(100%,390px); align-items:center; justify-content:space-between; gap:16px; margin:24px 0 0; padding:12px 14px; border:1px dashed rgba(173,93,61,.48); background:rgba(209,154,80,.1); transform:rotate(-1deg); }.place-note > span { color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.place-note .map-note { flex:0 0 auto; margin:0; font-size:15px; }
@media (max-width:520px) { .place-note { display:block; }.place-note > span { display:block; margin-bottom:5px; }.place-note .map-note { display:inline-block; } }
 .letter-header h2:focus { outline:2px solid rgba(173,93,61,.35); outline-offset:8px; }