/* ============================================================================
   সাপ্তাহিক হিসাব — The Weekly Hishab
   A newsprint design system. Hand-written CSS, no build step, no framework.

   The whole look rests on three things a printed weekly actually does:
     1. PAPER, not white. #faf8f4 with near-black ink reads calmer than #fff/#000
        and is what separates a newspaper from a blog.
     2. RULES, not boxes. Sections are divided by hairlines and whitespace.
        There is exactly one card shadow on this site: none.
     3. TWO accents with two jobs. লাল is the editorial layer, সবুজ the
        structural one. Colour is information here, never decoration.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
    /* Paper & ink */
    --paper:        #faf8f4;
    --paper-2:      #f3f0ea;   /* tinted bands */
    /* The nameplate strip is not the news field, so it does not sit on the same
       stock. One step deeper and warmer than --paper-2 - far enough to read as a
       band at a glance, close enough that it is still paper and not a coloured
       header. It stays a TINT rather than a solid brand colour on purpose: the
       green section bar directly beneath it is the site's single field of
       colour, and a second saturated band above it would swallow that bar. */
    /* PAPER AGAIN (2026-09-05, "sobuj ta hobe nah, #f3f0ea ai color ta dao"):
       the client named --paper-2 itself. The green strip (09-02..09-05, first
       a step lighter than the bar, then the bar's exact green) is gone, and
       the green section bar below is once more the site's single field of
       colour. ⚠️ A ground change drags four things with it - the wordmark cut
       (black art on paper, the light cut only in dark mode, via <picture>),
       this ink pair, the chip (green fill on paper, not paper on green) and the
       utility links (সবুজ, readable on cream, invisible on green). Change the
       ground, re-check all four. */
    --mast:         #fff9c7;   /* 09-24 pale yellow the client boxed; #fff380 an hour before */
    /* Type on the masthead: paper ink. Kept as its own pair so the strip can
       be recoloured without touching --ink, as it was three times this week. */
    --mast-ink:     #16150f;
    --mast-ink-2:   #45423a;   /* 9.4:1 on #fff9c7; --ink-3 sat at ~4.4:1 at 13px */
    --mast-rule:    #d4c65e;   /* warm hairline on the yellow; a grey rule read as dirt */
    --mast-when:    #12307a;   /* 09-24 dateline in deep navy (client ask), 11:1 on #fff9c7; #0d1f4f read as black */
    --mast-note:    #bd0f2b;   /* red caption, 6.0:1 on #fff9c7 */
    --ink:          #16150f;
    --ink-2:        #45423a;   /* excerpts, secondary copy */
    --ink-3:        #6f6b60;   /* timestamps, bylines */
    --rule:         #ddd8cd;
    --rule-strong:  #16150f;

    /* লাল-সবুজ. Two accents, and they are not interchangeable:
         RED   marks the EDITORIAL layer - kickers, the section bullet, the live
               section in the nav, the reading-progress bar. It says "this".
         GREEN marks the STRUCTURAL layer - the rules that divide the paper, the
               ranked numerals, footer. It says "here is a boundary".
       Keeping the two jobs apart is what stops a two-colour scheme reading as a
       flag pasted onto a newspaper. */
    --accent:       #c8102e;   /* লাল */
    --accent-ink:   #9d0c23;   /* red, pressed/hover */
    --accent-2:     #006a4e;   /* সবুজ — bottle green */
    --accent-2-ink: #00553e;

    /* The section bar is the one solid field of colour on the site, so it gets
       its own tokens rather than reusing --accent-2: that token is lifted to a
       bright mint in dark mode (it has to be, to stay legible AS TEXT on paper),
       and a mint bar would glow. A bar is a surface, not a word - it darkens in
       dark mode instead of brightening. */
    /* Sampled from the client's wordmark (সবুজ #085A2F, লাল #DD1217) and used
       only for the bar, which sits directly under it - the masthead sets the
       palette for the thing it touches. --accent/--accent-2 below are the
       site's editorial and structural INK and stay as they are. */
    --bar:          #08512B;   /* solid green section bar, the wordmark's green */
    --bar-ink:      #f7f4ed;   /* type on the bar - paper, not pure white */
    --bar-ink-dim:  #bcd3c9;
    --bar-hover:    rgba(255,255,255,.10);
    /* লাল used as a FILL rather than as ink: the live section block, the rule
       that closes the bar, the শিরোনাম tag. Kept dark in both schemes - the
       lifted --accent is for red TEXT on paper and drops to 2.9:1 under white. */
    --bar-live:     #d5121c;   /* the wordmark's লাল, a shade down for white type */
    --bar-live-ink: #fff;
    /* The masthead's e-paper chip. Its own token rather than --bar because a
       chip on the paper ground and a full-width bar need different weights in
       dark mode: the bar darkens into the page, the chip has to stay legible
       ON it. Green, not লাল - লাল is this paper's editorial marker (kickers,
       the live section, the শিরোনাম tag) and spending it on a nav chip
       dilutes what it means everywhere else. */
    --chip:         #08512B;   /* green fill on paper again (09-05) */
    --chip-ink:     #f7f4ed;
    --chip-hover:   #0a3d20;
    /* Same as the fill in light mode, i.e. no visible edge - a dark green
       chip on cream already has all the separation it needs. */
    --chip-edge:    #08512B;

    /* Type */
    --f-head: "Noto Serif Bengali", "SolaimanLipi", "Kalpurush", Georgia, serif;
    --f-body: "Noto Sans Bengali", "SolaimanLipi", "Siyam Rupali", "Nikosh", system-ui, sans-serif;

    /* Rhythm */
    --shell: 1180px;
    --gap:   28px;
}

/* A weekly is a light-mode object. But a reader whose OS is dark should not be
   flashbanged, so the paper darkens and the ink inverts - same design, less lumen. */
