@charset "UTF-8";
/* ==========================================================================
   Raju Bista — MP Darjeeling
   Design system. One stylesheet, ordered from tokens outward.

   Palette reasoning: white dominates; charcoal carries the type; saffron is
   reserved for action and leadership; a deep pine green — closer to the tea
   gardens than to a primary — marks development and data. Party colours
   appear as accents, never as fields.
   ========================================================================== */

/* --------------------------------------------------------------- 1 TOKENS */

:root {

  /* ======================================================================
     BRAND — three colours, three meanings, held consistently site-wide.
       SAFFRON   identity & action     buttons, active states, emphasis
       WHITE     clarity & space       the dominant surface
       DEEP GREEN trust & authority    grounds, footer, utility bar
     ====================================================================== */

  /* --- SAFFRON ------------------------------------------------------- */
  --brand-saffron:       #F28C18;   /* the accent. Fills and dark grounds. */
  --brand-saffron-dark:  #E87512;   /* pressed / hover on fills            */
  --brand-saffron-light: #FFB04A;   /* highlights on dark ONLY (1.8:1 on white) */
  --brand-saffron-ink:   #A85209;   /* saffron as TEXT on light — 5.4:1    */
  --brand-saffron-wash:  #FEF4E6;   /* tinted surface                      */

  /* --- GREEN --------------------------------------------------------
     The family, exactly as specified. Each tone is annotated with what it
     can actually carry, because that is what decides where it may be used.

     #188445 is a MID tone: white on it is 3.48:1 and it is 3.48:1 as text
     on white. It fails both directions for body copy, so it is an accent
     and a decorative fill — never a ground with text on it, and never the
     colour of a link or a label. That is the brief's own guidance under
     GREEN TEXT, applied throughout.                                     */

  /* --- GREEN — every tone derived from the master ---------------------

     MASTER  #188445  =  rgb(24,132,69)  =  hue 145.00deg  sat 69.2%  L 30.6%

     Nothing below is a chosen colour. Every shade holds hue 145.00 and
     saturation 69.2% exactly, and varies lightness alone — so the whole
     family is #188445 brightened or darkened, and re-deriving it from a
     different master is a matter of changing one number.

     Master is 4.75:1 on white, so it works as green TEXT at any size. It
     is 4.75:1 the other way too, which is why it is not a ground with body
     copy on it — the grounds are the darker members below.               */

  --brand-green:        #188445;   /* MASTER. L 31%. Text on white 4.75:1,
                                      accents, hairlines, the wedge, borders */
  --brand-green-mid:    #1DA053;   /* L 37%. Hover and decorative only       */
  --brand-green-dark:   #14703B;   /* L 26%. Inset panels. White 6.16:1      */
  --brand-green-deep:   #10562D;   /* L 20%. THE GROUND for dark sections.
                                      White 8.78, body 6.81, labels 5.71,
                                      saffron eyebrows 4.84 — all clear AA   */
  --brand-green-darker: #0B3C20;   /* L 14%. Footer, hero floor. White 12.49 */
  --brand-green-abyss:  #092F19;   /* L 11%. Photo scrims. White 14.66       */
  --brand-green-light:  #DCF9E8;   /* L 92%. Light panels, chips on dark     */
  --brand-green-soft:   #EEFCF4;   /* L 96%. Softest surface                 */

  --brand-green-rgb:    24, 132, 69;      /* master, for rgba() glows        */
  --brand-green-deep-rgb: 16, 86, 45;
  --brand-green-abyss-rgb: 9, 47, 25;

  /* Two tones derived on the same hue, under the brief's clause allowing
     gradient stops to be adjusted to preserve visual depth. Neither is a
     new brand colour — both are the family at other lightnesses.
       scrim: the old overlay base was 10% lightness. #10562D is 16%, so
              mapping scrims onto it lifted every photo overlay and cost
              the hero text its contrast.
       panel: #14703B carries white and one light tone; nothing quieter. */
  --brand-green-scrim: var(--brand-green-abyss);   /* photo overlays. White 14.78:1 */
  --brand-green-panel: var(--brand-green-dark);   /* inset panels. White 5.85:1    */

  /* kept so existing rules resolve; both point into the family above */
  --brand-green-line:  var(--brand-green);
  --brand-green-wash:  var(--brand-green-soft);

  /* --- WHITE & SURFACES ---------------------------------------------- */
  --white:        #FFFFFF;
  --surface-soft: #F8F8F5;   /* cool break between white sections          */
  --surface-warm: #FCFAF6;   /* warm break — pairs with saffron            */

  /* --- NEUTRALS ------------------------------------------------------ */
  --text-primary:   #17231D;   /* 16.2:1 — never pure black                */
  --text-secondary: #526057;   /*  6.6:1 — body, small labels              */
  --text-muted:     #7A837D;   /*  3.9:1 — LARGE text and decoration only  */
  --border-light:   #E5E7E3;
  --border-medium:  #D4D9D4;
  --background-light: #F8F8F5;

  /* --- ON DEEP GREEN -------------------------------------------------
     A neutral scale, not a green-tinted one. Green-tinted greys were a
     large part of why the old build read green even in its body copy.   */
  --on-green:        #FFFFFF;         /* 12.2:1 */
  --on-green-strong: #DEE4E1;         /*  7.79:1 on #10562D — body */
  --on-green-muted:  #C8D3CD;         /*  6.53:1 — labels, captions */
  --on-green-faint:  #B8C5BE;         /*  5.63:1 — quietest legible tone */
  --on-green-line:   rgba(255,255,255,.16);

  /* --- NAVIGATION ---------------------------------------------------- */
  --nav-ink:  #14703B;   /* navigation text on the white bar */

  /* --- SEMANTIC ------------------------------------------------------- */
  --ok:   #14703B;
  --warn: #A85209;
  --info: #1F4F7A;

  /* ======================================================================
     LEGACY ALIASES
     Every name the existing 3,400 lines already reference, re-pointed at
     the new system. This is what lets the whole site change from here.
     ====================================================================== */

  --paper:        var(--white);
  --mist:         var(--surface-soft);
  --mist-deep:    var(--border-light);
  --bone:         var(--surface-warm);
  --bone-deep:    var(--border-light);
  --ink:          var(--text-primary);
  --ink-soft:     var(--text-secondary);
  --slate:        var(--text-secondary);
  --line:         var(--border-light);
  --line-strong:  var(--border-medium);

  --saffron:      var(--brand-saffron);
  --saffron-deep: var(--brand-saffron-dark);
  --saffron-lt:   var(--brand-saffron-light);
  --saffron-ink:  var(--brand-saffron-ink);
  --saffron-wash: var(--brand-saffron-wash);

  /* Legacy names, re-pointed by ROLE. --pine-ink is links and small text
     on white, so it takes #14703B (5.85:1); --brand-green at 3.48:1 would
     put every green link under the line. */
  --pine:         var(--brand-green-dark);
  --pine-deep:    var(--brand-green-deep);
  --pine-ink:     var(--brand-green-dark);
  --pine-wash:    var(--brand-green-soft);
  --green-lt:     var(--brand-green-mid);

  /* --night is the dark GROUND — the hero, every dark section, the
     closing band and the footer all resolve through it. Pointing it at
     --brand-green (#188445, white 3.48:1) put the hero lede, the eyebrow
     and the scroll cue under AA. It takes the deep tone. */
  --night:        var(--brand-green-deep);
  --night-soft:   var(--brand-green-panel);
  --night-line:   var(--brand-green);
  --night-text:   var(--on-green-strong);

  /* Brass is retired. A fourth accent contradicted the three-colour
     meaning system, so its two roles fold into the saffron scale. */
  --brass:        var(--brand-saffron-light);
  --brass-ink:    var(--brand-saffron-ink);
  --brass-soft:   rgba(255,176,74,.38);
  --brass-rule:   rgba(168,82,9,.34);


  /* type */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Devanagari", ui-sans-serif,
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* fluid type scale */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  /* --t-2xl / --t-3xl / --t-4xl / --t-5xl live in the display-scale block
     further down (section 1 TOKENS). Declaring them here too had no effect —
     the later block always won. Edit them there. */

  /* space */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* --section-y and --wrap also live in the display-scale block below. */

  /* structure */
  --wrap-narrow: 46rem;
  --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 3rem);
  --radius: 3px;
  --radius-lg: 5px;

  /* Shadows are neutral-warm, not green. Green-tinted shadows put a wash
     of green over every white card on the site. */
  --shadow-sm: 0 1px 2px rgba(23, 35, 29, .05);
  --shadow:    0 2px 10px rgba(23, 35, 29, .06), 0 1px 3px rgba(23, 35, 29, .04);
  --shadow-lg: 0 12px 40px rgba(23, 35, 29, .10), 0 2px 8px rgba(23, 35, 29, .05);

  /* --ease and --dur live in the display-scale block below. */
}

/* ----------------------------------------------------------- 2 BASE RESET */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
p  { margin: 0 0 var(--s-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }

a { color: var(--pine-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--saffron-ink); }

/* Hindi needs a touch more line-height and no tight tracking */
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { letter-spacing: 0; line-height: 1.3; }
:lang(hi) body, :lang(hi) p, :lang(hi) li { line-height: 1.8; }

/* Media room — real images in place of photo-slot */
  .mr .mr-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:inherit;
    background:rgba(255,255,255,.04);
  }
  .mr .mr-story__media{display:block;overflow:hidden}

/* ------------------------------------------------------- 3 ACCESSIBILITY */

:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 999;
  background: var(--night); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip:focus-visible { top: var(--s-4); color: #fff; }

.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------- 4 LAYOUT */

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--mist  { background: var(--mist); }
.section--night { background: var(--night); color: var(--night-text); }
.section--night h2, .section--night h3, .section--night h4 { color: #fff; }
.section--night a { color: #fff; }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 62rem) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-8); }
}

/* ------------------------------------------------- 5 TYPE COMPONENTS */

/* The eyebrow is a locator: it always answers "where am I / what is this". */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; flex: none;
  background: var(--saffron);
}
.section--night .eyebrow { color: #B8C5BE; }
:lang(hi) .eyebrow { letter-spacing: .04em; text-transform: none; }

.h-display { font-size: var(--t-3xl); font-weight: 600; }
.h-section { font-size: var(--t-2xl); font-weight: 600; margin-bottom: var(--s-5); }
.h-card    { font-size: var(--t-lg);  font-weight: 600; }

.lede {
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 46ch;
}
.section--night .lede { color: var(--night-text); }

.note {
  font-size: var(--t-sm); line-height: 1.6; color: var(--slate);
  max-width: 62ch;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------ 6 BUTTONS */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .8125rem 1.375rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 140ms var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--saffron); color: var(--ink); border-color: var(--saffron);
}
.btn--primary:hover { background: var(--saffron-deep); border-color: var(--saffron-deep); color: #fff; }

.btn--ink { background: var(--pine-deep); color: #fff; border-color: var(--pine-deep); }
.btn--ink:hover { background: var(--pine-ink); border-color: var(--pine-ink); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }

.section--night .btn--ghost { color: #fff; border-color: var(--night-line); }
.section--night .btn--ghost:hover { border-color: #fff; background: transparent; }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* -------------------------------------------------------- 7 SOURCE CHIP */
/* Every statistic on this site carries one of these. It is the site's
   central promise made visible: authority through evidence. */

.src {
  display: inline-flex; align-items: baseline; gap: .4em;
  font-family: var(--font-mono);
  font-size: var(--t-xs); line-height: 1.4;
  color: var(--slate); text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
  padding-bottom: 1px;
}
.src:hover { color: var(--pine-ink); border-bottom-color: var(--pine-ink); }
.src__mark { font-size: .9em; opacity: .7; }
.section--night .src { color: #B8C5BE; border-bottom-color: var(--night-line); }
.section--night .src:hover { color: #fff; border-bottom-color: #fff; }

/* --------------------------------------------------------- 8 PHOTO SLOT */
/* Renders when a photograph has not yet been supplied, naming exactly what
   belongs there and where to put it. Never ships as decoration. */

.photo-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); padding: var(--s-5);
  min-height: 10rem;
  background:
    repeating-linear-gradient(-45deg,
      var(--mist) 0 10px, var(--mist-deep) 10px 20px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}
.photo-slot__icon {
  width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-strong);
  position: relative;
}
.photo-slot__icon::after {
  content: ""; position: absolute; inset: .5rem;
  border: 2px solid var(--slate); border-radius: 1px;
  border-bottom-width: 6px;
}
.photo-slot__alt {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft);
  max-width: 26ch; line-height: 1.45;
}
.photo-slot__path {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--slate); background: var(--paper);
  padding: 2px 6px; border-radius: 2px; border: 1px solid var(--line);
  word-break: break-all;
}

.photo-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1250;
  overflow: hidden;
}

.photo-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* ============================================================== 9 HEADER */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }

/* utility bar — contact details and language, always reachable */
.util__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 2.25rem; flex-wrap: wrap;
}
.util__group { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.util__item { display: inline-flex; align-items: center; gap: .4em; }

.lang-switch { display: inline-flex; align-items: center; gap: 1px; }
.lang-switch a {
  padding: 3px 9px; border-radius: 2px;
  font-weight: 500; line-height: 1.4;
}
.lang-switch a[aria-current="true"] { background: var(--saffron); color: var(--ink); }

/* masthead */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 4.5rem;
}

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand__mark { width: 2.5rem; height: 2.5rem; flex: none; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; gap: 1px; }
.brand__name {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); line-height: 1.1;
}
.brand__role {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--slate); line-height: 1.2;
}
:lang(hi) .brand__role { letter-spacing: .02em; text-transform: none; font-size: 11px; }

/* desktop nav */
.nav { display: none; }
@media (min-width: 64rem) {
  .nav { display: flex; align-items: center; gap: var(--s-1); }
}
.nav a {
  padding: .5rem .6875rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--mist); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  background: var(--saffron); border-radius: 1px;
}

.header-cta { display: none; }
@media (min-width: 64rem) { .header-cta { display: inline-flex; } }

/* mobile toggle */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0 .625rem;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); cursor: pointer;
}
@media (min-width: 64rem) { .burger { display: none; } }
.burger span {
  display: block; height: 2px; background: var(--ink); border-radius: 1px;
  transition: transform var(--dur) var(--ease), opacity 160ms var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: 5.5rem var(--gutter) var(--s-7);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 320ms var(--ease), visibility 320ms;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
@media (min-width: 64rem) { .drawer { display: none; } }

.drawer__list { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--line); }
.drawer__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; font-size: var(--t-lg); font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.drawer__list a[aria-current="page"] { color: var(--saffron-ink); font-weight: 600; }
.drawer__list a::after {
  content: "→"; color: var(--line-strong); font-size: 1rem;
}

/* sticky thumb bar — mobile only, keeps the office one tap away */
.thumb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(23,35,29,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 64rem) { .thumb-bar { display: none; } }
.thumb-bar a {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9375rem var(--s-3); min-height: 3.25rem;
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  color: var(--ink);
}
.thumb-bar a + a { border-left: 1px solid var(--line); background: var(--saffron); }
body.has-thumb-bar { padding-bottom: 3.5rem; }
@media (min-width: 64rem) { body.has-thumb-bar { padding-bottom: 0; } }

/* ================================================================ 10 HERO */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) clamp(2rem, 1rem + 4vw, 4rem);
  background:
    radial-gradient(120% 90% at 88% 0%, var(--saffron-wash) 0%, transparent 58%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%);
  overflow: hidden;
}

.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); }
}

.hero__name {
  font-size: var(--t-4xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: .95;
  margin: 0 0 var(--s-4);
}
:lang(hi) .hero__name { letter-spacing: -0.01em; line-height: 1.1; }

.hero__rule {
  width: 100%; height: 1px; background: var(--line-strong);
  margin: var(--s-5) 0;
  position: relative;
}
.hero__rule::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 5rem; height: 3px; margin-top: -1px;
  background: var(--saffron);
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .04em; color: var(--slate);
}
.hero__meta strong { color: var(--ink); font-weight: 600; }

.hero__portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--mist);
}
.hero__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__portrait .photo-slot { min-height: 22rem; border: none; border-radius: 0; }

.hero__badge {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  border-top-right-radius: var(--radius);
  font-size: var(--t-xs);
  max-width: 92%;
}
.hero__badge img { width: 1.75rem; height: 1.75rem; object-fit: contain; flex: none; }
.hero__badge span { line-height: 1.35; color: var(--ink-soft); }

/* ------------------------------------------------- 11 RIDGELINE (SIGNATURE) */
/* The constituency runs from the Terai to the high hills. The ridgeline
   encodes that: seven points, ordered by terrain, doubling as a navigator.
   It is the one place the design raises its voice. */

.ridge { margin-top: var(--s-6); }
.ridge__svg { width: 100%; height: auto; overflow: visible; }

.ridge__line {
  fill: none; stroke: var(--saffron); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: ridge-draw 1600ms var(--ease) 260ms forwards;
}
.ridge__fill { fill: url(#ridgeFade); opacity: 0; animation: ridge-fade 900ms var(--ease) 1100ms forwards; }
.ridge__dot { fill: var(--paper); stroke: var(--pine); stroke-width: 2; }
.ridge__base { stroke: var(--line-strong); stroke-width: 1; }

@keyframes ridge-draw { to { stroke-dashoffset: 0; } }
@keyframes ridge-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ridge__line { stroke-dashoffset: 0; animation: none; }
  .ridge__fill { opacity: 1; animation: none; }
}

.ridge__labels {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-top: var(--s-2);
}
.ridge__label {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .01em; color: var(--slate);
  text-align: center; line-height: 1.25;
  padding-top: var(--s-2); border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
@media (min-width: 40rem) { .ridge__label { font-size: 11px; } }

/* full constituency board */
.segments { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 44rem) { .segments { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .segments { grid-template-columns: repeat(3, 1fr); } }

.segment { background: var(--paper); padding: var(--s-5); }
.segment__tier {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
  margin-bottom: var(--s-2);
}
:lang(hi) .segment__tier { letter-spacing: .02em; text-transform: none; }
.segment__tier::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; flex: none;
}
.segment[data-tier="hills"]     .segment__tier::before { background: var(--pine); }
.segment[data-tier="foothills"] .segment__tier::before { background: var(--saffron); }
.segment[data-tier="terai"]     .segment__tier::before { background: var(--line-strong); }

.segment__name { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s-2); }
.segment__note { font-size: var(--t-sm); color: var(--slate); margin: 0; }

/* ===================================================== 12 RECORD / STATS */

.record { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 34rem) { .record { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .record { grid-template-columns: repeat(4, 1fr); } }
.section--night .record { background: var(--night-line); }

.stat { background: var(--paper); padding: var(--s-5) var(--s-5) var(--s-6); }
.section--night .stat { background: var(--night); }

.stat__label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
  margin-bottom: var(--s-3);
}
:lang(hi) .stat__label { letter-spacing: .02em; text-transform: none; }
.section--night .stat__label { color: #B8C5BE; }

.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 600; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.section--night .stat__value { color: #fff; }
.stat__unit { font-size: .5em; font-weight: 500; color: var(--slate); margin-left: .1em; }

/* comparison bars — shows the figure against national and state averages */
.stat__compare { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.cmp { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; }
.cmp__label { font-size: 10.5px; color: var(--slate); line-height: 1.3; }
.section--night .cmp__label { color: #B8C5BE; }
.cmp__val {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.cmp__track {
  grid-column: 1 / -1; height: 3px; background: var(--mist-deep); border-radius: 2px;
  overflow: hidden;
}
.section--night .cmp__track { background: var(--night-line); }
.cmp__bar { height: 100%; border-radius: 2px; width: 0; transition: width 900ms var(--ease); }
.cmp__bar--self  { background: var(--saffron); }
.cmp__bar--other { background: var(--line-strong); }
.section--night .cmp__bar--other { background: #3E5145; }

/* =========================================== 13 LEDGER (SIGNATURE TWO) */
/* The development record set as a ledger, not a poster: monospaced figures,
   hairline rules, an explicit status on every row. Reads as evidence. */

.ledger-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.chip {
  padding: .4375rem .8125rem;
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 100px;
  font-size: var(--t-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--night); color: #fff; border-color: var(--night);
}
.chip__n { font-family: var(--font-mono); font-size: .8em; opacity: .6; margin-left: .35em; }

.ledger-count {
  margin-left: auto; font-family: var(--font-mono);
  font-size: var(--t-xs); color: var(--slate);
}

.ledger { border-top: 2px solid var(--ink); }

.entry {
  display: grid; gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 50rem) {
  .entry {
    grid-template-columns: 1fr 11rem;
    align-items: start;
  }
}
.entry:hover { background: var(--mist); }

.entry__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }

.entry__sector {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--pine-ink); background: var(--pine-wash);
  padding: 3px 7px; border-radius: 2px;
}
:lang(hi) .entry__sector { letter-spacing: .02em; text-transform: none; }

.entry__title { font-size: var(--t-md); font-weight: 600; margin: 0 0 var(--s-2); line-height: 1.3; }
.entry__note  { font-size: var(--t-sm); color: var(--slate); margin: 0 0 var(--s-2); max-width: 62ch; }
.entry__where {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--slate);
  display: inline-flex; align-items: center; gap: .4em;
}
.entry__where::before { content: "◦"; }

.entry__figure { text-align: left; }
@media (min-width: 50rem) { .entry__figure { text-align: right; } }

.entry__amount {
  font-family: var(--font-mono);
  font-size: var(--t-lg); font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entry__amount--none { color: var(--line-strong); }
.entry__outlay {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
  margin-top: 2px;
}
:lang(hi) .entry__outlay { letter-spacing: .02em; text-transform: none; }

/* status uses a shape as well as a colour — never colour alone */
.status {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: 11px; font-weight: 500; color: var(--slate);
}
.status::before {
  content: ""; width: .5rem; height: .5rem; flex: none;
}
.status--completed::before  { background: var(--pine); border-radius: 50%; }
.status--ongoing::before    { background: var(--saffron); border-radius: 50%;
                              box-shadow: 0 0 0 2px var(--saffron-wash); }
.status--sanctioned::before { background: none; border: 2px solid var(--pine); border-radius: 50%; }
.status--proposed::before   { background: none; border: 2px dotted var(--slate); border-radius: 50%; }

.ledger-empty {
  padding: var(--s-8) 0; text-align: center; color: var(--slate);
  border-bottom: 1px solid var(--line);
}

/* sector totals bar */
.totals { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
@media (min-width: 44rem) { .totals { grid-template-columns: repeat(3, 1fr); } }
.total {
  padding: var(--s-4) var(--s-5);
  background: var(--paper); border-left: 3px solid var(--pine);
}
.total__v {
  font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.02em;
}
.total__k { font-size: var(--t-xs); color: var(--slate); margin-top: var(--s-1); }

/* ============================================================== 14 CARDS */

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card__media { background: var(--mist); }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__media .photo-slot { border: none; border-radius: 0; min-height: 11rem; }
.card__body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.card__title { font-size: var(--t-md); font-weight: 600; margin: 0 0 var(--s-2); line-height: 1.32; }
.card__text  { font-size: var(--t-sm); color: var(--slate); margin: 0 0 var(--s-4); }
.card__foot  { margin-top: auto; padding-top: var(--s-3); }

.card a.card__link { text-decoration: none; color: inherit; }
.card a.card__link:hover .card__title { color: var(--saffron-ink); }

/* numbered priority cards — the numbers are a real sequence of priorities */
.priority {
  display: grid; gap: var(--s-4);
  grid-template-columns: auto 1fr;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
}
.priority__num {
  font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 600;
  color: var(--saffron); line-height: 1; letter-spacing: -0.02em;
}
.priority__title { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s-3); }
.priority__anchor {
  display: inline-block; margin-top: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--pine-ink);
  border-left: 2px solid var(--pine); padding-left: var(--s-3); line-height: 1.5;
}
.section--night .priority { border-top-color: var(--night-line); }
.section--night .priority__anchor { color: #1DA053; border-left-color: #1DA053; }

/* =========================================================== 15 TIMELINE */

.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 0; top: .5rem; bottom: 0;
  width: 1px; background: var(--line);
}
@media (min-width: 50rem) { .timeline::before { left: 7.5rem; } }

.milestone {
  position: relative;
  display: grid; gap: var(--s-3);
  padding: 0 0 var(--s-8) var(--s-6);
}
@media (min-width: 50rem) {
  .milestone {
    grid-template-columns: 6.5rem 1fr;
    gap: var(--s-7);
    padding-left: 0;
  }
}
.milestone::before {
  content: ""; position: absolute; left: -4px; top: .5rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--saffron);
}
@media (min-width: 50rem) { .milestone::before { left: calc(7.5rem - 4px); } }

.milestone__year {
  font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 600;
  color: var(--saffron-ink); letter-spacing: -0.02em; line-height: 1.2;
}
@media (min-width: 50rem) { .milestone__year { text-align: right; } }
.milestone__title { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s-3); }
.milestone__body { color: var(--ink-soft); margin: 0; max-width: 58ch; }

/* ================================================= 16 RESULT / DATA BLOCK */

.result {
  display: grid; gap: var(--s-5);
  padding: var(--s-6); background: var(--paper);
  border: 1px solid var(--line); border-top: 3px solid var(--saffron);
}
@media (min-width: 40rem) { .result { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .result { grid-template-columns: repeat(4, 1fr); } }
.result__k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
  margin-bottom: var(--s-2);
}
:lang(hi) .result__k { letter-spacing: .02em; text-transform: none; }
.result__v {
  font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.result__sub { font-size: var(--t-xs); color: var(--slate); margin-top: 2px; }

/* session attendance table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm);
}
table.data caption {
  text-align: left; padding-bottom: var(--s-3);
  font-size: var(--t-xs); color: var(--slate);
}
table.data th, table.data td {
  padding: .75rem var(--s-3); text-align: left;
  border-bottom: 1px solid var(--line);
}
table.data th {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
  font-weight: 500; border-bottom: 2px solid var(--ink);
}
:lang(hi) table.data th { letter-spacing: .02em; text-transform: none; }
table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.meter { display: flex; align-items: center; gap: var(--s-3); min-width: 8rem; }
.meter__track { flex: 1; height: 6px; background: var(--mist-deep); border-radius: 3px; overflow: hidden; }
.meter__bar { height: 100%; background: var(--pine); border-radius: 3px; }

/* =============================================================== 17 FORM */

.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
@media (min-width: 40rem) { .field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }

.field label { font-size: var(--t-sm); font-weight: 600; }
.field__hint { font-size: var(--t-xs); color: var(--slate); }
.field__req  { color: var(--saffron-ink); font-weight: 500; }
.field__opt  { color: var(--slate); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%; padding: .8125rem var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pine-ink); box-shadow: 0 0 0 3px var(--pine-wash); outline: none;
}
.field textarea { min-height: 9rem; resize: vertical; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #b3261e; }
.field__error {
  display: flex; align-items: flex-start; gap: .4em;
  font-size: var(--t-sm); color: #b3261e; font-weight: 500;
}
.field__error::before { content: "!"; font-weight: 700; }

.check { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.check input { width: 1.125rem; height: 1.125rem; margin-top: .3rem; accent-color: var(--pine-ink); }
.check label { font-size: var(--t-sm); font-weight: 400; line-height: 1.55; }

/* honeypot — hidden from people, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  display: grid; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--radius);
  border-left: 3px solid;
}
.alert--ok   { background: var(--pine-wash);    border-color: var(--pine-ink);   color: var(--pine-deep); }
.alert--err  { background: #fdeceb;             border-color: #b3261e;       color: #7d1a15; }
.alert--info { background: var(--saffron-wash); border-color: var(--saffron); color: #8A4207; }
.alert strong { font-weight: 600; }

/* ============================================================= 18 FOOTER */

.site-footer {
  background: var(--night); color: var(--night-text);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-sm);
}
.site-footer a { color: var(--night-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer__top { display: grid; gap: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 50rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); } }

.footer__brand-name {
  font-size: var(--t-lg); font-weight: 600; color: #fff;
  margin: 0 0 var(--s-1); letter-spacing: -0.02em;
}
.footer__brand-role {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .06em; color: #B8C5BE; margin: 0 0 var(--s-5);
}
:lang(hi) .footer__brand-role { letter-spacing: .02em; }

.footer__h {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: #B8C5BE;
  margin: 0 0 var(--s-4); font-weight: 500;
}
:lang(hi) .footer__h { letter-spacing: .03em; text-transform: none; }

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--s-3); }

.footer__contact { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.footer__contact-item { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-3); align-items: start; }
.footer__contact-item svg { width: 1rem; height: 1rem; margin-top: .25rem; fill: #B8C5BE; }

.socials { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--night-line); border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
}
.socials a:hover { border-color: var(--saffron); background: var(--saffron); }
.socials svg { width: 1.0625rem; height: 1.0625rem; fill: var(--night-text); }
.socials a:hover svg { fill: var(--ink); }

.footer__bottom {
  border-top: 1px solid var(--night-line);
  padding-top: var(--s-5);
  display: grid; gap: var(--s-4);
}
@media (min-width: 56rem) {
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer__disclaimer {
  grid-column: 1 / -1;
  font-size: var(--t-xs); color: #7A837D; line-height: 1.6;
  max-width: 90ch; margin: 0; padding-top: var(--s-4);
  border-top: 1px solid var(--night-line);
}

/* ============================================================ 19 UTILITY */

.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

.stack   { display: grid; gap: var(--s-5); }
.stack-6 { display: grid; gap: var(--s-6); }
.center  { text-align: center; }
.mb-0    { margin-bottom: 0; }
.mt-6    { margin-top: var(--s-6); }
.mt-7    { margin-top: var(--s-7); }

.split-head {
  display: grid; gap: var(--s-4); margin-bottom: var(--s-6);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--line);
}
@media (min-width: 56rem) {
  .split-head { grid-template-columns: 1fr auto; align-items: end; }
}
.section--night .split-head { border-bottom-color: var(--night-line); }

.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .5em; align-items: center;
  margin: 0 0 var(--s-4); padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5em; color: var(--line-strong); }
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* clearly marks a link that leaves the site */
.ext::after {
  content: "↗"; display: inline-block; margin-left: .3em;
  font-size: .82em; opacity: .65;
}

