:root{
      --night:#07171b; --night-2:#0c2a2e; --gold:#ffc857; --gold-deep:#e0a93b; --accent:#c6432f;
      --page:#f7efdc; --page-ink:#2a2118; --page-soft:#6a5c44; --page-line:#e3d6b8;
      --reader:20px; --nav-h:68px;
    }
    /* reading surface themes (the floating "page") */
    body.light{ --page:#fffdf6; --page-ink:#1c2a2c; --page-soft:#5a6365; --page-line:#e7e0cf; }
    body.dark{  --page:#0e2329; --page-ink:#ecefe9; --page-soft:#9fb1ab; --page-line:#24454d; }
    body.size-s{ --reader:18px; } body.size-l{ --reader:23px; }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; color:#ece6d6; background:
      radial-gradient(1100px 600px at 80% -10%, rgba(255,200,87,.10), transparent 60%),
      linear-gradient(180deg, #07171b, #0a1f24 60%, #07171b);
      background-attachment:fixed; font-family:"Lora", Georgia, "Times New Roman", serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
    a{color:var(--accent)}
    .wrap{width:min(820px,100%); margin:0 auto; padding:0 18px}
    .tools{display:flex; gap:6px; align-items:center}
    .tbtn{min-width:38px; height:34px; padding:0 9px; border:1px solid rgba(255,200,87,.3); border-radius:8px; background:rgba(255,255,255,.04); color:#ece6d6; font-family:"Lora",Georgia,"Times New Roman",serif; font-weight:600; cursor:pointer; font-size:14px}
    .tbtn:hover{border-color:var(--gold); color:var(--gold)}
    .tbtn.tiny{font-size:12px} .tbtn.big{font-size:18px}
    .progress{height:3px; background:transparent}
    .progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); box-shadow:0 0 8px rgba(255,200,87,.6)}
    /* HERO */
    .hero{padding:54px 0 26px; text-align:center}
    .eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--gold); font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 16px}
    .eyebrow::before,.eyebrow::after{content:""; width:22px; height:1px; background:var(--gold-deep); display:inline-block}
    .hero img{width:150px; height:auto; border-radius:6px; border:1px solid rgba(255,200,87,.3); box-shadow:0 24px 60px rgba(0,0,0,.55); margin-bottom:20px}
    .hero h1{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:900; font-size:clamp(30px,6vw,50px); line-height:1.02; margin:0; color:#fff}
    .hero .sub{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:15px; margin:10px 0 0}
    .hero .lead{color:#cdd6d3; max-width:540px; margin:18px auto 0; font-size:18px}
    .read-meta{margin:12px auto 0; color:#f0cf76; font-family:"Inter",Arial,sans-serif; font-size:14px; font-weight:700; letter-spacing:.04em}
    .cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}
    .btn{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:13px 24px; border-radius:999px; background:var(--gold); color:var(--night); font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:15px; text-decoration:none; border:2px solid var(--gold); cursor:pointer; transition:transform .15s, box-shadow .2s}
    .btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,200,87,.28)}
    .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
    .btn.ghost:hover{border-color:var(--gold); color:var(--gold)}
    /* ASCENDANTS */
    .ascend{padding:30px 0 8px}
    .sec-eye{text-align:center; color:var(--gold); font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin:0 0 6px}
    .sec-h{text-align:center; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:#fff; font-size:clamp(22px,4vw,30px); margin:0 0 6px}
    .sec-p{text-align:center; color:#bfc9c6; margin:0 auto 24px; max-width:520px}
    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .card{background:linear-gradient(160deg, rgba(255,200,87,.10), rgba(255,255,255,.03)); border:1px solid rgba(255,200,87,.26); border-radius:16px; padding:18px; text-align:left; display:flex; flex-direction:column; gap:8px}
    .card .who{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:#fff; font-weight:700; font-size:18px}
    .card .role{color:var(--gold); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:600}
    .card .desc{color:#cdd6d3; font-size:14.5px; flex:1}
    .pick{align-self:flex-start; margin-top:4px; background:transparent; border:1px solid rgba(255,200,87,.4); color:var(--gold); border-radius:999px; padding:7px 14px; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:12.5px; cursor:pointer}
    .pick:hover{background:var(--gold); color:var(--night)}
    @media(max-width:680px){ .cards{grid-template-columns:1fr 1fr; gap:10px} .card{padding:14px} }
    @media(max-width:430px){ .cards{grid-template-columns:1fr} }
    .card{appearance:none; width:100%; font:inherit; cursor:pointer; text-align:left}
    .card.selected{border-color:var(--gold); background:linear-gradient(160deg, rgba(255,200,87,.24), rgba(255,200,87,.06)); box-shadow:0 14px 32px rgba(255,200,87,.20)}
    .card .pick{align-self:flex-start; margin-top:4px; background:transparent; border:1px solid rgba(255,200,87,.4); color:var(--gold); border-radius:999px; padding:7px 14px; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:12.5px}
    .card.selected .pick{background:var(--gold); color:var(--night)}
    #pickResult{margin-top:22px; text-align:center}
    .pick-line{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:var(--gold); font-size:clamp(17px,2.6vw,21px); line-height:1.35; margin:0 auto 16px; max-width:520px}
    .flip{perspective:1000px; height:235px; cursor:pointer; border-radius:16px}
    .flip:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
    .flip-inner{position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d}
    .flip.flipped .flip-inner{transform:rotateY(180deg)}
    .flip-front,.flip-back{position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border:1px solid rgba(255,200,87,.26); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:8px; overflow:hidden}
    .flip-front{background:linear-gradient(160deg, rgba(255,200,87,.10), rgba(255,255,255,.03))}
    .flip-back{transform:rotateY(180deg); background:linear-gradient(160deg, rgba(255,200,87,.22), rgba(12,42,46,.65)); justify-content:center}
    .flip .role{color:var(--gold); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:600}
    .flip .who{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:#fff; font-weight:700; font-size:18px}
    .flip .desc{color:#cdd6d3; font-size:14px; flex:1}
    .flip .pick,.flip-toggle{align-self:flex-start; margin-top:4px; color:var(--gold); border:1px solid rgba(255,200,87,.4); border-radius:999px; padding:6px 13px; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:12px; background:transparent; cursor:pointer}
    .flip:hover .pick{background:var(--gold); color:var(--night)}
    .back-line{color:#fff; font-family:"Lora",Georgia,"Times New Roman",serif; font-size:15px; line-height:1.4; margin:6px 0 12px; flex:1}
    .pick-share{align-self:flex-start; background:var(--gold); color:var(--night); border:none; border-radius:999px; padding:9px 16px; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:12.5px; cursor:pointer}
    .pick-share:hover{background:var(--gold-deep)}
    @media(max-width:680px){ .flip{height:225px} }
    @media(max-width:430px){ .flip{height:205px} }
    @media (prefers-reduced-motion: reduce){ .flip-inner{transition:none} }
    /* READING PAGE */
    .page{background:var(--page); color:var(--page-ink); border-radius:14px; margin:40px auto 0; padding:48px clamp(22px,5vw,60px) 40px; box-shadow:0 30px 70px rgba(0,0,0,.45); max-width:760px}
    .page .chap-no{display:block; text-align:center; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:var(--accent); font-weight:800; letter-spacing:.3em; font-size:15px; margin-bottom:6px}
    .page h2{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; text-align:center; font-size:clamp(22px,4vw,30px); margin:0 0 6px; color:var(--page-ink)}
    .page h2.next{margin-top:46px; padding-top:34px; border-top:1px solid var(--page-line)}
    .drop::first-letter{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; float:left; font-size:3.4em; line-height:.82; padding:6px 10px 0 0; color:var(--gold-deep)}
    .page p{font-size:var(--reader); margin:0 0 1.1em; text-align:justify}
    .page p.dialogue{text-align:left}
    .pull{margin:30px 0; padding:18px 22px; border-left:4px solid var(--gold-deep); background:rgba(255,200,87,.10); border-radius:8px}
    .pull blockquote{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-size:clamp(18px,2.6vw,23px); line-height:1.3; margin:0 0 12px; color:var(--page-ink)}
    .pull .sharemini{display:inline-flex; align-items:center; gap:7px; background:var(--gold); color:var(--night); border:none; border-radius:999px; padding:8px 16px; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:12.5px; cursor:pointer}
    .pull .sharemini:hover{background:var(--gold-deep)}
    /* END / SHARE */
    .endcard{max-width:760px; margin:30px auto 0; background:linear-gradient(160deg,#0c2a2e,#07171b); border:1px solid rgba(255,200,87,.3); border-radius:16px; padding:34px clamp(22px,5vw,40px); text-align:center}
    .endcard .tag{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; font-size:12px; margin:0 0 10px}
    .endcard h3{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; color:#fff; font-size:clamp(22px,4vw,30px); margin:0 0 10px}
    .endcard p{color:#cdd6d3; max-width:540px; margin:0 auto 20px}
    .share-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
    .chip{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; border:1px solid rgba(255,200,87,.4); background:rgba(255,255,255,.04); color:#ece6d6; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:13px; text-decoration:none; cursor:pointer}
    .chip:hover{border-color:var(--gold); color:var(--gold)}
    .chip.solid{background:var(--gold); color:var(--night); border-color:var(--gold)}
    .toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--night-2); color:var(--gold); border:1px solid var(--gold-deep); padding:11px 20px; border-radius:999px; font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif; font-weight:700; font-size:13px; transition:all .25s; z-index:60; pointer-events:none}
    .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
    @media (prefers-reduced-motion: reduce){ *{transition:none!important} html{scroll-behavior:auto} }
    /* reading controls bar under the nav */
    .readerbar{background:rgba(7,23,27,.7);border-bottom:1px solid rgba(255,200,87,.12)}
    .readerbar-in{width:min(980px,100%);margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .rb-label{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,"Times New Roman",serif;color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
    /* ---- banner hero (uses citadel art, not the cover) ---- */
    .hero{position:relative;text-align:center;color:#fff;padding:74px 18px 44px;background:
      radial-gradient(900px 420px at 75% 8%, rgba(255,200,87,.16), transparent 60%),
      linear-gradient(180deg, rgba(7,23,27,.66), rgba(7,23,27,.92)),
      image-set(url("/images/perf/citadel.webp") type("image/webp"), url("/images/citadel.jpg") type("image/jpeg")) center/cover no-repeat, var(--night)}