/* ==========================================================================
   KHAN ABDUL GHAFFAR KHAN  —  khanabdulghaffarkhan.com
   Design system: "THE PATH OF SERVICE"
   Deep forest green · muted indigo · warm sandstone · soft limestone · copper
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Core palette */
  --forest-900:#0E1B16;
  --forest-800:#132A22;
  --forest:#1E3B31;
  --forest-600:#2D5347;
  --forest-400:#4A7566;

  --indigo-900:#1C2437;
  --indigo:#39476A;
  --indigo-500:#4E5F86;
  --indigo-300:#8A96B4;

  --sandstone:#C8B49A;
  --sandstone-300:#DCCDB6;
  --sandstone-100:#EDE4D6;

  --limestone:#F6F3EC;
  --limestone-2:#EDE8DD;
  --limestone-3:#E2DBCC;

  --copper:#8A5A38;
  --copper-400:#B98457;
  --copper-200:#D8AE87;

  --earth:#6E5A46;
  --ink:#131A17;

  /* Semantic */
  --bg:var(--limestone);
  --bg-alt:var(--limestone-2);
  --text:#22302A;
  --text-soft:#55645C;
  --text-faint:#5F6B62;
  --on-dark:#EFEAE0;
  --on-dark-soft:#B9C4BC;
  --line:rgba(30,59,49,.16);
  --line-strong:rgba(30,59,49,.30);
  --line-dark:rgba(239,234,224,.20);

  /* Type */
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --label:"Barlow Condensed","Oswald","Arial Narrow",Arial,sans-serif;

  /* Metrics */
  --shell:1320px;
  --narrow:720px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --sec-y:clamp(4.5rem,11vw,9.5rem);
  --radius:2px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,.84,.44,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;}

/* ---------- 3. BASE ---------- */
body{
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.72;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

/* Paper grain — very light, never obscures content */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");
}

::selection{background:var(--copper);color:#fff;}

/* ---------- 4. TYPOGRAPHY ---------- */
.display,h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
  line-height:1.04;
  letter-spacing:-.018em;
  color:var(--forest-900);
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.6rem + 4.2vw,5rem);}
h2{font-size:clamp(1.95rem,1.3rem + 2.9vw,3.6rem);}
h3{font-size:clamp(1.3rem,1.05rem + 1.05vw,1.95rem);line-height:1.16;letter-spacing:-.01em;}
h4{font-family:var(--body);font-size:1.0625rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--forest-800);}

.label{
  font-family:var(--label);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.8125rem;
  line-height:1.3;
  color:var(--copper);
}
.label--muted{color:var(--text-faint);}
.label--dark{color:var(--copper-200);}
.label--indigo{color:var(--indigo);}

.lede{
  font-size:clamp(1.125rem,1.02rem + .5vw,1.4rem);
  line-height:1.6;
  color:var(--text-soft);
  letter-spacing:-.005em;
  text-wrap:pretty;
}
.prose p+p{margin-top:1.15em;}
.prose p{max-width:68ch;text-wrap:pretty;}
.prose--wide p{max-width:76ch;}
.prose strong{font-weight:600;color:var(--forest-800);}
.prose em{font-style:italic;}

.dropcap::first-letter{
  font-family:var(--display);
  float:left;font-size:4.2em;line-height:.82;
  padding:.06em .12em 0 0;margin-top:.04em;
  color:var(--copper);font-weight:500;
}

/* ---------- 5. LAYOUT ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}
.shell--wide{max-width:1560px;}
.shell--narrow{max-width:var(--narrow);}
.section{padding-block:var(--sec-y);position:relative;}
.section--tight{padding-block:clamp(3rem,7vw,6rem);}

.section--dark{background:var(--forest-900);color:var(--on-dark);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--limestone);}
.section--dark .lede{color:var(--on-dark-soft);}
.section--dark .prose{color:var(--on-dark-soft);}
.section--dark .prose strong{color:var(--limestone);}

.section--indigo{background:var(--indigo-900);color:var(--on-dark);}
.section--indigo h2,.section--indigo h3{color:var(--limestone);}
.section--indigo .lede,.section--indigo .prose{color:#B7C0D6;}
.section--indigo .prose strong{color:#fff;}

.section--sand{background:var(--sandstone-100);}
.section--alt{background:var(--bg-alt);}

/* Architectural arch pattern — abstract line geometry */
.arches{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'><g fill='none' stroke='%231E3B31' stroke-opacity='.13' stroke-width='1'><path d='M10 150V72C10 44 32 22 60 6c28 16 50 38 50 66v78'/><path d='M28 150V78c0-19 14-35 32-46 18 11 32 27 32 46v72'/></g></svg>");
  background-size:120px 150px;}
