:root{--ground:#000;--ink:#FAF9F6;--muted:#C2C1BC;--rule:#303030;--shadow:rgba(169,193,227,.10);--display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;--body:"Newsreader",Georgia,"Times New Roman",serif;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;padding-inline:20px;overflow-x:hidden}
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1;max-width:1080px;margin-inline:auto}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding-block:64px 80px}
.hero-text{display:grid;gap:22px;justify-items:center;text-align:center}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,5vw,68px);line-height:1.02;margin:0;letter-spacing:-.01em;text-wrap:balance}
.smallcaps{font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:17px;color:var(--muted)}
.begin{margin-top:6px;font-size:17px;font-style:italic;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--muted);padding-bottom:2px}
.begin:hover{border-color:var(--ink)}
.hero-book{display:grid;justify-items:center;gap:26px}
.hero-book .slot{--h:clamp(380px,68vh,620px)}
.hero-cap{font-size:13px;letter-spacing:.08em;color:var(--muted);text-decoration:none;text-align:center}
.hero-cap b{display:block;font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:0;color:var(--ink);margin-top:4px}
.slot-link{display:block;border-radius:4px}
.slot{position:relative;--h:clamp(270px,44vh,400px);height:var(--h);width:calc(var(--h) * 2 / 3);flex:none;transition:transform .3s ease}
.slot-link:hover .slot,.slot-link:focus-visible .slot{transform:translateY(-4px)}
.slot::after{content:"";position:absolute;left:10%;right:10%;bottom:-18px;height:26px;background:radial-gradient(ellipse at center,var(--shadow),transparent 70%);filter:blur(4px)}
.flat{position:absolute;inset:4% 12%;background:radial-gradient(ellipse at 50% 45%,var(--cloth),#D3CDC1);color:var(--cloth-ink,#111);box-shadow:inset 7px 0 0 rgba(0,0,0,.1);display:grid;grid-template-rows:auto auto auto 1fr auto;justify-items:center;text-align:center;padding:9% 8%;gap:6px;outline:1px solid rgba(17,17,17,.3);outline-offset:-5%}
.flat .f-series{font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:11px}
.flat b{font-family:var(--display);font-weight:500;font-size:clamp(16px,calc(var(--h) * .055),26px);line-height:1.12;margin-top:6%}
.flat .f-dash{width:24px;height:1.5px;background:currentColor;margin-top:6px}
.flat .f-num{font-family:var(--display);font-style:italic;font-weight:400;font-size:calc(var(--h) * .22);line-height:1;align-self:center}
.flat .f-name{font-variant-caps:all-small-caps;letter-spacing:.16em;font-size:10px}
html.gl .flat{visibility:hidden}
.band{padding-block:72px;border-top:1px solid var(--rule)}
.section-head h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,40px);margin:0}
.index{list-style:none;margin:0;padding:6px 0 40px}
.index li{border-bottom:1px solid var(--rule)}
.idx{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding-block:22px;color:var(--ink);text-decoration:none}
a.idx:hover .idx-t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.idx-n{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.idx-t{font-family:var(--display);font-weight:500;font-size:clamp(23px,2.7vw,31px);line-height:1.2}
.idx-t small{display:block;font-family:var(--body);font-style:italic;font-size:17px;color:var(--muted);margin-top:4px}
.idx-m{font-size:14px;color:var(--muted);white-space:nowrap;text-align:right}
.idx.soon{opacity:.45}
footer{border-top:1px solid var(--rule);padding-block:28px 48px;margin-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.reader{position:fixed;inset:0;z-index:20;background:#000;color:var(--ink);overflow-y:auto;padding-inline:20px;padding-bottom:env(safe-area-inset-bottom,0px);animation:rin .25s ease}
@keyframes rin{from{opacity:0}to{opacity:1}}
.r-bar{position:sticky;top:0;background:#000;border-bottom:1px solid #242424;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:calc(14px + env(safe-area-inset-top,0px)) 14px;margin-inline:-20px;padding-inline:20px;z-index:1}
.r-back{background:none;border:0;color:var(--ink);font-family:var(--body);font-size:15px;cursor:pointer;padding:6px 0}
.r-back:hover{text-decoration:underline}
.r-mark{font-family:var(--display);font-size:18px}
.r-wrap{max-width:680px;margin-inline:auto;padding-block:56px 96px}
.r-wrap h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,6.4vw,58px);line-height:1.08;margin:0 0 14px;text-wrap:balance;outline:none}
.r-sub{font-size:22px;line-height:1.45;color:#C8C7C2;margin:0}
.r-by{display:flex;align-items:center;gap:12px;border-block:1px solid #242424;padding-block:16px;margin-block:32px 40px}
.r-by b{display:block;font-weight:500}
.r-meta{font-size:14px;color:#B8B7B2}
.r-body p{font-size:20px;line-height:1.75;margin:0 0 1.4em}
.verse{margin:2.2em 0;padding:28px 0;border-block:1px solid #242424;text-align:center}
.verse .ar{font-family:"Amiri","Noto Naskh Arabic","Geeza Pro",serif;font-size:clamp(24px,4.6vw,32px);line-height:2;margin:0 0 18px}
.verse blockquote{margin:0}
.verse blockquote p{font-style:italic;margin:0 0 .6em}
.verse figcaption{font-size:14px;letter-spacing:.04em;color:#B8B7B2}
.r-sig{font-family:var(--display);font-size:24px;margin:8px 0 0}
.r-tools{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.r-tools button{background:none;border:1px solid #2E2E2E;color:var(--ink);border-radius:999px;padding:10px 18px;font-family:var(--body);font-size:14px;letter-spacing:.04em;cursor:pointer}
.r-tools button:hover{border-color:var(--ink)}
.r-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:15px}
.r-links a{color:#B8B7B2;text-decoration:none;border-bottom:1px solid #333}
.r-links a:hover{color:var(--ink);border-color:var(--ink)}
.r-more{border-top:1px solid #242424;margin-top:56px;padding-top:20px;display:grid;gap:4px}
.r-more:empty{display:none}
.r-more span{font-size:13px;letter-spacing:.08em;color:#B8B7B2}
.r-more a{color:var(--ink);font-family:var(--display);font-size:22px;text-decoration:none;padding-block:6px}
.r-more a:hover{text-decoration:underline}
.reader :focus-visible{outline:2px solid var(--ink)}
@media (max-width:760px){
  body{font-size:16px;padding-inline:16px}
  .hero{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center;padding-block:36px 52px}
  .hero-text,.hero-book{display:contents}
  .hero h1{order:1}
  .hero .smallcaps{order:2}
  .hero .slot-link{order:3;margin-block:18px 8px}
  .hero .hero-cap{order:4}
  .hero .begin{order:5;margin-top:10px}
  .hero-book .slot{--h:min(58vh,400px)}
  .band{padding-block:52px}
  .idx{grid-template-columns:40px minmax(0,1fr)}
  .idx-m{grid-column:2;text-align:left}
  .r-body p{font-size:18px}
  .r-sub{font-size:19px}
  .r-wrap{padding-block:36px 72px}
}
@media (prefers-reduced-motion:reduce){.reader{animation:none}.slot{transition:none}}