.pill {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3125rem .75rem; border-radius: 100px;
  background: var(--saffron-wash); color: var(--saffron-ink);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
}
:lang(hi) .pill { letter-spacing: .02em; text-transform: none; }
.pill--pine { background: var(--pine-wash); color: var(--pine-ink); }

/* the corporate section is visually held apart from political content */
.corporate-zone {
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  background: var(--paper);
  padding: var(--s-6);
}
.corporate-zone .eyebrow::before { background: var(--info); }

/* ============================================================== 20 PRINT */

@media print {
  .site-header, .thumb-bar, .drawer, .btn, .ledger-tools, .socials { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .entry, .milestone { break-inside: avoid; }
}
@charset "UTF-8";
/* ==========================================================================
   DIRECTION C — "STATE"
   Raju Bista, MP Darjeeling · premium upgrade layer

   Loads after rb-system.css. Keeps everything Direction B got right — the
   dark stage, the saffron authority, the impact figures up front — and
   raises the finish to the standard of a head-of-government site.

   WHAT CHANGED AND WHY

   1. The hero is now cinematic and full-bleed. A leader's site opens with
      the leader, at scale, not with a card in a grid.
   2. The impact band went from a flat saffron gradient with dark text to a
      dark stage with very large saffron figures. Reads as an inscription
      rather than a banner — bolder AND more premium at the same time.
   3. A brass hairline enters as the institutional accent. Used only on
      rules and section marks, never on fields. This is the "seal" register.
   4. Type scale is wider: display sizes go up, tracking tightens, and the
      gap between display and body widens so hierarchy carries across a room.
   5. Motion is orchestrated rather than scattered: one staggered entrance on
      load, one reveal on scroll, and image scale on hover. Nothing else.
   6. A film-grain layer sits over dark sections. It is what stops a large
      flat black from looking like an unstyled div.
   ========================================================================== */

/* ------------------------------------------------------------- 1 TOKENS */

:root {
  /* The display scale and motion curve only. All colour now lives in the
     single token block above, so nothing can drift out of step with it. */

  --t-2xl:  clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --t-3xl:  clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --t-4xl:  clamp(3rem, 1.6rem + 6.4vw, 7rem);
  --t-5xl:  clamp(3.5rem, 1.2rem + 9.6vw, 9rem);

  --wrap:   82rem;
  --ease:   cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur:    420ms;

  --section-y: clamp(4.5rem, 2.5rem + 8vw, 9.5rem);
}

/* film grain, inline so it costs no request */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

body { background: var(--paper); }

/* --------------------------------------------------- 2 SCROLL PROGRESS */

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 200; pointer-events: none;
  background: transparent;
}
.progress__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--saffron), var(--saffron-lt));
  transition: width 90ms linear;
}

/* -------------------------------------------------------- 3 TYPOGRAPHY */

.h-section {
  font-size: var(--t-2xl);
  letter-spacing: -0.032em;
  line-height: 1.06;
}
.lede { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.58; }

/* section marker — a real sequence, so the numerals mean something */
.marker {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.marker__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .14em; color: var(--brass-ink);
}
.marker__rule {
  flex: 1; height: 1px; max-width: 5rem;
  background: linear-gradient(90deg, var(--brass-rule), transparent);
}
.section--night .marker__n, .closing .marker__n { color: var(--brass); }
.section--night .marker__rule, .closing .marker__rule {
  background: linear-gradient(90deg, var(--brass-soft), transparent);
}
.marker__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
:lang(hi) .marker__n, :lang(hi) .marker__label { letter-spacing: .04em; text-transform: none; }
.section--night .marker__label { color: #B8C5BE; }

/* ----------------------------------------------------------- 4 BUTTONS */

.btn {
  position: relative; overflow: hidden;
  padding: .9375rem 1.625rem;
  border-radius: 2px;
  font-size: .875rem; letter-spacing: .015em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform 200ms var(--ease);
}
/* the sweep is what separates a designed button from a default one */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--saffron); color: var(--ink); border-color: var(--saffron); }
.btn--primary::before { background: var(--night); }
.btn--primary:hover { color: #fff; border-color: var(--night); }

.btn--ink { background: var(--pine-deep); color: #fff; border-color: var(--pine-deep); }
.btn--ink::before { background: var(--saffron); }
.btn--ink:hover { color: var(--ink); border-color: var(--saffron); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost::before { background: var(--night); }
.btn--ghost:hover { color: #fff; border-color: var(--night); }

.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--light::before { background: #fff; }
.btn--light:hover { color: var(--ink); border-color: #fff; }

/* ------------------------------------------------------------ 5 HEADER */

.site-header {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(var(--brand-green-abyss-rgb),.06);
}
/* the masthead condenses as you scroll, which reads as attentive */
.masthead { min-height: 5.25rem; transition: min-height var(--dur) var(--ease); }
.site-header.is-scrolled .masthead { min-height: 4.25rem; }

.brand__mark {
  width: 2.75rem; height: 2.75rem;
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
}
.site-header.is-scrolled .brand__mark { width: 2.25rem; height: 2.25rem; }
.brand__name { font-size: 1.125rem; letter-spacing: -0.022em; }

/* nav underline sweeps in from the left rather than snapping */
.nav a { position: relative; padding: .5rem .75rem; }
.nav a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .18rem;
  height: 2px; background: var(--saffron);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav a:hover { background: transparent; color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); display: block; margin: 0; }

/* ======================================================= 6 CINEMATIC HERO */

.hero-x {
  position: relative;
  min-height: min(94vh, 60rem);
  display: flex; align-items: flex-end;
  background: var(--night);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* layer 1 — the photograph, bled to every edge */
.hero-x__media { position: absolute; inset: 0; z-index: 0; }
.hero-x__media img,
.hero-x__media .photo-slot {
  width: 100%; height: 100%; min-height: 100%;
  object-fit: cover; object-position: 50% 22%;
  border-radius: 0; border: none;
}

/* layer 2 — the scrim. Two gradients, so type stays legible over any photo
   while the right side of the image is still visible. */
.hero-x__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* 1 — the reading side. Deep at the type, releasing before the subject. */
    linear-gradient(96deg,
      rgba(var(--brand-green-abyss-rgb),.92) 0%,
      rgba(var(--brand-green-abyss-rgb),.78) 24%,
      rgba(var(--brand-green-abyss-rgb),.42) 48%,
      rgba(var(--brand-green-abyss-rgb),.12) 72%,
      rgba(var(--brand-green-abyss-rgb),.06) 100%),
    /* 2 — headroom for the floating navbar, weight under the data rail */
    linear-gradient(180deg,
      rgba(var(--brand-green-abyss-rgb),.66) 0%,
      rgba(var(--brand-green-abyss-rgb),.14) 20%,
      rgba(var(--brand-green-abyss-rgb),.04) 46%,
      rgba(var(--brand-green-abyss-rgb),.54) 82%,
      rgba(var(--brand-green-abyss-rgb),.78) 100%),
    /* 3 — vignette. Holds the eye inside the frame. */
    radial-gradient(122% 104% at 52% 46%,
      transparent 44%,
      rgba(0,0,0,.20) 74%,
      rgba(0,0,0,.44) 100%);
}
/* layer 3 — a single warm rim light from the top right. soft-light, not
   screen: it warms the highlights already in the photograph instead of
   spraying colour across it. The old green screen-blend is gone — that was
   what turned every face in the crowd green. */
.hero-x__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(52% 46% at 84% 6%, rgba(242,140,24,.34) 0%, transparent 64%);
  mix-blend-mode: soft-light;
}
/* layer 4 — grain */
.hero-x__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain);
  opacity: .16; mix-blend-mode: overlay;
}

/* the tricolour hairline, thin enough to read as a detail not a flag */
.hero-x__flag {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
  background: linear-gradient(90deg,
    var(--saffron) 0 33.33%, #ffffff 33.33% 66.66%, var(--pine) 66.66% 100%);
}

.hero-x__inner {
  position: relative; z-index: 3;
  width: 100%;
  padding-block: clamp(6rem, 4rem + 10vw, 9rem) clamp(2rem, 1rem + 3vw, 3rem);
}

.hero-x .eyebrow { color: var(--saffron-lt); margin-bottom: var(--s-5); }
.hero-x .eyebrow::before { background: var(--saffron-lt); width: 2.75rem; height: 3px; }

.hero-x__name {
  font-size: var(--t-5xl);
  font-weight: 600;
  letter-spacing: -0.048em;
  line-height: .86;
  margin: 0 0 var(--s-5);
  color: #fff;
  text-wrap: balance;
}
:lang(hi) .hero-x__name { letter-spacing: -0.015em; line-height: 1.02; }

.hero-x__role {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--font-mono);
  font-size: clamp(.75rem, .68rem + .38vw, .9375rem);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  padding: .5rem 0;
  margin-bottom: var(--s-5);
  border-top: 1px solid var(--brass-soft);
  border-bottom: 1px solid var(--brass-soft);
  padding-inline: 0;
}
.hero-x__role::before {
  content: ""; width: 1.75rem; height: 2px; background: var(--saffron); flex: none;
}
:lang(hi) .hero-x__role { letter-spacing: .04em; text-transform: none; }

.hero-x__lede {
  font-size: clamp(1.0625rem, .98rem + .5vw, 1.3125rem);
  line-height: 1.56; color: #DEE4E1;
  max-width: 42ch; margin-bottom: var(--s-6);
}

/* the status rail — the facts a citizen needs in the first screen */
.hero-x__rail {
  display: grid; gap: 1px;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.14);
}
@media (min-width: 34rem) { .hero-x__rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .hero-x__rail { grid-template-columns: repeat(4, 1fr); } }

.rail__cell { background: var(--night); padding: var(--s-5) var(--s-4) var(--s-4) 0; }
@media (min-width: 34rem) { .rail__cell { padding-inline: var(--s-5) var(--s-4); } }
@media (min-width: 34rem) { .rail__cell:first-child { padding-left: 0; } }

.rail__k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase;
  color: #B8C5BE; margin: 0 0 var(--s-2);
}
:lang(hi) .rail__k { letter-spacing: .03em; text-transform: none; font-size: 11px; }
.rail__v {
  font-size: var(--t-md); font-weight: 600; color: #fff; margin: 0;
  letter-spacing: -0.015em; line-height: 1.2;
}
.rail__v .mono { font-variant-numeric: tabular-nums; }

/* scroll cue */
.hero-x__cue {
  position: absolute; z-index: 3; left: 50%; bottom: 1.25rem;
  transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
@media (min-width: 62rem) { .hero-x__cue { display: flex; } }
.hero-x__cue span:last-child {
  width: 1px; height: 2.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
}

/* ================================================== 7 INSCRIPTION BAND */
/* Direction B had dark text on a saffron gradient. This reads as carved
   rather than printed: a dark stage, very large saffron numerals, brass
   hairlines between. Bolder and more premium at once. */

.inscribe {
  background: var(--night-soft);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  position: relative;
  border-bottom: 1px solid var(--night-line);
}
.inscribe::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .1; mix-blend-mode: overlay;
}
.inscribe__grid {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-6);
}
@media (min-width: 40rem) { .inscribe__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); } }
@media (min-width: 68rem) { .inscribe__grid { grid-template-columns: repeat(4, 1fr); } }

.inscribe__item { position: relative; padding-top: var(--s-4); }
.inscribe__item::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2px;
  background: var(--brass);
}
.inscribe__v {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  font-weight: 600; line-height: .95; letter-spacing: -0.042em;
  color: var(--saffron-lt);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s-3);
}
.inscribe__v small { font-size: .34em; font-weight: 500; letter-spacing: 0; margin-left: .3em; color: #fff; }
.inscribe__k {
  font-size: var(--t-sm); line-height: 1.5; color: #DEE4E1; margin: 0;
  max-width: 30ch;
}
.inscribe__note {
  position: relative; z-index: 1;
  margin: clamp(2rem, 1rem + 3vw, 3rem) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--night-line);
  font-size: var(--t-xs); color: #B8C5BE; max-width: 84ch; line-height: 1.65;
}

/* ============================================== 8 EDITORIAL FEATURE BLOCK */

.feature { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 62rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 1rem + 6vw, 6rem); }
  .feature--flip .feature__media { order: -1; }
}

/* image frame: overflow hidden so the photograph can breathe on hover */
.frame {
  position: relative; overflow: hidden;
  background: var(--bone-deep);
  border-radius: 2px;
}
.frame img, .frame .photo-slot {
  width: 100%; display: block;
  transition: transform 900ms var(--ease);
}
.frame:hover img { transform: scale(1.035); }
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--brand-green-abyss-rgb),.07);
}
/* a brass corner rule — the institutional detail, used once per frame */
.frame--marked::before {
  content: ""; position: absolute; z-index: 2; left: 0; top: 0;
  width: 3.5rem; height: 3px; background: var(--saffron);
}

.frame--tall img, .frame--tall .photo-slot { aspect-ratio: 4/5; object-fit: cover; }
.frame--wide img, .frame--wide .photo-slot { aspect-ratio: 3/2; object-fit: cover; }

.feature__caption {
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--slate); line-height: 1.5;
}

/* ================================================== 9 PULL STATEMENT */

.statement {
  background: var(--bone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.statement__inner { max-width: 54rem; margin-inline: auto; text-align: center; }
.statement__mark {
  width: 2.5rem; height: 2px; background: var(--brass-ink);
  margin: 0 auto var(--s-6);
}
.statement__text {
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(1.375rem, 1rem + 2.1vw, 2.375rem);
  font-weight: 400; line-height: 1.34; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 var(--s-5);
  text-wrap: balance;
}
:lang(hi) .statement__text { font-family: var(--font-sans); line-height: 1.6; }
.statement__by {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
:lang(hi) .statement__by { letter-spacing: .03em; text-transform: none; }

/* ================================================== 10 SEGMENTS / RIDGE */

.ridge__line { stroke: var(--saffron); stroke-width: 2.5; }
.section--night .ridge__line, .hero-x .ridge__line { stroke: var(--saffron-lt); }

.segments { background: var(--line); border-color: var(--line); }
.segment {
  padding: var(--s-6) var(--s-5);
  position: relative;
  transition: background var(--dur) var(--ease);
}
.segment:hover { background: var(--bone); }
.segment::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease);
}
.segment:hover::before { transform: scaleX(1); }
.segment[data-tier="hills"]::before     { background: var(--pine); }
.segment[data-tier="foothills"]::before { background: var(--saffron); }
.segment[data-tier="terai"]::before     { background: var(--brass-ink); }
.segment__name { font-size: var(--t-xl); letter-spacing: -0.022em; }

/* ====================================================== 11 LEDGER */

.ledger { border-top: 2px solid var(--ink); }
.entry {
  padding: var(--s-6) var(--s-4) var(--s-6) 0;
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.entry:hover { background: var(--bone); padding-left: var(--s-4); }
.entry__title { font-size: var(--t-lg); letter-spacing: -0.02em; }
.entry__amount { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.03em; }
.entry__sector {
  background: transparent; color: var(--pine-ink);
  border: 1px solid rgba(20,112,59,.28); border-radius: 100px;
  padding: 3px 10px;
}

/* the largest project gets an editorial treatment, not another row */
.headline-project {
  display: grid; gap: var(--s-6); align-items: center;
  background: var(--night); color: #fff;
  border-radius: 2px; overflow: hidden;
  position: relative;
}
@media (min-width: 56rem) { .headline-project { grid-template-columns: 1.1fr .9fr; } }
.headline-project__body { padding: clamp(2rem, 1rem + 3vw, 3.5rem); position: relative; z-index: 1; }
.headline-project__media { position: relative; min-height: 16rem; height: 100%; }
.headline-project__media img,
.headline-project__media .photo-slot { width: 100%; height: 100%; object-fit: cover; min-height: 16rem; }
.headline-project__v {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  color: var(--saffron-lt); margin: 0 0 var(--s-4);
}
.headline-project h3 { font-size: var(--t-xl); color: #fff; letter-spacing: -0.025em; }
.headline-project p { color: #DEE4E1; }

.totals { gap: 1px; background: var(--line); }
.total { border-left: none; border-top: none; border-bottom: none; padding: var(--s-6) var(--s-5); }
.total::before { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--saffron); margin-bottom: var(--s-4); }
.total__v { letter-spacing: -0.035em; }

/* ====================================================== 12 CARDS */

.card { border-radius: 2px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(var(--brand-green-abyss-rgb),.10); }
.card__media { overflow: hidden; }
.card__media img { transition: transform 900ms var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }

/* ====================================================== 13 CLOSING CTA */

.closing {
  position: relative; background: var(--night); color: #fff;
  overflow: hidden; isolation: isolate;
}
.closing::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(50% 60% at 82% 12%, rgba(242,140,24,.30) 0%, transparent 66%),
    radial-gradient(40% 50% at 8% 92%, rgba(20,112,59,.26) 0%, transparent 62%);
}
.closing::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); opacity: .12; mix-blend-mode: overlay;
}
.closing > * { position: relative; z-index: 1; }
.closing .h-section { font-size: var(--t-3xl); color: #fff; }
.closing .lede { color: #DEE4E1; }

/* ================================================== 14 ORCHESTRATED MOTION */

/* one entrance on load, staggered by position */
.enter { opacity: 0; transform: translateY(22px); }
.is-ready .enter {
  animation: enter-up 900ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
@keyframes enter-up { to { opacity: 1; transform: none; } }

/* one reveal on scroll, also staggered */
.reveal { transform: translateY(18px); transition-duration: 780ms; }
.reveal.is-in { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .enter, .is-ready .enter { opacity: 1; transform: none; animation: none; }
  .frame:hover img, .card:hover .card__media img { transform: none; }
  .progress__bar { transition: none; }
}

/* ====================================================== 15 PHOTO SLOTS */
/* Until photographs arrive these must read as image areas, not as errors. */

.photo-slot {
  background:
    radial-gradient(72% 62% at 32% 22%, rgba(255,255,255,.10) 0%, transparent 68%),
    linear-gradient(158deg, #10562D 0%, #10562D 48%, #14703B 100%);
  border: none; border-radius: 0;
  justify-content: flex-end; align-items: flex-start; text-align: left;
  padding: var(--s-5); min-height: 15rem;
}
.photo-slot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .14; mix-blend-mode: overlay;
}
.photo-slot { position: relative; overflow: hidden; }
.photo-slot__icon { display: none; }
.photo-slot__alt  { color: #fff; opacity: .96; max-width: 32ch; position: relative; z-index: 1; }
.photo-slot__path { background: rgba(255,255,255,.15); color: #fff; border: none; position: relative; z-index: 1; }
/* the intended filename is a build aid. Visitors should see a clean panel,
   never a raw path. Add class="dev" to <body> while fitting photographs. */
.photo-slot__path { display: none; }
body.dev .photo-slot__path { display: block; }

/* ====================================================== 16 FOOTER */

.site-footer { border-top: 3px solid var(--saffron); background: var(--night); }
.footer__h { color: var(--brass); letter-spacing: .14em; }
:lang(hi) .footer__h { letter-spacing: .04em; }
.socials a { border-radius: 2px; transition: all var(--dur) var(--ease); }
.socials a:hover { transform: translateY(-2px); }
@charset "UTF-8";
/* ==========================================================================
   HOMEPAGE NARRATIVE LAYER — v2, August 2026
   Raju Bista, MP Darjeeling

   Loads on the homepage only, after rb-system.css and rb-premium.css.
   Implements the full editorial journey:

     hero → the record → bridge → the person → statement → DARJEELING →
     work that matters → bridge → Parliament → issues that matter →
     the road ahead → newsroom → in the field → leadership beyond
     Parliament → your voice matters → finale

   Nothing here redefines tokens. Every colour is a system token, so the
   brand values (saffron #F28C18, green #10562D) hold everywhere at once.
   ========================================================================== */

/* ------------------------------------------------ 0 HERO REFINEMENTS */

/* the quiet third action under the two buttons */
.hero-x__office {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: #C4CEC9; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: .2em;
}
.hero-x__office:hover { color: #fff; border-bottom-color: var(--saffron); }
:lang(hi) .hero-x__office { letter-spacing: .03em; text-transform: none; }

/* --------------------------------------------------------- 1 BRIDGES */
/* The two narrative pivots the page actually makes:
   leadership → public service, and Darjeeling → Parliament.
   A typographic device, not a decoration. */

.bridge { padding-block: var(--s-6); }
.bridge__in {
  display: flex; align-items: center; gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
:lang(hi) .bridge__in { letter-spacing: .04em; text-transform: none; }

.bridge__a { color: var(--slate, #526057); }
.bridge__b { color: var(--saffron-ink); }
.bridge__rule {
  flex: 1; height: 1px; background: var(--line-strong);
  position: relative; min-width: 3rem;
}
.bridge__rule::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: .5rem; height: .5rem; transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--saffron); border-right: 1px solid var(--saffron);
  background: transparent;
}

/* the dark variant sits at the top of the Parliament stage */
.section--night .bridge { padding: 0 0 var(--s-7); }
.section--night .bridge__a { color: #B8C5BE; }
.section--night .bridge__b { color: var(--saffron-lt); }
.section--night .bridge__rule { background: var(--night-line); }

/* ------------------------------------------------------ 2 DARJEELING */
/* The constituency as a place, not a label. Display type + photography. */

.darj__display {
  font-size: clamp(3.25rem, 1.9rem + 7.5vw, 8rem);
  font-weight: 600; letter-spacing: -0.045em; line-height: .92;
  margin: 0 0 var(--s-4); color: var(--ink);
  text-wrap: balance;
}
:lang(hi) .darj__display { letter-spacing: -0.01em; line-height: 1.06; }

.darj__sub {
  font-size: var(--t-md); color: var(--ink-soft);
  max-width: 52ch; margin: 0 0 var(--s-7);
}
.darj__sub .mono { color: var(--pine-ink); }

.darj__mosaic { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
@media (min-width: 56rem) {
  .darj__mosaic {
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .darj__mosaic > :first-child { grid-row: 1 / 3; }
}
.darj__mosaic > * {
  border-radius: var(--radius-lg); overflow: hidden; position: relative; margin: 0;
}
.darj__mosaic img, .darj__mosaic .photo-slot {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.darj__mosaic > :first-child img,
.darj__mosaic > :first-child .photo-slot { min-height: clamp(18rem, 12rem + 22vw, 32rem); }
.darj__mosaic > :not(:first-child) img,
.darj__mosaic > :not(:first-child) .photo-slot { min-height: clamp(11rem, 8rem + 10vw, 15.5rem); }

/* the four movements: people / challenges / work / future */
.darj__moves { display: grid; gap: var(--s-6); margin-bottom: var(--s-8); }
@media (min-width: 40rem) { .darj__moves { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .darj__moves { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }

.mv { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.mv__k {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 var(--s-3); color: var(--ink-soft);
}
:lang(hi) .mv__k { letter-spacing: .04em; text-transform: none; font-size: 11px; }
.mv h3 { font-size: var(--t-md); font-weight: 600; margin: 0 0 var(--s-2); }
.mv p  { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }

.mv[data-mv="people"]     { border-top-color: var(--saffron); }
.mv[data-mv="people"]     .mv__k { color: var(--saffron-ink); }
.mv[data-mv="work"]       { border-top-color: var(--pine-ink); }
.mv[data-mv="work"]       .mv__k { color: var(--pine-ink); }
.mv[data-mv="future"]     { border-top-color: var(--brass); }
.mv[data-mv="future"]     .mv__k { color: var(--brass-ink); }

/* ------------------------------------------------- 3 WORK — STORIES */
/* One headline project (component exists) + three image-led stories. */

.stories { display: grid; gap: var(--s-5); }
@media (min-width: 62rem) { .stories { grid-template-columns: repeat(3, 1fr); } }

.story {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.story:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(var(--brand-green-abyss-rgb),.45); }

.story__media { aspect-ratio: 16 / 10; overflow: hidden; }
.story__media img, .story__media .photo-slot {
  width: 100%; height: 100%; object-fit: cover; display: block;
  min-height: 11rem; transition: transform 700ms var(--ease);
}
.story:hover .story__media img { transform: scale(1.04); }

.story__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); flex: 1; }
.story__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--pine-wash); color: var(--pine-deep);
  padding: .3rem .55rem; border-radius: var(--radius);
}
:lang(hi) .tag { letter-spacing: .03em; text-transform: none; }
.story h3 { font-size: var(--t-lg); font-weight: 600; line-height: 1.3; margin: 0; }
.story__note { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; flex: 1; }
.story__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-2);
}
.story__where { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate, #526057); }
.story__amount {
  font-family: var(--font-mono); font-size: var(--t-md); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}

/* ------------------------------------------ 4 PARLIAMENT — THE EXTRAS */
/* The featured matter and the committee memberships, on the dark stage. */

.parl-extra { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 62rem) { .parl-extra { grid-template-columns: 1.45fr .95fr; gap: var(--s-6); } }

.matter {
  background: var(--night-soft);
  border: 1px solid var(--night-line); border-left: 3px solid var(--saffron);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.matter__k {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--saffron-lt); margin: 0 0 var(--s-3);
}
:lang(hi) .matter__k { letter-spacing: .04em; text-transform: none; }
.matter__meta {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: #B8C5BE; margin: 0 0 var(--s-3);
}
.matter h3 {
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  line-height: 1.4; font-weight: 500; color: #fff; margin: 0 0 var(--s-4);
}
.matter__topic {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass); border: 1px solid var(--brass-soft);
  padding: .3rem .6rem; border-radius: var(--radius);
}
:lang(hi) .matter__topic { letter-spacing: .03em; text-transform: none; }

.commit {
  border: 1px solid var(--night-line); border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.commit h3 { font-size: var(--t-md); color: #fff; margin: 0 0 var(--s-2); }
.commit ul { list-style: none; margin: 0; padding: 0; }
.commit li { border-top: 1px solid var(--night-line); padding-block: var(--s-4); }
.commit li:last-of-type { padding-bottom: var(--s-2); }
.commit__name { display: block; color: #E9EDEB; font-weight: 500; line-height: 1.4; margin-bottom: .3rem; }
.commit__body {
  display: block; font-family: var(--font-mono); font-size: var(--t-xs); color: #B8C5BE;
}

/* --------------------------------------------- 5 ISSUES THAT MATTER */
/* Typography does the work. Each row is a real, repeated intervention. */

.issues__list {
  list-style: none; margin: 0; padding: 0;
  border-top: 2px solid var(--ink);
  counter-reset: issue;
}
.issues__list a {
  display: grid; grid-template-columns: 2.75ch 1fr auto;
  align-items: center; gap: var(--s-4);
  padding-block: clamp(.875rem, .7rem + .8vw, 1.375rem);
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: background-color 200ms var(--ease);
}
.issues__list a:hover { background: var(--mist); }
.issues__n {
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--brass-ink);
  font-variant-numeric: tabular-nums;
}
.issues__t {
  font-size: clamp(1.125rem, .95rem + 1.2vw, 1.75rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
}
.issues__arrow {
  font-family: var(--font-mono); color: var(--slate, #526057);
  transition: transform 200ms var(--ease), color 200ms var(--ease);
}
.issues__list a:hover .issues__arrow { color: var(--saffron-ink); transform: translateX(4px); }
.issues__list a:hover .issues__t { color: var(--saffron-ink); }

/* ---------------------------------------------- 6 THE ROAD AHEAD */
/* Dark, cinematic, forward-looking. Saffron leads; green anchors. */

.road__display {
  font-size: clamp(2.5rem, 1.7rem + 4.6vw, 5.25rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: .95;
  color: #fff; margin: 0 0 var(--s-7); text-wrap: balance;
}
:lang(hi) .road__display { letter-spacing: -0.01em; line-height: 1.08; }

.road-grid {
  display: grid; gap: 1px;
  background: var(--night-line);
  border: 1px solid var(--night-line);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 48rem) { .road-grid { grid-template-columns: repeat(2, 1fr); } }

.road { background: var(--night); padding: var(--s-6); }
.road__num {
  font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 600;
  color: var(--saffron); display: block; margin-bottom: var(--s-4);
}
.road h3 { font-size: var(--t-lg); color: #fff; margin: 0 0 var(--s-3); }
.road p  { font-size: var(--t-sm); color: #DEE4E1; margin: 0; }
.road__anchor {
  display: block; margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--night-line);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--green-lt);
}

/* -------------------------------- 9 LEADERSHIP BEYOND PARLIAMENT */
/* The corporate role: present, clearly separated, never dominant. */

.corp {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-8);
}
.corp__grid { display: grid; gap: var(--s-6); }
@media (min-width: 56rem) {
  .corp__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .corp__col:first-child { border-right: 1px solid var(--line); padding-right: var(--s-8); }
  .corp__col:last-child  { padding-left: var(--s-8); }
}
.corp__k {
  display: flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate, #526057); margin: 0 0 var(--s-3);
}
:lang(hi) .corp__k { letter-spacing: .04em; text-transform: none; }
.corp__k::before { content: ""; width: .55rem; height: .55rem; background: var(--saffron); }
.corp__col:last-child .corp__k::before { background: var(--brass); }
.corp__col h3 { font-size: var(--t-lg); margin: 0 0 var(--s-2); }
.corp__col p  { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s-3); max-width: 44ch; }

/* ------------------------------------------------- 10 YOUR VOICE */

.voice__inner { max-width: 46rem; }
.voice__addr {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--slate, #526057); margin-top: var(--s-5);
}

/* ---------------------------------------------------- 11 FINALE */

.finale {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: #fff;
  display: flex; align-items: flex-end;
  min-height: clamp(26rem, 66vh, 36rem);
}
.finale::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
  background: linear-gradient(90deg,
    var(--saffron) 0 33.33%, #ffffff 33.33% 66.66%, var(--pine) 66.66% 100%);
}
.finale__media { position: absolute; inset: 0; z-index: 0; }
.finale__media img, .finale__media .photo-slot {
  width: 100%; height: 100%; min-height: 100%;
  object-fit: cover; object-position: 50% 30%;
  border-radius: 0; border: none;
}
.finale__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--brand-green-abyss-rgb),.30) 0%, rgba(var(--brand-green-abyss-rgb),.55) 45%, rgba(var(--brand-green-abyss-rgb),.94) 100%);
}
.finale__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay;
}
.finale__inner {
  position: relative; z-index: 3; width: 100%;
  padding-block: clamp(5rem, 3rem + 8vw, 8rem) clamp(3rem, 2rem + 4vw, 4.5rem);
}
.finale__tags {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--saffron-lt); margin: 0 0 var(--s-4);
}
:lang(hi) .finale__tags { letter-spacing: .05em; text-transform: none; }
.finale h2 {
  font-size: clamp(2.5rem, 1.5rem + 5.5vw, 6rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: .95;
  color: #fff; margin: 0 0 var(--s-6); text-wrap: balance;
}
:lang(hi) .finale h2 { letter-spacing: -0.01em; line-height: 1.08; }

/* ------------------------------------------------- REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .story, .story:hover { transform: none; box-shadow: none; }
  .story:hover .story__media img,
  .field-grid figure:hover img { transform: none; }
  .issues__list a:hover .issues__arrow { transform: none; }
}

/* ==========================================================================
   v2.1 — PREMIUM CHROME (homepage only, scoped by .page-home)
   The header floats transparent over the cinematic hero, then condenses
   into a compact dark glass bar on scroll — the register of a head-of-
   government site. Other pages keep the standard header untouched.
   ========================================================================== */

.page-home .site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

/* utility bar reads as glass over the photograph */
@media (max-width: 30rem) {
  .page-home .util__item + .util__item { display: none; } /* keep one row */
}

/* inverted chrome over the dark hero */
.page-home .brand__name { color: #fff; }
.page-home .brand__role { color: #C4CEC9; }
/* scrolled: a compact fixed glass bar — the utility row folds away */
.page-home .site-header.is-solid {
  position: fixed;
  background: rgba(var(--brand-green-abyss-rgb),.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--night-line);
  box-shadow: 0 10px 34px -20px rgba(0,0,0,.65);
  animation: hdrDrop 320ms var(--ease);
}
.page-home .site-header.is-solid .util { display: none; }
@keyframes hdrDrop {
  from { transform: translateY(-10px); opacity: .4; }
  to   { transform: none; opacity: 1; }
}

/* hero clears the floating header on every viewport */
.page-home .hero-x__inner {
  padding-top: clamp(8.5rem, 6rem + 8vw, 11rem);
}

/* the photograph settles into place — one cinematic breath, then still */
.page-home .hero-x__media img,
.page-home .hero-x__media .photo-slot {
  transform-origin: 50% 25%;
  animation: heroSettle 2.6s var(--ease) both;
}
@keyframes heroSettle {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}

/* arrows lean into the action */
.btn .btn__arrow { transition: transform 240ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* the office link keeps its dignity above the rail */
.hero-x__office { margin-bottom: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .page-home .site-header.is-solid { animation: none; }
  .page-home .hero-x__media img,
  .page-home .hero-x__media .photo-slot { animation: none; }
  .btn:hover .btn__arrow { transform: none; }
}

/* v2.2 — green & saffron identity. Two inline legacy greys are corrected
   here so the recolour stays CSS-only. */
.section--night .note { color: #B8C5BE !important; }
.headline-project__body .mb-0 { color: #B8C5BE !important; }

/* ==========================================================================
   v2.3 — THE MEDIA ROOM
   One ecosystem on the forest stage: featured story, supporting stories,
   photography, the journey, the media centre, and the official accounts.
   Signature motif: the saffron signal — one pulsing dot beside "The latest".
   ========================================================================== */

.mr-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.mr-sub { color: #DEE4E1; max-width: 52ch; margin: 0; }

.mr-live {
  display: inline-flex; align-items: center; gap: .6em; margin: .5rem 0 0;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--saffron-lt);
  white-space: nowrap;
}
:lang(hi) .mr-live { letter-spacing: .05em; text-transform: none; }
.mr-live__dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--saffron); position: relative; flex: none;
}
.mr-live__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--saffron); opacity: 0;
  animation: mrPulse 2.4s var(--ease) infinite;
}
@keyframes mrPulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------ FILTER PILLS */
.mr-pills {
  display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6);
}
@media (max-width: 40rem) {
  .mr-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
              padding-bottom: .35rem; scrollbar-width: none; }
  .mr-pills::-webkit-scrollbar { display: none; }
}
.mr-pill {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: #DEE4E1; background: transparent;
  border: 1px solid var(--night-line); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease);
}
:lang(hi) .mr-pill { letter-spacing: .02em; text-transform: none; }
.mr-pill:hover { border-color: var(--saffron); color: #fff; background: rgba(242,140,24,.12); }
.mr-pill[aria-pressed="true"] {
  background: var(--saffron); border-color: var(--saffron); color: var(--ink);
}

/* items animate in each time a filter reveals them */
.mr-item { animation: mrIn 300ms var(--ease); }
.mr-item.is-out { display: none; }
@keyframes mrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------- EDITORIAL MOSAIC */
.mr-grid { display: grid; gap: var(--s-5); margin-bottom: var(--s-5); }
@media (min-width: 62rem) { .mr-grid { grid-template-columns: 1.9fr 1fr; align-items: stretch; } }

.mr-feat {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--night-soft); min-height: clamp(20rem, 14rem + 18vw, 30rem);
  display: flex; align-items: flex-end; isolation: isolate;
}
.mr-feat__media { position: absolute; inset: 0; z-index: 0; }
.mr-feat__media img, .mr-feat__media .photo-slot {
  width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block;
  transition: transform 900ms var(--ease);
}
.mr-feat:hover .mr-feat__media img { transform: scale(1.04); }
.mr-feat__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--brand-green-abyss-rgb),.10) 30%, rgba(var(--brand-green-abyss-rgb),.62) 68%, rgba(var(--brand-green-abyss-rgb),.95) 100%);
}
.mr-feat__body { position: relative; z-index: 2; padding: var(--s-6); width: 100%; }
.mr-feat h3 {
  font-size: clamp(1.375rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.22; margin: 0 0 var(--s-3); max-width: 26ch; text-wrap: balance;
}
.mr-feat h3 a { color: #fff; text-decoration: none; }
.mr-feat h3 a:hover { color: var(--saffron-lt); }
.mr-feat__sum {
  color: #DEE4E1; font-size: var(--t-sm); max-width: 62ch;
  margin: 0 0 var(--s-4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mr-act {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--saffron-lt);
}
:lang(hi) .mr-act { letter-spacing: .03em; text-transform: none; }

.mr-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-3); }
.mr-date, .mr-cat {
  font-family: var(--font-mono); font-size: var(--t-xs); color: #B8C5BE;
}
.mr-cat { color: #DEE4E1; }

/* kind chips on the dark stage */
.kchip {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--radius);
  border: 1px solid transparent;
}
:lang(hi) .kchip { letter-spacing: .03em; text-transform: none; }
.kchip--speech  { color: var(--saffron-lt); border-color: rgba(255,176,74,.45); }
.kchip--video   { color: var(--saffron-lt); border-color: rgba(255,176,74,.45); }
.kchip--update  { color: var(--green-lt);   border-color: rgba(29,160,83,.4); }
.kchip--press   { color: #DEE4E1;           border-color: var(--night-line); }
.kchip--photo   { color: var(--brass);      border-color: var(--brass-soft); }
.mr-mic { width: .85em; height: .85em; fill: currentColor; }

/* play button — saffron, elegant, grows slightly on hover */
.mr-play {
  position: absolute; z-index: 2; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: clamp(3.5rem, 3rem + 2vw, 4.75rem); height: clamp(3.5rem, 3rem + 2vw, 4.75rem);
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--saffron); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px -10px rgba(242,140,24,.7);
  transition: transform 240ms var(--ease), background 240ms var(--ease);
}
.mr-play svg { width: 45%; height: 45%; fill: currentColor; margin-left: 6%; }
.mr-play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--saffron-lt); }
.mr-dur {
  position: absolute; z-index: 2; right: var(--s-4); top: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-xs); color: #fff;
  background: rgba(var(--brand-green-abyss-rgb),.72); padding: .25rem .55rem; border-radius: var(--radius);
}