.arches--dark{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'><g fill='none' stroke='%23EFEAE0' stroke-opacity='.10' stroke-width='1'><path d='M10 150V72C10 44 32 22 60 6c28 16 50 38 50 66v78'/><path d='M28 150V78c0-19 14-35 32-46 18 11 32 27 32 46v72'/></g></svg>");}
.section > .shell{position:relative;z-index:1;}

/* Geometric rule */
.rule{height:1px;background:var(--line);border:0;margin:0;}
.rule-geo{display:flex;align-items:center;gap:.6rem;margin-block:clamp(2rem,5vw,3.5rem);}
.rule-geo::before,.rule-geo::after{content:"";height:1px;background:var(--line);flex:1;}
.rule-geo span{width:9px;height:9px;border:1px solid var(--copper);transform:rotate(45deg);flex:none;}
.section--dark .rule-geo::before,.section--dark .rule-geo::after,
.section--indigo .rule-geo::before,.section--indigo .rule-geo::after{background:var(--line-dark);}

/* Vertical archival label */
.vlabel{
  writing-mode:vertical-rl;
  font-family:var(--label);text-transform:uppercase;
  letter-spacing:.42em;font-size:.75rem;font-weight:500;
  color:var(--copper-200);white-space:nowrap;
}

/* ---------- 6. IMAGE PLATES  (never crop a historical photograph) ---------- */
.plate{
  position:relative;
  background:var(--limestone-3);
  padding:clamp(.55rem,1.4vw,1rem);
  border:1px solid var(--line);
}
.plate img{width:100%;height:auto;display:block;}
.plate--dark{background:#0B1512;border-color:var(--line-dark);}
.plate--sand{background:var(--sandstone-300);border-color:rgba(110,90,70,.28);}

/* Architectural corner frame */
.plate--framed::before,.plate--framed::after{
  content:"";position:absolute;width:clamp(28px,5vw,54px);height:clamp(28px,5vw,54px);
  border:1px solid var(--copper);opacity:.85;pointer-events:none;
}
.plate--framed::before{top:-9px;left:-9px;border-right:0;border-bottom:0;}
.plate--framed::after{bottom:-9px;right:-9px;border-left:0;border-top:0;}

figure{margin:0;}
figcaption{
  margin-top:.9rem;font-size:.8125rem;line-height:1.55;color:var(--text-faint);
  max-width:56ch;border-left:2px solid var(--copper);padding-left:.85rem;
}
.section--dark figcaption,.section--indigo figcaption{color:var(--on-dark-soft);opacity:.8;}
figcaption b{font-weight:600;color:var(--text-soft);}
.section--dark figcaption b,.section--indigo figcaption b{color:var(--limestone);}

/* ---------- 7. BUTTONS & LINKS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;
  font-size:.875rem;font-weight:500;text-decoration:none;
  padding:.95rem 1.7rem;border:1px solid var(--forest);color:var(--forest);
  background:transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--forest);color:var(--limestone);}
.btn--solid{background:var(--forest);color:var(--limestone);}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--copper);border-color:var(--copper);color:#fff;}
.btn--light{border-color:var(--sandstone);color:var(--sandstone-100);}
.btn--light:hover,.btn--light:focus-visible{background:var(--sandstone-100);color:var(--forest-900);border-color:var(--sandstone-100);}
.btn svg{width:1.05em;height:1.05em;flex:none;}

.tlink{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.8125rem;
  color:var(--copper);border-bottom:1px solid currentColor;padding-bottom:.2rem;
  transition:gap .3s var(--ease),color .3s var(--ease);
}
.tlink:hover,.tlink:focus-visible{gap:.95rem;color:var(--forest);}
.section--dark .tlink,.section--indigo .tlink{color:var(--copper-200);}
.section--dark .tlink:hover,.section--indigo .tlink:hover{color:var(--limestone);}

.prose a{color:var(--copper);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;}
.prose a:hover{color:var(--forest);}
.section--dark .prose a,.section--indigo .prose a{color:var(--copper-200);}

/* Focus */
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--forest);color:var(--limestone);padding:.9rem 1.4rem;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;text-decoration:none;
}
.skip:focus{left:0;}

/* ---------- 8. HEADER / NAV ---------- */
.masthead{
  position:sticky;top:0;z-index:300;
  background:rgba(246,243,236,.90);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.masthead.is-stuck{box-shadow:0 1px 24px rgba(14,27,22,.10);}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:none;}
.brand__mark{width:30px;height:36px;flex:none;}
.brand__mark path{stroke:var(--forest);stroke-width:1.4;fill:none;}
.brand__mark .b-dot{fill:var(--copper);stroke:none;}
.brand__text{display:flex;flex-direction:column;line-height:1;}
.brand__name{font-family:var(--display);font-size:1.0625rem;letter-spacing:-.01em;color:var(--forest-900);}
.brand__sub{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.625rem;color:var(--text-faint);margin-top:.32rem;}

.nav{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.55rem);}
.nav a{
  text-decoration:none;font-size:.8125rem;font-weight:500;letter-spacing:.01em;
  color:var(--text-soft);padding:.4rem 0;position:relative;white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--copper);
  transition:right .38s var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--forest-900);}
.nav a:hover::after,.nav a:focus-visible::after{right:0;}
.nav a[aria-current="page"]{color:var(--forest-900);font-weight:600;}
.nav a[aria-current="page"]::after{right:0;background:var(--forest);}

.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line-strong);background:transparent;
  cursor:pointer;position:relative;flex:none;padding:0;
}
.burger span{
  position:absolute;left:13px;width:20px;height:1.5px;background:var(--forest-900);
  transition:transform .4s var(--ease),opacity .25s var(--ease),width .4s var(--ease);
}
.burger span:nth-child(1){top:17px;}
.burger span:nth-child(2){top:22.5px;}
.burger span:nth-child(3){top:28px;width:13px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);width:20px;}

