:root{
  --paper:#f4f3ee;
  --paper-hi:#fafaf5;
  --paper-cool:#eeefe9;
  --glow-warm:rgba(220, 180, 120, .18);
  --glow-cool:rgba(42, 107, 184, .06);
  --ink:#1a1208;
  --ink-soft:#3d2a16;
  --dim:#8a7a56;
  --azure:#2a6bb8;
  --azure-deep:#1a3e68;
  --azure-soft:#7aa8d8;
  --red-pen:#b8422a;
  --line:rgba(26,18,8,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative}
/* Page-wide ambient gradient (all views) — warmer top, cooler bottom */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg, rgba(250,245,230,.55) 0%, rgba(244,243,238,0) 40%, rgba(238,239,233,.35) 100%)}
.bn{font-family:'Noto Serif Bengali',serif;font-weight:500}
a{text-decoration:none;color:inherit}

/* Subtle paper grain */
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.04;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}

.view{display:none}
.view.active{display:block}

/* ── Shared bar ── */
.bar{position:relative;z-index:1;padding:20px 36px;display:flex;justify-content:space-between;align-items:baseline;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);font-weight:500}
.bar .mark{color:var(--ink);font-family:'Fraunces',serif;font-style:italic;font-size:22px;letter-spacing:0;text-transform:none;font-weight:400;display:flex;align-items:center;gap:9px;font-variation-settings:"opsz" 144}
.bar .mark svg{width:22px;height:22px;color:var(--azure)}
.bar a{color:var(--dim);transition:color .2s}
.bar a:hover{color:var(--azure)}
.bar .crumb{display:flex;align-items:baseline;gap:12px}
.bar .folio{font-family:'Fraunces',serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:14px;color:var(--azure)}

/* ── HOME ── */
.home-domain{display:flex;align-items:center;justify-content:center;gap:16px;padding:44px 36px 12px;font-family:'Fraunces',serif;font-style:italic;font-size:13px;letter-spacing:0;font-weight:400;color:color-mix(in srgb,var(--dim),transparent 50%);font-variation-settings:'opsz' 72}
.home-domain::before,
.home-domain::after{content:'';width:64px;height:1px;background:currentColor;opacity:.45;animation:flutter-line 2.6s ease-in-out infinite}
.home-domain::after{animation-delay:-1.3s}
@keyframes flutter-line{
  0%,100%{transform:scaleX(.85);opacity:.3}
  50%{transform:scaleX(1.12);opacity:.6}
}
.hero{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:8vh 36px 4vh;display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:center}
.hero-text .kicker{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--azure);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.hero-text .kicker::before{content:'';width:28px;height:1px;background:currentColor}
.hero-text .wordmark-block{display:inline-block}
.hero-text h1{font-family:'Fraunces',serif;font-weight:400;font-style:italic;font-size:clamp(56px,10vw,120px);letter-spacing:-.04em;line-height:.9;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 50}
.hero-text h1 em{font-style:italic;color:var(--azure)}
.hero-text h1 .hero-mark{width:.3em;height:.3em;color:var(--azure);display:inline-block;vertical-align:middle;margin:0 .04em}
.hero-text .brand-caption{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--azure);font-weight:600;margin:18px 0 0;text-align:center}
.hero-art{display:flex;justify-content:center;position:relative}
.hero-art::before{content:'';position:absolute;width:520px;height:520px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at center, rgba(255,220,150,.42) 0%, rgba(255,210,140,.22) 22%, rgba(250,200,130,.08) 45%, rgba(250,200,130,0) 70%);pointer-events:none;z-index:0;filter:blur(2px);animation:sun-halo 5.4s ease-in-out infinite}
.hero-art svg{width:280px;height:280px;color:var(--azure);position:relative;z-index:1}
/* Each ray scales from its INNER endpoint (the one nearest the sun) so the
   inner end stays pinned at the sun's perimeter and the outer end extends
   or retracts — no more sliding-in-and-out as a unit.

   Type assignment alternates flare/drift going CLOCKWISE around the sun
   (not by SVG ordering) so bursts and drifts are spatially balanced.
   Delays use a bit-reversal pattern across 60s so adjacent rays are far
   apart in phase — at any moment, no quadrant goes dark. */