@media (prefers-color-scheme: dark) {
    :root {
        --paper: #14130f;  --paper-2: #1c1a16;
        /* = the dark --paper-2 and the dark paper inks, matching light */
        --mast: #1c1a16;  --mast-ink: #ece8df;  --mast-ink-2: #b9b4a8;
        --mast-rule: #322f28; --mast-note: #ef5b6b; --mast-when: #a9bdf0;
        --ink:   #ece8df;  --ink-2:   #b9b4a8;  --ink-3: #8d887c;
        --rule:  #322f28;  --rule-strong: #ece8df;
        /* Both accents lifted for contrast on a dark ground; the bottle green is
           near-black at 1.6:1 against #14130f and would vanish untouched. */
        --accent: #ef5b6b; --accent-ink: #f8828e;
        --accent-2: #35b58c; --accent-2-ink: #55c9a4;
        /* Bar and its live block stay dark/saturated - white on #c8102e is 5.3:1
           either way, and the lifted red is for ink on paper, not for a fill. */
        --bar: #0a2113; --bar-ink: #e8e4da; --bar-ink-dim: #93a79d;
        --bar-hover: rgba(255,255,255,.07); --bar-live: #b60f18;
        /* Lifting the fill far enough to separate from the dark masthead
           (3:1 for a non-text component) drags its light label below 4.5:1 -
           the two cannot both be won on the fill alone. So the fill stays
           dark enough to read on (#e8e4da is 4.85:1 on #0e7040) and the mint
           EDGE (6.7:1 on the ground) does the separating. */
        --chip: #0e7040; --chip-ink: #e8e4da; --chip-edge: #35b58c; --chip-hover: #08512B;
    }
    /* No filter on the masthead: it is the client's colour wordmark now, and
       invert() would turn লাল cyan and সবুজ magenta. The dark cut is a second
       PNG picked by <picture>, lifted in lightness with hue untouched. */
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.75;
    /* Bengali sits low in the em box; a touch of extra leading keeps the
       matra (top bar) from crowding the line above it. */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
/* height:auto is not optional: every <img> carries width/height attributes (they
   reserve space and stop the page shifting as images arrive), and without this the
   HTML height attribute wins over aspect-ratio and the crops never apply. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.28; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.shell { width: min(100% - 32px, var(--shell)); margin-inline: auto; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard readers should not have to tab the whole masthead and every section
   to reach the story. Off-screen until focused, then it sits over the strip. */
.skip {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 80;
    background: var(--bar); color: var(--bar-ink); padding: 10px 16px;
}
.skip:focus { inset-inline-start: 0; }

/* ---- Masthead strip ----------------------------------------------------- */
/* One strip instead of the old thin top bar plus a centred masthead, following
   the reference paper: the wordmark leads, the date and the utility links close
   the row. The side is one line - `order` on .mast__logo, -1 for left, 2 for
   right - because the meta column comes first in the markup (it is the part
   that stacks under the wordmark on a phone). */
/* A hairline in the strip's own light, not --rule: the masthead and the
   section bar are now the same green, so without it the nav stops reading as a
   bar and becomes the bottom of one large slab. */
/* No border-bottom of its own since 09-05: the bar's red top rule now draws
   the line under the strip, and a grey hairline stacked on a red rule read as
   a smudge. Print restores one, below, where the bar's rule does not exist. */
.mast { background: var(--mast); color: var(--mast-ink); }
.mast__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; padding: 18px 0 16px;
}
/* The width lives on the anchor, not the image: a percentage width on the img
   resolves against a shrink-to-fit anchor, which Chrome then sizes from the
   1100px natural width - the wordmark rendered full-bleed.

   250px, not 330: the artwork supplied on 31-08 draws its Bengali line at 50%
   of the image height where the previous file drew it at 40%, so the same box
   width rendered the letters 34% larger and the masthead started shouting.
   250px restores the optical size the paper had, and lands at 21% of the
   content column - the reference paper's own wordmark sits at 20%. Measure the
   letter band, not the box, if the artwork is ever replaced again. */
/* The wordmark is sized in INCHES, not px: the paper asked for it by the inch
   and CSS defines 1in as exactly 96px, so the unit says why the number is what
   it is. Height drives it - an inch of masthead is an inch of DEPTH on the
   page - and the width follows the artwork's ratio.

   Three quarters of an inch, down from a full one: at 1in the nameplate stood
   half again as tall as the date-and-links column beside it and the strip read
   as a logo with some text parked next to it. At .75in the two are the same
   optical height, so the strip reads as one line, which is how a broadsheet
   sets its nameplate row. It also lands the wordmark at ~248px, which is the
   250px this file already arrived at from the other direction - 21% of the
   content column, against the reference paper's 20%.

   max-width + object-fit keep it from running off a 320px phone; there the
   image scales down inside the box instead of squashing. */
/* 2026-09-24: client marked the wordmark to the RIGHT and the date column to
   the LEFT, so the strip now reads date · photo · nameplate. The phone stack
   below pulls the wordmark back to the top with its own order. */
.mast__logo { flex: none; order: 2; }
.mast__print { display: none; }
/* .85in, not .75in: the nameplate is the paper's identity and it was being
   out-weighed by the photograph beside it - at 72px tall against a 158px band
   the picture read as the masthead and the wordmark as something pinned next
   to it. Set in inches because this is a printed paper's nameplate. */
.mast__img { height: .85in; width: auto; max-width: 100%; object-fit: contain; }

/* The band sits between the nameplate and the date column: the logo is
   order:-1 so it leads, and the band comes before .mast__meta in the markup,
   which puts it in the middle without either of them needing an order of its
   own. It takes the slack in the row rather than a fixed width, so the strip
   still reads as one line at any width down to the cut-off below. */
.mast__band { flex: 1 1 auto; min-width: 0; max-width: 520px; }
/* The band FILLS the gap between the nameplate and the date column - the
   client marked that slot on a screenshot and it is 520x158, a 3.3:1 letterbox.
   The photograph on it (2026-09-05, a tree standing in floodwater, 3.23:1)
   is almost the slot's own shape, so cover trims only ~2% off top and bottom;
   the 1.82:1 photo before it needed a real crop, and cover stays for whatever
   comes next: after two earlier rounds that showed the whole frame.
   Fitting the whole frame in here instead would leave ~130px of bare paper on
   either side of it, which is what the client was pointing at.

   2026-09-24: photo replaced by the client's lone tree in floodwater, no boat.
   The crop is BAKED into the file at 3.34:1 (crown to roots), so the position
   is plain centre - nothing is left for object-position to rescue.

   Width is a percentage and only the height is fixed, so as the row narrows the
   picture crops in from the sides rather than letterboxing or distorting.

   520 wide is the ceiling: it is what was marked, and the date column no longer
   wraps at it because .mast__meta is flex:none (below) and the band is the item
   that yields.

   A hairline, like every other division on this site - an unframed photograph
   reads as pasted on rather than set in. */
.mast__band img {
    /* 128px, down from 158. Two things come out of the same change: the strip
       loses 30px it was not using (the date column is 79px tall and was
       floating in the middle of a 158px band), and at the shell's own width the
       picture comes out 427x128 - 3.34:1, the letterbox the client marked. At
       158 it was being squeezed to 2.9:1 and cropping in from the sides. */
    width: 100%; height: 128px;
    object-fit: cover; object-position: center 50%;
    border: 1px solid var(--mast-rule);
}

/* The meta column hugs the outer (now LEFT) edge so its two rows start flush.
   order:-1 puts it first; the band stays in the middle. */
.mast__meta {
    order: -1;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    /* flex:none so the date column keeps its natural width and the BAND gives
       up space as the row narrows. Left shrinkable, it was the meta that
       yielded first and "৮ম বর্ষ · ৩৪তম সংখ্যা" wrapped to a second line while
       the photograph stayed full size - exactly backwards. The picture scales
       whole, so shrinking it costs nothing. */
    /* --ink-2, not --ink-3: at 13px on the masthead's tint the lighter ink sat
       at about 4.4:1 and the whole right third of the strip read as switched
       off. This is the paper's own dateline - where it publishes from, when,
       and which issue - and it should be readable at a glance. */
    flex: none; min-width: 0; font-size: 13.5px; color: var(--mast-ink-2);
}
.mast__when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--mast-when); }
.mast__when svg { flex: none; opacity: .9; }
.mast__sep { color: var(--mast-rule); }
/* align-items:flex-end, not center or the default stretch: since the e-paper
   chip carries a caption above it, this row is 46px tall while every other item
   in it is 17px. Centred, those items floated in the gap between the caption
   and the chip; hung from the bottom they sit on the chip's own line, which is
   the line the strip reads along. */
