/* ==================================================================
   Site-wide "paper notebook" design system.
   The palette itself (paper/ink/yellow-mint highlighters) lives in
   tokens.css as the one fixed light theme used everywhere. This file
   carries the rest of the notebook language on top of that: flat
   rectangular surfaces, ink-bordered buttons, highlighter-style notes
   and the ledger-style card/list treatments — applied globally so
   every route reads as the same diary, not just the home page.
   ================================================================== */

/* ---- typography accents ---- */
.eyebrow{color:var(--ink-2)}

/* ---- header: flat paper bar, no glass/blur/shadow ---- */
.site-head{background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--line)}
.brand{color:var(--ink)}
.brand b{color:var(--ink)}
.brand:hover b{color:var(--ink)}
.brand .mark{color:var(--ink)}
.brand:hover .mark{color:var(--ink); transform:none}
.brand span{color:var(--ink-3)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ink)}

/* ---- masthead strip: thin-lined promise bar under the header ---- */
.masthead-strip{border-bottom:1px solid var(--line)}
.masthead-strip ul{list-style:none;margin:0;padding:.65rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem}
.masthead-strip li{margin:0;display:flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:600;letter-spacing:.03em;color:var(--ink-2)}
html[lang="bn"] .masthead-strip li{letter-spacing:0;font-size:.82rem}
.masthead-strip li::before{content:"";width:7px;height:7px;background:var(--ink);flex:0 0 auto}
.masthead-strip .mh-break{display:none}
@media (max-width:640px){
  .masthead-strip ul{padding:.35rem 0; gap:.35rem .55rem; row-gap:.1rem}
  .masthead-strip li{font-size:.66rem; gap:.3rem; white-space:nowrap}
  html[lang="bn"] .masthead-strip li{font-size:.7rem}
  .masthead-strip li::before{width:5px; height:5px}
  /* forces the wrap point after the 3rd badge (home.js inserts this empty
     li there) so flexbox lands the five badges as two independently
     centered rows — 3 then 2 — instead of an uneven, looser cascade */
  .masthead-strip .mh-break{display:block; flex-basis:100%; width:0; height:0; margin:0; padding:0}
  .masthead-strip .mh-break::before{content:none}
}

/* ---- buttons: rectangular, ink-bordered, no pill radius ---- */
.btn{border-radius:0;border-color:var(--ink)}
.btn-primary{border-color:var(--ink)}
.btn-quiet{border-color:var(--line-2); color:var(--ink-2)}
.icon-btn{border-radius:0;border-color:var(--ink)}

/* ---- tags: keep the pill shape (a "small functional control"), flatten
   the colour system down to the yellow / mint highlighter pair + a
   neutral outline for everything else ---- */