.hero-art svg .ray{transform-box:view-box;animation:ray-flare 60s ease-in-out infinite}
.hero-art svg .ray:nth-of-type(3),
.hero-art svg .ray:nth-of-type(4),
.hero-art svg .ray:nth-of-type(9),
.hero-art svg .ray:nth-of-type(10),
.hero-art svg .ray:nth-of-type(11),
.hero-art svg .ray:nth-of-type(12){animation-name:ray-drift}
.hero-art svg .ray:nth-of-type(1){transform-origin:150px 56px;animation-delay:0s}
.hero-art svg .ray:nth-of-type(2){transform-origin:150px 244px;animation-delay:-23s}
.hero-art svg .ray:nth-of-type(3){transform-origin:56px 150px;animation-delay:-34s}
.hero-art svg .ray:nth-of-type(4){transform-origin:244px 150px;animation-delay:-45s}
.hero-art svg .ray:nth-of-type(5){transform-origin:82px 82px;animation-delay:-19s}
.hero-art svg .ray:nth-of-type(6){transform-origin:218px 218px;animation-delay:-8s}
.hero-art svg .ray:nth-of-type(7){transform-origin:218px 82px;animation-delay:-15s}
.hero-art svg .ray:nth-of-type(8){transform-origin:82px 218px;animation-delay:-4s}
.hero-art svg .ray:nth-of-type(9){transform-origin:96px 48px;animation-delay:-49s}
.hero-art svg .ray:nth-of-type(10){transform-origin:204px 48px;animation-delay:-30s}
.hero-art svg .ray:nth-of-type(11){transform-origin:96px 252px;animation-delay:-53s}
.hero-art svg .ray:nth-of-type(12){transform-origin:204px 252px;animation-delay:-38s}
/* Inner endpoint is pinned via transform-origin, so the ray grows OUTWARD
   from the sun edge as scale rises and retracts toward the sun as scale
   falls. Now safe to use a dramatic range. */
@keyframes ray-flare{
  0%,72%,100%{transform:scale(.4);opacity:.15}
  3%{transform:scale(1.15);opacity:.6}
  6%{transform:scale(1.45);opacity:1}
  12%{transform:scale(1.05);opacity:.5}
  22%{transform:scale(.65);opacity:.28}
}
@keyframes ray-drift{
  0%,100%{transform:scale(.55);opacity:.2}
  18%{transform:scale(1.1);opacity:.65}
  36%{transform:scale(.75);opacity:.4}
  58%{transform:scale(1.3);opacity:.88}
  78%{transform:scale(.85);opacity:.45}
}
@keyframes sun-halo{
  0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.7}
  50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
}

.divider{position:relative;z-index:1;max-width:1020px;margin:0 auto;padding:0 36px;display:flex;align-items:center;gap:16px;color:var(--azure);opacity:.55}
.divider .line{flex:1;height:1px;background:currentColor;opacity:.35}
.divider svg{width:70px;height:22px}

.sec-label{position:relative;z-index:1;max-width:1020px;margin:44px auto 6px;padding:0 36px;display:flex;align-items:baseline;justify-content:space-between;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--dim);font-weight:600}
.sec-label em{font-family:'Fraunces',serif;font-style:italic;text-transform:none;letter-spacing:0;color:var(--azure);font-size:14px;font-weight:400}

/* ── Walking-pace collection rhythm (from 405) ── */
.books{
  position:relative;z-index:1;
  max-width:1080px;
  margin:0 auto;
  padding:6vh 36px 4vh;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8vh 56px;
}
.book{
  color:var(--ink);
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  padding:0;
  transition:opacity .3s;
  position:relative;
}
/* Lone trailing card (odd count in 2-col) — span both columns and center. */
.book:nth-child(odd):last-child{grid-column:1 / -1;justify-self:center;width:50%}
@media(max-width:760px){
  .books{grid-template-columns:1fr;gap:8vh 0;max-width:620px}
  .book:nth-child(odd):last-child{width:100%}
}
.book .glyph{
  display:flex;justify-content:center;
  margin-bottom:30px;
  transition:transform .35s ease;
}
.book .glyph svg{
  width:120px;height:120px;
  color:var(--azure);
  opacity:.82;
  transition:opacity .35s ease, transform .35s ease;
}
.book:hover .glyph svg{opacity:1;transform:scale(1.06) rotate(-1deg)}
.book:hover h2{color:var(--azure-deep)}
.book .no{
  font-family:'Inter',sans-serif;
  font-size:10px;letter-spacing:4px;
  text-transform:uppercase;color:var(--dim);
  font-weight:600;
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.book .no::before,.book .no::after{
  content:'';width:22px;height:1px;
  background:currentColor;opacity:.4;
}
.book .no .sep{
  font-family:'Fraunces',serif;font-style:italic;
  letter-spacing:0;text-transform:none;
  font-size:15px;color:var(--azure);
  font-variation-settings:"opsz" 72;
}
.book h2{
  font-family:'Fraunces',serif;
  font-weight:400;font-style:italic;
  font-size:clamp(30px,4.4vw,42px);
  letter-spacing:-.5px;line-height:1.1;
  color:var(--ink);
  transition:color .25s;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  max-width:460px;
  margin-bottom:6px;
}
.book h2.bn{
  font-family:'Noto Serif Bengali',serif;
  font-weight:500;font-style:normal;
  letter-spacing:-.2px;line-height:1.32;
  font-size:clamp(26px,3.8vw,36px);
}
.book h2 em{
  font-style:italic;display:block;
  font-size:.48em;color:var(--dim);
  margin-top:14px;font-weight:400;
  letter-spacing:0;
  line-height:1.2;
}
.book .blurb{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(16px,1.8vw,18px);
  color:var(--ink-soft);
  line-height:1.55;
  font-variation-settings:"opsz" 72,"SOFT" 100;
  margin-top:22px;
  max-width:440px;
}
.book .meta{
  font-family:'Inter',sans-serif;
  font-size:10px;letter-spacing:3px;
  text-transform:uppercase;
  color:var(--dim);font-weight:500;
  margin-top:26px;
  display:flex;gap:12px;align-items:center;
  justify-content:center;
}
.book .meta .cnt{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:15px;color:var(--azure);
  letter-spacing:0;text-transform:none;
  font-weight:500;
}
.book .meta .dot{opacity:.4}

/* Walking-pace rule between dividers + last closing paren */
.walk-close{
  position:relative;z-index:1;
  max-width:620px;
  margin:0 auto;
  padding:10vh 36px 6vh;
  text-align:center;
}
.walk-close .paren{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:52px;color:var(--azure);
  opacity:.5;line-height:1;
  font-variation-settings:"opsz" 144;
}
.walk-close .line{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:14px;color:var(--dim);
  margin-top:20px;letter-spacing:.02em;
}

/* ── BOOK ── */
.title-page{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:6vh 32px 3vh;text-align:center}
.title-art{display:flex;justify-content:center;padding:10px 0 24px}
.title-art svg{width:260px;height:260px;color:var(--azure);opacity:.85}
.title-page .no{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--azure);font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.title-page .no::before,.title-page .no::after{content:'';width:28px;height:1px;background:currentColor}
.title-page h1{font-family:'Fraunces',serif;font-weight:400;font-style:italic;font-size:clamp(44px,8vw,78px);letter-spacing:-.03em;line-height:1;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 50}
.title-page h1.bn{font-family:'Noto Serif Bengali',serif;font-weight:500;font-style:normal;letter-spacing:-.3px;line-height:1.18;font-size:clamp(40px,7vw,68px)}
.title-page h1 em{font-style:italic;color:var(--azure);display:block;font-size:.48em;margin-top:8px;letter-spacing:0;font-weight:400}
.title-page .blurb{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(16px,2vw,20px);color:var(--ink-soft);margin-top:20px;line-height:1.55;max-width:440px;margin-left:auto;margin-right:auto;font-variation-settings:"opsz" 72,"SOFT" 100}
.title-page .meta{margin-top:24px;display:flex;gap:24px;justify-content:center;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);font-weight:500}
.title-page .meta b{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--azure);text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px}