.drawer{
  position:fixed;inset:0;z-index:290;background:var(--forest-900);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1.5%);
  transition:opacity .45s var(--ease),transform .55s var(--slow),visibility .45s;
  overflow-y:auto;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none;}
.drawer__nav a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;
  font-family:var(--display);font-size:clamp(1.5rem,7vw,2.3rem);color:var(--limestone);
  padding:.5rem 0;border-bottom:1px solid rgba(239,234,224,.12);
  opacity:0;transform:translateY(14px);
}
.drawer.is-open .drawer__nav a{animation:drawerIn .55s var(--slow) forwards;}
.drawer__nav a span{font-family:var(--label);font-size:.75rem;letter-spacing:.2em;color:var(--copper-200);}
.drawer__nav a[aria-current="page"]{color:var(--copper-200);}
.drawer__foot{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;}
.drawer__foot a{color:var(--on-dark-soft);text-decoration:none;font-size:.9375rem;}
.drawer__foot a:hover{color:var(--copper-200);}
@keyframes drawerIn{to{opacity:1;transform:none;}}
body.nav-open{overflow:hidden;}

/* ---------- 9. PAGE HEADERS (unique per page — modifiers in responsive.css) ---------- */
.crumbs{font-size:.8125rem;color:var(--text-faint);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.crumbs a{text-decoration:none;color:var(--text-soft);border-bottom:1px solid transparent;}
.crumbs a:hover{border-color:var(--copper);color:var(--forest);}
.crumbs li{display:flex;align-items:center;gap:.5rem;}
.crumbs li+li::before{content:"";width:4px;height:4px;background:var(--line-strong);transform:rotate(45deg);}
.crumbs [aria-current="page"]{color:var(--forest-900);}
.crumbs--dark{color:var(--on-dark-soft);}
.crumbs--dark a{color:var(--on-dark-soft);}
.crumbs--dark a:hover{color:var(--copper-200);}
.crumbs--dark [aria-current="page"]{color:var(--limestone);}
.crumbs--dark li+li::before{background:var(--line-dark);}

/* ---------- 10. QUOTE BLOCK ---------- */
.quote{position:relative;padding-left:clamp(1.25rem,3vw,2.5rem);border-left:2px solid var(--copper);}
.quote blockquote{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,1rem + 1.9vw,2.35rem);
  line-height:1.28;letter-spacing:-.015em;color:var(--forest-900);text-wrap:pretty;
}
.section--dark .quote blockquote,.section--indigo .quote blockquote{color:var(--limestone);}
.quote cite{
  display:block;margin-top:1.3rem;font-style:normal;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:.8125rem;
  color:var(--copper);
}
.quote .src{
  display:block;margin-top:.55rem;font-size:.8125rem;line-height:1.5;color:var(--text-faint);
  font-family:var(--body);letter-spacing:0;text-transform:none;
}
.section--dark .quote .src,.section--indigo .quote .src{color:var(--on-dark-soft);opacity:.75;}

/* Source / editorial note */
.note{
  font-size:.8125rem;line-height:1.6;color:var(--text-faint);
  background:rgba(30,59,49,.045);border-left:2px solid var(--line-strong);
  padding:.9rem 1.1rem;max-width:66ch;
}
.section--dark .note,.section--indigo .note{
  background:rgba(239,234,224,.06);border-left-color:var(--line-dark);color:var(--on-dark-soft);
}

/* ---------- 11. GRIDS ---------- */
.grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem);}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;}
.split--a{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
.split--b{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.split--top{align-items:start;}
.stack{display:flex;flex-direction:column;}
.stack>*+*{margin-top:var(--gap,1.5rem);}

/* ---------- 12. FOOTER ---------- */
.colophon{background:var(--forest-900);color:var(--on-dark-soft);position:relative;overflow:hidden;}
.colophon__top{padding-block:clamp(3.5rem,8vw,6rem);border-bottom:1px solid var(--line-dark);}
.colophon__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);}
.colophon h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);color:var(--limestone);}
.colophon h3{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;color:var(--copper-200);margin-bottom:1.25rem;}
.colophon__nav{display:grid;gap:.65rem;}
.colophon__nav a{text-decoration:none;font-size:.9375rem;color:var(--on-dark-soft);transition:color .3s var(--ease),padding-left .3s var(--ease);}
.colophon__nav a:hover,.colophon__nav a:focus-visible{color:var(--limestone);padding-left:.35rem;}
.colophon__contact a{display:block;text-decoration:none;color:var(--limestone);font-size:1.0625rem;margin-bottom:.55rem;transition:color .3s var(--ease);word-break:break-word;}
.colophon__contact a:hover{color:var(--copper-200);}

