*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f1e9;color:#263329;font:16px/1.65 Arial,sans-serif}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b36b46;outline-offset:4px}[hidden]{display:none!important}header{display:flex;align-items:center;justify-content:space-between;padding:28px 5vw;border-bottom:1px solid #d9d4c7}.brand{text-decoration:none;font:34px Georgia,serif;letter-spacing:-1.5px}.brand span{display:block;font:8px Arial;letter-spacing:3px;margin-top:5px}nav{display:flex;align-items:center;gap:26px;font-size:13px}nav a{text-decoration:none}.quiet{background:none;border:0;padding:9px;color:inherit}.intro{padding:94px 7vw 80px;position:relative}.eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:22px}h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-2px}h1{font-size:clamp(45px,6.5vw,94px);margin:0 0 27px}em{font-weight:400;color:#856550}.intro p{font-size:18px;color:#6a7064;margin-bottom:30px}.side-note{position:absolute;right:8vw;bottom:100px;font:italic 21px/1.5 Georgia;color:#86765f;transform:rotate(-5deg)}.button{display:inline-flex;gap:35px;align-items:center;text-decoration:none;padding:14px 25px;background:#304c3a;color:#fff;border:1px solid #304c3a;border-radius:2px;font-size:14px}.button:hover{background:#1b3625}button:disabled{cursor:wait;opacity:.55}.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:0 5vw}.themes article:nth-child(2){margin-top:72px}.themes article:nth-child(3){margin-top:28px}.themes img{width:100%;height:365px;object-fit:cover}.themes .eyebrow{margin:24px 0 12px}.themes h2{font-size:32px;letter-spacing:-1px}.themes p{color:#666d60;font-size:14px;max-width:340px}.themes button{background:none;border:0;border-bottom:1px solid #9aa28f;padding:12px 0;font-size:13px;color:inherit}.caption{font-size:12px;color:#6d7468;margin:32px 5vw}.promise{margin:100px 8vw 80px;border-top:1px solid #c9cdbf;padding-top:55px;max-width:1000px}.promise h2{font-size:45px}.promise p{max-width:680px}.trial-note{padding-top:20px;color:#65715d;font-size:13px}.panel{margin:65px auto 100px;max-width:530px;padding:0 24px}.panel.wide{max-width:1040px}.panel h1{font-size:50px}.tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}.tabs button,.toolbar>button:not(.button),#record,#stop,.file,#record-preview button,.media-list button{background:#ece7dd;border:1px solid #c9ccbd;border-radius:3px;padding:10px 15px;color:#304c3a}.tabs button.active{background:#304c3a;color:white}label{display:block;font-size:13px;letter-spacing:.2px;margin:20px 0}input:not([type=checkbox]),textarea,select{display:block;width:100%;padding:13px;border:1px solid #b9c1b0;background:#fdfbf7;color:#263329;border-radius:3px;margin-top:8px}textarea{font:20px/1.85 Georgia;resize:vertical}.check{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.check input{flex-shrink:0}form p{font-size:13px;color:#596453}.toolbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:23px 0}.panel .caption{margin:20px 0}.story-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:35px 0}.story-card{padding:30px;background:#fffdf7;border:1px solid #ddd8cb;text-align:left;color:#263329}.story-card h2{font-size:30px;margin:15px 0;letter-spacing:-.6px}.story-card p{overflow-wrap:anywhere;font-family:Georgia;color:#6f7867}.story-card span{font-size:11px;letter-spacing:1px}.media-section{border-top:1px solid #cbcfc3;margin-top:50px;padding-top:20px}.media-section h2{font-size:32px;letter-spacing:-1px}.media-section p{font-size:13px;color:#626b59}.file{display:inline-block;cursor:pointer}.file input{max-width:300px}.media-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:25px 0}.media-item img{width:100%;height:190px;object-fit:cover}.media-item audio,audio{width:100%;max-width:420px}.media-item a,.media-item button{font-size:12px;margin:8px 8px 0 0}.danger{color:#8b3b2b;border:1px solid #c5a798;background:transparent;padding:10px 15px}.legal{max-width:720px;margin:12px auto 40px;padding:20px 24px;font-size:13px;line-height:1.75;color:#58624f;overflow-wrap:anywhere}.legal h2{font-size:28px;margin:0 0 20px;letter-spacing:-.8px}.legal p{margin:0 0 16px}.legal p:last-child{margin-bottom:0}.legal:target{outline:2px solid #9ca88f}footer{border-top:1px solid #d1d3c4;padding:24px 5vw;display:flex;gap:24px;align-items:center;flex-wrap:wrap}footer p,footer>a:not(.brand){font-size:13px}#notice{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:16px 26px;background:#273f30;color:white;max-width:min(650px,92vw);box-shadow:0 4px 25px #0002;z-index:5}#recovery-code{display:block;background:#fff;padding:20px;overflow-wrap:anywhere;margin:20px 0}details{margin-top:45px}summary{cursor:pointer}#save-status{font-size:13px;color:#536449}@media(max-width:700px){header{padding:20px}nav{gap:5px}nav>a{display:none}.brand{font-size:29px}.intro{padding:60px 24px}.side-note{display:none}.themes{grid-template-columns:1fr;padding:0 24px;gap:50px}.themes article:nth-child(n){margin:0}.themes img{height:340px}.themes h2{font-size:35px}.promise{margin:70px 24px}.promise h2{font-size:34px}.story-list,.media-list{grid-template-columns:1fr}.panel h1{font-size:42px}footer{gap:20px}.desktop{display:none}}