.rule{position:relative;z-index:1;max-width:640px;margin:28px auto 0;padding:0 32px;display:flex;align-items:center;gap:14px;color:var(--azure-soft)}
.rule .l{flex:1;height:1px;background:currentColor}
.rule svg{width:54px;height:16px;color:var(--azure);opacity:.7}

.contents-label{position:relative;z-index:1;max-width:640px;margin:18px auto 4px;padding:0 32px;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--dim);font-weight:600;text-align:center}

.poem-list{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:10px 32px 6vh;list-style:none}
.poem-row{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:18px;
  align-items:baseline;
  padding:14px 14px;
  border-bottom:1px dotted rgba(26,18,8,.18);
  border-radius:2px;
  transition:background .2s, padding-left .2s;
}
.poem-row:hover{background:color-mix(in srgb,var(--azure),transparent 94%);padding-left:22px}
.poem-row:hover .p-title{color:var(--azure)}
.poem-row:hover .roman{color:var(--azure-deep)}
.poem-row .roman{font-family:'Fraunces',serif;font-style:italic;font-size:16px;font-weight:400;color:var(--dim);letter-spacing:0;transition:color .2s}
.poem-row .p-title{font-family:'Fraunces',serif;font-size:22px;font-weight:400;color:var(--ink);line-height:1.25;transition:color .2s;font-variation-settings:"opsz" 72,"SOFT" 50}
.poem-row .p-title.bn{font-family:'Noto Serif Bengali',serif;font-weight:500;font-size:21px;line-height:1.42;letter-spacing:-.1px}
.poem-row .kind{font-family:'Fraunces',serif;font-style:italic;font-size:11px;color:var(--dim);letter-spacing:1.2px;text-transform:uppercase;font-weight:500;font-variation-settings:"opsz" 9}
.poem-row.kind-draft{opacity:.6}
.poem-row.kind-draft .p-title{font-style:italic}

.book-empty{font-family:'Fraunces',serif;font-style:italic;color:var(--dim);font-size:17px;padding:28px 0;text-align:center}

