/* ==========================================================================
   MATANGINI HAZRA  —  "COURAGE IN MOTION"
   Design system: earthen paper, march-line motif, asymmetric editorial grid.
   ========================================================================== */

/* ---------------------------------------------------------------- 01 TOKENS */
:root{
  /* Ground — handmade paper & memory */
  --paper:        #F4EDE2;
  --paper-2:      #EDE3D4;
  --paper-3:      #E4D8C5;
  --paper-edge:   #D8C9B2;

  /* Ink — charcoal-brown, never pure black */
  --ink:          #2A211A;
  --ink-deep:     #1E1712;
  --ink-soft:     #6B5B4C;
  --ink-faint:    #645648;

  /* Earth — clay & terracotta */
  --clay:         #B5643C;
  --clay-deep:    #8E4A2B;
  --clay-pale:    #E5C4AC;

  /* Courage — burnt vermilion. Used sparingly, for moments of intensity. */
  --vermilion:    #9E2B1E;
  --vermilion-lt: #D9694F;

  /* Rice fields — muted moss & olive */
  --moss:         #5E6B45;
  --moss-lt:      #8A9668;
  --moss-pale:    #D7DCC6;

  /* Harvest */
  --harvest:      #B08636;

  /* Semantic */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --rule:         color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-strong:  color-mix(in srgb, var(--ink) 34%, transparent);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --measure: 34rem;
  --band-y:  clamp(4.5rem, 11vw, 10rem);
  --radius:  2px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .7s;

  --header-h: 68px;
}

@media (min-width:900px){ :root{ --header-h: 84px; } }

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Paper grain — a fibre wash laid over the whole ground. */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:.30;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23g)' opacity='0.55'/></svg>");
}
main,header,footer{ position:relative; z-index:1; }

img,svg,video{ max-width:100%; height:auto; display:block; }
img{ background-color:var(--paper-2); }

a{ color:inherit; }

/* Headings ---------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 90;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,1.55rem + 4.4vw,5.4rem); }
h2{ font-size:clamp(1.95rem,1.35rem + 2.75vw,3.55rem); }
h3{ font-size:clamp(1.32rem,1.12rem + 1vw,1.9rem); line-height:1.18; }
h4{ font-size:clamp(1.06rem,1rem + .34vw,1.24rem); line-height:1.32; letter-spacing:-.006em; }

p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

strong{ font-weight:600; color:var(--ink); }

/* Selection & focus ------------------------------------------------------- */
::selection{ background:var(--clay-pale); color:var(--ink-deep); }