.mast__row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.mast__links { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* সবুজ, the site's structural colour, so these read as the way around the
   paper rather than as more dateline text. */
.mast__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-2); font-weight: 500; }
.mast__chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--chip); color: var(--chip-ink);
    border: 1px solid var(--chip-edge);
    /* ⚠️ line-height is doing the work here, not the padding. The links beside
       this one paint only their glyphs (~17px) while a filled chip paints its
       whole line box - at the inherited line-height that box is 34px, so the
       chip read as twice the weight of its neighbours and punched a white slab
       into the green. 1.2 shrinks the painted box to hug the text; the row's
       height is unchanged. */
    padding: 4px 12px; line-height: 1.2; font-weight: 600;
}
.mast__chip:hover { background: var(--chip-hover); color: var(--chip-ink); }
.mast__links svg, .mast__chip svg { flex: none; }
.mast__links a[href]:hover { color: var(--accent-2-ink); }
/* Caption over button: one block, so the row can never wrap between the line
   and the chip it belongs to. It is the last item in the row and it is set
   flush right, which is the whole point of moving it here - the issue line
   above it, the caption and the button now end on one vertical edge, and the
   strip's most-used control sits in the corner where a paper puts it.
   ⚠️ It takes no divider: .mast__row > * + * gives one to every item after the
   first, and a second hairline in a 400px row is fussy. Space separates it. */
.mast__cta {
    display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px;
    margin-inline-start: 8px; padding-inline-start: 0; border-inline-start: 0;
}
/* আর্কাইভ under the button (09-24), set like the links row it came from. */
.mast__cta > a:not(.mast__chip) {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
    color: var(--accent-2); font-weight: 500;
}
.mast__cta > a:not(.mast__chip):hover { color: var(--accent-2-ink); }
/* The line that introduces the chip under it. Running dateline text, so it
   takes the dateline's ink and weight, not the সবুজ the links are set in -
   green here would read as a fourth link. A step down in size too: it is a
   caption for the chip, not a peer of the dateline above it. */
.mast__note { color: var(--mast-note); font-weight: 400; font-size: 12.5px; line-height: 1.25; }
/* Line icons, not brand marks: the nav's magnifier, house and hamburger are all
   drawn this way, so the social row matches the site rather than five logos. */
/* Placeholders are <a> without href: inert, and they never write a "#" into
   the address bar the way href="#" does. They get real URLs the day those
   pages exist - nothing else about them has to change. */
a:not([href]) { cursor: default; }

.mast__social { display: flex; gap: 14px; }
/* The single social mark the paper actually has, boxed at the chip's own
   height and border weight.
   ⚠️ It takes the strip's ink, NOT Facebook's blue: #1877f2 is 1.6:1 on this
   green and unreadable. A borrowed brand colour only survives on a pale ground.
   The box earns its place: the other two icons in this row are drawn objects -
   an archive box, an envelope - that carry their own enclosing form, while this
   is a bare letterform, and without a box it read as a stray "f" and left the
   row ending on nothing. It also gives the row a bordered element at each end.
   ⚠️ Bordered, never filled: the chip is the only filled thing here, and that
   is what marks it as the one action worth taking. Square, like every other
   edge on this site. */
.mast__social a {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border: 1px solid var(--mast-ink);
    color: var(--mast-ink);
}
.mast__social a[href]:hover { background: var(--mast-ink); color: var(--mast); }
/* 2026-09-24: the client asked for the real Facebook logo instead of the line
   "f". It is a brand mark in its own colours, so no box and no ink swap on
   hover - the blue disc already reads as a button (3.2:1 on the strip). */
.mast__social a.is-brand { width: auto; height: 26px; border: 0; }
.mast__social a.is-brand svg { width: auto; height: 26px; display: block; }
.mast__social a.is-brand[href]:hover { background: none; opacity: .85; }
/* A hairline between the strip's columns - no boxes, the reference has none
   either. With the call to action in the row there are two columns to divide:
   everywhere the paper can be read or reached (আর্কাইভ, যোগাযোগ, its page) and
   the button. One rule, not two: the divider in front of the social mark comes
   off wherever a call to action is present, or the 400px row carries a hairline
   every 120px and starts to look ruled rather than divided.
   ⚠️ This block sits AFTER .mast__cta in the file and matches it at the same
   specificity, so it is the one that decides - :has() keeps the fallback
   honest for anything that cannot read it. */
.mast__row > * + * { padding-inline-start: 18px; border-inline-start: 1px solid var(--mast-rule); }
.mast__row:has(.mast__cta) > .mast__social { padding-inline-start: 0; border-inline-start: 0; }
/* 09-24 "borabor": the row spans the dateline's full width - যোগাযোগ + Facebook
   flush under নাটোর, the print-version block flush under সংখ্যা. With the two
   groups at the ends the hairline between them would float in the gap, so it
   goes. */
.mast__row { align-self: stretch; }
/* Next round the same day: "dag hobe" - the hairline comes back, on the
   print-version block's own edge so it runs the block's full height - and
   "upora borabor": যোগাযোগ + Facebook ride up level with the red caption. */
.mast__row:has(.mast__cta) { align-items: flex-start; }
.mast__row:has(.mast__cta) > .mast__cta { margin-inline-start: auto; padding-inline-start: 18px; border-inline-start: 1px solid var(--mast-rule); }

/* ---- Section bar -------------------------------------------------------- */
/* One solid field of colour, flat: no gradient, no shadow, no radius. On a
   coloured bar the site's usual hairline-underline for the live item would be
   invisible, so the live section is a filled লাল block instead - the accent
   still says "this", it just says it in a way that survives the green. */
.nav {
    position: sticky; top: 0; z-index: 40;
    background: var(--bar); color: var(--bar-ink);
    /* লাল rules top AND bottom (top added 2026-09-05, the client drew the line
       along the bar's upper edge). Same weight as the one that closes it, so
       the bar reads as a band set between two red rules, the way a printed
       weekly rules its section line. */
    border-top: 3px solid var(--bar-live);
    border-bottom: 3px solid var(--bar-live);
}
/* 2026-09-24: the client sent a swatch of #7BEF9C (mint) for THIS bar only.
   Scoped here as custom properties so everything inside the nav - the drawer,
   the আরও panel, the search row - follows, while the other green blocks
   (ticker tag, e-paper buttons, skip link) keep the dark green.
   White type is 1.4:1 on mint, so the ink turns dark green (10.3:1). The live
   section keeps its red block with white type (5.3:1) - it still reads "here". */
.nav {
    --bar: #7bef9c; --bar-ink: #0b2e1a; --bar-ink-dim: #2f6b47;
    --bar-hover: rgba(0,0,0,.08); --bar-line: rgba(11,46,26,.16);
}
/* Mint would be a glare stripe on a dark page: the bar stays dark there. It
   has to come AFTER the rule above - same specificity, so order decides. */
@media (prefers-color-scheme: dark) {
    .nav {
        --bar: #0a2113; --bar-ink: #e8e4da; --bar-ink-dim: #93a79d;
        --bar-hover: rgba(255,255,255,.07); --bar-line: rgba(255,255,255,.10);
    }
}
/* 34px, down from 46 (09-24: "choto hobe", then again to suit the 14px type). */
.nav__in { position: relative; display: flex; align-items: center; gap: 8px; min-height: 34px; }
/* flex:0 1 auto, not flex:1 - the list must end where its last section ends
   so আরও sits against it as part of the same group, instead of being
   pushed to the far side of an empty stretch. The magnifier keeps to the far
   end on its own auto start margin. The list can still shrink (and scroll)
   when JS is off and all fifteen sections are sitting in it. */