/* supporting stories — white cards on the forest */
.mr-side { display: grid; gap: var(--s-4); align-content: start; }
.mr-story {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-4);
  background: var(--paper); color: var(--ink); text-decoration: none;
  border-radius: var(--radius-lg); overflow: hidden; padding: 0;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.mr-story:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -18px rgba(var(--brand-green-abyss-rgb),.6); }
.mr-story__media { display: block; overflow: hidden; }
.mr-story__media img, .mr-story__media .photo-slot {
  width: 100%; height: 100%; min-height: 6.5rem; object-fit: cover; display: block;
  padding: var(--s-2);
}
.mr-story__media img { padding: 0; transition: transform 600ms var(--ease); }
.mr-story:hover .mr-story__media img { transform: scale(1.05); }
.mr-story__media .photo-slot__path { display: none; }
.mr-story__media .photo-slot__alt { font-size: 10px; }
.mr-story__body { padding: var(--s-4) var(--s-4) var(--s-4) 0; display: grid; gap: .4rem; align-content: center; }
.mr-story .mr-meta { margin: 0; }
.mr-story .kchip--update { color: var(--pine-ink); border-color: rgba(var(--brand-green-abyss-rgb),.35); }
.mr-story .kchip--speech { color: var(--saffron-ink); border-color: rgba(168,82,9,.35); }
.mr-story .mr-date { color: var(--slate, #526057); }
.mr-story__t { font-weight: 600; line-height: 1.35; font-size: var(--t-sm); }
.mr-story:hover .mr-story__t { color: var(--saffron-ink); }
.mr-ext { font-family: var(--font-mono); font-size: 10px; color: var(--slate, #526057); }

/* ------------------------------------------------------- PHOTO TILES */
.mr-photos { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--s-7); }
@media (min-width: 62rem) { .mr-photos { grid-template-columns: 1.1fr 1fr 1fr 1fr; align-items: stretch; } }

.mr-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); isolation: isolate; text-decoration: none;
}
.mr-tile img, .mr-tile .photo-slot {
  width: 100%; height: 100%; min-height: 11rem;
  aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 700ms var(--ease); padding: var(--s-4);
}
.mr-tile img { padding: 0; }
.mr-tile--tall img, .mr-tile--tall .photo-slot { aspect-ratio: 4 / 5; }
.mr-tile:hover img { transform: scale(1.05); }
.mr-tile__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--brand-green-abyss-rgb),.88) 100%);
}
.mr-tile__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--s-4); display: grid; gap: .3rem;
}
.mr-tile__e { color: #fff; font-weight: 600; font-size: var(--t-sm); line-height: 1.3; }
.mr-tile__cta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--saffron-lt);
  opacity: 0; transform: translateY(4px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
:lang(hi) .mr-tile__cta { letter-spacing: .03em; text-transform: none; }
.mr-tile:hover .mr-tile__cta, .mr-tile:focus-visible .mr-tile__cta { opacity: 1; transform: none; }

/* -------------------------------------------------------- THE JOURNEY */
.mr-journey {
  border-top: 1px solid var(--night-line);
  padding-top: var(--s-6); margin-bottom: var(--s-7);
}
.mr-journey__k {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
  margin: 0 0 var(--s-4);
}
:lang(hi) .mr-journey__k { letter-spacing: .05em; text-transform: none; }
.mr-journey__track {
  display: flex; gap: var(--s-4);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: var(--s-3);
  scrollbar-width: thin; scrollbar-color: var(--night-line) transparent;
}
.mr-moment {
  flex: 0 0 auto; scroll-snap-align: start;
  width: clamp(11rem, 10rem + 4vw, 14rem);
  border-left: 2px solid var(--brass-soft);
  padding: .25rem 0 .25rem var(--s-4);
  text-decoration: none; display: grid; gap: .35rem;
  transition: border-color 240ms var(--ease);
}
.mr-moment:hover { border-left-color: var(--saffron); }
.mr-moment__y {
  font-family: var(--font-mono); font-size: var(--t-md); font-weight: 600;
  color: var(--saffron-lt); font-variant-numeric: tabular-nums;
}
.mr-moment__t { color: #DEE4E1; font-size: var(--t-xs); line-height: 1.45; }
.mr-moment:hover .mr-moment__t { color: #fff; }
.mr-journey__cta {
  display: inline-flex; gap: .5em; margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--brass-soft); padding-bottom: .2em;
}
:lang(hi) .mr-journey__cta { letter-spacing: .03em; text-transform: none; }
.mr-journey__cta:hover { color: var(--saffron-lt); border-bottom-color: var(--saffron); }

/* ----------------------------------------------------- MEDIA CENTRE */
.mr-centre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  border-block: 1px solid var(--night-line);
  padding-block: var(--s-6); margin-bottom: var(--s-7);
}
.mr-centre__line { color: #DEE4E1; margin: 0; max-width: 48ch; }

/* --------------------------------------------------- STAY CONNECTED */
.mr-social h3 { color: #fff; font-size: var(--t-lg); margin: 0 0 var(--s-2); }
.mr-social__sub { color: #B8C5BE; margin: 0 0 var(--s-5); }
.mr-platforms { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56rem) { .mr-platforms { grid-template-columns: repeat(4, 1fr); } }
.mr-plat {
  display: grid; gap: .35rem; text-decoration: none;
  background: var(--night-soft); border: 1px solid var(--night-line);
  border-radius: var(--radius-lg); padding: var(--s-5);
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}
.mr-plat:hover { transform: translateY(-3px); border-color: var(--saffron); }
.mr-plat svg { width: 1.375rem; height: 1.375rem; fill: #DEE4E1; margin-bottom: .35rem; }
.mr-plat:hover svg { fill: var(--saffron-lt); }
.mr-plat__n { color: #fff; font-weight: 600; }
.mr-plat__h { font-family: var(--font-mono); font-size: var(--t-xs); color: #B8C5BE; overflow-wrap: anywhere; }
.mr-plat__c {
  margin-top: .35rem;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--saffron-lt);
}
:lang(hi) .mr-plat__c { letter-spacing: .03em; text-transform: none; }

/* -------------------------------------------------------- VIDEO MODAL */
.vmodal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--s-4); }
.vmodal[hidden] { display: none; }
.vmodal__scrim { position: absolute; inset: 0; background: rgba(var(--brand-green-abyss-rgb),.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vmodal__box {
  position: relative; width: min(60rem, 100%);
  background: var(--night-soft); border: 1px solid var(--night-line);
  border-radius: var(--radius-lg); overflow: hidden;
  animation: mrIn 260ms var(--ease);
}
.vmodal__close {
  position: absolute; z-index: 3; right: var(--s-3); top: var(--s-3);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(var(--brand-green-abyss-rgb),.7);
  color: #fff; font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.vmodal__close:hover { background: var(--saffron); color: var(--ink); border-color: var(--saffron); }
.vmodal__frame { aspect-ratio: 16 / 9; background: #000; }
.vmodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal__body { padding: var(--s-5) var(--s-6); }
.vmodal__body h3 { color: #fff; margin: 0 0 var(--s-3); font-size: var(--t-lg); }
.vmodal__share { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.vmodal__share a {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: #DEE4E1; text-decoration: none;
  border: 1px solid var(--night-line); border-radius: 999px; padding: .4rem .9rem;
}
.vmodal__share a:hover { color: var(--ink); background: var(--saffron); border-color: var(--saffron); }

@media (prefers-reduced-motion: reduce) {
  .mr-live__dot::after { animation: none; }
  .mr-item, .vmodal__box { animation: none; }
  .mr-feat:hover .mr-feat__media img, .mr-story:hover .mr-story__media img,
  .mr-tile:hover img { transform: none; }
  .mr-play:hover { transform: translate(-50%, -50%); }
  .mr-story:hover, .mr-plat:hover { transform: none; }
  .mr-tile__cta { opacity: 1; transform: none; }
}

/* ==========================================================================
   V3 BRIDGE — Surya-style architecture on Bootstrap 5.3
   Loads after bootstrap.min.css. The identity above stays untouched; this
   block skins the Bootstrap navbar, collapse panel, forms and footer, and
   resolves the few places Bootstrap and the identity meet.
   ========================================================================== */

/* ---------------------------------------------------------- TOP STRIP */
.rb-topbar {
  background: var(--night); color: #C4CEC9;
  font-size: var(--t-xs);
}
.rb-topbar a { color: #E9EDEB; text-decoration: none; }
.rb-topbar a:hover { color: var(--saffron-lt); }
.rb-topbar .bi { font-size: .8rem; margin-right: .35rem; }
.rb-topbar__in { min-height: 2.25rem; }
.rb-lang a {
  font-family: var(--font-mono); padding: .15rem .6rem; border-radius: 2px;
  letter-spacing: .04em;
}
.rb-lang a.active { background: var(--saffron); color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- NAVBAR */
.site-header { border-bottom: 1px solid var(--line); }
.rb-navbar { padding-block: .65rem; }
.rb-navbar .brand__mark { border-radius: 50%; }
.rb-navbar .navbar-brand { display: flex; align-items: center; gap: .75rem; margin: 0; }
.rb-navbar .brand__name { font-weight: 650; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.rb-navbar .brand__role {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
}
:lang(hi) .rb-navbar .brand__role { letter-spacing: .02em; text-transform: none; }

.rb-navbar .nav-link {
  font-size: .875rem; font-weight: 500; color: var(--ink-soft);
  padding: .5rem .75rem; border-radius: var(--radius); white-space: nowrap;
}
.rb-navbar .nav-link:hover { color: var(--ink); background: var(--mist); }
.rb-navbar .nav-link.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--saffron); }
.rb-navbar .navbar-toggler { border-color: var(--line-strong); padding: .45rem .6rem; }
.rb-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--saffron-wash); }

/* homepage: chrome floats white over the forest hero */
.page-home .rb-topbar { background: rgba(var(--brand-green-abyss-rgb),.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.page-home .site-header { border-bottom-color: rgba(255,255,255,.14); }
.page-home .rb-navbar .brand__name { color: #fff; }
.page-home .rb-navbar .brand__role { color: #C4CEC9; }
.page-home .rb-navbar .nav-link { color: #DEE4E1; }
.page-home .rb-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.page-home .rb-navbar .nav-link.active { color: #fff; }
.page-home .rb-navbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.page-home .rb-navbar .navbar-toggler-icon { filter: invert(1) brightness(2); }
.page-home .site-header.is-solid .rb-topbar { display: none; }

/* collapse panel on small screens: a forest sheet */
@media (max-width: 991.98px) {
  .rb-navbar .navbar-collapse {
    background: var(--night); border-radius: var(--radius-lg);
    padding: var(--s-4); margin-top: var(--s-3);
    border: 1px solid var(--night-line);
  }
  .rb-navbar .navbar-collapse .nav-link { color: #DEE4E1; }
  .rb-navbar .navbar-collapse .nav-link:hover,
  .rb-navbar .navbar-collapse .nav-link.active { color: #fff; background: rgba(255,255,255,.08); box-shadow: none; }
  .rb-navbar .navbar-collapse .btn { margin-top: var(--s-3); }
}

/* ---------------------------------------------------------------- FORMS */
.form-control, .form-select {
  border-color: var(--line-strong); border-radius: var(--radius);
  padding: .65rem .8rem; font-size: var(--t-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--saffron); box-shadow: 0 0 0 .25rem rgba(242,140,24,.18);
}
.form-label { font-weight: 600; font-size: var(--t-sm); }

/* --------------------------------------------------------------- FOOTER */
.rb-footer { background: var(--night); color: #DEE4E1; border-top: 3px solid var(--saffron); }
.rb-footer a { color: #DEE4E1; text-decoration: none; }
.rb-footer a:hover { color: var(--saffron-lt); }
.rb-footer__title {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #B8C5BE;
  margin-bottom: var(--s-4);
}
:lang(hi) .rb-footer__title { letter-spacing: .04em; text-transform: none; }
.rb-footer__links li { margin-bottom: .55rem; }
.rb-footer .brand__name { color: #fff; font-weight: 650; }
.rb-footer .brand__role { color: #B8C5BE; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
:lang(hi) .rb-footer .brand__role { letter-spacing: .02em; text-transform: none; }
.rb-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--night-line); color: #DEE4E1; font-size: 1rem;
  transition: all 200ms var(--ease);
}
.rb-footer__social a:hover { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }
.rb-footer__bottom { border-top: 1px solid var(--night-line); color: #B8C5BE; font-size: var(--t-xs); }
.rb-footer__disclaimer { color: #B8C5BE; font-size: var(--t-xs); max-width: 90ch; }

/* -------------------------------------------------- SMALL HARMONISERS */
.bi { line-height: 1; }
b, strong { font-weight: 650; }
.table-ledger td, .table-ledger th { border-color: var(--line); }
img { max-width: 100%; height: auto; }
.breadcrumb-rb {
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate);
}
.breadcrumb-rb a { color: var(--slate); }
.breadcrumb-rb a:hover { color: var(--saffron-ink); }

/* page heroes for inner pages */
.page-hero {
  background: var(--night); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  border-bottom: 3px solid var(--saffron);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(242,140,24,.32) 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(var(--brand-green-abyss-rgb),.35) 0%, transparent 60%);
}
.page-hero > * { position: relative; }
.page-hero h1 {
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);
  font-weight: 600; letter-spacing: -0.03em; margin: var(--s-3) 0 var(--s-3);
}
:lang(hi) .page-hero h1 { letter-spacing: -0.01em; }
.page-hero .lede { color: #DEE4E1; max-width: 62ch; margin: 0; }
.page-hero .eyebrow { color: var(--saffron-lt); }
.page-hero .eyebrow::before { background: var(--saffron-lt); }

/* v3 page extras */
.tl-year{font-family:var(--font-mono);font-size:var(--t-xl);font-weight:600;color:var(--saffron-ink);font-variant-numeric:tabular-nums}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.stories .kchip--speech{color:var(--saffron-ink);border-color:rgba(168,82,9,.35)}
.stories .kchip--update{color: var(--pine-ink);border-color:rgba(var(--brand-green-abyss-rgb),.35)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.alert{border-radius:var(--radius-lg)}

/* ==========================================================================
   HERO PATCH v2 — REPLACES the earlier hero-patch.css entirely.
   Delete the previous patch block from style.css before pasting this.

   What changed and why:
     v1 pushed the rail and the cue apart with 7.25rem of padding. That
     removed the overlap but left a flat green slab at the bottom, and the
     slider dots sat outside .wrap so they aligned to nothing.

     v2 puts the cue and the dots on ONE row inside .wrap, directly under
     the rail. Same gutters as everything else, no dead space, and the two
     stranded elements become a single deliberate bar.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. UNDO the v1 clearance — the foot row replaces it
   --------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .hero-x__inner { padding-bottom: clamp(2rem, 1rem + 3vw, 3rem); }
}


/* ---------------------------------------------------------------------------
   2. THE FOOT ROW
   Sits inside .wrap, so its left and right edges line up exactly with the
   rail above it and the headline above that.
   --------------------------------------------------------------------------- */

.hero-x__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.25rem;
  padding-top: 1.1rem;
}


/* ---------------------------------------------------------------------------
   3. SCROLL CUE — now horizontal, left-aligned, in flow
   Overrides the absolute positioning from your section 6.
   --------------------------------------------------------------------------- */

.hero-x__cue {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
}
@media (min-width: 62rem) { .hero-x__cue { display: flex; } }

/* the second span becomes a small bobbing chevron instead of a long line */
.hero-x__cue span:last-child {
  width: 6px;
  height: 6px;
  background: none;
  border-right: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.5);
  transform: rotate(45deg);
  animation: hero-bob 2s ease-in-out infinite;
}
@keyframes hero-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(2px, 2px); }
}


/* ---------------------------------------------------------------------------
   4. SLIDER CONTROLS — in flow, right-aligned to the rail's right edge
   --------------------------------------------------------------------------- */

.hero-x__controls {
  position: static;
  right: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.hero-x__count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.42);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.hero-x__count b { color: rgba(255,255,255,.9); font-weight: 600; }

.hero-x__dots { display: flex; gap: .4rem; }

.hero-x__dot {
  position: relative;
  width: 1.75rem;
  height: 2px;
  padding: 0;
  border: none;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  overflow: hidden;
  transition: background 200ms var(--ease, ease);
}
.hero-x__dot:hover { background: rgba(255,255,255,.45); }

.hero-x__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-x__dot[aria-current="true"]::after {
  animation: hero-fill 6500ms linear forwards;
}
@keyframes hero-fill { to { transform: scaleX(1); } }

/* below 62rem the cue is hidden, so the dots take the left edge alone */
@media (max-width: 61.99rem) {
  .hero-x__foot { justify-content: flex-start; padding-top: .9rem; }
  .hero-x__controls { margin-left: 0; }
}


/* ---------------------------------------------------------------------------
   5. SLIDER STAGE (unchanged from v1)
   --------------------------------------------------------------------------- */

.hero-x__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease, cubic-bezier(.4,0,.2,1));
  will-change: opacity;
}
.hero-x__slide[data-active="true"] { opacity: 1; }

.hero-x__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.05);
}
.hero-x__slide[data-active="true"] img {
  animation: hero-drift 13s ease-out forwards;
}
@keyframes hero-drift {
  from { transform: scale(1.05); }
  to   { transform: scale(1.13); }
}


/* ---------------------------------------------------------------------------
   6. PER-SLIDE CAPTION
   --------------------------------------------------------------------------- */

.hero-x .eyebrow span { transition: opacity 380ms var(--ease, ease); }
.hero-x .eyebrow[data-swapping="true"] span { opacity: 0; }


/* ---------------------------------------------------------------------------
   7. REDUCED MOTION
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-x__slide,
  .hero-x__slide img,
  .hero-x__dot::after,
  .hero-x__cue span:last-child,
  .hero-x .eyebrow span {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .hero-x__slide img { transform: scale(1); }
  .hero-x__dot[aria-current="true"]::after { transform: scaleX(1); }
}

/* ==========================================================================
   HERO v3 — CINEMATIC REFINEMENT
   Builds on v2. Nothing is removed: slider, autoplay, controls, rail
   content and all URLs are untouched.

   The governing idea: treat the hero photograph as photojournalism, not as
   a poster with a filter over it. Every change below either removes a layer
   sitting between the viewer and the image, or gives the type enough
   structure that it no longer needs the image dimmed to stay readable.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE PHOTOGRAPH
   A light grade only. Faces in the crowd carry the emotion, so contrast and
   saturation come up a touch rather than down.
   -------------------------------------------------------------------------- */

.hero-x__slide img {
  filter: contrast(1.06) saturate(1.10) brightness(1.02);
}

/* grain drops back — it was competing with the crowd's own texture */
.hero-x__grain { opacity: .10; }


/* --------------------------------------------------------------------------
   2. TYPE
   The name gains a wide, very soft shadow. Invisible as a shadow; it does
   the work of separating white letterforms from a busy photograph, which
   is what the heavy scrim was previously doing.
   -------------------------------------------------------------------------- */

.hero-x__name {
  text-shadow: 0 2px 60px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.22);
}

/* the role line read as a divider band with rules above and below.
   One hairline under it is enough. */
.hero-x__role {
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,.16);
  letter-spacing: .13em;
  padding-bottom: .7rem;
}

.hero-x__lede {
  color: #DEE4E1;
  max-width: 40ch;
  text-shadow: 0 1px 24px rgba(0,0,0,.42);
}

.hero-x .eyebrow {
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}


/* --------------------------------------------------------------------------
   3. ACTIONS
   The primary sits on a deeper saffron so white type clears AA (5.1:1
   against #E87512, where the brighter tone managed only 3.4:1). Deeper
   also reads richer against a photograph.
   -------------------------------------------------------------------------- */

.hero-x .btn--primary {
  background: linear-gradient(180deg, #F28C18 0%, #E87512 100%);
  border-color: rgba(255,255,255,.12);
  color: #fff;
  padding: .9375rem 1.625rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 12px 30px -14px rgba(232,117,18,.9);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              background 260ms var(--ease);
}
.hero-x .btn--primary:hover {
  background: linear-gradient(180deg, #FFA033 0%, #E87512 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 18px 40px -16px rgba(232,117,18,1);
}

.hero-x .btn--light {
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(255,255,255,.26);
  color: #fff;
  padding: .9375rem 1.625rem;
  transition: transform 260ms var(--ease), background 260ms var(--ease),
              border-color 260ms var(--ease);
}
.hero-x .btn--light:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.46);
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   4. THE DATA RAIL — a panel in the image, not on it
   Glass instead of solid --night, so the photograph continues behind the
   figures. A saffron hairline fading to nothing marks its top edge.
   -------------------------------------------------------------------------- */

.hero-x__rail {
  position: relative;
  border-top: none;
  background: rgba(255,255,255,.09);   /* becomes the 1px cell dividers */
  border-radius: 2px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

/* the top edge: saffron at the reading side, dissolving to the right */
.hero-x__rail::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(242,140,24,.85) 0%,
    rgba(242,140,24,.30) 26%,
    rgba(255,255,255,.16) 58%,
    rgba(255,255,255,.05) 100%);
}

.rail__cell {
  background: rgba(var(--brand-green-abyss-rgb),.46);
  transition: background 320ms var(--ease);
}
.rail__cell:hover { background: rgba(var(--brand-green-abyss-rgb),.62); }

.rail__k {
  font-size: 9.5px;
  letter-spacing: .18em;
  color: rgba(222,228,225,.62);
  margin-bottom: .55rem;
}

.rail__v {
  font-size: clamp(1rem, .94rem + .34vw, 1.1875rem);
  letter-spacing: -.01em;
  text-shadow: 0 1px 18px rgba(0,0,0,.4);
}

/* the two figures are the only numerals here — give them the mono voice
   and let the margin read as a gain */
.rail__v .mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -.02em;
}
.hero-x__rail .rail__cell:last-child .rail__v .mono { color: #1DA053; }


/* --------------------------------------------------------------------------
   5. SLIDER CONTROLS
   -------------------------------------------------------------------------- */

.hero-x__dot {
  height: 2px;
  width: 2.25rem;
  background: rgba(255,255,255,.20);
  transition: background 240ms var(--ease), height 240ms var(--ease);
}
.hero-x__dot:hover { background: rgba(255,255,255,.42); height: 3px; }
.hero-x__dot[aria-current="true"] { height: 3px; }

.hero-x__count { font-size: 9.5px; letter-spacing: .2em; }


/* --------------------------------------------------------------------------
   6. MOBILE ART DIRECTION
   Not the desktop composition scaled down. The subject sits right-of-centre
   in the photograph, so a centred crop cuts him out entirely — the focal
   point moves with the viewport, and the scrim leans vertical because the
   type stacks above rather than beside him.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {

  .hero-x { min-height: min(92vh, 46rem); }

  .hero-x__slide img,
  .page-home .hero-x__media img { object-position: 72% 34%; }

  /* vertical scrim: clear through the middle where he is, weight top and
     bottom where the type and the rail sit */
  .hero-x__scrim {
    background:
      linear-gradient(180deg,
        rgba(var(--brand-green-abyss-rgb),.90) 0%,
        rgba(var(--brand-green-abyss-rgb),.62) 26%,
        rgba(var(--brand-green-abyss-rgb),.24) 46%,
        rgba(var(--brand-green-abyss-rgb),.66) 76%,
        rgba(var(--brand-green-abyss-rgb),.88) 100%),
      radial-gradient(120% 90% at 60% 42%,
        transparent 40%, rgba(0,0,0,.34) 100%);
  }

  .hero-x__name { text-shadow: 0 2px 40px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.3); }
  .hero-x__role { letter-spacing: .1em; font-size: .7rem; }
  .hero-x__lede { max-width: 34ch; }

  /* thumb-friendly, full-width actions */
  .hero-x .btn-row { display: flex; flex-direction: column; align-items: stretch; gap: .625rem; }
  .hero-x .btn { justify-content: center; min-height: 3rem; }

  /* the rail becomes two clean rows */
  .hero-x__rail { gap: 1px; }
  .rail__cell { padding: 1rem .875rem; }
  .rail__k { font-size: 9px; margin-bottom: .35rem; }
}

@media (max-width: 30rem) {
  .hero-x__slide img,
  .page-home .hero-x__media img { object-position: 74% 30%; }
  .hero-x__rail { grid-template-columns: repeat(2, 1fr); }
}


/* --------------------------------------------------------------------------
   7. MOTION
   The image drifts, the caption changes, everything else stays anchored.
   Re-animating the headline on every slide reads as a carousel tic rather
   than art direction, so it deliberately does not move.
   -------------------------------------------------------------------------- */

.hero-x__slide {
  transition: opacity 1400ms cubic-bezier(.33,0,.15,1);
}
.hero-x__slide[data-active="true"] img {
  animation: hero-drift 15s cubic-bezier(.22,.4,.3,1) forwards;
}
@keyframes hero-drift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-x__slide[data-active="true"] img { animation: none; transform: scale(1); }
  .hero-x .btn--primary:hover,
  .hero-x .btn--light:hover { transform: none; }
}

/* ==========================================================================
   HERO v4 — THE RECORD COMES OFF THE PHOTOGRAPH

   v3 floated the data rail on the image using backdrop-filter. That failed
   for a reason worth recording: backdrop-filter samples whatever sits
   behind it, so the same panel rendered pale over bright garlands and deep
   green over the dark left edge — two legibilities across one strip, and a
   different result on each of four rotating photographs.

   A data panel needs its own ground. The photograph is now uninterrupted
   edge to edge; the record sits directly beneath it on solid stock, and the
   seam between them is hidden by fading the scrim to exactly the band's
   colour. Reads as one composition, behaves predictably on every slide.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE SEAM
   The hero's last scrim stop matches --night exactly, so the photograph
   dissolves into the band rather than stopping at a hard edge.
   -------------------------------------------------------------------------- */

.hero-x { min-height: min(82vh, 52rem); }

.hero-x__scrim {
  background:
    linear-gradient(96deg,
      rgba(var(--brand-green-abyss-rgb),.92) 0%,
      rgba(var(--brand-green-abyss-rgb),.78) 24%,
      rgba(var(--brand-green-abyss-rgb),.42) 48%,
      rgba(var(--brand-green-abyss-rgb),.12) 72%,
      rgba(var(--brand-green-abyss-rgb),.06) 100%),
    linear-gradient(180deg,
      rgba(var(--brand-green-abyss-rgb),.66) 0%,
      rgba(var(--brand-green-abyss-rgb),.14) 20%,
      rgba(var(--brand-green-abyss-rgb),.04) 44%,
      rgba(var(--brand-green-abyss-rgb),.34) 72%,
      rgba(var(--brand-green-abyss-rgb),.88) 92%,
      rgba(var(--brand-green-abyss-rgb),1)  100%),
    radial-gradient(122% 104% at 52% 46%,
      transparent 44%,
      rgba(0,0,0,.20) 74%,
      rgba(0,0,0,.44) 100%);
}


/* --------------------------------------------------------------------------
   2. THE FOOT ROW
   Cue left, slider controls right — balanced on the photograph, aligned to
   the same gutters as the headline above.
   -------------------------------------------------------------------------- */

.hero-x__foot {
  padding-top: 0;
  padding-bottom: .5rem;
  min-height: 2.75rem;
}


/* --------------------------------------------------------------------------
   3. THE RECORD BAND
   NOTE: the class is .mprec, not .record — .record is already taken at
   line 589 for a grid used elsewhere on the site. Reusing it made this
   section a grid container, which pushed its .wrap into a quarter-width
   column and crushed the figures against the left edge.
   -------------------------------------------------------------------------- */

.mprec {
  position: relative;
  display: block;
  background: var(--night);
  z-index: 4;
}

/* one hairline across the top: saffron at the reading edge, dissolving right */
.mprec::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(242,140,24,.9) 0%,
    rgba(242,140,24,.45) 22%,
    rgba(255,255,255,.16) 55%,
    rgba(255,255,255,.06) 100%);
}

.mprec__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}
@media (min-width: 56rem) {
  .mprec__grid { grid-template-columns: repeat(4, 1fr); }
}

.mprec__cell {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem) clamp(1.1rem, .7rem + 1.7vw, 2.25rem);
  border-left: 1px solid rgba(255,255,255,.09);
}
.mprec__cell:first-child { padding-left: 0; border-left: none; }

/* two-up: cells 1 and 3 open their row, and a rule separates the rows */
@media (max-width: 55.99rem) {
  .mprec__cell:nth-child(odd) { padding-left: 0; border-left: none; }
  .mprec__cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.09); }
}
@media (min-width: 56rem) {
  .mprec__cell:last-child { padding-right: 0; }
}

.mprec__k {
  margin: 0 0 .8rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(222,228,225,.5);
  white-space: nowrap;
}
:lang(hi) .mprec__k { letter-spacing: .04em; text-transform: none; font-size: 11px; }

.mprec__v {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #fff;
}
.mprec__v .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}