:focus-visible{
  outline:3px solid var(--vermilion);
  outline-offset:3px;
  border-radius:1px;
}
.band--ink :focus-visible,
.band--clay :focus-visible,
.site-footer :focus-visible{ outline-color:#F4C9A8; }

/* Skip link --------------------------------------------------------------- */
.skip{
  position:absolute; left:1rem; top:-120px; z-index:999;
  background:var(--ink); color:var(--paper);
  padding:.85rem 1.4rem; font-weight:600; font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* -------------------------------------------------------------- 03 LAYOUT */
.shell{
  width:100%;
  max-width:82rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--wide{ max-width:96rem; }
.shell--narrow{ max-width:58rem; }

.band{ padding-block:var(--band-y); position:relative; }
.band--tight{ padding-block:clamp(3rem,6vw,5.5rem); }

.band--paper2{ background:var(--paper-2); }
.band--paper3{ background:var(--paper-3); }

.band--ink{ background:var(--ink-deep); color:#EFE4D5; }
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink h4{ color:#F7EEE1; }
.band--ink .lede{ color:#DCCDB9; }
.band--ink .label{ color:#D0B492; }
.band--ink .prose p{ color:#DCCDB9; }

.band--clay{ background:var(--clay-deep); color:#FBEDE2; }
.band--clay h2,.band--clay h3,.band--clay h4{ color:#FFF6EC; }
.band--clay .label{ color:#F3D3BA; }
.band--clay .lede{ color:#F2DECD; }

.band--moss{ background:var(--moss-pale); }

/* Editorial asymmetric grid ------------------------------------------------ */
.grid{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); }
@media (min-width:900px){
  .grid-12{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); }
}

/* Field-line rule — the faint horizon of a paddy landscape */
.fieldlines{ position:relative; }
.fieldlines::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 26px,transparent 26px 42px);
}

/* --------------------------------------------------------- 04 TYPE PATTERNS */
.label{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--clay-deep);
  margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.85rem;
  line-height:1.4;
}
.label::before{
  content:""; width:2.25rem; height:2px; flex:none;
  background:currentColor; opacity:.7;
}
.label--plain::before{ display:none; }

.lede{
  font-size:clamp(1.1rem,1.02rem + .55vw,1.45rem);
  line-height:1.56;
  color:var(--ink-soft);
  max-width:40rem;
}
.lede strong{ color:var(--ink); font-weight:500; }

.prose{ max-width:var(--measure); }
.prose--wide{ max-width:44rem; }
.prose p+h3,.prose p+h4,.prose ul+h3,.prose ul+h4{ margin-top:2.2em; }
.prose h3+p,.prose h4+p{ margin-top:0; }
.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.15rem; }
.prose li{ margin-bottom:.55em; padding-left:.3rem; }
.prose li::marker{ color:var(--clay); }

/* Drop treatment for long-form chapter openers */
.prose--drop > p:first-of-type::first-letter{
  font-family:var(--display);
  font-size:3.8em;
  line-height:.8;
  float:left;
  margin:.08em .12em 0 0;
  color:var(--clay-deep);
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}

/* Oversized year / date marker */
.yearmark{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(3.2rem,2rem + 6.6vw,8.5rem);
  line-height:.8;
  letter-spacing:-.045em;
  color:var(--clay);
  font-variation-settings:"SOFT" 10,"WONK" 0;
  display:block;
}
.yearmark--outline{ color:transparent; -webkit-text-stroke:1.5px var(--clay); }
.yearmark--vermilion{ color:var(--vermilion); }
.band--ink .yearmark{ color:var(--vermilion-lt); }
.band--ink .yearmark--outline{ color:transparent; -webkit-text-stroke-color:#C08E6B; }

/* Interpretive editorial statement — explicitly NOT a historical quotation */
.statement{
  font-family:var(--display);
  font-size:clamp(1.65rem,1.15rem + 2.4vw,3.1rem);
  line-height:1.13;
  letter-spacing:-.022em;
  font-weight:500;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  max-width:22ch;
  margin:0;
}
.statement em{ font-style:normal; color:var(--vermilion); }
.band--ink .statement em{ color:var(--vermilion-lt); }

.statement-note{
  margin-top:1.5rem;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink-faint);
  max-width:34rem;
  line-height:1.65;
}
.band--ink .statement-note{ color:#AB9782; }

/* Historical-caution note — used wherever the record is thin or disputed */
.note{
  border-left:3px solid var(--moss);
  background:color-mix(in srgb,var(--moss-pale) 55%,transparent);
  padding:1.1rem 1.35rem;
  font-size:.92rem;
  line-height:1.66;
  color:#464C34;
  margin:2rem 0;
  max-width:42rem;
}
.note :last-child{ margin-bottom:0; }
.note strong{ color:#343926; }
.note--vermilion{
  border-left-color:var(--vermilion);
  background:color-mix(in srgb,var(--clay-pale) 40%,transparent);
  color:#59372B;
}
.note--vermilion strong{ color:var(--vermilion); }
.band--ink .note{
  background:rgba(255,255,255,.055);
  border-left-color:var(--moss-lt);
  color:#C8D1B2;
}
.band--ink .note strong{ color:#E4EAD2; }

/* Sourced quotation — only for verified, attributed material */
.quote{ margin:0; border-top:2px solid var(--rule-strong); padding-top:1.5rem; max-width:38rem; }
.quote blockquote{
  margin:0 0 1rem;
  font-family:var(--display);
  font-size:clamp(1.12rem,1rem + .75vw,1.6rem);
  line-height:1.36;
  font-weight:400;
  font-variation-settings:"SOFT" 34,"WONK" 1;
}
.quote figcaption{
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; line-height:1.6;
}
.band--ink .quote{ border-top-color:rgba(255,255,255,.28); }
.band--ink .quote figcaption{ color:#AB9782; }

/* ---------------------------------------------------------- 05 IMAGE PLATES
   Every plate uses object-fit:contain over a paper mat, so no photograph is
   ever cropped and no face is ever cut at any breakpoint.
   ------------------------------------------------------------------------ */
.plate{ margin:0; position:relative; }

.plate__frame{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  padding:clamp(.55rem,1.4vw,1rem);
  overflow:hidden;
}
.plate__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(42,33,26,.05), inset 0 0 60px rgba(42,33,26,.06);
}
.plate__frame img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}
/* Fixed-height variants keep rhythm without ever cropping the subject */
.plate--cap .plate__frame img{ max-height:min(78vh,640px); width:auto; margin-inline:auto; }
.plate--cap-lg .plate__frame img{ max-height:min(82vh,780px); width:auto; margin-inline:auto; }

.plate--ink .plate__frame{ background:#2A211A; border-color:#3E3025; }
.plate--moss .plate__frame{ background:var(--moss-pale); border-color:#BFC7A9; }
.plate--clay .plate__frame{ background:var(--clay-pale); border-color:#D3AC91; }

.plate__caption{
  margin-top:.9rem;
  font-size:.78rem;
  line-height:1.6;
  color:var(--ink-faint);
  max-width:32rem;
  display:block;
}
.plate__caption b{
  display:block; color:var(--clay-deep); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; font-size:.68rem; margin-bottom:.3rem;
}
.band--ink .plate__caption{ color:#A8947E; }
.band--ink .plate__caption b{ color:#D0B492; }

/* Offset accent behind a plate — the "clay shadow".
   Drawn on the FRAME so it can never overlap the caption below it. */
.plate--offset .plate__frame{ box-shadow:14px 14px 0 0 var(--clay-pale); }
.plate--offset-moss .plate__frame{ box-shadow:14px 14px 0 0 var(--moss-pale); }
@media (max-width:520px){
  .plate--offset .plate__frame,
  .plate--offset-moss .plate__frame{ box-shadow:8px 8px 0 0 var(--clay-pale); }
}

/* -------------------------------------------------------------- 06 BUTTONS */
.btn{
  --btn-fg:#F7EEE1; --btn-bg:var(--ink);
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1rem 1.7rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--body); font-size:.8rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--btn-bg); cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease);
  line-height:1.25; text-align:left;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--vermilion);
  transform:translateX(-101%);
  transition:transform .45s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateX(0); }
.btn:hover,.btn:focus-visible{ color:#FFF3E8; border-color:var(--vermilion); }
.btn__arrow{ flex:none; transition:transform .45s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--vermilion{ --btn-bg:var(--vermilion); }
.btn--vermilion::before{ background:var(--ink); }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--rule-strong);
}
.btn--ghost:hover,.btn--ghost:focus-visible{ color:#FFF3E8; }
.band--ink .btn--ghost{ --btn-fg:#F2E7D9; border-color:rgba(255,255,255,.3); }
.band--clay .btn--ghost{ --btn-fg:#FFF6EC; border-color:rgba(255,255,255,.38); }
.band--clay .btn--ghost::before{ background:var(--ink-deep); }

/* Inline text link with a drawn underline */
.tlink{
  color:var(--clay-deep);
  text-decoration:none;
  font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .35s var(--ease-out), color .2s var(--ease);
  padding-bottom:1px;
}
.tlink:hover,.tlink:focus-visible{ color:var(--vermilion); background-size:0% 1px; }
.band--ink .tlink{ color:#E0A882; }
.band--ink .tlink:hover{ color:#F0C2A2; }

/* Arrow-cue link */
.arrowlink{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.78rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; text-decoration:none;
  color:var(--vermilion); line-height:1.4;
}
.arrowlink svg{ flex:none; transition:transform .4s var(--ease-out); }
.arrowlink:hover svg,.arrowlink:focus-visible svg{ transform:translateX(6px); }
.arrowlink:hover{ color:var(--ink); }
.band--ink .arrowlink{ color:var(--vermilion-lt); }
.band--ink .arrowlink:hover{ color:#F7EEE1; }

/* ------------------------------------------------------- 07 THE MARCH LINE
   The recurring motif: a route drawn forward as the reader scrolls.
   ------------------------------------------------------------------------ */
.marchline{ display:block; width:100%; height:auto; overflow:visible; }
.marchline path{
  fill:none;
  stroke:var(--clay);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:var(--len,2000);
  stroke-dashoffset:var(--len,2000);
  transition:stroke-dashoffset 1.8s var(--ease-out);
}
.marchline.is-drawn path{ stroke-dashoffset:0; }
.marchline circle{
  fill:var(--paper); stroke:var(--clay); stroke-width:2;
  opacity:0; transition:opacity .5s var(--ease) .5s;
}
.marchline.is-drawn circle{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .marchline path{ stroke-dashoffset:0; transition:none; }
  .marchline circle{ opacity:1; transition:none; }
}

/* ------------------------------------------------------------- 08 REVEALS */
.js .reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .reveal-x{ opacity:0; transform:translateX(-30px); }
.reveal-x.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .reveal-mask{ clip-path:inset(0 100% 0 0); }
.reveal-mask.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--ease-out);
  transition-delay:var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-x,.reveal-mask{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
}

/* ================================================================ 09 HEADER */
.site-header{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--rule);
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  box-shadow:0 10px 30px -24px rgba(42,33,26,.55);
}

.site-header__inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}

/* Wordmark ---------------------------------------------------------------- */
.brand{
  display:inline-flex; align-items:center; gap:.75rem;
  text-decoration:none; color:var(--ink); flex:none;
}
.brand__mark{ flex:none; }
.brand__mark .mk-line{
  stroke:var(--vermilion); stroke-width:2.2; fill:none; stroke-linecap:round;
}
.brand__mark .mk-flag{ fill:var(--vermilion); }
.brand__mark .mk-pole{ stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; }
.brand:hover .mk-flag{ fill:var(--clay); }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1rem,.95rem + .25vw,1.16rem);
  letter-spacing:-.01em; font-variation-settings:"SOFT" 20,"WONK" 1;
}
.brand__years{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--clay-deep); font-weight:600; margin-top:.32rem;
}

/* Desktop nav ------------------------------------------------------------- */
.nav{ display:none; }
.site-header__navrow{
  display:none;
  border-top:1px solid var(--rule);
  overflow:hidden;
  height:52px;
  transition:height .4s var(--ease-out), opacity .3s var(--ease);
}
@media (min-width:1200px){ .site-header__navrow{ display:block; } }
.site-header.is-stuck .site-header__navrow{ height:0; opacity:0; }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(.5rem,1.1vw,1.4rem); height:52px;
}
.nav__link{
  position:relative;
  text-decoration:none;
  font-size:.7rem; font-weight:600; letter-spacing:.085em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:.5rem 0;
  transition:color .25s var(--ease);
  white-space:nowrap;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--vermilion);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease-out);
}
.nav__link:hover,.nav__link:focus-visible{ color:var(--ink); }
.nav__link:hover::after,.nav__link:focus-visible::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--vermilion); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

/* Menu toggle ------------------------------------------------------------- */
.navtoggle{
  display:inline-flex; align-items:center; gap:.7rem;
  background:none; border:1px solid var(--rule-strong);
  padding:.62rem .95rem; cursor:pointer;
  font-family:var(--body); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.navtoggle:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.navtoggle__bars{ display:block; width:18px; height:12px; position:relative; flex:none; }
.navtoggle__bars span{
  position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform .35s var(--ease), opacity .2s var(--ease);
}
.navtoggle__bars span:nth-child(1){ top:0; }
.navtoggle__bars span:nth-child(2){ top:5px; }
.navtoggle__bars span:nth-child(3){ top:10px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Drawer ------------------------------------------------------------------ */
.drawer{
  position:fixed; inset:0; z-index:200;
  visibility:hidden;
}
.drawer.is-open{ visibility:visible; }
.drawer__scrim{
  position:absolute; inset:0;
  background:rgba(30,23,18,.55);
  opacity:0; transition:opacity .4s var(--ease);
  border:0; padding:0; width:100%; cursor:pointer;
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; inset-block:0; right:0;
  width:min(30rem,100%);
  background:var(--paper);
  border-left:1px solid var(--paper-edge);
  transform:translateX(100%);
  transition:transform .5s var(--ease-out);
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:-30px 0 70px -40px rgba(30,23,18,.7);
}
.drawer.is-open .drawer__panel{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .drawer__panel{ transition:none; }
  .drawer__scrim{ transition:none; }
}
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--gutter);
  border-bottom:1px solid var(--rule);
  min-height:var(--header-h);
}
.drawer__title{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--clay-deep); font-weight:600;
}
.drawer__close{
  background:none; border:1px solid var(--rule-strong);
  width:40px; height:40px; cursor:pointer; color:var(--ink);
  display:inline-grid; place-items:center; flex:none;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.drawer__close:hover{ background:var(--ink); color:var(--paper); }
.drawer__nav{ padding:.5rem 0 2rem; }
.drawer__link{
  display:flex; align-items:baseline; gap:1rem;
  padding:.92rem var(--gutter);
  text-decoration:none; color:var(--ink);
  font-family:var(--display); font-size:1.32rem; font-weight:500;
  font-variation-settings:"SOFT" 24,"WONK" 1;
  border-bottom:1px solid var(--rule);
  transition:background-color .3s var(--ease), padding-left .35s var(--ease-out), color .25s var(--ease);
  min-height:56px;
}
.drawer__link span{
  font-family:var(--body); font-size:.66rem; font-weight:600;
  letter-spacing:.14em; color:var(--clay); flex:none; width:1.9rem;
}
.drawer__link:hover,.drawer__link:focus-visible{
  background:var(--paper-2); padding-left:calc(var(--gutter) + .5rem);
}
.drawer__link[aria-current="page"]{ color:var(--vermilion); }
.drawer__link[aria-current="page"] span{ color:var(--vermilion); }
.drawer__foot{
  margin-top:auto; padding:1.6rem var(--gutter) 2rem;
  border-top:1px solid var(--rule); background:var(--paper-2);
}
.drawer__foot a{
  display:block; text-decoration:none; color:var(--ink);
  font-size:.95rem; margin-bottom:.5rem; font-weight:500;
}
.drawer__foot a:hover{ color:var(--vermilion); }

body.nav-open{ overflow:hidden; }

/* Scroll progress rail ----------------------------------------------------- */
.progressbar{
  position:fixed; top:0; left:0; height:3px; z-index:150;
  width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--clay),var(--vermilion));
  pointer-events:none;
}

/* ================================================================= 10 HERO */
.hero{ position:relative; padding-block:clamp(2.5rem,6vw,5rem) clamp(3.5rem,8vw,7rem); overflow:hidden; }

.hero__grid{ display:grid; gap:clamp(2rem,4vw,3rem); align-items:center; }
@media (min-width:960px){
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2rem,4vw,4.5rem); }
  .hero--flip .hero__grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); }
}

