/* Fonts, colours (variables), page basics, buttons, header, side rail.
   Loaded in number order by templates/site.php (order matters: later files win). */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cinzel-600.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cinzel-700.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-600.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cormorant-700.woff2) format('woff2')}
@font-face{font-family:'Cinzel Decorative';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cinzel-decorative-700.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-700.woff2) format('woff2')}
:root{
  --ink:#041120; --navy:#071a2a; --deep:#0a2336; --panel:#0e2c43; --panel-2:#143a56;
  --gold:#e2bd78; --gold-hi:#f7e2ae; --gold-lo:#a87b38; --ivory:#f8f1e3; --mist:#cad7e2; --dim:#9db0c1;
  --line:rgba(226,189,120,.28); --line-soft:rgba(169,188,203,.14);
  --ok:#86d6ae; --closed:#e9a08f;
  --serif:"Cinzel","Trajan Pro","Times New Roman",serif;
  --sans:"Cormorant Garamond",Garamond,Georgia,serif;
  --royal:"Cinzel Decorative","Cinzel",serif;
  --figure:"Playfair Display","Didot","Bodoni 72",Georgia,serif;
  --wrap:min(1200px,calc(100% - 48px));
  --ease:cubic-bezier(.16,1,.3,1);
  --head:92px;   /* top bar height (was 78px) */
  --guilloche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23e2bd78' stroke-width='.5' opacity='.5'%3E%3Cpath d='M0 90 Q22 45 45 90 T90 90 T135 90 T180 90'/%3E%3Cpath d='M0 100 Q22 55 45 100 T90 100 T135 100 T180 100'/%3E%3Cpath d='M0 80 Q22 35 45 80 T90 80 T135 80 T180 80'/%3E%3Ccircle cx='90' cy='90' r='52'/%3E%3Ccircle cx='90' cy='90' r='60'/%3E%3Ccircle cx='0' cy='0' r='52'/%3E%3Ccircle cx='180' cy='180' r='52'/%3E%3Ccircle cx='180' cy='0' r='52'/%3E%3Ccircle cx='0' cy='180' r='52'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ivory);font:600 20px/1.6 var(--sans);overflow-x:clip;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1:focus,h2:focus{outline:none}
.wrap{width:var(--wrap);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:8px;font:700 13px var(--serif);text-decoration:none}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:.02em;line-height:1.08}
h1{font-size:clamp(42px,6vw,84px)}
h2{font-size:clamp(34px,4.4vw,60px)}
h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:.04em}
p{margin:0}
.kicker{display:inline-flex;align-items:center;gap:12px;font:600 18px/1 var(--serif);letter-spacing:.2em;color:var(--gold);margin:0 0 22px}
.kicker::before{content:"";width:30px;height:1px;background:currentColor}
.lede{font-size:clamp(20px,1.7vw,23px);line-height:1.55;color:var(--mist);max-width:none;margin-top:24px}
.muted{color:var(--mist)}
.gold-text{background:linear-gradient(100deg,var(--gold-hi) 0%,var(--gold) 40%,#fff3cf 50%,var(--gold) 60%,var(--gold-hi));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 3.2s cubic-bezier(.4,0,.2,1) .5s 1 both}
@keyframes sheen{to{background-position:-220% 0}}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:1px solid transparent;
  font:700 13px/1 var(--serif);letter-spacing:.1em;text-decoration:none;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s,color .3s,background .3s}
.btn svg{width:15px;height:15px;flex:none}
.btn-gold{color:#1b1206;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#c4954f);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 30px -12px rgba(226,189,120,.75)}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-line{color:var(--ivory);border-color:var(--line);background:rgba(10,35,54,.55)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn-sm{min-height:42px;padding:0 18px;font-size:11.5px}

/* header */
.header{position:fixed;inset:0 0 auto;z-index:100;height:var(--head);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.header.solid{background:rgba(4,17,32,.95);border-bottom-color:var(--line-soft)}
.header .wrap{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand img{width:80px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.brand-name{display:block;font:700 22px/1 var(--serif);letter-spacing:.08em}
.brand-sub{display:block;margin-top:8px;font:600 13px/1 var(--serif);letter-spacing:.18em;color:var(--gold)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{position:relative;padding:10px 13px;text-decoration:none;font:600 12px/1 var(--serif);letter-spacing:.12em;color:var(--mist);transition:color .3s}
.nav a:hover,.nav a.on{color:var(--ivory)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .4s var(--ease)}
.nav a.on::after{transform:scaleX(1)}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(10,35,54,.6);cursor:pointer}
.menu-btn span{display:block;width:20px;height:1.5px;margin:5px auto;background:var(--ivory);transition:transform .4s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:99;padding:calc(var(--head) + 24px) 24px 32px;background:rgba(4,17,32,.97);backdrop-filter:blur(12px);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.drawer.open{opacity:1;visibility:visible;transition:opacity .35s}
.drawer a.dl{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;font:600 26px/1.1 var(--serif);letter-spacing:.05em;
  transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .4s;transition-delay:calc(var(--i) * 50ms)}
.drawer a.dl small{font:600 11px var(--serif);color:var(--gold);letter-spacing:.14em}
.drawer.open a.dl{transform:none;opacity:1}
.drawer .btn{margin-top:auto}

/* chapter rail */
.rail{position:fixed;right:22px;top:50%;z-index:90;transform:translateY(-50%);display:grid;gap:6px}
.rail a{position:relative;display:grid;place-items:center;width:34px;height:34px;text-decoration:none}
.rail a i{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold);transition:transform .4s var(--ease),background .3s}
.rail a.on i{background:var(--gold);transform:scale(1.4);box-shadow:0 0 0 5px rgba(226,189,120,.15)}
.rail a span{position:absolute;right:40px;white-space:nowrap;font:600 11px/1 var(--serif);letter-spacing:.14em;color:var(--gold-hi);background:rgba(4,17,32,.88);border:1px solid var(--line);padding:7px 10px;border-radius:8px;
  opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:101;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}