:root { --ink:#080807; --paper:#e6d7b5; --muted:#b8a77d; --gold:#aa986e; --line:rgba(185,164,113,.58); --danger:#d49a80; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--paper); background:radial-gradient(ellipse at 50% 0,rgba(227,212,177,.09),transparent 37%),linear-gradient(115deg,transparent 0 40%,rgba(235,218,175,.025) 40.2% 42%,transparent 42.2%),#070706; font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; letter-spacing:.035em; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.64) 100%); }
.film-grain { position:fixed; z-index:5; inset:0; pointer-events:none; opacity:.15; background-image:radial-gradient(circle at 13% 17%,rgba(255,245,215,.45) 0 .5px,transparent .9px),radial-gradient(circle at 71% 63%,rgba(255,245,215,.28) 0 .5px,transparent .9px); background-size:6px 8px,9px 12px; }
.ornament-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.page-frame { position:relative; width:min(970px,calc(100% - 28px)); min-height:calc(100vh - 28px); margin:14px auto; padding:48px clamp(22px,6vw,70px) 60px; border:1px solid var(--gold); outline:1px solid rgba(170,152,110,.44); outline-offset:-8px; background:rgba(8,8,7,.68); box-shadow:inset 0 0 72px rgba(0,0,0,.82),0 0 32px #000; }
.frame-ornament { position:absolute; z-index:1; width:48px; height:48px; color:#ac9a70; filter:drop-shadow(0 2px 3px #000); opacity:.86; pointer-events:none; }.frame-ornament svg,.title-ornament svg { display:block; width:100%; height:100%; overflow:visible; }.frame-ornament--top-left { top:10px; left:12px; width:57px; height:48px; transform:rotate(-7deg); }.frame-ornament--top-right { top:13px; right:16px; width:38px; height:38px; transform:rotate(6deg); }.frame-ornament--bottom-left { bottom:18px; left:17px; width:34px; height:34px; transform:rotate(-4deg); }.frame-ornament--bottom-right { right:18px; bottom:18px; width:36px; height:39px; transform:rotate(4deg); }
.hub-link { display:inline-block; color:#d8c69d; font-size:.9rem; letter-spacing:.12em; text-decoration:none; } .hub-link:hover,.hub-link:focus-visible { color:#fff0ca; }
.intro { position:relative; z-index:2; max-width:690px; margin:68px auto 75px; text-align:center; } .eyebrow { margin:0 0 8px; color:var(--muted); font-size:.72rem; font-style:italic; letter-spacing:.17em; text-transform:uppercase; }.title-ornament { display:flex; width:min(390px,77vw); height:32px; margin:10px auto 15px; align-items:center; color:#aa986e; }.title-ornament span { height:1px; flex:1; background:linear-gradient(90deg,transparent,#9d895c 65%,transparent); }.title-ornament svg { width:112px; height:30px; margin:0 8px; filter:drop-shadow(0 2px 3px #000); }.title-ornament--small { width:min(270px,57vw); height:28px; margin:22px auto 0; }.title-ornament--small svg { width:53px; height:28px; }
h1,h2 { margin:0; color:#eadbb8; font-weight:400; text-shadow:2px 2px 0 #282218,0 5px 12px #000; } h1 { font-family:"Pirata One",Palatino,serif; font-size:clamp(3.8rem,10vw,7rem); line-height:.78; transform:rotate(-1deg); } h1 span { font-size:.69em; } h2 { font-size:clamp(2rem,4vw,3.2rem); line-height:1; }
.intro > p:not(.eyebrow) { max-width:570px; margin:31px auto 24px; color:#cfbd94; font-size:1.03rem; line-height:1.65; }
button,.file-button { min-height:43px; padding:10px 17px; cursor:pointer; font:inherit; font-size:.85rem; letter-spacing:.07em; } .primary-button,.danger-button { border:1px solid #c5ad79; color:#17130c; background:#d7c190; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 3px 9px #000; } .primary-button:hover,.primary-button:focus-visible { background:#efdbab; } .primary-button.small { min-height:39px; }
.quiet-button,.file-button { border:1px solid var(--line); color:#dac8a0; background:rgba(17,16,13,.72); } .quiet-button:hover,.quiet-button:focus-visible,.file-button:hover { border-color:#dac08a; color:#fff0cb; } .danger-button { border-color:#d59d82; background:#c79077; }.danger-button:hover { background:#e2a084; }
.action-message { min-height:1.25rem; margin:11px 0 0; color:#d7c08b; font-size:.84rem; }
.library { position:relative; z-index:2; padding-top:42px; border-top:1px solid var(--line); } .section-heading,.tools,.library-actions,.modal-actions,.modal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .library-actions { flex-wrap:wrap; justify-content:flex-end; }.library-note { max-width:610px; color:#bba982; font-size:.9rem; line-height:1.55; }
.file-button input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }.tools { margin:28px 0 0; align-items:stretch; flex-wrap:wrap; }.search { flex:1 1 260px; }.search input { width:100%; height:43px; }
input,textarea { width:100%; margin-top:7px; padding:10px 11px; border:1px solid rgba(184,163,111,.6); border-radius:0; color:var(--paper); background:#10100d; font:inherit; letter-spacing:.025em; } textarea { resize:vertical; line-height:1.45; } input:focus,textarea:focus,button:focus-visible,a:focus-visible { outline:2px solid #efdba5; outline-offset:3px; }.favorite-filter,.favorite-check { color:#cdbb92; font-size:.9rem; white-space:nowrap; }.favorite-filter input,.favorite-check input { width:auto; margin-right:7px; }
.story-list { display:grid; gap:14px; margin-top:24px; }.empty { padding:34px 15px; border:1px dashed var(--line); color:#b7a57d; text-align:center; line-height:1.55; }.story-card { padding:20px; border:1px solid var(--line); background:linear-gradient(105deg,rgba(255,255,255,.02),transparent 55%),rgba(10,10,8,.78); }.story-card h3 { margin:0; color:#e4d3aa; font-size:1.23rem; font-weight:600; }.card-meta,.story-card p { color:#bca980; font-size:.86rem; line-height:1.45; }.card-meta { margin:7px 0 0; }.story-card p { margin:12px 0 0; }.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }.card-actions button { min-height:33px; padding:6px 10px; font-size:.75rem; }.star { color:#efd489; }
.modal { width:min(700px,calc(100% - 24px)); max-height:min(92vh,900px); padding:0; overflow:auto; border:1px solid #ad986b; color:var(--paper); background:#0d0d0a; box-shadow:0 24px 80px #000; }.modal::backdrop { background:rgba(0,0,0,.72); }.modal form,.modal > div { padding:clamp(22px,5vw,38px); }.modal label { display:block; margin-top:16px; color:#d5c49c; font-size:.87rem; }.modal-heading { align-items:flex-start; }.icon-button { min-height:34px; padding:0 10px; border:0; color:#dfcda4; background:transparent; font-size:1.8rem; }.required { color:#d4a98e; font-size:.72rem; }.modal-actions { margin-top:26px; flex-wrap:wrap; justify-content:flex-end; }.reader { width:min(790px,calc(100% - 20px)); }.reader-meta,.reader-note { color:#bda981; font-size:.88rem; line-height:1.5; }.story-body { margin-top:27px; color:#f0dfbb; font-size:1.08rem; line-height:1.75; white-space:pre-wrap; }.story-body strong { color:#ffe2a1; }.reader-note { margin-top:25px; white-space:pre-wrap; }.confirm { width:min(500px,calc(100% - 24px)); }.confirm p { color:#c6b48d; line-height:1.55; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:600px) { .page-frame { width:calc(100% - 16px); margin:8px auto; padding:28px 19px 38px; outline-offset:-6px; }.frame-ornament--bottom-left,.frame-ornament--bottom-right { display:none; }.frame-ornament--top-left { top:3px; width:30px; height:25px; }.frame-ornament--top-right { width:28px; height:28px; }.intro { margin:51px auto 54px; }.section-heading { align-items:flex-start; flex-direction:column; }.library-actions { justify-content:flex-start; }.tools { align-items:center; }.primary-button.small { width:100%; }.modal-actions { align-items:stretch; flex-direction:column-reverse; }.modal-actions button { width:100%; }.story-body { font-size:1rem; }.card-actions button:first-child { flex:1 0 100%; } }