.social{display:flex;gap:.7rem;margin-top:1.6rem;flex-wrap:wrap;}
.social li{display:block;}
.social__item{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line-dark);color:var(--on-dark-soft);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.social__item svg{width:17px;height:17px;fill:currentColor;}
a.social__item:hover,a.social__item:focus-visible{background:var(--copper);border-color:var(--copper);color:#fff;}
span.social__item{opacity:.7;cursor:default;}

.colophon__bottom{
  padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;
  align-items:center;justify-content:space-between;font-size:.8125rem;
}
.colophon__bottom a{color:var(--copper-200);text-decoration:none;border-bottom:1px solid transparent;}
.colophon__bottom a:hover{border-color:currentColor;}

/* ---------- 13. REVEAL ANIMATION ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--slow),transform .9s var(--slow);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.09s;}
.reveal[data-d="2"]{transition-delay:.18s;}
.reveal[data-d="3"]{transition-delay:.27s;}
.reveal[data-d="4"]{transition-delay:.36s;}
.draw path,.draw line,.draw circle,.draw rect{
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 2.2s var(--slow);
}
.draw.is-in path,.draw.is-in line,.draw.is-in circle,.draw.is-in rect{stroke-dashoffset:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .reveal{opacity:1;transform:none;}
  .draw path,.draw line,.draw circle,.draw rect{stroke-dashoffset:0;}
}

/* ==========================================================================
   14. HOME — HERO  "THE PATH OF SERVICE"
   ========================================================================== */
.hero{
  position:relative;background:var(--forest-900);color:var(--on-dark);
  overflow:hidden;padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem);
}
.hero__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;}
.hero__lines path,.hero__lines line{stroke:var(--forest-400);stroke-width:1;fill:none;opacity:.5;}
.hero__inner{
  position:relative;z-index:2;display:grid;
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.hero__rail{display:flex;flex-direction:column;align-items:center;gap:1.4rem;align-self:stretch;justify-content:center;}
.hero__rail::before,.hero__rail::after{content:"";width:1px;flex:1;background:linear-gradient(var(--forest-600),transparent);}
.hero__rail::after{background:linear-gradient(transparent,var(--forest-600));}

.hero__type{position:relative;z-index:3;}
.hero__eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:clamp(1.2rem,3vw,2rem);}
.hero__eyebrow::after{content:"";height:1px;flex:1;max-width:120px;background:var(--copper);opacity:.7;}
.hero__name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,1.1rem + 6.4vw,6.1rem);
  line-height:.94;letter-spacing:-.032em;color:var(--limestone);
  margin:0;
}
.hero__name em{display:block;font-style:normal;color:var(--sandstone);}
.hero__name .khan{color:var(--copper-200);}
.hero__tag{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  font-size:clamp(1.05rem,.95rem + .55vw,1.35rem);line-height:1.5;
  color:var(--on-dark-soft);max-width:32ch;
}
.hero__dates{
  margin-top:clamp(1.6rem,3.5vw,2.4rem);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.28em;font-size:.875rem;color:var(--sandstone);
}
.hero__dates span{width:34px;height:1px;background:var(--copper);}
.hero__alias{
  margin-top:clamp(1.8rem,4vw,2.6rem);display:flex;flex-wrap:wrap;gap:.5rem .55rem;
}
.hero__alias li{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;
  border:1px solid rgba(200,180,154,.35);color:var(--sandstone-300);padding:.42rem .8rem;
}
.hero__actions{margin-top:clamp(2rem,4vw,2.8rem);display:flex;flex-wrap:wrap;gap:1rem;}

.hero__portrait{position:relative;z-index:2;}
.hero__portrait .plate{background:#0A1310;border-color:rgba(200,180,154,.26);}
.hero__portrait img{max-height:min(74vh,780px);width:auto;margin-inline:auto;}
.hero__caption{margin-top:1rem;font-size:.75rem;line-height:1.55;color:rgba(185,196,188,.75);border-left:2px solid var(--copper);padding-left:.8rem;max-width:42ch;}

.hero__scroll{
  position:relative;z-index:2;margin-top:clamp(2.5rem,5vw,4rem);
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.24em;font-size:.6875rem;
  color:rgba(185,196,188,.7);text-decoration:none;width:max-content;
}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(var(--copper),transparent);position:relative;overflow:hidden;}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:var(--sandstone);animation:scrollDrop 2.6s var(--ease) infinite;}
@keyframes scrollDrop{0%{transform:translateY(0);}70%{transform:translateY(92px);}100%{transform:translateY(92px);}}

/* ---------- 15. HOME — INTRO ---------- */
.intro__grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start;}
.intro__stats{display:grid;gap:1.4rem;margin-top:2.5rem;}
.stat{border-top:1px solid var(--line);padding-top:1rem;}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1;color:var(--forest);letter-spacing:-.02em;}
.stat span{display:block;margin-top:.5rem;font-size:.8125rem;line-height:1.5;color:var(--text-faint);}