.book-sibling{position:relative;z-index:1;max-width:640px;margin:16px auto 0;padding:26px 32px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);font-weight:500}
.book-sibling a{color:var(--ink);transition:color .2s;display:flex;align-items:center;gap:10px;max-width:100%;overflow:hidden}
.book-sibling a:hover{color:var(--azure)}
.book-sibling a svg{width:20px;height:10px;color:var(--azure);flex:0 0 auto}
.book-sibling a.prev svg{transform:rotate(180deg)}
.book-sibling a .lbl{display:block;font-size:9px;color:var(--dim);letter-spacing:2px;margin-bottom:2px;opacity:.8}
.book-sibling a .nm{font-family:'Fraunces',serif;font-style:italic;font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-sibling a .nm.bn{font-family:'Noto Serif Bengali',serif;font-style:normal;font-weight:500;font-size:14px}
.book-sibling a.disabled{opacity:.25;pointer-events:none}
.book-sibling .up a{color:var(--azure);border:1px solid var(--azure);padding:7px 14px;border-radius:2px;display:inline-block;font-size:10px;letter-spacing:2.5px}
.book-sibling .up a:hover{background:var(--azure);color:var(--paper-hi)}
.book-sibling .next{justify-self:end;text-align:right}
.book-sibling .next .text-block{text-align:right}

/* ── READ ── */
.page-wrap{
  position:relative;z-index:1;
  max-width:620px;margin:0 auto;
  padding:clamp(6vh,10vh,14vh) 32px clamp(48px,7vh,80px);
}
.margin-col{display:none}

.head-wrap{
  position:relative;
  padding:0 0 clamp(32px,4vh,44px);
}
.head-inner{
  display:block;
}

.head-text .from{
  font-family:'Inter',sans-serif;
  font-size:10px;letter-spacing:3px;
  text-transform:uppercase;color:var(--dim);
  font-weight:600;margin-bottom:14px;
}
.head-text .from a{
  color:var(--azure);
  border-bottom:1px solid color-mix(in srgb,var(--azure),transparent 60%);
  transition:color .2s;
  padding-bottom:1px;
}
.head-text .from a:hover{color:var(--azure-deep)}
.head-text .from a.bn{font-family:'Noto Serif Bengali',serif;text-transform:none;letter-spacing:.3px;font-size:13px;font-weight:500}

.head-text h1{
  font-family:'Fraunces',serif;
  font-weight:400;font-style:italic;
  font-size:clamp(38px,6.5vw,58px);
  letter-spacing:-.5px;
  line-height:1.06;
  color:var(--azure-deep);
  margin-bottom:clamp(18px,2vh,28px);
  font-variation-settings:"opsz" 144,"SOFT" 50;
  max-width:calc(100% - 80px);
  /* Optical alignment: italic Fraunces glyphs have ~1px more left side-bearing
     than the body's Special Elite, making the box-aligned title look inset.
     Pull it left a hair so the glyph ink — not the box — aligns with prose. */
  margin-left:-.02em;
}
.head-text h1::after{
  content:'';display:block;
  width:80px;height:0;
  border-top:0.5px solid color-mix(in srgb,var(--azure),transparent 55%);
  margin-top:clamp(18px,2vh,26px);
}
.head-text h1.bn{
  font-family:'Noto Serif Bengali',serif;
  font-weight:500;font-style:normal;
  font-size:clamp(32px,6vw,50px);
  letter-spacing:-.2px;line-height:1.3;
  color:var(--azure-deep);
}

.head-art{
  position:absolute;
  top:4px;right:0;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
}
.head-art svg{
  width:100%;height:100%;
  color:var(--azure);
  opacity:.8;
}

.poem-col{min-width:0}

.body{
  font-family:'Special Elite',monospace;
  font-size:17px;
  line-height:1.9;
  color:var(--ink);
  max-width:540px;
}
.body.bn{
  font-family:'Noto Serif Bengali',serif;
  font-size:19px;
  font-weight:400;
  line-height:2.02;
}
.stanza{margin-bottom:2em;overflow-wrap:anywhere}
.stanza:last-child{margin-bottom:0}
.prose-para{margin:0 0 1.4em;line-height:1.7;overflow-wrap:break-word}
.prose-para:last-child{margin-bottom:0}
.md-hr{margin:2.4em auto;border:none;width:60%;height:0;border-top:1px solid color-mix(in srgb,var(--azure),transparent 70%)}
.body code{font-family:'Special Elite',monospace;font-size:.92em;background:color-mix(in srgb,var(--paper-cool),transparent 30%);padding:.05em .35em;border-radius:3px;color:var(--ink-soft)}
.body s{color:var(--dim);text-decoration-color:color-mix(in srgb,var(--red-pen),transparent 40%)}
/* Prose pages get a wider reading measure than poems (which are line-shaped),
   and a textured letterpress face (IM Fell English) instead of typewriter. */
.page-wrap.is-prose{max-width:780px}
.page-wrap.is-prose .body{
  max-width:680px;
  font-family:'IM Fell English',serif;
  font-size:19px;
  line-height:1.65;
}
.page-wrap.is-prose .prose-para{line-height:1.65}
.body em{font-style:italic;color:var(--ink-soft)}
.body a{color:var(--azure);border-bottom:1px solid color-mix(in srgb,var(--azure),transparent 70%);transition:color .2s}
.body a:hover{color:var(--azure-deep)}

.variant-sep{
  margin:56px 0 14px;
  border:none;
  border-top:1px solid color-mix(in srgb,var(--azure),transparent 72%);
}
.variant-label{
  font-family:'Inter',sans-serif;
  font-size:10px;letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--azure);
  font-weight:600;
  margin-bottom:2em;
  display:flex;align-items:center;gap:8px;
}
.variant-label::before{
  content:'§';
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:16px;
  color:var(--azure);
  opacity:.75;
  letter-spacing:0;
}