.mprec__sub {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .005em;
  color: rgba(222,228,225,.46);
}

/* the margin is the one directional figure here */
.mprec__cell:last-child .mprec__v .mono { color: #1DA053; }

/* --------------------------------------------------------------------------
   4. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .hero-x { min-height: min(78vh, 40rem); }

  .hero-x__scrim {
    background:
      linear-gradient(180deg,
        rgba(var(--brand-green-abyss-rgb),.90) 0%,
        rgba(var(--brand-green-abyss-rgb),.60) 26%,
        rgba(var(--brand-green-abyss-rgb),.22) 46%,
        rgba(var(--brand-green-abyss-rgb),.52) 74%,
        rgba(var(--brand-green-abyss-rgb),.92) 94%,
        rgba(var(--brand-green-abyss-rgb),1) 100%),
      radial-gradient(120% 90% at 60% 42%,
        transparent 40%, rgba(0,0,0,.34) 100%);
  }

  .mprec__cell { padding: 1.15rem .9rem; }
  .mprec__k { font-size: 9px; margin-bottom: .45rem; }
  .mprec__sub { font-size: 10.5px; margin-top: .3rem; }
}


/* --------------------------------------------------------------------------
   5. RETIRE THE OLD IN-PHOTO RAIL
   The markup no longer emits it. These rules are neutralised so nothing
   stranded can reappear if the old block is ever pasted back.
   -------------------------------------------------------------------------- */

.hero-x__rail { display: none; }

/* ==========================================================================
   v5 — POLISH ON THE NEW GREEN (#14703B)

   Small, load-bearing details only. Each one earns its place; nothing here
   is decoration for its own sake. The brand green is bright enough to carry
   fills and large type but not small text, so the scale splits:

     --pine       #14703B   fills, buttons, large type      4.3:1
     --pine-ink   #10562D   links, small text on white      6.1:1
     --pine-deep  #10562D   hover, pressed                  7.8:1
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE DETAILS BROWSERS RENDER GREY UNLESS TOLD OTHERWISE
   Selection, focus and scrollbar are the three surfaces that quietly betray
   a template. Keying them to the brand costs nothing and reads as care.
   -------------------------------------------------------------------------- */

::selection { background: rgba(242,140,24,.26); color: inherit; }

.hero-x ::selection,
.mprec ::selection { background: rgba(242,140,24,.34); color: #fff; }

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
  border-radius: 2px;
}
.hero-x :focus-visible,
.mprec :focus-visible { outline-color: var(--saffron); }

@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--pine-deep) var(--pine-wash); }
}


/* --------------------------------------------------------------------------
   2. THE RECORD BAND
   The figures are the point of this band, so they get the confidence.
   A quiet top marker per cell replaces the flat dividers doing all the work.
   -------------------------------------------------------------------------- */

.mprec__v {
  font-size: clamp(1.125rem, 1rem + .62vw, 1.5625rem);
  letter-spacing: -.022em;
}

.mprec__cell::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--saffron);
  transition: width 420ms var(--ease);
}
.mprec__cell:hover::after { width: 2.5rem; }

@media (min-width: 56rem) {
  .mprec__cell:first-child::after { width: 2.5rem; }
}


/* --------------------------------------------------------------------------
   3. NAVBAR → HERO
   The utility bar was competing with the headline in the first seconds.
   It recedes until touched, so the photograph owns the opening.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. PRIMARY ACTION
   Saffron sits better against jade than it did against leaf green — the two
   hues are further apart now, so the button separates without shouting.
   -------------------------------------------------------------------------- */

.hero-x .btn--primary {
  border-radius: 3px;
  letter-spacing: .015em;
}

.hero-x .btn--light { border-radius: 3px; }


/* --------------------------------------------------------------------------
   5. THE CAPTION
   Rises as it changes rather than only fading — reads as the photograph
   announcing itself, not as text blinking.
   -------------------------------------------------------------------------- */

.hero-x .eyebrow span {
  display: inline-block;
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.hero-x .eyebrow[data-swapping="true"] span {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-x .eyebrow span,
  .mprec__cell::after { transition: none; }
}

/* ==========================================================================
   v6 — THE DARK ZONE READS AS ONE FIELD

   Two problems visible once the record band went live:

   1. .mprec sat on --night (#10562D) and .inscribe directly beneath it on
      --night-soft (#10562D). Four percent apart in lightness — too close to
      register as a deliberate step, far enough to look like a mismatch.
      They are both the record, so they now share one ground and a hairline
      does the separating.

   2. The saffron in .mprec::before (which runs bright across the first 22%
      of the width) landed in the same place as the permanent marker on the
      first cell. Two saffron devices in one corner. The marker is now
      hover-only and the hairline carries the accent alone.
   ========================================================================== */

.page-home .inscribe { background: var(--night); }

.mprec { border-bottom: 1px solid rgba(255,255,255,.07); }

/* the first cell no longer keeps a permanent marker — the top hairline
   already anchors that corner */
@media (min-width: 56rem) {
  .mprec__cell:first-child::after { width: 0; }
  .mprec__cell:first-child:hover::after { width: 2.5rem; }
}

/* ==========================================================================
   v7 — THE GREEN GROUND, AND THE HEADER THAT MATCHES IT

   The dark ground became the brand green (#10562D). Two consequences had
   to be handled, or the change looks broken rather than bold:

   1. The ground went from 11% lightness to 27%. White still clears at
      5.8:1, but every muted label was tuned for near-black and collapsed
      to about 2:1 — that is why "West Bengal" was barely visible. On this
      ground white needs 0.83 alpha to reach 4.5:1, so the muted scale is
      rebuilt rather than nudged.

   2. The homepage header floated transparent over the photograph, which
      left it dark while the bands below were green. It is now solid and
      keyed to var(--night), so header and bands share one value and can
      never drift apart again — change the token, everything follows.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HEADER — solid, in flow, same token as the bands
   -------------------------------------------------------------------------- */

.page-home .site-header {
  position: relative;
  background: var(--night);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.page-home .brand__role { color: rgba(255,255,255,.78); }
/* the photograph no longer sits under the header, so it stops reserving
   space for one */
.page-home .hero-x__inner { padding-top: clamp(3rem, 2rem + 4vw, 5rem); }

.page-home .site-header.is-solid { background: var(--night); }


/* --------------------------------------------------------------------------
   2. MUTED TEXT, REBUILT FOR A 27%-LIGHTNESS GROUND
   -------------------------------------------------------------------------- */

.mprec__k        { color: rgba(255,255,255,.84); }
.mprec__sub      { color: rgba(255,255,255,.86); }
.hero-x__cue     { color: rgba(255,255,255,.86); }
.hero-x__count   { color: rgba(255,255,255,.86); }
.hero-x__count b { color: #fff; }

.mprec__cell,
.mprec__grid > .mprec__cell { border-color: rgba(255,255,255,.20); }
.mprec        { border-bottom-color: rgba(255,255,255,.16); }

.hero-x__dot  { background: rgba(255,255,255,.46); }
.hero-x__dot:hover { background: rgba(255,255,255,.58); }

/* the margin figure read as pale mint on the old dark ground; on green it
   needs to go the other way — near-white with weight doing the work */
.mprec__cell:last-child .mprec__v .mono { color: #ffffff; }

.section--night .note,
.inscribe__note { color: rgba(255,255,255,.88) !important; }
.section--night .eyebrow { color: rgba(255,255,255,.82); }
.hero-x__office { color: rgba(255,255,255,.86); }


/* --------------------------------------------------------------------------
   3. THE TOP HAIRLINE
   Saffron on near-black was a whisper; on green it needs less brightness,
   not more, or it turns into a stripe.
   -------------------------------------------------------------------------- */

.mprec::before {
  background: linear-gradient(90deg,
    rgba(242,140,24,.95) 0%,
    rgba(242,140,24,.40) 20%,
    rgba(255,255,255,.22) 52%,
    rgba(255,255,255,.10) 100%);
}

/* ==========================================================================
   v8 — SAFFRON · WHITE · DEEP GREEN
   The art direction, not just the palette.

   The previous build put a mid-green (#14703B) on the header, the hero
   floor, the record band, the inscription, four content sections, the
   utility bar and the footer. Green stopped meaning anything because it
   was everywhere — and the muted greys were green-tinted too, so even the
   body copy carried the cast.

   Three colours, three jobs, held everywhere:
     SAFFRON      identity and action   — what you can do
     WHITE        clarity and space     — the dominant surface
     DEEP GREEN   trust and authority   — where the site plants its feet

   Target ratio: light surfaces 50–60%, deep green 20–25%, saffron 10–15%.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE HEADER — deep green utility bar, white navigation, saffron action

   This three-step is the strongest signature on the site, so it is now the
   same on every page. The homepage previously ran a dark transparent header
   over the photograph; that made the whole opening one green mass and left
   the homepage looking like a different site from the other fourteen.
   -------------------------------------------------------------------------- */

.rb-topbar {
  background: var(--brand-green-deep);
  color: var(--on-green-muted);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.rb-topbar a { color: var(--on-green-strong); }
.rb-topbar a:hover { color: var(--brand-saffron-light); }
.rb-lang a { color: var(--on-green-strong); }
.rb-lang a.active {
  background: var(--brand-saffron);
  color: var(--text-primary);
  font-weight: 600;
}

.site-header,
.page-home .site-header,
.page-home .site-header.is-solid {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header.is-scrolled,
.page-home .site-header.is-scrolled {
  background: var(--white);
  border-bottom-color: var(--border-medium);
  box-shadow: 0 1px 20px rgba(23,35,29,.07);
}

.rb-navbar .brand__name,
.page-home .rb-navbar .brand__name { color: var(--nav-ink); }
.rb-navbar .brand__role,
.page-home .rb-navbar .brand__role { color: var(--text-secondary); }

/* the active state is the one place saffron appears in the bar */
.rb-navbar .nav-link,
.page-home .rb-navbar .nav-link {
  position: relative;
  color: var(--nav-ink);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.rb-navbar .nav-link:hover,
.page-home .rb-navbar .nav-link:hover {
  color: var(--brand-saffron-ink);
  background: none;
}
.rb-navbar .nav-link.active,
.page-home .rb-navbar .nav-link.active {
  color: var(--brand-saffron-ink);
  font-weight: 600;
  background: none;
  box-shadow: none;
}
.rb-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .1rem;
  height: 2px;
  background: var(--brand-saffron);
}

.rb-navbar .navbar-toggler,
.page-home .rb-navbar .navbar-toggler { border-color: var(--border-medium); }
.page-home .rb-navbar .navbar-toggler-icon { filter: none; }
.rb-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(242,140,24,.24); }

/* mobile sheet: deep green, so it reads as an extension of the utility bar */
@media (max-width: 991.98px) {
  .rb-navbar .navbar-collapse {
    background: var(--brand-green-deep);
    border: 1px solid var(--brand-green-line);
  }
  .rb-navbar .navbar-collapse .nav-link,
  .page-home .rb-navbar .navbar-collapse .nav-link { color: var(--on-green-strong); }
  .rb-navbar .navbar-collapse .nav-link:hover,
  .rb-navbar .navbar-collapse .nav-link.active {
    color: var(--brand-saffron-light);
    background: rgba(255,255,255,.06);
    box-shadow: none;
  }
  .rb-navbar .navbar-collapse .nav-link.active::after { display: none; }
}

/* the homepage header is in flow again, so the hero starts below it */
.page-home .hero-x__inner { padding-top: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); }


/* --------------------------------------------------------------------------
   2. SECTION RHYTHM — the fix for "green everywhere"

   Four grounds instead of two. Consecutive sections must not repeat one,
   which is what turns a page into a sequence rather than a slab.
   -------------------------------------------------------------------------- */

.section--soft  { background: var(--surface-soft); }
.section--warm  { background: var(--surface-warm); }
.section--mist  { background: var(--surface-soft); }

.section--night {
  background: var(--brand-green-deep);
  color: var(--on-green-strong);
}
.section--night h2,
.section--night h3,
.section--night h4 { color: var(--white); }
.section--night p,
.section--night li { color: var(--on-green-strong); }
.section--night .lede { color: var(--on-green-strong); }
.section--night .eyebrow,
.section--night .marker__label { color: var(--on-green-muted); }
.section--night .marker__n { color: var(--brand-saffron-light); }
.section--night .marker__rule {
  background: linear-gradient(90deg, rgba(255,176,74,.55), transparent);
}
.section--night .note,
.section--night .note.mb-0 { color: var(--on-green-muted) !important; }
.section--night a { color: var(--white); }
.section--night a:hover { color: var(--brand-saffron-light); }

/* a hairline where a light section meets a dark one */
.section--night + .section:not(.section--night) { border-top: none; }


/* --------------------------------------------------------------------------
   3. THE SAFFRON FEATURE SECTION

   Reserved for the moments the brief names: the call to action, the
   citizen-connect invitation. One or two per page, never a default.
   -------------------------------------------------------------------------- */

.section--accent {
  position: relative;
  background: linear-gradient(135deg,
    var(--brand-saffron-light) 0%,
    var(--brand-saffron) 54%,
    var(--brand-saffron-dark) 100%);
  color: var(--text-primary);
}
.section--accent h2,
.section--accent h3 { color: var(--text-primary); }
.section--accent .lede,
.section--accent p { color: #2A1D0B; }
.section--accent .eyebrow,
.section--accent .marker__label { color: var(--brand-green-dark); }
.section--accent .marker__n { color: var(--brand-green-dark); }
.section--accent .marker__rule {
  background: linear-gradient(90deg, rgba(var(--brand-green-abyss-rgb),.5), transparent);
}
/* deep green is the action colour here — saffron on saffron would vanish */
.section--accent .btn--primary {
  background: var(--brand-green-deep);
  border-color: var(--brand-green-dark);
  color: var(--white);
}
.section--accent .btn--primary::before { background: var(--brand-green-dark); }
.section--accent .btn--primary:hover { color: var(--white); border-color: var(--brand-green-dark); }
.section--accent .btn--ink,
.section--accent .btn--ghost {
  background: transparent;
  border-color: rgba(var(--brand-green-abyss-rgb),.55);
  color: var(--brand-green-dark);
}
.section--accent .btn--ink::before,
.section--accent .btn--ghost::before { background: var(--brand-green-deep); }
.section--accent .btn--ink:hover,
.section--accent .btn--ghost:hover { color: var(--white); border-color: var(--brand-green-dark); }
.section--accent :focus-visible { outline-color: var(--brand-green-dark); }


/* --------------------------------------------------------------------------
   4. TYPE HIERARCHY ON LIGHT

   Deep green earns a job in the type rather than in the backgrounds: it
   marks section headings, which is a far more economical way to carry the
   brand than painting a whole band.
   -------------------------------------------------------------------------- */

/* NOTE: this was originally written as
     .h-section, .section > .wrap > h2, .page-hero + .section h2
   The second selector is (0,1,2) — one class, two elements — which
   outranks .section--night h2 at (0,1,1). Every section heading inside a
   deep-green band therefore rendered deep green on deep green: a 52px
   headline at 1.00:1, completely invisible. The markup already carries
   .h-section everywhere, so the extra selectors bought nothing and cost
   the dark sections their headings. */
.h-section { color: var(--brand-green-dark); }

.eyebrow { color: var(--brand-saffron-ink); }
.eyebrow::before { background: var(--brand-saffron); }
.marker__n { color: var(--brand-saffron-ink); }
.marker__rule { background: linear-gradient(90deg, rgba(242,140,24,.6), transparent); }
.marker__label { color: var(--text-secondary); }

.lede { color: var(--text-secondary); }


/* --------------------------------------------------------------------------
   5. LINKS — green by default, saffron on interaction

   Saffron marks the moment of interaction. It is not the resting state,
   or it stops meaning anything.
   -------------------------------------------------------------------------- */

a { color: var(--brand-green-dark); }
a:hover { color: var(--brand-saffron-ink); }

.src { color: var(--text-secondary); }
.src:hover { color: var(--brand-saffron-ink); }
.section--night .src { color: var(--on-green-muted); }
.section--night .src:hover { color: var(--brand-saffron-light); }

::selection { background: rgba(242,140,24,.30); color: var(--text-primary); }
.section--night ::selection,
.hero-x ::selection,
.mprec ::selection { background: rgba(242,140,24,.42); color: var(--white); }

:focus-visible { outline: 3px solid var(--brand-saffron); outline-offset: 2px; }
.hero-x :focus-visible,
.mprec :focus-visible,
.section--night :focus-visible { outline-color: var(--brand-saffron-light); }


/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

.btn--primary {
  background: var(--brand-saffron);
  border-color: var(--brand-saffron);
  color: var(--text-primary);
  font-weight: 600;
}
.btn--primary::before { background: var(--brand-saffron-dark); }
.btn--primary:hover {
  color: var(--text-primary);
  border-color: var(--brand-saffron-dark);
}

.btn--ink {
  background: var(--brand-green-deep);
  border-color: var(--brand-green-dark);
  color: var(--white);
}
.btn--ink::before { background: var(--brand-green-dark); }
.btn--ink:hover { color: var(--white); border-color: var(--brand-green-dark); }

.btn--ghost {
  background: transparent;
  border-color: var(--brand-green-dark);
  color: var(--brand-green-dark);
}
.btn--ghost::before { background: var(--brand-green-deep); }
.btn--ghost:hover { color: var(--white); border-color: var(--brand-green-dark); }

.btn--light {
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: var(--white);
}
.btn--light::before { background: var(--white); }
.btn--light:hover { color: var(--brand-green-dark); border-color: var(--white); }

.section--night .btn--ghost {
  border-color: rgba(255,255,255,.35);
  color: var(--white);
}
.section--night .btn--ghost::before { background: var(--white); }
.section--night .btn--ghost:hover { color: var(--brand-green-dark); border-color: var(--white); }


/* --------------------------------------------------------------------------
   7. CARDS — white stock, one saffron micro-accent

   A rule that grows on hover rather than a shadow that inflates. Costs one
   pseudo-element and reads as intent rather than as a default card style.
   -------------------------------------------------------------------------- */

.card,
.story,
.entry,
.mr-story {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
}
.card::before,
.story::before,
.mr-story::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 2rem; height: 2px;
  background: var(--brand-saffron);
  transition: width 420ms var(--ease);
  z-index: 2;
}
.card:hover::before,
.story:hover::before,
.mr-story:hover::before { width: 4.5rem; }

.card:hover,
.story:hover,
.mr-story:hover {
  transform: translateY(-4px);
  border-color: var(--border-medium);
  box-shadow: 0 14px 36px -16px rgba(23,35,29,.20);
}

.card h3, .story h3, .entry h3 { color: var(--text-primary); }
.card p,  .story p,  .entry p  { color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .story:hover, .mr-story:hover { transform: none; }
  .card::before, .story::before, .mr-story::before { transition: none; }
}


/* --------------------------------------------------------------------------
   8. STATISTICS — deep green figures on light, white on dark

   §16: the numbers carry the weight; saffron marks them rather than
   colouring them. An all-orange statistic reads as a sale banner.
   -------------------------------------------------------------------------- */

.stat__value,
.total__v { color: var(--brand-green-dark); }
.stat__unit { color: var(--brand-saffron-ink); }
.stat__label { color: var(--text-secondary); }

.section--night .stat__value { color: var(--white); }
.section--night .stat__label { color: var(--on-green-muted); }
.section--night .stat__unit  { color: var(--brand-saffron-light); }

.total { position: relative; padding-top: var(--s-4); border-top: 1px solid var(--border-light); }
.total::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 2.5rem; height: 2px; background: var(--brand-saffron);
}
.total__k { color: var(--text-secondary); }

/* the inscription band comes off the dark and onto warm stock, so the
   figures switch from a light saffron to deep green and gain contrast */
.inscribe,
.page-home .inscribe {
  background: var(--surface-warm);
  color: var(--text-primary);
  border-top: none;
  border-bottom: 1px solid var(--border-light);
}
.inscribe::after { opacity: 0; }
.inscribe__item { position: relative; padding-top: var(--s-4); }
.inscribe__item::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.25rem; height: 2px; background: var(--brand-saffron);
}
.inscribe__v { color: var(--brand-green-dark); }
.inscribe__v small { color: var(--brand-saffron-ink); }
.inscribe__k { color: var(--text-secondary); }
.inscribe__note,
.section--night .inscribe__note { color: var(--text-secondary) !important; }
.inscribe .src { color: var(--text-secondary); }
.inscribe .src:hover { color: var(--brand-saffron-ink); }


/* --------------------------------------------------------------------------
   9. THE HERO — a controlled warm glow, never an orange filter

   Deep green environment, saffron entering as light rather than as a wash
   over the photograph. The last stop of the vertical scrim matches
   --brand-green exactly so the image dissolves into the record band.
   -------------------------------------------------------------------------- */

.hero-x__scrim {
  background:
    radial-gradient(72% 62% at 32% 22%,
      rgba(242,140,24,.10) 0%,
      transparent 68%),
    linear-gradient(96deg,
      rgba(var(--brand-green-abyss-rgb),.92) 0%,
      rgba(var(--brand-green-abyss-rgb),.76) 24%,
      rgba(var(--brand-green-abyss-rgb),.40) 50%,
      rgba(var(--brand-green-abyss-rgb),.10) 74%,
      rgba(var(--brand-green-abyss-rgb),.04) 100%),
    linear-gradient(180deg,
      rgba(var(--brand-green-abyss-rgb),.62) 0%,
      rgba(var(--brand-green-abyss-rgb),.12) 22%,
      rgba(var(--brand-green-abyss-rgb),.04) 46%,
      rgba(var(--brand-green-abyss-rgb),.34) 74%,
      rgba(var(--brand-green-abyss-rgb),.90) 93%,
      rgba(var(--brand-green-abyss-rgb),1) 100%);
}

.hero-x__glow {
  background: radial-gradient(52% 46% at 84% 8%,
    rgba(242,140,24,.26) 0%, transparent 62%);
}

/* the primary now carries dark type on saffron: 6.6:1, where white on
   saffron manages only 2.5:1 */
.hero-x .btn--primary {
  background: linear-gradient(180deg, var(--brand-saffron) 0%, var(--brand-saffron-dark) 100%);
  border-color: rgba(255,255,255,.18);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 12px 30px -14px rgba(232,117,18,.85);
}
.hero-x .btn--primary:hover {
  background: linear-gradient(180deg, #FFA033 0%, var(--brand-saffron) 100%);
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 18px 40px -16px rgba(232,117,18,.95);
}

.hero-x__lede { color: var(--on-green-strong); }
.hero-x .eyebrow { color: var(--brand-saffron-light); }
.hero-x .eyebrow::before { background: var(--brand-saffron-light); }
.hero-x__flag {
  background: linear-gradient(90deg,
    var(--brand-saffron) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--brand-green-dark) 66.66% 100%);
}

/* the record plinth */
.mprec { background: var(--brand-green-deep); }
.mprec::before {
  background: linear-gradient(90deg,
    rgba(242,140,24,.95) 0%,
    rgba(242,140,24,.45) 20%,
    rgba(255,255,255,.20) 52%,
    rgba(255,255,255,.08) 100%);
}
.mprec__k   { color: var(--on-green-muted); }
.mprec__sub { color: var(--on-green-faint); }
.mprec__v   { color: var(--white); }
.mprec__cell::after { background: var(--brand-saffron); }


/* --------------------------------------------------------------------------
   10. INNER-PAGE HERO
   The brief's background direction, applied where there is no photograph.
   -------------------------------------------------------------------------- */

.page-hero {
  background:
    radial-gradient(72% 62% at 32% 22%,
      rgba(242,140,24,.10) 0%,
      transparent 68%),
    linear-gradient(158deg,
      var(--brand-green-dark) 0%,
      var(--brand-green-deep) 48%,
      var(--brand-green-dark) 100%);
  border-bottom: 3px solid var(--brand-saffron);
  color: var(--white);
}
.page-hero::before {
  background: radial-gradient(58% 60% at 88% 4%, rgba(242,140,24,.20) 0%, transparent 62%);
}
.page-hero .lede { color: var(--on-green-strong); }
.page-hero .eyebrow { color: var(--brand-saffron-light); }
.page-hero .eyebrow::before { background: var(--brand-saffron-light); }
.page-hero .breadcrumb-rb,
.page-hero .breadcrumb-rb a { color: var(--on-green-muted); }
.page-hero .breadcrumb-rb a:hover { color: var(--brand-saffron-light); }


/* --------------------------------------------------------------------------
   11. FORMS — white, deep green labels, saffron focus
   -------------------------------------------------------------------------- */

.form-label,
.field label { color: var(--brand-green-dark); font-weight: 600; }

.form-control, .form-select, .field input, .field textarea, .field select {
  background: var(--white);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}
.form-control::placeholder, .field input::placeholder, .field textarea::placeholder {
  color: var(--text-muted);
}
.form-control:focus, .form-select:focus,
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand-saffron);
  box-shadow: 0 0 0 3px rgba(242,140,24,.12);
  outline: none;
}
.field__hint { color: var(--text-secondary); }


