:root{
  --paper:#FBF8F1; --paper2:#F3EEE1; --card:#FFFEFA;
  --ink:#211D18; --ink-dim:#6C6558; --ink-faint:#9A9280;
  --red:#A61E22; --red-bright:#C0272C;
  --gold:#9C7A26; --gold-bright:#B8933B;
  --hair:#DCD5C4; --hair-dark:#C6BCA5;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --disp:'Cinzel', 'Trajan Pro', Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19.5px; line-height:1.72;
  background-image:radial-gradient(1200px 600px at 50% -10%, #FFFEF9, transparent 70%);
}
a{color:var(--red); text-decoration:none}
a:hover{color:var(--red-bright)}
main{max-width:46rem; margin:0 auto; padding:0 1.25rem}

/* header */
.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.4rem; position:sticky; top:0; z-index:10;
  background:rgba(251,248,241,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.top .home{display:flex; align-items:center; gap:.6rem; color:var(--ink)}
.top .mark{width:26px; height:26px}
.wordmark{font-family:var(--disp); font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim)}
.top nav{display:flex; gap:1.1rem; flex-wrap:wrap}
.top nav a{font-family:var(--disp); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim)}
.top nav a.on, .top nav a:hover{color:var(--red)}

/* hero */
.hero{text-align:center; padding:5rem 0 3rem}
.hero-mark{width:80px; height:80px}
.site-title{
  font-family:var(--disp); font-weight:500; font-size:clamp(1.9rem,5.5vw,3rem);
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  margin:1.4rem 0 .3rem;
}
.subtitle{font-style:italic; font-size:1.25rem; color:var(--ink-dim); margin:.1rem 0}
.delivered{font-variant:small-caps; letter-spacing:.24em; font-size:.85rem; color:var(--ink-faint); margin:.4rem 0 0}
.rule{display:flex; align-items:center; gap:1rem; margin:2.4rem auto 2.2rem; max-width:22rem; color:var(--gold)}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--hair-dark));}
.rule::after{background:linear-gradient(90deg,var(--hair-dark),transparent)}
.thelema-line{font-size:1.5rem; font-style:italic; color:var(--ink); margin:0 0 1rem}

/* chapter cards */
.chapters{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0 2.5rem}
@media(max-width:640px){.chapters{grid-template-columns:1fr}}
.chcard{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.45rem;
  border:1px solid var(--hair); border-radius:3px; padding:1.7rem 1rem 1.4rem;
  background:var(--card);
  box-shadow:0 1px 2px rgba(60,50,30,.05);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.chcard:hover{border-color:var(--hair-dark); transform:translateY(-2px); box-shadow:0 10px 26px -18px rgba(60,50,30,.5)}
.chrn{font-family:var(--disp); font-size:2.6rem; color:var(--accent); line-height:1}
.chname{font-family:var(--disp); font-size:.85rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink)}
.chep{font-style:italic; font-size:.92rem; color:var(--ink-dim); min-height:2.6em}
.chvv{font-variant:small-caps; letter-spacing:.18em; font-size:.72rem; color:var(--ink-faint)}
.alsolinks{text-align:center; margin:0 0 4rem; color:var(--ink-faint)}
.alsolinks a{font-family:var(--disp); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase}
.alsolinks span{margin:0 .7rem; color:var(--gold)}

/* chapter pages */
.chhead{text-align:center; padding:4rem 0 2.6rem; position:relative}
.chhead-rn{font-family:var(--disp); font-size:6.5rem; line-height:1; color:var(--accent); opacity:.12; position:absolute; left:50%; top:1.2rem; transform:translateX(-50%); pointer-events:none}
.chhead h1{font-family:var(--disp); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:1.6rem; color:var(--red); margin:2.6rem 0 .2rem}
.chhead-name{font-variant:small-caps; letter-spacing:.4em; color:var(--ink-dim); margin:0; font-size:.95rem}
.verses{padding-bottom:2rem}
.verse{position:relative; padding:.3rem 0; margin:0 0 .2rem; border-radius:2px}
.verse .vtext p{margin:.25rem 0}
.verse .vtext.poem p{margin:0; line-height:1.6}
.vnum{
  position:absolute; left:-3.4rem; top:.62rem; width:2.6rem; text-align:right;
  font-family:var(--disp); font-size:.78rem; color:var(--red); opacity:.8;
}
.vnum:hover{opacity:1; color:var(--red-bright)}
@media(max-width:900px){
  .vnum{position:static; display:inline-block; width:auto; margin-right:.5rem; text-align:left}
  .verse .vtext{display:inline}
  .verse .vtext p:first-child{display:inline}
}
.verse:target{background:linear-gradient(90deg, rgba(156,122,38,.12), transparent 75%)}
.verse:target .vnum{opacity:1; color:var(--red-bright)}
.verse{scroll-margin-top:5.5rem}
.emend{border-bottom:1px dotted var(--red); cursor:help}
.heb{font-size:1.05em}