.loading{
  font-family:'Caveat',cursive;
  font-size:20px;color:var(--dim);
  font-style:italic;font-weight:600;
}

.margin-col{
  grid-area:margin;
  padding-top:clamp(96px,14vh,160px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:22px;
}
.margin-note{
  font-family:'Caveat',cursive;
  font-weight:600;
  font-size:15px;
  line-height:1.45;
  color:var(--red-pen);
  text-align:right;
  transform:rotate(.6deg);
  display:block;
  max-width:130px;
  letter-spacing:.2px;
}
.margin-note::before{
  content:'';display:block;
  width:28px;height:1px;
  background:currentColor;
  opacity:.5;margin-bottom:8px;
  margin-left:auto;
  transform:rotate(-1deg);
}

.poem-nav{
  margin-top:clamp(44px,6vh,64px);
  padding:26px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.pn-link{
  display:flex;flex-direction:column;gap:4px;
  font-family:'Inter',sans-serif;
  font-size:10px;letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--dim);font-weight:600;
  transition:color .2s;
  max-width:100%;
}
.pn-link:hover{color:var(--azure)}
.pn-link:hover .pn-title{color:var(--azure)}
.pn-dir{display:flex;align-items:center;gap:8px;color:var(--azure);opacity:.9}
.pn-dir svg{width:18px;height:9px;color:currentColor}
.pn-title{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:17px;
  color:var(--ink);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  line-height:1.25;
  transition:color .2s;
}
.pn-title.bn{font-family:'Noto Serif Bengali',serif;font-style:normal;font-weight:500;font-size:16px}
.pn-link.right{text-align:right}
.pn-link.right .pn-dir{justify-content:flex-end}
.pn-link.right .pn-dir svg{order:2}
.pn-link.prev .pn-dir svg{transform:rotate(180deg)}

.back-link{
  grid-area:back;
  padding:24px 0 0;
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:10px;letter-spacing:3px;
  text-transform:uppercase;
  color:var(--dim);font-weight:500;
}
.back-link a{
  color:var(--azure);
  border-bottom:1px solid color-mix(in srgb,var(--azure),transparent 70%);
  transition:color .2s;padding-bottom:1px;
}
.back-link a:hover{color:var(--azure-deep)}

.mobile-note{display:none}

/* ── Shared footer ── */
.foot{position:relative;z-index:1;max-width:1020px;margin:0 auto;padding:24px 36px 52px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);font-weight:500}
.foot em{font-family:'Fraunces',serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:14px;color:var(--azure);font-weight:400}
.foot .sig{font-family:'Caveat',cursive;font-size:20px;color:var(--ink);letter-spacing:.3px;font-weight:600;text-transform:none}
.foot a{transition:color .2s}
.foot a:hover{color:var(--azure)}

@media(max-width:760px){
  .bar{padding:18px 22px}
  .page-wrap{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "poem"
      "nav"
      "back";
    padding:0 22px clamp(40px,6vh,64px);
    gap:0;
  }
  .head-wrap{padding:28px 0 18px}
  .head-inner{grid-template-columns:1fr;gap:14px}
  .head-art{justify-self:flex-start}
  .head-art svg{width:64px;height:64px}
  .poem-col{padding-top:24px}
  .margin-col{display:none}
  .mobile-note{
    display:block;
    margin-top:38px;
    padding-top:22px;
    border-top:1px dashed color-mix(in srgb,var(--red-pen),transparent 60%);
    font-family:'Caveat',cursive;
    font-size:16px;font-weight:600;
    color:var(--red-pen);
    transform:rotate(-.4deg);
    max-width:100%;
  }
  .poem-nav{margin-top:32px;gap:14px}
}

@media(max-width:720px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:5vh}
  .hero-art{order:-1}
  .hero-art svg{width:220px;height:220px}
  .books{padding:18px 22px 5vh;gap:36px 24px;grid-template-columns:1fr}
  .foot{padding:22px 22px 40px;flex-wrap:wrap;gap:10px}
  .sec-label{padding:0 22px}
  .divider{padding:0 22px}
}

@media(max-width:680px){
  .title-page{padding:4vh 22px 2vh}
  .title-art svg{width:200px;height:200px}
  .rule{padding:0 22px}
  .contents-label{padding:0 22px}
  .poem-list{padding:10px 22px 4vh}
  .poem-row{padding:14px 8px;grid-template-columns:36px 1fr auto;gap:14px}
  .poem-row:hover{padding-left:14px}
  .book-sibling{padding:22px 22px 0;grid-template-columns:1fr 1fr;gap:12px}
  .book-sibling .up{grid-column:1/-1;text-align:center;margin-top:6px}
  .foot{padding:40px 22px 40px;flex-wrap:wrap;gap:10px}
}

/* ─────────────────────────────────────────────
   Poem body — sub-poem titles (diptychs) + blockquotes
   ───────────────────────────────────────────── */