.hero__eyebrow{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--clay-deep); font-weight:600; margin:0 0 1.5rem;
}
.hero__title{
  margin:0 0 1.1rem;
  font-size:clamp(2.9rem,1.5rem + 7.4vw,7.2rem);
  line-height:.9;
  letter-spacing:-.035em;
  font-weight:600;
  font-variation-settings:"SOFT" 18,"WONK" 1,"opsz" 144;
}
.hero__title .ln{ display:block; }
.hero__title .ln--indent{ padding-left:.14em; }
.hero__years{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--body); font-size:.9rem; font-weight:600;
  letter-spacing:.24em; color:var(--vermilion);
  margin:0 0 1.9rem;
}
.hero__years::after{
  content:""; height:1px; flex:1 1 auto; max-width:8rem;
  background:var(--vermilion); opacity:.45;
}
.hero__stand{
  font-size:clamp(1.05rem,.98rem + .5vw,1.32rem);
  line-height:1.55; color:var(--ink-soft); max-width:34rem; margin:0 0 2.4rem;
}
.hero__stand strong{ color:var(--ink); font-weight:500; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* Hero portrait plate */
.hero__figure{ margin:0; position:relative; }
.hero__figure .plate__frame{ background:var(--paper-2); }
.hero__figure img{ width:100%; height:auto; }

/* Ticks along the hero — small historical markers */
.hero__ticks{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3.4rem);
  margin-top:clamp(2.6rem,6vw,4.5rem);
  padding-top:1.8rem; border-top:1px solid var(--rule);
}
.hero__tick{ min-width:8.5rem; }
.hero__tick b{
  display:block; font-family:var(--display); font-size:1.6rem; font-weight:600;
  color:var(--clay-deep); line-height:1; margin-bottom:.45rem;
  font-variation-settings:"SOFT" 16;
}
.hero__tick span{
  display:block; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; line-height:1.5;
}

