:root{
  --bg:#0e1220; --bg2:#151a2e; --ink:#ece7da; --muted:#a8a69b; --gold:#e3b95c; --gold2:#f3d58a; --line:#2a3050;
  --read-bg:#12151f; --read-ink:#e6e1d4; --read-size:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.6}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2)}
img{max-width:100%;display:block}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(14,18,32,.92);backdrop-filter:blur(6px);z-index:20}
.brand{font-size:1.35rem;letter-spacing:.04em;color:var(--ink);display:flex;align-items:center;gap:10px}
.spark{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px 4px rgba(227,185,92,.55)}
.top nav a{margin-left:24px;color:var(--muted);font-size:.98rem}
.top nav a:hover{color:var(--gold2)}

/* hero */
.hero{position:relative;overflow:hidden;min-height:62vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:70px 6vw;background:radial-gradient(ellipse at 50% 20%,#1d2547 0%,var(--bg) 62%)}
.hero::before{content:"";position:absolute;inset:0;background:url(../images/hero-book.jpg) center 52%/cover no-repeat;opacity:.38;filter:blur(1px) saturate(.85) contrast(1.05);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,rgba(0,0,0,.35) 70%,transparent 100%);mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,rgba(0,0,0,.35) 70%,transparent 100%)}
.hero-inner{position:relative;z-index:1;text-shadow:0 2px 18px rgba(0,0,0,.65)}
.hero h1{font-size:clamp(2.6rem,8vw,5.2rem);margin:.15em 0;letter-spacing:.03em;font-weight:400}
.eyebrow{text-transform:uppercase;letter-spacing:.3em;color:var(--gold);font-size:.8rem;margin:0}
.lead{color:var(--muted);font-size:1.15rem;max-width:640px;margin:0 auto 28px}
.btn{display:inline-block;background:var(--gold);color:#17120a;padding:13px 26px;border-radius:999px;font-weight:700;letter-spacing:.02em;border:2px solid var(--gold);cursor:pointer;font-family:inherit;font-size:1rem}
.btn:hover{background:var(--gold2);color:#17120a}
.btn.ghost{background:transparent;color:var(--gold);margin-left:10px}
.btn.ghost:hover{background:rgba(227,185,92,.12);color:var(--gold2)}

/* shelf */
.shelf{padding:60px 5vw;max-width:1250px;margin:0 auto}
.shelf h2,.toc h2{font-weight:400;letter-spacing:.06em;font-size:1.7rem;margin:0 0 28px;color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:30px}
.card{display:block;color:var(--ink);transition:transform .25s}
.card:hover{transform:translateY(-6px);color:var(--ink)}
.card img{aspect-ratio:2/3;object-fit:cover;border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.55);background:#222}
.card .meta{margin-top:14px;display:flex;gap:8px;align-items:center}
.genre{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--gold)}
.adult{font-size:.68rem;border:1px solid #c96b6b;color:#e59a9a;padding:1px 7px;border-radius:4px;letter-spacing:.06em}
.card h3{margin:.3em 0 .2em;font-size:1.25rem;font-weight:400}
.card p{margin:0;color:var(--muted);font-size:.93rem}
.resume{max-width:1250px;margin:0 auto;padding:0 5vw 40px}

/* generic page */
.page{max-width:1100px;margin:0 auto;padding:48px 5vw 70px}
.page.narrow{max-width:720px}
.page h1{font-weight:400;font-size:2.4rem;margin:.1em 0}

/* book page */
.bookhead{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:48px;align-items:start}
.bigcover{border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.6);width:100%}
.bookhead .by{color:var(--muted);margin:.1em 0 1em;font-style:italic}
.bookhead .tag{color:var(--gold2);font-size:1.15rem;font-style:italic}
.bookhead p{font-size:1.06rem;max-width:62ch}
.note{color:#e59a9a;font-size:.92rem}
.facts{color:var(--muted);font-size:.9rem}
.actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.actions .btn.ghost{margin-left:0}
.toc{margin-top:64px}
.toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.toc li a{display:grid;grid-template-columns:130px 1fr 70px;gap:12px;padding:14px 6px;border-bottom:1px solid var(--line);color:var(--ink)}
.toc li a:hover{background:var(--bg2)}
.toc .n{color:var(--gold);font-size:.95rem}
.toc .m{color:var(--muted);font-size:.85rem;text-align:right}
.toc li.part{padding:26px 6px 8px;color:var(--gold2);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;border-bottom:1px solid var(--line)}

/* reader */
body.reader{background:var(--read-bg);color:var(--read-ink)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:50}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
.rtop{display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:inherit;z-index:30}
.back{font-size:.95rem;opacity:.85}
.tools button{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:6px 12px;margin-left:8px;cursor:pointer;font-family:inherit;font-size:.95rem}
.tools button:hover{border-color:var(--gold);color:var(--gold)}
.text{max-width:680px;margin:0 auto;padding:60px 22px 40px;font-size:var(--read-size);line-height:1.78}
.text .label{text-align:center;text-transform:uppercase;letter-spacing:.3em;color:var(--gold);font-size:.72em;margin:30px 0 6px}
.text h1{text-align:center;font-weight:400;font-size:2.1em;line-height:1.2;margin:.1em 0 1.2em}
.partbanner{text-align:center;text-transform:uppercase;letter-spacing:.35em;font-size:.72em;color:var(--gold2);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:12px 0;margin:0 0 50px}
.text p{margin:0;text-indent:1.5em;text-align:justify;hyphens:auto}
.text h1 + p,.text hr + p,.text .label + h1 + p,.text .plate + p,.text h3 + p{text-indent:0}
.text h3{text-align:center;font-weight:400;font-size:1.2em;margin:1.8em 0 .8em}
.text hr.scene{border:0;text-align:center;margin:1.8em 0;height:1em}
.text hr.scene::after{content:"\2022  \2022  \2022";color:var(--gold);letter-spacing:.6em}
.text em{font-style:italic}
.plate{margin:2em 0;text-align:center}
.plate img{border-radius:4px;margin:0 auto}
.plate figcaption{font-size:.72em;color:var(--muted);margin-top:8px;text-indent:0}
.dedication{text-align:center;font-style:italic;margin:30px 0 60px}
.dedication p{text-indent:0;text-align:center}
.copyright{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;font-size:.78em;color:var(--muted)}
.copyright p{text-indent:0;margin:0 0 .8em;text-align:left}
.pager{max-width:680px;margin:20px auto 60px;padding:0 22px;display:flex;justify-content:space-between;gap:12px}
.pager a{border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:8px;font-size:.95rem;color:var(--gold)}
.pager a:hover{border-color:var(--gold)}
.foot{border-top:1px solid var(--line);padding:30px 5vw;text-align:center;color:var(--muted);font-size:.9rem}
.foot .small,.small{font-size:.8rem;opacity:.8;margin-top:6px}
body.reader .foot{border-color:rgba(255,255,255,.1)}

/* reading themes */
body.reader.sepia{--read-bg:#f1e6cf;--read-ink:#3b2f1f}
body.reader.sepia .text .label,body.reader.sepia .partbanner{color:#8a5a12;border-color:#8a5a12}
body.reader.sepia .text hr.scene::after{color:#8a5a12}
body.reader.sepia .pager a,body.reader.sepia .back{color:#6b4410}
body.reader.sepia .tools button{border-color:rgba(0,0,0,.3)}
body.reader.sepia .foot,body.reader.sepia .copyright{color:#6b5a40}
body.reader.light{--read-bg:#ffffff;--read-ink:#1a1a1a}
body.reader.light .text .label,body.reader.light .partbanner{color:#8a6a1a;border-color:#8a6a1a}
body.reader.light .pager a,body.reader.light .back{color:#6b4410}
body.reader.light .tools button{border-color:rgba(0,0,0,.3)}
body.reader.light .foot,body.reader.light .copyright{color:#666}
body.reader.light .rtop,body.reader.sepia .rtop{border-bottom-color:rgba(0,0,0,.12)}

/* copy protection (deterrent) */
body.reader .text{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.reader .text img{pointer-events:none}
@media print{body.reader .text,body.reader .pager{display:none!important}body.reader::before{content:"This book can only be read on the GaivenWriters website.";display:block;padding:40px;font-size:20px}}

/* age gate */
.gate{position:fixed;inset:0;background:rgba(5,7,14,.96);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.gate .box{max-width:460px;text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:34px 30px}
.gate h2{margin:.1em 0 .4em;font-weight:400;color:var(--gold)}
.gate p{color:var(--muted)}
.gate .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.gate .btn.ghost{margin-left:0}

@media(max-width:760px){
  .bookhead{grid-template-columns:1fr;gap:26px}
  .bigcover{max-width:300px;margin:0 auto}
  .toc li a{grid-template-columns:1fr 60px}
  .toc li a .n{grid-column:1/2}.toc li a .t{grid-column:1/2;color:var(--muted);font-size:.92rem}
  .toc li a .m{grid-row:1/3;grid-column:2/3;align-self:center}
  .top nav a{margin-left:14px}
  .text{padding-top:40px}
}

/* ---------- single-page book reader ---------- */
body.reader.bookmode{--paper:#1c2135;--paper-ink:#e8e3d6;--desk:#0a0d18;--edge:#2a3050;background:radial-gradient(ellipse at 50% 30%,#141a30 0%,var(--desk) 70%);color:var(--paper-ink)}
body.reader.bookmode.sepia{--paper:#f4e9d0;--paper-ink:#3a2e1e;--desk:#2b2118;--edge:#d8c9a6;background:radial-gradient(ellipse at 50% 30%,#4a3a2a 0%,var(--desk) 75%)}
body.reader.bookmode.light{--paper:#fbfaf6;--paper-ink:#1a1a1a;--desk:#cfcbc2;--edge:#e3dfd3;background:radial-gradient(ellipse at 50% 30%,#e6e2d8 0%,var(--desk) 80%)}
body.bookmode #text,body.bookmode .pager,body.bookmode .foot{display:none}
#book[hidden]{display:none}
#book{padding:18px 8px 30px}
.pg-info{font-size:.85rem;opacity:.8;letter-spacing:.06em}
.bk-wrap{position:relative;display:flex;justify-content:center;align-items:center;gap:6px}
.bk-book{position:relative;perspective:1800px;border-radius:3px 8px 8px 3px;box-shadow:0 22px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04);background:var(--paper)}
.bk-book::before{content:"";position:absolute;left:-7px;top:3px;bottom:3px;width:7px;background:linear-gradient(to right,rgba(0,0,0,.45),var(--edge));border-radius:3px 0 0 3px}
.bk-book.opening{animation:bkopen .65s ease-out}
.bk-book.closing-next{animation:bkout .5s ease-in forwards}
.bk-book.closing-prev{animation:bkoutl .5s ease-in forwards}
@keyframes bkopen{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bkout{to{opacity:0;transform:translateX(-30px) rotateY(-18deg)}}
@keyframes bkoutl{to{opacity:0;transform:translateX(30px) rotateY(18deg)}}
.leaf{position:absolute;inset:0;transform-origin:left center;transform:perspective(1800px) rotateY(0deg);transition:transform .8s cubic-bezier(.55,.05,.25,1),opacity .3s ease .5s,box-shadow .8s;backface-visibility:hidden;border-radius:3px 8px 8px 3px;background:var(--paper)}
.leaf.flipped{transform:perspective(1800px) rotateY(-118deg);opacity:0;pointer-events:none;transition:transform .8s cubic-bezier(.55,.05,.25,1),opacity .3s ease .5s}
.bk-book.noanim .leaf{transition:none!important}
.leaf.turning{box-shadow:-18px 12px 40px rgba(0,0,0,.45);z-index:9999!important}
.leaf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.18),transparent 14%);}
.leaf.turning::after{animation:shade .8s ease-in-out}
@keyframes shade{0%{background:linear-gradient(to right,rgba(0,0,0,.18),transparent 14%)}50%{background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,.05) 70%)}100%{background:linear-gradient(to right,rgba(0,0,0,.18),transparent 14%)}}
.pg{position:absolute;inset:0;background:var(--paper);color:var(--paper-ink);border-radius:inherit;overflow:hidden;-webkit-user-select:none;user-select:none}
.pg-head{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:.66em;letter-spacing:.22em;text-transform:uppercase;opacity:.5}
.pg-no{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:.78em;opacity:.55}
.pg-in{position:absolute;top:42px;bottom:38px;left:34px;right:30px;overflow:hidden;line-height:1.62}
.pg-in p{margin:0;text-indent:1.4em;text-align:justify;hyphens:auto}
.pg-in p.cont,.pg-in p:first-child,.pg-in h1 + p,.pg-in hr + p,.pg-in h3 + p,.pg-in .plate + p{text-indent:0}
.pg-in .label{text-align:center;text-transform:uppercase;letter-spacing:.3em;color:var(--gold);font-size:.7em;margin:22px 0 4px}
.pg-in h1{text-align:center;font-weight:400;font-size:1.9em;line-height:1.2;margin:.1em 0 1em}
.pg-in .partbanner{text-align:center;text-transform:uppercase;letter-spacing:.3em;font-size:.7em;color:var(--gold2);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:9px 0;margin:0 0 28px}
.pg-in h3{text-align:center;font-weight:400;font-size:1.1em;margin:1.2em 0 .6em}
.pg-in hr.scene{border:0;text-align:center;margin:1em 0;height:1em}
.pg-in hr.scene::after{content:"\2022  \2022  \2022";color:var(--gold);letter-spacing:.6em}
.pg-in .plate{margin:1em 0;text-align:center}
.pg-in .plate img{max-height:var(--imgmax);margin:0 auto;border-radius:3px;width:auto;max-width:100%}
.pg-in .plate figcaption{font-size:.72em;opacity:.7;margin-top:6px}
.pg-in .dedication{text-align:center;font-style:italic;margin:1em 0 1.4em}
.pg-in .dedication p{text-indent:0;text-align:center}
.pg-in .copyright{border-top:1px solid rgba(128,128,128,.4);padding-top:12px;font-size:.78em;opacity:.8}
.pg-in .copyright p{text-indent:0;text-align:left;margin:0 0 .6em}
body.bookmode.sepia .pg-in .label,body.bookmode.sepia .pg-in .partbanner{color:#8a5a12;border-color:#8a5a12}
body.bookmode.light .pg-in .label{color:#8a6a1a}
.bk-arrow{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:var(--paper-ink);width:44px;height:64px;border-radius:10px;font-size:2rem;line-height:1;cursor:pointer;flex:none}
.bk-arrow:hover{border-color:var(--gold);color:var(--gold)}
body.bookmode.light .bk-arrow,body.bookmode.sepia .bk-arrow{background:rgba(0,0,0,.1);border-color:rgba(255,255,255,.35);color:#f4e9d0}
@media(max-width:700px){
  .bk-arrow{position:absolute;bottom:-56px;width:50%;height:46px;font-size:1.6rem;z-index:5}
  .bk-arrow.prev{left:0;border-radius:10px 0 0 10px}.bk-arrow.next{right:0;border-radius:0 10px 10px 0}
  #book{padding-bottom:80px}
  .pg-in{left:24px;right:20px}
}
@media print{#book{display:none!important}}
body.reader.bookmode .rtop{background:rgba(0,0,0,.28);color:#efe9da;border-bottom-color:rgba(255,255,255,.1)}
body.reader.bookmode .rtop .back{color:#e3b95c}
body.reader.bookmode .tools button{color:#efe9da;border-color:rgba(255,255,255,.3)}
body.reader.bookmode .tools button:hover{color:#e3b95c;border-color:#e3b95c}
body.reader.bookmode .pg-info{color:#efe9da}
@media(max-width:700px){.tools button{padding:5px 8px;margin-left:4px;font-size:.82rem}.rtop{flex-wrap:wrap;gap:8px}.pg-info{display:none}}

/* reader menu buttons */
.menu{display:flex;gap:8px;align-items:center}
.mbtn{border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:6px 12px;font-size:.95rem;color:var(--gold);white-space:nowrap}
.mbtn:hover{border-color:var(--gold);color:var(--gold2)}
body.reader.sepia .mbtn,body.reader.light .mbtn{border-color:rgba(0,0,0,.3);color:#6b4410}
@media(max-width:700px){.rtop{flex-wrap:wrap;gap:8px}.mbtn{padding:5px 9px;font-size:.85rem}.tools button{padding:5px 8px;margin-left:4px;font-size:.85rem}}

/* custom logo */
.logomark{width:40px;height:40px;object-fit:contain;padding:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbf1d4 0%,#e9cf8c 70%,#d6b25e 100%);box-shadow:0 0 16px 2px rgba(227,185,92,.45)}
.brand{gap:12px}

/* ---------- A5 paged reader (borderless, themed) ---------- */
body.reader.a5mode{--rb:#0f1424;--ri:#e6e1d3;--acc:#e3b95c;--mu:#8d93ab;background:var(--rb);color:var(--ri);min-height:100vh}
body.reader.a5mode.sepia{--rb:#f1e6cf;--ri:#3b2f1f;--acc:#8a5a12;--mu:#7a6a4e}
body.reader.a5mode.light{--rb:#ffffff;--ri:#1a1a1a;--acc:#8a6a1a;--mu:#777777}
body.reader.a5mode.night{--rb:#000000;--ri:#b8b8b8;--acc:#c9a24a;--mu:#6f6f6f}
body.reader.a5mode.slate{--rb:#2b303b;--ri:#d8dee9;--acc:#ebcb8b;--mu:#8f98ab}
body.reader.a5mode.forest{--rb:#13211a;--ri:#cfe3d4;--acc:#d9c27a;--mu:#86a08f}
body.reader.a5mode.sky{--rb:#e8f1f8;--ri:#1c2b3a;--acc:#1f5f8b;--mu:#5d7488}
body.reader.a5mode.blush{--rb:#fbefee;--ri:#402a2a;--acc:#a8454a;--mu:#8a6a6a}
body.a5mode .rtop{background:var(--rb);color:var(--ri);border-bottom:1px solid color-mix(in srgb,var(--ri) 14%,transparent)}
body.a5mode .tools button,body.a5mode .mbtn{color:var(--ri);background:transparent;border-color:color-mix(in srgb,var(--ri) 35%,transparent)}
body.a5mode .mbtn:hover,body.a5mode .tools button:hover{color:var(--acc);border-color:var(--acc)}
body.a5mode .progress span{background:var(--acc)}
.text.a5{max-width:none;padding:22px 12px 6px;font-size:16px;line-height:1.5;-webkit-user-select:none;user-select:none}
.a5pg{position:relative;width:min(100%,720px);margin:0 auto 18px;background:transparent;color:var(--ri);container-type:inline-size;aspect-ratio:148/210;box-sizing:border-box}
body.a5mode.paged .a5pg{display:none}
body.a5mode.paged .a5pg.on{display:block}
.a5in{padding:8.5cqw 9cqw 12cqw;font-size:max(calc(3.15cqw * var(--fs,1)),calc(15px * var(--fs,1)));line-height:1.6}
.a5in p{margin:0;text-indent:1.4em;text-align:justify;hyphens:auto}
.a5in .label{text-indent:0;text-align:center;text-transform:uppercase;letter-spacing:.3em;color:var(--acc);font-size:.7em;margin:.6em 0 .2em}
.a5in h1{text-align:center;font-weight:400;font-size:1.9em;line-height:1.2;margin:.1em 0 .35em}
.a5in .meta{text-indent:0;text-align:center;font-size:.7em;color:var(--mu);letter-spacing:.06em;margin:0 0 1.6em}
.a5in .partbanner{text-indent:0;text-align:center;font-size:.7em;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);margin:0 0 1em}
.a5in .meta + p{text-indent:0}
.a5in hr.scene{border:0;text-align:center;margin:1.1em 0;height:1em}
.a5in hr.scene::after{content:"\2022  \2022  \2022";color:var(--acc);letter-spacing:.6em}
.a5in hr.scene + p,.a5in h3 + p,.a5in .plate + p{text-indent:0}
.a5in h3{text-align:center;font-weight:400;font-size:1.15em;margin:1.2em 0 .6em}
.a5in .plate{margin:.6em 0;text-align:center}.a5in .plate img{max-width:100%;height:auto;border-radius:2px}
.a5in .plate figcaption{font-size:.7em;color:var(--mu);text-indent:0}
.folio{position:absolute;left:0;right:0;bottom:4.2cqw;text-align:center;font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.pagenav{width:min(100%,720px);margin:0 auto 10px;padding:0 12px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pagenav button{background:transparent;color:var(--acc);border:1px solid color-mix(in srgb,var(--ri) 30%,transparent);padding:11px 16px;border-radius:8px;font:inherit;font-size:.95rem;cursor:pointer}
.pagenav button:hover{border-color:var(--acc)}
.pagenav button[disabled]{opacity:.35;cursor:default}
.pginfo{color:var(--ri);font-size:.9rem;text-align:center;flex:1}
body.a5mode:not(.paged) .pagenav{display:none}
body.a5mode .pager{max-width:720px;padding:0 12px}
body.a5mode .pager a{color:var(--acc);border-color:color-mix(in srgb,var(--ri) 25%,transparent)}
body.a5mode .foot{color:var(--mu);border-color:color-mix(in srgb,var(--ri) 15%,transparent)}
@media print{.a5pg,.pagenav{display:none!important}}

.card.soon{cursor:default}.card.soon:hover{transform:none}.card .coverwrap{position:relative}.card.soon img{filter:saturate(.85)}
.ribbon{position:absolute;left:0;right:0;bottom:0;text-align:center;background:rgba(10,10,14,.82);color:#e9cf8c;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;padding:9px 0;border-radius:0 0 6px 6px}

#listen.on{background:var(--gold,#e9cf8c);color:#14151c;border-color:transparent}