.body .sub-poem-title{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(22px,3.4vw,30px);color:var(--azure-deep);letter-spacing:-.3px;line-height:1.18;margin:1em 0 1.8em;font-variation-settings:'opsz' 72,'SOFT' 50}
.body.bn .sub-poem-title{font-family:'Noto Serif Bengali',serif;font-style:normal;font-weight:500;letter-spacing:-.1px;line-height:1.32}
.body .poem-quote{font-family:'Fraunces',serif;font-style:italic;font-size:18px;color:var(--ink-soft);margin:1em 0 2em;padding:.5em 0 .5em 1.4em;border-left:3px solid var(--azure-soft);position:relative;font-variation-settings:'opsz' 72,'SOFT' 50}
.body .poem-quote::before{content:'\201C';position:absolute;left:-.35em;top:-.3em;font-family:'Fraunces',serif;font-style:italic;font-size:2.6em;line-height:1;color:var(--azure);opacity:.45;font-variation-settings:'opsz' 144}

/* ─────────────────────────────────────────────
   Poem-page bar + art
   - Bar is always visible at top (sticky).
   - On scroll past h1, class .scrolled is added:
       mark shrinks, poem title fades in, folio swaps from
       "Book II · N / M" to the book name.
   - Poem-art starts in head; floats right and becomes sticky
     once scrolled beneath the bar.
   ───────────────────────────────────────────── */

/* Static top header (poem view only). In natural flow — scrolls away as user scrolls.
   Flush to viewport edges (not centered in a 900px box) to match the live layout. */
.view-read .page-header{padding:18px 0;position:relative;z-index:1}
.view-read .page-header-inner{padding:0 36px;display:flex;justify-content:space-between;align-items:center;gap:16px}
/* Phone: match the book-page .bar's 22px rails so the brand-mark dot lands
   in the same x position on both pages. Placed after the base rule above so
   source-order wins (specificity is equal). */
@media(max-width:760px){
  .view-read .page-header-inner{padding:0 22px}
}
.view-read .page-header .mark{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink);font-variation-settings:'opsz' 144}
/* Logo sits centered on the x-height of the lowercase letters — not the cap height — so it
   visually balances "poems" and "sadh" rather than floating above them. */
.view-read .page-header .mark svg{width:22px;height:22px;color:var(--azure);display:inline-block;vertical-align:-.16em;margin:0 7px}
.view-read .page-header .page-folio{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;color:var(--azure);transition:color .2s ease}
.view-read .page-header .page-folio:hover{color:var(--azure-deep)}

/* Sticky reveal bar — hidden above viewport; slides in when the h1 scrolls past. */
.view-read .bar{display:block;position:fixed;top:0;left:0;right:0;z-index:20;padding:10px 0;background:rgba(238,234,222,.72);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid color-mix(in srgb,var(--ink),transparent 92%);transform:translateY(-100%);transition:transform .32s ease}
.view-read .bar.scrolled{transform:translateY(0)}
.view-read .bar-inner{padding:0 36px;display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative}

/* Mark in the revealed bar: "poems [logo] sadh" — compact (bar only shows on scroll). */
.bar .mark{display:inline-flex;align-items:center;gap:6px}
.view-read .bar .mark{font-size:16px;flex-shrink:0}
.view-read .bar .mark svg{width:16px;height:16px}

/* Middle: poem title — absolutely positioned to align its left edge with the poem body.
   Body left x = (viewport_w - 620) / 2 + 32px = calc(50% - 278px).
   Falls back to 36px (bar's own padding) on narrow viewports. */
.bar-poem-title{position:absolute;left:max(36px,calc(50% - 278px));right:max(36px,calc(50% - 278px));min-width:0;text-align:left;font-family:'Fraunces',serif;font-style:normal;font-weight:500;font-size:16px;color:var(--ink);letter-spacing:0;text-transform:capitalize;font-variation-settings:'opsz' 72,'SOFT' 50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Prose pages use a wider page-wrap (780px vs 620px), so the bar title's
   left/right rails need to match the prose content rails (390 - 32 = 358px). */
.bar.is-prose .bar-poem-title{left:max(36px,calc(50% - 358px));right:max(36px,calc(50% - 358px))}
.bar-poem-title.bn{font-family:'Noto Serif Bengali',serif;font-style:normal;font-weight:500;text-transform:none}

/* Right: folio — clickable link to the book. Shows book name (bar only visible on scroll). */
.view-read .folio{flex-shrink:0;color:var(--dim);transition:color .2s ease;display:inline-flex;align-items:baseline}
.view-read .folio:hover{color:var(--azure)}
.view-read .folio .folio-counter{display:none}
.view-read .folio .folio-book{display:inline;font-family:'Fraunces',serif;font-style:italic;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--azure);font-variation-settings:'opsz' 72}
.view-read .folio .folio-book.bn{font-family:'Noto Serif Bengali',serif;font-style:normal;font-weight:500}

/* Book-mark glyph inline in the "from" line — scales with surrounding text. */
.from-icon{width:1em;height:1em;vertical-align:-.15em;margin-right:.45em;opacity:.9}