/* Compact page hero (interior pages) --------------------------------------- */
.phero{ position:relative; padding-block:clamp(2.75rem,6vw,4.75rem) clamp(2.5rem,5vw,4rem); }
.phero__inner{ display:grid; gap:clamp(1.8rem,4vw,3.4rem); align-items:end; }
@media (min-width:900px){
  .phero__inner{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  .phero--even .phero__inner{ grid-template-columns:1fr 1fr; }
}
.phero__title{ margin:0 0 1.1rem; }
.phero__chapter{
  font-family:var(--display);
  font-size:clamp(3rem,2rem + 5vw,6rem);
  line-height:.8; color:var(--clay-pale);
  font-weight:600; letter-spacing:-.04em;
  display:block; margin-bottom:.7rem;
}

/* Breadcrumb -------------------------------------------------------------- */
.crumbs{ padding-block:1.15rem; border-bottom:1px solid var(--rule); }
.crumbs ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.crumbs li{ display:flex; align-items:center; gap:.5rem; color:var(--ink-faint); }
.crumbs li+li::before{ content:"/"; color:var(--paper-edge); }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--vermilion); }
.crumbs [aria-current="page"]{ color:var(--clay-deep); }

/* ============================================================= 11 CHAPTERS */
.chapters{ display:grid; gap:0; }
.chapter{
  display:grid; gap:clamp(1.3rem,3.5vw,3rem);
  padding-block:clamp(2.6rem,6vw,4.5rem);
  border-top:1px solid var(--rule);
  align-items:start;
}
.chapter:last-child{ border-bottom:1px solid var(--rule); }
@media (min-width:860px){
  .chapter{ grid-template-columns:8rem minmax(0,1fr) minmax(0,.92fr); }
  .chapter--noimg{ grid-template-columns:8rem minmax(0,1fr); }
}
.chapter__num{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem);
  line-height:.85; color:transparent;
  -webkit-text-stroke:1.4px var(--clay);
  letter-spacing:-.03em;
}
.band--ink .chapter__num{ -webkit-text-stroke-color:#B8825C; }
.band--ink .chapter{ border-color:rgba(255,255,255,.14); }
.chapter__body h3{ margin-bottom:.7rem; }

/* Journey path — the scroll-drawn route of Section 4 ----------------------- */
.journey{ position:relative; }
.journey__track{
  position:absolute; left:calc(1.1rem - 1px); top:0; bottom:0; width:2px;
  background:var(--rule); z-index:0;
}
.journey__fill{
  position:absolute; left:calc(1.1rem - 1px); top:0; width:2px;
  background:linear-gradient(180deg,var(--clay),var(--vermilion));
  height:0; z-index:1; transition:height .18s linear;
}
@media (min-width:900px){
  .journey__track,.journey__fill{ left:calc(50% - 1px); }
}
.journey__steps{ position:relative; z-index:2; display:grid; gap:clamp(2rem,5vw,3.6rem); margin:0; padding:0; list-style:none; }
.journey__step{ position:relative; padding-left:3.4rem; }
@media (min-width:900px){
  .journey__step{ width:calc(50% - 3rem); padding-left:0; }
  .journey__step:nth-child(odd){ margin-right:auto; text-align:right; padding-right:.5rem; }
  .journey__step:nth-child(even){ margin-left:auto; padding-left:.5rem; }
}
.journey__dot{
  position:absolute; top:.45rem; left:0;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--paper); border:2px solid var(--clay);
  display:grid; place-items:center;
  font-family:var(--body); font-size:.68rem; font-weight:700; color:var(--clay-deep);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
  z-index:3;
}
@media (min-width:900px){
  .journey__step:nth-child(odd) .journey__dot{ left:auto; right:-4.1rem; }
  .journey__step:nth-child(even) .journey__dot{ left:-4.1rem; }
}
.journey__step.is-in .journey__dot{
  background:var(--vermilion); border-color:var(--vermilion); color:#FFF3E8; transform:scale(1.08);
}
.journey__step h3{ margin-bottom:.55rem; font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem); }
.journey__step p{ color:var(--ink-soft); max-width:30rem; margin-bottom:0; }
@media (min-width:900px){
  .journey__step:nth-child(odd) p{ margin-left:auto; }
}
.journey__when{
  display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay-deep); font-weight:600; margin-bottom:.5rem;
}

/* ============================================== 12 DIMENSION / FACT WEAVES */
.weave{ display:grid; gap:0; }
.weave__row{
  display:grid; gap:clamp(.6rem,2vw,2.5rem);
  padding-block:clamp(1.5rem,3.5vw,2.4rem);
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.weave__row:first-child{ border-top:1px solid var(--rule); }
@media (min-width:820px){
  .weave__row{ grid-template-columns:3.6rem minmax(0,.9fr) minmax(0,1.2fr); }
}
.weave__idx{
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  color:var(--clay-deep); font-variant-numeric:tabular-nums;
}
.weave__key{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);
  line-height:1.14; letter-spacing:-.018em;
  font-variation-settings:"SOFT" 24,"WONK" 1;
  margin:0;
}
.weave__val{ color:var(--ink-soft); margin:0; font-size:.985rem; }
.weave__row:hover .weave__key{ color:var(--vermilion); transition:color .3s var(--ease); }
.band--ink .weave__row{ border-color:rgba(255,255,255,.14); }
.band--ink .weave__val{ color:#CDBDA8; }

/* Fact strip -------------------------------------------------------------- */
/* auto-fit so the strip reflows to its CONTAINER, not the viewport —
   these often sit inside a narrow editorial column. */
.facts{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));
}
/* Collapsing cell borders: an incomplete final row leaves no filled empty cell. */
.fact{
  background:var(--paper); padding:clamp(1.4rem,3vw,2.1rem);
  border:1px solid var(--rule-strong); margin:0 -1px -1px 0;
}
.band--paper2 .fact{ background:var(--paper-2); }
.band--ink .fact{ border-color:rgba(255,255,255,.18); }
.band--ink .fact{ background:var(--ink-deep); }
.fact b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem); line-height:.95;
  color:var(--clay-deep); letter-spacing:-.03em; margin-bottom:.6rem;
  font-variation-settings:"SOFT" 14;
}
.band--ink .fact b{ color:var(--vermilion-lt); }
.fact span{ display:block; font-size:.88rem; line-height:1.6; color:var(--ink-soft); }
.band--ink .fact span{ color:#C6B7A3; }

/* ============================================================ 13 CARD SETS */
.cards{ display:grid; gap:clamp(1.1rem,2.4vw,1.75rem); }
.cards--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.cards--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }

.card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  padding:clamp(1.35rem,3vw,2rem);
  display:flex; flex-direction:column; gap:.8rem;
  position:relative; transition:border-color .35s var(--ease), transform .45s var(--ease-out);
}
.card:hover{ border-color:var(--clay); }
.band--paper2 .card{ background:var(--paper); }
.card__k{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--clay-deep);
}
.card h3,.card h4{ margin:0; font-size:clamp(1.05rem,1rem + .35vw,1.24rem); }
.card p{ color:var(--ink-soft); margin:0; font-size:.95rem; }
.card--linked{ text-decoration:none; color:inherit; }
.card--linked:hover{ transform:translateY(-3px); }