.nav__list { display: flex; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
.nav__list::-webkit-scrollbar { display: none; }
.nav__list a {
    display: block; padding: 5px 14px; line-height: 1.6; white-space: nowrap;
    font-size: 14px; font-weight: 500; color: var(--bar-ink);   /* 14px: client ask 09-24 (was 15.5) */
    border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.nav__list a:hover { background: var(--bar-hover); }
/* প্রচ্ছদ is the house icon, the way the reference paper does it. The label
   stays in aria-label so it is still announced and still searchable. */
.nav__home { display: grid; place-items: center; padding-inline: 15px; }
/* The house block fills the slimmer bar top to bottom (it fell 1-3px short). */
@media (min-width: 641px) { .nav__list li:has(> .nav__home) { display: flex; } }
.nav__home svg { display: block; }
/* The bar shows the house alone; the drawer shows the words. Same link. */
.nav__homelabel { display: none; }
.nav__list a[aria-current="page"] {
    background: var(--bar-live); color: var(--bar-live-ink); font-weight: 700;
}

/* --- আরও: the sections that do not fit ---------------------------------
   Fifteen sections do not fit a bar at any sensible size, and a rail that
   scrolls with a hidden scrollbar hides the tail of the paper behind a gesture
   nobody is told about. So app.js measures the bar and moves the overflow in
   here. The panel is the same flat green field as the bar - it reads as the bar
   continuing downwards, not as a floating menu - and the live section keeps the
   same filled লাল block it would have had on the bar. */
.nav__moreli { position: relative; flex: none; }
.nav__morebtn {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 14px; font: inherit; font-size: 14px; line-height: 1.6; font-weight: 500;
    color: var(--bar-ink); background: none; border: 0; cursor: pointer;
    border-bottom: 3px solid transparent; margin-bottom: -3px; white-space: nowrap;
}
.nav__morebtn:hover { background: var(--bar-hover); }
.nav__morebtn svg { transition: transform .18s ease; }
.nav__morebtn[aria-expanded="true"] { background: var(--bar-hover); }
.nav__morebtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__pop {
    position: absolute; top: 100%; inset-inline-end: 0; z-index: 41;
    min-width: 232px; display: none; flex-direction: column;
    background: var(--bar); border-top: 3px solid var(--bar-live);
    box-shadow: 0 14px 28px -20px rgba(0,0,0,.55);
}
.nav__pop.is-open { display: flex; }
/* These anchors have left .nav__list, so none of its type rules reach them
   any more - the panel restates them rather than inheriting a bar it is no
   longer part of. */
.nav__pop a {
    /* 7px + line-height 1.5: rows sized to the 14px type (09-24), were ~46px tall */
    display: block; padding: 7px 16px; line-height: 1.5; white-space: nowrap;
    font-size: 14px; font-weight: 500; color: var(--bar-ink);
    border-bottom: 1px solid var(--bar-line);
}
.nav__pop a:hover { background: var(--bar-hover); }
.nav__pop li:last-child a { border-bottom: 0; }
.nav__pop a[aria-current="page"] {
    background: var(--bar-live); color: var(--bar-live-ink); font-weight: 700;
}
/* The compact masthead that slides in once the big one has scrolled away. It
   collapses to zero WIDTH rather than just going transparent: an invisible item
   still holding 150px of the bar left a dead green gap before প্রচ্ছদ. */
.nav__mark {
    max-width: 0; overflow: hidden; opacity: 0; pointer-events: none; flex: none;
    transition: max-width .22s ease, opacity .18s ease, padding .22s ease;
}
/* The client's own wordmark, cut to the Bengali line alone and inverted to a
   white-on-dark PNG - not the colour masthead under a filter, which would turn
   লাল cyan, and not the full lockup, whose English line and tagline are
   unreadable at bar height.

   20px, not 26: at 26 the wordmark stood two thirds the height of the bar,
   touched both edges and crowded the প্রচ্ছদ button beside it - a second
   masthead rather than a mark. 20px sits it at the section labels' own optical
   size, which is what a compact mark is for. The file is trimmed to visible
   ink, so this height IS the height of the letters. */
.nav__mark img { display: block; height: 20px; width: auto; }
/* A hairline between the mark and the sections: without it the wordmark ran
   straight into the filled লাল of the live item next to it. Declared only in
   the stuck rule, so the collapsed mark is not a stray 1px line on the bar. */
.nav.is-stuck .nav__mark {
    max-width: 240px; opacity: 1; pointer-events: auto;
    padding-inline-end: 14px; margin-inline-end: 6px;
    border-inline-end: 1px solid rgba(255,255,255,.18);
}
.nav__btn {
    display: grid; place-items: center; width: 36px; height: 32px;   /* 32 tall so the slimmer bar can close up */
    color: var(--bar-ink); flex: none;
}
.nav__btn:hover { background: var(--bar-hover); }
.nav__menu { display: none; }

/* Search is a magnifier, not a field parked in the bar.

   A white input with a cream button was a form control sitting ON the bar
   rather than part of it - the one piece of furniture that did not share the
   bar's flat green - and with fifteen sections it also ate the room they
   needed. The magnifier is what a newspaper bar carries; the field it opens
   is the same <form>, laid over the bar, so there is still one form in the
   markup and it still works with this stylesheet removed. */
.nav__search { display: grid; margin-inline-start: auto; }
.navsearch {
    position: absolute; inset: 0; z-index: 2; margin: 0; gap: 8px;
    background: var(--bar); display: none; align-items: center;
}
.navsearch.is-open { display: flex; }
.navsearch__field {
    font: inherit; flex: 1; width: auto; min-width: 0; font-size: 16px;
    color: var(--bar-ink); background: none;
    border: 0; border-bottom: 1px solid var(--bar-ink-dim); padding: 6px 2px;
}
.navsearch__field::placeholder { color: var(--bar-ink-dim); }
.navsearch__field:focus { outline: 0; border-bottom-color: var(--bar-ink); }
/* WebKit draws its own clear button on type=search; we have our own. */
.navsearch__field::-webkit-search-cancel-button,
.navsearch__field::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.navsearch__go {
    font: inherit; font-size: 14.5px; font-weight: 600; white-space: nowrap;
    color: var(--bar-ink); background: var(--bar-hover); border: 0; padding: 7px 12px;
}
.navsearch__go:hover { background: var(--bar-live); color: var(--bar-live-ink); }
.navsearch__close { display: grid; }

/* ---- Advertising (09-24) ------------------------------------------------
   Every ad is labelled বিজ্ঞাপন - a reader must never mistake paid space for
   the paper's own reporting. Hairline frame like everything else here; the
   image keeps its own proportions at the slot's width. */
.ad-band { padding-top: 16px; }
.ad { display: grid; justify-items: center; gap: 4px; }
.ad__label { font-size: 11px; letter-spacing: .5px; color: var(--ink-3); }
.ad__item { display: none; width: 100%; }
.ad__item.is-on, .ad:not(.is-ready) .ad__item:first-of-type { display: block; }
.ad__item img, .ad__item a { display: block; width: 100%; height: auto; }
.ad__item img { border: 1px solid var(--rule); }
.ad--top .ad__item, .ad--home .ad__item, .ad--article .ad__item { max-width: 970px; }
.ad--sidebar .ad__item { max-width: 300px; }
.ad--home { margin-top: 28px; }
.ad--article { margin-top: 28px; }
.lead__rail .ad--sidebar { margin-top: 22px; }
.aside > .ad--sidebar { margin-bottom: 8px; }
/* The paper's own card for an unsold slot: a quiet invitation, not a banner. */
.ad__house {
    display: none; width: 100%; max-width: 970px; box-sizing: border-box;
    padding: 14px 16px; text-align: center; text-decoration: none;
    border: 1px dashed var(--ink-3); color: var(--ink-2); background: var(--paper);
}
.ad--sidebar .ad__house { max-width: 300px; padding: 22px 14px; }
.ad--empty .ad__house, .ad.is-empty .ad__house { display: block; }
.ad__house b { display: block; font-family: var(--f-head); font-size: 16px; color: var(--accent-2); }
.ad__house span { font-size: 13px; }
.ad__house:hover b { color: var(--accent-2-ink); }
@media print { .ad, .ad-band { display: none; } }

/* ---- Home top band: ad left, প্রকাশক + সম্পাদক right (09-24) ----------
   The imprint of a paper, set beside the ad: a hairline divides the two the
   same way it divides the lead's columns, the role sits above the name in
   the structural green, and fixed columns keep both portraits on one line. */
.homeband { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); align-items: stretch; }
.homeband--one { grid-template-columns: minmax(0, 1fr); }
/* The ad fills the band's full height, level with the portraits (client,
   09-24): label on top, then the space itself down to the names' baseline. */
.homeband .ad { min-width: 0; grid-template-rows: auto 1fr; align-items: stretch; }
.homeband .ad__item, .homeband .ad__house { max-width: none; }
.homeband .ad__item.is-on, .homeband .ad:not(.is-ready) .ad__item:first-of-type { display: flex; align-items: center; }
.homeband .ad--empty .ad__house, .homeband .ad.is-empty .ad__house {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; }
/* Portraits at one standard size: 4:5 passport ratio, the same as the 400x500
   source files, large enough to fill the band beside the ad (client, 09-27 -
   the old 84x105 left half the column empty). Centred in the band's height. */
.people { display: grid; grid-template-columns: repeat(2, 150px); gap: 20px; justify-content: end;
          align-items: start; align-content: center; }
.homeband:not(.homeband--one) .people { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--gap); }
.person { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; }
.person img { display: block; width: 140px; height: 175px; object-fit: cover; object-position: center top;
              border: 1px solid var(--rule); padding: 3px; background: var(--paper); }