/* Poem view: page-wrap stays at the base 620px so body text aligns with the
   top-bar poem title (which uses `50% - 278px`).
   - Default (narrow poems): art tucks against the right edge of page-wrap, in
     the same vertical column as the margin note. Body lines are short enough
     that they clear the float.
   - .is-wide poems: longest body line nearly fills the 540px column — push the
     art OUT into the right gutter via a negative right margin so it doesn't
     crowd the text. */
.view-read .page-wrap{position:relative}
/* Art floats right with sticky positioning — pinned beside whatever stanza is
   in view. Three width tiers (set on .page-wrap by build.py based on longest
   line, overridable via wide:/narrow: in _poems.yml):
     default — art's left edge at page-wrap content right (margin-note column);
               zero inline reservation, no body wrap.
     .is-wide — body lines nearly fill the column, so push art further into
                the gutter to stay clear.
     .is-narrow — short body lines leave room; art comes further left, into
                  the body's right area (overlaps title vertically).
   Left edge stays put across scroll states because width and margin-right
   shrink in lockstep. */
.view-read .poem-art{float:right;position:sticky;top:58px;width:160px;height:160px;margin:0 -64px 20px 40px;color:var(--azure);opacity:.85;pointer-events:none;transition:width .32s ease,height .32s ease,margin-right .32s ease}
body.poem-scrolled .view-read .poem-art{width:128px;height:128px;margin-right:-32px}
.view-read .page-wrap.is-wide .poem-art{margin-right:-200px}
body.poem-scrolled .view-read .page-wrap.is-wide .poem-art{margin-right:-168px}
.view-read .page-wrap.is-narrow .poem-art{margin-right:32px}
body.poem-scrolled .view-read .page-wrap.is-narrow .poem-art{margin-right:64px}

/* Narrow viewports (< ~900px where the 200px gutter disappears): collapse the
   art inline above the body. Not floated, not sticky, centered.
   Also drop the title's absolute body-left-edge alignment — at this width the
   `calc(50% - 278px)` clamps to 36px and slides under the mark. Switch to a
   natural flex row: mark | title (flex:1, centered, ellipsized) | folio. */
@media(max-width:900px){
  .view-read .poem-art,
  .view-read .page-wrap.is-wide .poem-art{float:none;position:static;display:block;width:128px;height:128px;margin:0 auto 12px}
  body.poem-scrolled .view-read .poem-art,
  body.poem-scrolled .view-read .page-wrap.is-wide .poem-art{width:128px;height:128px;margin:0 auto 12px}
  .bar-poem-title{position:static;left:auto;right:auto;flex:1 1 0;min-width:0;text-align:center;margin:0 8px}
  /* Tone the body type down on phones — IM Fell English at 19px and
     Special Elite at 17px both feel oversized in a narrow column. */
  .body{font-size:15px;line-height:1.85}
  .page-wrap.is-prose .body{font-size:17px;line-height:1.6}
  .page-wrap.is-prose .prose-para{line-height:1.6}
}
@media(max-width:480px){
  .view-read .poem-art,
  .view-read .page-wrap.is-wide .poem-art{width:116px;height:116px}
  body.poem-scrolled .view-read .poem-art,
  body.poem-scrolled .view-read .page-wrap.is-wide .poem-art{width:116px;height:116px}
  .view-read .bar-inner{padding:0 16px;gap:8px}
  /* Drop the wordmark text everywhere — bar (home/book/poem) and page-header.
     The bar-mark glyph stays as a leading dot. */
  .mark .mark-pre,
  .mark .mark-post{display:none}
  .view-read .bar .mark svg{width:14px;height:14px}
  /* Wordmark text is hidden at this width — drop the SVG's left/right margin
     so the bar-mark dot sits flush at the rail (matching the book-page bar
     where the gap collapses with the hidden text). */
  .view-read .page-header .mark svg{margin:0}
  .bar-poem-title{font-size:13px;margin:0 4px;text-align:left}
  /* Further tighten body sizes on the smallest phones. */
  .body{font-size:14.5px;line-height:1.8}
  .page-wrap.is-prose .body{font-size:16px;line-height:1.55}
  .page-wrap.is-prose .prose-para{line-height:1.55}
}
/* Slow heartbeat on the bar-mark glyph — applies everywhere a .mark appears
   (page-header, bar, home, book index). transform:scale doesn't affect layout. */
.mark svg{transform-origin:center;animation:bar-mark-pulse 2.4s ease-in-out infinite}
@keyframes bar-mark-pulse{
  0%,100%{opacity:.35;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.25)}
}
@media(prefers-reduced-motion:reduce){
  .mark svg{animation:none}
  .home-domain::before,.home-domain::after{animation:none}
  .hero-art svg .ray,.hero-art::before{animation:none}
}

/* ─────────────────────────────────────────────
   Dark theme — experimental, opt-in only.
   Activated by the hidden `t` keybinding (handled in
   base.html), which sets data-theme="dark" on <html>
   and persists the choice in localStorage. No OS-pref
   auto-switch: light is the canonical surface; dark is
   a magic-trick alt for late-night reading.

   Translates the warm-paper + azure light theme into a
   literary night palette: deep blue-charcoal ground,
   warm parchment ink (never pure white), lifted azure
   for moonlight accent. "Evening reading lamp," not
   "tech app dark mode."
   ───────────────────────────────────────────── */