.vtools{position:absolute; right:-2.6rem; top:.5rem}
.ctoggle{
  background:none; border:none; cursor:pointer; padding:.1rem .3rem;
  font-size:.85rem; color:var(--gold); opacity:.5; transition:opacity .2s, color .2s;
}
.ctoggle:hover,.ctoggle[aria-expanded="true"]{opacity:1; color:var(--gold-bright)}
@media(max-width:900px){
  .vtools{position:static; text-align:right; margin:-.2rem 0 0}
}
.drawer{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease}
.drawer.open{grid-template-rows:1fr}
.drawer-in{overflow:hidden; min-height:0}
.drawer .layer-label{
  font-family:var(--disp); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin:.8rem 0 .4rem;
}
.drawer .layer-label span{color:var(--ink-faint); text-transform:none; letter-spacing:.08em}
.drawer-in{border-left:2px solid var(--hair-dark); padding:0 0 0 1.1rem; margin:.2rem 0 .8rem .2rem}
.entry{font-size:.94rem; color:#4E4738; margin-bottom:.6rem}
.entry p{margin:.35rem 0}
.entry pre{
  font-size:.72rem; line-height:1.5; color:var(--ink-dim); overflow-x:auto;
  background:var(--paper2); border:1px solid var(--hair); border-radius:3px; padding:.7rem .9rem;
}
.chnav{display:flex; justify-content:space-between; padding:2rem 0 4rem; font-family:var(--disp); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase}

/* comment page */
.plaque-wrap{padding:3.5rem 0 4rem}
.page-title{font-family:var(--disp); font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-align:center; color:var(--red); font-size:1.5rem; margin:1rem 0 2.2rem}
.plaque{
  border:1px solid var(--hair-dark); border-radius:2px; padding:2.4rem 2.2rem;
  background:var(--card);
  box-shadow:0 2px 14px rgba(60,50,30,.08);
  position:relative;
}
.plaque::before{content:""; position:absolute; inset:7px; border:1px solid var(--hair); border-radius:1px; pointer-events:none}
.plaque p{margin:.9rem 0}
.plaque .sig{display:block; margin:1.6rem auto 0; max-width:260px; width:70%; mix-blend-mode:multiply}

/* prose pages */
.prose{padding:3.5rem 0 4rem}
.prose h2{font-family:var(--disp); font-weight:500; font-size:1.02rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin:2.4rem 0 .7rem}
.prose p{margin:.8rem 0}
.greeting{font-style:italic; color:var(--ink-dim)}
.dim{color:var(--ink-faint); font-size:.95rem}
.lamen{display:block; margin:2.2rem auto 1rem; width:180px; max-width:60%; mix-blend-mode:multiply}
.chain{list-style:none; margin:1.2rem 0; padding:0; position:relative}
.chain::before{content:""; position:absolute; left:.35rem; top:.8rem; bottom:.8rem; width:1px; background:var(--hair-dark)}
.chain li{position:relative; padding:0 0 1.4rem 1.9rem}
.chain li::before{content:""; position:absolute; left:0; top:.52rem; width:.72rem; height:.72rem; border-radius:50%; border:1px solid var(--gold); background:var(--paper)}
.chain li.bearer::before{background:var(--red); border-color:var(--red)}
.chain .who{display:block; font-family:var(--disp); font-size:.95rem; letter-spacing:.08em; color:var(--ink)}
.chain li.bearer .who{color:var(--red)}
.chain .what{display:block; font-size:.95rem; color:var(--ink-dim); margin-top:.15rem}
.record li{margin:.5rem 0; color:var(--ink-dim)}
.draft-note{
  border:1px dashed var(--red); border-radius:3px; padding:.8rem 1rem;
  color:var(--red); font-size:.9rem; margin:1.4rem 0; background:rgba(166,30,34,.045);
  font-variant:small-caps; letter-spacing:.06em;
}
.colophon-line{margin-top:2.5rem; font-style:italic; color:var(--ink-faint)}

/* footer */
footer{text-align:center; padding:2.5rem 1rem 3rem; border-top:1px solid var(--hair); margin-top:2rem}
.lawline{font-style:italic; color:var(--ink-dim); margin:.2rem 0}
.colophon{font-variant:small-caps; letter-spacing:.22em; font-size:.7rem; color:var(--ink-faint); margin:.6rem 0 0}

/* toast */
.toast{
  position:fixed; bottom:1.6rem; left:50%; transform:translate(-50%, 20px);
  background:var(--ink); color:var(--paper); border-radius:3px; padding:.45rem 1.1rem;
  font-family:var(--disp); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform:translate(-50%,0)}