/* The Hundred Voices — Phase 1 styles. Themes via data-theme on . */ :root{ --bg:#fbfaf7; --surface:#ffffff; --ink:#1c1c1e; --muted:#6b6b72; --line:#e7e3da; --accent:#7a1f2b; --chip:#f0ece3; --reader-scale:1; --serif:Georgia,'Iowan Old Style','Palatino Linotype',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --maxread:38rem; } html[data-theme="dark"]{--bg:#15151a;--surface:#1d1d24;--ink:#e9e7e2;--muted:#9a98a2;--accent:#e0808c;--chip:#262630;--line:#2c2c36;} html[data-theme="sepia"]{--bg:#f4ecd8;--surface:#fbf3e0;--ink:#3a2f24;--muted:#7a6a55;--accent:#8a4b2b;--chip:#ebe0c8;--line:#e0d4ba;} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6; -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh} a{color:inherit;text-decoration:none} h1,h2,h3{line-height:1.15;font-weight:650} main{flex:1;width:100%} /* header / footer */ .site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line);position:sticky;top:0; background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);z-index:20} .brand{font-family:var(--serif);font-size:1.35rem;letter-spacing:.01em;display:inline-flex;align-items:center;gap:.5rem} .brand-mark{width:1.55em;height:1.55em;border-radius:6px;display:block;flex:none} .hero-logo{display:block;width:112px;height:112px;border-radius:22px;margin:0 auto 1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.16)} .site-nav{display:flex;gap:1.25rem;align-items:center;font-size:.95rem} .site-nav a:hover{color:var(--accent)} .soon{color:var(--muted);opacity:.6;cursor:default} .header-right{display:flex;align-items:center;gap:1.1rem} .nav-toggle{display:none;font-size:1.15rem;line-height:1} /* hamburger — mobile only */ .theme-cycle{display:none} /* single theme toggle — mobile only (desktop uses .theme-set) */ .site-footer{border-top:1px solid var(--line);padding:2rem clamp(1rem,4vw,3rem);margin-top:3rem; color:var(--muted);font-size:.9rem;text-align:center} .legal-nav{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:.5rem 0} .fineprint{font-size:.8rem;opacity:.8} /* hero / home */ .hero{max-width:60rem;margin:0 auto;padding:clamp(2.5rem,8vw,5rem) clamp(1rem,4vw,3rem) 1.5rem;text-align:center} .eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin:0 0 1rem} .hero h1{font-family:var(--serif);font-size:clamp(2.2rem,6vw,3.6rem);margin:0} .lede{font-size:1.15rem;color:var(--muted);max-width:34rem;margin:1rem auto 0} .featured{max-width:62rem;margin:1.5rem auto;padding:0 clamp(1rem,4vw,3rem)} .feature-card{display:flex;flex-direction:column;min-height:240px; border-radius:18px;padding:1.6rem;color:#fff;position:relative;overflow:hidden; background:linear-gradient(135deg,var(--c1),var(--c2))} .feature-flag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85} .feature-text{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;padding-top:1.2rem} .feature-hook{font-family:var(--serif);font-size:clamp(1.35rem,3.2vw,1.9rem);line-height:1.22;max-width:34rem; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .feature-meta{font-size:.9rem;opacity:.9} .story-grid-wrap,.genres,.genre-authors,.author-detail,.related{max-width:62rem;margin:2.5rem auto;padding:0 clamp(1rem,4vw,3rem)} .story-grid-wrap h2,.genres h2,.related h2,.genre-authors h2,.story-grid-wrap > h2{font-family:var(--serif);font-size:1.5rem;margin:0 0 1.2rem} .story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem} .story-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden; transition:transform .15s ease,box-shadow .15s ease,border-color .15s} .story-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.12);border-color:transparent} .card-cover{aspect-ratio:16/10;background:linear-gradient(135deg,var(--c1),var(--c2));display:flex; align-items:flex-end;padding:1rem;position:relative;overflow:hidden} .card-img,.hero-img,.feature-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .card-cover::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%)} .card-cover .card-hook{position:relative;z-index:2} .story-hero{position:relative;overflow:hidden} .story-hero::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.12))} .story-hero .story-hook{position:relative;z-index:2} .feature-card{position:relative;overflow:hidden} .feature-card::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.08))} .feature-card .feature-flag,.feature-card .feature-text{position:relative;z-index:2} .card-hook{color:#fff;font-family:var(--serif);font-size:1.05rem;line-height:1.25; text-shadow:0 1px 12px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card-body{padding:.9rem 1.1rem 1.2rem} .card-body h3{font-family:var(--serif);font-size:1.18rem;margin:0 0 .25rem;line-height:1.25; /* reserve a uniform 2-line title block so every card's meta/tags align (1-line titles don't ride up) */ min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card-byline{color:var(--muted);font-size:.9rem;margin:0 0 .6rem} .card-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 .55rem} .card-meta .card-byline{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card-meta .chip.mat{flex:none} /* single row, never wraps: time + heart keep their size; a long genre truncates with an ellipsis, so the heart never gets pushed to a second row (keeps every card the same height). */ .card-tags{margin:0;display:flex;gap:.4rem;flex-wrap:nowrap;align-items:center} .card-tags .chip{flex:none} .card-tags .chip:first-child{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chip{background:var(--chip);color:var(--ink);border-radius:100px;padding:.2rem .65rem;font-size:.74rem} .chip.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)} .chip.mat{background:transparent;border:1px solid var(--accent);color:var(--accent)} .chip.draft{background:var(--accent);color:#fff} .genre-row,.genre-pill{} .genre-row{display:flex;flex-wrap:wrap;gap:.6rem} .genre-pill{border:1px solid var(--line);border-radius:100px;padding:.45rem 1rem;font-size:.9rem;background:var(--surface);cursor:pointer;font-family:inherit;color:inherit;line-height:1.2} .genre-pill:hover{border-color:var(--accent);color:var(--accent)} .genre-pill.active{background:var(--accent);border-color:var(--accent);color:#fff} .genre-pill .pill-n{opacity:.55;font-size:.82em;margin-left:.15em} .subfilter{margin:.2rem 0 1.4rem} .story-card.hide{display:none} .subgenre-soon{margin-top:1.4rem;font-size:.85rem;opacity:.75} /* story / reader view */ .story{max-width:var(--maxread);margin:0 auto;padding:0 clamp(1rem,5vw,1.5rem) 3rem} .story-hero{margin:1.5rem -.2rem 0;border-radius:16px;min-height:180px;display:flex;align-items:center; padding:1.8rem;background:linear-gradient(135deg,var(--c1),var(--c2))} .story-cover{display:block;width:100%;height:auto;border-radius:16px;margin:1.5rem 0 0} .story-hook{color:#fff;font-family:var(--serif);font-size:clamp(1.3rem,4vw,1.8rem);line-height:1.25;margin:0; text-shadow:0 1px 14px rgba(0,0,0,.35)} .crumbs{color:var(--muted);font-size:.85rem;margin:1.2rem 0 .5rem} .crumbs a:hover{color:var(--accent)} .story-head h1{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.6rem);margin:.2rem 0} .byline{color:var(--muted);margin:.2rem 0 .8rem} .byline a{color:var(--accent)} .story-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin:.3rem 0} .cw{margin:.8rem 0;font-size:.9rem;color:var(--muted)} .cw summary{cursor:pointer} .song{margin:1.4rem 0;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)} .song-label{font-size:.95rem;margin-bottom:.6rem} .listen{margin:0 0 .45rem;padding:0} .listen-label{font-size:.8rem;margin-bottom:.3rem;font-weight:600;color:var(--muted)} .listen audio{width:100%} .listen-dl{display:inline-block;margin-top:.6rem;font-size:.85rem;color:var(--accent)} .listen-soon{color:var(--muted);font-size:.9rem;margin:1.2rem 0} .song audio{width:100%} .song-soon{color:var(--muted);font-size:.9rem;margin:0} .song-style{font-style:italic} /* reader bar: the Listen player + font/lighting controls. In-flow normally (out of a reader's way); pins to the top ONLY while the narration is playing (.playing added by app.js). */ .reader-bar{margin:1.4rem 0;padding:.55rem .7rem .45rem; background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px); border:1px solid var(--line);border-radius:14px} .reader-bar.playing{position:sticky;top:64px;z-index:15} /* keep the auto-scrolled read-along line clear of the sticky header + pinned player (so the line you resumed at isn't hidden beneath the audiobook control). */ .prose .w{scroll-margin-top:9rem} /* read-along: the line currently being spoken (continuous band; no layout shift as it moves). Per-theme strength — a faint accent tint vanishes on the near-black dark bg, so dark gets a much stronger mix (and sepia a touch more) to stay clearly visible. */ .prose .w.reading{background:color-mix(in srgb,var(--accent) 24%,transparent);border-radius:3px} html[data-theme="dark"] .prose .w.reading{background:color-mix(in srgb,var(--accent) 52%,transparent)} html[data-theme="sepia"] .prose .w.reading{background:color-mix(in srgb,var(--accent) 32%,transparent)} .reader-toolbar{display:flex;align-items:center;gap:.4rem; background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(6px); border:1px solid var(--line);border-radius:100px;padding:.35rem .6rem;margin:0 auto;width:fit-content} .tb-label{font-family:var(--serif);font-size:.95rem;color:var(--muted);padding:0 .3rem} .tb-btn{border:none;background:transparent;color:var(--ink);font-size:.95rem;cursor:pointer; padding:.35rem .55rem;border-radius:100px} .tb-btn:hover{background:var(--chip)} .tb-btn[aria-pressed="true"]{background:var(--accent);color:#fff} .tb-btn[aria-pressed="true"]:hover{background:var(--accent)} .tb-sep{width:1px;height:20px;background:var(--line);margin:0 .2rem} /* reading-preference controls now live in the site header (so they work on every page) */ .reader-prefs{display:inline-flex;align-items:center;gap:.15rem} .ambient-btn{font-size:.78rem;font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.25rem} .ambient-btn.on{background:var(--accent);color:#fff} .ambient-btn.on:hover{background:var(--accent)} .scene-anchor{display:block;height:0;width:0;overflow:hidden} .prose{font-family:var(--serif);font-size:calc(1.18rem * var(--reader-scale));line-height:1.75; max-width:var(--maxread);margin:1.5rem auto 0} .prose p{margin:0 0 1.25em} .prose .scene{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:2.2em 0 1em;font-weight:600} .prose .scene-break{border:none;text-align:center;margin:2em 0} .prose .scene-break::before{content:"❧";color:var(--muted)} .prose em{font-style:italic} .affiliate{margin:2rem 0;padding:1rem;border:1px dashed var(--line);border-radius:10px} .aff-disclose{font-size:.8rem;color:var(--muted);margin:0} /* genre / author pages */ .genre-head,.author-head{max-width:62rem;margin:0 auto;padding:clamp(2rem,6vw,3.5rem) clamp(1rem,4vw,3rem) 1.5rem; background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 22%,var(--bg)),var(--bg))} .genre-head h1,.author-head h1{font-family:var(--serif);font-size:clamp(2rem,6vw,3rem);margin:.3rem 0} .author-genre{color:var(--accent);font-weight:600;margin:.2rem 0} .author-voice{color:var(--muted);max-width:42rem;font-size:1.05rem} .author-portrait{width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid var(--surface);box-shadow:0 4px 18px rgba(0,0,0,.18);display:block;margin:.2rem 0 .6rem} .author-bio{max-width:42rem;font-size:1.08rem;line-height:1.6;margin:.5rem 0 .7rem} .author-facts{max-width:62rem;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem} .author-facts dt{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em} .author-facts dd{margin:0} .author-facts .sig{font-family:var(--serif);font-style:italic} .author-line{display:block;padding:.7rem 0;border-bottom:1px solid var(--line)} .author-line span{color:var(--muted);font-size:.92rem} .empty{color:var(--muted)} /* mini player */ .mini-player[hidden]{display:none} .mini-player{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:30; display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line); border-radius:100px;padding:.45rem .7rem;box-shadow:0 8px 30px rgba(0,0,0,.18);max-width:92vw;width:380px} .mp-btn{border:none;background:var(--chip);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.9rem} .mp-meta{display:flex;flex-direction:column;line-height:1.1;min-width:0;flex:0 0 auto;max-width:120px} .mp-meta #mp-title{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mp-meta #mp-sub{font-size:.7rem;color:var(--muted)} .mp-seek{flex:1;accent-color:var(--accent)} /* age gate */ .age-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem; background:linear-gradient(135deg,#1f2933,#2b2b35)} .age-card{background:var(--surface);color:var(--ink);max-width:460px;border-radius:18px;padding:2rem;text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4)} .age-brand{font-family:var(--serif);color:var(--accent);letter-spacing:.02em;margin:0 0 .5rem} .age-card h1{font-family:var(--serif);font-size:1.7rem;margin:0 0 .8rem} .age-card p{color:var(--muted);font-size:.98rem} .age-card form{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0 .5rem} .age-yes{background:var(--accent);color:#fff;border:none;padding:.8rem;border-radius:10px;font-size:1rem;cursor:pointer} .age-no{background:transparent;color:var(--muted);border:1px solid var(--line);padding:.6rem;border-radius:10px;cursor:pointer} .age-fine{font-size:.78rem!important;opacity:.8} /* ---- accounts layer: offline banner, likes/follows, story actions, library ---- */ .offline-banner{background:var(--accent);color:#fff;text-align:center;padding:.5rem 1rem;font-size:.9rem} .offline-banner a{color:#fff;text-decoration:underline} /* "new version available" prompt (PWA update) */ .update-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center; gap:.8rem;background:var(--accent);color:#fff;padding:.6rem 1rem;font-size:.9rem;box-shadow:0 -2px 14px rgba(0,0,0,.2)} .update-banner .btn{background:#fff;color:var(--accent);border:none;padding:.32rem .95rem;border-radius:100px;font:inherit;font-weight:600;cursor:pointer} .update-x{background:transparent;border:none;color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;padding:0 .2rem;opacity:.85} .like-chip{color:var(--accent);border:1px solid var(--line);background:transparent} .like-chip.liked{background:var(--accent);border-color:var(--accent);color:#fff} /* device-local Downloads: the canonical card + a sibling footer (size + Remove) — a button can't live inside the card's , so it sits beneath it. */ .lib-dl-item{display:flex;flex-direction:column;gap:.4rem} .lib-dl-ctrl{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.82rem} .lib-dl-size{color:var(--muted,#888)} .story-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 .2rem} .act-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:var(--surface); color:var(--ink);font:inherit;font-size:.9rem;padding:.42rem .85rem;border-radius:100px;cursor:pointer;transition:all .15s} .act-btn:hover{border-color:var(--accent);color:var(--accent)} .act-btn.on,.like-btn.on{background:var(--accent);border-color:var(--accent);color:#fff} .act-btn.busy{opacity:.6;pointer-events:none} /* end-of-story like prompt (readers react most after finishing) */ .story-end{text-align:center;margin:2.6rem 0 .5rem;padding-top:1.6rem;border-top:1px solid var(--line)} .story-end-prompt{font-family:var(--serif);font-size:1.2rem;margin:0 0 .9rem} .story-end-actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap} /* ---- grid header + sort toggle ---- */ .grid-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.2rem;flex-wrap:wrap} .grid-head.end{justify-content:flex-end} .grid-head h2{margin:0;font-family:var(--serif);font-size:1.5rem} .sort-toggle{display:inline-flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;font-size:.82rem} .sort-opt{padding:.34rem .85rem;color:var(--muted);text-decoration:none} .sort-opt.active{background:var(--accent);color:#fff} /* ---- search ---- */ .home-search{display:flex;gap:.5rem;max-width:30rem;margin:1.2rem auto 0} .home-search.wide{max-width:40rem;margin:1rem 0 1.4rem} .home-search input{flex:1;min-width:0;font:inherit;padding:.55rem .95rem;border:1px solid var(--line);border-radius:100px;background:var(--surface);color:var(--ink)} .search-page{max-width:62rem;margin:2rem auto;padding:0 clamp(1rem,4vw,3rem)} .search-page h1{font-family:var(--serif)} .search-count{color:var(--muted);font-size:.9rem;margin:.2rem 0 1.2rem} .pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.6rem 0} .pager-n{color:var(--muted);font-size:.85rem} /* ---- social share ---- */ .share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.6rem 0 .2rem} .story-end .share-row{justify-content:center;margin-top:1rem} .share-label{font-size:.8rem;color:var(--muted);margin-right:.2rem} .share-btn{font:inherit;font-size:.78rem;padding:.28rem .7rem;border:1px solid var(--line);border-radius:100px; background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;transition:all .15s} .share-btn:hover{border-color:var(--accent);color:var(--accent)} .share-native{background:var(--accent);color:#fff;border-color:var(--accent)} .lib-viewall{font-size:.85rem;color:var(--accent);text-decoration:none;white-space:nowrap} /* ---- legal pages ---- */ .legal{max-width:46rem;margin:2.5rem auto 3.5rem;padding:0 clamp(1rem,4vw,3rem);line-height:1.65} .legal h1{font-family:var(--serif);font-size:2rem;margin:0 0 .25rem} .legal h2{font-family:var(--serif);font-size:1.25rem;margin:1.9rem 0 .5rem} .legal a{color:var(--accent)} .legal ul,.legal ol{padding-left:1.3rem} .legal li{margin:.35rem 0} .legal-date{color:var(--muted);font-size:.85rem;margin:0 0 1.6rem} /* ---- admin panel ---- */ .admin{max-width:72rem;margin:1.5rem auto;padding:0 clamp(1rem,4vw,2rem)} .admin-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem} .admin-head h1{margin:0;font-family:var(--serif)} .admin-head-actions{display:flex;gap:.5rem} .admin-filters{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem} .admin-filters label{display:flex;flex-direction:column;font-size:.72rem;color:var(--muted);gap:.2rem} .admin-filters select,.admin-filters input{font:inherit;font-size:.85rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)} .admin-pw{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem} .admin-pw input{font:inherit;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)} .admin-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin-bottom:1.4rem} .adm-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem} .adm-card-n{font-size:1.5rem;font-weight:700;font-family:var(--serif)} .adm-card-l{font-size:.78rem;color:var(--muted);margin-top:.1rem} .adm-card-s{font-size:.7rem;color:var(--muted);opacity:.85;margin-top:.15rem} .admin-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.4rem} @media(max-width:780px){.admin-grid2{grid-template-columns:1fr}} .admin-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1.4rem} .admin-panel h3{margin:0 0 .7rem;font-family:var(--serif);font-size:1.05rem} .admin-sub{font-size:.74rem;color:var(--muted);font-weight:400;margin-left:.4rem} .admin-legend{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem} .adm-leg{font:inherit;font-size:.72rem;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:100px;padding:.2rem .6rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;opacity:.55} .adm-leg::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--lc)} .adm-leg.on{opacity:1;color:var(--ink);border-color:var(--lc)} .adm-svg{width:100%;height:auto;display:block} .adm-grid{stroke:var(--line);stroke-width:1} .adm-axt{fill:var(--muted);font-size:10px} .adm-funnel{display:flex;flex-direction:column;gap:.5rem} .adm-fn-row{display:grid;grid-template-columns:6.5rem 1fr auto;align-items:center;gap:.6rem;font-size:.82rem} .adm-fn-l{color:var(--muted)} .adm-fn-bar{background:var(--chip);border-radius:100px;height:.7rem;overflow:hidden} .adm-fn-bar>span{display:block;height:100%;background:var(--accent);border-radius:100px} .adm-fn-v{color:var(--muted);font-size:.76rem;white-space:nowrap} .admin-table-wrap{overflow-x:auto} .admin-table{width:100%;border-collapse:collapse;font-size:.82rem} .admin-table th{text-align:right;padding:.4rem .5rem;border-bottom:2px solid var(--line);cursor:pointer;white-space:nowrap;color:var(--muted);font-weight:600} .admin-table td{text-align:right;padding:.4rem .5rem;border-bottom:1px solid var(--line);white-space:nowrap} .admin-table th:first-child,.admin-table th:nth-child(2),.admin-table th:nth-child(3), .admin-table td:first-child,.admin-table td:nth-child(2),.admin-table td:nth-child(3){text-align:left} .adm-td-title{font-weight:600;max-width:16rem;overflow:hidden;text-overflow:ellipsis} .admin-auth{max-width:24rem;margin:3rem auto;text-align:center} .admin-auth h1{font-family:var(--serif)} .admin-form{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem} .admin-form input{font:inherit;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)} .admin-err{color:var(--accent);font-size:.85rem} .follow-btn{margin-left:.55rem;border:1px solid var(--accent);background:transparent;color:var(--accent); font:inherit;font-size:.78rem;padding:.18rem .7rem;border-radius:100px;cursor:pointer;vertical-align:middle} .follow-btn.on{background:var(--accent);color:#fff} .library{max-width:62rem;margin:2rem auto;padding:0 clamp(1rem,4vw,3rem)} .library h1{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.4rem);margin:0 0 .3rem} .lib-sub{color:var(--muted);max-width:42rem;margin:0 0 1.5rem} .lib-section{margin:2rem 0} .lib-section h2{font-family:var(--serif);font-size:1.4rem;margin:0 0 1rem} .lib-note{color:var(--muted);font-size:.85rem;font-weight:400} .lib-devices{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .lib-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem} .lib-card h3{font-family:var(--serif);margin:0 0 .4rem;font-size:1.1rem} .lib-input{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;margin:.4rem 0} .btn{border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:.9rem;padding:.5rem 1rem;border-radius:100px;cursor:pointer} .btn-ghost{background:transparent;color:var(--accent)} .pair-code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.4rem;letter-spacing:.02em;color:var(--accent);font-weight:700;margin:.6rem 0 .2rem} .rec-phrase{font-family:var(--serif);font-size:1.2rem;background:var(--chip);padding:.6rem .9rem;border-radius:10px;margin:.5rem 0;letter-spacing:.02em} .lib-remove{margin-top:.5rem;font-size:.8rem;padding:.3rem .7rem} .card-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.28);z-index:3} .card-prog span{display:block;height:100%;background:var(--accent)} .resume-pill{display:block;margin:.7rem auto 0;border:1px solid var(--accent);background:var(--surface);color:var(--accent);font:inherit;font-size:.85rem;padding:.45rem 1.1rem;border-radius:100px;cursor:pointer} .resume-note{position:fixed;left:50%;transform:translateX(-50%);bottom:1.2rem;background:var(--ink);color:var(--bg);padding:.5rem .95rem;border-radius:100px;font-size:.85rem;z-index:40;transition:opacity .5s;box-shadow:0 6px 20px rgba(0,0,0,.25)} /* mobile header: hamburger nav + a single cycling theme toggle + smaller brand, so it all fits */ @media(max-width:640px){ .brand{font-size:1.12rem} .header-right{gap:.5rem} .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .theme-set{display:none} .theme-cycle{display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem} .site-nav{position:absolute;top:calc(100% + 4px);right:clamp(1rem,4vw,3rem); flex-direction:column;align-items:flex-start;gap:.1rem;background:var(--surface); border:1px solid var(--line);border-radius:12px;padding:.5rem .9rem; box-shadow:0 12px 34px rgba(0,0,0,.2);display:none;min-width:150px;z-index:25} .site-nav.open{display:flex} .site-nav a,.site-nav .soon{display:block;padding:.45rem .2rem;font-size:1rem} .reader-bar.playing{top:0} } /* ---- non-fiction stream (articles) — all behind the kill switch ---- */ .page-head{max-width:62rem;margin:2rem auto .5rem;padding:0 clamp(1rem,4vw,3rem)} .page-head h1{font-family:var(--serif);font-size:clamp(1.9rem,5vw,2.6rem);margin:0 0 .3rem} .nonfiction-wrap{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2.2rem} .viewall{font-size:.85rem;color:var(--accent);white-space:nowrap;align-self:center} /* trust strip — claims method, not correctness (NONFICTION-PLAN §5) */ .trust-strip{font-size:.82rem;color:var(--muted);margin:.5rem 0 .2rem;border-left:3px solid var(--accent);padding-left:.7rem} .disclaimer{font-size:.85rem;color:var(--muted);background:var(--chip);border-radius:10px;padding:.6rem .85rem;margin:.8rem 0 0} .article-head .byline{margin-bottom:.3rem} /* table of contents */ .article-toc{max-width:var(--maxread);margin:1.2rem auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.8rem 1.1rem} .article-toc .toc-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .article-toc ul{list-style:none;margin:.5rem 0 0;padding:0} .article-toc li{margin:.25rem 0} .article-toc li.toc-h3{padding-left:1rem;font-size:.9rem} .article-toc a{color:var(--ink)} .article-toc a:hover{color:var(--accent)} /* sources list */ .sources{max-width:var(--maxread);margin:2rem auto 0;border-top:1px solid var(--line);padding-top:1rem} .sources h2{font-family:var(--serif);font-size:1.25rem;margin:0 0 .6rem} .source-list{padding-left:1.4rem;font-size:.9rem;line-height:1.55} .source-list li{margin:.4rem 0} .source-list a{color:var(--accent);word-break:break-word} .article-prose .cite{font-size:.7em;line-height:0} .article-prose .cite a{color:var(--accent);text-decoration:none} .article-prose .cite a:hover{text-decoration:underline} /* library non-fiction split */ .lib-nf .lib-subsection{margin:1rem 0} .lib-nf .lib-subsection h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .8rem;color:var(--muted)}