:root[data-theme="dark"]{
  --paper:#0f1219;
  --paper-hi:#161a25;
  --paper-cool:#0c0e15;
  --glow-warm:rgba(232,178,110,.10);
  --glow-cool:rgba(120,168,220,.07);
  --ink:#e6e0cf;
  --ink-soft:#b4ab95;
  --dim:#8a8270;
  --azure:#8fc0f0;
  --azure-deep:#bcd6f0;
  --azure-soft:#5b85b8;
  --red-pen:#e08a6a;
  --line:rgba(230,224,207,.10);
  color-scheme:dark;
}

/* Ambient gradient — warm lamp at top, cool floor at bottom.
   Banding on dark backgrounds is visible at low alphas, so:
   - radial centers sit off-screen (-25% / 125%) so only the far,
     smooth falloff washes into the viewport (no visible "spotlight")
   - very wide ellipses (160% × 100%) give gentle, edge-free transitions
   - `in oklab` interpolates perceptually so the alpha ramp banding
     is smoothed across mid-tones
   - no linear overlay — the original third stop introduced a visible
     horizontal stripe near the top third of the page. */
[data-theme="dark"] body::after{
  background:
    radial-gradient(ellipse 160% 100% at 50% -25% in oklab,
      rgba(232,178,110,.06) 0%, transparent 80%),
    radial-gradient(ellipse 140% 90% at 50% 125% in oklab,
      rgba(120,168,220,.05) 0%, transparent 80%);
}

/* Star-dust grain — kept very faint on dark. Higher opacity reads
   as visible texture on the body text rather than dither. */
[data-theme="dark"] body::before{
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}

/* Hero — moon glow halo replaces the warm sun glow.
   Tuned to read as ambient sky behind the sun rather than a backlit
   disc: low center alpha (.10), heavy blur (60px), and screen blend
   so the halo dissolves into the dark ground with no visible edge. */
[data-theme="dark"] .hero-art::before{
  background:radial-gradient(circle at center in oklab,
    rgba(180,210,240,.10) 0%,
    rgba(140,180,225,0) 100%);
  filter:blur(60px);
  mix-blend-mode:screen;
}

/* The italic accent on the hero/title-page h1 lifts to --azure-deep
   so it reads as moonlight against the dark ground. */
[data-theme="dark"] .hero-text h1 em,
[data-theme="dark"] .title-page h1 em{color:var(--azure-deep)}

/* Walking-pace book connector — soft vertical fade. */
[data-theme="dark"] .book + .book::before{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--azure),transparent 75%) 0%,
    color-mix(in srgb,var(--azure),transparent 95%) 100%);
}

/* No per-book-card glyph halo in dark mode. The azure-tinted SVG
   already reads as a self-luminous mark against the dark; adding a
   round halo behind each one creates a column of visible spotlights
   down the page. The book glyph stands on its own. */

/* Book index — ambient halo behind the title-page crest, same
   pseudo + blur trick. Sized just slightly larger than the SVG so
   the glow hugs the crest rather than blooming into a cone below
   it; centered on the SVG (not the padded container) by anchoring
   to the top edge + half the SVG height. */
[data-theme="dark"] .title-art{position:relative;background:none}
[data-theme="dark"] .title-art svg{position:relative}
[data-theme="dark"] .title-art::before{
  content:'';
  position:absolute;
  width:280px;height:280px;
  left:50%;top:140px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at center in oklab,
    rgba(143,192,240,.12) 0%, transparent 65%);
  filter:blur(28px);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* Bar mark glyph — ambient azure halo, replacing the flat ink dot. */
[data-theme="dark"] .bar .mark svg,
[data-theme="dark"] .page-header .mark svg{
  filter:drop-shadow(0 0 14px var(--azure)) drop-shadow(0 0 4px rgba(160,200,240,.6));
}

/* Poem-page h1 — soft text-shadow gives the moonlit depth. */
[data-theme="dark"] .head-text h1{text-shadow:0 0 30px rgba(188,214,240,.12)}

/* Ambient halo behind the poem-page art glyph. */
[data-theme="dark"] .head-art{
  background:radial-gradient(circle, rgba(143,192,240,.12) 0%, transparent 70%);
  border-radius:50%;
}

/* Sticky reveal bar — dark glass instead of cream glass. */
[data-theme="dark"] .view-read .bar{
  background:rgba(15,18,25,.72);
  border-bottom-color:color-mix(in srgb,var(--ink),transparent 92%);
}

/* Poem list dotted divider — parchment ink against the night. */
[data-theme="dark"] .poem-row{border-bottom-color:rgba(230,224,207,.12)}
/* In dark mode the brighter shade is --azure-deep; route it to the
   larger title for hover lift and use --azure on the small roman. */
[data-theme="dark"] .poem-row:hover{background:color-mix(in srgb,var(--azure),transparent 92%)}
[data-theme="dark"] .poem-row:hover .p-title{color:var(--azure-deep)}
[data-theme="dark"] .poem-row:hover .roman{color:var(--azure)}