/* Chapter navigator (Explore the Journey) ---------------------------------- */
.routes{ list-style:none; margin:0; padding:0; display:grid; }
.routes li{ border-top:1px solid var(--rule); }
.routes li:last-child{ border-bottom:1px solid var(--rule); }
.route{
  display:grid; gap:.35rem 1.4rem; align-items:center;
  grid-template-columns:3.2rem minmax(0,1fr) auto;
  padding:clamp(1.1rem,2.6vw,1.7rem) 0;
  text-decoration:none; color:inherit;
  transition:padding-left .4s var(--ease-out), color .3s var(--ease);
  position:relative;
}
.route::before{
  content:""; position:absolute; inset-block:0; left:0; width:0;
  background:color-mix(in srgb,var(--clay-pale) 45%,transparent);
  transition:width .45s var(--ease-out); z-index:-1;
}
.route:hover,.route:focus-visible{ padding-left:1.15rem; }
.route:hover::before,.route:focus-visible::before{ width:100%; }
.route__num{
  font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; color:var(--clay-deep); font-variant-numeric:tabular-nums;
}
.route__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem,1.15rem + 1.5vw,2.4rem);
  line-height:1.08; letter-spacing:-.025em; margin:0;
  font-variation-settings:"SOFT" 22,"WONK" 1;
}
.route__meta{
  grid-column:2; font-size:.86rem; color:var(--ink-soft); margin:0; max-width:38rem;
}
.route__go{ grid-row:1; grid-column:3; color:var(--vermilion); transition:transform .4s var(--ease-out); }
.route:hover .route__go{ transform:translateX(7px); }
@media (max-width:640px){
  .route{ grid-template-columns:2.6rem minmax(0,1fr); }
  .route__go{ display:none; }
}
.band--ink .routes li{ border-color:rgba(255,255,255,.16); }
.band--ink .route::before{ background:rgba(255,255,255,.06); }
.band--ink .route__meta{ color:#BFAF9B; }

/* ============================================================= 14 TIMELINE */
.tl{ position:relative; }
.tl__rail{
  position:absolute; top:0; bottom:0; left:calc(1.35rem - 1px); width:2px;
  background:var(--rule);
}
.tl__railfill{
  position:absolute; top:0; left:calc(1.35rem - 1px); width:2px; height:0;
  background:linear-gradient(180deg,var(--moss),var(--clay) 55%,var(--vermilion));
  transition:height .18s linear;
}
@media (min-width:1000px){
  .tl__rail,.tl__railfill{ left:calc(9.5rem - 1px); }
}
.tl__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.6rem); position:relative; }

.tl__item{ position:relative; padding-left:4.4rem; }
@media (min-width:1000px){ .tl__item{ padding-left:12.5rem; } }

.tl__dot{
  position:absolute; left:0; top:1.15rem;
  width:2.7rem; height:2.7rem; border-radius:50%;
  background:var(--paper); border:2px solid var(--clay);
  display:grid; place-items:center; z-index:2;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.tl__dot i{ width:.55rem; height:.55rem; border-radius:50%; background:var(--clay); display:block; transition:background-color .4s var(--ease); }
@media (min-width:1000px){ .tl__dot{ left:8.15rem; } }
.tl__item.is-in .tl__dot{ background:var(--vermilion); border-color:var(--vermilion); transform:scale(1.06); }
.tl__item.is-in .tl__dot i{ background:#FFF3E8; }

.tl__year{
  position:absolute; left:0; top:.9rem;
  display:none;
  font-family:var(--display); font-weight:600;
  font-size:1.9rem; line-height:1; color:var(--clay-deep);
  letter-spacing:-.02em; width:7.2rem; text-align:right;
  font-variation-settings:"SOFT" 16;
}
@media (min-width:1000px){ .tl__year{ display:block; } }

.tl__panel{
  border:1px solid var(--paper-edge); background:var(--paper);
  transition:border-color .35s var(--ease);
}
.tl__item.is-open .tl__panel{ border-color:var(--clay); }

.tl__btn{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:clamp(1.1rem,2.6vw,1.5rem);
  display:grid; gap:.5rem 1.2rem; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; font-family:inherit; color:inherit;
}
.tl__btn:hover .tl__head{ color:var(--vermilion); }
.tl__when{
  grid-column:1; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--clay-deep); margin:0;
}
.tl__head{
  grid-column:1; margin:0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,1.02rem + .7vw,1.55rem); line-height:1.16;
  letter-spacing:-.018em; transition:color .3s var(--ease);
  font-variation-settings:"SOFT" 22,"WONK" 1;
}
.tl__chev{
  grid-column:2; grid-row:1 / span 2; flex:none;
  width:2.1rem; height:2.1rem; border:1px solid var(--rule-strong);
  display:grid; place-items:center; color:var(--clay-deep);
  transition:transform .4s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease);
}
.tl__btn[aria-expanded="true"] .tl__chev{ transform:rotate(180deg); background:var(--clay-deep); color:#FBEDE2; border-color:var(--clay-deep); }

.tl__drawer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out); }
.tl__item.is-open .tl__drawer{ grid-template-rows:1fr; }
.tl__drawerinner{ overflow:hidden; }
.tl__content{
  padding:0 clamp(1.1rem,2.6vw,1.5rem) clamp(1.3rem,2.8vw,1.7rem);
  display:grid; gap:1.4rem;
}
@media (min-width:760px){ .tl__content--img{ grid-template-columns:minmax(0,1fr) 13rem; align-items:start; } }
.tl__content p{ color:var(--ink-soft); margin-bottom:1em; font-size:.96rem; }
.tl__content p:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion:reduce){ .tl__drawer{ transition:none; } }

/* Timeline scale switch (horizontal ribbon on wide screens) ----------------- */
.tlscale{
  display:none; gap:0; margin-bottom:clamp(2rem,5vw,3.5rem);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
@media (min-width:1000px){ .tlscale{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; } }
.tlscale__step{
  padding:1.1rem .9rem; text-align:left; background:none; border:0; cursor:pointer;
  border-right:1px solid var(--rule); font-family:inherit; color:var(--ink-soft);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.tlscale__step:last-child{ border-right:0; }
.tlscale__step:hover{ background:var(--paper-2); color:var(--ink); }
.tlscale__step b{
  display:block; font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--clay-deep); line-height:1; margin-bottom:.4rem; font-variation-settings:"SOFT" 16;
}
.tlscale__step span{ display:block; font-size:.74rem; letter-spacing:.08em; line-height:1.5; }

/* ============================================================== 15 GALLERY */
.gfilter{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-bottom:clamp(1.8rem,4vw,2.8rem);
}
.gfilter__btn{
  background:none; border:1px solid var(--rule-strong); cursor:pointer;
  padding:.62rem 1.05rem; font-family:var(--body);
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); transition:all .3s var(--ease); line-height:1.3;
  min-height:44px;
}
.gfilter__btn:hover{ border-color:var(--clay); color:var(--ink); }
.gfilter__btn[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.gmasonry{ display:grid; gap:clamp(1rem,2.2vw,1.6rem); grid-template-columns:1fr; }
@media (min-width:620px){ .gmasonry{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .gmasonry{ grid-template-columns:repeat(3,1fr); } }

.gitem{ margin:0; }
.gitem[hidden]{ display:none; }
.gitem__btn{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  text-align:left; font-family:inherit; color:inherit;
}
.gitem__shell{
  background:var(--paper-2); border:1px solid var(--paper-edge);
  padding:clamp(.6rem,1.4vw,.9rem); position:relative; overflow:hidden;
  display:grid; place-items:center;
  min-height:15rem;
  transition:border-color .35s var(--ease);
}
.gitem__btn:hover .gitem__shell,.gitem__btn:focus-visible .gitem__shell{ border-color:var(--clay); }
.gitem__shell img{
  width:auto; max-width:100%;
  max-height:26rem; height:auto;
  object-fit:contain;
  transition:transform .6s var(--ease-out);
}
.gitem__btn:hover .gitem__shell img{ transform:scale(1.025); }
.gitem__zoom{
  position:absolute; right:.9rem; bottom:.9rem;
  width:2.4rem; height:2.4rem; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease-out);
}
.gitem__btn:hover .gitem__zoom,.gitem__btn:focus-visible .gitem__zoom{ opacity:1; transform:none; }
.gitem figcaption{ margin-top:.85rem; }
.gitem__cat{
  display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay-deep); font-weight:700; margin-bottom:.32rem;
}
.gitem__cap{ display:block; font-size:.88rem; line-height:1.6; color:var(--ink-soft); }

