@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-400.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-400i.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/newsreader-500.woff2") format("woff2"); }
@font-face { font-family: "Tiro Bangla"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/tirobangla-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif Bengali"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/notoserifbengali-400.woff2") format("woff2"); }

/* Layout: a deep indigo band opens the page with the Bengali verse as the one bold moment (a single river line
   draws beneath it); everything below is quiet, set in an offset column with labels in the left margin;
   indigo returns once, at the invitation and footer. */
:root {
  --paper: #F7F6F3; --ink: #1B1F2A; --muted: #5A6070; --rule: #D9DADF;
  --band: #17245A; --on-band: #F2EFE8; --on-band-muted: #AEB8D8; --portrait: #28397A;
  --accent: #1F3A6E; --accent-hover: #12254A;
  --serif: "Newsreader", "Noto Serif", Georgia, serif;
  --bangla: "Tiro Bangla", "Noto Serif Bengali", "Hind Siliguri", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12141A; --ink: #ECE8DF; --muted: #A3A9B8; --rule: #2A2E39;
    --band: #0D1636; --portrait: #1B2A5E; --accent: #9DB4E8; --accent-hover: #C2D2F5; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.7; text-rendering: optimizeLegibility; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.band :focus-visible { outline-color: var(--on-band); }
.wrap { max-width: 72rem; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.band { background: var(--band); color: var(--on-band); }

.skip { position: absolute; left: -999px; top: 0; background: var(--paper); color: var(--ink); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; padding-block: 1.4rem; }
.mono { font-family: var(--bangla); font-size: 1.7rem; line-height: 1; text-decoration: none; }
.top nav { display: flex; gap: 1.8rem; font-size: 1.05rem; }
.top nav a { text-decoration: none; padding-block: 0.25rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.25s ease; }
.top nav a:hover, .top nav a[aria-current="page"] { background-size: 100% 1px; }

/* hero */
/* Below 900px the portrait sits above the name, left-aligned with the text. From 900px it is in a right-hand
   column, its top level with the name and its right edge level with the nav. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 1rem clamp(2.5rem, 5vw, 4rem); }
h1 { margin: 0 0 clamp(1.8rem, 4vw, 3rem); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: 0.01em; line-height: 1.3; }
.hero h1 { line-height: 1.1; }
h1 span { display: block; font-weight: 400; font-style: italic; font-size: 1rem; color: var(--on-band-muted); margin-top: 0.15rem; }
/* Verse: flush left. A wrapped line hangs by 1em so it reads as one line of verse. Lines break between phrases
   (each <i> is a phrase), and only wrap inside a phrase when it alone is wider than the column. */
.verse { font-family: var(--bangla); font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.6; margin: 0; }
.verse span { display: block; padding-left: 1em; text-indent: -1em; }
.verse i { display: inline-block; max-width: 100%; font-style: normal; text-indent: 0; text-wrap: balance; }
.lead { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; max-width: 34rem; font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.55; color: var(--on-band-muted); }
.portrait { margin: 0; justify-self: start; width: min(100%, 13.5rem); }
.hero .portrait { order: -1; }
.sec > .portrait { margin-bottom: 1.2rem; }
/* About page, desktop: the portrait stays in view in the left column while the text scrolls. It sticks inside its grid
   cell, which is as tall as the text column, so it stops at the end of the text, above the indigo band. No ancestor
   may set overflow (it would break sticky), and nothing here animates. */
@media (min-width: 900px) {
  .sec > .portrait { position: sticky; top: 2rem; align-self: start; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); }
  .hero .portrait { order: 0; justify-self: end; width: 20rem; }
}
.portrait div { aspect-ratio: 4 / 5; border-radius: 11rem 11rem 0.4rem 0.4rem; background: linear-gradient(165deg, var(--portrait), color-mix(in srgb, var(--portrait) 60%, var(--band))); display: grid; place-items: center; overflow: hidden; }
.portrait div b { font-family: var(--bangla); font-weight: 400; font-size: 7rem; line-height: 1; opacity: 0.18; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.portrait figcaption { margin-top: 0.7rem; font-size: 0.9rem; font-style: italic; color: var(--on-band-muted); }
.river { display: block; width: 100%; height: 3.2rem; overflow: visible; }
/* A 1px line across the full container, fully visible at rest. It is revealed left to right once on load. */
.river path { fill: none; stroke: var(--on-band-muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) { .river { animation: draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) both; } }
@keyframes draw { from { clip-path: inset(-1rem 100% -1rem 0); } to { clip-path: inset(-1rem 0 -1rem 0); } }

/* inner-page header */
.pagehead h1 { margin: 0; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.2; }

/* body column: labels in the margin */
.sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(1rem, 5vw, 5rem); padding-block: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.sec:first-of-type { border-top: 0; }
.sec h2, .label { margin: 0; font-weight: 500; font-size: 1.05rem; line-height: 1.7; color: var(--muted); }
.col { max-width: 38rem; }
.col p { margin: 0 0 1.2rem; }
.col p:last-child { margin-bottom: 0; }
.col .big { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.4; }
.col .intro { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.55; }
/* quiet sub-headings in the body typeface: no caps, no numbers */
.col .subhead { margin: 2.2rem 0 0.4rem; font-weight: 500; font-size: 1.1rem; line-height: 1.5; color: var(--muted); }
.col > .subhead:first-child, .col > p:first-child + .subhead { margin-top: 0; }
.col > p:first-child + .subhead { margin-top: 2.2rem; }
.plainlist { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.plainlist li { padding-block: 0.7rem; border-bottom: 1px solid var(--rule); }
.plainlist li:first-child { padding-top: 0; }
.part b { font-weight: 500; }
.col .proof { color: var(--muted); font-size: 1rem; margin-top: 1.4rem; }
main a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
main a:hover { color: var(--accent-hover); }
.beliefs { list-style: none; margin: 1.8rem 0; padding: 0; border-block: 1px solid var(--rule); }
.beliefs li { padding-block: 0.95rem; font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.4; font-weight: 400; }
.beliefs li + li { border-top: 1px solid var(--rule); }
.beliefs li:last-child { color: var(--accent); }
.stories { list-style: none; margin: 0; padding: 0; max-width: 38rem; }
.stories li { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.05rem; border-bottom: 1px solid var(--rule); }
.stories li:first-child { padding-top: 0; }
.stories em { font-size: 1.2rem; display: block; line-height: 1.4; }
.stories small { display: block; color: var(--muted); font-size: 1rem; line-height: 1.5; margin-top: 0.15rem; }
.stories .tag { color: var(--muted); font-size: 0.95rem; white-space: nowrap; padding-top: 0.2rem; }
.more { margin: 1.2rem 0 0; }

.record { list-style: none; margin: 0; padding: 0; max-width: 38rem; }
.record li { padding-block: 0.9rem; border-bottom: 1px solid var(--rule); }
.record li:first-child { padding-top: 0; }
.record b { font-weight: 500; }
.railrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; margin: 2.2rem 0 0.9rem; }
.railtools { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.2rem 1.2rem; font-size: 0.95rem; }
.rail .endcard em { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
.rail .endcard a:hover em { color: var(--accent-hover); }
.railhead { margin: 0; font-weight: 500; font-size: 1.05rem; color: var(--muted); }
.row-nav button { font: inherit; font-size: 0.95rem; background: none; border: 0; padding: 0.25rem 0.1rem; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
.row-nav button:hover { color: var(--accent-hover); }
.rail { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.8rem; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-right: 2rem; scrollbar-width: thin; }
.rail article { flex: 0 0 min(16rem, 72%); scroll-snap-align: start; }
.rail a { display: block; color: var(--ink); text-decoration: none; }
.rail a:hover { color: var(--ink); }
.rail a:hover em { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.rail .thumb { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rule); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--paper)), color-mix(in srgb, var(--accent) 4%, var(--paper))); }
.rail .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail em { display: block; margin-top: 0.6rem; font-size: 1.05rem; line-height: 1.4; }
.rail small { color: var(--muted); font-size: 0.9rem; }

.todo { color: var(--muted); background: color-mix(in srgb, currentColor 12%, transparent); padding: 0 0.2em; font-size: 0.95em; font-style: normal; }
.band .todo { color: var(--on-band-muted); }

/* invitation band and footer */
.invite { padding-block: clamp(3rem, 7vw, 5.5rem) 2rem; }
.invite .grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(1rem, 5vw, 5rem); }
.invite h2 { margin: 0; font-weight: 500; font-size: 1.05rem; color: var(--on-band-muted); line-height: 1.7; }
.invite p { margin: 0; max-width: 34rem; }
.invite .big { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.4; max-width: 30rem; }
.mail { display: inline-block; margin-top: 1.8rem; font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-style: italic; color: var(--on-band); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; overflow-wrap: anywhere; }
main .mail { margin-top: 0; color: var(--accent); font-size: clamp(1.5rem, 3vw, 2.2rem); font-style: normal; }
.mail.todo { text-decoration: none; }
.contact-line { margin: 1.5rem 0 0; line-height: 1.3; }
.contact { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.contact p { margin: 0 0 1rem; }
.contact label { display: block; font-size: 0.95rem; color: var(--muted); }
.contact input, .contact textarea { width: 100%; font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--rule); padding: 0.5rem 0.6rem; border-radius: 2px; }
.contact button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.hp { position: absolute; left: -9999px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.3rem; border-top: 1px solid color-mix(in srgb, var(--on-band) 22%, transparent); font-size: 0.95rem; color: var(--on-band-muted); }
.invite > .wrap > .foot:first-child { margin-top: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--on-band); text-decoration: underline; text-underline-offset: 0.3em; }

