@font-face{font-family:"Cinzel";src:url(/assets/cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Spectral";src:url(/assets/spectral-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Spectral";src:url(/assets/spectral-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(/assets/spectral-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --leather:#5a1820; --leather-dk:#3a0d13; --ink:#1d1511; --ivory:#f6efdf; --ivory-2:#ebe0c7;
  --brass:#c9a24a; --brass-lt:#f0d488; --brass-dk:#7d5c1c; --rope:#a5122a; --text:#241a14; --dim:#5d4c3e;
  --serif:"Spectral",Georgia,serif; --cap:"Cinzel",Georgia,serif; --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:4.5rem}
body{margin:0;font:400 1.075rem/1.62 var(--serif);color:var(--text);
  background:var(--leather-dk);
  background-image:
    radial-gradient(circle at 0 0,#2c090e 4px,transparent 5px),
    radial-gradient(circle at 40px 40px,#2c090e 4px,transparent 5px),
    linear-gradient(135deg,transparent 48.5%,#3a0d13 49.5%,#3a0d13 50.5%,transparent 51.5%),
    linear-gradient(45deg,transparent 48.5%,#3a0d13 49.5%,#3a0d13 50.5%,transparent 51.5%),
    linear-gradient(var(--leather),var(--leather));
  background-size:80px 80px;background-position:0 0,0 0,40px 0,40px 0,0 0;
  padding-bottom:6rem}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--ivory);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem}
:focus-visible{outline:3px solid var(--brass-lt);outline-offset:3px}

/* ---- top bar: brass rail ---- */
.rail{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:.55rem 1rem;background:#1a0c07;border-bottom:3px solid var(--brass);color:var(--brass-lt)}
.rail .mark{font:700 1rem/1 var(--cap);letter-spacing:.32em;text-decoration:none;color:var(--brass-lt)}
.rail .share-btn{font:500 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#1a0c07;
  background:linear-gradient(135deg,var(--brass-lt),var(--brass) 55%,var(--brass-dk));border:0;padding:.7rem .9rem;cursor:pointer;min-height:44px}

/* ---- hero ---- */
.hero{position:relative;background:#120805;border-bottom:3px solid var(--brass)}
.hero img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;object-position:50% 40%}
.hero .badge{position:absolute;left:1rem;top:1rem;font:500 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:#1a0c07;background:var(--brass-lt);padding:.5rem .65rem}

/* ---- the listen plate: front-loaded, before any prose ---- */
.listen{max-width:46rem;margin:-2.4rem auto 0;position:relative;z-index:2;padding:0 1rem}
.listen-in{background:#1a0c07;border:2px solid var(--brass);box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--ivory);
  display:flex;gap:1rem;align-items:center;padding:1rem 1.1rem}
.listen-go{flex:none;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;color:#1a0c07;
  background:radial-gradient(circle at 35% 30%,var(--brass-lt),var(--brass) 55%,var(--brass-dk));display:flex;align-items:center;justify-content:center}
.listen-go svg{width:22px;height:22px;margin-left:3px}
.listen-go[data-playing="1"] svg{margin-left:0}
.listen-txt strong{display:block;font:700 1.05rem/1.25 var(--cap);letter-spacing:.06em;color:var(--brass-lt)}
.listen-txt span{display:block;font-size:.95rem;color:#e4d7bd;margin-top:.2rem}
.cast{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.55rem 0 0;padding:0;list-style:none;font:500 .74rem/1.3 var(--mono);color:#cdbb95}
.cast b{color:var(--brass-lt);font-weight:500}

/* ---- the door: opening ---- */
main{max-width:46rem;margin:0 auto;padding:0 1rem}
main>section{scroll-margin-top:4.5rem}
.door{color:var(--ivory);text-align:center;padding:3rem 0 1.5rem}
.door h1{font:700 clamp(2.2rem,8vw,4rem)/1.05 var(--cap);letter-spacing:.04em;margin:0;color:var(--brass-lt);
  text-shadow:0 2px 0 #1a0c07}
.door .quote{font:italic 400 clamp(1.25rem,4vw,1.6rem)/1.35 var(--serif);margin:1.2rem auto .3rem;max-width:34rem;color:#fff6e2}
.door .who{font:500 .8rem/1.4 var(--mono);letter-spacing:.06em;color:#d8c49a}
.door p.lede{text-align:left;font-size:1.12rem;color:#f1e6cf;margin:1.6rem 0 0}
.door p.lede+p{text-align:left;color:#f1e6cf}

/* ---- rules: ivory leaves with gilt edge, sharp corners ---- */
.rule{background:var(--ivory);margin:2.2rem 0;position:relative;
  border:1px solid var(--brass-dk);box-shadow:0 0 0 5px var(--ivory),0 0 0 6px var(--brass),0 14px 30px rgba(0,0,0,.4);
  padding:1.6rem 1.4rem 1.4rem}
.rule-head{display:flex;gap:1rem;align-items:center;border-bottom:1px solid #cdbb95;padding-bottom:1rem}
.rule-head img{flex:none;width:76px;height:76px;background:var(--ink);border-radius:50%}
.rule-no{font:700 .8rem/1 var(--cap);letter-spacing:.3em;color:var(--rope);margin:0 0 .35rem}
.rule h2{font:700 clamp(1.35rem,4.6vw,1.75rem)/1.15 var(--cap);margin:0;color:var(--ink);letter-spacing:.02em}
.plate{margin:1.2rem 0 1rem;background:var(--ink);color:var(--brass-lt);padding:1rem 1.1rem;border-left:6px solid var(--brass)}
.plate .fig{display:block;font:500 clamp(1.7rem,7vw,2.6rem)/1.05 var(--mono);letter-spacing:-.01em;color:#ffe3a1}
.plate .unit{display:block;font:400 .98rem/1.45 var(--serif);color:#efe2c4;margin-top:.45rem}
.rule p{margin:.8rem 0}
.rule .enter{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.2rem;padding:.85rem 1rem;
  text-decoration:none;background:var(--leather);color:var(--ivory);font:700 .95rem/1.3 var(--cap);letter-spacing:.06em;min-height:48px}
.rule .enter:hover{background:var(--rope)}
.rule .enter small{display:block;font:400 .78rem/1.3 var(--mono);letter-spacing:0;color:#e6cfa2;text-transform:none}
.rule .enter i{font-style:normal;font-size:1.4rem;color:var(--brass-lt)}
.rule .src{font:400 .8rem/1.5 var(--mono);color:var(--dim);margin:.6rem 0 0}
.rule .src a{color:var(--dim)}

/* ---- the card ---- */
.card-sec{padding:1rem 0 2rem}
.member-card{max-width:30rem;margin:1rem auto;aspect-ratio:1.586;position:relative;color:#2a1a06;padding:1.2rem 1.4rem;
  background:linear-gradient(135deg,var(--brass-lt),var(--brass) 45%,#a8822f 70%,var(--brass-lt));
  border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.35);display:flex;flex-direction:column;justify-content:space-between}
.member-card .mc-top{display:flex;justify-content:space-between;font:700 .8rem/1 var(--cap);letter-spacing:.3em}
.member-card .mc-name{font:700 clamp(1.2rem,5vw,1.6rem)/1.1 var(--cap);letter-spacing:.08em}
.member-card .mc-row{display:flex;justify-content:space-between;font:500 .76rem/1.3 var(--mono)}
.member-card .stamp{position:absolute;right:1.2rem;top:42%;transform:rotate(-14deg);border:3px solid var(--rope);color:var(--rope);
  font:700 1.05rem/1 var(--cap);letter-spacing:.18em;padding:.4rem .6rem;background:rgba(246,239,223,.25)}
.last{color:var(--ivory);font-size:1.1rem}
.last p{margin:1rem 0}
.last strong{color:var(--brass-lt);font-weight:600}

/* ---- transcript + sources + footer ---- */
.after{max-width:46rem;margin:1rem auto 0;padding:0 1rem}
details.paper{background:var(--ivory);border:1px solid var(--brass-dk);margin:1.2rem 0;padding:0}
details.paper>summary{cursor:pointer;padding:1rem 1.2rem;font:700 1rem/1.3 var(--cap);letter-spacing:.06em;color:var(--ink);min-height:48px}
details.paper .body{padding:0 1.2rem 1.2rem}
.tx h3{font:700 .95rem/1.3 var(--cap);letter-spacing:.06em;margin:1.4rem 0 .4rem;color:var(--rope)}
.tx p{margin:.35rem 0}
.tx b{font:500 .76rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:.4rem}
.sources li{margin:.5rem 0;font-size:.95rem}
.foot{max-width:46rem;margin:2rem auto 0;padding:1.2rem 1rem;color:#e6d4b0;font:400 .85rem/1.6 var(--mono);border-top:1px solid var(--brass-dk)}
.foot a{color:var(--brass-lt)}

/* ---- share sheet ---- */
dialog.sh{border:2px solid var(--brass);background:var(--ivory);color:var(--text);max-width:24rem;width:calc(100% - 2rem);padding:1.2rem}
dialog.sh::backdrop{background:rgba(20,6,8,.7)}
dialog.sh h2{font:700 1.1rem/1.2 var(--cap);margin:0 0 .8rem}
dialog.sh .sh-list{display:grid;gap:.5rem}
dialog.sh .sh-list a,dialog.sh .sh-list button{display:block;text-align:left;padding:.8rem 1rem;background:var(--ink);color:var(--ivory);
  font:500 .9rem/1.2 var(--mono);text-decoration:none;border:0;cursor:pointer;min-height:44px;width:100%}
dialog.sh .sh-close{margin-top:.8rem;background:none;border:1px solid var(--dim);padding:.6rem 1rem;cursor:pointer;font:500 .85rem var(--mono)}

@media (max-width:540px){
  .rule{padding:1.3rem 1rem 1.1rem}
  .rule-head img{width:60px;height:60px}
  .listen-in{padding:.85rem}
  .listen-go{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- canonical narration player (.narr-*), palette only ---- */
.narr{--n-bg:#1a0c07;--n-page:#2b150d;--n-ink:#f6efdf;--n-dim:#cdbb95;--n-faint:#b9a47c;--n-rule:rgba(201,162,74,.45);--n-accent:#c9a24a}
.card-h{padding:1rem 0 0;font:700 1.6rem/1.2 var(--cap);color:var(--brass-lt);text-align:center;margin:0;letter-spacing:.04em}
.member-card .stamp{top:auto;bottom:24%;right:1rem;font-size:.95rem}.member-card .mc-name{max-width:70%}
/* handed-over art: shown whole, never cropped */
.rule .art{display:block;width:calc(100% + 2.8rem);max-width:none;height:auto;margin:-1.6rem -1.4rem 1.2rem;border-bottom:3px solid var(--brass)}
.rule .tag{margin:.35rem 0 0;font:italic 400 1.02rem/1.35 var(--serif);color:var(--dim)}
.hero{text-align:center}
.hero img{max-height:none;object-fit:contain;max-width:1400px;margin:0 auto}
.card-art{display:block;width:100%;max-width:30rem;height:auto;margin:1rem auto 0;border:3px solid var(--brass);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.card-tag{text-align:center;color:var(--brass-lt);font:italic 400 1.25rem/1.35 var(--serif);margin:1rem 0 .5rem}
@media (max-width:540px){.rule .art{width:calc(100% + 2rem);margin:-1.3rem -1rem 1rem}}
/* the hero is the handed-over art: nothing sits on its title or its subject */
.listen{margin-top:1rem}
.hero .badge{left:auto;top:auto;right:.6rem;bottom:.6rem}
@media (max-width:540px){.hero .badge{font-size:.62rem;padding:.35rem .45rem;right:.4rem;bottom:.4rem}}