.gempty{ padding:3rem 0; color:var(--ink-faint); font-size:.95rem; }

/* Lightbox ---------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(24,18,14,.94);
  display:grid; grid-template-rows:auto 1fr auto;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--gutter); color:#E6D8C6;
}
.lightbox__count{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#B9A48C; }
.lightbox__close{
  background:none; border:1px solid rgba(255,255,255,.28); color:#F2E7D9;
  width:44px; height:44px; cursor:pointer; display:grid; place-items:center;
  transition:background-color .3s var(--ease);
}
.lightbox__close:hover{ background:rgba(255,255,255,.12); }
.lightbox__stage{
  display:grid; place-items:center; padding:0 var(--gutter); min-height:0;
}
.lightbox__stage img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; background:transparent;
}
.lightbox__foot{ padding:1rem var(--gutter) 1.6rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.lightbox__meta{ max-width:44rem; }
.lightbox__meta b{
  display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:#C89A72; font-weight:700; margin-bottom:.4rem;
}
.lightbox__meta span{ display:block; font-size:.92rem; line-height:1.6; color:#D8C9B6; }
.lightbox__nav{ display:flex; gap:.6rem; flex:none; }
.lightbox__nav button{
  background:none; border:1px solid rgba(255,255,255,.28); color:#F2E7D9;
  width:48px; height:48px; cursor:pointer; display:grid; place-items:center;
  transition:background-color .3s var(--ease);
}
.lightbox__nav button:hover{ background:rgba(255,255,255,.12); }
body.lb-open{ overflow:hidden; }

/* ================================================================ 16 FORMS */
.formwrap{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  padding:clamp(1.5rem,4vw,2.75rem);
}
.form{ display:grid; gap:1.35rem; }
@media (min-width:680px){
  .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
}
.field{ display:grid; gap:.5rem; }
.field label{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.field label .req{ color:var(--vermilion); margin-left:.2rem; }
.field input,.field textarea,.field select{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  border-bottom:2px solid var(--rule-strong);
  padding:.85rem .95rem;
  width:100%; min-height:48px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B5B4C' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem;
}
.field textarea{ resize:vertical; min-height:9.5rem; line-height:1.65; }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--clay); }
.field input:focus,.field textarea:focus,.field select:focus{
  background:var(--paper); border-bottom-color:var(--vermilion);
}
.field .hint{ font-size:.78rem; color:var(--ink-faint); line-height:1.5; }

.field .err{
  font-size:.82rem; color:var(--vermilion); font-weight:600;
  display:none; align-items:center; gap:.4rem; line-height:1.5;
}
.field.is-invalid .err{ display:flex; }
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{
  border-color:var(--vermilion); border-bottom-color:var(--vermilion);
  background:color-mix(in srgb,var(--clay-pale) 26%,var(--paper));
}

.form__status{ min-height:1px; }
.form__status[data-state="ok"]{
  border-left:3px solid var(--moss);
  background:color-mix(in srgb,var(--moss-pale) 60%,transparent);
  padding:1.1rem 1.3rem; color:#3F4630; font-size:.95rem; line-height:1.6;
}
.form__status[data-state="err"]{
  border-left:3px solid var(--vermilion);
  background:color-mix(in srgb,var(--clay-pale) 40%,transparent);
  padding:1.1rem 1.3rem; color:#59372B; font-size:.95rem; line-height:1.6;
}

/* Contact detail rows ------------------------------------------------------ */
.contactlist{ list-style:none; margin:0; padding:0; display:grid; }
.contactlist li{ border-top:1px solid var(--rule); }
.contactlist li:last-child{ border-bottom:1px solid var(--rule); }
.contactlist a,.contactlist .cstatic{
  display:grid; gap:.3rem; padding:1.35rem 0; text-decoration:none; color:inherit;
  grid-template-columns:2.4rem minmax(0,1fr); align-items:start;
  transition:padding-left .35s var(--ease-out);
}
.contactlist a:hover{ padding-left:.7rem; }
.contactlist svg{ grid-row:1 / span 2; color:var(--clay); margin-top:.3rem; }
.contactlist b{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
}
.contactlist span{
  font-family:var(--display); font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  font-weight:600; letter-spacing:-.015em; line-height:1.25;
  font-variation-settings:"SOFT" 22,"WONK" 1; word-break:break-word;
}
.contactlist a:hover span{ color:var(--vermilion); }

/* ================================================================ 17 LEARN */
.acc{ border-top:1px solid var(--rule); }
.acc__item{ border-bottom:1px solid var(--rule); }
.acc__btn{
  width:100%; background:none; border:0; cursor:pointer; font-family:inherit; color:inherit;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; text-align:left;
  transition:color .3s var(--ease);
}
.acc__btn:hover{ color:var(--vermilion); }
.acc__btn h3{
  margin:0; font-size:clamp(1.08rem,1rem + .55vw,1.42rem);
  font-weight:600; line-height:1.24;
}
.acc__sign{ flex:none; position:relative; width:1.15rem; height:1.15rem; }
.acc__sign::before,.acc__sign::after{
  content:""; position:absolute; background:var(--clay-deep);
  transition:transform .4s var(--ease-out), opacity .3s var(--ease);
}
.acc__sign::before{ inset:calc(50% - 1px) 0 auto 0; height:2px; }
.acc__sign::after{ inset:0 calc(50% - 1px) 0 auto; width:2px; }
.acc__btn[aria-expanded="true"] .acc__sign::after{ transform:scaleY(0); opacity:0; }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__body{ padding-bottom:1.7rem; max-width:44rem; }
.acc__body p{ color:var(--ink-soft); }
@media (prefers-reduced-motion:reduce){ .acc__panel{ transition:none; } }

