@font-face{font-family:"Spectral";src:url(fonts/spectral-light.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(fonts/spectral-semibold.woff) format("woff");font-weight:600;font-display:swap}

:root{
  --silt:#E2E4DC;      /* river-silt paper */
  --silt-2:#D4D8CD;    /* deeper silt, for frames */
  --ink:#1B2532;       /* monsoon-night indigo */
  --ink-soft:#4A5560;  /* secondary text on silt (AA) */
  --water:#2F6B63;     /* water hyacinth, links */
  --paddy:#B48A2E;     /* ripe paddy, the river line only */
  --on-ink:#E2E4DC;
  --on-ink-soft:#A9B2AE;
  --serif:"Spectral",Georgia,serif;
  --bn:"Tiro Bangla","Noto Serif Bengali",serif;
  --measure:34rem;
  --gutter:max(clamp(1rem,4vw,3rem),calc((100vw - 1400px) / 2));
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--silt);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.65;font-weight:400;overflow-x:hidden}
.bn{font-family:var(--bn);font-weight:400}
a{color:var(--water);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--paddy);outline-offset:3px}
img{max-width:100%;display:block}

/* the river: one line that runs through the whole page */
#river{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0}
#river path{fill:none;stroke:var(--paddy);stroke-width:1.6;stroke-linecap:round}
main,header,footer{position:relative;z-index:1}

/* nav */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.25rem var(--gutter)}
.top .name{font-size:1.05rem;color:var(--ink);text-decoration:none}
.top .name .bn{margin-left:.4rem;color:var(--ink-soft)}
.top nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none;font-size:.98rem}
.top nav a:hover{text-decoration:underline}

/* hero */
.hero{padding:4.5rem var(--gutter) 6rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);column-gap:3rem;row-gap:2.5rem;align-items:start}
.hero .word{grid-column:1/-1;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(5.5rem,23vw,22rem);line-height:.85;letter-spacing:-.035em;margin-left:-.06em;color:var(--ink);user-select:none}
.hero .gloss{font-style:italic;color:var(--ink-soft);align-self:end}
.hero h1{font-weight:300;font-size:clamp(2rem,3.4vw,3rem);line-height:1.1;margin-bottom:1rem}
.hero p{max-width:26rem;color:var(--ink)}
.hero .now{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--ink);max-width:26rem;font-size:.98rem}

/* shared section rhythm */
.sec{padding:6rem var(--gutter)}
.sec h2{font-weight:300;font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin-bottom:.6rem}
.sec h2 .bn{font-size:.62em;color:var(--ink-soft);margin-left:.6rem}
.sec .lede{max-width:var(--measure);color:var(--ink-soft);margin-bottom:3.5rem}

