@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-opsz-italic.woff2) format("woff2")}
@font-face{font-family:"Noto Serif Bengali";font-weight:400;font-display:swap;src:url(/assets/fonts/noto-serif-bengali-400.woff2) format("woff2")}
@font-face{font-family:"Noto Serif Bengali";font-weight:700;font-display:swap;src:url(/assets/fonts/noto-serif-bengali-700.woff2) format("woff2")}

:root{
  --cotton:#EFEEE8; --alta:#A8121D; --zari:#C49A2C; --ink:#221D19; --ink-soft:#5B524A;
  --night:#0F0C17; --lamp:#F4B740; --smoke:#BDB6AA;
  --bg:var(--cotton); --fg:var(--ink); --fg-soft:var(--ink-soft); --accent:var(--alta);
  --border-w:clamp(14px,2.2vw,26px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.18rem/1.68 "Fraunces",Georgia,serif;font-optical-sizing:auto;
  transition:background-color 1.6s ease,color 1.6s ease;overflow-x:hidden}
body.is-night{--bg:var(--night);--fg:#EDE7DC;--fg-soft:var(--smoke);--accent:var(--lamp)}
[lang=bn]{font-family:"Noto Serif Bengali",serif;font-optical-sizing:none}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--zari);outline-offset:3px}

/* The sari border: red paar with two zari threads, down the left edge */
.paar{position:fixed;inset:0 auto 0 0;width:var(--border-w);background:var(--alta);z-index:5;
  box-shadow:inset -3px 0 0 var(--zari),inset -7px 0 0 var(--alta),inset -9px 0 0 var(--zari)}
.page{padding-left:var(--border-w)}

/* Cover */
.cover{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.cover-text{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.4rem,4vw,3.5rem)}
.masthead{font:italic 400 1rem/1.3 "Fraunces",serif;color:var(--fg-soft)}
.masthead b{font-style:normal;font-weight:600;color:var(--fg)}
.title-bn{font-weight:700;font-size:clamp(5rem,15vw,11.5rem);line-height:1;color:var(--alta);margin:0;letter-spacing:-.01em}
.title-en{display:block;font:italic 300 clamp(2rem,4.5vw,3.4rem)/1 "Fraunces",serif;margin:.35em 0 0;font-variation-settings:"opsz" 144}
.standfirst{max-width:26rem;font-size:1.25rem;line-height:1.5;margin:1.6rem 0 0}
.cover-foot{font-size:.95rem;color:var(--fg-soft);margin-top:2rem}
.cover-img{position:relative;margin:0;overflow:hidden;background:#000}
.cover-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Chapters of the day */
.hour{position:relative;padding:clamp(3.5rem,9vw,6rem) clamp(1.2rem,5vw,4rem) 1rem;max-width:48rem}
.hour h2.when{display:block;font:italic 400 clamp(1.25rem,2.6vw,1.6rem)/1.3 "Fraunces",serif;color:var(--accent);margin:0 0 1.4rem;max-width:30ch;letter-spacing:0;font-variant-numeric:oldstyle-nums}
.hour h2{font:600 clamp(2.2rem,6vw,4.2rem)/1.02 "Fraunces",serif;font-variation-settings:"opsz" 144;margin:0 0 1.6rem;max-width:14ch;letter-spacing:-.01em}
.prose{max-width:34rem}
.prose p{margin:0 0 1.05rem}
.gloss{max-width:30rem;margin:2rem 0 0;padding:1rem 0 0;border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent);font-size:1rem;line-height:1.55;color:var(--fg-soft)}
.gloss p{margin:0 0 .5rem}
.gloss [lang=bn]{color:var(--accent);font-size:1.15rem;margin-right:.35rem}
.gloss b{color:var(--fg);font-weight:600}

/* Pictures */
.still{margin:2rem 0;max-width:40rem}
.still img,.still video{display:block;width:100%;height:auto}
.still .cap{padding-left:0}
.epigraph{font:italic 400 clamp(1.4rem,3.4vw,2rem)/1.3 "Fraunces",serif;color:var(--accent);margin:0 0 2.5rem;max-width:26ch}
.bleed{margin:clamp(2.5rem,6vw,4.5rem) 0;position:relative}
.bleed img,.bleed video{display:block;width:100%;height:auto;max-height:88svh;object-fit:cover}
.cap{font:italic 400 .95rem/1.4 "Fraunces",serif;color:var(--fg-soft);padding:.6rem clamp(1.2rem,5vw,4rem) 0}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:end;margin:2.5rem 0}
.pair figure{margin:0}
.pair img{display:block;width:100%;height:auto}
.pair .cap{padding-left:0}
.inset{float:right;width:min(42%,20rem);margin:.4rem 0 1rem 1.6rem}
.inset img{display:block;width:100%;height:auto}
.inset .cap{padding:.4rem 0 0}

/* The turn: Sandhi */
.turn{min-height:70svh;display:flex;align-items:center;padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,4rem)}
.turn p{font:italic 300 clamp(2rem,5.5vw,4.4rem)/1.12 "Fraunces",serif;font-variation-settings:"opsz" 144;max-width:16ch;margin:0;color:var(--fg)}

/* Sound */
.sound{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.8rem,3vw,1.6rem);z-index:6;display:flex;align-items:center;gap:.6rem;
  border:1px solid var(--zari);background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--fg);border-radius:999px;
  padding:.55rem 1rem .55rem .7rem;font:500 1rem/1 "Fraunces",serif;cursor:pointer;backdrop-filter:blur(6px)}
.sound .dot{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--alta);display:grid;place-items:center}
.sound .dot::before{content:"";border-left:.55rem solid #fff;border-top:.35rem solid transparent;border-bottom:.35rem solid transparent;margin-left:.15rem}
.sound[aria-pressed=true] .dot::before{border:0;width:.5rem;height:.6rem;margin:0;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.listen{display:inline-flex;align-items:center;gap:.6rem;margin:.6rem 0 0;border:1px solid var(--accent);background:none;color:var(--fg);
  border-radius:999px;padding:.5rem 1rem;font:italic 400 1rem/1.2 "Fraunces",serif;cursor:pointer}
.listen[aria-pressed=true]{background:var(--accent);color:var(--bg)}

/* Close */
.close{padding:clamp(4rem,10vw,7rem) clamp(1.2rem,5vw,4rem) 3rem}
.close .last{font:italic 300 clamp(1.6rem,4vw,2.6rem)/1.25 "Fraunces",serif;max-width:22ch;margin:0 0 3rem}
.note{max-width:34rem;font-size:1rem;color:var(--fg-soft)}
.credits{max-width:46rem;font-size:.9rem;line-height:1.5;color:var(--fg-soft);margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent)}
.credits h2{font:600 1rem/1.3 "Fraunces",serif;color:var(--fg);margin:0 0 .6rem}
.credits ul{margin:0;padding-left:1.1rem}
.credits li{margin:.25rem 0}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding:1.6rem clamp(1.2rem,5vw,4rem) 5.5rem;font-size:.92rem;color:var(--fg-soft)}
.foot a{color:var(--fg-soft)}

@media (max-width:760px){
  .cover{grid-template-columns:1fr;grid-template-rows:auto 62svh}
  .cover-img{grid-row:2}
  .title-bn{font-size:clamp(4.4rem,26vw,7rem)}
  .inset{float:none;width:70%;margin:1.4rem 0}
  .pair{grid-template-columns:1fr}
  .sound .label{display:none}
  .sound{padding:.5rem}
}
@media (prefers-reduced-motion:reduce){body{transition:none}html{scroll-behavior:auto}}