/* ─────────────────────────────────────────────────────────────
   Alfaaz Sujal Ke: design language
   Ink, paper and light. Each page sets a mood on <body data-mood>.
   ───────────────────────────────────────────────────────────── */

:root {
  --serif: 'Cormorant Garamond', 'Tiro Devanagari Hindi', Georgia, serif;
  --deva: 'Tiro Devanagari Hindi', 'Cormorant Garamond', 'Noto Serif Devanagari', serif;
  --nastaliq: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ink: #0e0d12;
  --gutter: clamp(16px, 4.5vw, 64px);
  --measure: 38rem;
  --ease: cubic-bezier(.22, .7, .1, 1);
  --poem-scale: 1;

  /* default mood: night */
  --bg: #0e0d12;
  --bg-2: #17151d;
  --fg: #ece5d8;
  --muted: #958d9e;
  --accent: #d6a45e;
  --rule: rgba(236, 229, 216, .14);
  --glow: rgba(214, 164, 94, .16);
  --grain-opacity: .07;
}

body[data-mood='paper'] { --bg: #f3eee4; --bg-2: #ebe3d5; --fg: #1d1a20; --muted: #6f6771; --accent: #9a5636; --rule: rgba(29, 26, 32, .14); --glow: rgba(154, 86, 54, .1); --grain-opacity: .16; }
body[data-mood='indigo'] { --bg: #11132a; --bg-2: #1a1d3a; --fg: #ece4d2; --muted: #9c9ab8; --accent: #dcb46c; --rule: rgba(236, 228, 210, .14); --glow: rgba(220, 180, 108, .14); }
body[data-mood='walnut'] { --bg: #18120f; --bg-2: #241b16; --fg: #efe4d4; --muted: #a8968a; --accent: #cf8f4e; --rule: rgba(239, 228, 212, .14); --glow: rgba(207, 143, 78, .13); }
body[data-mood='cinema'] { --bg: #09090b; --bg-2: #141418; --fg: #eeeaea; --muted: #8d8a90; --accent: #d77b88; --rule: rgba(238, 234, 234, .12); --glow: rgba(215, 123, 136, .14); }
body[data-mood='dusk'] { --bg: #1b1520; --bg-2: #261d2b; --fg: #f0e6dc; --muted: #a8979f; --accent: #e7a66b; --rule: rgba(240, 230, 220, .14); --glow: rgba(231, 166, 107, .15); }
body[data-mood='dawn'] { --bg: #f2e8e2; --bg-2: #e9dcd4; --fg: #231b1d; --muted: #75666a; --accent: #a4505d; --rule: rgba(35, 27, 29, .14); --glow: rgba(164, 80, 93, .1); --grain-opacity: .14; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.125rem/1.65 var(--serif);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image: radial-gradient(120% 70% at 50% -10%, var(--glow), transparent 60%);
  background-attachment: fixed;
}
:lang(hi), :lang(ur-Deva), [lang='hi'], [lang='ur-Deva'] { font-family: var(--deva); line-height: 1.85; }
[lang='ur'] { font-family: var(--nastaliq); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .3s, text-decoration-color .3s; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--fg); color: var(--bg); padding: .5rem .9rem; font: 500 .85rem var(--sans); }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }
.small { font: 400 .82rem/1.5 var(--sans); }

/* paper grain: a quiet SVG noise over everything */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-mood='night'] .grain, body[data-mood='indigo'] .grain, body[data-mood='walnut'] .grain, body[data-mood='cinema'] .grain, body[data-mood='dusk'] .grain { mix-blend-mode: screen; opacity: .045; }

/* ───── page veil, ink that settles on arrival, spreads on departure ───── */
.veil {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: var(--ink);
  animation: veil-out .75s var(--ease) .05s both;
}
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
body.is-leaving .veil {
  animation: veil-in .5s var(--ease) both;
  visibility: visible;
}
@keyframes veil-in {
  from { opacity: 1; clip-path: circle(0% at var(--vx, 50%) var(--vy, 50%)); }
  to { opacity: 1; clip-path: circle(150% at var(--vx, 50%) var(--vy, 50%)); }
}

/* ───── header & menu ───── */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding: 18px var(--gutter);
  pointer-events: none;
  transition: opacity .5s, transform .5s var(--ease);
}
.site-head > * { pointer-events: auto; }
.site-head::before {
  content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg) 30%, transparent);
  opacity: 0; transition: opacity .4s;
}
body.is-scrolled .site-head::before { opacity: .92; }
.brand { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; justify-self: start; }
.brand-ur { font-size: 1.15rem; line-height: 1; color: var(--accent); transform: translateY(.18em); }
.brand-en { font: 400 1.25rem/1 var(--serif); letter-spacing: .01em; }
.brand-en em { font-style: italic; color: var(--accent); padding: 0 .06em; }
.menu-btn {
  justify-self: end; display: inline-flex; align-items: center; gap: .7rem;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font: 500 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
.menu-lines { display: grid; gap: 6px; width: 26px; }
.menu-lines i { display: block; height: 1px; background: currentColor; transition: transform .45s var(--ease); }
.menu-lines i:last-child { width: 62%; justify-self: end; }
.menu-btn:hover .menu-lines i:last-child { width: 100%; }
body.menu-open .menu-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .menu-lines i:last-child { width: 100%; transform: translateY(-3.5px) rotate(-45deg); }
body.menu-open .site-head { color: #ece5d8; }
body.menu-open .site-head::before { opacity: 0; }

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: #0e0d12; color: #ece5d8;
  display: grid; place-items: center;
  padding: 90px var(--gutter) 40px;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 50px) 40px);
  transition: clip-path .7s var(--ease);
}
.menu[hidden] { display: grid; visibility: hidden; }
body.menu-open .menu { clip-path: circle(150% at calc(100% - 50px) 40px); visibility: visible; }
body.menu-open { overflow: hidden; }
/* ───── shared typography ───── */
main { position: relative; z-index: 2; display: block; }
.kicker { font: 500 .7rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.kicker a { text-decoration: none; }
.display { font: 300 clamp(2.6rem, 7.5vw, 6.2rem)/1.02 var(--serif); letter-spacing: -.012em; margin: 0 0 1.4rem; }
.display em { font-style: italic; color: var(--accent); }
.display:lang(hi), .display:lang(ur-Deva) { font-family: var(--deva); font-size: clamp(2.1rem, 6vw, 4.8rem); line-height: 1.3; letter-spacing: 0; }
.h2 { font: 400 clamp(1.6rem, 3.4vw, 2.4rem)/1.15 var(--serif); margin: 0 0 1.5rem; }
.h2 em { color: var(--accent); }
.h2 a { text-decoration: none; }
.h2-sub { font: 500 .68rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-left: .8rem; vertical-align: middle; }
.h3 { font: 500 1.35rem/1.3 var(--serif); margin: 0 0 .8rem; }
.lede { font: 300 clamp(1.15rem, 1.9vw, 1.42rem)/1.6 var(--serif); max-width: var(--measure); color: color-mix(in srgb, var(--fg) 86%, transparent); margin: 0 0 1rem; }
.lede:lang(hi) { font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.prose p { margin: 0 0 1.1em; }
.prose blockquote { margin: 1.4em 0; padding-left: 1.2em; border-left: 1px solid var(--accent); font-style: italic; }
.text-link { font: 500 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--accent); }
.pill, .btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: .85rem 1.25rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--rule); transition: background .3s, color .3s, border-color .3s;
}
.btn { background: var(--fg); color: var(--bg); border-color: var(--fg); cursor: pointer; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.pill:hover { border-color: var(--accent); }
.btn-ghost { background: none; color: var(--muted); border-style: dashed; cursor: default; }
.btn-ghost:hover { background: none; color: var(--muted); border-color: var(--rule); }
.review-note {
  margin: 1.4rem 0 0; padding: .9rem 1rem; border: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 8px; font: 400 .82rem/1.55 var(--sans); color: var(--muted); max-width: 40rem;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.review-note strong { display: block; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; color: var(--accent); margin-bottom: .25rem; }
.missing { font: italic 400 1rem var(--serif); color: var(--muted); }

/* ink-in: titles write themselves in from the left */
.ink-in { animation: ink-in 1.3s var(--ease) .25s both; }
@keyframes ink-in {
  from { clip-path: inset(-10% 100% -20% 0); filter: blur(6px); opacity: .2; }
  to { clip-path: inset(-10% -2% -20% 0); filter: blur(0); opacity: 1; }
}
/* scroll reveals (classes toggled by main.js) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

section, article { position: relative; }
main > section, main > article { padding-inline: var(--gutter); }

/* ───── footer ───── */
.site-foot { position: relative; z-index: 2; margin-top: 7rem; padding: 3rem var(--gutter) 2.5rem; border-top: 1px solid var(--rule); }
.foot-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: 1.5rem; }
.foot-nav a { font: 500 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.foot-nav a:hover { color: var(--accent); }
.foot-meta { font: 400 .76rem/1.6 var(--sans); color: var(--muted); margin: 0; max-width: 60rem; }

/* ───── HOME ───── */
.is-home { overflow-x: hidden; }
.home { min-height: 100svh; overflow: clip; display: grid; grid-template-rows: 1fr auto; padding: 84px var(--gutter) 28px; isolation: isolate; }
.ink-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
.nastaliq-inline { font-family: var(--nastaliq); letter-spacing: 0; text-transform: none; font-size: .95rem; }
.home-center { align-self: center; display: grid; justify-items: center; text-align: center; position: relative; padding: 2rem 0; }
.home-urdu {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -58%; margin: 0; z-index: -1;
  font-size: clamp(5rem, 19vw, 17rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(214, 164, 94, .2);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 50% { -webkit-text-stroke-color: rgba(214, 164, 94, .34); scale: 1.02; } }
.home-title { margin: 0; font: 300 clamp(3rem, min(13vw, 17vh), 11rem)/.86 var(--serif); letter-spacing: -.03em; }
.ht { display: block; animation: rise 1.6s var(--ease) both; }
.ht-1 { font-style: italic; }
.ht-2 { animation-delay: .25s; color: var(--accent); font-size: .48em; letter-spacing: .06em; margin-top: .25em; font-weight: 400; }
@keyframes rise { from { opacity: 0; transform: translateY(.35em); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.home-sub { font: italic 300 1.2rem var(--serif); color: var(--muted); margin: min(1.2rem, 2vh) 0 min(2.2rem, 3.5vh); animation: rise 1.6s var(--ease) .5s both; }
.home-line { margin: 0; min-height: min(7.5rem, 14vh); max-width: 40rem; animation: rise 1.6s var(--ease) .8s both; }
.home-line blockquote { margin: 0 0 .7rem; font-size: clamp(1.05rem, min(2.6vw, 3.4vh), 1.6rem); line-height: 1.6; transition: opacity .9s, filter .9s; }
.home-line blockquote[lang='en'] { font-style: italic; }
.home-line figcaption { font: 500 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: opacity .9s; }
.home-line figcaption a { text-decoration: none; }
.home-line .hl-title { font: 400 .95rem var(--deva); letter-spacing: 0; text-transform: none; color: var(--accent); }
.home-line.is-fading blockquote, .home-line.is-fading figcaption { opacity: 0; filter: blur(4px); }
.home-doors { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--rule); }
.door {
  display: grid; gap: .25rem; padding: 1rem .8rem 0 0; text-decoration: none;
  animation: rise 1.2s var(--ease) both; animation-delay: calc(1s + var(--i) * .07s);
  position: relative;
}
.door::before { content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--accent); transition: width .6s var(--ease); }
.door:hover::before, .door:focus-visible::before { width: 85%; }
.door-num { font: 400 .9rem var(--deva); color: var(--accent); }
.door-label { font: 400 1.3rem/1.1 var(--serif); }
.door-hint { font: italic 300 .92rem/1.3 var(--serif); color: var(--muted); }
.door:hover .door-label { color: var(--accent); }
@media (max-width: 1000px) { .home-doors { grid-template-columns: repeat(4, 1fr); row-gap: .8rem; } }
@media (max-width: 560px) {
  .home-doors { grid-template-columns: 1fr 1fr; }
  .door-hint { display: none; }
  .home-line { min-height: 8.5rem; }
}

/* ───── ABOUT ───── */
.about-hero { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-top: 140px; max-width: 1240px; margin: 0 auto; }
.about-portrait { position: relative; }
.about-portrait picture { display: block; overflow: hidden; border-radius: 2px; box-shadow: 0 30px 60px -30px rgba(40, 25, 15, .45); }
.about-portrait img { filter: saturate(.85) contrast(1.02); transition: filter 1s, transform 1.4s var(--ease); }
.about-portrait:hover img { filter: none; transform: scale(1.02); }
.about-portrait::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--accent); opacity: .5; z-index: -1; }
.portrait-cap { display: block; margin-top: 1.4rem; font: italic 400 1rem var(--serif); color: var(--muted); }
.letter { max-width: 980px; margin: 6rem auto 0; }
.letter-sec { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; padding: 2.6rem 0; border-top: 1px solid var(--rule); }
.letter-num { font: italic 300 2rem/1 var(--serif); color: var(--accent); }
.letter-sec h2 { font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--serif); margin: 0 0 1rem; }
.letter-sec h2:lang(hi) { font-family: var(--deva); }
.letter-sec .prose { max-width: var(--measure); font-size: 1.22rem; }
.letter-sec .prose:lang(hi) { font-size: 1.06rem; }
.letter-sec .prose p:first-child::first-letter { font-size: 3.1em; float: left; line-height: .9; padding: .06em .1em 0 0; color: var(--accent); font-style: italic; }
.letter-sec .prose:lang(hi) p:first-child::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; font-style: normal; }
.self-ghazal { max-width: 980px; margin: 4rem auto 0; padding: clamp(2rem, 5vw, 4rem) !important; background: var(--bg-2); border-radius: 4px; text-align: center; }
.self-ghazal blockquote { margin: 0 0 1.6rem; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 2; }
.facts { max-width: 980px; margin: 4rem auto 0; }
.facts dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 2rem; border-top: 1px solid var(--rule); }
.facts dl div { padding: 1.2rem 1rem 1.2rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 500 .66rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.facts dd { margin: 0; font-size: 1.15rem; }
.facts-links { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 760px) {
  .about-hero { grid-template-columns: 1fr; padding-top: 110px; }
  .about-portrait { max-width: 340px; }
  .letter-sec { grid-template-columns: 1fr; gap: .4rem; }
  .facts dl { grid-template-columns: 1fr 1fr; }
}

/* ───── LANGUAGE PAGES & ENTRIES ───── */
.lang-hero { padding-top: clamp(130px, 20vh, 220px) !important; max-width: 1240px; margin: 0 auto; }
.lang-hero-ur .ghost-word {
  position: absolute; right: var(--gutter); top: 90px; margin: 0; display: grid; justify-items: end; gap: 0;
  pointer-events: none; z-index: -1;
}
.ghost-word span { font-size: clamp(5rem, 15vw, 12rem); line-height: 1.1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.ghost-word span[lang='hi'] { font-size: clamp(3rem, 9vw, 7rem); }
.hero-cite { font: 500 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: -0.6rem 0 1.6rem; }
.hero-cite a { text-decoration: none; }
.lang-list, .lang-block { max-width: 1240px; margin: 4rem auto 0; }
.block-head { border-bottom: 1px solid var(--rule); margin-bottom: .5rem; }
.block-head .h2 { margin-bottom: 1rem; font-family: var(--deva); }
.entries { list-style: none; margin: 0; padding: 0; }
.entry a {
  display: grid; grid-template-columns: 3.4rem 1fr minmax(10rem, auto); align-items: baseline; gap: 1rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule); text-decoration: none;
  transition: padding .5s var(--ease), background .5s;
}
.entry-num { font: 400 1rem var(--deva); color: var(--accent); }
.entry-main { display: grid; gap: .15rem; }
.entry-title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.25; transition: color .3s; }
.entry-title:lang(en) { font-weight: 300; }
.entry-roman { font: italic 400 1.05rem var(--serif); color: var(--muted); }
.entry-first { font-size: 1.05rem; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .6s; }
.entry-meta { font: 500 .66rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: right; }
.entry-meta em { font: italic 400 .95rem var(--serif); letter-spacing: 0; text-transform: none; }
.entry a:hover, .entry a:focus-visible { padding-left: 1rem; }
.entry a:hover .entry-title { color: var(--accent); }
.entry a:hover .entry-first, .entry a:focus-visible .entry-first { max-height: 4rem; opacity: 1; }
@media (hover: none) { .entry-first { max-height: 4rem; opacity: 1; } }
@media (max-width: 680px) {
  .entry a { grid-template-columns: 2.2rem 1fr; }
  .entry-meta { grid-column: 2; text-align: left; }
}
.excerpt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; }
.excerpt { margin: 0; padding: 1.6rem; background: var(--bg-2); border-radius: 3px; position: relative; }
.excerpt::before { content: '“'; position: absolute; top: -.2rem; left: .8rem; font: italic 4rem/1 var(--serif); color: var(--accent); opacity: .5; }
.excerpt blockquote { margin: .8rem 0 1rem; font: italic 400 1.2rem/1.6 var(--serif); }
.excerpt figcaption { font: 500 .66rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.excerpts { margin: 5rem 0 0; }

/* ───── POEM PAGE ───── */
.poem { max-width: 980px; margin: 0 auto; padding-top: clamp(120px, 18vh, 200px) !important; }
.poem-head { text-align: center; margin-bottom: 2rem; }
.poem-title { font: 300 clamp(2.4rem, 7vw, 5rem)/1.12 var(--serif); margin: 0; }
.poem-title:lang(hi), .poem-title:lang(ur-Deva) { font-family: var(--deva); font-size: clamp(2rem, 5.6vw, 3.8rem); line-height: 1.35; }
.poem-roman { font: italic 400 1.2rem var(--serif); color: var(--muted); margin: .4rem 0 0; }
.poem-tools {
  position: sticky; top: 70px; z-index: 5;
  display: flex; justify-content: center; gap: .3rem; flex-wrap: wrap;
  margin: 0 auto 3rem; width: fit-content; padding: .3rem; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
}
.poem-tools button { background: none; border: 0; border-radius: 999px; padding: .45rem .85rem; cursor: pointer; font: 500 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: background .3s, color .3s; }
.poem-tools button:hover, .poem-tools button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }
.poem-body { display: grid; justify-content: center; font-size: calc(clamp(1.2rem, 2.3vw, 1.5rem) * var(--poem-scale)); transition: font-size .4s var(--ease); }
.poem-body:lang(hi), .poem-body:lang(ur-Deva) { font-size: calc(clamp(1.1rem, 2.1vw, 1.36rem) * var(--poem-scale)); }
.stanza { margin: 0 0 2em; position: relative; line-height: 1.85; }
.poem-english .stanza { line-height: 1.7; }
.stanza-mark { position: absolute; left: -2.6em; top: .35em; font-size: .75em; color: var(--accent); opacity: .8; }
.line { display: inline-block; padding: 0 .15em; margin: 0 -.15em; border-radius: 3px; transition: background .4s, color .4s; }
.line:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.js .poem-body .line { opacity: 0; transform: translateY(.5em); filter: blur(3px); }
.js .poem-body .line.is-in { opacity: 1; transform: none; filter: none; transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease), background .4s; }
.poem-foot { max-width: 40rem; margin: 3rem auto 0; text-align: center; }
.signature { font: italic 400 1.3rem var(--serif); margin: 0 0 .4rem; }
.signature span { color: var(--muted); font-size: .9em; }
.pub-note { font: 400 .85rem var(--sans); color: var(--muted); margin: 0 0 1rem; }
.pub-note em { font: italic 400 1.05rem var(--serif); color: var(--fg); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.2rem 0; }
.tags a { font: 500 .66rem var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .4rem .7rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); }
.tags a:hover { color: var(--accent); border-color: var(--accent); }
.poem-foot .review-note { text-align: left; margin-inline: auto; }
.poem-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: end; margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); text-align: left; }
.poem-nav a { text-decoration: none; display: grid; gap: .2rem; }
.poem-nav a span { font: 500 .66rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.poem-nav a em { font-style: normal; font-size: 1.1rem; }
.poem-nav a[rel='next'] { text-align: right; }
.poem-nav-mid { font: 500 .66rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); align-self: center; }
@media (max-width: 640px) {
  .poem-nav { grid-template-columns: 1fr 1fr; }
  .poem-nav-mid { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .stanza-mark { position: static; display: block; margin-bottom: .3em; }
  .poem-tools { top: 62px; }
}
/* Focus mode: the room goes dark around the poem */
body.is-reading .site-head, body.is-reading .poem-head .kicker, body.is-reading .poem-foot, body.is-reading .site-foot { opacity: .08; transition: opacity .8s; }
body.is-reading .site-head:hover, body.is-reading .site-foot:hover { opacity: 1; }
body.is-reading::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(70% 60% at 50% 50%, transparent, color-mix(in srgb, var(--bg) 70%, #000) 100%); opacity: .7; }

/* ───── BOOKS ───── */
.books-hero, .catalogue, .desk { max-width: 1240px; margin-inline: auto; }
.books-hero { padding-top: clamp(130px, 20vh, 220px) !important; }
.desk { margin-top: 7rem; }
.desk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; }
.manuscript {
  display: grid; gap: .6rem; padding: 2.4rem 2rem 2rem; min-height: 300px; align-content: start;
  background: #f2ebdd; color: #231c17; text-decoration: none; border-radius: 2px;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(80, 60, 40, .12) 31px 32px);
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.8);
  transform: rotate(var(--r));
  transition: transform .7s var(--ease), box-shadow .7s;
}
.manuscript:hover { transform: rotate(0) translateY(-6px); color: #231c17; box-shadow: 0 40px 60px -30px rgba(0,0,0,.9); }
.ms-status { font: 500 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #9a5636; }
.ms-title { font: italic 400 clamp(1.8rem, 3.4vw, 2.6rem)/1.1 var(--serif); }
.ms-sub { font: 400 1.05rem/1.4 var(--serif); color: #6b5d50; }
.ms-more { margin-top: auto; padding-top: 1.4rem; font: 500 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9a5636; }

.ms-page { max-width: 860px; margin: 0 auto; padding-top: clamp(120px, 18vh, 190px) !important; }
.ms-head { margin-bottom: 2.4rem; }
.ms-head .book-sub { margin-top: -.6rem; }
.ms-dedication { font: italic 400 1.2rem var(--serif); color: var(--muted); margin: 0 0 .4rem; }
.ms-epigraph { margin: 0 0 2.4rem; font: italic 300 clamp(1.4rem, 3vw, 2rem)/1.4 var(--serif); color: var(--accent); }
.ms-blurb { font-size: 1.2rem; max-width: var(--measure); }
.ms-parts { margin-top: 3rem; display: grid; gap: 1rem; }
.ms-part { padding: 1.8rem 0; border-top: 1px solid var(--rule); }
.part-num { display: block; font: 500 .64rem var(--sans); letter-spacing: .24em; color: var(--accent); margin-bottom: .3rem; }
.ms-chapters { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 2.5rem; }
.ms-chapters li { break-inside: avoid; padding: .3rem 0; font-size: 1.08rem; }
.ms-chapters span { display: inline-block; min-width: 2.4rem; font-style: italic; color: var(--muted); }
.is-suggested .ms-chapters li { color: var(--muted); }
.suggested-flag { font: 500 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--accent); display: inline-block; padding: .35rem .6rem; border-radius: 4px; }
.ms-withheld { margin-top: 3rem; font: italic 400 1.1rem var(--serif); color: var(--muted); }

/* ───── COLLECTION ───── */
.coll-hero, .coll-results { max-width: 1240px; margin-inline: auto; }
.coll-hero { padding-top: clamp(130px, 20vh, 210px) !important; }
.search { position: relative; margin: 1rem 0 1.6rem; border-bottom: 1px solid var(--fg); display: flex; align-items: baseline; gap: 1rem; }
.search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); padding: .6rem 0; font: 300 clamp(1.3rem, 3vw, 2.2rem) var(--serif); outline: none; }
.search input::placeholder { color: var(--muted); opacity: .7; }
.search:focus-within { border-bottom-color: var(--accent); }
.search-count { font: 500 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.filters { display: grid; gap: .5rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.filter-label { font: 500 .62rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); width: 6.5rem; }
.chip { font: 400 .8rem var(--sans); padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--rule); background: none; cursor: pointer; transition: all .25s; }
.chip sup { font-size: .6rem; color: var(--muted); margin-left: .2rem; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip[aria-pressed='true'] sup { color: inherit; }
.clear-filters, .link-btn { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font: 500 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
.link-btn { font: inherit; letter-spacing: 0; text-transform: none; }
@media (max-width: 640px) {
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-label { width: auto; flex: 0 0 auto; margin-right: .3rem; }
  .chip { flex: 0 0 auto; }
}
.coll-results { margin-top: 3rem; }
.coll-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 2.5rem; }
.coll-item a { display: grid; gap: .2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.coll-item[hidden] { display: none; }
.ci-title { font-size: 1.4rem; line-height: 1.3; }
.ci-title:lang(en) { font-size: 1.55rem; }
.ci-first { color: var(--muted); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-meta { font: 400 .72rem var(--sans); letter-spacing: .04em; color: var(--muted); }
.coll-item a:hover .ci-title { color: var(--accent); }
.coll-item mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: inherit; border-radius: 2px; }
.coll-empty { font: italic 400 1.3rem var(--serif); color: var(--muted); }
.coll-item.is-new { animation: rise .6s var(--ease) both; }

/* ───── REELS ───── */
.reels-hero, .reels-sec { max-width: 1240px; margin-inline: auto; }
.reels-hero { padding-top: clamp(130px, 20vh, 220px) !important; }
.wave { position: absolute; right: var(--gutter); top: 110px; display: flex; align-items: center; gap: 4px; height: 160px; opacity: .55; z-index: -1; }
.wave i { width: 3px; height: 100%; background: var(--accent); border-radius: 3px; transform: scaleY(.1); animation: wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); }
@keyframes wave { 50% { transform: scaleY(calc(.15 + .85 * var(--a, .6))); } }
.wave i:nth-child(3n) { --a: .9; } .wave i:nth-child(4n+1) { --a: .35; } .wave i:nth-child(5n+2) { --a: .7; }
@media (max-width: 760px) { .wave { left: var(--gutter); right: var(--gutter); top: 70px; height: 90px; opacity: .25; overflow: hidden; } }
.reels-jump { display: flex; gap: 1.4rem; margin-top: 2rem; }
.reels-jump a { font: 500 .72rem var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.reels-jump a:hover { color: var(--accent); }
.reels-sec { margin-top: 6rem; scroll-margin-top: 90px; }
.sec-num { font: 500 .7rem var(--sans); letter-spacing: .2em; color: var(--accent); vertical-align: middle; margin-right: .8rem; }
.songs { display: grid; gap: 1.2rem; }
.player { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.4rem; align-items: center; padding: 1.4rem 1.6rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-2); }
.player .review-note, .player .lyrics { grid-column: 1 / -1; margin-top: 0; }
.pl-btn { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--accent); background: none; cursor: pointer; display: grid; place-items: center; transition: background .3s; }
.pl-btn svg { width: 24px; height: 24px; fill: var(--accent); transition: fill .3s; }
.pl-btn:hover { background: var(--accent); }
.pl-btn:hover svg { fill: var(--bg); }
.pl-btn .i-pause, .player.is-playing .pl-btn .i-play { display: none; }
.player.is-playing .pl-btn .i-pause { display: inline; }
.player.is-playing .pl-btn { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.pl-title { margin: 0; font: 400 1.6rem/1.2 var(--serif); }
.pl-credit { margin: .1rem 0 .7rem; font: 400 .8rem var(--sans); color: var(--muted); }
.pl-bar { display: flex; align-items: center; gap: 1rem; }
.pl-bar input { flex: 1; min-width: 0; accent-color: var(--accent); height: 2px; }
.pl-time { font: 400 .74rem var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lyrics summary { cursor: pointer; font: 500 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 2rem; }
.film { margin: 0; }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; border-radius: 4px; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: grayscale(.4); transition: opacity .6s, filter .6s, transform 1.2s var(--ease); }
.yt:hover img { opacity: .95; filter: none; transform: scale(1.03); }
.yt-play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 78px; height: 78px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(4px); }
.yt-play::after { content: ''; position: absolute; left: 32px; top: 26px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film figcaption { display: grid; gap: .1rem; margin-top: 1rem; }
.film-kind { font: 500 .64rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.film-title { font: italic 400 1.9rem/1.2 var(--serif); }
.film-role { color: var(--muted); }
.film figcaption a { font: 500 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--muted); margin-top: .4rem; }

/* ───── JOURNEY ───── */
.journey-hero, .thread { max-width: 1000px; margin-inline: auto; }
.journey-hero { padding-top: clamp(130px, 20vh, 220px) !important; }
.journey-epi { margin: 2rem 0 0; font-size: 1.25rem; color: color-mix(in srgb, var(--fg) 82%, transparent); padding-left: 1.2rem; border-left: 1px solid var(--accent); }
.journey-epi cite { display: block; margin-top: .4rem; font: 500 .7rem var(--sans); letter-spacing: .14em; color: var(--muted); font-style: normal; }
.journey-epi cite a { font-family: var(--deva); letter-spacing: 0; font-size: .95rem; }
.thread { margin-top: 5rem; padding-left: calc(var(--gutter) + 3rem) !important; }
.thread-line { position: absolute; left: calc(var(--gutter) + .9rem); top: 0; bottom: 0; width: 1px; background: var(--rule); }
.thread-line span { position: absolute; inset: 0 0 auto; height: 100%; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.thread-year { margin-bottom: 3.5rem; }
.year { font: 300 clamp(2.6rem, 6vw, 4.4rem)/1 var(--serif); margin: 0 0 1.4rem; color: var(--accent); font-variant-numeric: oldstyle-nums; position: relative; }
.year::before { content: ''; position: absolute; left: calc(-3rem - 4px); top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); }
.year-note { margin: -1rem 0 1rem; }
.thread-year ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.knot { padding: 1.1rem 1.3rem; border-radius: 6px; background: var(--bg-2); border: 1px solid transparent; transition: border-color .4s; position: relative; }
.knot::before { content: ''; position: absolute; left: calc(-3rem + 1px); top: 1.55rem; width: calc(3rem - 2px); height: 1px; background: var(--rule); }
.knot:hover { border-color: var(--rule); }
.knot-kind { font: 500 .62rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.knot h3 { margin: .2rem 0 .3rem; font: 400 1.45rem/1.3 var(--serif); }
.knot h3:lang(hi) { font-family: var(--deva); font-size: 1.2rem; }
.knot h3 a { text-decoration: none; }
.knot p { margin: 0; color: color-mix(in srgb, var(--fg) 78%, transparent); font-size: 1.08rem; }
.knot-recognition { border-left: 2px solid var(--accent); }
.knot-forthcoming { background: none; border: 1px dashed var(--accent); }

/* ───── CONTACT ───── */
.contact { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); padding-top: clamp(130px, 20vh, 210px) !important; align-items: start; }
.contact-links { list-style: none; margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.contact-links a { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.contact-links span { font: 500 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); align-self: center; }
.contact-links em { font: italic 400 1.2rem var(--serif); }
.letter-form {
  padding: clamp(1.6rem, 4vw, 3rem); background: #fbf6ef; color: #231b1d; border-radius: 2px;
  box-shadow: 0 40px 70px -40px rgba(80, 40, 40, .45);
  background-image: repeating-linear-gradient(transparent 0 41px, rgba(164, 80, 93, .12) 41px 42px);
  font-size: 1.3rem; line-height: 42px;
}
.lf-salute { margin: 0 0 .4rem; font-style: italic; font-size: 1.5rem; }
.letter-form label { display: block; }
.letter-form input, .letter-form select, .letter-form textarea {
  font: italic 400 1.3rem var(--serif); color: #a4505d; background: none; border: 0; border-bottom: 1px dashed rgba(35, 27, 29, .35);
  padding: 0 .2rem; outline: none; line-height: 1.4;
}
.letter-form input { width: min(16rem, 100%); }
.letter-form input:focus, .letter-form select:focus, .letter-form textarea:focus { border-bottom-color: #a4505d; border-bottom-style: solid; }
.letter-form textarea { width: 100%; resize: vertical; border: 0; line-height: 42px; margin-top: .4rem; padding: 0; min-height: 210px; }
.letter-form .btn { background: #231b1d; color: #fbf6ef; border-color: #231b1d; }
.letter-form .btn:hover { background: #a4505d; border-color: #a4505d; }
.lf-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.lf-status { font: 400 .85rem var(--sans); color: #75666a; line-height: 1.4; }
.letter-form .review-note { line-height: 1.55; color: #75666a; }
.letter-form [aria-invalid='true'] { border-bottom-color: #c0392b; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ───── 404 ───── */
.nf { min-height: 100svh; display: grid; align-content: center; max-width: 1000px; margin: 0 auto; }

/* ───── toast ───── */
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; z-index: 95; padding: .7rem 1.1rem; border-radius: 999px; background: var(--fg); color: var(--bg); font: 500 .8rem var(--sans); opacity: 0; pointer-events: none; transition: opacity .3s, translate .4s var(--ease); }
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ───── reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .poem-body .line { opacity: 1; transform: none; filter: none; }
}
@media print {
  .site-head, .site-foot, .poem-tools, .poem-nav, .veil, .grain, .toast, .review-note { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ═════════════ Navigation ═════════════ */
.top-nav { justify-self: end; display: flex; gap: clamp(.9rem, 1.6vw, 1.6rem); }
.top-nav a { position: relative; padding: .4rem 0; font: 500 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--fg) 78%, transparent); white-space: nowrap; }
.top-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.top-nav a:hover { color: var(--fg); }
.top-nav a:hover::after, .top-nav a[aria-current]::after { transform: scaleX(1); }
.top-nav a[aria-current] { color: var(--accent); }
.menu-btn { display: none; }
@media (max-width: 1099px) { .top-nav { display: none; } .menu-btn { display: inline-flex; } }

.menu-inner { width: min(980px, 100%); }
.menu-home { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(236, 229, 216, .14); text-decoration: none; color: #ece5d8; font: italic 300 clamp(2rem, 5vw, 3.2rem)/1.1 var(--serif); }
.menu-home span { font: 500 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #d6a45e; font-style: normal; }
.menu-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.menu-groups h2 { margin: 0 0 .8rem; font: 500 .66rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #8f8798; }
.menu-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.menu-groups a { display: block; padding: .35rem 0; text-decoration: none; color: #ece5d8; font: 300 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--serif); opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease), color .3s; }
body.menu-open .menu-groups a { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 1s); }
.menu-groups a:hover, .menu-groups a[aria-current] { color: #d6a45e; }
.menu-groups a[aria-current] { font-style: italic; }
.menu-foot { display: flex; gap: 1.6rem; margin-top: 2.4rem; font: 500 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.menu-foot a { color: #ece5d8; text-decoration: none; }
@media (max-width: 700px) { .menu-groups { grid-template-columns: 1fr; gap: 1.4rem; } .menu { place-items: start center; } }

/* Mobile tab bar: the five places people go most, always one tap away */
.tabbar { display: none; }
@media (max-width: 899px) {
  .tabbar {
    position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px; border-radius: 18px;
    background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--rule); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45);
  }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 7px 0 5px; border: 0; background: none; border-radius: 12px; text-decoration: none; color: var(--muted); font: 500 .6rem var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar svg circle { fill: currentColor; stroke: none; }
  .tabbar [aria-current], .tabbar [aria-expanded='true'] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  body.menu-open .tabbar { background: #17151d; color: #ece5d8; border-color: rgba(236, 229, 216, .14); }
  .menu-btn { display: none; }
  body { padding-bottom: 86px; }
  .is-home .home { padding-bottom: 100px; }
  .toast { bottom: 96px; }
}

/* Breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 2.4rem; padding: 0; font: 500 .68rem/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: .45rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--fg); text-transform: none; letter-spacing: .02em; font-size: .78rem; }
.poem .crumbs ol { justify-content: center; }

/* Poetry tabs: English · Urdu & Hindi · All poems */
.ptabs { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; margin-bottom: 2rem; border: 1px solid var(--rule); border-radius: 999px; }
.ptabs a { padding: .55rem 1rem; border-radius: 999px; text-decoration: none; font: 500 .74rem var(--sans); letter-spacing: .08em; color: var(--muted); transition: background .3s, color .3s; }
.ptabs a sup { margin-left: .3rem; font-size: .62rem; opacity: .7; }
.ptabs a:hover { color: var(--fg); }
.ptabs a[aria-current] { background: var(--fg); color: var(--bg); }

/* In-page jump links */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.jump a { padding: .5rem .9rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; font: 500 .72rem var(--sans); letter-spacing: .06em; color: var(--muted); }
.jump a[lang='hi'] { font: 400 .95rem var(--deva); letter-spacing: 0; }
.jump a:hover { color: var(--accent); border-color: var(--accent); }
.lang-block { scroll-margin-top: 90px; }

/* Two-way language switch */
.lang-switch { display: inline-flex; gap: .2rem; padding: .25rem; margin: 0 0 1.2rem; border: 1px solid var(--rule); border-radius: 999px; }
.lang-switch button { border: 0; background: none; padding: .4rem .9rem; border-radius: 999px; cursor: pointer; font: 500 .72rem var(--sans); color: var(--muted); }
.lang-switch button[lang='hi'] { font: 400 .95rem var(--deva); }
.lang-switch button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }

/* About extras */
.about-hero .lede { max-width: 42rem; }
.facts { max-width: 980px; margin: 4rem auto 0; }
.facts dl { grid-template-columns: repeat(5, 1fr); margin: 0; }
@media (max-width: 900px) { .facts dl { grid-template-columns: 1fr 1fr; } }
.letter { margin-top: 3rem; }
.next-links { max-width: 980px; margin: 4rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.next-links a { display: grid; gap: .3rem; padding: 1.2rem 0; border-top: 1px solid var(--fg); text-decoration: none; font: 400 1.3rem/1.3 var(--serif); }
.next-links span { font: 500 .64rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .next-links { grid-template-columns: 1fr; } }

/* Poem extras */
.award { display: inline-block; margin: 1rem 0 0; padding: .45rem .9rem; border: 1px solid var(--accent); border-radius: 999px; font: 500 .72rem var(--sans); letter-spacing: .06em; color: var(--accent); }
.poem-epigraph { margin: 1.4rem auto 0; max-width: 32rem; font-style: italic; color: var(--muted); }
.poem-note { font: italic 400 1rem/1.5 var(--serif); color: var(--muted); max-width: 32rem; margin: 0 auto 1rem; }
.line-long { display: inline; }
.poem-reel { margin: 2.4rem auto; max-width: 400px; text-align: left; }

/* Footer groups */
.foot-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 2.4rem; }
.foot-groups h2 { margin: 0 0 .8rem; font: 500 .64rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.foot-groups a { display: block; padding: .25rem 0; text-decoration: none; font-size: 1.05rem; }
@media (max-width: 760px) { .foot-groups { grid-template-columns: 1fr 1fr; } }

/* Collection: extra filters fold away */
.more-filters { margin-top: .2rem; }
.more-filters summary { cursor: pointer; width: fit-content; font: 500 .72rem var(--sans); letter-spacing: .08em; color: var(--accent); padding: .3rem 0; }
.more-filters .filter-row { margin-top: .5rem; }

/* ═════════════ Books: library catalogue cards ═════════════ */
.catalogue { margin-top: 3rem; scroll-margin-top: 90px; }
.ccards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2.2rem 1.8rem; }
.ccard a {
  position: relative; display: grid; gap: .25rem; min-height: 250px; padding: 1.3rem 1.4rem 2.4rem;
  background: #f4ecdc; color: #2a211b; text-decoration: none; border-radius: 3px;
  background-image:
    linear-gradient(transparent 63px, rgba(178, 60, 50, .55) 63px 64px, transparent 64px),
    repeating-linear-gradient(transparent 0 27px, rgba(70, 110, 160, .16) 27px 28px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 22px 40px -24px rgba(0, 0, 0, .8);
  transform: rotate(var(--r));
  transition: transform .6s var(--ease), box-shadow .6s;
  font-family: 'Courier Prime', 'Courier New', ui-monospace, monospace;
}
.ccard a:hover, .ccard a:focus-visible { transform: rotate(0) translateY(-8px); color: #2a211b; box-shadow: 0 34px 50px -26px rgba(0, 0, 0, .9); }
.cc-no { font-size: .72rem; letter-spacing: .1em; color: #8a6e58; }
.cc-year { position: absolute; top: 1rem; right: 1.2rem; font: 400 1.9rem/1 var(--serif); color: #b23c32; transform: rotate(-6deg); border: 2px solid currentColor; border-radius: 4px; padding: .1rem .45rem; opacity: .85; }
.cc-title { margin-top: 1.1rem; font: 500 1.55rem/1.15 var(--serif); }
.cc-sub { font: italic 400 1rem var(--serif); color: #6b5a4c; }
.cc-native { font-size: 1.05rem; color: #6b5a4c; }
.cc-rows { display: grid; gap: .1rem; margin-top: .6rem; font-size: .8rem; line-height: 28px; }
.cc-rows span { display: flex; gap: .6rem; }
.cc-rows b { font-weight: 400; min-width: 6.2rem; color: #8a6e58; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.cc-hole { position: absolute; left: 50%; bottom: .8rem; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }

.book { max-width: 860px; margin: 0 auto; padding-top: clamp(110px, 16vh, 170px) !important; }
.record {
  position: relative; padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.4rem, 5vw, 3.4rem) 3.4rem;
  background: #f4ecdc; color: #2a211b; border-radius: 3px;
  background-image:
    linear-gradient(transparent 118px, rgba(178, 60, 50, .55) 118px 119px, transparent 119px),
    repeating-linear-gradient(transparent 0 33px, rgba(70, 110, 160, .14) 33px 34px);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9);
}
.record-kicker { margin: 0 0 .5rem; font: 400 .78rem 'Courier New', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a6e58; }
.record-title { margin: 0; font: 400 clamp(2.4rem, 6vw, 4rem)/1.05 var(--serif); }
.record-sub { margin: .3rem 0 0; font: italic 400 1.3rem var(--serif); color: #6b5a4c; }
.record-native { margin: .3rem 0 0; font-size: 1.4rem; color: #b23c32; }
.record-cover { max-width: 220px; margin: 2rem 0 0; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.record-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin: 2.4rem 0 0; font-family: 'Courier New', ui-monospace, monospace; }
.record-dl div { padding: .45rem 0; }
.record-dl dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #8a6e58; }
.record-dl dd { margin: .1rem 0 0; font-size: 1rem; }
.record-note { margin: 1.6rem 0 0; font: italic 400 1.15rem var(--serif); }
.record-h { margin: 2.2rem 0 .6rem; font: 400 .74rem 'Courier New', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8a6e58; }
.record-poems { margin: 0; padding-left: 1.4rem; columns: 2 220px; column-gap: 2rem; }
.record-poems li { break-inside: avoid; padding: .2rem 0; font-size: 1.15rem; }
.record-poems a { color: #2a211b; text-decoration-color: rgba(178, 60, 50, .5); }
.record-poems a:hover { color: #b23c32; }
.book .review-note { margin-top: 2rem; }
.book .poem-nav { grid-template-columns: 1fr; margin-top: 2rem; }
@media (max-width: 560px) { .record-dl { grid-template-columns: 1fr; } }

/* ═════════════ Reels ═════════════ */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.8rem; }
.reel { margin: 0; }
.reel-play {
  position: relative; display: grid; align-content: end; justify-items: start; gap: .5rem; width: 100%; aspect-ratio: 9 / 14; padding: 1.4rem;
  border: 1px solid var(--rule); border-radius: 14px; cursor: pointer; text-align: left; overflow: hidden;
  background: radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), linear-gradient(170deg, #1e1a22, #0b0b0e);
  color: #f3eeea;
}
.reel-facebook .reel-play { background: radial-gradient(80% 50% at 50% 30%, rgba(90, 130, 220, .3), transparent 70%), linear-gradient(170deg, #1a1d26, #0b0b0e); }
.reel-face { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-icon { width: 68px; height: 68px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); position: relative; transition: transform .5s var(--ease), background .4s; }
.reel-icon::after { content: ''; position: absolute; left: 28px; top: 22px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.reel-play:hover .reel-icon { transform: scale(1.08); background: rgba(255, 255, 255, .1); }
.reel-face-title { position: relative; font: 400 1.4rem/1.3 var(--serif); }
.reel-face-title:lang(hi) { font-family: var(--deva); font-size: 1.2rem; }
.reel-hint { position: relative; font: 500 .64rem var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.reel-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #fff; }
.reel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel-instagram .reel-frame { aspect-ratio: auto; height: 640px; }
.reel video { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; background: #000; }
.reel figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .7rem; font: 500 .7rem var(--sans); letter-spacing: .08em; }
.reel figcaption a { text-decoration: none; color: var(--muted); }
.reel figcaption a:hover { color: var(--accent); }
.reel-tag { padding: .25rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); letter-spacing: .12em; text-transform: uppercase; font-size: .6rem; }
.reel-poem { color: var(--fg) !important; }
.reel-title { font: 400 1.1rem var(--serif); }
.more-on { margin-top: 1.6rem; font: 500 .74rem var(--sans); letter-spacing: .1em; }
.more-on a { text-decoration: none; color: var(--accent); }
.poem-reel .reel-play { aspect-ratio: 16 / 10; }
.poem-reel .kicker { text-align: center; }

/* Lyrics */
.lyrics { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 1rem; }
.lyrics summary { cursor: pointer; font: 500 .74rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.lyrics .lang-switch { margin-top: 1rem; }
.ly { columns: 2 260px; column-gap: 3rem; margin-top: .6rem; }
.ly-block { break-inside: avoid; margin: 0 0 1.2rem; font: italic 400 1.15rem/1.6 var(--serif); }
.ly-head { display: block; font: 500 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-bottom: .2rem; }
.reel-label { position: relative; align-self: start; justify-self: start; margin-bottom: auto; padding: .35rem .7rem; border-radius: 999px; background: var(--accent); color: #111; font: 500 .62rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.reel-featured .reel-play { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 30px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.reel-credit { color: var(--muted); text-decoration: none; }

/* ═════════════ Book reader (forthcoming books) ═════════════ */
.reader { display: grid; justify-items: center; gap: 1.2rem; margin: 1rem 0 3rem; }
/* Without JS: pages stack as paper sheets */
.bpages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; width: 100%; }
.bpages .bpage { aspect-ratio: 1 / 1.45; --pw: 300px; }
.bpage {
  position: relative; width: 100%; height: 100%; display: grid; overflow: hidden;
  background: #f5eee0; color: #2a211b;
  background-image: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(120, 90, 50, .14));
  font-size: calc(var(--pw) * .042); line-height: 1.6;
}
.bp-inner { align-self: center; padding: calc(var(--pw) * .11) calc(var(--pw) * .1); }
.bp-no { position: absolute; bottom: calc(var(--pw) * .05); left: 0; right: 0; text-align: center; font: italic 400 calc(var(--pw) * .034) var(--serif); color: #8a7a68; }
.bp-small { margin: 0 0 .6em; font: 500 calc(var(--pw) * .026) var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #9a5636; }
.bp-h { margin: 0 0 1em; font: 400 calc(var(--pw) * .068)/1.15 var(--serif); }
.bp-flag { display: inline-block; margin: 0 0 1em; padding: .3em .6em; border: 1px dashed #9a5636; border-radius: 4px; font: 500 calc(var(--pw) * .024) var(--sans); color: #9a5636; }
.bpage-text p { margin: 0 0 1em; font-family: var(--serif); font-size: 1.08em; }
.bpage-center .bp-inner, .bpage-cover .bp-inner, .bpage-back .bp-inner { text-align: center; }
.bp-dedication { margin: 0; font: italic 300 calc(var(--pw) * .085)/1.2 var(--serif); }
.bp-epigraph { margin: 0; font: italic 300 calc(var(--pw) * .06)/1.45 var(--serif); color: #6b3a24; }
.bp-end { margin: 0 0 1.2em; font: italic 300 calc(var(--pw) * .06)/1.4 var(--serif); }
.bp-toc { list-style: none; margin: 0; padding: 0; }
.bp-toc li { display: flex; gap: .7em; padding: .28em 0; border-bottom: 1px dotted rgba(42, 33, 27, .25); font: 400 1.05em/1.3 var(--serif); }
.bp-toc span { min-width: 2.6em; font-style: italic; color: #9a5636; }
.bp-poem-title { margin: 0 0 1.2em; font: italic 400 calc(var(--pw) * .075)/1.15 var(--serif); }
.bp-lines { margin: 0; font: 400 calc(var(--pw) * .05)/1.7 var(--serif); }
.bp-more { margin: 1.6em 0 0; font: italic 400 calc(var(--pw) * .034) var(--serif); color: #8a7a68; text-align: center; }
.bpage-cover, .bpage-back {
  background: #3b1f1c; color: #ead7b2;
  background-image: radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, .1), transparent 60%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 calc(var(--pw) * .035) #3b1f1c, inset 0 0 0 calc(var(--pw) * .04) rgba(234, 215, 178, .45);
}
.bc-genre { margin: 0 0 1.4em; font: 500 calc(var(--pw) * .028) var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.bc-title { margin: 0; font: italic 400 calc(var(--pw) * .11)/1.05 var(--serif); color: #f3e2bd; }
.bc-sub { margin: .8em 0 0; font: 400 calc(var(--pw) * .042)/1.4 var(--serif); opacity: .85; }
.bc-orn { display: block; margin: 1.4em 0; color: #d6a45e; font-size: calc(var(--pw) * .05); }
.bc-author { margin: 0; font: 500 calc(var(--pw) * .04) var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.bc-handle { margin: .4em 0 0; font: italic 400 calc(var(--pw) * .036) var(--serif); opacity: .7; }
.bpage-back .bc-handle[lang='ur'] { font-family: var(--nastaliq); font-style: normal; font-size: calc(var(--pw) * .07); opacity: .9; margin-bottom: 1em; }

/* The book */
.fb {
  --pw: min(420px, calc((100vw - 2 * var(--gutter) - 24px) / 2));
  position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) * 1.45);
  perspective: 2600px; transition: transform .9s var(--ease); margin-top: .5rem; touch-action: pan-y;
}
.fb::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 30px; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%); z-index: -1; }
.fb.at-start { transform: translateX(-25%); }
.fb.at-end { transform: translateX(25%); }
.fb-single { --pw: min(420px, calc(100vw - 2 * var(--gutter))); width: var(--pw); overflow: hidden; }
.fb-single.at-start, .fb-single.at-end { transform: none; }
.leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.45, .05, .25, 1); cursor: pointer; }
.fb-single .leaf { left: 0; width: 100%; }
.leaf.flipped { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #f5eee0; }
.face.back { transform: rotateY(180deg); }
.face .bpage { --pw: inherit; }
.face.front::after, .face.back::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.face.front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .04) 6%, transparent 14%); }
.face.back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .04) 6%, transparent 14%); }
.fb-single .face.front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 8%); }
.leaf:first-child .face.front { border-radius: 2px 6px 6px 2px; }
.reader-bar { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.reader-bar button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: none; cursor: pointer; font-size: 1.1rem; transition: border-color .3s, color .3s; }
.reader-bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reader-bar button:disabled { opacity: .3; cursor: default; }
.rb-status { min-width: 13rem; text-align: center; font: 500 .74rem var(--sans); letter-spacing: .08em; color: var(--muted); }
.is-reader .ms-page { max-width: 1000px; }
.is-reader .ms-head { text-align: center; }
.is-reader .crumbs ol { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .leaf { transition: none; } }

/* ═════════════ Background music toggle ═════════════ */
.music-btn {
  position: fixed; z-index: 70; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem .55rem .75rem;
  border-radius: 999px; border: 1px solid var(--rule); cursor: pointer;
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .3s, border-color .3s;
}
.music-btn:hover, .music-btn.is-playing { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.mb-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.mb-bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.music-btn.is-playing .mb-bars i { animation: mb 1.6s ease-in-out infinite; }
.music-btn.is-playing .mb-bars i:nth-child(2) { animation-delay: -.4s; }
.music-btn.is-playing .mb-bars i:nth-child(3) { animation-delay: -.9s; }
.music-btn.is-playing .mb-bars i:nth-child(4) { animation-delay: -1.2s; }
@keyframes mb { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.music-btn.is-waiting { color: var(--accent); }
.music-hint {
  position: fixed; z-index: 70; left: 18px; bottom: 66px; margin: 0; padding: .6rem .9rem; border-radius: 10px;
  background: var(--fg); color: var(--bg); font: italic 400 1rem var(--serif);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .6s, transform .6s var(--ease);
}
.music-hint.is-on { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .music-btn { left: auto; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); padding: .6rem; }
  .mb-label { display: none; }
  .music-hint { left: auto; right: 14px; bottom: calc(140px + env(safe-area-inset-bottom)); }
}
body.menu-open .music-btn, body.is-reading .music-btn { opacity: .25; }
.bpages[hidden] { display: none; }
.reel a.reel-play { text-decoration: none; color: #f3eeea; }

/* Songs · Films · Reels tabs */
.media-tabs { display: inline-flex; gap: .3rem; padding: .35rem; margin-top: 1.8rem; border: 1px solid var(--rule); border-radius: 999px; scroll-margin-top: 90px; }
.media-tabs a { padding: .7rem 1.4rem; border-radius: 999px; text-decoration: none; font: 500 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: background .3s, color .3s; }
.media-tabs a sup { margin-left: .3rem; font-size: .62rem; opacity: .7; }
.media-tabs a:hover { color: var(--fg); }
.media-tabs a[aria-selected='true'] { background: var(--accent); color: #111; }
.reels-sec[role='tabpanel'] { margin-top: 3.5rem; }
@media (max-width: 480px) { .media-tabs a { padding: .6rem .95rem; font-size: .72rem; } }
.desk { margin-top: 3rem; scroll-margin-top: 90px; }
.catalogue { margin-top: 6rem; }
.catalogue::before { content: 'Anthologies'; display: block; margin-bottom: 1.6rem; font: 400 clamp(1.6rem, 3.4vw, 2.4rem)/1.15 var(--serif); }
.nav-home { display: inline-flex; align-items: center; gap: .35rem; padding-right: clamp(.9rem, 1.6vw, 1.6rem) !important; margin-right: calc(clamp(.9rem, 1.6vw, 1.6rem) * -.4); border-right: 1px solid var(--rule); }
.nav-home svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: -2px; }
.nav-home::after { right: clamp(.9rem, 1.6vw, 1.6rem) !important; }
@media (max-width: 1240px) { .top-nav { gap: .95rem; } .top-nav a { letter-spacing: .1em; } }

/* Featured own book on the Books page */
.feature-book { max-width: 1240px; margin: 3rem auto 0; display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; scroll-margin-top: 90px; }
.fbk-cover {
  aspect-ratio: 1 / 1.45; display: grid; align-content: center; justify-items: center; gap: .6rem; padding: 2rem; text-align: center; text-decoration: none;
  background: #3b1f1c; color: #ead7b2; border-radius: 3px 8px 8px 3px;
  background-image: radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, .12), transparent 60%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 5px);
  box-shadow: inset 10px 0 18px -10px rgba(0, 0, 0, .7), inset 0 0 0 12px #3b1f1c, inset 0 0 0 13px rgba(234, 215, 178, .45), 0 40px 70px -35px rgba(0, 0, 0, .95);
  transform: perspective(900px) rotateY(-14deg); transition: transform .9s var(--ease);
  --pw: 340px;
}
.fbk-cover:hover { transform: perspective(900px) rotateY(-4deg) translateY(-6px); color: #ead7b2; }
.fbk-title { font: italic 400 clamp(2rem, 3.6vw, 2.8rem)/1.05 var(--serif); color: #f3e2bd; }
.fbk-h { margin: 0 0 .6rem; font: 300 clamp(2.4rem, 5.4vw, 4.4rem)/1.02 var(--serif); }
.fbk-ded { margin: 0 0 1.2rem; font: italic 400 1.2rem var(--serif); color: var(--accent); }
.fbk-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
@media (max-width: 760px) { .feature-book { grid-template-columns: 1fr; } .fbk-cover { max-width: 240px; } }
.bpage-poem .bp-lines { font-size: max(13px, calc(var(--pw) * .039)); line-height: 1.62; }
.bpage-poem .bp-poem-title { font-size: calc(var(--pw) * .064); margin-bottom: .9em; }
.bp-poem-title a, .bp-toc a { color: inherit; text-decoration: none; }
.bp-poem-title a:hover, .bp-toc a:hover { color: #9a5636; }
.bp-inner { max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.book-poem-list { margin: 3rem auto 0; max-width: 860px; }
.book-poem-list ol { columns: 3 200px; column-gap: 2rem; margin: 0; padding-left: 1.4rem; }
.book-poem-list li { break-inside: avoid; padding: .3rem 0; font-size: 1.15rem; }
.book-poem-list a { text-decoration: none; }

/* Anthologies: covers to look at */
.acovers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr)); gap: 2.4rem 1.8rem; }
.acover { perspective: 900px; }
.acover img, .ac-face { width: 100%; aspect-ratio: 1 / 1.45; border-radius: 2px 6px 6px 2px; box-shadow: inset 8px 0 14px -8px rgba(0, 0, 0, .65), 0 26px 40px -24px rgba(0, 0, 0, .9); }
.acover img { object-fit: cover; }
.ac-face {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.3rem 1rem 1.1rem;
  background: radial-gradient(110% 70% at 75% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(165deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  color: #f1e5cf; transform: rotateY(-8deg); transition: transform .8s var(--ease);
}
.acover:hover .ac-face { transform: rotateY(0) translateY(-4px); }
.ac-kind { font: 500 .58rem var(--sans); letter-spacing: .26em; text-transform: uppercase; opacity: .75; }
.ac-title { margin-top: .9rem; font: italic 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.1 var(--serif); }
.ac-sub { font: 400 .85rem/1.3 var(--serif); opacity: .85; }
.ac-native { font-size: .95rem; opacity: .85; }
.ac-orn { margin: auto 0 .4rem; color: #e2b977; opacity: .8; }
.ac-with { margin-bottom: auto; font: italic 400 .8rem/1.3 var(--serif); opacity: .85; }
.ac-with b { font: 500 .68rem var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal; }
.ac-pub { padding-top: .5rem; border-top: 1px solid rgba(241, 229, 207, .3); width: 100%; font: 500 .58rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }

/* ═════════════ Small-screen safety (folded phones, 280px and up) ═════════════ */
.desk-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.reader { width: 100%; }
.reader-bar { max-width: 100%; }
.rb-status { min-width: 0; flex: 1; }
.songs > *, .films > *, .reel-grid > * { min-width: 0; }
.player { grid-template-columns: auto minmax(0, 1fr); }
.pl-main { min-width: 0; }
.pl-title, .pl-credit { overflow-wrap: anywhere; }
.letter-form .sr-only { position: absolute; width: 1px !important; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 360px) {
  .player { gap: .9rem; padding: 1.1rem; }
  .pl-btn { width: 52px; height: 52px; }
  .rb-status { font-size: .66rem; letter-spacing: .02em; }
  .reader-bar { gap: .5rem; }
  .reader-bar button { width: 40px; height: 40px; }
  .media-tabs a { padding: .55rem .7rem; letter-spacing: .04em; }
  .ptabs a { padding: .5rem .7rem; }
  .letter-form { font-size: 1.1rem; }
  .letter-form input { width: 100%; }
}

/* Big screens: scale the whole design up so it never looks tiny */
@media (min-width: 1800px) { html { font-size: 112.5%; } .site-head { padding-top: 22px; } }
@media (min-width: 2300px) { html { font-size: 131.25%; } }
@media (min-width: 3200px) { html { font-size: 162.5%; } }
@media (min-width: 1800px) {
  .about-hero, .lang-hero, .lang-list, .lang-block, .books-hero, .catalogue, .desk, .feature-book, .coll-hero, .coll-results, .reels-hero, .reels-sec, .contact, .acovers { max-width: 78rem; }
  .poem, .letter, .facts, .self-ghazal, .next-links, .journey-hero, .thread, .ms-page { max-width: 64rem; }
}

/* Short screens (phones held sideways, folds opened flat): let the home page scroll, keep bars slim */
@media (max-height: 560px) {
  .home { min-height: auto; padding-top: 80px; }
  .home-title { font-size: clamp(3rem, 9vw, 6rem); }
  .home-line { min-height: 0; margin-bottom: 2rem; }
  .tabbar { bottom: 6px; padding: 4px; }
  .tabbar a, .tabbar button { padding: 5px 0 4px; gap: 1px; }
  .tabbar span { display: none; }
  body { padding-bottom: 64px; }
  .music-btn { bottom: 70px; }
  .poem-tools { top: 58px; }
  .site-head { padding-top: 12px; padding-bottom: 12px; }
}
/* The one-time music hint stays small on narrow screens */
.music-hint { max-width: min(16rem, calc(100vw - 90px)); }
@media (max-width: 360px) { .music-hint { font-size: .85rem; padding: .45rem .7rem; } }
/* Desktop: the music button lives bottom-right so it never covers the home page links */
@media (min-width: 900px) {
  .music-btn { left: auto; right: 18px; }
  .music-hint { left: auto; right: 18px; }
  .is-home .home-doors { padding-right: 130px; }
}