/* --------------------------------------------------------------------------
   12. FOOTER — the site's strongest deep-green field
   -------------------------------------------------------------------------- */

.rb-footer {
  background: linear-gradient(145deg,
    var(--brand-green-deep) 0%,
    #0B3C20 55%,
    #14703B 100%);
  color: var(--on-green-strong);
  border-top: 3px solid var(--brand-saffron);
}
.rb-footer a { color: var(--on-green-strong); }
.rb-footer a:hover { color: var(--brand-saffron-light); }
.rb-footer__title { color: var(--brand-saffron-light); }
.rb-footer .brand__name { color: var(--white); }
.rb-footer .brand__role { color: var(--on-green-muted); }
.rb-footer__social a { border-color: rgba(255,255,255,.22); color: var(--on-green-strong); }
.rb-footer__social a:hover {
  background: var(--brand-saffron);
  border-color: var(--brand-saffron);
  color: var(--text-primary);
}
.rb-footer__bottom { border-top-color: rgba(255,255,255,.14); color: var(--on-green-muted); }
.rb-footer__disclaimer { color: var(--on-green-muted); }


/* --------------------------------------------------------------------------
   13. REMAINING DARK SURFACES — all on one token

   Every dark field on the site now resolves to --brand-green. Change that
   one value and the header strip, the hero floor, the record band, the
   feature sections, the closing and the footer all move together.
   -------------------------------------------------------------------------- */

.closing, .finale { background: var(--brand-green-deep); color: var(--white); }
.closing .lede, .finale__tags { color: var(--on-green-strong); }
.closing::before {
  background: radial-gradient(50% 60% at 82% 12%, rgba(242,140,24,.24) 0%, transparent 62%);
}
.finale::before {
  background: linear-gradient(90deg,
    var(--brand-saffron) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--brand-green-dark) 66.66% 100%);
}
.headline-project { background: var(--brand-green-deep); }
.headline-project p { color: var(--on-green-strong); }

.mr-pill { color: var(--on-green-strong); border-color: rgba(255,255,255,.22); }
.mr-pill:hover {
  color: var(--text-primary);
  background: var(--brand-saffron);
  border-color: var(--brand-saffron);
}
.mr-sub, .mr-feat__sum, .mr-moment__t { color: var(--on-green-strong); }
.mr-date, .mr-cat, .mr-social__sub, .mr-plat__h { color: var(--on-green-muted); }
.mr-story .mr-date, .mr-ext { color: var(--text-secondary); }

.bridge__a { color: var(--text-secondary); }
.section--night .bridge__a { color: var(--on-green-muted); }
.bridge__rule { background: linear-gradient(90deg, transparent, var(--brand-saffron), transparent); }

.statement { background: var(--surface-soft); }
.statement__mark { background: var(--brand-saffron); }
.statement__text { color: var(--brand-green-dark); }
.statement__by { color: var(--text-secondary); }

.corp { background: var(--white); }
.corp__k { color: var(--brand-saffron-ink); }

.chip[aria-pressed="true"] {
  background: var(--brand-saffron);
  border-color: var(--brand-saffron);
  color: var(--text-primary);
}

.kchip--speech, .stories .kchip--speech { color: var(--brand-saffron-ink); border-color: rgba(168,82,9,.35); }
.kchip--update, .stories .kchip--update { color: var(--brand-green-dark); border-color: rgba(var(--brand-green-abyss-rgb),.35); }
.section--night .kchip--speech,
.section--night .kchip--video { color: var(--brand-saffron-light); border-color: rgba(255,176,74,.45); }
.section--night .kchip--update { color: var(--green-lt); border-color: rgba(29,160,83,.42); }
.section--night .kchip--press { color: var(--on-green-strong); }

.tl-year { color: var(--brand-saffron-ink); }
.section--night .priority__anchor { color: var(--green-lt); border-left-color: var(--green-lt); }
.section--night .cmp__label { color: var(--on-green-muted); }
.section--night .cmp__bar--other { background: rgba(255,255,255,.24); }
.cmp__bar { background: var(--brand-saffron); }
.section--night .cmp__bar { background: var(--brand-saffron-light); }

.section--night .matter__meta,
.section--night .commit__body { color: var(--on-green-muted); }
.section--night .commit__name { color: var(--white); }
.section--night .road p { color: var(--on-green-strong); }
.section--night .road__num { color: var(--brand-saffron-light); }
.road__num { color: var(--brand-saffron); }
.road__anchor { color: var(--text-secondary); }
.section--night .road__anchor { color: var(--on-green-muted); }

.skip { background: var(--brand-saffron); color: var(--text-primary); }
.skip:focus { color: var(--text-primary); }

.progress__bar {
  background: linear-gradient(90deg, var(--brand-saffron), var(--brand-saffron-light));
}

@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--brand-green-dark) var(--surface-soft); }
}


/* --------------------------------------------------------------------------
   14. ICONS — one behaviour, three grounds
   -------------------------------------------------------------------------- */

.bi { color: inherit; }
.section--night .bi { color: var(--on-green-strong); }
.rb-topbar .bi { color: var(--brand-saffron-light); }
.icon-accent, .card .bi, .entry .bi { color: var(--brand-saffron-ink); }
.section--night .card .bi { color: var(--brand-saffron-light); }


/* --------------------------------------------------------------------------
   15. RESPONSIVE — the hierarchy holds, it is not merely scaled down
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .section--accent { background: linear-gradient(160deg,
    var(--brand-saffron-light) 0%, var(--brand-saffron) 58%, var(--brand-saffron-dark) 100%); }
}

@media (max-width: 48rem) {
  /* the saffron accent stays a full field on mobile — shrinking it to a
     stripe would lose the one moment of colour on the page */
  .section--accent { padding-block: var(--section-y); }
  .rb-navbar .nav-link.active::after { left: 0; right: auto; width: 1.75rem; }
  .inscribe__item::before { width: 1.75rem; }
}

@media (min-width: 120rem) {
  /* at 1920 and above the white gets loose — hold the measure */
  .wrap { max-width: 86rem; }
}


/* --------------------------------------------------------------------------
   16. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .section--night, .section--accent, .rb-footer, .page-hero,
  .hero-x__scrim, .mprec, .closing, .finale {
    background: none !important;
    color: #000 !important;
  }
  .section--night h2, .section--night h3, .page-hero h1 { color: #000 !important; }
}


/* --------------------------------------------------------------------------
   17. TWO ACCESSIBILITY CORRECTIONS TO THE BRIEF

   Both keep saffron as the focus/action colour. Neither changes what the
   design looks like at arm's length; both change what it does at 3:1.

   a) Saffron on white is 2.46:1. As a focus ring that fails WCAG 1.4.11
      (non-text contrast, 3:1). Rather than abandon saffron, the ring is
      bounded by a deep-green hairline: the indicator's outer edge then
      sits at 15.6:1 against the page while the band itself stays saffron.

   b) The form focus border uses --brand-saffron-dark (3.01:1) instead of
      --brand-saffron (2.46:1). One step down the same ramp, and the
      saffron glow from the brief is unchanged.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--brand-saffron);
  border-radius: 2px;
}

/* on deep green the relationship inverts — saffron already clears 6.7:1
   there, so the hairline turns white and the ring needs no help */
.section--night :focus-visible,
.hero-x :focus-visible,
.mprec :focus-visible,
.rb-footer :focus-visible,
.rb-topbar :focus-visible,
.page-hero :focus-visible,
.closing :focus-visible,
.finale :focus-visible {
  outline-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 3px var(--brand-saffron);
}

/* on the saffron field, deep green does the whole job */
.section--accent :focus-visible {
  outline-color: var(--brand-green-dark);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9);
}

.form-control:focus, .form-select:focus,
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand-saffron-dark);
  box-shadow: 0 0 0 3px rgba(242,140,24,.12);
  outline: none;
}

/* comparison bars are meaningful graphics, so they carry the 3:1 floor too */
.section--night .cmp__bar--other { background: rgba(255,255,255,.40); }
.cmp__bar--other { background: var(--border-medium); }
.cmp__track { background: rgba(255,255,255,.14); }
.section--night .cmp__track { background: rgba(255,255,255,.14); }


/* --------------------------------------------------------------------------
   18. TWO CORRECTIONS FOUND IN RENDER

   a) THE UTILITY BAR ON THE HOMEPAGE
      A rule left over from the old floating-over-photograph header
      (.page-home .rb-topbar, translucent at .46 with a backdrop blur) beat
      the new .rb-topbar on specificity, so the homepage strip rendered as
      washed sage (#8F9D96) while every other page showed deep green. The
      header no longer floats, so the translucency has nothing to sit on.
      One ground, every page, from one token.

   b) THE TRICOLOUR HAIRLINE UNDER THE NAVBAR
      Against the old dark header the three bands all read. Against a white
      navbar the middle white third disappears and the strip reads as a 3px
      gap in the page. The tricolour therefore stays where it still works —
      the closing band, which sits on deep green — and the top of the hero
      takes a saffron rule instead. That also matches the saffron rule that
      closes every inner-page hero, so all fifteen heroes are now bounded
      the same way.
   -------------------------------------------------------------------------- */

.page-home .rb-topbar {
  background: var(--brand-green-deep);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.page-home .rb-topbar a { color: var(--on-green-strong); }
.page-home .rb-topbar a:hover { color: var(--brand-saffron-light); }

/* the strip stayed visible on other pages and vanished here on scroll */
.page-home .site-header.is-solid .rb-topbar { display: block; }

.hero-x__flag {
  height: 3px;
  background: var(--brand-saffron);
}


/* --------------------------------------------------------------------------
   19. IMAGE PLACEHOLDERS

   No photographs have been supplied yet, so every image slot on the site
   currently renders as a filled block — roughly fifteen of them on the
   homepage alone. Those blocks were a deep-green gradient, which meant the
   colour ratio was being pushed toward green by the one element that is
   meant to be temporary. They are neutral graphite until the photography
   lands, at which point they disappear entirely.
   -------------------------------------------------------------------------- */

.photo-slot {
  background:
    radial-gradient(72% 62% at 32% 22%, rgba(255,255,255,.06) 0%, transparent 68%),
    linear-gradient(158deg, #2B302D 0%, #343A37 48%, #3F4742 100%);
}
.photo-slot::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.5rem; height: 2px;
  background: var(--brand-saffron);
  z-index: 2;
}
.photo-slot__alt  { color: rgba(255,255,255,.94); }
.photo-slot__path { background: rgba(255,255,255,.12); color: rgba(255,255,255,.82); }

/* the legacy footer selector, kept in step with the live one */
.site-footer { background: var(--brand-green-deep); border-top: 3px solid var(--brand-saffron); }
.footer__h { color: var(--brand-saffron-light); }


/* --------------------------------------------------------------------------
   20. COMPARISON ROWS — two corrections

   a) .cmp__val had no dark-section override, so the benchmark figures
      (85%, 21.4, 116, 0.4) were rendering at --text-secondary on deep
      green: 1.5:1, effectively invisible. They are the comparison the
      whole component exists to make.
   b) Section 17 above set .cmp__track globally to a white alpha, which is
      correct on green and invisible on white. Scoped properly now.
   -------------------------------------------------------------------------- */

.cmp__val   { color: var(--text-secondary); }
.cmp__track { background: var(--border-light); }
.cmp__bar--other { background: var(--border-medium); }
.cmp__bar--self  { background: var(--brand-saffron); }

.section--night .cmp__val   { color: var(--on-green-muted); }
.section--night .cmp__track { background: rgba(255,255,255,.16); }
.section--night .cmp__bar--other { background: rgba(255,255,255,.40); }
.section--night .cmp__bar--self  { background: var(--brand-saffron-light); }


/* --------------------------------------------------------------------------
   21. "THE ROAD AHEAD" ON LIGHT STOCK

   The section moved off deep green to break a run of three dark bands, but
   its display heading and section marker were hard-coded white for the old
   ground and disappeared. The four cards keep their own deep-green ground —
   dark panels on a light field is the stronger composition anyway, and it
   is how the vision reads as a set of commitments rather than a wall.
   -------------------------------------------------------------------------- */

.road__display { color: var(--brand-green-dark); }
.section--night .road__display,
.closing .road__display { color: var(--white); }

/* the cards carry their own ground, so their interior stays on-dark */
.road { background: var(--brand-green-deep); }
.road h3 { color: var(--white); }
.road p  { color: var(--on-green-strong); }
.road__num { color: var(--brand-saffron-light); }
.road__anchor { color: var(--on-green-muted); border-top-color: rgba(255,255,255,.16); }


/* --------------------------------------------------------------------------
   22. A GUARD AGAINST THE SAME TRAP

   .btn--light is a dark-ground button: white type, white hairline. When a
   section moves from deep green to light stock, any --light button inside
   it goes invisible. The markup for the one case is corrected; this makes
   the failure impossible rather than merely fixed.
   -------------------------------------------------------------------------- */

.section:not(.section--night) .btn--light,
.section--soft .btn--light,
.section--warm .btn--light,
.inscribe .btn--light,
.corp .btn--light {
  border-color: var(--brand-green-dark);
  color: var(--brand-green-dark);
}
.section:not(.section--night) .btn--light::before,
.section--soft .btn--light::before,
.section--warm .btn--light::before,
.inscribe .btn--light::before,
.corp .btn--light::before { background: var(--brand-green-deep); }
.section:not(.section--night) .btn--light:hover,
.section--soft .btn--light:hover,
.section--warm .btn--light:hover,
.inscribe .btn--light:hover,
.corp .btn--light:hover { color: var(--white); border-color: var(--brand-green-dark); }

/* the saffron field is light too, but it has its own treatment already */
.section--accent .btn--light {
  border-color: rgba(var(--brand-green-abyss-rgb),.55);
  color: var(--brand-green-dark);
}
.section--accent .btn--light::before { background: var(--brand-green-deep); }
.section--accent .btn--light:hover { color: var(--white); border-color: var(--brand-green-dark); }


/* --------------------------------------------------------------------------
   23. THE FINALE'S TOP EDGE

   Same failure as the hero's tricolour, one section later: the closing band
   now sits directly beneath the saffron field, so the strip's saffron third
   dissolves upward and its green third dissolves downward, leaving a white
   segment floating in the middle of the page.

   Saffron meeting deep green is already the highest-contrast edge on the
   site. It does not need a rule drawn on it, so the rule goes.
   -------------------------------------------------------------------------- */

.finale::before { display: none; }


/* --------------------------------------------------------------------------
   24. BUTTONS LOSE THEIR FOCUS RING TO BOOTSTRAP

   Bootstrap 5.3 ships this:

     .btn:focus-visible {
       color: var(--bs-btn-hover-color);
       background-color: var(--bs-btn-hover-bg);
       border-color: var(--bs-btn-hover-border-color);
       outline: 0;
       box-shadow: var(--bs-btn-focus-box-shadow);
     }

   None of those four custom properties are defined, because this site does
   not use Bootstrap's button variants. Undefined var() in a non-inherited
   property is invalid at computed-value time, so each one falls back to its
   initial value: background transparent, box-shadow none. And `outline: 0`
   is not a variable — it applies.

   At (0,2,0) that rule outranks .btn--primary at (0,1,0). The result, on
   every button on every page: keyboard focus made the button vanish AND
   removed its focus indicator. A WCAG 2.4.7 failure, and the one state a
   keyboard user depends on. Hover escaped it only because an early rule
   happens to pin a background there.

   Each variant is restored at matching specificity, and the ring from
   section 17 is reapplied where Bootstrap zeroed it.
   -------------------------------------------------------------------------- */

.btn:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--brand-saffron);
}

.btn--primary:focus-visible {
  background-color: var(--brand-saffron);
  border-color: var(--brand-saffron);
  color: var(--text-primary);
}
.btn--ink:focus-visible {
  background-color: var(--brand-green-deep);
  border-color: var(--brand-green-dark);
  color: var(--white);
}
.btn--ghost:focus-visible {
  background-color: transparent;
  border-color: var(--brand-green-dark);
  color: var(--brand-green-dark);
}
.btn--light:focus-visible {
  background-color: transparent;
  border-color: rgba(255,255,255,.35);
  color: var(--white);
}

/* on a dark ground the hairline turns white — deep green on deep green
   would be an indicator you cannot see */
.section--night .btn:focus-visible,
.hero-x .btn:focus-visible,
.mprec .btn:focus-visible,
.page-hero .btn:focus-visible,
.rb-footer .btn:focus-visible,
.closing .btn:focus-visible,
.finale .btn:focus-visible {
  outline-color: rgba(255,255,255,.9);
  box-shadow: 0 0 0 3px var(--brand-saffron);
}
.section--night .btn--light:focus-visible,
.hero-x .btn--light:focus-visible,
.finale .btn--light:focus-visible,
.closing .btn--light:focus-visible {
  background-color: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.46);
  color: var(--white);
}

/* on the saffron field the ring inverts again */
.section--accent .btn:focus-visible {
  outline-color: var(--brand-green-dark);
  box-shadow: 0 0 0 3px rgba(255,255,255,.92);
}
.section--accent .btn--primary:focus-visible {
  background-color: var(--brand-green-deep);
  border-color: var(--brand-green-dark);
  color: var(--white);
}
.section--accent .btn--ink:focus-visible,
.section--accent .btn--ghost:focus-visible,
.section--accent .btn--light:focus-visible {
  background-color: transparent;
  border-color: rgba(var(--brand-green-abyss-rgb),.55);
  color: var(--brand-green-dark);
}

/* the navbar CTA sits on white; keep it saffron through focus */
.rb-navbar .btn--primary:focus-visible {
  background-color: var(--brand-saffron);
  border-color: var(--brand-saffron);
  color: var(--text-primary);
}


/* --------------------------------------------------------------------------
   25. FOUR MORE CAUGHT BY AUDITING THE RENDERED PAGES

   Static checks on the palette pass; these only appear once the cascade
   runs on real markup.
   -------------------------------------------------------------------------- */

/* (a) HEADINGS ON DEEP GREEN
   Restated at a specificity that cannot be undercut again. */
.section--night .h-section,
.section--night h2,
.section--night h3,
.section--night h4,
.closing .h-section,
.finale h2 { color: var(--white); }
.section--accent .h-section { color: var(--text-primary); }


/* (b) WHITE CARDS INSIDE DEEP-GREEN SECTIONS  — pre-existing
   The media room puts white .mr-story cards on a deep-green ground. The
   rule `.section--night a { color: #fff }` is (0,1,1) and beats the card's
   own `color: var(--ink)` at (0,1,0), so every story headline in that
   section has been rendering white on white — invisible, and invisible to
   a spellcheck-style review because the text is present and selectable.
   The card is a light surface and is now told so explicitly. */
.section--night .mr-story,
.section--night .mr-story a,
.section--night .mr-story__t,
.section--night .card,
.section--night .card a,
.section--night .story,
.section--night .story a,
.section--night .entry,
.section--night .entry a { color: var(--text-primary); }

.section--night .mr-story h3,
.section--night .card h3,
.section--night .story h3,
.section--night .entry h3 { color: var(--text-primary); }

.section--night .mr-story p,
.section--night .card p,
.section--night .story p,
.section--night .entry p { color: var(--text-secondary); }

.section--night .mr-story .mr-date,
.section--night .mr-story .mr-cat,
.section--night .card .src,
.section--night .story .src { color: var(--text-secondary); }

.section--night .mr-story .kchip--update { color: var(--brand-green-dark); border-color: rgba(var(--brand-green-abyss-rgb),.35); }
.section--night .mr-story .kchip--speech { color: var(--brand-saffron-ink); border-color: rgba(168,82,9,.35); }
.section--night .mr-story .kchip--press  { color: var(--text-secondary); border-color: var(--border-medium); }
.section--night .mr-story .bi { color: var(--brand-saffron-ink); }

.section--night .mr-story:hover a,
.section--night .mr-story:hover .mr-story__t { color: var(--brand-saffron-ink); }


/* (c) BUTTONS INSIDE DEEP-GREEN SECTIONS
   Same cause: `.section--night a` painted the label white, and white on
   saffron is 2.46:1. The primary keeps its dark label everywhere. */
.section--night .btn--primary,
.section--night .btn--primary span,
.closing .btn--primary,
.finale .btn--primary { color: var(--text-primary); }
.section--night .btn--light,
.section--night .btn--ghost,
.closing .btn--light,
.finale .btn--light { color: var(--white); }
.section--night .btn--light:hover,
.section--night .btn--ghost:hover,
.finale .btn--light:hover { color: var(--brand-green-dark); }


/* (d) LARGE SAFFRON NUMERALS ON WHITE
   #F28C18 on white is 2.46:1. At 32px the floor is 3:1, so ordinal
   numerals on light stock move one step down the saffron ramp. They keep
   the brighter tone wherever they sit on a dark ground. */
.priority__num,
.issues__n,
.road__num,
.corp__n { color: var(--brand-saffron-ink); }
.section--night .priority__num,
.section--night .issues__n,
.section--night .road__num,
.road .road__num { color: var(--brand-saffron-light); }


/* (e) THE LANGUAGE PILL ON THE HOMEPAGE
   `.page-home .rb-topbar a` at (0,3,0) was overriding the active pill's
   label at (0,2,0), leaving light grey on saffron: 1.91:1. */
.rb-topbar .rb-lang a.active,
.page-home .rb-topbar .rb-lang a.active {
  background: var(--brand-saffron);
  color: var(--text-primary);
  font-weight: 600;
}
.rb-topbar .rb-lang a.active:hover,
.page-home .rb-topbar .rb-lang a.active:hover { color: var(--text-primary); }


/* --------------------------------------------------------------------------
   26. TWO CONTEXT-AWARE INK TOKENS

   Fourteen elements across the site carried style="color:#9db8a2" and
   twenty-four carried style="color:#d9e6db" — green-tinted greys written
   straight into the markup, invisible to the token system and wrong the
   moment a section changes ground.

   Rather than hunt them one by one, the two values become custom
   properties that resolve differently depending on the ground they land
   on. The inline style stays where it is and now follows the system.
   -------------------------------------------------------------------------- */

:root {
  --note-ink: var(--text-secondary);
  --body-ink: var(--text-primary);
}

.section--night, .hero-x, .mprec, .page-hero,
.rb-footer, .closing, .finale, .headline-project, .matter, .road {
  --note-ink: var(--on-green-muted);
  --body-ink: var(--on-green-strong);
}

.section--accent {
  --note-ink: var(--brand-green-dark);
  --body-ink: var(--text-primary);
}


/* --------------------------------------------------------------------------
   27. THE PARLIAMENTARY RECORD COMES ONTO LIGHT STOCK

   parliament.php ran a deep-green page hero straight into a deep-green
   record section: 1,920 unbroken pixels, 40% of the page, one flat field.
   It is the site's flagship data page and it was the greenest thing on it.

   The record is now a document on light stock — deep green figures, white
   panels, saffron marks — which is both closer to the brief's ratio and a
   better reading of what the page is. The single dark panel that remains
   is the matter raised in the House, which keeps its own ground so it
   still reads as the one quoted intervention on the page.
   -------------------------------------------------------------------------- */

.matter {
  background: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  border-left: 3px solid var(--brand-saffron);
}
.matter h3 { color: var(--white); }
.matter__k { color: var(--brand-saffron-light); }
.matter__meta { color: var(--on-green-muted); }
.matter__topic { color: var(--brand-saffron-light); border-color: rgba(255,176,74,.45); }

/* .commit had no ground of its own — it inherited the dark section's text
   colours. On light stock it becomes a proper panel. */