/* ---------- 16. HOME — THE PATH ---------- */
.path{position:relative;background:var(--forest-900);color:var(--on-dark);overflow:hidden;}
.path__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;margin-bottom:clamp(2.5rem,5vw,4rem);}
.path__scroller{
  position:relative;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding-bottom:1.5rem;scrollbar-width:thin;scrollbar-color:var(--forest-600) transparent;
}
.path__scroller::-webkit-scrollbar{height:4px;}
.path__scroller::-webkit-scrollbar-thumb{background:var(--forest-600);}
.path__scroller::-webkit-scrollbar-track{background:rgba(239,234,224,.07);}
.path__track{display:flex;gap:0;min-width:max-content;position:relative;padding-top:2.2rem;}
.path__line{position:absolute;top:calc(2.2rem + 5px);left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--forest-600) 6%,var(--forest-600) 94%,transparent);}
.milestone{
  position:relative;flex:none;width:clamp(240px,25vw,306px);
  padding:0 clamp(1.2rem,2.4vw,2rem);scroll-snap-align:center;
  border-left:1px solid rgba(239,234,224,.09);
}
.milestone:first-child{border-left:0;padding-left:0;}
.milestone__dot{
  position:absolute;top:0;left:clamp(1.2rem,2.4vw,2rem);
  width:11px;height:11px;border:1px solid var(--copper);background:var(--forest-900);
  transform:rotate(45deg);transition:background .4s var(--ease),transform .4s var(--ease);
}
.milestone:first-child .milestone__dot{left:0;}
.milestone__year{
  display:block;margin-top:2.1rem;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.8125rem;color:var(--copper-200);
}
.milestone h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);margin-top:.75rem;color:var(--limestone);}
.milestone p{margin-top:.75rem;font-size:.9375rem;line-height:1.65;color:var(--on-dark-soft);}
.milestone a{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;text-decoration:none;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;color:var(--sandstone);
  border-bottom:1px solid rgba(200,180,154,.4);padding-bottom:.2rem;transition:gap .3s var(--ease),color .3s var(--ease);
}
.milestone a:hover,.milestone a:focus-visible{gap:.9rem;color:var(--copper-200);}
.milestone:hover .milestone__dot{background:var(--copper);transform:rotate(45deg) scale(1.18);}
.path__hint{margin-top:1.2rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--label);color:rgba(185,196,188,.72);}

/* ---------- 17. HOME — PHILOSOPHY ---------- */
.philos{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,5rem);align-items:center;}

/* ---------- 18. HOME — CHAPTER INDEX ---------- */
.chapters{border-top:1px solid var(--line);}
.chapter{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.2rem,4vw,3.5rem);align-items:center;
  padding:clamp(1.6rem,3.6vw,2.6rem) 0;border-bottom:1px solid var(--line);
  text-decoration:none;position:relative;transition:padding-left .5s var(--ease);
}
.chapter::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--forest-900);
  transition:width .55s var(--slow);z-index:0;
}
.chapter>*{position:relative;z-index:1;}
.chapter__num{
  font-family:var(--display);font-size:clamp(1.6rem,1.1rem + 2vw,2.8rem);line-height:1;
  color:var(--sandstone);letter-spacing:-.02em;min-width:2.2ch;transition:color .45s var(--ease);
}
.chapter__body h3{transition:color .45s var(--ease);}
.chapter__body p{margin-top:.6rem;font-size:.9375rem;line-height:1.65;color:var(--text-soft);max-width:60ch;transition:color .45s var(--ease);}
.chapter__go{
  width:44px;height:44px;border:1px solid var(--line-strong);display:grid;place-items:center;flex:none;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.chapter__go svg{width:15px;height:15px;stroke:var(--forest);stroke-width:1.4;fill:none;transition:stroke .45s var(--ease);}
.chapter:hover,.chapter:focus-visible{padding-left:clamp(1rem,2.5vw,2.2rem);}
.chapter:hover::before,.chapter:focus-visible::before{width:100%;}
.chapter:hover .chapter__num,.chapter:focus-visible .chapter__num{color:var(--copper-200);}
.chapter:hover .chapter__body h3,.chapter:focus-visible .chapter__body h3{color:var(--limestone);}
.chapter:hover .chapter__body p,.chapter:focus-visible .chapter__body p{color:var(--on-dark-soft);}
.chapter:hover .chapter__go,.chapter:focus-visible .chapter__go{border-color:var(--copper);background:var(--copper);transform:translateX(5px);}
.chapter:hover .chapter__go svg,.chapter:focus-visible .chapter__go svg{stroke:#fff;}

/* ---------- 19. PAGE HEROES (one per page, all different) ---------- */
.phead{position:relative;overflow:hidden;}
.phead__crumbs{padding-block:1.4rem;}

/* (a) EARLY LIFE — geographic ledger */
.phead--geo{background:var(--limestone-2);border-bottom:1px solid var(--line);}
.phead--geo .phead__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4.5rem);align-items:end;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5rem);}
.coords{display:grid;gap:.9rem;border-left:1px solid var(--line-strong);padding-left:clamp(1.2rem,2.5vw,2rem);}
.coords div{display:grid;gap:.2rem;}
.coords dt{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;color:var(--text-faint);}
.coords dd{margin:0;font-size:.9375rem;color:var(--forest-800);font-weight:500;}

/* (b) SOCIAL REFORM — magazine masthead */
.phead--mag{background:var(--sandstone-100);border-bottom:1px solid rgba(110,90,70,.22);}
.phead--mag .phead__grid{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5rem);}
.phead--mag h1{max-width:16ch;}
.magbar{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding-block:1rem;border-top:1px solid rgba(110,90,70,.25);border-bottom:1px solid rgba(110,90,70,.25);margin-top:clamp(2rem,4vw,3rem);}
.magbar span{font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--earth);}

/* (c) KHUDAI KHIDMATGAR — dark movement banner */
.phead--movement{background:var(--forest-900);color:var(--on-dark);}
.phead--movement h1{color:var(--limestone);}
.phead--movement .phead__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:end;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5.5rem);}
.pashto{
  font-family:var(--display);font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  color:var(--sandstone);letter-spacing:.02em;
}
.pashto b{color:var(--copper-200);font-weight:400;}

/* (d) NONVIOLENCE — quiet centred */
.phead--quiet{background:var(--limestone);}
.phead--quiet .phead__grid{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem);text-align:center;display:grid;justify-items:center;gap:1.5rem;}
.phead--quiet .lede{max-width:56ch;}
.phead--quiet .crumbs{justify-content:center;}

