:root{
  --paper:#f6f1e6; --ink:#2b2a29; --soft:#5d574e; --navy:#1f2a44;
  --gold:#a0834e; --brown:#6b5430; --card:#fbf8f1; --link:#2e5c8a;
}
body.night{
  --paper:#141a2a; --ink:#e7e1d3; --soft:#b7ae9c; --navy:#efe6d2;
  --gold:#c9a86a; --brown:#d3b98a; --card:#1b2236; --link:#9fc0e6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"EB Garamond",Georgia,serif;
  font-size:20px;line-height:1.65;transition:background .5s,color .5s;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
img{max-width:100%}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:20}

/* header */
header.bar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.bar-in{max-width:1040px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:18px}
.brand{font-variant:small-caps;letter-spacing:.14em;font-size:17px;color:var(--navy);text-decoration:none;white-space:nowrap}
.links{margin-left:auto;display:flex;gap:18px}
.links a{color:var(--soft);text-decoration:none;font-size:16px}
.links a:hover,.links a.on{color:var(--brown)}
.toggle{border:1px solid var(--gold);background:transparent;color:var(--brown);font:inherit;font-size:14px;
  padding:3px 12px;border-radius:999px;cursor:pointer}
.toggle:hover{background:color-mix(in srgb,var(--gold) 15%,transparent)}

/* common */
main{max-width:680px;margin:0 auto;padding:0 22px 70px}
h1{font-family:"Cormorant Garamond",serif;font-weight:600;text-align:center;color:var(--navy);
  font-size:clamp(38px,7vw,56px);line-height:1.06;margin:40px 0 8px}
.part{text-align:center;margin:30px 0 0;font-variant:small-caps;letter-spacing:.28em;font-size:15px;color:var(--brown)}
.part a{color:inherit;text-decoration:none}
.sub{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(21px,3.4vw,26px);
  color:var(--soft);margin:0 0 6px;line-height:1.3}
.byline{text-align:center;font-variant:small-caps;letter-spacing:.12em;font-size:15px;color:var(--soft);margin:16px 0 0}
.rule{display:flex;align-items:center;gap:14px;margin:28px auto;max-width:260px;color:var(--gold)}
.rule:before,.rule:after{content:"";flex:1;border-top:3px double var(--gold)}
.center{text-align:center}
.small{font-size:15px;color:var(--soft)}
.btn{display:inline-block;background:var(--navy);color:var(--paper);text-decoration:none;font-size:17px;
  padding:9px 20px;border-radius:999px;margin:4px 2px;border:1px solid var(--navy)}
.btn.alt{background:transparent;color:var(--navy)}
.btn.off{background:transparent;color:var(--soft);border-color:color-mix(in srgb,var(--gold) 60%,transparent);cursor:default}
.plate{margin:44px auto 0;max-width:780px;padding:0 22px}
.plate figure{margin:0;padding:10px;border:3px double var(--gold);background:var(--card)}
.plate img{display:block;width:100%;height:auto}
body.night .plate img,body.night .parts img,body.night .cpart img{filter:brightness(.88)}
h2.sec{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;color:var(--brown);
  text-align:center;font-size:27px;margin:2em 0 .9em;display:flex;align-items:center;gap:16px}
h2.sec:before,h2.sec:after{content:"";flex:1;border-top:1px solid color-mix(in srgb,var(--gold) 60%,transparent)}

/* essay */
article p{margin:0 0 1.05em;text-align:justify;hyphens:auto}
article ul{padding-left:1.2em} article li p{text-align:left;margin:.3em 0}
p.lead:first-letter{float:left;font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--navy);
  font-size:4.3em;line-height:.8;padding:.08em .1em 0 0}
article blockquote{margin:1.2em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--gold);font-style:italic;color:var(--soft)}
article blockquote p{text-align:left}
p.he{font-family:"Frank Ruhl Libre","Times New Roman",serif;font-size:1.45em;text-align:center;line-height:1.7;margin:1.2em 0 .2em;color:var(--navy)}
p.translit{text-align:center;color:var(--brown);margin:0 0 1.3em}
.listen{border:3px double var(--gold);background:var(--card);padding:20px 22px;margin:6px 0 36px;text-align:center}
.listen .k{font-variant:small-caps;letter-spacing:.2em;font-size:14px;color:var(--brown)}
.listen .s{font-size:21px;color:var(--navy);margin:2px 0 12px}
.listen .s em{font-style:normal}
.listen .m{font-size:15.5px;color:var(--soft);margin-top:12px}
.player{position:relative;aspect-ratio:16/9;background:var(--navy) center/cover no-repeat;border-radius:4px;overflow:hidden;
  display:grid;place-items:center}