/* Invite page: an indigo band says what I speak and teach about; the three subjects follow as side-by-side blocks
   (Covers / For / You gain); formats, proof and the process sit quietly below; indigo returns at the invitation. */
.inv-hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.6rem, 3vw, 2.4rem); }
.kicker { margin: 0 0 1.2rem; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-band-muted); }
.inv-hero h1 { margin: 0; font-weight: 500; font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 1.12; letter-spacing: -0.005em; max-width: 17ch; text-wrap: balance; }
.subjects { display: flex; flex-wrap: wrap; gap: 0.4rem 0; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: clamp(1.15rem, 1.9vw, 1.45rem); color: var(--on-band); }
.subjects li + li::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: var(--on-band-muted); vertical-align: middle; margin-inline: 0.9rem; opacity: 0.6; }
.inv-hero .lead { margin: 1.6rem 0 0; max-width: 36rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic { padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1rem, 2.4vw, 2rem) clamp(2rem, 3.5vw, 3rem) 0; min-width: 0; }
.topic + .topic { padding-left: clamp(1rem, 2.4vw, 2rem); border-left: 1px solid var(--rule); }
.topic h2 { margin: 0 0 1.4rem; font-weight: 500; font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.topic dl { margin: 0; }
.topic dt { margin: 1.15rem 0 0.15rem; font-size: 0.95rem; color: var(--muted); }
.topic dd { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.topic .past { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.55; color: var(--muted); }
.topic .past b { display: block; font-weight: 400; font-size: 0.95rem; margin-bottom: 0.2rem; }

.formats { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.formats li { padding-block: 0.85rem; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; }
.formats li:first-child { padding-top: 0; }
.formats li:last-child { border-bottom: 0; padding-bottom: 0; }
.formats b { font-weight: 500; }
/* The reach line under Feature story: set apart with a thin accent rule and full-strength ink, so it reads as the point of the row. */
.formats .reach { display: block; margin-top: 0.9rem; padding-left: 1rem; border-left: 2px solid var(--accent); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
.formats .reach strong { font-weight: 500; }
.formats span { color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; }
.steps { margin: 0; padding: 0; list-style: none; max-width: 40rem; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
.steps li:first-child { padding-top: 0; }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s) "."; color: var(--muted); }
.invite .mail.xl { margin-top: 1.4rem; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.2; }
.invite .sign { margin: 2.2rem 0 0; max-width: 30rem; color: var(--on-band-muted); font-style: italic; }

@media (max-width: 899px) {
  .topics { grid-template-columns: minmax(0, 1fr); }
  .topic, .topic + .topic { padding-left: 0; padding-right: 0; border-left: 0; }
  .topic + .topic { border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .formats li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .subjects { flex-direction: column; gap: 0.1rem; }
  .subjects li + li::before { display: none; }
}

@media (max-width: 760px) {
  .portrait div b { font-size: 5rem; }
  .sec, .invite .grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .top nav { gap: 1.1rem; font-size: 1rem; }
  body { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Print: black on white, URLs after links */
@media print {
  :root { --paper: #fff; --ink: #000; --muted: #000; --rule: #999; --band: #fff; --on-band: #000; --on-band-muted: #000; --accent: #000; --accent-hover: #000; }
  body { font-size: 11pt; }
  .skip, .river, .top nav, .row, .portrait { display: none; }
  .band { border-bottom: 1px solid #999; }
  a[href^="http"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .mono::after { content: none !important; }
  .record li { break-inside: avoid; }
}