/* Glossary ---------------------------------------------------------------- */
.glossary{ display:grid; gap:0; margin:0; }
.glossary div{
  display:grid; gap:.3rem 2rem; padding:1.25rem 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:760px){ .glossary div{ grid-template-columns:14rem minmax(0,1fr); } }
.glossary dt{
  font-family:var(--display); font-weight:600;
  font-size:1.08rem; letter-spacing:-.01em; color:var(--clay-deep);
  font-variation-settings:"SOFT" 22,"WONK" 1;
}
.glossary dd{ margin:0; color:var(--ink-soft); font-size:.96rem; }

/* Fact vs retelling table -------------------------------------------------- */
.vs{ display:grid; gap:0; }
@media (min-width:820px){ .vs{ grid-template-columns:1fr 1fr; } }
.vs__cell{
  background:var(--paper); padding:clamp(1.3rem,3vw,1.9rem);
  border:1px solid var(--rule-strong); margin:0 -1px -1px 0;
}
.band--paper2 .vs__cell{ background:var(--paper); }
.vs__cell h3,.vs__cell h4{ margin-bottom:.65rem; font-size:clamp(1.02rem,.98rem + .35vw,1.24rem); }
.vs__cell p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
.vs__tag{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  margin-bottom:.9rem;
}
.vs__tag--pop{ color:var(--clay-deep); }
.vs__tag--rec{ color:var(--moss); }

/* Question list ----------------------------------------------------------- */
.qlist{ list-style:none; margin:0; padding:0; counter-reset:q; display:grid; gap:0; }
.qlist li{
  counter-increment:q;
  display:grid; grid-template-columns:2.8rem minmax(0,1fr); gap:1rem;
  padding:1.25rem 0; border-bottom:1px solid var(--rule);
  color:var(--ink-soft);
}
.qlist li:first-child{ border-top:1px solid var(--rule); }
.qlist li::before{
  content:counter(q,decimal-leading-zero);
  font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--clay); padding-top:.35rem;
}

/* ============================================================== 18 LEGACY */
.places{ display:grid; gap:0; }
.place{
  display:grid; gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(2rem,5vw,3.4rem);
  border-top:1px solid var(--rule); align-items:center;
}
.place:last-child{ border-bottom:1px solid var(--rule); }
@media (min-width:880px){
  .place{ grid-template-columns:minmax(0,1fr) 15rem; }
  .place--img{ grid-template-columns:15rem minmax(0,1fr); }
  .place--img .place__media{ order:-1; }
}
.place__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.55rem,1.2rem + 1.9vw,2.7rem);
  line-height:1.08; letter-spacing:-.028em; margin:0 0 .5rem;
  font-variation-settings:"SOFT" 22,"WONK" 1;
}
.place__where{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay-deep); font-weight:700; margin:0 0 .9rem; display:block;
}
.place__body{ color:var(--ink-soft); max-width:40rem; }
.place__body p{ margin-bottom:.9em; }

/* ============================================================== 19 FOOTER */
.site-footer{
  background:var(--ink-deep);
  color:#CDBDA8;
  padding-top:clamp(3.5rem,8vw,6rem);
  position:relative; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--moss),var(--harvest) 42%,var(--clay) 72%,var(--vermilion));
}
.site-footer a{ color:inherit; }

.footer__top{ display:grid; gap:clamp(2.2rem,5vw,3.5rem); padding-bottom:clamp(2.5rem,6vw,4rem); }
@media (min-width:900px){ .footer__top{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); } }

.footer__mark{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem); line-height:.98;
  letter-spacing:-.03em; color:#F7EEE1; margin:0 0 .8rem;
  font-variation-settings:"SOFT" 20,"WONK" 1;
}
.footer__years{
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--vermilion-lt); font-weight:600; margin:0 0 1.4rem;
}
.footer__blurb{ font-size:.95rem; line-height:1.7; max-width:30rem; color:#B7A794; margin:0; }

.footer__h{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:#D0B492; font-weight:700; margin:0 0 1.25rem;
}
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.footer__list a{
  text-decoration:none; font-size:.9rem; color:#C4B3A0;
  transition:color .25s var(--ease), padding-left .3s var(--ease-out);
  display:inline-block; padding:.15rem 0;
}
.footer__list a:hover{ color:#F7EEE1; padding-left:.4rem; }

.footer__contact{ display:grid; gap:1rem; margin-bottom:1.75rem; }
.footer__contact a{
  text-decoration:none; display:flex; align-items:center; gap:.75rem;
  font-family:var(--display); font-size:1.12rem; font-weight:600; color:#F0E4D4;
  letter-spacing:-.012em; transition:color .25s var(--ease); word-break:break-word;
  font-variation-settings:"SOFT" 22,"WONK" 1;
}
.footer__contact a:hover{ color:var(--vermilion-lt); }
.footer__contact svg{ flex:none; color:var(--clay); }

.social{ display:flex; flex-wrap:wrap; gap:.6rem; }
.social a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2); color:#D8C8B4;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease-out);
}
.social a:hover{ background:var(--vermilion); border-color:var(--vermilion); color:#FFF3E8; transform:translateY(-2px); }

.footer__bar{
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.6rem 2rem;
  display:flex; flex-wrap:wrap; gap:.8rem 2rem;
  align-items:center; justify-content:space-between;
  font-size:.82rem; color:#A08E7B;
}
.footer__bar p{ margin:0; }
.footer__credit a{
  text-decoration:none; color:#D8C8B4; font-weight:600;
  border-bottom:1px solid rgba(216,200,180,.35); padding-bottom:1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.footer__credit a:hover{ color:var(--vermilion-lt); border-color:var(--vermilion-lt); }

/* Back to top -------------------------------------------------------------- */
.totop{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:110;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); border:0; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease-out), visibility .35s, background-color .3s var(--ease);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--vermilion); }
@media (min-width:900px){ .totop{ right:1.75rem; bottom:1.75rem; } }