.player .play{border:0;background:transparent;color:var(--paper);font:inherit;font-size:17px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.player .play svg{width:62px;height:62px;padding:16px 14px 16px 20px;border-radius:50%;
  background:color-mix(in srgb,var(--paper) 18%,transparent);fill:var(--paper);transition:transform .2s}
.player .play:hover svg{transform:scale(1.07)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
body.night .player{background:#0b0f19}
.end{text-align:center;color:var(--gold);font-size:22px;letter-spacing:.6em;margin:40px 0}
.give{border-top:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-bottom:1px solid color-mix(in srgb,var(--gold) 60%,transparent);
  padding:18px 0 10px;margin:0 0 36px;text-align:center;font-style:italic}
.give .k{font-style:normal;font-variant:small-caps;letter-spacing:.2em;font-size:14px;color:var(--brown);margin:0 0 6px}
.give p{margin:0 0 10px}
.give .help{font-style:normal;font-weight:500}
nav.next{border-top:3px double var(--gold);padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:17px}
nav.next a{text-decoration:none;color:var(--navy);max-width:48%}
nav.next a:last-child{text-align:right;margin-left:auto}
nav.next span{display:block;font-variant:small-caps;letter-spacing:.18em;font-size:13px;color:var(--brown)}
nav.next b{font-weight:500}

/* contents and part pages */
ol.toc{list-style:none;padding:0;margin:0 0 10px}
ol.toc li a{display:block;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--gold) 35%,transparent);text-decoration:none;color:var(--ink)}
ol.toc li a b{display:block;font-weight:500;color:var(--navy);font-size:21px}
ol.toc li a span{display:block;font-style:italic;color:var(--soft);font-size:17px}
ol.toc li a:hover b{color:var(--brown)}
.contents{max-width:760px}
.cpart{margin:44px 0 0}
.cpart .thumb img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border:3px double var(--gold)}
.cpart h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:30px;margin:14px 0 4px;text-align:center}
.cpart h2 a{color:var(--navy);text-decoration:none}
.cpart h2 span{display:block;font-variant:small-caps;letter-spacing:.28em;font-size:15px;color:var(--brown);font-weight:500}
.front{margin-top:10px}
.partpage .intro{text-align:center;font-size:19px;color:var(--soft)}
.playlist{text-align:center;margin-top:40px}

/* home */
.hero{position:relative;max-width:1040px;margin:0 auto;min-height:min(92vh,980px);display:flex;justify-content:center;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-in{position:relative;text-align:center;padding:9vh 20px 0;color:#f4ebd6}
.hero h1{color:#f4ebd6;margin:0;font-weight:500;letter-spacing:.08em;text-shadow:0 2px 18px rgba(10,15,30,.55);line-height:1}
.hero h1 span{display:block;font-size:clamp(54px,11vw,110px)}
.hero h1 em{display:block;font-size:clamp(22px,4vw,36px);color:#ebd9a8;letter-spacing:.1em;margin:4px 0}
.hero .tag{font-style:italic;color:#ebd9a8;font-size:clamp(18px,2.6vw,23px);margin:18px 0 0;text-shadow:0 1px 10px rgba(10,15,30,.6)}
.hero .by{font-variant:small-caps;letter-spacing:.14em;margin:8px 0 22px;text-shadow:0 1px 10px rgba(10,15,30,.6)}
.hero .btn{background:#f4ebd6;color:#1f2a44;border-color:#f4ebd6}
.hero .btn.alt{background:rgba(20,26,42,.35);color:#f4ebd6}
.home{max-width:900px}
.verse{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:26px;color:var(--navy);margin:46px auto 18px;max-width:640px}
.verse span{display:block;font-style:normal;font-variant:small-caps;letter-spacing:.2em;font-size:15px;color:var(--brown);margin-top:6px}
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
.parts a{text-decoration:none;text-align:center;color:var(--navy)}
.parts img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border:3px double var(--gold)}
.parts span{display:block;font-variant:small-caps;letter-spacing:.2em;font-size:13px;color:var(--brown);margin-top:8px}
.parts b{display:block;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:22px;line-height:1.15}

/* store */
.store{max-width:900px}
.book{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;margin:10px 0 20px}
.book img{width:100%;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.book h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:34px;color:var(--navy);margin:0 0 6px}
.note{font-style:italic;color:var(--soft);font-size:16px}
.prints{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:20px}
.pcard{background:var(--card);border:3px double var(--gold);padding:10px;text-align:center}
.pcard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.pcard[data-print="cover"] img{object-position:center 72%}
.pcard b{display:block;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:22px;color:var(--navy);margin-top:10px}
.pcard span{display:block;font-variant:small-caps;letter-spacing:.18em;font-size:13px;color:var(--brown);margin-bottom:6px}
.charities{text-align:center;list-style:none;padding:0}
.charities li{margin:6px 0}

footer.foot{text-align:center;padding:10px 22px 40px;color:var(--soft);font-size:15px}
footer.foot p{margin:4px auto;max-width:640px}

@media (max-width:620px){
  body{font-size:18.5px}
  .bar-in{gap:10px;padding:10px 14px}
  .brand{font-size:15px;letter-spacing:.08em}
  .links{gap:11px}.links a{font-size:15px}
  .toggle{font-size:13px;padding:2px 9px}
  article p{text-align:left}
  .parts{grid-template-columns:1fr 1fr}
  .book{grid-template-columns:1fr;text-align:center}
  .book img{max-width:220px;margin:0 auto}
  nav.next a{max-width:50%}
}
@media (max-width:420px){ .brand{display:none} .links{margin-left:0} .toggle{margin-left:auto} }