.commit {
  background: var(--white);
  border: 1px solid var(--border-light);
}
.commit h3 { color: var(--brand-green-dark); }
.commit li { border-top-color: var(--border-light); }
.commit__name { color: var(--text-primary); }
.commit__body { color: var(--text-secondary); }
.commit .matter__meta { color: var(--text-secondary); }
.commit .src { color: var(--text-secondary); }
.commit .src:hover { color: var(--brand-saffron-ink); }

/* inside a dark section the panel returns to its transparent form */
.section--night .commit {
  background: transparent;
  border-color: var(--brand-green-line);
}
.section--night .commit h3 { color: var(--white); }
.section--night .commit__name { color: var(--on-green-strong); }
.section--night .commit__body,
.section--night .commit .matter__meta { color: var(--on-green-muted); }

/* the source link inside a .commit panel follows the panel's ground, not
   the panel's default — on the homepage that panel is still dark */
.section--night .commit .src { color: var(--on-green-muted); }
.section--night .commit .src:hover { color: var(--brand-saffron-light); }


/* ==========================================================================
   v9 — THE SAFFRON HEADER

   Rebuilt to the supplied reference: a saffron gradient utility bar, a
   taller white navigation band carrying a lotus watermark, and an angled
   saffron wedge cutting into the hero below.

   Entirely CSS. navbar.php and index.php are unchanged — the watermark and
   the wedge are pseudo-elements, so there is no new markup to maintain and
   nothing to keep in sync across thirty pages.

   Sampled from the reference and converted to the 1440px container:
     utility bar   61px  ->  51px
     navigation   132px  -> 111px
     wedge edge   at 36% of the width, sloping ~0.4px left per px down
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE HEADER ORANGE

   The reference runs a redder orange than the site's --brand-saffron
   (#F28C18, hue 32). These stops are hue 22–25, so they sit as a deeper
   end of the same ramp rather than a second orange. Kept as their own
   tokens: change these four values to retune the header alone, or point
   them at --brand-saffron to fold it back into the flat accent.
   -------------------------------------------------------------------------- */

:root {
  --hdr-orange-1: #FB7B13;   /* gradient start, left  */
  --hdr-orange-2: #F85E0D;   /* gradient middle       */
  --hdr-orange-3: #F74306;   /* gradient end, right   */
  --hdr-ink:      #2A1405;   /* text on the orange — 6.6:1 light end, 4.8:1 deep end */
  --hdr-nav-ink:  #10562D;   /* navigation labels     */
  --hdr-active:   #C2410C;   /* active nav label      */
}


/* --------------------------------------------------------------------------
   2. UTILITY BAR
   -------------------------------------------------------------------------- */

.rb-topbar,
.page-home .rb-topbar {
  background: linear-gradient(96deg,
    var(--hdr-orange-1) 0%,
    var(--hdr-orange-2) 52%,
    var(--hdr-orange-3) 100%);
  border-bottom: none;
  color: var(--hdr-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.rb-topbar__in { min-height: 2.6rem; }

.rb-topbar a,
.page-home .rb-topbar a {
  color: var(--hdr-ink);
  font-weight: 600;
  text-decoration: none;
}
.rb-topbar a:hover,
.page-home .rb-topbar a:hover { color: #FFFFFF; }
.rb-topbar .bi { color: var(--hdr-ink); opacity: .92; }
.rb-topbar a:hover .bi { color: #FFFFFF; opacity: 1; }

/* social marks sit a little quieter than the contact details */
.rb-topbar .d-md-flex a .bi { font-size: 1rem; }

/* language switch: the active state is a white pill, as in the reference */
.rb-lang { gap: .35rem; }
.rb-topbar .rb-lang a,
.page-home .rb-topbar .rb-lang a {
  color: var(--hdr-ink);
  padding: .2rem .7rem;
  border-radius: 999px;
  font-weight: 600;
}
.rb-topbar .rb-lang a:hover { color: #FFFFFF; background: rgba(255,255,255,.16); }
.rb-topbar .rb-lang a.active,
.page-home .rb-topbar .rb-lang a.active {
  background: #FFFFFF;
  color: var(--brand-green-dark);
  font-weight: 700;
}
.rb-topbar .rb-lang a.active:hover,
.page-home .rb-topbar .rb-lang a.active:hover {
  background: #FFFFFF;
  color: var(--brand-green-dark);
}


/* --------------------------------------------------------------------------
   3. NAVIGATION BAND

   Taller, white, and carrying a lotus watermark that bleeds off the left
   edge. The watermark is drawn as an inline SVG so it costs no request and
   inherits no colour from the JPEG logo, which has its own orange ground
   and could not be used as a watermark.
   -------------------------------------------------------------------------- */

.site-header,
.page-home .site-header,
.page-home .site-header.is-solid {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: none;
}

.rb-navbar,
.page-home .rb-navbar {
  position: relative;
  padding-block: 1.15rem;
  background: #FFFFFF;
  overflow: hidden;
}

.rb-navbar::before {
  content: "";
  position: absolute;
  left: -3.5rem; top: 50%;
  width: 15rem; height: 12rem;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .07;
  color: var(--brand-green-dark);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cg fill='none' stroke='%23123D27' stroke-width='7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 14C113 42 119 74 100 106C81 74 87 42 100 14Z'/%3E%3Cpath d='M60 30C84 50 100 78 100 109C72 97 55 66 60 30Z'/%3E%3Cpath d='M140 30C116 50 100 78 100 109C128 97 145 66 140 30Z'/%3E%3Cpath d='M24 60C56 66 88 88 100 113C68 120 34 100 24 60Z'/%3E%3Cpath d='M176 60C144 66 112 88 100 113C132 120 166 100 176 60Z'/%3E%3Cpath d='M58 119C78 132 122 132 142 119'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 61.99rem) {
  .rb-navbar::before { display: none; }
}

.rb-navbar .container { position: relative; z-index: 1; }


/* brand mark — a white badge with a saffron ring around the existing logo */
.rb-navbar .navbar-brand { gap: .9rem; }
.rb-navbar .brand__mark {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--hdr-orange-1);
  padding: 1px;
  box-shadow: 0 2px 8px rgba(23,35,29,.10);
}

.rb-navbar .brand__name,
.page-home .rb-navbar .brand__name {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--brand-green-dark);
}
.rb-navbar .brand__role,
.page-home .rb-navbar .brand__role {
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--text-secondary);
}
:lang(hi) .rb-navbar .brand__role { letter-spacing: .03em; }


/* --------------------------------------------------------------------------
   4. NAV LINKS
   -------------------------------------------------------------------------- */

.rb-navbar .nav-link,
.page-home .rb-navbar .nav-link {
  position: relative;
  padding: .45rem .8rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--hdr-nav-ink);
  background: none;
}
.rb-navbar .nav-link:hover,
.page-home .rb-navbar .nav-link:hover {
  color: var(--hdr-active);
  background: none;
}
.rb-navbar .nav-link.active,
.page-home .rb-navbar .nav-link.active {
  color: var(--hdr-active);
  font-weight: 700;
  background: none;
}
.rb-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: -.15rem;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--hdr-orange-1), var(--hdr-orange-3));
}


/* --------------------------------------------------------------------------
   5. THE CITIZEN CONNECT BUTTON
   -------------------------------------------------------------------------- */

.rb-navbar .btn--primary {
  background: linear-gradient(100deg, var(--hdr-orange-1) 0%, var(--hdr-orange-3) 100%);
  border: none;
  border-radius: 6px;
  padding: .85rem 1.5rem;
  color: var(--hdr-ink);
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(247,67,6,.55);
}
.rb-navbar .btn--primary::before { display: none; }
.rb-navbar .btn--primary:hover {
  background: linear-gradient(100deg, var(--hdr-orange-2) 0%, #E23A03 100%);
  color: var(--hdr-ink);
  box-shadow: 0 10px 26px -10px rgba(247,67,6,.7);
}
.rb-navbar .btn--primary:focus-visible {
  background: linear-gradient(100deg, var(--hdr-orange-1) 0%, var(--hdr-orange-3) 100%);
  color: var(--hdr-ink);
}


/* --------------------------------------------------------------------------
   6. THE WEDGE

   A saffron band beneath the navigation, cut on a slight diagonal, with
   deep green filling the remainder so the header resolves into the hero
   rather than stopping at a hard line. Drawn on .site-header::after, so no
   element is added to the markup.
   -------------------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 100; }

.site-header::after {
  content: "";
  display: block;
  height: 16px;
  /* the slope: 97.5deg leans the orange edge left as it descends, matching
     the reference's ~0.4px per px. A single gradient with a hard stop is
     steadier across viewport widths than a percentage clip-path. */
  background: linear-gradient(97.5deg,
    var(--hdr-orange-1) 0 36%,
    var(--brand-green-dark) 36.01% 100%);
}

@media (max-width: 47.99rem) {
  .site-header::after { height: 10px; }
}


/* --------------------------------------------------------------------------
   7. MOBILE

   The collapsed sheet takes the orange rather than the green, so it reads
   as an extension of the utility bar it drops from.
   -------------------------------------------------------------------------- */

.rb-navbar .navbar-toggler,
.page-home .rb-navbar .navbar-toggler {
  border: 1px solid var(--hdr-orange-1);
  border-radius: 6px;
  padding: .4rem .6rem;
}
.rb-navbar .navbar-toggler:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .rb-navbar .navbar-collapse {
    background: linear-gradient(160deg, var(--hdr-orange-1), var(--hdr-orange-3));
    border: none;
    border-radius: 8px;
    margin-top: .85rem;
    padding: .5rem;
  }
  .rb-navbar .navbar-collapse .nav-link,
  .page-home .rb-navbar .navbar-collapse .nav-link {
    color: var(--hdr-ink);
    font-weight: 600;
    padding: .7rem .9rem;
  }
  .rb-navbar .navbar-collapse .nav-link:hover,
  .rb-navbar .navbar-collapse .nav-link.active {
    color: #FFFFFF;
    background: rgba(255,255,255,.18);
    border-radius: 5px;
  }
  .rb-navbar .navbar-collapse .nav-link.active::after { display: none; }
  .rb-navbar .navbar-collapse .btn--primary {
    background: #FFFFFF;
    color: var(--hdr-orange-3);
    box-shadow: none;
    width: 100%;
    justify-content: center;
    margin-top: .35rem;
  }
  .rb-navbar .navbar-collapse .btn--primary:hover {
    background: #FFFFFF;
    color: var(--hdr-orange-3);
  }
  .rb-navbar { padding-block: .85rem; }
  .rb-navbar .brand__mark { width: 44px; height: 44px; }
  .rb-navbar .brand__name, .page-home .rb-navbar .brand__name { font-size: 1.125rem; }
}


/* --------------------------------------------------------------------------
   8. FOCUS ON THE ORANGE

   Saffron on saffron is invisible, so inside the header the ring becomes
   white with a deep-green hairline.
   -------------------------------------------------------------------------- */

.rb-topbar :focus-visible,
.rb-navbar :focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.95);
}
.rb-navbar .nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(194,65,12,.22);
}


/* --------------------------------------------------------------------------
   9. CORRECTIONS FROM THE FIRST RENDER
   -------------------------------------------------------------------------- */

/* (a) The row overflowed at 1440. Nine labels, a brand lock-up and a
   button do not fit at 15px with 0.8rem padding inside a 1320px
   container — the button wrapped to two lines and ran off the edge. */
.rb-navbar .nav-link,
.page-home .rb-navbar .nav-link {
  padding: .45rem .6rem;
  font-size: .875rem;
}
.rb-navbar .nav-link.active::after { left: .6rem; right: .6rem; }
.rb-navbar .navbar-nav { gap: 0 !important; }

.rb-navbar .btn--primary {
  padding: .7rem 1.15rem;
  font-size: .8125rem;
  white-space: nowrap;
}
.rb-navbar .navbar-brand { gap: .75rem; }
.rb-navbar .brand__name,
.page-home .rb-navbar .brand__name { font-size: 1.25rem; }

@media (min-width: 100rem) {
  .rb-navbar .nav-link { padding: .45rem .8rem; font-size: .9375rem; }
  .rb-navbar .nav-link.active::after { left: .8rem; right: .8rem; }
  .rb-navbar .btn--primary { padding: .85rem 1.5rem; font-size: .875rem; }
}

/* (b) The brand name was reading in --brand-green, which is now the
   brighter #188445 — thin and washed at 20px. The reference sets it in a
   deep green, so it gets its own token and stops depending on the ground
   colour. */
:root { --hdr-brand-ink: #10562D; }
.rb-navbar .brand__name,
.page-home .rb-navbar .brand__name { color: var(--hdr-brand-ink); }

/* (c) The hero's saffron rule and the new wedge were both drawing a line
   in the same place, so the header resolved into two stacked stripes. The
   wedge now does that job on every page. */
.hero-x__flag { display: none; }
.page-hero { border-bottom: none; }

/* (d) The watermark sat too far right and read as a smudge behind the
   name. Pushed further off the edge and taken down to a whisper. */
.rb-navbar::before {
  left: -5.5rem;
  width: 14rem; height: 11rem;
  opacity: .05;
}

/* (e) On small screens the brand lock-up was wide enough to push the
   burger onto its own line, leaving a stacked, ragged header. The row
   stops wrapping and the lock-up is allowed to shrink instead. */
@media (max-width: 36rem) {
  .rb-navbar .container { flex-wrap: nowrap; gap: .5rem; }
  .rb-navbar .navbar-brand { min-width: 0; flex: 1 1 auto; }
  .rb-navbar .navbar-brand > span { min-width: 0; }
  .rb-navbar .brand__name { font-size: 1rem; }
  .rb-navbar .brand__role {
    font-size: .625rem; letter-spacing: .05em;
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rb-navbar .brand__mark { width: 38px; height: 38px; }
  .rb-navbar .navbar-toggler { flex: none; }
}


/* --------------------------------------------------------------------------
   VARIANT B — WHITE TEXT ON THE ORANGE (matches the reference exactly)

   NOT WCAG AA. White on this gradient measures 2.64:1 at the light end and
   3.65:1 at the deep end; small text needs 4.5:1. Included so the two can
   be compared side by side. Delete this block to return to Variant A.
   -------------------------------------------------------------------------- */

:root { --hdr-ink: #FFFFFF; }
.rb-topbar a, .page-home .rb-topbar a,
.rb-topbar .bi { color: #FFFFFF; }
.rb-topbar a:hover, .page-home .rb-topbar a:hover { color: rgba(255,255,255,.78); }
.rb-topbar .rb-lang a, .page-home .rb-topbar .rb-lang a { color: #FFFFFF; }
.rb-navbar .btn--primary,
.rb-navbar .btn--primary:hover,
.rb-navbar .btn--primary:focus-visible { color: #FFFFFF; }


/* ==========================================================================
   v10 — TOKEN RESET AND FOUR SECTIONS RE-ART-DIRECTED

   Before anything visual: the palette is reset to the values in the brief.
   Four tokens had been edited on the live site and they are the single
   cause of most of what the screenshots show:

     --brand-green  had been set to an ORANGE value. That token is the
     ground for .mprec, the middle stop of the footer gradient and the
     colour of every .h-section heading — which is why the constituency
     strip is orange, the footer runs green→orange→green, and "Issues that
     matter" is orange. Not four bugs. One token.

     --text-primary had been set to a near-white value. .issues__list a
     inherits it, so every issue title was invisible until hover swapped it
     for saffron — exactly the symptom in the third screenshot. The titles
     were always in the HTML.

   Reset first, then art-direct. Nothing below fights a token.
   ========================================================================== */

:root {
  /* COLOUR IS NOT DEFINED HERE.

     Every colour token lives in ONE block, at the top of this file
     (around line 24). This block previously repeated the whole palette,
     which meant an edit at the top was silently overridden by this one —
     later declaration wins at equal specificity. Two edits were lost that
     way. There is now a single source of truth.

     Motion only. */
  --ease-premium: cubic-bezier(.2,.65,.3,1);
}


/* --------------------------------------------------------------------------
   1. WEIGHT RAMP

   The build had drifted to 600–650 almost everywhere, which flattens the
   page: when everything is semibold, nothing is emphatic. A deliberate
   ramp does more for perceived quality than any colour change.

     400  body
     500  navigation, metadata
     600  UI, buttons, labels
     700  display headings only

   Two families only — Plex Sans and Plex Mono. Plex Serif is loaded at
   weight 400 alone, so a serif display would either read thin at 4rem or
   need a font request added to all thirty <head> blocks. Sans + Mono is
   also the more institutional pairing for a parliamentary record.
   -------------------------------------------------------------------------- */

body { font-weight: 400; }
.lede, .section p, .card p, .entry p { font-weight: 400; }
.rb-navbar .nav-link { font-weight: 500; }
.btn, .eyebrow, .marker__label, .form-label { font-weight: 600; }

h1, .h-display, .road__display, .hero-x__title { font-weight: 700; letter-spacing: -0.025em; }
h2, .h-section { font-weight: 700; letter-spacing: -0.022em; }
h3 { font-weight: 600; letter-spacing: -0.012em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.005em; }


/* --------------------------------------------------------------------------
   2. THE CONSTITUENCY STRIP

   It was a flat orange slab with white type at 2.46:1 — the least legible
   surface on the site carrying its four hardest facts.

   Three changes do the work:
     · a gradient with a light source, so the plane has direction
     · dark ink instead of white. 6.6:1, and dark type on saffron reads
       editorial where white on orange reads retail
     · the figures given real display scale, the labels pulled right back
   -------------------------------------------------------------------------- */

.mprec {
  position: relative;
  background:
    radial-gradient(75% 100% at 15% 0%,
      rgba(255,255,255,.16) 0%, transparent 62%),
    linear-gradient(135deg,
      var(--brand-saffron-dark) 0%,
      var(--brand-saffron) 48%,
      #E97A10 100%);
  border-top: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.mprec::before {
  /* the hairline that used to sit on top is no longer needed —
     the inner highlight above does that job more quietly */
  display: none;
}
.mprec::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(120,52,4,.10) 100%);
}

.mprec__grid,
.mprec__in { position: relative; z-index: 1; }

.mprec__cell {
  padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  padding-inline: clamp(1rem, .6rem + 1.4vw, 2.25rem);
  border-left: 1px solid rgba(255,255,255,.20);
}
.mprec__cell:first-child { border-left: none; }
.mprec__cell::after { display: none; }

.mprec__k {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(23,35,29,.78);
  margin-bottom: .55rem;
}
:lang(hi) .mprec__k { letter-spacing: .05em; text-transform: none; }

.mprec__v {
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--text-primary);
}
.mprec__v .mono,
.mprec__cell:last-child .mprec__v .mono { color: var(--text-primary); }

.mprec__sub {
  margin-top: .45rem;
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(23,35,29,.76);
}

@media (max-width: 61.99rem) {
  .mprec__cell:nth-child(odd) { border-left: none; }
  .mprec__cell { border-top: 1px solid rgba(255,255,255,.20); }
  .mprec__cell:nth-child(-n+2) { border-top: none; }
}


/* --------------------------------------------------------------------------
   3. THE HERO BUTTONS

   The primary was showing a green-to-orange wash because its background
   was resolving through a token that had been changed; it now paints its
   own gradient and cannot drift again.

   The secondary is the more serious problem. White type with a 4%-white
   fill sits directly on a photograph — over a bright patch of sky or a
   pale wall it is unreadable, and hover was the only thing making it
   legible. It now carries its own dark plate: over the lightest area of
   any photograph on the site white still reads at 5.5:1, and hover
   becomes an enhancement rather than the thing that makes it work.
   -------------------------------------------------------------------------- */

.hero-x .btn,
.hero-x .btn--primary,
.hero-x .btn--light,
.hero-x .btn--ghost {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  padding: 1rem 1.6rem;
  border-radius: 4px;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.hero-x .btn--primary {
  background: var(--brand-saffron);
  background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 60%);
  border: 1px solid rgba(120,52,4,.34);
  color: var(--text-primary);
  box-shadow: 0 8px 22px -12px rgba(120,52,4,.6);
}
.hero-x .btn--primary::before { display: none; }
.hero-x .btn--primary:hover {
  background: var(--brand-saffron-dark);
  background-image: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 60%);
  color: var(--white);
  border-color: rgba(120,52,4,.5);
  box-shadow: 0 12px 26px -12px rgba(120,52,4,.7);
}

.hero-x .btn--light,
.hero-x .btn--ghost {
  background: rgba(var(--brand-green-abyss-rgb),.55);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid rgba(255,255,255,.42);
  color: var(--white);
}
.hero-x .btn--light::before,
.hero-x .btn--ghost::before { display: none; }
.hero-x .btn--light:hover,
.hero-x .btn--ghost:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--brand-green-dark);
}

/* the arrow leads the movement, the button stays still */
.btn__arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn__arrow { transform: none; }
}


/* --------------------------------------------------------------------------
   4. ISSUES THAT MATTER

   Once the token reset makes the titles visible again, the list still
   needs to earn its space. It was eight rows of air with a hairline.

   Each row becomes a full-bleed editorial band: the saffron index in mono,
   the subject at display scale, the arrow held right. Hover warms the
   ground, deepens the index, moves the arrow, and draws a saffron rule
   down the left edge — four small things that add up rather than one
   flashy one.
   -------------------------------------------------------------------------- */

.issues__list {
  border-top: 2px solid var(--brand-green-dark);
}
.issues__list a {
  position: relative;
  grid-template-columns: 3.25ch 1fr auto;
  gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  padding-block: clamp(1.15rem, .85rem + 1.1vw, 1.75rem);
  padding-inline: clamp(.75rem, .4rem + 1.2vw, 1.5rem);
  margin-inline: clamp(-.75rem, -.4rem - 1.2vw, -1.5rem);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  transition:
    background-color 300ms var(--ease-premium),
    color 300ms var(--ease-premium);
}

/* the rule that appears down the left edge on hover */
.issues__list a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand-saffron);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 300ms var(--ease-premium);
}
.issues__list a:hover::before,
.issues__list a:focus-visible::before { transform: scaleY(1); }

.issues__list a:hover,
.issues__list a:focus-visible { background: var(--surface-warm); }

.issues__n {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--brand-saffron-ink);
  align-self: center;
  transition: color 300ms var(--ease-premium);
}
.issues__list a:hover .issues__n { color: var(--brand-saffron-dark); font-weight: 600; }

.issues__t {
  font-size: clamp(1.0625rem, .92rem + .9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--text-primary);
  transition: color 300ms var(--ease-premium);
}
.issues__list a:hover .issues__t,
.issues__list a:focus-visible .issues__t { color: var(--brand-saffron-dark); }

.issues__arrow {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  align-self: center;
  transition: transform 300ms var(--ease-premium), color 300ms var(--ease-premium);
}
.issues__list a:hover .issues__arrow,
.issues__list a:focus-visible .issues__arrow {
  color: var(--brand-saffron);
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .issues__list a:hover .issues__arrow { transform: none; }
  .issues__list a::before { transition: none; }
}


/* --------------------------------------------------------------------------
   5. THE SECTION EYEBROW

   05 ───────── IN THE HOUSE
   The number was too quiet to anchor anything and the rule too faint to
   read as intentional. Mono, saffron, properly tracked, with a rule that
   fades rather than stopping dead.
   -------------------------------------------------------------------------- */

.marker { align-items: center; gap: .9rem; }
.marker__n {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--brand-saffron-ink);
}
.marker__rule {
  height: 1px;
  min-width: 3.5rem;
  background: linear-gradient(90deg,
    var(--brand-saffron) 0%,
    rgba(242,140,24,.35) 60%,
    transparent 100%);
}
.marker__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
:lang(hi) .marker__label { letter-spacing: .06em; text-transform: none; }

.section--night .marker__n { color: var(--brand-saffron-light); }
.section--night .marker__label { color: var(--on-green-muted); }
.section--night .marker__rule {
  background: linear-gradient(90deg,
    var(--brand-saffron-light) 0%, rgba(255,176,74,.3) 60%, transparent 100%);
}


/* --------------------------------------------------------------------------
   6. THE FOOTER

   The gradient was running green → orange → green because its middle stop
   is --brand-green. With the token reset it is deep green again, and
   saffron returns as a warm light in the upper left rather than a band
   across the middle.

   Then: a real hierarchy. The name at display scale, the role tracked out
   beneath it, the constituency line quieter still. Columns aligned on one
   baseline with room to breathe.
   -------------------------------------------------------------------------- */

.rb-footer {
  background:
    radial-gradient(70% 100% at 15% 15%,
      rgba(242,140,24,.14) 0%, transparent 62%),
    linear-gradient(145deg,
      var(--brand-green-deep) 0%,
      #0B3C20 55%,
      var(--brand-green-deep) 100%);
  border-top: 3px solid var(--brand-saffron);
  color: rgba(255,255,255,.82);
  padding-block: clamp(3rem, 2rem + 3.5vw, 4.75rem) 0;
}

.rb-footer .brand__mark,
.rb-footer .brand__name { }
.rb-footer .navbar-brand,
.rb-footer .d-flex.align-items-center { gap: .9rem; }

.rb-footer .brand__name {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.15;
}
.rb-footer .brand__role {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
  margin-top: .3rem;
}
:lang(hi) .rb-footer .brand__role { letter-spacing: .05em; text-transform: none; }

/* the constituency line — supporting, not competing */
.rb-footer p {
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
}

.rb-footer__title {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-saffron);
  margin-bottom: 1.1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
:lang(hi) .rb-footer__title { letter-spacing: .06em; text-transform: none; }

.rb-footer__links li { margin-bottom: .1rem; }
.rb-footer a,
.rb-footer__links a {
  font-size: .9375rem;
  font-weight: 400;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  display: inline-block;
  padding-block: .35rem;
  transition: color 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}
.rb-footer a:hover,
.rb-footer__links a:hover {
  color: var(--brand-saffron);
  transform: translateX(2px);
}

/* contact details are the reason people come to a footer like this */
.rb-footer address,
.rb-footer .rb-footer__contact {
  font-size: .9375rem;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  font-style: normal;
}
.rb-footer a[href^="tel:"],
.rb-footer a[href^="mailto:"] {
  color: var(--white);
  font-weight: 500;
}
.rb-footer a[href^="tel:"]:hover,
.rb-footer a[href^="mailto:"]:hover { color: var(--brand-saffron); }
.rb-footer .bi { color: var(--brand-saffron); margin-right: .5rem; }

/* social marks */
.rb-footer__social { gap: .6rem !important; margin-top: 1.4rem; }
.rb-footer__social a {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 8px;
  color: rgba(255,255,255,.85);
  padding: 0;
  transition:
    background-color 250ms var(--ease-premium),
    border-color 250ms var(--ease-premium),
    color 250ms var(--ease-premium),
    transform 250ms var(--ease-premium);
}
.rb-footer__social a:hover {
  background: var(--brand-saffron);
  border-color: var(--brand-saffron);
  color: var(--text-primary);
  transform: translateY(-2px);
}
.rb-footer__social a .bi { margin-right: 0; color: inherit; font-size: 1rem; }

/* bottom bar */
.rb-footer__bottom {
  margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.35rem !important;
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
}
.rb-footer__bottom a {
  font-size: .8125rem;
  color: rgba(255,255,255,.78);
  padding-block: 0;
}
.rb-footer__bottom a:hover { color: var(--brand-saffron); transform: none; }
.rb-footer__disclaimer {
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

@media (prefers-reduced-motion: reduce) {
  .rb-footer a:hover, .rb-footer__social a:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   7. TOUCH TARGETS AND FOCUS

   Every interactive row and mark clears 44px, and focus stays visible on
   all four grounds.
   -------------------------------------------------------------------------- */

.issues__list a:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 3px rgba(242,140,24,.35);
}
.rb-footer a:focus-visible,
.rb-footer__social a:focus-visible {
  outline: 2px solid var(--brand-saffron);
  outline-offset: 3px;
  box-shadow: none;
}
.mprec a:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9);
}


/* --------------------------------------------------------------------------
   8. CORRECTIONS FROM THE RENDER
   -------------------------------------------------------------------------- */

/* (a) The second link column carried <h3>&nbsp;</h3> as a spacer to align
   its list with the first. Once the headings gained a rule beneath them,
   that spacer drew a line with no label above it — a footer that looked
   half-finished. The column now has a real heading in footer.php, which is
   also what the brief's four-column structure asks for. */

/* (b) The footer was carrying two sets of vertical padding: its own block
   padding plus Bootstrap's .py-5 on the inner container. Between the
   columns and the bottom bar that came to roughly 130px of nothing.
   The footer now owns its own rhythm. */
.rb-footer { padding-block: clamp(3.25rem, 2.2rem + 3.4vw, 4.5rem) 0; }
.rb-footer > .container.py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }
.rb-footer__bottom { margin-top: clamp(2.25rem, 1.6rem + 2vw, 3rem); }
.rb-footer .row { --bs-gutter-y: 2.5rem; }

/* the brand column can breathe a little wider than the links */
.rb-footer .col-lg-4:first-child p { max-width: 24rem; }