/* films: entries sit on alternate banks of the river */
.film{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,var(--measure));gap:2rem;align-items:start;margin-bottom:5rem}
.film:nth-of-type(even){margin-left:auto;grid-template-columns:minmax(0,var(--measure)) minmax(0,15rem)}
.film:nth-of-type(even) .frame{order:2}
.frame{aspect-ratio:2/3;background:var(--silt-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}
.frame .bn{font-size:5.5rem;color:var(--ink)}
.film h3{font-weight:400;font-size:1.75rem;line-height:1.15}
.film h3 .bn{display:block;font-size:1.1rem;color:var(--ink-soft);margin-top:.25rem}
.film .facts{color:var(--ink-soft);font-size:.95rem;margin:.6rem 0 1rem}
.film p+p{margin-top:.8rem}
.lost{max-width:var(--measure);margin-left:auto;color:var(--ink-soft);border-left:1px solid var(--ink-soft);padding-left:1.25rem}
.lost h3{font-weight:400;font-size:1.2rem;color:var(--ink);margin-bottom:.4rem}
.lost s{text-decoration-thickness:1px}

/* the poem: dark band, Bengali and English face each other */
.poem{background:var(--ink);color:var(--on-ink);padding:7rem var(--gutter)}
.poem .pair{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:62rem;margin:0 auto;align-items:end}
.poem .bn{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.45}
.poem .en{font-style:italic;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.45;color:var(--on-ink)}
.poem .by{grid-column:1/-1;color:var(--on-ink-soft);font-size:.95rem}
.poem a{color:var(--on-ink)}

/* songs */
.songs{columns:2 18rem;column-gap:3rem;max-width:56rem;list-style:none}
.songs li{break-inside:avoid;padding:.9rem 0;border-bottom:1px solid var(--silt-2)}
.songs .bn{font-size:1.35rem;display:block;line-height:1.3}
.songs .t{display:block;color:var(--ink-soft);font-size:.95rem}
.songs .award{color:var(--water)}

/* screenplays: an archive of films not yet made */
.dev{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:3rem;margin-bottom:4rem;align-items:center}
.dev img{width:100%;height:auto}
.dev h3{font-weight:400;font-size:2rem;line-height:1.1}
.dev h3 .bn{display:block;font-size:1.3rem;color:var(--ink-soft);margin-top:.3rem}
.dev p{max-width:var(--measure);margin-top:1rem}
.index{list-style:none;columns:3 15rem;column-gap:2.5rem}
.index li{break-inside:avoid;padding:.55rem 0;border-top:1px solid var(--silt-2);line-height:1.35}
.index .bn{display:block;font-size:1.1rem}
.index .t{color:var(--ink-soft);font-size:.92rem;font-style:italic}

/* recognition: a true timeline, so years lead */
.years{list-style:none;max-width:44rem}
.years li{display:grid;grid-template-columns:4.5rem 1fr;gap:1.25rem;padding:.8rem 0;border-top:1px solid var(--silt-2)}
.years .y{font-variant-numeric:oldstyle-nums;color:var(--water);font-size:1.15rem}

/* about */
.about{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,var(--measure));gap:3rem;align-items:start}
.about .portrait{aspect-ratio:4/5;background:var(--silt-2);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:.9rem;text-align:center;padding:1rem}
.about p+p{margin-top:1rem}

/* contact */
.contact{background:var(--ink);color:var(--on-ink);padding:6rem var(--gutter) 3rem}
.contact h2{font-weight:300;font-size:clamp(2rem,4vw,3.2rem);margin-bottom:1.5rem}
.contact a{color:var(--on-ink);font-size:clamp(1.3rem,2.6vw,2rem)}
.contact p{max-width:var(--measure);color:var(--on-ink-soft);margin-top:1rem}
.contact .foot{margin-top:5rem;font-size:.9rem;color:var(--on-ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.contact .foot a{font-size:.9rem;color:var(--on-ink-soft)}

@media (max-width:760px){
  body{font-size:1rem}
  .hero{grid-template-columns:1fr;padding-bottom:4rem}
  .film,.film:nth-of-type(even),.dev,.about{grid-template-columns:1fr;gap:1.25rem}
  .film:nth-of-type(even) .frame{order:0}
  .film .frame,.dev img,.about .portrait{max-width:13rem}
  .poem .pair{grid-template-columns:1fr;gap:1.5rem}
  .sec{padding:4.5rem var(--gutter)}
}

/* keep a right-hand bank free for the river on wide screens */
@media (min-width:761px){
  .sec,.hero{padding-right:calc(var(--gutter) + 9vw)}
}
.frame .bn.long{font-size:3rem}
@media (max-width:760px){.sec,.hero,.top{padding-right:1.75rem}}

.frame .yr{font-size:3.4rem;font-weight:300;font-style:italic;color:var(--ink-soft)}
.frame.dark{background:var(--ink)}
.frame.dark .yr{color:var(--on-ink-soft)}
.dev .frame{aspect-ratio:2/3;width:100%}
.dev .facts,.film .facts{color:var(--ink-soft);font-size:.95rem;margin:.6rem 0 1rem}
.poem blockquote{max-width:46rem;margin:0 auto}
.poem blockquote p{font-style:italic;font-weight:300;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.45}
.poem blockquote p+p{margin-top:1.1rem}
.poem blockquote p:last-child{font-style:normal;font-weight:400}
.poem .by{max-width:46rem;margin:2rem auto 0;color:var(--on-ink-soft)}
.shelf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3.5rem;align-items:start}
.shelf h3{font-weight:400;font-size:1.35rem;margin:0 0 .8rem}
.shelf h3:not(:first-child){margin-top:2.4rem}
.books{list-style:none}
.books li{padding:.55rem 0;border-top:1px solid var(--silt-2);line-height:1.45}
.books b{font-weight:600}
.books i{color:var(--ink-soft)}
.where{margin-top:2rem;color:var(--ink-soft);font-size:.95rem}
.also{list-style:none;margin-top:1.4rem}
.also li{padding:.5rem 0 .5rem 1rem;border-left:1px solid var(--silt-2);color:var(--ink-soft);font-size:.97rem}
.years{max-width:none}
.index li{font-style:italic}
@media (max-width:760px){.shelf{grid-template-columns:1fr;gap:2rem}}

.top nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--paddy);text-decoration-thickness:2px}
.page-intro{padding:4rem var(--gutter) 1rem}
.page-intro h1{font-weight:300;font-style:italic;font-size:clamp(3.5rem,11vw,9rem);line-height:.95;letter-spacing:-.03em;margin-left:-.04em}
.page-intro p{max-width:var(--measure);margin-top:1.5rem;color:var(--ink-soft);font-size:1.1rem}
.teasers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;max-width:60rem}
.teaser{display:block;color:var(--ink);text-decoration:none;padding:1.6rem 0;border-top:1px solid var(--ink)}
.teaser h3{font-weight:400;font-size:1.7rem;line-height:1.15}
.teaser p{color:var(--ink-soft);margin:.5rem 0 .8rem;max-width:26rem}
.teaser .go{color:var(--water);text-decoration:underline;text-underline-offset:.2em}
.teaser:hover h3{text-decoration:underline;text-decoration-color:var(--paddy)}
.essay{max-width:var(--measure);margin-bottom:3.5rem}
.essay h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.essay p+p{margin-top:.8rem}
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
.kit h3{font-weight:400;font-size:1.3rem;margin-bottom:.6rem}
.kit p+p{margin-top:.7rem}
.contact-page{padding:4rem var(--gutter) 7rem}
.contact-page h1{font-weight:300;font-style:italic;font-size:clamp(3.5rem,11vw,9rem);line-height:.95;letter-spacing:-.03em;margin:0 0 2.5rem -.04em}
.contact-page .mail{font-size:clamp(1.4rem,3.4vw,2.6rem)}
.contact-page p{max-width:var(--measure);margin-top:1.5rem;color:var(--ink-soft)}
.contact-page .addr{color:var(--ink)}
.contact.slim{padding:2.5rem var(--gutter)}
.contact.slim .foot{margin-top:0}
@media (max-width:760px){.teasers,.kit{grid-template-columns:1fr}}
.index li.lead{font-style:normal;font-weight:600}
.index li .d{display:block;font-weight:400;font-style:italic;color:var(--ink-soft);font-size:.92rem;margin-top:.2rem}

