/* ============================================================
     SYED MEHEDI HASAN — Physics · Music · Philosophy
     Design system: "The Analytic Plane"
     cool paper / blue-black ink / Prussian blue / brass
     scholarly serif + monospace labels
     ============================================================ */
  :root {
    --paper:#f1f3f4; --panel:#f8f9f9; --ink:#15202b; --ink-soft:#55606e;
    --ink-faint:#8a929d; --rule:#d6dbde; --rule-soft:#e4e8ea;
    --accent:#21456d; --accent-lift:#2c5a8c; --brass:#96702f;
    --shadow:0 1px 2px rgba(20,30,45,.05), 0 10px 34px rgba(20,30,45,.06);
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"URW Palladio L","Book Antiqua",Georgia,"Times New Roman",serif;
    --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono","Roboto Mono",monospace;
    --s0:1.0625rem; --s1:1.24rem; --s2:1.5rem; --s3:1.92rem; --s4:2.55rem;
    --hero:clamp(2rem,5.6vw,3.9rem);
    --measure:63ch; --edge:clamp(1.25rem,5vw,4rem); --maxw:70rem;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper:#0d1117; --panel:#141a22; --ink:#e8ebef; --ink-soft:#9aa3af;
      --ink-faint:#6b7480; --rule:#242c37; --rule-soft:#1b222b;
      --accent:#83a6dc; --accent-lift:#a2bde8; --brass:#cda85c;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 40px rgba(0,0,0,.34);
    }
  }
  :root[data-theme="light"] {
    --paper:#f1f3f4; --panel:#f8f9f9; --ink:#15202b; --ink-soft:#55606e;
    --ink-faint:#8a929d; --rule:#d6dbde; --rule-soft:#e4e8ea;
    --accent:#21456d; --accent-lift:#2c5a8c; --brass:#96702f;
    --shadow:0 1px 2px rgba(20,30,45,.05), 0 10px 34px rgba(20,30,45,.06);
  }
  :root[data-theme="dark"] {
    --paper:#0d1117; --panel:#141a22; --ink:#e8ebef; --ink-soft:#9aa3af;
    --ink-faint:#6b7480; --rule:#242c37; --rule-soft:#1b222b;
    --accent:#83a6dc; --accent-lift:#a2bde8; --brass:#cda85c;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 40px rgba(0,0,0,.34);
  }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
  body {
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--serif); font-size:var(--s0); line-height:1.66;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    transition:background .4s ease, color .4s ease;
  }
  body::before {
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:linear-gradient(var(--rule-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(120% 90% at 80% 4%, #000 0%, transparent 60%);
            mask-image:radial-gradient(120% 90% at 80% 4%, #000 0%, transparent 60%);
    opacity:.6;
  }
  .wrap { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }

  h1,h2,h3 { font-weight:600; line-height:1.13; text-wrap:balance; margin:0; }
  p { margin:0 0 1.05em; max-width:var(--measure); }
  a { color:var(--accent); text-decoration:none; }
  .eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); display:inline-flex; align-items:center; gap:.7em; }
  .eyebrow::before { content:""; width:1.7rem; height:1px; background:var(--brass); display:inline-block; }
  .prose a, .lnk { color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition:color .2s, border-color .2s; }
  .prose a:hover, .lnk:hover { color:var(--brass); border-color:var(--brass); }
  a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

  /* top bar */
  .topbar { position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.1) blur(8px); background:color-mix(in srgb, var(--paper) 82%, transparent); border-bottom:1px solid var(--rule); }
  .topbar__in { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:54px; }
  .brandmark { font-family:var(--mono); font-size:.82rem; color:var(--ink); white-space:nowrap; }
  .brandmark b { color:var(--accent); font-weight:600; }
  .nav { display:flex; gap:1.35rem; align-items:center; }
  .nav-hide { display:none; }
  .nav a { font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:.2rem 0; border-bottom:1.5px solid transparent; transition:color .18s, border-color .18s; }
  .nav a:hover, .nav a.active { color:var(--ink); border-color:var(--brass); }
  .ttoggle { font-family:var(--mono); font-size:.95rem; line-height:1; background:transparent; color:var(--ink-soft); border:1px solid var(--rule); border-radius:999px; width:34px; height:34px; cursor:pointer; display:inline-grid; place-items:center; transition:color .2s, border-color .2s, transform .2s; }
  .ttoggle:hover { color:var(--ink); border-color:var(--accent); transform:rotate(-12deg); }
  @media (min-width:760px){ .nav-hide{ display:flex; } }

  /* hero */
  .hero { padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem); }
  .hero__grid { display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:center; }
  @media (min-width:900px){ .hero__grid{ grid-template-columns:1.15fr .85fr; } }
  .hero h1 { font-size:var(--hero); letter-spacing:-.015em; margin:.5rem 0 0; white-space:nowrap; }
  .hero .lede { font-size:clamp(1.15rem,2.3vw,1.42rem); line-height:1.5; max-width:36ch; margin:1.4rem 0 0; }
  .hero .lede em { font-style:italic; color:var(--accent); }
  .coords { list-style:none; margin:1.9rem 0 0; padding:0; display:grid; gap:.55rem; }
  .coords li { font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); display:flex; gap:.8rem; }
  .coords li span:first-child { color:var(--ink-faint); min-width:5.4rem; }
  .heroline { display:flex; flex-wrap:wrap; gap:.35rem 1.15rem; margin-top:1.5rem; }
  .heroline a { font-family:var(--mono); font-size:.78rem; color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
  .heroline a:hover { color:var(--brass); border-color:var(--brass); }
  .social { display:flex; gap:1.05rem; align-items:center; margin-top:1.1rem; }
  .social a { display:inline-flex; color:var(--ink-soft); transition:color .18s ease, transform .18s ease; }
  .social a:hover { color:var(--accent); transform:translateY(-1px); }
  .social svg { width:21px; height:21px; display:block; }
  .hero__aside { display:grid; gap:1.1rem; justify-items:center; }
  .plane { position:relative; width:100%; max-width:340px; aspect-ratio:21/18; background:var(--panel); border:1px solid var(--rule); border-radius:3px; box-shadow:var(--shadow); overflow:hidden; }
  .plane svg { width:100%; height:100%; display:block; }
  .plane .axis { stroke:var(--ink-faint); stroke-width:1; opacity:.5; }
  .plane .poles circle { fill:none; stroke:var(--ink-soft); stroke-width:1.4; }
  .plane .poles-left circle { stroke:var(--brass); }
  .plane .mbpath { stroke:var(--accent); stroke-width:2; fill:none; stroke-linecap:round; }
  .plane .arrow { fill:var(--accent); }
  .plane .lbl { fill:var(--ink-faint); font-family:var(--mono); font-size:11px; }
  .plane .cap { position:absolute; left:10px; bottom:8px; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
  @media (prefers-reduced-motion: no-preference){
    .mbpath { stroke-dasharray:300; stroke-dashoffset:300; }
    body.is-ready .mbpath { animation:draw 1.9s .5s cubic-bezier(.6,.05,.2,1) forwards; }
    .plane .poles circle { opacity:0; }
    body.is-ready .plane .poles circle { animation:pop .5s calc(1.3s + var(--d,0s)) forwards; }
    @keyframes draw { to { stroke-dashoffset:0; } }
    @keyframes pop { to { opacity:1; } }
  }
  .portrait { width:100%; max-width:340px; aspect-ratio:5/6; border:1px solid var(--rule); border-radius:3px; background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel)); display:grid; place-items:center; text-align:center; box-shadow:var(--shadow); overflow:hidden; }
  .portrait img { width:100%; height:100%; object-fit:cover; }
  .portrait .mgram { font-family:var(--serif); font-size:2.4rem; letter-spacing:.06em; color:var(--accent); margin-bottom:.3rem; }
  .portrait .mono { color:var(--ink-faint); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }

  /* sections */
  section { padding:clamp(3rem,7vw,5.5rem) 0; border-top:1px solid var(--rule); }
  .sec-head { margin-bottom:2.2rem; }
  .sec-head h2 { font-size:var(--s4); letter-spacing:-.01em; margin-top:.7rem; }
  .sec-head .sub { color:var(--ink-soft); max-width:56ch; margin-top:.8rem; }
  .subhead { font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:2.6rem 0 1.1rem; padding-bottom:.5rem; border-bottom:1px solid var(--rule); }
  .prose { max-width:var(--measure); }
  .lead { font-size:var(--s1); }

  /* Feynman diagram cards */
  .diagrams { display:grid; gap:1px; margin-top:1.4rem; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
  @media (min-width:640px){ .diagrams{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:900px){ .diagrams.three{ grid-template-columns:repeat(3,1fr); } }
  .dcard { background:var(--panel); padding:1.4rem 1.4rem 1.5rem; }
  .fdiag { width:100%; height:auto; display:block; margin-bottom:.9rem; }
  .fdiag .fl,.fdiag .pl { fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
  .fdiag .pl { stroke-width:2.4; }
  .fdiag .ph { fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; }
  .fdiag .gl { fill:none; stroke:var(--brass); stroke-width:1.7; }
  .fdiag .loop { fill:color-mix(in srgb, var(--accent) 8%, var(--panel)); stroke:var(--accent); stroke-width:1.5; }
  .fdiag .blob { fill:color-mix(in srgb, var(--brass) 15%, var(--panel)); stroke:var(--ink-soft); stroke-width:1.2; }
  .fdiag .vtx { fill:var(--ink); }
  .fdiag .dl { fill:var(--ink-soft); font-family:var(--mono); font-size:12.5px; font-style:italic; }
  #fh path { fill:var(--ink); }
  .dcard .k { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
  .dcard h3 { font-size:var(--s1); margin:.4rem 0 .45rem; }
  .dcard p { font-size:.94rem; color:var(--ink-soft); margin:0; max-width:none; }

  /* results: real figures + placeholders */
  .results { display:grid; gap:1.5rem; margin-top:1.3rem; }
  .figure { max-width:700px; margin:0; border:1px solid var(--rule); border-radius:4px; background:#ffffff; padding:1rem; box-shadow:var(--shadow); }
  .figure img { width:100%; height:auto; display:block; border-radius:2px; }
  .figure figcaption { font-family:var(--mono); font-size:.73rem; line-height:1.55; color:var(--ink-soft); margin-top:.8rem; }
  .figure figcaption b { color:var(--ink); font-weight:600; }
  .plot { max-width:340px; border:1px dashed var(--rule); border-radius:4px; background:var(--panel); padding:1.1rem; min-height:150px; display:flex; flex-direction:column; }
  .plot .frame { flex:1; border-radius:3px; background:repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb, var(--accent) 5%, transparent) 13px 26px); border:1px solid var(--rule-soft); display:grid; place-items:center; margin-bottom:.8rem; min-height:90px; }
  .plot .frame span { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding:.5rem; }
  .plot b { font-size:.98rem; font-weight:600; }
  .plot em { font-family:var(--mono); font-style:normal; font-size:.72rem; color:var(--ink-soft); display:block; margin-top:.2rem; }

  /* publications */
  .pubs { display:grid; gap:0; margin-top:1rem; }
  .pub { display:grid; grid-template-columns:4.4rem 1fr; gap:1.1rem; padding:1.25rem 0; border-top:1px solid var(--rule-soft); }
  .pub:first-child { border-top:0; }
  .pub .yr { font-family:var(--mono); font-size:.9rem; color:var(--brass); font-feature-settings:"tnum" 1; padding-top:.12rem; }
  .pub h3 { font-size:var(--s1); font-weight:600; line-height:1.28; }
  .pub .meta { font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.3rem .9rem; align-items:baseline; }
  .pub .venue { color:var(--ink); }
  .pub .with { color:var(--ink-faint); }
  .morelink { margin-top:1.5rem; }

  /* music — composition cards */
  .tracks { display:grid; gap:12px; margin-top:1.3rem; grid-template-columns:1fr; }
  @media (min-width:720px){ .tracks{ grid-template-columns:repeat(2,1fr); } }
  .track { background:var(--panel); border:1px solid var(--rule); border-radius:4px; padding:1.3rem 1.4rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.7rem; }
  .track .top { display:flex; align-items:center; gap:.9rem; }
  .track .disc { width:38px; height:38px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); display:grid; place-items:center; flex:none; }
  .track .disc svg { width:15px; height:15px; }
  .track .cover { width:46px; height:46px; border-radius:4px; object-fit:cover; flex:none; border:1px solid var(--rule); }
  .track h3 { font-size:var(--s1); line-height:1.2; }
  .track .tno { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
  .track p { font-size:.92rem; color:var(--ink-soft); margin:0; max-width:none; }
  .track audio { width:100%; margin-top:.2rem; }
  .track .slot { font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); border-top:1px dashed var(--rule); padding-top:.7rem; }
  .track .slot b { color:var(--accent); font-weight:600; }

  /* philosophy — epigraph + essays */
  .epigraph { max-width:32ch; margin:0 0 2rem; padding-left:1.4rem; border-left:2px solid var(--brass); }
  .epigraph p { font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3.5vw,2.25rem); line-height:1.28; color:var(--ink); text-wrap:balance; margin:0; max-width:none; }
  .epigraph cite { display:block; font-family:var(--mono); font-style:normal; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:1.1rem; }
  .essays { display:grid; gap:0; margin-top:.6rem; }
  .essay { display:grid; grid-template-columns:1fr; gap:.3rem; padding:1.3rem 0; border-top:1px solid var(--rule-soft); }
  .essay:first-child { border-top:0; }
  .essay .date { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
  .essay h3 { font-size:var(--s2); }
  .essay p { color:var(--ink-soft); margin:.3rem 0 0; }
  .essay .slot { font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); margin-top:.4rem; }
  .essay .slot b { color:var(--accent); font-weight:600; }

  /* footer */
  .foot { border-top:1px solid var(--rule); }
  .foot__grid { display:grid; gap:2rem; grid-template-columns:1fr; padding:clamp(3rem,6vw,4.5rem) 0 3rem; }
  @media (min-width:760px){ .foot__grid{ grid-template-columns:1.3fr 1fr; } }
  .foot h2 { font-size:var(--s3); }
  .links { list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.7rem; }
  .links a { font-family:var(--mono); font-size:.84rem; color:var(--accent); display:inline-flex; gap:.8rem; border-bottom:1px solid color-mix(in srgb, var(--accent) 26%, transparent); width:fit-content; }
  .links a:hover { color:var(--brass); border-color:var(--brass); }
  .links .lab { color:var(--ink-faint); min-width:4.5rem; }
  .colophon { font-family:var(--mono); font-size:.7rem; line-height:1.7; color:var(--ink-faint); max-width:36ch; }
  .note { margin-top:2.4rem; padding:.9rem 1.1rem; border:1px dashed var(--rule); border-left:2px solid var(--brass); border-radius:3px; font-family:var(--mono); font-size:.74rem; line-height:1.6; color:var(--ink-soft); background:var(--panel); max-width:var(--measure); }

  @media (prefers-reduced-motion: no-preference){
    .reveal { opacity:0; transform:translateY(14px); }
    body.is-ready .reveal { animation:rise .7s var(--rd,0s) cubic-bezier(.2,.7,.2,1) forwards; }
    @keyframes rise { to { opacity:1; transform:none; } }
  }

  /* --- philosophy: bilingual essays --- */
  :root { --bengali:"Noto Serif Bengali","Noto Sans Bengali","Kohinoor Bangla","Nirmala UI","Shonar Bangla","Bangla MN","Vrinda","SolaimanLipi","Kalpurush",sans-serif; }
  .pintro { max-width:var(--measure); color:var(--ink); }
  .writings { display:grid; gap:0; margin-top:2rem; border-top:1px solid var(--rule); }
  .wr { border-bottom:1px solid var(--rule); }
  .wr > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1rem; padding:1.15rem 0; }
  .wr > summary::-webkit-details-marker { display:none; }
  .wr > summary .s-en { font-family:var(--serif); font-size:var(--s2); font-weight:600; color:var(--ink); }
  .wr > summary .s-bn { font-family:var(--bengali); font-size:1.02rem; color:var(--ink-soft); }
  .wr > summary .s-date { margin-left:auto; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); align-self:center; }
  .wr > summary::after { content:"+"; font-family:var(--mono); color:var(--ink-faint); font-size:1.15rem; line-height:1; align-self:center; padding-left:.3rem; }
  .wr[open] > summary::after { content:"\2013"; color:var(--accent); }
  .wr[open] > summary .s-en, .wr:hover > summary .s-en { color:var(--accent); }
  .ebody { padding:.1rem 0 2rem; }
  .essay-fig { margin:.2rem 0 1.6rem; }
  .essay-fig img { display:block; max-width:min(100%,var(--measure)); max-height:22rem; width:auto; height:auto; border:1px solid var(--rule); border-radius:2px; }
  .langbar { display:inline-flex; gap:2px; border:1px solid var(--rule); border-radius:999px; padding:2px; margin-bottom:1.4rem; background:var(--panel); }
  .lang-btn { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; padding:.34rem .95rem; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; border-radius:999px; transition:background .15s,color .15s; }
  .lang-btn.is-on { background:var(--accent); color:var(--paper); }
  .pane { max-width:var(--measure); }
  .pane[hidden] { display:none; }
  .pane-en p { font-family:var(--serif); margin:0 0 1.05em; }
  .pane .bul { padding-left:1.2em; text-indent:-1.2em; }
  .pane-bn { font-family:var(--bengali); }
  .pane-bn p { line-height:2; font-size:1.05rem; margin:0 0 1.15em; }

  /* ---- arXiv reference links on diagram cards ---- */
  .dcard .refs { margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.35rem .85rem; }
  .reflink { font-family:var(--mono); font-size:.7rem; letter-spacing:.01em; color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition:color .2s, border-color .2s; }
  .reflink:hover { color:var(--brass); border-color:var(--brass); }

  /* ---- CV glimpse ---- */
  .cv-grid { display:grid; gap:2.2rem 3rem; grid-template-columns:1fr; margin-top:.6rem; }
  @media (min-width:760px){ .cv-grid{ grid-template-columns:1fr 1fr; } }
  .cv-col { min-width:0; }
  .edu { padding:1rem 0; border-top:1px solid var(--rule-soft); }
  .edu-deg { font-family:var(--serif); font-size:var(--s1); font-weight:600; line-height:1.2; }
  .edu-inst { font-family:var(--mono); font-size:.77rem; color:var(--ink-soft); margin-top:.3rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
  .edu-note { font-size:.92rem; color:var(--ink-soft); margin-top:.5rem; max-width:none; }
  .edu--phd { border:1px solid var(--rule); border-left:3px solid var(--brass); border-radius:4px; padding:1.15rem 1.25rem; box-shadow:var(--shadow); background:radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel)); }
  .edu--phd + .edu { border-top:0; }
  .edu--phd .edu-deg { color:var(--accent); }
  .edu-tag { font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brass); border:1px solid color-mix(in srgb, var(--brass) 45%, transparent); border-radius:999px; padding:.08rem .55rem; white-space:nowrap; }
  .cvlist { list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.7rem; }
  .cvlist li { font-size:.92rem; color:var(--ink-soft); display:grid; grid-template-columns:3.5rem 1fr; gap:.8rem; max-width:none; align-items:baseline; }
  .cvlist .cvy { font-family:var(--mono); font-size:.78rem; color:var(--brass); font-feature-settings:"tnum" 1; }
  .cvlist li b { color:var(--ink); font-weight:600; }
  .chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem; }
  .chips span { font-family:var(--mono); font-size:.71rem; color:var(--ink-soft); border:1px solid var(--rule); border-radius:4px; padding:.22rem .55rem; background:var(--panel); }
  .cv-foot { font-size:.85rem; color:var(--ink-faint); margin-top:1rem; max-width:none; }

  /* ---- subpage header ---- */
  .pagehead { padding:clamp(2.2rem,6vw,4rem) 0 0; }
  .pagehead .back { font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--ink-soft); display:inline-block; margin-bottom:1.3rem; border-bottom:1px solid transparent; transition:color .18s, border-color .18s; }
  .pagehead .back:hover { color:var(--accent); border-color:var(--accent); }
  .pagehead .eyebrow { display:inline-flex; }
  .pagehead h1 { font-size:clamp(1.9rem,4.6vw,3rem); letter-spacing:-.012em; margin:.85rem 0 0; }
  .pagehead p { color:var(--ink-soft); max-width:62ch; margin-top:1.05rem; }
  .pagehead .pintro { color:var(--ink); }

  /* ---- opening epigraph inside the hero (মলম / Balm) ---- */
  .hero__lead { min-width:0; }
  .hero__grid { align-items:start; }
  .hero__intro { margin-top: clamp(1.5rem,3vw,2.3rem); }
  .poem { display:grid; grid-template-columns:1fr; gap:0 1.5rem; }
  @media (min-width:620px){ .poem { grid-template-columns:1fr 1fr; align-items:start; } }
  .poem .ptitle { margin:0 0 .3rem; font-weight:600; line-height:1.15; }
  .poem .ptitle.bn { font-family:var(--bengali); font-size:1.08rem; color:var(--ink); }
  .poem .ptitle.en { font-family:var(--serif); font-style:italic; font-size:.98rem; color:var(--ink-soft); }
  .poem p { max-width:none; margin:0; padding:.18rem 0; }
  .poem .bn { font-family:var(--bengali); font-size:.9rem; line-height:1.72; color:var(--ink); }
  .poem .en { font-family:var(--serif); font-style:italic; font-size:.86rem; line-height:1.55; color:var(--ink-soft); }
  .poem .bn.refrain, .poem .en.refrain { color:var(--accent); padding-top:.3rem; }

  /* ---- ASHWIN releases (songs hosted on YouTube) ---- */
  .releases { display:grid; gap:12px; margin-top:1.4rem; max-width:46rem; }
  .rel { display:grid; grid-template-columns:1fr; background:var(--panel); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden; }
  @media (min-width:620px){ .rel { grid-template-columns:clamp(150px,24vw,210px) 1fr; } }
  .rel__art { position:relative; display:block; background:var(--rule-soft); }
  .rel__art img { width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
  .rel__art::after { content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--accent) 16%, transparent); opacity:0; transition:opacity .22s ease; }
  .rel__art:hover::after { opacity:1; }
  .rel__play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.92); width:46px; height:46px; border-radius:999px; background:color-mix(in srgb, var(--paper) 90%, transparent); border:1px solid var(--rule); display:grid; place-items:center; opacity:0; transition:opacity .22s ease, transform .22s ease; z-index:1; }
  .rel__art:hover .rel__play { opacity:1; transform:translate(-50%,-50%) scale(1); }
  .rel__play svg { width:15px; height:15px; fill:var(--accent); margin-left:2px; display:block; }
  .rel__body { padding:1.15rem 1.35rem 1.25rem; display:flex; flex-direction:column; justify-content:center; gap:.5rem; align-items:flex-start; min-width:0; }
  .rel__body h3 { font-family:var(--bengali); font-size:var(--s2); line-height:1.45; }
  .rel__rom { font-family:var(--mono); font-size:.73rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); margin-top:-.25rem; }
  .rel__body p { font-size:.92rem; color:var(--ink-soft); margin:0; max-width:none; }
  .rel__watch { font-family:var(--mono); font-size:.76rem; letter-spacing:.03em; color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent); margin-top:.15rem; transition:color .2s, border-color .2s; }
  .rel__watch:hover { color:var(--brass); border-color:var(--brass); }
  .relfoot { font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin:1.3rem 0 0; }
  @media (prefers-reduced-motion: reduce){ .rel__art::after, .rel__play { transition:none; } }

  /* ---- link out to the ASHWIN project site ---- */
  .ashwin-card {
    display:flex; align-items:center; gap:clamp(.9rem,2.4vw,1.5rem);
    margin-top:1.6rem; padding:1rem clamp(1rem,2.5vw,1.4rem);
    border:1px solid var(--rule); border-radius:4px;
    background:var(--panel); box-shadow:var(--shadow);
    max-width:44rem; transition:border-color .22s, transform .22s;
  }
  .ashwin-card:hover { border-color:var(--accent); transform:translateY(-1px); }
  .ashwin-card img { width:clamp(86px,16vw,124px); height:auto; flex:none; opacity:.9; }
  .ashwin-card .t { min-width:0; }
  .ashwin-card b { display:block; font-family:var(--serif); font-size:1.04rem; font-weight:600; color:var(--ink); line-height:1.3; }
  .ashwin-card span.d { display:block; font-family:var(--mono); font-size:.74rem; line-height:1.5; color:var(--ink-soft); margin-top:.3rem; }
  .ashwin-card .go { margin-left:auto; font-family:var(--mono); font-size:1rem; color:var(--accent); flex:none; transition:color .22s, transform .22s; }
  .ashwin-card:hover .go { color:var(--brass); transform:translate(2px,-2px); }
  /* the logotype is black ink; flip it for the dark theme */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ashwin-card img { filter:invert(1); opacity:.82; } }
  :root[data-theme="dark"] .ashwin-card img { filter:invert(1); opacity:.82; }
  :root[data-theme="light"] .ashwin-card img { filter:none; opacity:.9; }

  /* ============================================================
     the phone menu
     Above 760px the nav is the plain row of links it always was. Below it
     those links used to vanish with nothing in their place, leaving a phone
     with no navigation at all; now they live behind one button.
     ============================================================ */

  section[id], footer[id], h3[id], details[id], .subhead[id] { scroll-margin-top:4.6rem; }

  .menubtn {
    display:none; width:2.3rem; height:2.3rem; padding:0; cursor:pointer;
    align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--rule); border-radius:999px;
    color:var(--ink-soft); transition:color .2s, border-color .2s;
  }
  @media (max-width:759.98px) { .menubtn { display:inline-flex; } }
  .menubtn:hover, .menubtn[aria-expanded="true"] { color:var(--ink); border-color:var(--accent); }

  /* three bars drawn in CSS rather than the glyph, which renders at a
     different weight in each face the site loads */
  .menubtn__b { position:relative; display:block; }
  .menubtn__b, .menubtn__b::before, .menubtn__b::after {
    width:1rem; height:1.5px; background:currentColor;
    transition:transform .24s ease, background .18s ease;
  }
  .menubtn__b::before, .menubtn__b::after { content:""; position:absolute; left:0; }
  .menubtn__b::before { top:-.34rem; }
  .menubtn__b::after  { top:.34rem; }
  .menubtn[aria-expanded="true"] .menubtn__b { background:transparent; }
  .menubtn[aria-expanded="true"] .menubtn__b::before { transform:translateY(.34rem) rotate(45deg); }
  .menubtn[aria-expanded="true"] .menubtn__b::after  { transform:translateY(-.34rem) rotate(-45deg); }

  .mnav {
    display:none; flex-direction:column; padding:.1rem var(--edge) .7rem;
    background:var(--panel); border-bottom:1px solid var(--rule);
    /* body::before paints the graph paper at z-index 0, so an in-flow panel
       would have the grid lying over its text */
    position:relative; z-index:19;
  }
  .mnav.is-open { display:flex; }
  @media (min-width:760px) { .mnav, .mnav.is-open { display:none; } }
  .mnav a {
    padding:.78rem .1rem; font-family:var(--mono); font-size:.78rem;
    letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
    border-bottom:1px solid var(--rule-soft); transition:color .18s;
  }
  .mnav a:last-child { border-bottom:0; }
  .mnav a:hover, .mnav a.active { color:var(--ink); }