/* ========================================================== 20 UTILITIES */
.stack-sm > * + *{ margin-top:1rem; }
.stack   > * + *{ margin-top:1.6rem; }
.stack-lg> * + *{ margin-top:clamp(2rem,4vw,3rem); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-l{ margin-top:clamp(2rem,4.5vw,3.4rem); }
.mt-xl{ margin-top:clamp(3rem,7vw,5rem); }
.center{ text-align:center; }
.center .label,.center .lede{ margin-inline:auto; }
.center .label{ justify-content:center; }
.maxw-lede{ max-width:42rem; }
.sticky-col{ position:sticky; top:calc(var(--header-h) + 2rem); }
@media (max-width:899px){ .sticky-col{ position:static; } }

/* Column spans (desktop only, mobile stacks) */
@media (min-width:900px){
  /* grid-column-END only, so .start-N can compose without being reset by a shorthand */
  .c-3{ grid-column-end:span 3; } .c-4{ grid-column-end:span 4; } .c-5{ grid-column-end:span 5; }
  .c-6{ grid-column-end:span 6; } .c-7{ grid-column-end:span 7; } .c-8{ grid-column-end:span 8; }
  .c-9{ grid-column-end:span 9; } .c-12{ grid-column-end:span 12; }
  .start-2{ grid-column-start:2; } .start-3{ grid-column-start:3; }
  .start-5{ grid-column-start:5; } .start-6{ grid-column-start:6; } .start-7{ grid-column-start:7; }
  .start-8{ grid-column-start:8; } .start-9{ grid-column-start:9; }
}

/* Print -------------------------------------------------------------------- */
@media print{
  .site-header,.drawer,.totop,.progressbar,.gfilter,.lightbox{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::before{ display:none; }
  .band{ padding-block:1.5rem; }
  a{ text-decoration:underline; }
}

/* ==================================================== 21 PAGE COMPONENTS */

/* Long-form section headings inside .prose */
.prose h2{
  font-size:clamp(1.6rem,1.3rem + 1.5vw,2.35rem);
  margin-top:2.6em; margin-bottom:.55em; line-height:1.12;
  padding-top:1.4rem; border-top:2px solid var(--rule-strong);
}
.prose > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h2 + p{ margin-top:0; }

/* Sticky table of contents ------------------------------------------------- */
.toc{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.toc li{ border-top:1px solid var(--rule); }
.toc li:last-child{ border-bottom:1px solid var(--rule); }
.toc a{
  display:block; padding:.7rem 0; text-decoration:none;
  font-size:.85rem; line-height:1.45; color:var(--ink-soft);
  transition:color .25s var(--ease), padding-left .3s var(--ease-out);
}
.toc a:hover,.toc a:focus-visible{ color:var(--vermilion); padding-left:.4rem; }
@media (max-width:899px){
  .toc{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:2.5rem; }
  .toc li{ border:1px solid var(--rule-strong); }
  .toc li:last-child{ border-bottom:1px solid var(--rule-strong); }
  .toc a{ padding:.5rem .8rem; font-size:.78rem; }
}

/* Era ribbon — horizontal historical periods -------------------------------- */
.era{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.era__cell{
  background:var(--paper); padding:clamp(1.3rem,3vw,1.9rem);
  display:flex; flex-direction:column; gap:.6rem;
  border:1px solid var(--rule-strong); margin:0 -1px -1px 0;
}
.band--paper2 .era__cell{ background:var(--paper-2); }
.era__when{
  font-family:var(--display); font-size:1.5rem; font-weight:600; line-height:1;
  color:var(--clay-deep); letter-spacing:-.02em; font-variation-settings:"SOFT" 16;
}
.era__what{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--moss); }
.era__cell p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* Flow: national decision → local action ----------------------------------- */
.flow{ display:grid; gap:clamp(1rem,2.5vw,1.6rem); }
@media (min-width:900px){ .flow{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.flow__node{
  border:1px solid var(--paper-edge); background:var(--paper);
  padding:clamp(1.2rem,2.6vw,1.6rem); position:relative;
  display:flex; flex-direction:column; gap:.6rem;
}
.band--ink .flow__node{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); }
.flow__step{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--clay-deep); }
.band--ink .flow__step{ color:var(--vermilion-lt); }
.flow__node h3,.flow__node h4{ margin:0; font-size:clamp(1.02rem,.98rem + .3vw,1.2rem); }
.flow__node p{ margin:0; font-size:.9rem; color:var(--ink-soft); }
.band--ink .flow__node p{ color:#C6B7A3; }
.flow__node::after{
  content:""; position:absolute; top:50%; right:-1px; width:0; height:0;
  border-left:9px solid var(--clay); border-top:7px solid transparent; border-bottom:7px solid transparent;
  transform:translate(100%,-50%); display:none;
}
@media (min-width:900px){
  .flow__node:not(:last-child)::after{ display:block; right:calc(-1 * clamp(1rem,2.5vw,1.6rem) / 2 - 4px); }
}

/* Role grid — what people actually did -------------------------------------- */
.roles{ display:grid; gap:0; }
.role{
  display:grid; gap:.4rem 1.6rem; align-items:baseline;
  padding-block:clamp(1.2rem,2.6vw,1.7rem);
  border-bottom:1px solid var(--rule);
}
.role:first-child{ border-top:1px solid var(--rule); }
@media (min-width:800px){ .role{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); } }
.role h3{ margin:0; font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem); }
.role p{ margin:0; color:var(--ink-soft); font-size:.96rem; }

/* Chapter scroll page (Tamluk) --------------------------------------------- */
.scene{ padding-block:clamp(3.5rem,9vw,7rem); position:relative; }
.scene__no{
  font-family:var(--display); font-weight:600;
  font-size:clamp(4rem,3rem + 8vw,11rem); line-height:.78;
  letter-spacing:-.05em; display:block; margin-bottom:.15em;
  color:transparent; -webkit-text-stroke:1.6px var(--clay);
}
.band--ink .scene__no{ -webkit-text-stroke-color:#B8825C; }
.scene__kicker{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--clay-deep); margin:0 0 1rem;
}
.band--ink .scene__kicker{ color:#D0B492; }

/* Source list -------------------------------------------------------------- */
.sources{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.sources li{
  padding:1rem 0; border-bottom:1px solid var(--rule);
  font-size:.9rem; line-height:1.6; color:var(--ink-soft);
}
.sources li:first-child{ border-top:1px solid var(--rule); }
.sources b{ color:var(--ink); font-weight:600; display:block; margin-bottom:.15rem; }

/* ---- Very small screens: keep the header row inside 320px ---- */
@media (max-width:400px){
  :root{ --gutter:1rem; }
  .brand{ gap:.55rem; }
  .brand__mark{ width:28px; height:28px; }
  .brand__name{ font-size:.92rem; }
  .brand__years{ font-size:.55rem; letter-spacing:.18em; }
  .navtoggle{ padding:.6rem .7rem; gap:.5rem; font-size:0; letter-spacing:0; }
  .navtoggle__bars{ width:17px; }
  .site-header__inner{ gap:.6rem; }
}

/* ============================================ 22 CONTRAST CORRECTIONS
   Text on the dark ink and clay bands must not inherit the paper-tone
   foreground colours. Verified against WCAG AA at the rendered size.
   ==================================================================== */
.band--ink strong,
.band--clay strong{ color:#F7EEE1; }

.band--ink .qlist li,
.band--ink .glossary dd,
.band--ink .sources li,
.band--ink .role p,
.band--ink .card p,
.band--ink .weave__val,
.band--ink .place__body{ color:#CBBBA6; }

.band--ink .qlist li::before,
.band--ink .weave__idx,
.band--ink .card__k,
.band--ink .route__num,
.band--ink .gitem__cat,
.band--ink .place__where,
.band--ink .glossary dt,
.band--ink .journey__when,
.band--ink .scene__kicker{ color:#E0A882; }

.band--ink .sources b,
.band--ink .fact span{ color:#DCCDB9; }
.band--ink .sources li,
.band--ink .glossary div,
.band--ink .qlist li,
.band--ink .role,
.band--ink .toc li{ border-color:rgba(255,255,255,.16); }

/* Captions sitting on the clay band */
.band--clay .plate__caption{ color:#F0DDCC; }
.band--clay .plate__caption b{ color:#FBE3D0; }
.band--clay .lede,
.band--clay .prose p,
.band--clay .place__body{ color:#F2DECD; }