/* (e) INDEPENDENCE — cartographic */
.phead--carto{background:var(--indigo-900);color:var(--on-dark);}
.phead--carto h1{color:var(--limestone);}
.phead--carto .phead__grid{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5.5rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:end;}
.phead--carto .lede{color:#B7C0D6;}
.carto{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.32;}
.carto path,.carto line,.carto circle{fill:none;stroke:var(--indigo-300);stroke-width:.8;}

/* (f) LEGACY — contemporary */
.phead--now{background:var(--limestone);border-bottom:1px solid var(--line);}
.phead--now .phead__grid{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5rem);}
.phead--now h1{font-size:clamp(2.6rem,1.4rem + 5.2vw,5.8rem);max-width:14ch;}

/* (g) GALLERY — museum */
.phead--museum{background:var(--forest-900);color:var(--on-dark);}
.phead--museum h1{color:var(--limestone);}
.phead--museum .phead__grid{padding-block:clamp(2.2rem,5vw,4rem) clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;}

/* (h) CONTACT — institutional */
.phead--inst{background:var(--limestone-2);border-bottom:1px solid var(--line);}
.phead--inst .phead__grid{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem);}

/* ==========================================================================
   20. CONTENT COMPONENTS
   ========================================================================== */

/* Date ladder (Early Life) */
.ladder{display:grid;gap:0;border-top:1px solid var(--line);}
.ladder__row{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(1.4rem,3vw,2.1rem);border-bottom:1px solid var(--line);}
.ladder__yr{font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:.875rem;color:var(--copper);padding-top:.25rem;}
.ladder h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);}
.ladder p{margin-top:.6rem;font-size:.9375rem;line-height:1.68;color:var(--text-soft);max-width:62ch;}
.section--dark .ladder{border-color:var(--line-dark);}
.section--dark .ladder__row{border-color:var(--line-dark);}
.section--dark .ladder p{color:var(--on-dark-soft);}

/* Numbered idea chain (Education → Reform → Community) */
.chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);}
.chain__step{padding:clamp(1.5rem,3vw,2.2rem);border-right:1px solid var(--line);position:relative;}
.chain__step:last-child{border-right:0;}
.chain__step b{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;color:var(--copper);margin-bottom:.9rem;}
.chain__step h3{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);}
.chain__step p{margin-top:.7rem;font-size:.9375rem;line-height:1.65;color:var(--text-soft);}
.section--dark .chain,.section--dark .chain__step{border-color:var(--line-dark);}
.section--dark .chain__step p{color:var(--on-dark-soft);}

/* Magazine columns */
.cols{column-count:2;column-gap:clamp(2rem,4vw,3.5rem);column-rule:1px solid var(--line);}
.cols p{margin:0 0 1.15em;break-inside:avoid-column;max-width:none;}
.pull{
  font-family:var(--display);font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);line-height:1.3;
  color:var(--forest);letter-spacing:-.012em;border-top:1px solid var(--copper);border-bottom:1px solid var(--copper);
  padding-block:1.1rem;margin-block:1.6rem;break-inside:avoid;
}

/* Oath / principle list */
.oath{display:grid;gap:0;counter-reset:oath;}
.oath li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);
  padding-block:clamp(1.1rem,2.4vw,1.7rem);border-bottom:1px solid var(--line-dark);align-items:baseline;
}
.oath li::before{
  counter-increment:oath;content:counter(oath,decimal-leading-zero);
  font-family:var(--label);letter-spacing:.14em;font-size:.8125rem;color:var(--copper-200);
}
.oath p{font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.6;color:var(--on-dark-soft);max-width:62ch;}
.oath strong{color:var(--limestone);font-weight:500;}

/* Structure diagram (Khudai Khidmatgar) */
.structure{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.structure__cell{background:var(--limestone);padding:clamp(1.3rem,2.6vw,1.9rem);}
.structure__cell b{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;color:var(--copper);margin-bottom:.75rem;}
.structure__cell h4{margin-bottom:.5rem;}
.structure__cell p{font-size:.9375rem;line-height:1.6;color:var(--text-soft);}

/* Comparison table (Gandhi & Bacha Khan) */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line);}
.compare__col{padding:clamp(1.5rem,3vw,2.4rem) clamp(1.2rem,2.5vw,2rem);border-bottom:1px solid var(--line);}
.compare__col:nth-child(odd){border-right:1px solid var(--line);}
.compare__col h4{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--copper);margin-bottom:.9rem;font-weight:500;}
.compare__col p{font-size:.9375rem;line-height:1.68;color:var(--text-soft);}
.compare__col p+p{margin-top:.8rem;}

/* Award / recognition ledger */
.ledger{border-top:1px solid var(--line);}
.ledger__row{display:grid;grid-template-columns:minmax(0,6rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(1.2rem,2.6vw,1.8rem);border-bottom:1px solid var(--line);align-items:baseline;}
.ledger__yr{font-family:var(--label);letter-spacing:.16em;font-size:.9375rem;color:var(--copper);}
.ledger h4{font-size:1.0625rem;}
.ledger p{margin-top:.45rem;font-size:.9375rem;line-height:1.65;color:var(--text-soft);max-width:64ch;}

/* Theme cards (Legacy modern relevance) */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
.theme{background:var(--forest-900);padding:clamp(1.5rem,3vw,2.2rem);transition:background .45s var(--ease);}
.theme:hover{background:var(--forest-800);}
.theme b{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;color:var(--copper-200);margin-bottom:.9rem;}
.theme h3{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);color:var(--limestone);}
.theme p{margin-top:.7rem;font-size:.9375rem;line-height:1.65;color:var(--on-dark-soft);}