/* (c) THE ISSUES LIST — closing the gap

   Full-bleed rows put the arrow at the page edge, roughly 700px from the
   end of the longest title. That reads as a gap rather than as alignment.
   Capping the measure pulls the arrow back to where the eye expects it and
   turns the void into deliberate margin — the row still spans full width
   on hover, so the target stays large. */
.issues__list a { padding-block: clamp(1rem, .8rem + .9vw, 1.45rem); }

/* a hairline leader carries the eye from title to arrow */
.issues__t { position: relative; }
.issues__list a > .issues__t::after {
  content: "";
  position: absolute;
  left: calc(100% + 1.25rem);
  top: 50%;
  width: 100vw;
  height: 1px;
  background: var(--border-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-premium), background-color 300ms var(--ease-premium);
}
.issues__list a:hover > .issues__t::after,
.issues__list a:focus-visible > .issues__t::after {
  transform: scaleX(1);
  background: rgba(242,140,24,.42);
}
.issues__list a { overflow: hidden; }

@media (max-width: 36rem) {
  .issues__list a > .issues__t::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .issues__list a > .issues__t::after { transition: none; }
}


/* --------------------------------------------------------------------------
   9. THE NAVIGATION ROW AT LAPTOP WIDTHS

   Nine labels, a brand lock-up and a button do not fit Bootstrap's 1140px
   container at 15px with 0.6rem padding — the row measured 1422px against
   a 1366px viewport. Because .rb-navbar carries overflow:hidden to clip the
   lotus watermark, the excess was not scrolling into view, it was being
   cut off: the Citizen Connect button simply disappeared at 1024, 1280 and
   1366. Clipping is worse than a scrollbar, so the row is made to fit.

   Three bands rather than one, so nothing is squeezed harder than it needs
   to be at any given width.
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) and (max-width: 74.99rem) {   /* 992 – 1199 */
  .rb-navbar .nav-link, .page-home .rb-navbar .nav-link { padding: .4rem .34rem; font-size: .8125rem; letter-spacing: -0.006em; }
  .rb-navbar .nav-link.active::after { left: .38rem; right: .38rem; }
  .rb-navbar .btn--primary, .page-home .rb-navbar .btn--primary { padding: .58rem .8rem; font-size: .75rem; }
  .rb-navbar .navbar-brand { gap: .55rem; }
  .rb-navbar .brand__mark { width: 42px; height: 42px; }
  .rb-navbar .brand__name, .page-home .rb-navbar .brand__name { font-size: 1.0625rem; }
  .rb-navbar .brand__role, .page-home .rb-navbar .brand__role { font-size: .625rem; letter-spacing: .04em; }
  .rb-navbar .nav-item.ms-lg-2 { margin-left: .35rem !important; }
}

@media (min-width: 75rem) and (max-width: 87.49rem) {   /* 1200 – 1399 */
  .rb-navbar .nav-link, .page-home .rb-navbar .nav-link { padding: .42rem .46rem; font-size: .8438rem; }
  .rb-navbar .nav-link.active::after { left: .5rem; right: .5rem; }
  .rb-navbar .btn--primary, .page-home .rb-navbar .btn--primary { padding: .66rem .95rem; font-size: .78rem; }
  .rb-navbar .brand__name, .page-home .rb-navbar .brand__name { font-size: 1.125rem; }
}

/* the watermark is clipped by its own box, so the row no longer has to be */
.rb-navbar { overflow: visible; }
.rb-navbar::before { clip-path: inset(0 0 0 3.5rem); }
.site-header { overflow: hidden; }

/* Even squeezed, nine labels plus a brand lock-up and a button need about
   1050px of a 960px container at 1024. Tightening further would make the
   labels unreadable, so the menu now collapses below 1200 rather than 992
   (navbar-expand-xl in navbar.php). The collapsed-sheet styling has to
   follow it up to the new breakpoint. */

@media (min-width: 62rem) and (max-width: 74.99rem) {
  .rb-navbar .navbar-collapse {
    background: linear-gradient(160deg, var(--hdr-orange-1), var(--hdr-orange-3));
    border: none; border-radius: 8px; margin-top: .85rem; padding: .5rem;
  }
  .rb-navbar .navbar-collapse .nav-link,
  .page-home .rb-navbar .navbar-collapse .nav-link {
    color: var(--hdr-ink); font-weight: 600; padding: .7rem .9rem; font-size: .9375rem;
  }
  .rb-navbar .navbar-collapse .nav-link:hover,
  .rb-navbar .navbar-collapse .nav-link.active {
    color: #FFFFFF; background: rgba(255,255,255,.18); border-radius: 5px;
  }
  .rb-navbar .navbar-collapse .nav-link.active::after { display: none; }
  .rb-navbar .navbar-collapse .btn--primary,
  .page-home .rb-navbar .navbar-collapse .btn--primary {
    background: #FFFFFF; color: var(--hdr-orange-3); box-shadow: none;
    width: 100%; justify-content: center; margin-top: .35rem;
    padding: .8rem 1rem; font-size: .875rem;
  }
  /* brand returns to full size — there is room again once the row collapses */
  .rb-navbar .navbar-brand, .page-home .rb-navbar .navbar-brand { gap: .75rem; }
  .rb-navbar .brand__mark, .page-home .rb-navbar .brand__mark { width: 52px; height: 52px; }
  .rb-navbar .brand__name, .page-home .rb-navbar .brand__name { font-size: 1.25rem; }
  .rb-navbar .brand__role, .page-home .rb-navbar .brand__role { font-size: .75rem; letter-spacing: .1em; }
}

/* 1200–1399: expanded, but the row still needs holding in */
@media (min-width: 75rem) and (max-width: 87.49rem) {
  .rb-navbar .nav-link, .page-home .rb-navbar .nav-link { padding: .42rem .3rem; font-size: .8125rem; }
  .rb-navbar .nav-link.active::after { left: .3rem; right: .3rem; }
  .rb-navbar .btn--primary, .page-home .rb-navbar .btn--primary { padding: .62rem .85rem; font-size: .75rem; }
  .rb-navbar .brand__name, .page-home .rb-navbar .brand__name { font-size: 1.0625rem; }
  .rb-navbar .brand__role, .page-home .rb-navbar .brand__role { font-size: .625rem; letter-spacing: .05em; }
  .rb-navbar .brand__mark, .page-home .rb-navbar .brand__mark { width: 44px; height: 44px; }
  .rb-navbar .navbar-brand, .page-home .rb-navbar .navbar-brand { gap: .55rem; }
  .rb-navbar .nav-item.ms-lg-2 { margin-left: .3rem !important; }
}





/* --------------------------------------------------------------------------
   THE WEDGE — BRIGHT GREEN

   The band under the navigation takes #188445 rather than the gradient
   floor. Saffron and a vivid green meeting under a white bar is the
   tricolour read, and at 16px it is a device rather than a field — which
   is the one place a mid-tone green earns its place, because nothing sits
   on top of it.

   Given its own token so it can be retuned without touching the hairline
   colour it currently shares.
   -------------------------------------------------------------------------- */

:root { --hdr-wedge-green: var(--brand-green-line); }

.site-header::after {
  background: linear-gradient(97.5deg,
    var(--hdr-orange-1) 0 36%,
    var(--hdr-wedge-green) 36.01% 100%);
}


/* --------------------------------------------------------------------------
   THE PROJECT HEADLINE PANEL — #188445

   Asked for as a flat fill. It cannot be one, and the reason is worth
   stating precisely: on #188445, WHITE measures 3.75:1. White is the
   highest-contrast colour that exists against it — nothing else gets
   closer. Dark ink manages 4.33:1, the deepest green 3.79:1. So no text
   colour of any kind reaches the 4.5:1 that 16px body copy needs. That is
   a property of the colour itself, not something CSS can be told to fix.

   On this panel that would have taken down the body line, the
   "Constituency-wide" note and the saffron eyebrow. The figure and the
   project title are large enough to survive at 3:1, so they would have
   stayed — which is the worst outcome: a panel that looks fine at a glance
   while its explanatory copy quietly fails.

   So the panel runs the full green ramp instead. #188445 sits at the
   bottom-right corner, across the empty half of the panel where it is most
   visible, and deepens toward the top-left where all the type lives. The
   panel reads as this green; the text sits on 8–11:1.
   -------------------------------------------------------------------------- */

.headline-project {
  background: linear-gradient(315deg,
    var(--brand-green-line) 0%,
    #14703B 26%,
    var(--brand-green-dark) 58%,
    var(--brand-green-deep) 100%);
}
.headline-project .h-display,
.headline-project h3,
.headline-project h2 { color: var(--white); }
.headline-project p { color: var(--on-green-strong); }
.headline-project .note,
.headline-project .src { color: var(--on-green-muted); }
.headline-project .eyebrow { color: var(--brand-saffron-light); }
.headline-project .eyebrow::before { background: var(--brand-saffron-light); }


/* --------------------------------------------------------------------------
   INSET PANELS ON --brand-green-dark

   #14703B carries white at 5.85:1 and #DEE4E1 at 4.53:1 — and nothing
   quieter. The three-step muted scale is tuned for the ground at 10:1, so
   on these panels it is collapsed to two levels rather than left failing.
   -------------------------------------------------------------------------- */

.matter, .mr-feat, .headline-project {
  --on-green-muted: #DEE4E1;
  --on-green-faint: #DEE4E1;
}
.matter__k, .mr-feat .kchip { color: var(--brand-green-light); }

/* the saffron feature field needs a green far darker than #14703B
   (2.38:1 on #F28C18) — the scrim tone clears it */
.section--accent .eyebrow,
.section--accent .marker__label,
.section--accent .marker__n,
.section--accent h2,
.section--accent h3,
.section--accent .h-section,
.section--accent p,
.section--accent .lede { color: var(--brand-green-scrim); }
.section--accent .btn--primary {
  background: var(--brand-green-scrim);
  border-color: var(--brand-green-scrim);
  color: #FFFFFF;
}
.section--accent .btn--ink,
.section--accent .btn--ghost,
.section--accent .btn--light {
  border-color: rgba(var(--brand-green-abyss-rgb),.6);
  color: var(--brand-green-scrim);
}
.section--accent .btn--ink:hover,
.section--accent .btn--ghost:hover,
.section--accent .btn--light:hover {
  background: var(--brand-green-scrim);
  border-color: var(--brand-green-scrim);
  color: #FFFFFF;
}

/* Four elements on #14703B panels that the standard scale cannot reach:
   saffron-light lands at 3.22:1 there and --on-green-muted at 3.80:1.
   They take the family's light tone instead, which keeps them green
   without touching the saffron system. */
.matter__topic {
  color: var(--brand-green-light);
  border-color: rgba(220,249,232,.5);
}
.mr-act,
.mr-plat__h,
.mr-plat__c,
.mr-feat .mr-act { color: var(--brand-green-light); }
.matter .matter__meta,
.mr-feat .mr-date,
.mr-feat .mr-cat { color: var(--brand-green-light); }


/* --------------------------------------------------------------------------
   THE FOOTER FIELD

   The brief nominates --brand-green-dark (#14703B) for footer backgrounds.
   Measured on the rendered page it does not hold: with the saffron glow
   composited over it the upper-left corner lands at #1E742A, where the
   footer's own rgba(255,255,255,.78) links read 4.24:1. The field takes
   the deep tone instead; #14703B stays where it works, on inset panels.
   -------------------------------------------------------------------------- */

.rb-footer {
  background:
    radial-gradient(70% 100% at 15% 15%,
      rgba(242,140,24,.12) 0%, transparent 62%),
    linear-gradient(145deg,
      var(--brand-green-deep) 0%,
      #0B3C20 55%,
      var(--brand-green-deep) 100%);
}


/* --------------------------------------------------------------------------
   FOUR PLACES THE REMAP LIFTED TOO FAR

   Caught by sampling the rendered pixels rather than the DOM. All four are
   gradients: when the token values moved, stops that used to be dark ended
   up bright, and the type on them lost contrast.
   -------------------------------------------------------------------------- */

/* 1. The project panel. Its stops were --brand-green-line, --brand-green-mid
      and --brand-green, all of which are now bright tones — the body line
      landed on #08742C at 3.32:1. The bright end stays in the empty
      bottom-right corner; everything under type is deep. */
.headline-project {
  background: linear-gradient(315deg,
    var(--brand-green) 0%,
    var(--brand-green-dark) 24%,
    #0B3C20 56%,
    var(--brand-green-deep) 100%);
}

/* 2. The footer headings sit inside the saffron glow, which lifted the
      ground to #10491B and put them at 4.29:1. The glow comes back a
      little; it is atmosphere, not a feature. */
.rb-footer {
  background:
    radial-gradient(70% 100% at 15% 15%,
      rgba(242,140,24,.07) 0%, transparent 62%),
    linear-gradient(145deg,
      var(--brand-green-deep) 0%,
      #0B3C20 55%,
      var(--brand-green-deep) 100%);
}

/* 3. The inner-page hero eyebrow measured 4.47:1 — three hundredths under.
      The gradient's light end pulls back one step. */
.page-hero {
  background:
    radial-gradient(72% 62% at 32% 22%,
      rgba(242,140,24,.10) 0%, transparent 68%),
    linear-gradient(158deg,
      var(--brand-green-deep) 0%,
      #0B3C20 48%,
      #10562D 100%);
}

/* 4. The saffron button's sweep reached #BB741C under its label. */
.btn--primary::before { background: var(--brand-saffron-dark); }

/* The saffron glow still lifted the footer ground to #0B481B under the
   column headings, leaving them at 4.36:1. It moves to the very top edge,
   above the columns, where it reads as atmosphere without touching type. */
.rb-footer {
  background:
    radial-gradient(58% 42% at 12% 0%,
      rgba(242,140,24,.10) 0%, transparent 64%),
    linear-gradient(145deg,
      var(--brand-green-deep) 0%,
      #0B3C20 55%,
      var(--brand-green-deep) 100%);
}

/* Primary button labels stay dark on saffron on every ground — the
   dark-section link rule was reaching the label span. */
.btn--primary,
.btn--primary span,
.section--night .btn--primary span,
.hero-x .btn--primary span,
.closing .btn--primary span,
.finale .btn--primary span { color: var(--text-primary); }

/* The blanket dark-label rule above reached the saffron field's button,
   which has a DARK green fill — dark on dark, 1.10:1. That button keeps
   its white label. */
.section--accent .btn--primary,
.section--accent .btn--primary span { color: #FFFFFF; }


/* --------------------------------------------------------------------------
   THE FOOTER SITS DEEPER THAN THE SECTIONS

   The section ground moved up to #10562D. The footer inherited it and its
   saffron column headings fell to 3.95:1 with the constituency line at
   4.30:1 — the footer carries more quiet type than any dark section, so it
   needs more headroom, not the same. It takes the floor tone.
   -------------------------------------------------------------------------- */

.rb-footer {
  background:
    radial-gradient(58% 42% at 12% 0%,
      rgba(242,140,24,.08) 0%, transparent 64%),
    linear-gradient(145deg,
      #0B3C20 0%,
      #0B3C20 55%,
      #0B3C20 100%);
}
.rb-footer p { color: rgba(255,255,255,.80); }

/* The saffron column headings measured 4.41 and 4.46 — hundredths under.
   The glow comes back once more and the field drops a step; both clear. */
.rb-footer {
  background:
    radial-gradient(58% 40% at 12% 0%,
      rgba(242,140,24,.05) 0%, transparent 64%),
    linear-gradient(145deg,
      #092F19 0%,
      #10562D 55%,
      #092F19 100%);
}

/* the hero button's edge was dark enough that the label measured against
   the border rather than the fill */
.hero-x .btn--primary { border-color: rgba(120,52,4,.18); }


/* ==========================================================================
   GREEN SECTIONS — DEPTH AND HIERARCHY

   Not one gradient applied everywhere. Each dark surface gets a treatment
   that suits what it holds, so the page has rhythm rather than a repeated
   slab. All light comes from the master's own rgb, so the atmosphere is
   the brand colour rather than a grey wash.
   ========================================================================== */

/* --- DARK CONTENT SECTIONS -------------------------------------------
   The ground, lifted very slightly from the upper left so the plane has a
   direction, and closed with a master-green hairline at the top edge. */
.section--night {
  position: relative;
  background:
    radial-gradient(80% 90% at 12% 0%,
      rgba(var(--brand-green-rgb), .34) 0%, transparent 62%),
    linear-gradient(168deg,
      var(--brand-green-deep) 0%,
      #0F5229 62%,
      var(--brand-green-darker) 100%);
}
.section--night::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    var(--brand-green) 0%,
    rgba(var(--brand-green-rgb), .35) 38%,
    transparent 100%);
}

/* --- THE HERO --------------------------------------------------------
   Deepest of all, because a photograph sits under it and the type has to
   hold over whatever the image does. Saffron enters as warmth, not colour. */
.page-hero {
  background:
    radial-gradient(72% 62% at 32% 22%,
      rgba(242,140,24,.10) 0%, transparent 68%),
    radial-gradient(60% 70% at 88% 0%,
      rgba(var(--brand-green-rgb), .40) 0%, transparent 64%),
    linear-gradient(158deg,
      var(--brand-green-abyss) 0%,
      var(--brand-green-darker) 46%,
      #0E4A27 100%);
}

/* --- THE CLOSING BAND ------------------------------------------------ */
.closing, .finale {
  background:
    radial-gradient(70% 80% at 82% 10%,
      rgba(242,140,24,.14) 0%, transparent 62%),
    linear-gradient(150deg,
      var(--brand-green-darker) 0%,
      var(--brand-green-deep) 58%,
      var(--brand-green-darker) 100%);
}

/* --- THE FOOTER ------------------------------------------------------
   The deepest surface on the site and the one carrying the most quiet
   type, so it gets headroom rather than brightness. */
.rb-footer {
  background:
    radial-gradient(58% 44% at 12% 0%,
      rgba(242,140,24,.06) 0%, transparent 62%),
    radial-gradient(70% 60% at 92% 100%,
      rgba(var(--brand-green-rgb), .22) 0%, transparent 66%),
    linear-gradient(145deg,
      var(--brand-green-abyss) 0%,
      var(--brand-green-darker) 55%,
      var(--brand-green-abyss) 100%);
}

/* --- INSET PANELS ----------------------------------------------------
   One step up from the ground so they read as raised, with a master-green
   edge rather than a shadow. */
.matter, .mr-feat {
  background:
    linear-gradient(150deg,
      var(--brand-green-dark) 0%,
      #136036 100%);
  border-color: rgba(var(--brand-green-rgb), .55);
}

/* --- THE PROJECT PANEL -----------------------------------------------
   Master green at the empty bottom-right corner, deepening under the type. */
.headline-project {
  background: linear-gradient(315deg,
    var(--brand-green) 0%,
    var(--brand-green-dark) 26%,
    var(--brand-green-deep) 58%,
    var(--brand-green-darker) 100%);
}

/* --- THE ROAD CARDS --------------------------------------------------- */
.road {
  background: linear-gradient(160deg,
    var(--brand-green-deep) 0%,
    var(--brand-green-darker) 100%);
  border-color: rgba(var(--brand-green-rgb), .40);
}

/* --- CARDS ON LIGHT --------------------------------------------------
   White stock with master-green accents — the brand appears in the
   detail rather than as a field. */
.card:hover, .story:hover, .mr-story:hover { border-color: rgba(var(--brand-green-rgb), .45); }

/* --- GREEN TEXT ON LIGHT ---------------------------------------------
   Master is 4.75:1 on white and 4.46:1 on the soft surfaces — four
   hundredths under there, so those grounds take the next step down. */
.h-section, a, .form-label, .statement__text { color: var(--brand-green); }
.section--soft .h-section,
.section--warm .h-section,
.section--soft a,
.section--warm a,
.statement .statement__text,
.inscribe .inscribe__v { color: var(--brand-green-dark); }
.section--night a, .rb-footer a, .hero-x a, .page-hero a { color: inherit; }
.section--night .h-section { color: #FFFFFF; }

/* --- THE SAFFRON FIELD -----------------------------------------------
   Master reads 1.93:1 on #F28C18. The darkest members clear it. */
.section--accent .eyebrow,
.section--accent .marker__label,
.section--accent .marker__n,
.section--accent h2,
.section--accent h3,
.section--accent .h-section,
.section--accent p,
.section--accent .lede { color: var(--brand-green-abyss); }
.section--accent .btn--primary {
  background: var(--brand-green-abyss);
  border-color: var(--brand-green-abyss);
}

/* The section glow sat at 12% from the left — directly under the marker
   numerals, lifting the ground to #126334 and taking them to 4.04:1. The
   markers and headings are left-aligned, so the light moves to the empty
   right side where it does the same job for the plane without touching type. */
.section--night {
  background:
    radial-gradient(66% 78% at 90% 4%,
      rgba(var(--brand-green-rgb), .30) 0%, transparent 64%),
    linear-gradient(168deg,
      var(--brand-green-deep) 0%,
      #0F5229 62%,
      var(--brand-green-darker) 100%);
}

/* The bridge label sits in the glow's path on the right edge — the one
   piece of type over there. It takes the master green's light tone. */
.section--night .bridge__b,
.section--night .bridge__a,
.closing .bridge__b,
.closing .bridge__a { color: var(--brand-green-light); }

/* The hero primary is dark ink on saffron (6.60:1); its rounded edge was
   dark enough that a sample at the corner read the border, not the fill. */
.hero-x .btn--primary { border-color: rgba(120,52,4,.12); }


/* ==========================================================================
   THE PARLIAMENTARY RECORD — re-art-directed

   The section holds the most persuasive material on the site and was
   presenting it as a spreadsheet: four columns divided by 1px rules, the
   figures floating, and the comparison data — the part that actually makes
   the argument — set at 10.5px in a muted grey with bars so faint they
   read as ruled lines.

   The structural insight is in the markup. Every data-bar value is the
   benchmark expressed as a percentage of the Member's own figure:

       attendance   85 / 90  = 94
       debates    21.4 / 37  = 58
       questions   116 / 150 = 77
       bills       0.4 / 2   = 20

   So the track is the Member and the bar is the benchmark. Nothing on
   screen said so, which left "116" sitting next to a grey line meaning
   nothing. Once the track reads as the Member's own figure, the gap at the
   end of each bar becomes the story: the distance between this record and
   the average, drawn to scale.

   No markup changes. The count-up and bar-fill observers in main.js
   already exist and are reused as-is, including their reduced-motion path.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FROM TABLE TO PANELS

   The 1px-gap grid is what made it read as a table. Real gutters, real
   surfaces, and each panel lifted just off the ground.
   -------------------------------------------------------------------------- */

.record {
  gap: clamp(.75rem, .4rem + 1.2vw, 1.25rem);
  background: none;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.section--night .record { background: none; }

.stat,
.section--night .stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem)
           clamp(1.25rem, .9rem + 1.2vw, 1.75rem)
           clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  border-radius: 6px;
  background:
    radial-gradient(120% 100% at 0% 0%,
      rgba(255,255,255,.07) 0%, transparent 58%),
    linear-gradient(158deg,
      rgba(var(--brand-green-rgb), .30) 0%,
      rgba(9,47,25,.34) 100%);
  border: 1px solid rgba(var(--brand-green-rgb), .42);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset,
              0 18px 40px -28px rgba(0,0,0,.7);
  transition:
    transform 520ms var(--ease-premium),
    border-color 380ms var(--ease-premium),
    box-shadow 520ms var(--ease-premium);
}

/* the saffron rule that grows across the top edge */
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 2.75rem;
  background: linear-gradient(90deg,
    var(--brand-saffron) 0%, rgba(242,140,24,.25) 100%);
  transition: width 620ms var(--ease-premium);
  z-index: 2;
}
.stat:hover::before { width: 65%; }

.stat:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--brand-green-rgb), .78);
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset,
              0 30px 60px -30px rgba(0,0,0,.85);
}

/* a very faint index numeral in the corner — depth without noise */
.stat::after {
  content: "";
  position: absolute;
  right: -18%; bottom: -34%;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--brand-green-rgb), .30) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.stat > * { position: relative; z-index: 1; }

/* staggered entrance, driven by the --i already in the markup */
.record.is-in .stat {
  animation: statRise 780ms var(--ease-premium) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes statRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   2. THE FIGURE
   -------------------------------------------------------------------------- */

.stat__label,
.section--night .stat__label {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--on-green-muted);
  margin-bottom: .35rem;
}
:lang(hi) .stat__label { letter-spacing: .05em; text-transform: none; }

.stat__value,
.section--night .stat__value {
  font-size: clamp(2.75rem, 2rem + 3.2vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: .95;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}
.stat__unit,
.section--night .stat__unit {
  font-size: .34em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand-saffron-light);
  margin-left: .12em;
  vertical-align: baseline;
}


/* --------------------------------------------------------------------------
   3. THE COMPARISON — the part that makes the argument

   The track is the Member's figure at full width, marked with a saffron
   cap at its end. The bar is the benchmark, filling as far as it reaches.
   The unfilled remainder is the lead, and it is now the thing you see.
   -------------------------------------------------------------------------- */

.stat__compare {
  margin-top: clamp(1.25rem, .9rem + 1.1vw, 1.75rem);
  padding-top: clamp(1rem, .75rem + .8vw, 1.35rem);
  border-top: 1px solid rgba(255,255,255,.10);
  gap: clamp(.75rem, .55rem + .6vw, 1rem);
}

.cmp {
  grid-template-columns: 1fr auto;
  grid-template-areas: "label value" "track track";
  gap: .3rem .75rem;
  align-items: baseline;
}
.cmp__label { grid-area: label; }
.cmp__val   { grid-area: value; }
.cmp__track { grid-area: track; }

.cmp__label,
.section--night .cmp__label {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--on-green-muted);
  line-height: 1.35;
}
.cmp__val,
.section--night .cmp__val {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  color: var(--on-green-strong);
  font-variant-numeric: tabular-nums;
}

/* the track: the Member's own figure, end-capped in saffron */
.cmp__track,
.section--night .cmp__track {
  position: relative;
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  overflow: visible;
}
.cmp__track::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 3px; height: 14px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--brand-saffron);
  box-shadow: 0 0 10px -1px rgba(242,140,24,.85);
}

/* the bar: the benchmark, reaching as far as it reaches.
   width is set by main.js from data-bar — the transition is already there */
.cmp__bar--other,
.section--night .cmp__bar--other {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.62) 100%);
  transition: width 1100ms var(--ease-premium);
}
.stat:hover .cmp__bar--other {
  background: linear-gradient(90deg,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.78) 100%);
}


/* --------------------------------------------------------------------------
   4. THE HEADER ROW
   -------------------------------------------------------------------------- */