/* poems in English */
#poems .count{display:flex;align-items:center;gap:1rem;color:var(--ink-soft);font-size:.95rem;margin:-1.5rem 0 3rem;max-width:var(--measure)}
#poems .bar{flex:0 0 7rem;height:2px;background:linear-gradient(90deg,var(--water) calc(var(--done)*100%),var(--silt-2) 0)}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.5rem 3rem;max-width:62rem}
.theme h3{font-weight:400;font-style:italic;font-size:1.45rem;line-height:1.2}
.theme p{color:var(--ink-soft);font-size:.92rem;margin:.35rem 0 .9rem}
.theme ul{list-style:none}
.theme li{border-top:1px solid var(--silt-2);padding:.5rem 0}
.theme a{color:var(--ink);text-decoration:none}
.theme a:hover,.theme a:focus-visible{color:var(--water);text-decoration:underline}
.tnote{max-width:var(--measure);color:var(--ink-soft);font-size:.92rem;margin-top:3rem}
.poem-page{padding:4rem var(--gutter) 6rem}
.poem-page .crumb{font-size:.9rem;color:var(--ink-soft)}
.poem-page .crumb a{color:var(--ink-soft)}
.poem-page h1{font-weight:300;font-style:italic;font-size:clamp(2.4rem,6.5vw,5.2rem);line-height:1;letter-spacing:-.02em;max-width:18ch;margin:1rem 0 3rem}
.verse{max-width:42rem;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.7}
.verse p+p{margin-top:1.3em}
.verse h2{font-size:1.1rem;font-weight:600;margin:2.2em 0 .6em}
.verse h2:first-child{margin-top:0}
.credit{margin-top:2.5rem;color:var(--ink-soft);font-size:.92rem}
.glossary{max-width:36rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--silt-2);font-size:.92rem}
.glossary dt{font-style:italic;margin-top:.7rem}
.glossary dd{color:var(--ink-soft)}
.poem-nav{display:flex;justify-content:space-between;gap:2rem;max-width:44rem;margin-top:4rem}
.poem-nav a{color:var(--ink);text-decoration:none;font-style:italic;font-size:1.15rem}
.poem-nav a[rel=next],.poem-nav a:last-child{text-align:right}
.poem-nav a span{display:block;font-style:normal;font-size:.85rem;color:var(--ink-soft)}
.poem-nav a:hover,.poem-nav a:focus-visible{color:var(--water)}
/* lyrics, listen, reviews */
.empty{color:var(--ink-soft);font-style:italic;max-width:var(--measure)}
.lyric{margin-bottom:4rem}
.lyric h3{font-weight:400;font-style:italic;font-size:1.6rem;margin-bottom:1.2rem}
.lyric h3 .t{display:block;font-style:normal;font-size:.95rem;color:var(--ink-soft)}
.listen{list-style:none;max-width:44rem}
.listen li{border-top:1px solid var(--silt-2);padding:.6rem 0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.listen .t{color:var(--ink-soft);font-style:italic}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:3rem;max-width:62rem}
.review blockquote p{font-style:italic;font-weight:300;font-size:1.3rem;line-height:1.45}
.review figcaption{margin-top:.8rem;color:var(--ink-soft);font-size:.92rem}
.review figcaption .t{display:block}
.verse .l{display:block;padding-left:1.6em;text-indent:-1.6em}