/* Partition typographic geography */
.geoword{
  font-family:var(--display);line-height:.92;letter-spacing:-.035em;
  font-size:clamp(2.6rem,1rem + 8vw,7.5rem);color:rgba(239,234,224,.13);
  text-transform:uppercase;user-select:none;
}
.geoword span{display:block;}
.geoword span:nth-child(2){padding-left:.6em;color:rgba(200,180,154,.2);}
.geoword span:nth-child(3){padding-left:1.2em;}

/* Closing */
.closing{position:relative;background:var(--forest-900);color:var(--on-dark);overflow:hidden;}
.closing__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(2rem,5vw,5rem);align-items:center;}

/* ==========================================================================
   21. GALLERY — DIGITAL MUSEUM
   ========================================================================== */
.museum{background:var(--forest-900);color:var(--on-dark);padding-block:clamp(2rem,4vw,3rem) clamp(4rem,8vw,6rem);}
.filters{display:flex;flex-wrap:wrap;gap:.55rem;padding-bottom:clamp(1.8rem,4vw,2.8rem);border-bottom:1px solid var(--line-dark);}
.filters button{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;
  background:transparent;border:1px solid var(--line-dark);color:var(--on-dark-soft);
  padding:.55rem 1.05rem;cursor:pointer;transition:all .3s var(--ease);
}
.filters button:hover{border-color:var(--sandstone);color:var(--limestone);}
.filters button[aria-pressed="true"]{background:var(--sandstone-100);border-color:var(--sandstone-100);color:var(--forest-900);}

.museum__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(1.5rem,4vw,3.5rem);padding-top:clamp(2rem,4vw,3rem);align-items:start;}
.stage__frame{background:#0A1310;border:1px solid var(--line-dark);padding:clamp(1rem,2.5vw,1.8rem);display:grid;place-items:center;min-height:clamp(300px,50vh,560px);}
.stage__frame img{max-height:min(62vh,600px);width:auto;max-width:100%;height:auto;}
.stage__meta{margin-top:1.4rem;}
.stage__meta h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);color:var(--limestone);}
.stage__meta p{margin-top:.7rem;font-size:.9375rem;line-height:1.65;color:var(--on-dark-soft);max-width:62ch;}
.stage__tag{display:inline-block;margin-bottom:.9rem;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;color:var(--copper-200);}
.stage__open{margin-top:1.2rem;}

.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;max-height:clamp(300px,58vh,620px);overflow-y:auto;padding-right:.35rem;
  scrollbar-width:thin;scrollbar-color:var(--forest-600) transparent;}
.thumbs::-webkit-scrollbar{width:4px;}
.thumbs::-webkit-scrollbar-thumb{background:var(--forest-600);}
.thumb{
  position:relative;aspect-ratio:1/1;background:#0A1310;border:1px solid var(--line-dark);
  padding:5px;cursor:pointer;transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.thumb img{width:100%;height:100%;object-fit:contain;}
.thumb:hover{border-color:var(--sandstone);transform:translateY(-2px);}
.thumb[aria-current="true"]{border-color:var(--copper);box-shadow:0 0 0 1px var(--copper);}
.thumb.is-hidden{display:none;}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:500;background:rgba(9,20,16,.97);
  display:flex;flex-direction:column;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);border-bottom:1px solid var(--line-dark);}
.lightbox__count{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--sandstone);}
.lb-btn{
  width:46px;height:46px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line-dark);color:var(--on-dark-soft);cursor:pointer;flex:none;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.lb-btn:hover:not(:disabled){border-color:var(--sandstone);color:var(--limestone);background:rgba(239,234,224,.07);}
.lb-btn:disabled{opacity:.3;cursor:not-allowed;}
.lb-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none;}
.lightbox__body{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.5rem,2vw,1.5rem);padding:clamp(1rem,3vw,2rem) var(--gutter);min-height:0;}
.lightbox__figure{display:grid;place-items:center;min-height:0;height:100%;}
.lightbox__figure img{max-width:100%;max-height:calc(100vh - 260px);width:auto;height:auto;object-fit:contain;}
.lightbox__cap{padding:1.1rem var(--gutter) 1.6rem;border-top:1px solid var(--line-dark);}
.lightbox__cap h3{font-size:1.15rem;color:var(--limestone);}
.lightbox__cap p{margin-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--on-dark-soft);max-width:76ch;}

/* ==========================================================================
   22. CONTACT
   ========================================================================== */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.contact__direct{display:grid;gap:1.6rem;}
.contact__direct a{
  display:block;text-decoration:none;font-family:var(--display);
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);color:var(--forest-900);letter-spacing:-.015em;
  word-break:break-word;transition:color .3s var(--ease);
}
.contact__direct a:hover{color:var(--copper);}
.contact__direct span{display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;color:var(--text-faint);margin-bottom:.5rem;}