.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}.brand img{width:58px;height:58px}.brand .wordmark{display:block;font:34px Georgia,serif;letter-spacing:-1.5px;margin:0}.brand small{display:block;font:8px/1.5 Arial,sans-serif;letter-spacing:2.1px;margin-top:5px}.region{font-size:10px;letter-spacing:1.4px;border:1px solid #d4d4c4;border-radius:20px;padding:6px 12px}.global{max-width:1200px;margin:0 auto;padding:80px 7vw 100px}.global-layout{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:70px}.global h1{font-size:clamp(48px,6vw,82px)}.global p{color:#65715d;max-width:440px}.global-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:48% 48% 2px 2px}.country{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #c9cdbf;border-bottom:1px solid #c9cdbf;padding:22px 0;margin:35px 0 16px;text-decoration:none;font:22px Georgia,serif}.country small{display:block;font:12px Arial;margin-top:7px;color:#65715d}.country:hover{color:#967145}@media(max-width:700px){.brand{gap:7px}.brand img{width:43px;height:43px}.brand .wordmark{font-size:27px}.brand small{font-size:6px;letter-spacing:1.5px}header nav .region{display:block;padding:5px 8px;font-size:9px}nav{gap:2px}.global{padding:55px 24px}.global-layout{grid-template-columns:1fr;gap:35px}.global-photo{max-height:400px}.global h1{font-size:52px}}

main > .legal{margin:48px auto 56px}.legal h1{font-size:38px;letter-spacing:-1px;margin:0 0 26px}

/* Dearkeeper identity: open, embracing pages, with a quiet editorial wordmark. */
.brand{gap:11px}.brand img{width:52px;height:52px}.brand .wordmark{font-family:Georgia,"Times New Roman",serif;font-size:33px;font-weight:400;letter-spacing:-1.6px;line-height:1}.brand small{font-size:8px;letter-spacing:1.35px;line-height:1.5;margin-top:8px;color:#806d5e}footer .brand img{width:44px;height:44px}footer .brand .wordmark{font-size:28px}footer .brand small{font-size:7px}@media(max-width:700px){.brand img{width:40px;height:40px}.brand .wordmark{font-size:27px}.brand small{font-size:6.5px;letter-spacing:1px}}

/* ===== 2026-10-10 visual upgrade: editorial warmth layer ===== */
/* All original rules above are overridden, not removed — app.js hooks stay intact. */
@font-face{font-family:Fraunces;src:url(/fraunces.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fraunces-italic.woff2) format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
:root{--serif:"Iowan Old Style",Fraunces,"Palatino Linotype",Palatino,Georgia,serif;--sans:"Avenir Next","Segoe UI",-apple-system,Arial,sans-serif;--ink:#2e352c;--muted:#5d6457;--accent:#967145;--green:#304c3a;--cream:#f5f1e9;--paper:#fffdf7}
body{background:#f5f1e9;background-image:linear-gradient(rgba(255,253,247,.55),rgba(255,253,247,0) 420px),radial-gradient(1100px 500px at 85% -60px,rgba(150,113,69,.07),rgba(150,113,69,0) 70%);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,.wordmark,.side-note,.story-card h2{font-family:var(--serif)}
/* Hero back to the original single-column editorial layout (jar artwork withdrawn
   by boss decision 2026-10-10 — the mark is the two-half heart again). */
/* Theme cards become photo-album cards */
.themes{max-width:1400px;margin:0 auto}
.themes article{background:var(--paper);border:1px solid #ddd6c6;border-radius:8px;padding:18px 18px 26px;box-shadow:0 1px 2px rgba(64,52,32,.05),0 22px 44px -30px rgba(64,52,32,.28)}
.themes img{border-radius:4px;aspect-ratio:4/3;height:auto}
.themes .eyebrow{color:var(--accent);letter-spacing:2.2px}
.themes p{color:var(--muted)}
.themes button{color:var(--green);border-bottom-color:#a9b19c;font-size:14px;transition:border-color .2s}
.themes button:hover{border-bottom-color:var(--green)}
.caption{max-width:1400px}
/* Contrast fixes: old greys measured ~4.4–4.5:1 on cream — below the floor, with margin now */
.eyebrow{color:#6d5a3f;letter-spacing:2.4px}
.intro p,.themes p,.caption,.promise p,.legal,form p,.media-section p,.trial-note{color:var(--muted)}
.trial-note{font-size:13px}
.trial-note:first-line{font-weight:700;letter-spacing:.4px}
.caption-card{max-width:1000px;margin:0 8vw 90px;font-family:var(--serif);font-style:italic;font-size:15px;color:#7a6144;border-left:2px solid #cbb59a;padding:4px 0 4px 16px}
.promise{max-width:1040px;margin-left:auto;margin-right:auto;padding-top:64px}
/* Panels & forms: warmer paper, softer borders */
.panel{background:var(--paper);border:1px solid #ddd6c6;border-radius:10px;padding:44px 46px 40px;margin-top:80px;box-shadow:0 1px 2px rgba(64,52,32,.04),0 24px 48px -34px rgba(64,52,32,.3)}
.panel.wide{padding:52px 56px}
.tabs button,.toolbar>button:not(.button),#record,#stop,.file,#record-preview button,.media-list button{border-radius:6px;background:#f0ebdf;border-color:#ccc9b8;transition:background .15s}
.tabs button:hover,#record:hover{background:#e6e0d0}
.story-card{border-radius:8px;transition:box-shadow .2s,transform .2s}
.story-card:hover{box-shadow:0 1px 2px rgba(64,52,32,.06),0 20px 40px -28px rgba(64,52,32,.3);transform:translateY(-2px)}
.story-card span{color:var(--accent)}
/* Toast: slightly rounder, softer */
#notice{border-radius:8px;background:var(--green)}
/* Footer: deep green close */
footer{background:#2c4535;border-top:0;color:#f3efe5;margin-top:60px;padding:34px 5vw}
footer a{color:#f3efe5;text-decoration:none;border-bottom:1px solid rgba(243,239,229,.35)}
footer a:hover{border-bottom-color:#f3efe5}
footer .brand small{color:#c2cbb6}
footer .wordmark{color:#f3efe5}
footer p,footer>a:not(.brand){color:#c2cbb6}
/* Mobile */
@media(max-width:700px){
 .panel,.panel.wide{padding:30px 22px}
 .caption-card{margin:0 24px 60px}
 .themes article{padding:14px 14px 22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Global page: regions not yet open are shown honestly as "soon", never as dead links. */
.country.soon{color:#7a6144;border-style:dashed;cursor:default}
.country.soon:hover{color:#7a6144}
.country.soon span:last-child{font:11px/1 Arial;letter-spacing:1.6px;border:1px solid #cbb59a;border-radius:20px;padding:6px 12px}

/* ── 2026-10-11 refinement pass: unlock Fraunces, brand arch, micro-motion ── */
/* Fraunces ships the full opsz 9–144 & wght 100–900 axes — the old 400–600
   declaration throttled it. Optical sizing at display sizes gives the
   high-contrast editorial cut the wordmark already wears. */
@font-face{font-family:Fraunces;src:url(/fraunces.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;font-optical-sizing:auto}
@font-face{font-family:Fraunces;src:url(/fraunces-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap;font-optical-sizing:auto}
h1,h2,.wordmark,.side-note,.story-card h2,.panel h1{font-optical-sizing:auto;font-weight:480;letter-spacing:-.022em}
h1{line-height:1.02}
h1 em,h2 em{font-weight:420;font-style:italic}
.wordmark{font-weight:520}
/* eyebrow: a short rule before the label, letterspaced further */
.intro .eyebrow,.promise .eyebrow{display:flex;align-items:center;gap:12px}
.intro .eyebrow::before,.promise .eyebrow::before{content:"";width:26px;height:1.5px;background:#ad6b50;flex:none}
/* theme cards: the brand arch (same silhouette as the global entry page) */
.themes .picture-frame{margin:0}
.themes img{border-radius:48% 48% 3px 3px;transition:transform .5s cubic-bezier(.2,.6,.2,1),border-radius .5s ease}
.themes article:hover img{transform:translateY(-4px);border-radius:6px 6px 3px 3px}
.themes .eyebrow{color:#7a6144}
.themes h2{font-size:clamp(26px,2.6vw,34px);line-height:1.12}
.themes button{font-size:14px;transition:border-color .25s ease,color .25s ease}
.themes button:hover{border-color:#ad6b50;color:#856550}
/* buttons: quiet elevation */
.button{box-shadow:0 1px 0 rgba(38,51,41,.14);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.button:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(38,51,41,.18)}
.button:active{transform:translateY(0)}
/* story cards: theme dot + hover lift */
.story-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.story-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(38,51,41,.08);border-color:#cbb59a}
.story-card .theme-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.story-card[data-theme=parents] .theme-dot{background:#967145}
.story-card[data-theme=love] .theme-dot{background:#ad6b50}
.story-card[data-theme=family] .theme-dot{background:#5d7a63}
/* library search */
#story-search{max-width:320px;margin-top:18px}
/* editor: live word count sits beside the save status */
.word-count{font-size:12px;color:#65715d;letter-spacing:.4px}
/* scroll reveal (JS adds .reveal-in; guard honours reduced motion) */
.reveal{opacity:0;transform:translateY(18px)}
.reveal-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.reveal-in{transition:none}
 .themes img,.story-card,.button{transition:none}}
@media(max-width:700px){.themes img{border-radius:42% 42% 3px 3px}}

/* ── 2026-10-11 editor v2: the writing surface deserves the same care ── */
/* Layout: a centred 720px writing column — the classic comfortable measure —
   with the title as a borderless display field instead of a form box. */
#editor .editor-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
#editor .writing-col{max-width:720px;margin:0 auto}
#editor label[for=title],#editor label[for=story-body]{margin-top:26px}
#title{border:none;border-bottom:1px solid transparent;background:transparent;font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.02em;padding:6px 2px;border-radius:0}
#title:focus{border-bottom-color:#ad6b50}
#title::placeholder{color:#b9b2a2}
#story-body{min-height:340px;resize:none;overflow:hidden;font-size:18px;line-height:1.95;background:transparent;border:none;padding:14px 2px;border-radius:0}
#story-body:focus{border-color:#e3ddd0}
#story-form .writing-col,#story-form .editor-foot{max-width:720px;margin-left:auto;margin-right:auto}
.editor-foot{display:flex;align-items:center;gap:18px;padding:14px 0;border-top:1px solid #ddd8cb;margin-top:10px}
#save-status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#c9a86a;margin-right:7px;vertical-align:1px}
#save-status.saved::before{background:#5d7a63}
/* media zone becomes its own paper card */
#editor .media-section{background:var(--paper);border:1px solid #ddd8cb;border-radius:3px;padding:26px 26px 30px;margin-top:44px}
#editor .media-section h2{font-size:24px;margin-top:0}
#editor .media-section.dragover{border-color:#ad6b50;box-shadow:0 0 0 3px rgba(173,107,80,.15)}
/* recording pulse */
#stop.recording{color:#8b3b2b;border-color:#c5a798}
#stop.recording::before{content:"●";margin-right:7px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#stop.recording::before{animation:none}}
/* library empty state: three quiet beginnings instead of one lonely line */
.empty-beginnings{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 8px}
.empty-beginnings button{background:var(--paper);border:1px solid #ddd8cb;border-radius:3px;padding:18px 16px;text-align:left;font-family:var(--serif);font-size:16px;color:#263329;cursor:pointer;transition:border-color .25s ease,transform .25s ease}
.empty-beginnings button:hover{border-color:#cbb59a;transform:translateY(-2px)}
.empty-beginnings small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:1px;color:#65715d;margin-top:6px}
@media(max-width:700px){.empty-beginnings{grid-template-columns:1fr}}
/* inputs: calmer focus */
input:focus,textarea:focus,select:focus{border-color:#304c3a;box-shadow:0 0 0 3px rgba(48,76,58,.08)}
/* sr-only labels for the borderless title/body fields */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}