.section--night .bridge {
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.section--night .split-head { align-items: flex-end; }
.section--night .h-section {
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  letter-spacing: -0.032em;
  line-height: 1.02;
}


/* --------------------------------------------------------------------------
   5. THE QUOTED MATTER AND THE COMMITTEE PANEL
   -------------------------------------------------------------------------- */

.parl-extra { gap: clamp(.75rem, .4rem + 1.2vw, 1.25rem); }

.matter {
  position: relative;
  border-radius: 6px;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  border-left: 3px solid var(--brand-saffron);
}
.matter h3 {
  font-size: clamp(1.125rem, .95rem + .9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.4;
}
/* an open quote mark, set large and very quiet */
.matter::after {
  content: "\201C";
  position: absolute;
  right: 1.25rem; top: .35rem;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 7rem;
  line-height: 1;
  color: rgba(255,255,255,.07);
  pointer-events: none;
}
.matter__topic {
  display: inline-block;
  margin-top: 1.1rem;
  padding: .32rem .8rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
:lang(hi) .matter__topic { letter-spacing: .05em; text-transform: none; }

.commit {
  border-radius: 6px;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  background: linear-gradient(160deg,
    rgba(var(--brand-green-rgb), .22) 0%,
    rgba(9,47,25,.30) 100%);
  border: 1px solid rgba(var(--brand-green-rgb), .40);
}
.commit li {
  border-top-color: rgba(255,255,255,.12);
  transition: padding-left 380ms var(--ease-premium);
}
.commit li:hover { padding-left: .5rem; }
.commit__name { font-size: .9375rem; }


/* --------------------------------------------------------------------------
   6. MOTION PREFERENCES
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .record.is-in .stat { animation: none; }
  .stat, .stat::before, .cmp__bar--other, .commit li { transition: none; }
  .stat:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   7. SMALL SCREENS — the hierarchy holds, it is not merely scaled
   -------------------------------------------------------------------------- */

@media (max-width: 33.99rem) {
  .stat { padding: 1.35rem 1.25rem 1.5rem; }
  .stat__value { font-size: 3rem; }
  .matter::after { font-size: 5rem; right: .75rem; }
}

/* The benchmark fill and the rail behind it were too close in tone, so the
   remainder — the Member's lead — did not read. The rail is now warm: what
   is left uncovered at the end of each bar is saffron, and that is exactly
   the distance between this record and the average. */
.cmp__track,
.section--night .cmp__track {
  background: linear-gradient(90deg,
    rgba(242,140,24,.30) 0%,
    rgba(242,140,24,.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cmp__bar--other,
.section--night .cmp__bar--other {
  background: rgba(255,255,255,.80);
  box-shadow: 1px 0 0 rgba(0,0,0,.25);
}
.stat:hover .cmp__bar--other { background: rgba(255,255,255,.92); }

/* --------------------------------------------------------------------------
   THE COMPARISON BARS NEVER FILLED — pre-existing, and not the observer

   main.js sets each bar's width from data-bar correctly: inspected live,
   the inline style reads width:94% and the computed style agrees. The
   rendered box was still 0px wide.

   .cmp__bar is a <span> and nothing ever gave it a display. It computed to
   display:inline, and width does not apply to inline boxes — so the JS was
   writing a width the layout engine was entitled to ignore. Every one of
   the eight bars measured 0px against data-bar values from 94 down to 5,
   which is why the comparison rendered as eight empty rails.

   One declaration. The bars have presumably never filled.
   -------------------------------------------------------------------------- */

.cmp__bar,
.cmp__bar--other,
.cmp__bar--self { display: block; min-width: 3px; }


/* --------------------------------------------------------------------------
   THE RECORD ON LIGHT STOCK

   parliament.php runs the same .record markup on a light section. The panel
   treatment above was written unscoped, so those cards took the dark
   gradient and its light-on-dark type: the labels measured 1.09:1 on a pale
   green wash. Same component, two grounds — the light one gets its own.
   -------------------------------------------------------------------------- */

.section:not(.section--night) .stat,
.section--soft .stat,
.section--warm .stat {
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 2px rgba(23,35,29,.04), 0 14px 34px -28px rgba(23,35,29,.22);
}
.section:not(.section--night) .stat:hover,
.section--soft .stat:hover,
.section--warm .stat:hover {
  border-color: var(--border-medium);
  box-shadow: 0 1px 2px rgba(23,35,29,.05), 0 24px 48px -30px rgba(23,35,29,.30);
}
.section:not(.section--night) .stat::after,
.section--soft .stat::after,
.section--warm .stat::after { display: none; }

.section:not(.section--night) .stat__label,
.section--soft .stat__label,
.section--warm .stat__label { color: var(--text-secondary); }

.section:not(.section--night) .stat__value,
.section--soft .stat__value,
.section--warm .stat__value { color: var(--brand-green-dark); }

.section:not(.section--night) .stat__unit,
.section--soft .stat__unit,
.section--warm .stat__unit { color: var(--brand-saffron-ink); }

.section:not(.section--night) .stat__compare,
.section--soft .stat__compare,
.section--warm .stat__compare { border-top-color: var(--border-light); }

.section:not(.section--night) .cmp__label,
.section--soft .cmp__label,
.section--warm .cmp__label { color: var(--text-secondary); }

.section:not(.section--night) .cmp__val,
.section--soft .cmp__val,
.section--warm .cmp__val { color: var(--text-primary); }

.section:not(.section--night) .cmp__track,
.section--soft .cmp__track,
.section--warm .cmp__track {
  background: linear-gradient(90deg,
    rgba(242,140,24,.30) 0%, rgba(242,140,24,.60) 100%);
  box-shadow: inset 0 0 0 1px rgba(23,35,29,.08);
}
.section:not(.section--night) .cmp__bar--other,
.section--soft .cmp__bar--other,
.section--warm .cmp__bar--other {
  background: var(--brand-green-dark);
  box-shadow: 1px 0 0 rgba(255,255,255,.55);
}
.section:not(.section--night) .stat:hover .cmp__bar--other,
.section--soft .stat:hover .cmp__bar--other,
.section--warm .stat:hover .cmp__bar--other { background: var(--brand-green); }

/* The committee panel had the same unscoped treatment — a dark green
   gradient with light type, rendering as pale sage on the light sections
   where parliament.php places it. */
.section:not(.section--night) .commit,
.section--soft .commit,
.section--warm .commit {
  background: var(--white);
  border: 1px solid var(--border-light);
}
.section:not(.section--night) .commit h3,
.section--soft .commit h3,
.section--warm .commit h3 { color: var(--brand-green-dark); }

.section:not(.section--night) .commit li,
.section--soft .commit li,
.section--warm .commit li { border-top-color: var(--border-light); }

.section:not(.section--night) .commit__name,
.section--soft .commit__name,
.section--warm .commit__name { color: var(--text-primary); }

.section:not(.section--night) .commit__body,
.section--soft .commit__body,
.section--warm .commit__body,
.section:not(.section--night) .commit .matter__meta,
.section--soft .commit .matter__meta,
.section--warm .commit .matter__meta,
.section:not(.section--night) .commit .src,
.section--soft .commit .src,
.section--warm .commit .src { color: var(--text-secondary); }

.section:not(.section--night) .commit .src:hover,
.section--soft .commit .src:hover,
.section--warm .commit .src:hover { color: var(--brand-saffron-ink); }


/* ==========================================================================
   THE ROAD AHEAD — re-art-directed

   Why it read as ordinary:

   .road-grid used the hairline-table pattern —
       gap: 1px; background: var(--night-line); overflow: hidden
   Four cells separated by 1px of line colour inside one clipped rectangle.
   That is not four cards; it is one table with four cells, and no amount of
   colour work fixes it while the structure says table.

   Three structural changes do most of the work:

   1. The monolith becomes four separate panels with real gutters, so they
      read as four priorities rather than one block subdivided.
   2. Each panel becomes an editorial ROW — numeral rail, argument, evidence
      column — which is how a policy document sets out commitments, and it
      gives the long descriptions a proper measure instead of half a cell.
   3. The numeral gets a rail and a tick, so the four of them read down the
      left as a progression. That is the road: stated in the layout rather
      than drawn as an illustration.

   Content, markup and behaviour unchanged. CSS only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE SECTION GROUND

   A very faint green bloom behind the roadmap so the panels sit in
   something rather than on nothing. Barely perceptible by design.
   -------------------------------------------------------------------------- */

.section--soft:has(.road-grid) {
  position: relative;
  isolation: isolate;
}
.section--soft:has(.road-grid)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 88% 6%,
      rgba(var(--brand-green-rgb), .07) 0%, transparent 62%),
    radial-gradient(42% 36% at 4% 92%,
      rgba(242,140,24,.05) 0%, transparent 64%);
}


/* --------------------------------------------------------------------------
   2. THE INTRODUCTION
   -------------------------------------------------------------------------- */

.road__display {
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
}


/* --------------------------------------------------------------------------
   3. FROM TABLE TO PANELS
   -------------------------------------------------------------------------- */

.road-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.75rem, .5rem + .9vw, 1.125rem);
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  counter-reset: road;
}
@media (min-width: 48rem) {
  .road-grid { grid-template-columns: 1fr; }
}

.road {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)
           clamp(1.25rem, .9rem + 1.4vw, 2rem);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(110% 130% at 0% 0%,
      rgba(var(--brand-green-rgb), .34) 0%, transparent 62%),
    linear-gradient(112deg,
      var(--brand-green-deep) 0%,
      #0D4A26 62%,
      var(--brand-green-darker) 100%);
  transition:
    transform .35s cubic-bezier(.2,.65,.3,1),
    border-color .35s ease,
    background-color .35s ease;
}

/* an oversized ghost numeral for depth — never read, only felt */
.road::after {
  content: "";
  position: absolute;
  right: -6%; top: 50%;
  transform: translateY(-50%);
  width: 34%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--brand-green-rgb), .26) 0%, transparent 66%);
  z-index: 0;
  pointer-events: none;
}
.road > * { position: relative; z-index: 1; }

.road:hover {
  transform: translateY(-4px);
  border-color: rgba(242,140,24,.42);
}
.road:focus-within {
  border-color: rgba(242,140,24,.55);
}


/* --------------------------------------------------------------------------
   4. THE EDITORIAL ROW

   numeral rail  |  the argument  |  the evidence
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .road {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) 17rem;
    column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    align-items: start;
  }
  .road__num    { grid-column: 1; grid-row: 1 / span 3; }
  .road h3      { grid-column: 2; grid-row: 1; }
  .road p       { grid-column: 2; grid-row: 2; }
  .road__anchor { grid-column: 3; grid-row: 1 / span 3; }
}

@media (min-width: 48rem) and (max-width: 61.99rem) {
  .road {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: 1.5rem;
  }
  .road__num    { grid-column: 1; grid-row: 1 / span 3; }
  .road h3      { grid-column: 2; }
  .road p       { grid-column: 2; }
  .road__anchor { grid-column: 2; }
}


/* --------------------------------------------------------------------------
   5. THE NUMERAL — a station on the route
   -------------------------------------------------------------------------- */

.road__num,
.section--night .road__num,
.section--soft .road__num {
  position: relative;
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--brand-saffron);
  margin-bottom: clamp(1rem, .7rem + 1vw, 1.35rem);
  transition: color .35s ease;
}
/* the tick beneath it — four of these read down the page as progression */
.road__num::after {
  content: "";
  position: absolute;
  left: .1em; top: calc(100% + .6rem);
  width: 1px; height: 2.25rem;
  background: linear-gradient(180deg,
    var(--brand-saffron) 0%, rgba(242,140,24,0) 100%);
  transition: height .45s cubic-bezier(.2,.65,.3,1), opacity .35s ease;
  opacity: .75;
}
.road:hover .road__num { color: var(--brand-saffron-light); }
.road:hover .road__num::after { height: 3.25rem; opacity: 1; }

@media (max-width: 61.99rem) {
  .road__num { margin-bottom: .85rem; }
  .road__num::after { display: none; }
}


/* --------------------------------------------------------------------------
   6. TITLE, ARGUMENT, EVIDENCE
   -------------------------------------------------------------------------- */

.road h3,
.section--night .road h3,
.section--soft .road h3 {
  font-size: clamp(1.1875rem, 1.05rem + .7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.28;
  color: #FFFFFF;
  margin: 0 0 clamp(.65rem, .5rem + .5vw, .9rem);
  max-width: 30ch;
}

.road p,
.section--night .road p,
.section--soft .road p {
  font-size: clamp(.9375rem, .9rem + .15vw, 1rem);
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  max-width: 62ch;
  margin: 0;
}

/* the evidence column — set as record metadata, not as a footnote */
.road__anchor,
.section--night .road__anchor,
.section--soft .road__anchor {
  display: block;
  margin-top: 0;
  padding-top: 0;
  padding-left: clamp(1rem, .7rem + 1vw, 1.35rem);
  border-top: none;
  border-left: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.7;
  letter-spacing: .005em;
  color: var(--on-green-muted);
  transition: border-color .35s ease;
}
.road:hover .road__anchor { border-left-color: rgba(242,140,24,.45); }

@media (max-width: 61.99rem) {
  .road__anchor {
    margin-top: clamp(1rem, .8rem + .8vw, 1.35rem);
    padding-top: clamp(.85rem, .7rem + .6vw, 1.1rem);
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .road:hover .road__anchor {
    border-left-color: transparent;
    border-top-color: rgba(242,140,24,.45);
  }
}


/* --------------------------------------------------------------------------
   7. THE DIRECTIONAL MARK

   A single saffron chevron at the trailing edge, still by default and
   moving on hover. It is the only decoration in the section.
   -------------------------------------------------------------------------- */

.road::before {
  content: "";
  position: absolute;
  right: clamp(1.25rem, .9rem + 1.4vw, 2rem);
  bottom: clamp(1.25rem, .9rem + 1.4vw, 1.75rem);
  width: .55rem; height: .55rem;
  border-right: 1.5px solid rgba(242,140,24,.5);
  border-top: 1.5px solid rgba(242,140,24,.5);
  transform: rotate(45deg);
  transition: transform .35s cubic-bezier(.2,.65,.3,1),
              border-color .35s ease;
  z-index: 2;
}
.road:hover::before {
  transform: rotate(45deg) translate(3px, -3px);
  border-color: var(--brand-saffron);
}
@media (max-width: 47.99rem) {
  .road::before { display: none; }
}


/* --------------------------------------------------------------------------
   8. STAGGERED ENTRANCE — driven by the --i already in the markup
   -------------------------------------------------------------------------- */

.road-grid.is-in .road {
  animation: roadRise 720ms cubic-bezier(.2,.65,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 95ms);
}
@keyframes roadRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   9. MOTION AND FOCUS
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .road-grid.is-in .road { animation: none; }
  .road, .road::before, .road__num, .road__num::after, .road__anchor { transition: none; }
  .road:hover { transform: none; }
  .road:hover::before { transform: rotate(45deg); }
}

.road a:focus-visible {
  outline: 2px solid var(--brand-saffron);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   10. FALLBACK for browsers without :has()
   The bloom is decorative; its absence changes nothing that matters.
   -------------------------------------------------------------------------- */

@supports not (selector(:has(*))) {
  .section--soft::before { content: none; }
}

/* --------------------------------------------------------------------------
   BALANCING THE ROW

   With the evidence column top-aligned against a four-line argument, each
   card carried roughly 200px of empty column below it. The reference now
   sits at the optical centre of the row and the chevron tucks under it, so
   the third column reads as a considered block rather than a gap.
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .road { align-items: center; }
  .road__num    { align-self: start; }
  .road h3      { align-self: end; }
  .road p       { align-self: start; }
  .road__anchor { align-self: center; }
  .road { grid-template-columns: 4rem minmax(0, 1fr) 15.5rem; }
}

/* card four's title was breaking early against a 30ch measure */
.road h3, .section--soft .road h3 { max-width: 34ch; }

/* the chevron sits with the reference rather than floating in the void */
.road::before {
  right: clamp(1.25rem, .9rem + 1.4vw, 1.75rem);
  bottom: auto;
  top: calc(50% + 2.25rem);
}
@media (max-width: 61.99rem) {
  .road::before { top: auto; bottom: clamp(1.1rem, .9rem + .8vw, 1.5rem); }
}

/* On small screens the reference should sit under the argument with a rule
   above it. The stacking rule was (0,1,0) and lost to the desktop rule's
   .section--soft .road__anchor at (0,2,0), so the left border stayed and
   the separation never appeared. Matched specificity. */
@media (max-width: 61.99rem) {
  .road__anchor,
  .section--night .road__anchor,
  .section--soft .road__anchor {
    margin-top: clamp(1.1rem, .85rem + .9vw, 1.5rem);
    padding-top: clamp(.9rem, .75rem + .6vw, 1.15rem);
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.14);
  }
}


/* ==========================================================================
   THE JOURNEY → THE MEDIA CENTRE → STAY CONNECTED

   Read as three unrelated boxes because that is structurally what they
   were: a row of bordered cells, a floating sentence with a button, and
   four identical rectangles, each separated by a hairline.

   The diagnosis on the timeline is the same one that ran through this
   build: .mr-moment carried `border-left: 2px solid` and sat in a flex
   row. That is a table of cells, not a timeline. There was no rail, no
   milestone, nothing to say these six dates are one sequence — and the
   browser's default scrollbar underneath it announced "this is a
   scrolling div", which is the least editorial thing on the page.

   So: give the sequence a rail and stations, give the media block a
   surface to sit on, and give the four cards a hierarchy instead of four
   copies of the same rectangle.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SECTION RHYTHM

   The three parts keep their own identity but read as one progression.
   The rules between them get a saffron tip, so each transition reads as a
   deliberate step rather than a divider.
   -------------------------------------------------------------------------- */

.mr-journey,
.mr-centre,
.mr-social { position: relative; }

.mr-journey  { padding-block: clamp(2.5rem, 1.8rem + 2.6vw, 4rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.mr-centre   { padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.mr-social   { padding-top: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); }

.mr-centre::before,
.mr-social::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    var(--brand-saffron) 0 3.5rem,
    rgba(255,255,255,.14) 3.5rem 100%);
}


/* --------------------------------------------------------------------------
   2. THE JOURNEY — a rail with stations
   -------------------------------------------------------------------------- */

.mr-journey__k {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-saffron);
  margin-bottom: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}
:lang(hi) .mr-journey__k { letter-spacing: .06em; text-transform: none; }

.mr-journey__track {
  --moment-gap: clamp(1.25rem, .8rem + 2vw, 2.75rem);
  gap: var(--moment-gap);
  padding-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-top: .25rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-saffron) rgba(255,255,255,.12);
}

/* a thin rail rather than the browser's default bar */
.mr-journey__track::-webkit-scrollbar { height: 3px; }
.mr-journey__track::-webkit-scrollbar-track {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}
.mr-journey__track::-webkit-scrollbar-thumb {
  background: var(--brand-saffron);
  border-radius: 999px;
}
.mr-journey__track::-webkit-scrollbar-thumb:hover {
  background: var(--brand-saffron-light);
}

/* the right-edge fade — the only honest way to say "there is more" */
.mr-journey::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: clamp(2rem, 1rem + 3vw, 4rem);
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(16,86,45,0) 0%, rgba(16,86,45,.92) 100%);
}

.mr-moment {
  position: relative;
  width: clamp(12rem, 10rem + 6vw, 15.5rem);
  border-left: none;
  padding: 2.75rem 0 0 0;
  gap: .5rem;
  scroll-snap-align: start;
  transition: none;
}

/* the station */
.mr-moment::before {
  content: "";
  position: absolute;
  top: 1rem; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--brand-saffron);
  background: var(--brand-green-deep);
  z-index: 2;
  transition:
    background-color .38s cubic-bezier(.2,.65,.3,1),
    box-shadow .38s cubic-bezier(.2,.65,.3,1),
    border-color .38s ease;
}

/* the rail, drawn from each station into the gap toward the next */
.mr-moment::after {
  content: "";
  position: absolute;
  top: calc(1rem + 5px);
  left: 11px;
  width: calc(100% + var(--moment-gap) - 11px);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(242,140,24,.55) 0%, rgba(242,140,24,.22) 100%);
  z-index: 1;
}
.mr-moment:last-child::after {
  width: 3.5rem;
  background: linear-gradient(90deg,
    rgba(242,140,24,.4) 0%, rgba(242,140,24,0) 100%);
}

.mr-moment__y {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--brand-saffron);
  transition: color .38s ease;
}
.mr-moment__t {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--on-green-muted);
  max-width: 22ch;
  transition: color .38s ease;
}

/* hover and keyboard focus land on the same state */
.mr-moment:hover::before,
.mr-moment:focus-visible::before {
  background: var(--brand-saffron);
  box-shadow: 0 0 0 5px rgba(242,140,24,.20);
}
.mr-moment:hover .mr-moment__y,
.mr-moment:focus-visible .mr-moment__y { color: var(--brand-saffron-light); }
.mr-moment:hover .mr-moment__t,
.mr-moment:focus-visible .mr-moment__t { color: #FFFFFF; }

.mr-moment:focus-visible {
  outline: 2px solid var(--brand-saffron);
  outline-offset: 6px;
  border-radius: 2px;
}

/* the CTA — a rule that draws itself across on hover */
.mr-journey__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  padding-bottom: .55rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-green-strong);
  text-decoration: none;
  border-bottom: none;
  transition: color .32s ease;
}
:lang(hi) .mr-journey__cta { letter-spacing: .05em; text-transform: none; }
.mr-journey__cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0; height: 1px; width: 100%;
  background: rgba(255,255,255,.28);
  transform-origin: left center;
  transition: background-color .32s ease, transform .42s cubic-bezier(.2,.65,.3,1);
}
.mr-journey__cta:hover { color: var(--brand-saffron); }
.mr-journey__cta:hover::after {
  background: var(--brand-saffron);
  transform: scaleX(1.12);
}
.mr-journey__cta span { transition: transform .32s cubic-bezier(.2,.65,.3,1); }
.mr-journey__cta:hover span { transform: translateX(4px); }


/* --------------------------------------------------------------------------
   3. THE MEDIA CENTRE — a surface, not a floating sentence

   No second heading is added here. This block already sits inside a
   section titled "The media room", and a sub-heading three lines under it
   would be the same label twice. What it lacked was a surface and a
   statement weight, so it gets both.
   -------------------------------------------------------------------------- */

.mr-centre {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
@media (min-width: 55rem) {
  .mr-centre { grid-template-columns: minmax(0, 1fr) auto; }
}

.mr-centre__line {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: #FFFFFF;
  max-width: 34ch;
  margin: 0;
}

.mr-centre .btn--primary {
  padding: 1rem 1.75rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 4px;
  background: var(--brand-saffron);
  border: 1px solid rgba(120,52,4,.22);
  color: var(--text-primary);
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.7);
  transition:
    background-color .3s ease,
    transform .3s cubic-bezier(.2,.65,.3,1),
    box-shadow .3s ease;
}
.mr-centre .btn--primary::before { display: none; }
.mr-centre .btn--primary:hover {
  background: var(--brand-saffron-dark);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.8);
}


/* --------------------------------------------------------------------------
   4. STAY CONNECTED
   -------------------------------------------------------------------------- */

.mr-social h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 0 .6rem;
}
.mr-social__sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--on-green-strong);
  max-width: 52ch;
  margin: 0 0 clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
}

.mr-platforms {
  display: grid;
  gap: clamp(.75rem, .5rem + .9vw, 1.125rem);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .mr-platforms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .mr-platforms { grid-template-columns: repeat(4, 1fr); } }

.mr-plat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 0;
  align-content: start;
  padding: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 110% at 0% 0%,
      rgba(var(--brand-green-rgb), .34) 0%, transparent 62%),
    linear-gradient(158deg,
      var(--brand-green-dark) 0%,
      var(--brand-green-darker) 100%);
  transition:
    transform .38s cubic-bezier(.2,.65,.3,1),
    border-color .38s ease,
    box-shadow .38s ease;
}

/* the saffron rule that grows across the top on hover */
.mr-plat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 2.25rem;
  background: var(--brand-saffron);
  transition: width .48s cubic-bezier(.2,.65,.3,1);
  z-index: 2;
}
.mr-plat:hover::before,
.mr-plat:focus-visible::before { width: 100%; }

.mr-plat:hover,
.mr-plat:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(242,140,24,.55);
  box-shadow: 0 20px 40px -26px rgba(0,0,0,.85);
}

/* the icon gets a disc so it reads as a mark rather than a glyph */
.mr-plat .bi {
  font-size: 1.5rem !important;   /* the markup carries an inline font-size */
  color: #FFFFFF !important;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom: 1.1rem;
  transition: background-color .38s ease, border-color .38s ease, color .38s ease;
}
.mr-plat:hover .bi,
.mr-plat:focus-visible .bi {
  background: var(--brand-saffron);
  border-color: var(--brand-saffron);
  color: var(--text-primary) !important;
}

.mr-plat__n {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #FFFFFF;
  margin-bottom: .2rem;
}
.mr-plat__h {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .01em;
  color: var(--brand-green-light);
  margin-bottom: 1.1rem;
  transition: color .38s ease;
}
.mr-plat__c {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-saffron);
  transition: color .38s ease, gap .38s cubic-bezier(.2,.65,.3,1);
}
:lang(hi) .mr-plat__c { letter-spacing: .05em; text-transform: none; }
.mr-plat:hover .mr-plat__c,
.mr-plat:focus-visible .mr-plat__c {
  color: var(--brand-saffron-light);
  gap: .8rem;
}

.mr-plat:focus-visible {
  outline: 2px solid var(--brand-saffron);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5. MOTION AND SMALL SCREENS
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mr-moment::before, .mr-moment__y, .mr-moment__t,
  .mr-plat, .mr-plat::before, .mr-plat .bi, .mr-plat__c,
  .mr-journey__cta, .mr-journey__cta::after, .mr-journey__cta span,
  .mr-centre .btn--primary { transition: none; }
  .mr-plat:hover, .mr-plat:focus-visible { transform: none; }
  .mr-centre .btn--primary:hover { transform: none; }
  .mr-journey__cta:hover::after { transform: none; }
  .mr-journey__cta:hover span { transform: none; }
}

@media (max-width: 47.99rem) {
  /* the timeline stays full size and scrolls — never compressed */
  .mr-moment { width: 13.5rem; }
  .mr-moment__y { font-size: 1.75rem; }
  .mr-centre .btn--primary { width: 100%; justify-content: center; }
  .mr-journey::after { width: 1.75rem; }
}

/* The rail was drawn as a gradient falling to .22 alpha, which on this
   green is invisible — each segment looked like it stopped halfway and the
   sequence read as six unconnected dots again. Measured geometry was
   correct all along: 246px moment + 41.6px gap - 11px dot = 277px, landing
   exactly on the next station. It just could not be seen. */
.mr-moment::after {
  background: linear-gradient(90deg,
    rgba(242,140,24,.62) 0%,
    rgba(242,140,24,.42) 100%);
}
.mr-moment:last-child::after {
  background: linear-gradient(90deg,
    rgba(242,140,24,.42) 0%, rgba(242,140,24,0) 100%);
}

/* the edge fade was wide and opaque enough to slice a year in half —
   it should hint, not crop */
.mr-journey::after {
  width: clamp(1.25rem, .6rem + 1.8vw, 2.25rem);
  background: linear-gradient(90deg,
    rgba(16,86,45,0) 0%, rgba(16,86,45,.75) 100%);
}

/* roughly 100px of dead space sat between the CTA and the next rule */
.mr-journey { padding-bottom: clamp(1.25rem, .9rem + 1.2vw, 1.75rem); }
.mr-journey__cta { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

/* The edge fade painted a fixed rgba(16,86,45) over a section whose ground
   is itself a gradient — where the ground was darker than that value, the
   "fade" rendered as a lighter rectangle sliced across the last milestone.
   Masking the track fades the content itself to transparent and is correct
   over any ground, which is what this needed. */
.mr-journey::after { display: none; }
.mr-journey__track {
  -webkit-mask-image: linear-gradient(90deg, #000 0 calc(100% - 3.5rem), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 calc(100% - 3.5rem), transparent 100%);
}
@media (max-width: 47.99rem) {
  .mr-journey__track {
    -webkit-mask-image: linear-gradient(90deg, #000 0 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0 calc(100% - 2rem), transparent 100%);
  }
}

/* .mr-centre carried `border-block: 1px solid` from the base layer and
   .mr-journey a `border-top`, so each new saffron-tipped rule sat directly
   beneath an old plain hairline — two lines where there should be one.
   The old borders go; the ::before rules are the dividers now. */
.mr-journey { border-top: none; margin-bottom: 0; }
.mr-centre  { border-block: none; margin-bottom: 0; }

/* .mr-journey::before would otherwise be absent — the journey opens the
   block, so it keeps a plain top rule rather than a stepped one */
.mr-journey::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    var(--brand-saffron) 0 3.5rem,
    rgba(255,255,255,.14) 3.5rem 100%);
}

/* FOLLOW / SUBSCRIBE measured 4.15:1 in saffron on the card ground. One
   step up the ramp clears it and reads brighter as an action label anyway. */
.mr-plat__c { color: var(--brand-saffron-light); }
.mr-plat:hover .mr-plat__c,
.mr-plat:focus-visible .mr-plat__c { color: #FFC170; }

/* ── Darjeeling mosaic: 10-photo bento ── */
.darj__mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:190px;
  grid-auto-flow:dense;
  gap:12px;
  margin-block:var(--s-6,2.5rem);
}
.darj__mosaic .dm{
  position:relative;margin:0;overflow:hidden;
  border-radius:14px;background:#1a1a1a;
}
.darj__mosaic .dm img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.darj__mosaic .dm:hover img{transform:scale(1.06)}
.darj__mosaic .dm figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:28px 14px 11px;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;line-height:1.3;
  color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  pointer-events:none;
}
.darj__mosaic .dm--hero{grid-column:span 2;grid-row:span 2}
.darj__mosaic .dm--hero figcaption{font-size:1rem;padding:40px 18px 14px}
.darj__mosaic .dm--tall{grid-row:span 2}
.darj__mosaic .dm--wide{grid-column:span 2}

@media (max-width:900px){
  .darj__mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:10px}
}
@media (max-width:560px){
  .darj__mosaic{grid-auto-rows:130px;gap:8px}
  .darj__mosaic .dm{border-radius:10px}
  .darj__mosaic .dm figcaption{font-size:.72rem;padding:22px 10px 8px}
  .darj__mosaic .dm--hero figcaption{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .darj__mosaic .dm img{transition:none}
  .darj__mosaic .dm:hover img{transform:none}
}

/* ── Finale: WebP background ── */
.finale{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(420px,62vh,680px);
  display:flex;
  align-items:flex-end;
}
.finale__media{
  position:absolute;inset:0;z-index:-2;
  background-color:#1b1a17;              /* image load hone tak fallback */
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 35%;         /* chehre upar ki taraf rahein */
  transform:scale(1.04);
  transition:transform 8s ease-out;
}
.finale:hover .finale__media{transform:scale(1)}
.finale__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,10,10,.85) 0%,rgba(10,10,10,.45) 45%,rgba(10,10,10,.15) 100%);
}
.finale__grain{position:absolute;inset:0;z-index:-1;pointer-events:none}
.finale__inner{position:relative;width:100%;padding-block:var(--s-8,5rem)}
.finale__inner,.finale__inner h2,.finale__tags{color:#fff}

@media (max-width:700px){
  .finale{min-height:520px}
  .finale__media{background-position:62% center}  /* mobile par main subject centre mein */
}
@media (prefers-reduced-motion:reduce){
  .finale__media{transform:none;transition:none}
}