/* finishing pass: dictionary gloss, ledger, colophon */
.hero .gloss{align-self:start;max-width:24rem;font-style:normal;line-height:1.55}
.hero .gloss .hw{font-style:italic;font-size:1.35rem;color:var(--ink)}
.hero .gloss .pos{font-style:italic;color:var(--paddy);margin:0 .35rem}
.ledger{display:grid;gap:0;border-top:1px solid var(--ink)}
.ledger div{display:flex;align-items:baseline;gap:.9rem;padding:.55rem 0;border-bottom:1px solid var(--silt-2)}
.ledger dt{font-style:italic;font-weight:300;font-size:2.2rem;line-height:1;min-width:3.4rem;font-variant-numeric:oldstyle-nums;color:var(--water)}
.ledger dd{color:var(--ink-soft);font-size:.95rem}
.more{margin-top:2rem}
.colophon{background:var(--ink);color:var(--on-ink-soft);padding:4rem var(--gutter) 2rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr);gap:2.5rem;font-size:.95rem;position:relative;z-index:1}
.colophon .sig{font-style:italic;font-weight:300;font-size:2rem;line-height:1;color:var(--on-ink);margin-bottom:.6rem}
.colophon a{color:var(--on-ink-soft);text-decoration:none}
.colophon a:hover,.colophon a:focus-visible{color:var(--on-ink);text-decoration:underline}
.colophon .col-b,.colophon .col-c{display:flex;flex-direction:column;gap:.35rem}
.colophon .col-c p{margin-top:.4rem}
.colophon .fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:1.4rem;font-size:.85rem}
@media (max-width:760px){.colophon{grid-template-columns:1fr;gap:1.8rem}}

/* images pass */
.still{margin:0 var(--gutter) 2rem;max-width:30rem}
.still img{width:100%;height:auto;display:block}
.still figcaption,.gallery figcaption,.clips figcaption{font-size:.9rem;color:var(--ink-soft);font-style:italic;margin-top:.6rem;max-width:30rem}
.still.wide{max-width:44rem;margin-bottom:0}
.about .side{display:grid;gap:1.5rem}
.portrait-img{width:100%;height:auto;display:block;filter:grayscale(.35) contrast(1.02)}
.dev > img{align-self:start}
.clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2.5rem;max-width:62rem;align-items:start}
.clips img{width:100%;height:auto;display:block;border:1px solid var(--silt-2)}
.gallery{columns:3 15rem;column-gap:2rem;max-width:66rem}
.gallery figure{break-inside:avoid;margin-bottom:2rem}
.gallery img{width:100%;height:auto;display:block}
.org-logo{display:block;max-width:12rem;height:auto;margin-bottom:1rem}