.person figcaption { display: grid; gap: 2px; }
.person span { font-size: 12px; line-height: 1.4; color: var(--accent-2); padding-bottom: 3px;
               border-bottom: 1px solid var(--accent-2); justify-self: center; }
.person b { font-family: var(--f-head); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); padding-top: 3px; }
/* আমাদের সম্পর্কে: the panel's prose, then the imprint at a larger size. */
.about { display: grid; gap: 34px; padding-bottom: 20px; }
.about__block h2 { font-size: 21px; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.people--about { grid-template-columns: repeat(2, 190px); justify-content: start; gap: 34px; }
.person--lg img { width: 160px; height: 200px; }
.person--lg b { font-size: 16.5px; }
.person--lg span { font-size: 13px; }
.about__beats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.about__beats a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.about__beats a:hover { color: var(--accent-2); border-color: var(--accent-2); }
.about__reach { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.about__block > p a { color: var(--accent-2-ink); }
@media (max-width: 760px) {
    .homeband { grid-template-columns: minmax(0, 1fr); }
    .homeband:not(.homeband--one) .people { border-inline-start: 0; padding-inline-start: 0;
        border-top: 1px solid var(--rule); padding-top: 16px; }
    .people, .people--about { grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; }
    .person img, .person--lg img { width: 120px; height: 150px; }
    .people--about { grid-template-columns: repeat(2, minmax(0, 150px)); gap: 20px; }
}


/* বিজ্ঞাপন page */
.advert { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; padding: 8px 0 48px; }
.advert h2 { font-size: 20px; margin-bottom: 12px; }
.advert__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.advert__table th, .advert__table td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--rule); }
.advert__table th { font-weight: 600; color: var(--ink-2); }
.advert__note { color: var(--ink-2); font-size: 14px; line-height: 1.7; margin-top: 14px; }
.advert__reach { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; font-size: 16px; }
.advert__reach a { color: var(--accent-2); font-weight: 600; }
@media (max-width: 760px) { .advert { grid-template-columns: 1fr; gap: 28px; } }

/* ---- শিরোনাম ticker ------------------------------------------------------ */
/* The one moving thing on the page. It earns that by carrying live headlines,
   and it stops the moment a reader hovers, tabs into it, or asks the OS for
   less motion - a strip you cannot finish reading is decoration, not news. */