.tag{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.tag-amber,
.tag-brick{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.tag-accent{background:var(--slate-soft);border-color:var(--slate-soft);color:var(--slate)}
.tag-slate{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
/* the constant "Unverified" badge — a highlighter mark, not an outline pill */
.tag-ghost{background:var(--accent-soft);border-color:var(--accent-soft);color:#3a3320;font-weight:600}

/* ---- cards / boxes: rectangular, line-based, no shadow ---- */
.card,
.stat,
.sum-stat,
.glance,
.note,
.principle,
.official-response,
.empty,
.fin-card{box-shadow:none}
.card-link:hover{border-color:var(--ink)}
.fin-card:hover{transform:none; box-shadow:none; border-color:var(--ink)}

/* the "what you can do here" box reads as a sticky/highlighter note */
.glance{background:var(--accent-soft); border-color:var(--accent-soft)}
.glance li{border-bottom-color:#00000014}
.glance .k{color:#3a3320}

/* the closing principle box, elsewhere teal, becomes a mint note here */
.principle{background:var(--slate-soft); border-color:var(--slate-soft)}
.principle .big{color:var(--slate)}

/* "How it works" — steps list + closing "Nagorik Diary" principle box.
   Side-by-side on wider screens; on mobile the principle box (already
   the grid's second/last DOM child) drops below the steps instead of
   being squeezed into a narrow right-hand column. */
.how-grid{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
@media (max-width:820px){ .how-grid{grid-template-columns:1fr} }

/* Self-hosted (not Google-Fonts-linked, so it respects the site's
   style-src 'self' CSP) handwriting face for the hero card's two
   hand-written accents only. */
@font-face{
  font-family:"Caveat";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/caveat-700.woff2") format("woff2");
}
@font-face{
  font-family:"Atma";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/atma-bengali-600.woff2") format("woff2");
}

/* ==================================================================
   Hero — illustrated "individual voices to collective demands" scene.
   Scoped entirely to .hero-* classes so no other page/card is touched;
   this is the one place on the site allowed a shadow and a tilt, since
   it's a literal sheet-of-paper illustration rather than a UI card. */

.hero-grid{align-items:start}
@media (min-width:860px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)} }

/* the two lede lines read as one block, not two separate paragraphs */
.hero .lede{margin-bottom:.4em}

/* eyebrow + trailing rule */
.hero-eyebrow{display:flex;align-items:center;gap:.9rem;margin:0 0 1.1rem}
.hero-eyebrow span{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.hero-eyebrow-rule{flex:1 1 auto;max-width:230px;height:1px;background:var(--line-2)}
html[lang="bn"] .hero-eyebrow span{letter-spacing:0;text-transform:none;font-size:.85rem}

/* invitation marker — a hand-drawn highlighter-pen shape behind the text,
   with a single marker-stroke underline drawn low inside its own box.
   Both SVGs stretch to the text's actual box (preserveAspectRatio:none),
   so the same markup works for the shorter/longer bn and en strings. */
.hero-marker{
  position:relative;display:inline-block;margin:1.1rem 0 1rem;
  padding:.5rem 1.15rem .85rem 1rem;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;white-space:nowrap;
}
html[lang="bn"] .hero-marker{letter-spacing:0;text-transform:none;font-size:.92rem;white-space:normal}
.hero-marker-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-marker-bg path{fill:var(--accent-soft)}
.hero-marker-text{position:relative;z-index:1;color:var(--ink)}
.hero-marker-line{position:absolute;left:.75rem;bottom:.1rem;width:calc(100% - 2.3rem);height:8px;z-index:1}
.hero-marker-line path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}

/* primary CTA gets a trailing arrow, matching the illustrated button */
.hero-btn-row{margin:0 0 1.5rem;gap:.8rem}
.hero-btn-primary{display:inline-flex;align-items:center;gap:.55rem}
.hero-btn-arrow{font-weight:700}

/* reassurance row — plain icon + label pairs, no pill fill */
.hero-reassure{column-gap:1.3rem;row-gap:.5rem;align-items:center}
.hero-reassure li{background:transparent;display:flex;align-items:center;gap:.4rem;padding:0;border:0;border-radius:0;font-size:.78rem;font-weight:500;color:var(--ink-2);line-height:1.3}
.hero-reassure svg{color:var(--ink);flex:0 0 auto}

/* hero board — the pinned sticky-note scene. Drawn once at a fixed
   590x500 design size (.hero-stage) and scaled down as a whole via the
   --s custom property, so every absolutely-positioned piece (tape,
   notes, arrows, hand-written lines) keeps its drawn proportions at
   any viewport instead of being reflowed. */
.hero-board{
  --yellow:var(--accent-soft); --mint:var(--slate-soft);
  --board-paper:#f8f5ea; --board-grid:rgba(70,62,30,.07);
  margin:0; position:relative;
  width:calc(590px * var(--s,1)); height:calc(500px * var(--s,1));
  max-width:100%;
}
.hero-stage{position:absolute;left:0;top:0;width:590px;height:500px;transform:scale(var(--s,1));transform-origin:0 0}

.hero-tape{
  position:absolute;left:422px;top:10px;width:121px;height:44px;
  background:var(--accent-soft);transform:rotate(-2.4deg);
}
.hero-sheet-back{
  position:absolute;left:16px;top:49px;width:581px;height:394px;
  background:#e7e0cb;transform:rotate(1.4deg);
  box-shadow:0 10px 22px -12px rgba(60,50,20,.35);
}
.hero-paper{
  position:absolute;left:4px;top:37px;width:581px;height:394px;
  background-color:#ffffff;
  background-image:
    linear-gradient(var(--board-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--board-grid) 1px,transparent 1px);
  background-size:16px 16px;
  transform:rotate(-1.2deg);
  box-shadow:0 1px 1px rgba(60,50,20,.12),0 2px 6px rgba(60,50,20,.08),0 22px 30px -16px rgba(60,50,20,.38);
}

.hero-clip{position:absolute;left:20px;top:-16px;width:28px;height:64px;transform:rotate(12deg);overflow:visible}
.hero-clip path{fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

.hero-hand{position:absolute;margin:0;font-family:"Caveat",var(--serif);font-weight:700;color:var(--ink);transform-origin:left center}
.hero-hand-title{left:70px;top:30px;width:495px;max-width:calc(100% - 90px);font-size:29px;line-height:36px;transform:rotate(-2.2deg)}
.hero-hand-foot{right:34px;top:330px;left:28px;width:auto;font-size:24px;line-height:28px;text-align:right;transform:rotate(-2.2deg);transform-origin:right center}

.hero-scribble{position:absolute;overflow:visible}
.hero-scribble path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.hero-scribble-title{left:67px;top:76px;width:376px;height:10px}
.hero-scribble-foot{left:28px;top:316px;width:524px;height:14px}

/* sticky notes */
.hero-note{
  position:absolute;width:156px;min-height:165px;padding:12px 16px 14px;
  box-shadow:0 1px 1px rgba(60,50,10,.12),0 4px 8px -2px rgba(60,50,10,.22),0 10px 16px -8px rgba(60,50,10,.18);
}
.hero-note-num{display:block;padding-bottom:6px;font-size:15px;line-height:18px;font-weight:700;color:var(--ink);border-bottom:1px solid rgba(60,50,10,.4)}
.hero-note h3{margin:11px 0 0;font-size:26px;line-height:30px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.hero-note p{margin:7px 0 0;font-size:15px;line-height:19.5px;color:#4b4636}
.hero-n1{left:32px;top:118px;background:var(--yellow);transform:rotate(1deg)}
.hero-n2{left:212px;top:121px;background:var(--mint);transform:rotate(-2.5deg)}
.hero-n3{left:400px;top:107px;background:var(--yellow);transform:rotate(.7deg)}

.hero-arrow{position:absolute;width:22px;height:13px;overflow:visible}
.hero-arrow path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-a1{left:189px;top:206px}
.hero-a2{left:373px;top:205px}

/* Bangla has no true handwriting face on the system, and synthetic
   italic just skews Noto Serif Bengali's glyphs rather than reading as
   handwritten — so bn gets a plain, slightly smaller, less heavy serif
   with its underline pulled in closer instead of faking a slant. */
html[lang="bn"] .hero-hand{font-family:var(--serif);font-style:normal;font-weight:700}
html[lang="bn"] .hero-hand-title{font-size:25px;line-height:32px}
html[lang="bn"] .hero-hand-foot{font-size:20px;line-height:26px}
html[lang="bn"] .hero-scribble-title{top:64px}

@media (max-width:1140px){ .hero-board{justify-self:center} }
@media (max-width:700px){ .hero-board{--s:.72} }
@media (max-width:460px){ .hero-board{--s:.56} }
@media (max-width:360px){ .hero-board{--s:.48} }

/* ---- "Browse by issue" tiles: a bordered ledger table, not four
   separate shadowed cards ---- */
.contrib-grid{gap:0; border:1px solid var(--line)}
.contrib-grid > .card{border:0; border-radius:0; border-inline-end:1px solid var(--line); border-block-end:1px solid var(--line)}
.contrib-grid > .card:last-child{border-inline-end:0}
@media (max-width:940px){
  .contrib-grid > .card:nth-child(2n){border-inline-end:0}
}
/* Phone widths: keep the issue tiles paired two-to-a-row (like the tablet
   layout above) instead of the auto-fit grid dropping to one per row.
   minmax(0,1fr) + min-width:0 let each cell shrink below its content's
   natural width — plain "1fr"/no min-width let a long, non-wrapping issue
   tag (e.g. "Improvement observed") force the column wider than the
   viewport, pushing the whole page into horizontal scroll. The tag itself
   is allowed to wrap here so it never needs that extra width. */
@media (max-width:520px){
  .contrib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contrib-grid > .card{border-inline-end:1px solid var(--line); min-width:0; padding:.9rem .85rem}
  .contrib-grid > .card:nth-child(2n){border-inline-end:0}
  .contrib-grid .tag{white-space:normal; text-align:start}
}

/* ---- experience cards: a diary ledger entry, not a shadowed card ---- */
.experience-card{border-radius:0; box-shadow:none; border-inline-start-width:1px; background:transparent}
.experience-card:hover{transform:none; box-shadow:none; border-color:var(--line)}
.experience-card .experience-card-read{
  color:var(--paper); background:var(--ink); text-decoration:none;
  padding:.4rem .8rem; border-radius:0; font-weight:700; font-size:.82rem; gap:.3rem;
}
.experience-card .experience-card-read:hover{background:var(--ink); text-decoration:none}
.experience-card .experience-card-read span{display:inline-block}
.experience-card .voice-foot{border-top-style:solid; border-top-color:var(--line-2)}
.corrob-row{border-top-color:var(--line-2)}
.corrob-row .btn{background:var(--card); border-color:var(--ink); color:var(--ink)}
.corrob-row .btn[aria-pressed="true"]{color:var(--ink-3); border-color:var(--line-2)}

/* "Recent experiences" and any other single-column listing — records
   separated by a rule instead of laid out as a card grid */
.ledger-grid{grid-template-columns:1fr; gap:0}
.ledger-grid .experience-card{border-inline:0; border-block-start:1px solid var(--line); border-block-end:0}
.ledger-grid .experience-card:first-child{border-block-start:1px solid var(--line)}
.ledger-grid .experience-card-body{padding-inline:0}
.ledger-grid .experience-card-actions{padding-inline:0}
.ledger-grid .experience-card .voice-foot{padding-inline:0}

/* Home "Recent experiences" row layout only — match the "More details" pill
   and the split "Me too" button on box model (border/padding/font/line-height)
   so the two sit at the same height. Scoped to .experience-card-row so no
   other page's cards or buttons are affected. */
.experience-card-row .experience-card-read{
  border:1px solid var(--ink); box-sizing:border-box;
  padding:.6rem .9rem; font-size:.85rem; line-height:1;
}
.experience-card-row .cta-split-label,
.experience-card-row .cta-split-count{padding:.6rem .9rem; font-size:.85rem; line-height:1}

/* ---- footer ---- */
.site-foot{background:var(--paper); border-top:1px solid var(--line)}

.how-principle{margin:1rem 0 0;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--accent-2)}
.how-review{justify-content:flex-start}
.how-review h3{margin:0 0 .8rem}
.how-review ol{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.how-review li{display:grid;gap:.15rem}
.how-review li b{color:var(--ink)}
.how-review li span{font-size:.88rem;color:var(--ink-2)}

/* Logo mark: colourful bars, animated on hover */
.brand .mark rect,.brand .mark circle{transition:transform .3s ease, opacity .3s ease; transform-box:fill-box; transform-origin:50% 100%}
.brand .mark rect:nth-child(1){stroke:#2f6fed; opacity:.55; transform-origin:center}
.brand .mark rect:nth-child(2){fill:#f59e0b; opacity:1}
.brand .mark rect:nth-child(3){fill:#10b981; opacity:1}
.brand .mark rect:nth-child(4){fill:#2f6fed; opacity:1}
.brand .mark circle{fill:#e11d48; transform-origin:center}
.brand:hover .mark rect:nth-child(1){opacity:1}
.brand:hover .mark rect:nth-child(2){transform:scaleY(1.3)}
.brand:hover .mark rect:nth-child(3){transform:scaleY(.75)}
.brand:hover .mark rect:nth-child(4){transform:scaleY(1.45)}
.brand:hover .mark circle{transform:translateY(-1px) scale(1.25)}