.form{display:grid;gap:1.1rem;}
.field{display:grid;gap:.45rem;}
.field label{font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:.6875rem;color:var(--text-soft);}
.field input,.field textarea{
  width:100%;background:transparent;border:1px solid var(--line-strong);
  padding:.85rem .95rem;font-size:.9375rem;color:var(--text);border-radius:0;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field input:focus,.field textarea:focus{border-color:var(--forest);background:rgba(255,255,255,.55);outline:none;}
.field textarea{resize:vertical;min-height:130px;font-family:var(--body);line-height:1.6;}
.field .err{font-size:.75rem;color:#8E3B2A;min-height:1em;}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#8E3B2A;}
.form__status{font-size:.875rem;line-height:1.6;color:var(--text-soft);border-left:2px solid var(--copper);padding-left:.85rem;}
.form__status:empty{display:none;}

/* ==========================================================================
   23. FIXES & SAFETY NETS
   ========================================================================== */

/* The caption-bar prev/next controls exist only for narrow screens, where the
   body-row controls are hidden. Keep them out of the way everywhere else. */
.lightbox__cap .lb-btn{display:none;}

/* The date ladder and ledger also appear on indigo sections */
.section--indigo .ladder,
.section--indigo .ladder__row,
.section--indigo .ledger,
.section--indigo .ledger__row{border-color:var(--line-dark);}
.section--indigo .ladder h3,
.section--indigo .ledger h4{color:var(--limestone);}
.section--indigo .ladder p,
.section--indigo .ledger p{color:#B7C0D6;}
.section--indigo .ladder__yr,
.section--indigo .ledger__yr{color:var(--copper-200);}

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

/* Long unbroken strings (emails, URLs) must never force a horizontal scrollbar */
p,li,dd,h1,h2,h3,h4,figcaption,blockquote{overflow-wrap:break-word;}

/* --------------------------------------------------------------------------
   No-JavaScript guard.
   The reveal/draw states hide content until an IntersectionObserver fires.
   If scripting is unavailable or blocked, `html.js` is never set and every
   one of these elements must render fully visible instead of staying blank.
   -------------------------------------------------------------------------- */
html:not(.js) .reveal{opacity:1!important;transform:none!important;}
html:not(.js) .draw path,
html:not(.js) .draw line,
html:not(.js) .draw circle,
html:not(.js) .draw rect{stroke-dashoffset:0!important;}
html:not(.js) .drawer{display:none;}

/* Email addresses are long; give them their own step so they do not break
   mid-word inside the narrow contact column. */
.contact__direct a[href^="mailto:"]{font-size:clamp(1rem,.92rem + .45vw,1.2rem);overflow-wrap:anywhere;}

/* ==========================================================================
   24. DARK-CONTEXT INHERITANCE
   .hero, .path, .closing, .museum, .colophon and the dark page headers all sit
   on near-black grounds but are not .section--dark, so the default (dark) text
   colours were being inherited on to them. Everything that renders text inside
   a dark ground is normalised here.
   ========================================================================== */
.hero, .path, .closing, .museum,
.phead--movement, .phead--carto, .phead--museum{color:var(--on-dark);}

.path h1,.path h2,.path h3,.path h4,
.closing h1,.closing h2,.closing h3,.closing h4,
.museum h1,.museum h2,.museum h3,.museum h4,
.hero h2,.hero h3,
.phead--movement h2,.phead--movement h3,
.phead--carto h2,.phead--carto h3,
.phead--museum h2,.phead--museum h3{color:var(--limestone);}

.path .lede,.closing .lede,.museum .lede,.hero .lede,
.phead--movement .lede,.phead--museum .lede{color:var(--on-dark-soft);}
.phead--carto .lede,.section--indigo .lede{color:#B7C0D6;}

.path .prose,.closing .prose,.museum .prose{color:var(--on-dark-soft);}
.path .prose strong,.closing .prose strong,.museum .prose strong{color:var(--limestone);}

.path figcaption,.closing figcaption,.museum figcaption{color:var(--on-dark-soft);opacity:.85;}
.path figcaption b,.closing figcaption b,.museum figcaption b{color:var(--limestone);}

.path .note,.closing .note,.museum .note,
.phead--movement .note,.phead--carto .note,.phead--museum .note{
  background:rgba(239,234,224,.06);
  border-left-color:var(--line-dark);
  color:var(--on-dark-soft);
}
.path .note strong,.closing .note strong,.museum .note strong{color:var(--limestone);}

.path .rule-geo::before,.path .rule-geo::after,
.closing .rule-geo::before,.closing .rule-geo::after,
.museum .rule-geo::before,.museum .rule-geo::after,
.phead--quiet .rule-geo::before,.phead--quiet .rule-geo::after{background:var(--line-dark);}
.phead--quiet .rule-geo::before,.phead--quiet .rule-geo::after{background:var(--line);}

.path .rule-geo span,.closing .rule-geo span,.museum .rule-geo span{border-color:var(--copper-200);}

.path .tlink,.closing .tlink,.museum .tlink{color:var(--copper-200);}
.path .tlink:hover,.closing .tlink:hover,.museum .tlink:hover,
.path .tlink:focus-visible,.closing .tlink:focus-visible,.museum .tlink:focus-visible{color:var(--limestone);}

.path .label,.closing .label,.museum .label,
.phead--movement .label,.phead--museum .label{color:var(--copper-200);}

.museum .ladder,.museum .ladder__row,.closing .ladder,.closing .ladder__row{border-color:var(--line-dark);}