.ticker { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ticker__in { display: flex; align-items: stretch; min-height: 38px; }
.ticker__tag {
    display: flex; align-items: center; flex: none;
    background: var(--bar); color: var(--bar-ink);
    font-size: 14.5px; font-weight: 700; letter-spacing: .3px;
    padding-inline: 16px 26px;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.ticker__view { flex: 1; min-width: 0; margin-inline-start: 8px; overflow: hidden; display: flex; align-items: center; }
/* Two identical tracks side by side; sliding the rail exactly one track-width
   left and looping makes the seam invisible. The clone is aria-hidden so the
   headlines are announced once. */
.ticker__rail {
    display: flex; width: max-content;
    animation: tk-run var(--tk-dur, 42s) linear infinite;
}
@keyframes tk-run { to { transform: translateX(-50%); } }
.ticker:hover .ticker__rail,
.ticker:focus-within .ticker__rail { animation-play-state: paused; }
.ticker__track { display: flex; align-items: center; }
.ticker__track li { display: flex; align-items: center; white-space: nowrap; }
.ticker__track a { font-size: 15px; padding-inline-start: 18px; }
.ticker__track a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* The separator is the structural green, matching the ranked numerals. */
.ticker__track li::after {
    content: "\25c6"; color: var(--accent-2); font-size: 8px;
    margin-inline-start: 18px; transform: translateY(-1px);
}

/* ---- Section heading ---------------------------------------------------- */
.sec { margin-top: 42px; }
.sec__head {
    display: flex; align-items: baseline; gap: 14px;
    border-bottom: 2px solid var(--accent-2);
    padding-bottom: 8px; margin-bottom: 22px;
}
.sec__title { font-size: 21px; letter-spacing: .2px; }
.sec__title::before {
    content: ""; display: inline-block; width: 9px; height: 9px;
    background: var(--accent); margin-inline-end: 9px; transform: translateY(-1px);
}
.sec__more { margin-inline-start: auto; font-size: 14px; color: var(--ink-3); }
.sec__more:hover { color: var(--accent-2-ink); }

/* ---- Lead block --------------------------------------------------------- */
/* Three columns, following the reference front page: the lead story, a column
   of thumbed headlines, then the rail. */
.lead { display: grid; grid-template-columns: 1.5fr 1.05fr 1fr; gap: var(--gap); padding-top: 26px; }
.lead__side { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--gap); }
/* ---- Rail tabs ---------------------------------------------------------- */
/* সর্বশেষ / জনপ্রিয়. Both panels are in the markup unhidden; app.js hides the
   inactive one at start-up, so with no JS this degrades to two stacked lists
   rather than to one empty box. */
.rail__tabs { display: flex; border-bottom: 1px solid var(--rule); }
.rail__tab {
    flex: 1; padding: 9px 6px 10px; font-family: var(--f-head); font-weight: 700;
    font-size: 16.5px; color: var(--ink-3);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rail__tab:hover { color: var(--ink); }
.rail__tab[aria-selected="true"] { color: var(--accent-2-ink); border-bottom-color: var(--accent-2); }
.rail__list li { padding: 13px 0; border-top: 1px solid var(--rule); }
.rail__list li:first-child { border-top: 0; }
.rail__list a { font-family: var(--f-head); font-weight: 600; font-size: 16px; line-height: 1.45; }
.rail__list a:hover { color: var(--accent-ink); }
.rail__panel { padding-top: 4px; }

.story__fig { position: relative; overflow: hidden; background: var(--paper-2); }
.story__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.story:hover .story__fig img { transform: scale(1.03); }

.kicker {
    display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
    color: var(--accent); text-transform: none; margin-bottom: 8px;
}
.story__title { margin-top: 10px; }
.story__title a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.lead .story--hero .story__title { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.2; }
.lead .story--hero .story__excerpt { margin-top: 12px; font-size: 17px; color: var(--ink-2); }
.meta { margin-top: 10px; font-size: 13px; color: var(--ink-3); display: flex; gap: 12px; flex-wrap: wrap; }

/* Stacked stories in the right rail, divided by rules rather than boxed. */
.stack > * + * { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.stack .story__title { font-size: 18px; margin-top: 0; }
.stack .story { display: grid; grid-template-columns: 1fr 92px; gap: 14px; align-items: start; }
/* The front page's middle column leads with the thumb, the section stacks close
   with it. This has to sit AFTER the rule above: same specificity, so order is
   what decides it. */
.stack--thumb .story { grid-template-columns: 88px 1fr; }
.stack .story__fig img { aspect-ratio: 1 / 1; }

/* ---- Card grid ---------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid .story__title { font-size: 19px; }
.grid .story__excerpt { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }

/* ---- Most read ---------------------------------------------------------- */
.ranked { counter-reset: r; }
.ranked li { counter-increment: r; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); }
.ranked li:first-child { border-top: 0; padding-top: 0; }
.ranked li::before {
    content: counter(r, bengali);
    font-family: var(--f-head); font-size: 22px; font-weight: 700;
    color: var(--accent-2); line-height: 1;
}
.ranked a { font-family: var(--f-head); font-weight: 600; font-size: 16px; line-height: 1.45; }
.ranked a:hover { color: var(--accent-ink); }

/* ---- Opinion band ------------------------------------------------------- */
.band { background: var(--paper-2); padding: 34px 0 40px; margin-top: 46px; border-block: 2px solid var(--accent-2); }
.band .sec { margin-top: 0; }
.oped { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.oped img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.oped .story__title { font-size: 18px; margin-top: 6px; }
.oped__by { font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* ---- Footer ------------------------------------------------------------- */
.foot { margin-top: 52px; border-top: 4px solid var(--accent-2); padding: 32px 0 40px; font-size: 14.5px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--gap); }
.foot h4 { font-size: 15px; margin-bottom: 12px; }
.foot li + li { margin-top: 7px; }
.foot a { color: var(--ink-2); }
.foot a[href]:hover { color: var(--accent-2-ink); }
.foot__note { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Studio credit. Sits in the footer's bottom rule with the copyright, at the
   same 13px - it is a signature, not a banner. The heart takes the wordmark's
   লাল so the one spot of colour down here is the paper's own red. */
.foot__by { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.foot__by svg { color: var(--accent); }
.foot__by strong { color: var(--ink-2); font-weight: 700; }
.foot__by:hover { color: var(--ink-2); }
.foot__by:hover strong { color: var(--accent); }

/* ---- Article page ------------------------------------------------------- */
.progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 3px; background: var(--accent); width: 0; z-index: 60; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-top: 30px; }
.article__head { border-bottom: 2px solid var(--accent-2); padding-bottom: 20px; margin-bottom: 24px; }
.article__title { font-size: clamp(28px, 4vw, 40px); }
.article__lede { margin-top: 14px; font-size: 18.5px; color: var(--ink-2); }
.byline { margin-top: 18px; display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--ink-3); flex-wrap: wrap; }
.byline strong { color: var(--ink); }
/* Measure: Bengali runs wider than Latin, so ~62ch keeps a comfortable line. */
.prose { font-size: 17.5px; line-height: 1.95; max-width: 62ch; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 23px; margin-top: 34px; }
.prose blockquote {
    margin: 28px 0; padding-inline-start: 20px;
    border-inline-start: 3px solid var(--accent);
    font-family: var(--f-head); font-size: 20px; line-height: 1.6; color: var(--ink);
}
.prose figure { margin: 28px 0; }
.prose figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.aside > * + * { margin-top: 32px; }

/* ---- Category page ------------------------------------------------------ */
.pagehead { padding: 30px 0 4px; border-bottom: 2px solid var(--accent-2); margin-bottom: 26px; }
.pagehead h1 { font-size: 32px; }
.pagehead p { color: var(--ink-3); margin-top: 6px; }
.listrow { display: grid; grid-template-columns: 220px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
/* The class sets display:grid, which would otherwise beat the hidden attribute
   the search filter sets. */
.listrow[hidden] { display: none; }
/* An op-ed row leads with the writer's monogram, not a scene photograph. */
.listrow--oped { grid-template-columns: 96px 1fr; align-items: center; }
.oped__face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
/* Not every brief has a photograph. Without these the text would be squeezed
   into the column the picture would have occupied. */
.listrow--nofig { grid-template-columns: 1fr; }
.stack .story--nofig { grid-template-columns: 1fr; }

.empty { padding: 40px 0; color: var(--ink-3); }
.empty a { color: var(--accent-2-ink); text-decoration: underline; text-underline-offset: 3px; }
.listrow .story__title { font-size: 21px; margin-top: 6px; }

/* ---- Not found ---------------------------------------------------------- */
.notfound { padding: 70px 0 90px; max-width: 620px; }
.notfound__code {
    font-family: var(--f-head); font-weight: 700; font-size: 64px; line-height: 1;
    color: var(--accent-2); letter-spacing: 2px;
}
.notfound__title { font-size: clamp(26px, 3.4vw, 36px); margin-top: 14px; }
.notfound__lede { margin-top: 14px; font-size: 17px; color: var(--ink-2); }
.notfound__go { margin-top: 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.notfound__go a { color: var(--accent-2-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Has to out-specify `.notfound__go a` above, which would otherwise paint the
   label the same dark green as the button it sits on. */
.notfound__go a.notfound__btn {
    background: var(--bar); color: var(--bar-ink); padding: 10px 18px;
    font-weight: 600; text-decoration: none;
}
.notfound__go a.notfound__btn:hover { background: var(--accent-2-ink); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
    .lead { grid-template-columns: 1.35fr 1fr; }
    .lead__rail { grid-column: 1 / -1; border-inline-start: 0; padding-inline-start: 0;
                  border-top: 1px solid var(--rule); padding-top: 20px; }
}

@media (max-width: 980px) {
    .lead { grid-template-columns: 1fr; }
    .lead__side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); padding-top: 22px; }
    .stack--thumb .story { grid-template-columns: 1fr 92px; }
    .stack--thumb .story__fig { order: 2; }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .article { grid-template-columns: 1fr; gap: 36px; }
    .foot__grid { grid-template-columns: 1fr 1fr; }
}
/* The nameplate and the date column own the strip. Once the row is under
   1040px there is no slack left for a photograph of this size, and squeezing
   one in costs the wordmark its size - so the band goes, not the masthead.
   (It was 900px while the band was a 70px-tall crop; a 133px picture needs
   more room to sit beside the nameplate without crowding it.) */
@media (max-width: 1040px) {
    .mast__band { display: none; }
    /* ⚠️ With the band gone, the wordmark and the date column are the only two
       items left in the strip and BOTH were flex:none - so between about 810px
       and the 640px stack they simply added up past the viewport and pushed a
       horizontal scrollbar onto every page (it was on the live site at 641-660
       before the call to action was added, and the wider block made it worse).
       Nothing can be allowed to be unshrinkable here. The wordmark is the one
       that yields: it is a picture and scales whole, exactly as the band did
       above 1040, while the date column would have to wrap its issue line and
       break the strip into three ragged rows to give up the same space. */
    .mast__logo { flex: 0 1 auto; min-width: 0; }
}

@media (max-width: 640px) {
    :root { --gap: 22px; }
    .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .listrow { grid-template-columns: 1fr; }
    /* On a phone the strip stacks and the wordmark leads: it is the identity,
       and the date has no business above it. */
    .mast__in { flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 10px; }
    .mast__meta { align-items: center; text-align: center; gap: 7px; font-size: 12px; }
    /* No separators down here. The folio wraps on a phone, and a wrapped line
       ends on a dangling hairline with nothing after it - the pin and the
       calendar already mark where each part starts, and the issue line gets a
       line of its own. The gap does the dividing instead, so it widens. */
    .mast__when { justify-content: center; gap: 12px; }
    .mast__when .mast__sep { display: none; }
    /* Centred and undivided: the strip is a stack here, not a row of columns,
       so a wrapped line must not start with the hairline that divides the
       links from the social mark. */
    .mast__row { gap: 14px 14px; justify-content: center; }
    .mast__row > * + * { padding-inline-start: 0; border-inline-start: 0; }
    .mast__links { justify-content: center; }
    .mast__cta { align-items: center; margin-inline-start: 0; flex-basis: 100%; }
    .mast__row:has(.mast__cta) > .mast__cta { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }
    /* .58in on a phone, .75in on a desktop. The nameplate, the date line, the
       links row, the bar and the ticker are five bands of furniture stacked
       above the first headline - at desktop size they filled a third of the
       screen before a word of news. The wordmark still leads the page, it just
       does not have to be the same size as it is on a monitor. */
    .mast__img { height: .58in; }
    .mast__logo { order: -2; }
    /* Off-canvas sections list: the horizontal rail works down to here, below it
       a tap target beats a scroll gesture. */
    .nav__menu { display: grid; }
    /* Absolute against the sticky .nav, never fixed to a guessed offset: the bar
       sits under the masthead until the page scrolls, so a hardcoded top pinned
       the drawer over the masthead on an unscrolled page. top:100% follows it. */
    .nav__list {
        position: absolute; top: 100%; inset-inline: 0; background: var(--bar);
        flex-direction: column; gap: 0;
        max-height: 0; overflow: hidden; transition: max-height .25s ease;
        box-shadow: 0 12px 24px -18px rgba(0,0,0,.5);
    }
    .nav__list.is-open { max-height: 70vh; overflow-y: auto; }
    /* The drawer keeps the taller rows: they are tap targets, not a bar. */
    .nav__list a { margin-bottom: 0; padding-block: 11px; border-bottom: 1px solid var(--bar-line); border-inline-start: 3px solid transparent; }
    /* In the drawer the house was a centred icon in a column of left-aligned
       section names, reading as a stray glyph rather than a row you can tap.
       Here it becomes a row like the rest, and says what it is. */
    /* Has to out-specify `.nav__list a` above (class+type beats a lone class),
       or the anchor keeps display:block and the icon stacks over the label. */
    .nav__list a.nav__home { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
    .nav__homelabel { display: inline; }
    /* In the drawer every section is already one tap away, so the overflow
       button has nothing to do. app.js also returns its items to the list. */
    .nav__moreli { display: none; }
    .nav__list a[aria-current="page"] { background: none; color: var(--bar-ink); border-inline-start-color: var(--accent); }
    .foot__grid { grid-template-columns: 1fr; }
    .stack .story { grid-template-columns: 1fr 78px; }
    /* With the sections behind a button the bar would otherwise be empty, so the
       compact mark shows here whether or not the nav is stuck. */
    .nav__mark { opacity: 1; max-width: none; pointer-events: auto; margin-inline-end: auto; }
    /* The ticker keeps running on phones but the label shortens to its icon-sized
       chevron block; headlines are the point, the word শিরোনাম is not. */
    .ticker__tag { font-size: 13px; padding-inline: 12px 20px; }
    .ticker__track a { font-size: 14.5px; }
}

/* A ticker that will not hold still is unreadable for some people. With reduced
   motion the strip becomes an ordinary scrollable line of headlines. */
@media (prefers-reduced-motion: reduce) {
    .ticker__rail { animation: none; }
    .ticker__view { overflow-x: auto; scrollbar-width: none; }
    .ticker__view::-webkit-scrollbar { display: none; }
    .ticker__track + .ticker__track { display: none; }
}

/* ---- E-paper ------------------------------------------------------------ */
/* The scanned issue, in the three columns the standard Bengali e-paper ships
   with (2026-09-05: the client sent a recording of one and asked for exactly
   that arrangement). Left, a boxed rail of page thumbnails; middle, the
   numbered pager, the page, and সব পাতা / পরের পাতা under it; right, a month
   calendar of past issues and a text list of this issue's pages. The chrome
   is the paper's own - hairline boxes, the bar's green for the box heads, no
   shadows - so the viewer belongs to this site and not to the reference's.

   The page image is the whole point of the screen. Width leads here, as it
   does in every e-paper: the page fills its column and the reader scrolls it,
   the way they would hold a broadsheet close. */
.ep-sample {
    margin: 0 0 18px; padding: 10px 14px;
    border-inline-start: 3px solid var(--accent);
    background: var(--paper-2); color: var(--ink-2); font-size: 14px;
}
.ep-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ep-head__act { display: flex; gap: 8px; padding-bottom: 8px; }
.ep-btn {
    font: inherit; font-size: 14px; color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule); padding: 8px 14px; cursor: pointer;
}
.ep-btn:hover:not(:disabled) { border-color: var(--ink-3); }
.ep-btn:disabled { color: var(--ink-3); cursor: default; opacity: .55; }
/* The সব পাতা toggle shows its state as a fill, the way the live pager
   number does: the bar's green, so "on" reads as the same kind of mark. */
.ep-btn[aria-pressed="true"] { background: var(--bar); border-color: var(--bar); color: var(--bar-ink); }

.ep-grid {
    display: grid; grid-template-columns: 172px minmax(0, 1fr) 236px;
    gap: var(--gap); align-items: start;
}

/* A box: hairline all round, a green head in the bar's own colour. The
   head is a label, not a button - the buttons are in the stage. */
.ep-box { border: 1px solid var(--rule); background: var(--paper); }
.ep-box + .ep-box { margin-top: var(--gap); }
.ep-box__head {
    margin: 0; padding: 8px 12px; text-align: center;
    background: var(--bar); color: var(--bar-ink);
    font-family: var(--f-body); font-size: 15px; font-weight: 600;
}

/* The rail and the side column stick under the bar so a 36-page issue does
   not push them off the top while the reader scrolls a tall page; the lists
   inside scroll on their own. */
.ep-rail, .ep-side { position: sticky; top: 92px; }
.ep-rail__list {
    list-style: none; margin: 0; padding: 12px; display: grid; gap: 14px;
    max-height: calc(100vh - 160px); overflow-y: auto;
}
.ep-thumb, .ep-tile {
    display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer;
    font: inherit; text-align: center; color: var(--ink-3);
}
.ep-thumb img, .ep-tile img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.ep-thumb span, .ep-tile span { display: block; font-size: 13px; padding: 5px 0 2px; }
.ep-thumb:hover img, .ep-tile:hover img { border-color: var(--ink-3); }
/* The live page is marked on the thumbnail's border, not with a coloured
   label: the rail is a strip of pictures, and a tinted caption in it reads as
   a second kind of page rather than as "you are here". */
.ep-thumb.is-live img, .ep-tile.is-live img { border: 2px solid var(--accent); }
.ep-thumb.is-live span, .ep-tile.is-live span { color: var(--ink); font-weight: 600; }

.ep-pager { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ep-num {
    font: inherit; font-size: 14px; min-width: 34px; padding: 5px 8px; cursor: pointer;
    color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule);
}
.ep-num:hover { border-color: var(--ink-3); }
.ep-num.is-live { background: var(--bar); border-color: var(--bar); color: var(--bar-ink); }
.ep-num--step { color: var(--ink-3); }

/* The UA's [hidden] loses to any author `display`, so the stage's swaps
   (page <-> সব পাতা tiles, pager off in the tile view) are spelled out. */
.ep-page[hidden], .ep-pager[hidden], .ep-all[hidden] { display: none; }
.ep-stage { min-width: 0; }
.ep-page { margin: 0; border: 1px solid var(--rule); background: var(--paper-2); }
.ep-page img { display: block; width: 100%; height: auto; }

/* সব পাতা: the issue laid out as tiles in the stage, in place of the page. */
.ep-all ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px;
}
.ep-step { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.ep-step span { color: var(--ink-3); font-size: 14px; }
/* Share this page (09-24). Bordered like .ep-btn, each network in its own
   colour only on the icon, so the row reads as one set of controls. */
.ep-share {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.ep-share__label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-inline-end: 4px; }
.ep-share__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font: inherit; font-size: 14px; line-height: 1.4;
    color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
    cursor: pointer; text-decoration: none;
}
.ep-share__btn:hover { background: var(--paper-2); }
/* The article's ডাউনলোড link sits in the byline beside শেয়ার. */
.dl-btn {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--accent-2); font-weight: 600; text-decoration: none;
}
.dl-btn:hover { color: var(--accent-2-ink); text-decoration: underline; text-underline-offset: 3px; }
.dl-btn svg { flex: none; }
.ep-share__btn svg { flex: none; }
.ep-share__btn--fb svg { color: #1877f2; }
.ep-share__btn--wa svg { color: #1faa53; }
@media print { .ep-share { display: none; } }
.ep-step #epPrev { margin-inline-start: auto; }

/* The calendar: one month, Sunday first as the reference. Days with an issue
   are links in সবুজ; the issue on screen is filled with the bar's green, the
   same mark as the live pager number. */
.ep-cal { padding: 10px 10px 12px; }
.ep-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.ep-cal__btn {
    font: inherit; font-size: 18px; line-height: 1; width: 26px; height: 26px; cursor: pointer;
    color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule);
}
.ep-cal__btn:hover:not(:disabled) { border-color: var(--ink-3); }
.ep-cal__btn:disabled { opacity: .35; cursor: default; }
.ep-cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; font-size: 13px; }
.ep-cal__grid th { font-weight: 600; font-size: 12px; color: var(--ink-3); padding: 2px 0 6px; }
.ep-cal__grid td { padding: 2px 0; }
.ep-cal__grid td span, .ep-cal__grid td a {
    display: block; width: 26px; height: 26px; line-height: 24px; margin: 0 auto;
    border: 1px solid transparent;
}
.ep-cal__grid td span { color: var(--ink-3); }
.ep-cal__issue { color: var(--accent-2-ink); font-weight: 700; border-color: var(--accent-2); }
.ep-cal__issue:hover { background: var(--paper-2); }
.ep-cal__issue.is-live { background: var(--bar); border-color: var(--bar); color: var(--bar-ink); }

/* The page list: the reference's আজকের পত্রিকা box, one line per page. */
.ep-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.ep-list li { border-top: 1px solid var(--rule); }
.ep-list li:first-child { border-top: 0; }
.ep-link {
    display: flex; gap: 8px; width: 100%; padding: 9px 12px; cursor: pointer; text-align: start;
    font: inherit; font-size: 15px; color: var(--ink-2); background: none; border: 0;
}
.ep-link::before { content: "\2192"; color: var(--ink-3); }
.ep-link:hover { color: var(--accent-ink); }
.ep-link.is-live { color: var(--accent-ink); font-weight: 700; }
.ep-link.is-live::before { color: var(--accent); }

.ep-noscript ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 18px; }
.ep-noscript h3 { font-size: 16px; margin: 14px 0 6px; }
.ep-noscript a { color: var(--accent-2-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Under 1100px the side column goes below the stage and the rail becomes a
   strip you swipe - three columns beside a page image leave none readable. */
@media (max-width: 1100px) {
    /* minmax(0,1fr), not 1fr: a 1240px scan in a 1fr track sets the track's
       minimum to its own width and the body scrolls sideways on a phone. */
    .ep-grid { grid-template-columns: minmax(0, 1fr); }
    .ep-rail, .ep-side { position: static; }
    .ep-stage { order: 1; }
    .ep-rail { order: 2; }
    .ep-side { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
    .ep-box + .ep-box { margin-top: 0; }
    .ep-rail__list {
        grid-auto-flow: column; grid-auto-columns: 110px; max-height: none;
        overflow-x: auto; overflow-y: hidden; padding-bottom: 10px;
    }
}
@media (max-width: 600px) {
    .ep-side { grid-template-columns: 1fr; }
    .ep-box + .ep-box { margin-top: var(--gap); }
    /* সব পাতা takes its own line so আগের / count / পরের stay together. */
    .ep-step > [data-view] { flex: 1 0 100%; }
    .ep-step #epPrev { margin-inline-start: 0; }
    .ep-step #epNext { margin-inline-start: auto; }
}

@media print {
    .nav, .ticker, .foot__note, .progress, .mast__row { display: none; }
    /* Printing the e-paper means printing the PAGE, not the viewer around it. */
    .ep-rail, .ep-side, .ep-pager, .ep-step, .ep-all, .ep-sample, .pagehead { display: none; }
    .ep-page[hidden] { display: block; }
    .ep-grid { display: block; }
    .ep-page { border: 0; background: none; }
    .ep-page img { width: 100%; }
    /* Hide the screen wordmark (a <picture> that may have picked the light
       cut under a dark scheme) for the black one paper prints with. */
    .mast__img, .mast__band { display: none; }
    /* Print has the width to spare, so paper keeps the full inch. */
    .mast__print { display: block; height: 1in; width: auto; }
    body { background: #fff; }
    /* The masthead's tint is a screen device: on paper it would print as a
       grey slab across the top of every page. Ink to plain black too. */
    .mast { background: none; color: #000; border-bottom: 1px solid #ccc; }
    .mast__meta, .mast__sep { color: #333; }
    .story__fig, .band { break-inside: avoid; }
    /* An article on paper / in the downloaded PDF is the article alone: no
       related-stories rail, no site footer, no on-screen buttons. */
    .article { display: block; padding-top: 12px; }
    .article .aside, .foot, .skip, .byline button, .dl-btn { display: none; }
    .prose figure, .prose blockquote { break-inside: avoid; }
    .prose h2 { break-after: avoid; }
    .mast__when { color: #333; }
}