@charset "UTF-8";
/* ==========================================================================
   rajeevbindal.com — "Leadership With Perspective"
   Editorial / institutional design system
   Palette: pine · parchment · warm stone · muted copper · sage
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Ground */
  --paper:        #FBF9F3;
  --parchment:    #F4F0E6;
  --stone:        #E7E0D0;
  --stone-deep:   #D8CFBA;

  /* Forest */
  --pine:         #1E2E22;
  --pine-deep:    #16221A;
  --pine-soft:    #2A3D2E;

  /* Ink */
  --ink:          #14180F;
  --ink-soft:     #3A4034;
  --ink-muted:    #5A5F52;

  /* Accents */
  --copper:       #97613F;
  --copper-deep:  #7E4F31;
  --copper-light: #C08A5E;
  --sage:         #9DAE93;
  --sage-deep:    #6E7F66;

  /* Lines */
  --rule:         #D6CFBE;
  --rule-strong:  #BFB49B;
  --rule-dark:    rgba(231,224,208,.20);
  --rule-dark-2:  rgba(231,224,208,.34);

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero:  clamp(2.7rem, 1.15rem + 6.1vw, 6.4rem);
  --t-1:     clamp(2rem,  1.05rem + 3.5vw, 4.1rem);
  --t-2:     clamp(1.55rem, 1.05rem + 1.9vw, 2.55rem);
  --t-3:     clamp(1.18rem, .98rem + .82vw, 1.6rem);
  --t-lead:  clamp(1.06rem, .99rem + .42vw, 1.34rem);
  --t-body:  clamp(1rem, .965rem + .16vw, 1.075rem);
  --t-small: .875rem;
  --t-micro: .705rem;

  /* Metrics */
  --nav-h: 62px;
  --shell: 1320px;
  --gut:   clamp(20px, 4.4vw, 64px);
  --sec:   clamp(64px, 8vw, 132px);

  --ease: cubic-bezier(.24,.62,.28,1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.012em; }
/* Fraunces is a variable face — flatten its playful axes for an institutional tone */
h1,h2,h3,h4,
.hero h1,.vision-quote,.statement,.pullquote,.rung .yr,.entry .e-yr,.era-head .era-no,
.glance-item .g-v,.principle .p-no,.channels .ch-v,.nextlink .nl-t,.site-menu li a,
.brand .mark,.card-contact .c-name,.reader-body > p:first-of-type::first-letter{
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
button{ font:inherit; color:inherit; }
strong,b{ font-weight:600; }
::selection{ background:var(--copper); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:3px;
  border-radius:2px;
}
.on-dark :focus-visible,
.site-menu :focus-visible,
.site-footer :focus-visible{ outline-color:var(--copper-light); }

.skip-link{
  position:absolute; left:12px; top:-100px; z-index:2000;
  background:var(--pine); color:var(--paper);
  padding:12px 20px; font-size:var(--t-small); font-weight:600;
  text-decoration:none; transition:top .18s var(--ease);
}
.skip-link:focus{ top:12px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.shell--wide{ max-width:1560px; }
.shell--tight{ max-width:940px; }

.band{ padding-block:var(--sec); position:relative; }
.band--pine{ background:var(--pine); color:var(--stone); }
.band--pine-deep{ background:var(--pine-deep); color:var(--stone); }
.band--paper{ background:var(--paper); }
.band--stone{ background:var(--stone); }
.band--slim{ padding-block:clamp(44px,5vw,80px); }

.rule-top{ border-top:1px solid var(--rule); }
.band--pine.rule-top,.band--pine-deep.rule-top{ border-top-color:var(--rule-dark); }

/* Eyebrow: numbered small-caps label with a hairline */
.eyebrow{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--sans);
  font-size:var(--t-micro);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--copper);
  margin:0 0 clamp(20px,2.4vw,34px);
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px; background:var(--rule-strong);
  transform:translateY(-3px);
}
.eyebrow .num{
  font-variant-numeric:tabular-nums;
  color:var(--ink-muted);
  font-weight:500;
}
.on-dark .eyebrow,.band--pine .eyebrow,.band--pine-deep .eyebrow{ color:var(--copper-light); }
.on-dark .eyebrow::after,.band--pine .eyebrow::after,.band--pine-deep .eyebrow::after{ background:var(--rule-dark-2); }
.on-dark .eyebrow .num,.band--pine .eyebrow .num,.band--pine-deep .eyebrow .num{ color:var(--sage); }

.kicker{
  font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--copper);
}
.band--pine .kicker,.band--pine-deep .kicker,.on-dark .kicker{ color:var(--copper-light); }

.lede{
  font-size:var(--t-lead);
  line-height:1.56;
  color:var(--ink-soft);
  max-width:62ch;
}
.band--pine .lede,.band--pine-deep .lede,.on-dark .lede{ color:var(--stone); }

.prose{ max-width:68ch; }
.prose p{ color:var(--ink-soft); }
.band--pine .prose p,.on-dark .prose p{ color:var(--stone); }
.prose h3{
  font-size:var(--t-3); margin:2.1em 0 .55em; color:var(--ink);
}
.band--pine .prose h3,.on-dark .prose h3{ color:var(--paper); }

/* Inline text link */
.tlink{
  color:var(--copper-deep);
  text-decoration:none;
  border-bottom:1px solid rgba(151,97,63,.42);
  padding-bottom:1px;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tlink:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.band--pine .tlink,.on-dark .tlink{ color:var(--copper-light); border-bottom-color:rgba(192,138,94,.5); }
.band--pine .tlink:hover,.on-dark .tlink:hover{ color:var(--paper); border-bottom-color:var(--paper); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  padding:16px 26px;
  text-decoration:none;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  transition:background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
  cursor:pointer;
}
.btn .arw{ transition:transform .28s var(--ease); display:inline-block; }
.btn:hover .arw{ transform:translateX(5px); }
.btn:hover{ background:var(--copper-deep); border-color:var(--copper-deep); color:var(--paper); }

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

.btn--light{ background:var(--paper); color:var(--pine-deep); border-color:var(--paper); }
.btn--light:hover{ background:var(--copper-light); border-color:var(--copper-light); color:var(--pine-deep); }

.btn--ghost-light{ background:transparent; color:var(--stone); border-color:var(--rule-dark-2); }
.btn--ghost-light:hover{ background:var(--stone); border-color:var(--stone); color:var(--pine-deep); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3vw,40px); }

/* "More" arrow link */
.more{
  display:inline-flex; align-items:center; gap:11px;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  text-decoration:none; color:var(--copper-deep);
  padding-bottom:7px; border-bottom:1px solid var(--rule-strong);
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.more .arw{ transition:transform .28s var(--ease); }
.more:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.more:hover .arw{ transform:translateX(5px); }
.band--pine .more,.band--pine-deep .more,.on-dark .more{ color:var(--copper-light); border-bottom-color:var(--rule-dark-2); }
.band--pine .more:hover,.band--pine-deep .more:hover,.on-dark .more:hover{ color:var(--paper); border-bottom-color:var(--paper); }

/* --------------------------------------------------------------------------
   5. PLATE — the archival image mount (never crops)
   -------------------------------------------------------------------------- */
.plate{
  margin:0;
  background:var(--stone);
  border:1px solid var(--rule-strong);
  padding:clamp(9px,1.1vw,16px);
  position:relative;
}
.plate > img{
  width:100%; height:auto;
  background:var(--stone-deep);
}
.plate figcaption{
  font-size:var(--t-micro);
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-muted);
  padding-top:12px;
  margin-top:12px;
  border-top:1px solid var(--rule-strong);
  line-height:1.5;
}
.plate--pine{ background:var(--pine-soft); border-color:var(--rule-dark-2); }
.plate--pine > img{ background:var(--pine-soft); }
.plate--pine figcaption{ color:var(--sage); border-top-color:var(--rule-dark-2); }
.plate--plain{ background:transparent; border:0; padding:0; }
.plate--plain figcaption{ border-top-color:var(--rule); }

/* Corner tick detail */
.plate::after{
  content:""; position:absolute; right:-1px; top:-1px;
  width:14px; height:14px;
  border-top:1px solid var(--copper); border-right:1px solid var(--copper);
}
.plate--pine::after{ border-color:var(--copper-light); }
.plate--plain::after{ display:none; }

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  height:var(--nav-h);
  background:rgba(244,240,230,.92);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-nav.is-stuck{ box-shadow:0 1px 0 var(--rule), 0 10px 30px -22px rgba(20,24,15,.45); }
.nav-inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:1560px; margin-inline:auto;
  padding-inline:var(--gut);
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.brand .mark{
  width:30px; height:30px; flex:0 0 30px;
  border:1px solid var(--ink);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:.82rem; letter-spacing:.02em;
  transition:background .24s var(--ease), color .24s var(--ease);
}
.brand:hover .mark{ background:var(--ink); color:var(--paper); }
.brand .bname{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  line-height:1.25;
}
.brand .brole{
  display:block;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--ink-muted);
}

.nav-list{ display:none; align-items:stretch; gap:clamp(10px,1.1vw,18px); height:100%; }
.nav-list a{
  position:relative;
  display:flex; align-items:center; gap:7px;
  height:100%;
  padding:0 4px;
  text-decoration:none;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted);
  transition:color .22s var(--ease);
  white-space:nowrap;
}
.nav-list a .n{
  display:none;
  font-size:.55rem; letter-spacing:.06em; color:var(--stone-deep);
  font-variant-numeric:tabular-nums;
  transition:color .22s var(--ease);
  transform:translateY(-5px);
}
@media (min-width:1340px){ .nav-list a .n{ display:inline; } }
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--copper); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav-list a:hover{ color:var(--ink); }
.nav-list a:hover .n{ color:var(--copper); }
.nav-list a:hover::after{ transform:scaleX(1); }
.nav-list a[aria-current="page"]{ color:var(--ink); }
.nav-list a[aria-current="page"] .n{ color:var(--copper); }
.nav-list a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-toggle{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:1px solid var(--rule-strong);
  padding:9px 15px; cursor:pointer;
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.nav-toggle:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.nav-toggle .bars{ display:grid; gap:4px; width:15px; }
.nav-toggle .bars i{ display:block; height:1.5px; background:currentColor; transition:transform .26s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* Full-screen menu panel */
.site-menu{
  position:fixed; inset:0; z-index:880;
  background:var(--pine-deep);
  color:var(--stone);
  padding:calc(var(--nav-h) + 26px) var(--gut) 34px;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.site-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.site-menu ol{ border-top:1px solid var(--rule-dark); max-width:640px; }
.site-menu li{ border-bottom:1px solid var(--rule-dark); }
.site-menu li a{
  display:flex; align-items:baseline; gap:16px;
  padding:clamp(13px,2.1vw,20px) 2px;
  text-decoration:none;
  font-family:var(--serif);
  font-size:clamp(1.5rem,6.4vw,2.3rem);
  line-height:1.1;
  color:var(--stone);
  transition:color .22s var(--ease), padding-left .3s var(--ease);
}
.site-menu li a .n{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; font-weight:600;
  color:var(--sage-deep); flex:0 0 26px;
}
.site-menu li a:hover,.site-menu li a[aria-current="page"]{ color:var(--copper-light); padding-left:12px; }
.site-menu li a[aria-current="page"] .n{ color:var(--copper-light); }
.menu-foot{
  margin-top:clamp(26px,4vw,44px);
  padding-top:20px; border-top:1px solid var(--rule-dark);
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage); line-height:2;
}
.menu-foot a{ color:var(--stone); text-decoration:none; border-bottom:1px solid var(--rule-dark-2); }
.menu-foot a:hover{ color:var(--copper-light); }

body.menu-open{ overflow:hidden; }

@media (min-width:1080px){
  .nav-list{ display:flex; }
  .nav-toggle{ display:none; }
  .site-menu{ display:none; }
}

/* --------------------------------------------------------------------------
   7. PAGE MASTHEAD (shared by internal pages, tuned per page)
   -------------------------------------------------------------------------- */
.page-top{ padding-top:calc(var(--nav-h) + clamp(48px,6vw,96px)); }

.page-top--pb{ padding-bottom:clamp(44px,5vw,86px); }
.page-title{
  font-size:clamp(2.4rem,1.1rem + 5.2vw,5rem);
  line-height:.96; letter-spacing:-.03em;
  max-width:15ch;
  margin-bottom:clamp(18px,2vw,26px);
}
.page-title--wide{ max-width:19ch; }

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--ink-muted);
  margin-bottom:clamp(26px,3vw,44px);
}
.crumb a{ text-decoration:none; color:var(--ink-muted); border-bottom:1px solid transparent; }
.crumb a:hover{ color:var(--copper-deep); border-bottom-color:var(--copper-deep); }
.crumb span[aria-current]{ color:var(--ink); }
.crumb .sep{ color:var(--stone-deep); }
.on-dark .crumb,.band--pine .crumb{ color:var(--sage); }
.on-dark .crumb a,.band--pine .crumb a{ color:var(--sage); }
.on-dark .crumb span[aria-current],.band--pine .crumb span[aria-current]{ color:var(--paper); }
.on-dark .crumb .sep,.band--pine .crumb .sep{ color:var(--sage-deep); }

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--pine-deep);
  color:var(--stone);
  padding-top:clamp(56px,6.4vw,92px);
  padding-bottom:30px;
}
.foot-top{
  display:grid; gap:clamp(30px,4vw,56px);
  padding-bottom:clamp(36px,4vw,56px);
  border-bottom:1px solid var(--rule-dark);
}
.foot-mark h2{
  font-size:clamp(1.9rem,5.2vw,3rem);
  color:var(--paper);
  margin-bottom:14px;
}
.foot-mark p{ color:var(--sage); max-width:34ch; font-size:var(--t-small); line-height:1.72; }

.foot-cols{ display:grid; gap:clamp(28px,3.4vw,44px); }
.foot-col h3{
  font-family:var(--sans);
  font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--copper-light);
  margin-bottom:18px;
}
.foot-nav li + li{ margin-top:9px; }
.foot-nav a{
  text-decoration:none; color:var(--stone); font-size:var(--t-small);
  border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.foot-nav a:hover{ color:var(--copper-light); border-bottom-color:var(--copper-light); }

.foot-contact{ font-size:var(--t-small); line-height:1.9; }
.foot-contact dt{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-deep); margin-top:12px;
}
.foot-contact dt:first-child{ margin-top:0; }
.foot-contact dd{ margin:0 0 2px; color:var(--stone); }
.foot-contact a{ color:var(--stone); text-decoration:none; border-bottom:1px solid var(--rule-dark-2); }
.foot-contact a:hover{ color:var(--copper-light); border-bottom-color:var(--copper-light); }

.socials{ display:flex; flex-wrap:wrap; gap:10px; }
.socials .s{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--rule-dark-2);
  color:var(--stone);
  text-decoration:none;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.socials .s svg{ width:17px; height:17px; fill:currentColor; }
.socials a.s:hover{ background:var(--copper-light); border-color:var(--copper-light); color:var(--pine-deep); transform:translateY(-2px); }
.socials .s--static{ color:var(--sage-deep); border-style:dashed; cursor:default; }
.social-note{
  font-size:.66rem; letter-spacing:.06em; color:var(--sage-deep);
  margin-top:14px; line-height:1.6; max-width:32ch;
}

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; align-items:center;
  padding-top:24px;
  font-size:var(--t-micro); letter-spacing:.1em;
  color:var(--sage);
  text-transform:uppercase;
}
.foot-bottom a{ color:var(--stone); text-decoration:none; border-bottom:1px solid var(--rule-dark-2); }
.foot-bottom a:hover{ color:var(--copper-light); border-bottom-color:var(--copper-light); }

@media (min-width:720px){
  .foot-cols{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .foot-top{ grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr); align-items:start; }
}

/* --------------------------------------------------------------------------
   9. HOME
   -------------------------------------------------------------------------- */
/* 9.1 Hero — "The Portrait" */
.hero{
  padding-top:var(--nav-h);
  background:var(--parchment);
  border-bottom:1px solid var(--rule);
}
.hero-grid{
  display:grid;
  align-items:stretch;
}
.hero-text{
  padding:clamp(44px,6vw,92px) var(--gut) clamp(48px,6vw,96px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero-meta{
  display:flex; align-items:center; gap:14px;
  font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--copper); margin-bottom:clamp(22px,2.6vw,34px);
}
.hero-meta::after{ content:""; flex:1; height:1px; background:var(--rule-strong); }
.hero h1{
  font-size:var(--t-hero);
  line-height:.94;
  letter-spacing:-.028em;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.hero h1 .ln{ display:block; }
.hero h1 .ln--2{ font-style:italic; color:var(--copper-deep); }
.hero-role{
  font-size:clamp(1rem,.94rem + .3vw,1.16rem);
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
  padding-bottom:clamp(20px,2.4vw,28px);
  margin-bottom:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--rule);
  max-width:34ch;
}
.hero-role em{ font-family:var(--serif); font-style:italic; color:var(--copper-deep); font-weight:400; }
.hero-intro{ max-width:46ch; color:var(--ink-soft); }

.hero-figure{
  background:var(--pine);
  padding:clamp(24px,3vw,48px);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero-figure::before{
  content:""; position:absolute; inset:clamp(14px,1.6vw,26px);
  border:1px solid var(--rule-dark-2); pointer-events:none;
}
.hero-figure figure{ margin:0; position:relative; width:100%; max-width:620px; z-index:1; }
.hero-figure img{ width:100%; height:auto; }
.hero-figure figcaption{
  margin-top:16px; padding-top:12px;
  border-top:1px solid var(--rule-dark-2);
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage); line-height:1.6;
}

@media (min-width:900px){
  .hero-grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); }
  .hero-text{ padding-left:max(var(--gut), calc((100vw - var(--shell))/2 + var(--gut))); }
}

/* 9.2 At a glance — information band */
.glance{ background:var(--pine); color:var(--stone); }
.glance-grid{
  display:grid; gap:0;
  border-top:1px solid var(--rule-dark);
}
.glance-item{
  padding:clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--rule-dark);
}
.glance-item .g-k{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--copper-light); display:block; margin-bottom:14px;
}
.glance-item .g-v{
  font-family:var(--serif);
  font-size:clamp(1.55rem,1rem + 2vw,2.5rem);
  line-height:1.02;
  color:var(--paper);
  display:block; margin-bottom:10px;
}
.glance-item .g-d{ font-size:var(--t-small); color:var(--sage); line-height:1.62; max-width:30ch; }

@media (min-width:640px){
  .glance-grid{ grid-template-columns:repeat(2,1fr); column-gap:clamp(24px,3vw,48px); }
}
@media (min-width:1024px){
  .glance-grid{ grid-template-columns:repeat(4,1fr); }
  .glance-item{ padding-inline-end:clamp(16px,2vw,30px); }
  .glance-item + .glance-item{ padding-inline-start:clamp(24px,3vw,44px); border-left:1px solid var(--rule-dark); }
}

/* 9.3 Journey ladder */
.ladder{ display:grid; gap:0; margin-top:clamp(12px,2vw,24px); }
.rung{
  display:grid; gap:6px 26px;
  padding:clamp(22px,2.6vw,34px) 0;
  border-top:1px solid var(--rule);
  align-items:start;
  transition:background .3s var(--ease);
}
.rung:last-child{ border-bottom:1px solid var(--rule); }
.rung .yr{
  font-family:var(--serif);
  font-size:clamp(1.7rem,1rem + 2.4vw,2.9rem);
  line-height:.95;
  color:var(--copper-deep);
  font-variant-numeric:tabular-nums;
}
.rung h3{ font-size:var(--t-3); margin-bottom:8px; }
.rung p{ color:var(--ink-muted); max-width:56ch; font-size:var(--t-small); line-height:1.7; }
@media (min-width:760px){
  .rung{ grid-template-columns:minmax(150px,180px) minmax(0,1fr); }
  .rung:nth-child(even){ padding-left:clamp(0px,3vw,44px); }
}

/* 9.4 Split feature bands (leadership / legislative / development) */
.split{
  display:grid; gap:clamp(30px,4vw,64px);
  align-items:center;
}
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split--wide-text{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .split--wide-img{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .split--flip .split-media{ order:-1; }
}
.split h2:not(.eyebrow){ font-size:var(--t-1); margin-bottom:clamp(16px,2vw,24px); }
.split .lede{ margin-bottom:clamp(18px,2vw,26px); }

/* Large section heading + emphasis, used across pages */
.h-lg{ font-size:var(--t-1); margin-bottom:clamp(16px,2vw,24px); }
.h-em{ font-style:italic; color:var(--copper-deep); }
.on-dark .h-em,.band--pine .h-em,.band--pine-deep .h-em{ color:var(--copper-light); }
.on-dark h1,.on-dark h2,.on-dark h3,
.band--pine h1,.band--pine h2,.band--pine h3,
.band--pine-deep h1,.band--pine-deep h2,.band--pine-deep h3{ color:var(--paper); }

/* Fact list used inside split bands */
.facts{ border-top:1px solid var(--rule); margin-top:clamp(22px,2.6vw,32px); }
.facts li{ display:grid; gap:4px 22px; padding:14px 0; border-bottom:1px solid var(--rule); }
.facts .f-k{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
}
.facts .f-v{ font-size:var(--t-small); color:var(--ink-soft); line-height:1.6; }
@media (min-width:560px){ .facts li{ grid-template-columns:minmax(140px,.42fr) minmax(0,1fr); align-items:baseline; } }
.band--pine .facts,.on-dark .facts{ border-top-color:var(--rule-dark); }
.band--pine .facts li,.on-dark .facts li{ border-bottom-color:var(--rule-dark); }
.band--pine .facts .f-k,.on-dark .facts .f-k{ color:var(--copper-light); }
.band--pine .facts .f-v,.on-dark .facts .f-v{ color:var(--stone); }

/* 9.5 Vision panel */
.vision-panel{ background:var(--stone); }
.vision-quote{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1rem + 2.3vw,2.65rem);
  line-height:1.2;
  letter-spacing:-.015em;
  max-width:22ch;
  color:var(--ink);
}
.vision-cols{ display:grid; gap:clamp(28px,3.4vw,56px); }
@media (min-width:880px){ .vision-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }

/* 9.6 Connect closing */
.connect{ background:var(--pine-deep); color:var(--stone); }
.connect h2:not(.eyebrow){
  font-size:clamp(3rem,1.4rem + 7vw,7rem);
  line-height:.9; letter-spacing:-.03em;
  color:var(--paper);
  margin-bottom:clamp(22px,2.6vw,34px);
}
.connect .lede{ max-width:48ch; }

/* --------------------------------------------------------------------------
   10. ABOUT — long-form editorial
   -------------------------------------------------------------------------- */
.about-open{ background:var(--paper); }
.about-open-grid{ display:grid; gap:clamp(30px,4vw,60px); align-items:end; }
.about-open h1{
  font-size:clamp(2.4rem,1.1rem + 5.2vw,5rem);
  line-height:.96; letter-spacing:-.028em;
  margin-bottom:clamp(18px,2vw,26px);
}
.about-open h1 em{ font-style:italic; color:var(--copper-deep); }
@media (min-width:940px){
  .about-open-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
}

/* Reading column with margin notes */
.reader{ display:grid; gap:clamp(30px,3.4vw,54px); }
.reader-body{ max-width:66ch; }
.reader-body > p:first-of-type::first-letter{
  float:left;
  font-family:var(--serif);
  font-size:3.9em;
  line-height:.82;
  padding:.06em .14em 0 0;
  color:var(--copper-deep);
}
.reader-body h2{
  font-size:var(--t-2);
  margin:clamp(38px,4vw,64px) 0 clamp(14px,1.6vw,20px);
  padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--rule);
}
.reader-body h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.reader-body h3{ font-size:var(--t-3); margin:2em 0 .5em; }
.reader-body p{ color:var(--ink-soft); }

.aside-stack{ display:grid; gap:clamp(22px,2.6vw,34px); align-content:start; }
.note{
  border-left:2px solid var(--copper);
  padding:2px 0 2px 20px;
}
.note h4{
  font-family:var(--sans);
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep); margin:0 0 10px;
}
.note p{ font-size:var(--t-small); color:var(--ink-muted); line-height:1.7; margin:0; }
.note dl{ margin:0; font-size:var(--t-small); }
.note dt{ font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-top:12px; }
.note dt:first-child{ margin-top:0; }
.note dd{ margin:0 0 3px; color:var(--ink); }

@media (min-width:1000px){
  .reader{ grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:clamp(40px,4.4vw,80px); }
}

.pullquote{
  font-family:var(--serif);
  font-size:clamp(1.4rem,1rem + 1.9vw,2.3rem);
  line-height:1.24; letter-spacing:-.015em;
  color:var(--ink);
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
  padding:clamp(26px,3vw,42px) 0;
  margin:clamp(36px,4vw,60px) 0;
  max-width:26ch;
}
.pullquote .src{
  display:block; margin-top:18px;
  font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--copper-deep);
}

/* Archival separator */
.sep-rule{
  display:flex; align-items:center; gap:16px;
  margin:clamp(40px,4.6vw,72px) 0;
  color:var(--copper);
  font-size:var(--t-micro); letter-spacing:.28em; text-transform:uppercase; font-weight:600;
}
.sep-rule::before,.sep-rule::after{ content:""; height:1px; background:var(--rule-strong); flex:1; }

/* --------------------------------------------------------------------------
   11. POLITICAL JOURNEY — chronological archive
   -------------------------------------------------------------------------- */
.era{ position:relative; }
.era + .era{ border-top:1px solid var(--rule); }
.era-grid{ display:grid; gap:clamp(24px,3vw,48px); padding-block:clamp(46px,5vw,86px); }
.era-head{ align-self:start; }
.era-head .era-no{
  font-family:var(--serif);
  font-size:clamp(3.4rem,2rem + 5vw,7rem);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--rule-strong);
  display:block; margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.era-head h2{ font-size:var(--t-2); margin-bottom:10px; }
.era-head .era-span{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
}
@media (min-width:900px){
  .era-grid{ grid-template-columns:minmax(230px,300px) minmax(0,1fr); }
  .era-head{ position:sticky; top:calc(var(--nav-h) + 34px); }
}

.entries{ display:grid; gap:clamp(28px,3vw,44px); }
.entry{ display:grid; gap:10px 28px; }
.entry .e-yr{
  font-family:var(--serif);
  font-size:clamp(1.35rem,1rem + 1.1vw,1.85rem);
  color:var(--copper-deep); line-height:1;
  font-variant-numeric:tabular-nums;
  padding-top:.12em;
}
.entry h3{ font-size:var(--t-3); margin-bottom:9px; }
.entry p{ color:var(--ink-soft); font-size:var(--t-small); line-height:1.74; max-width:60ch; }
.entry .e-tag{
  display:inline-block; margin-top:12px;
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted);
  border:1px solid var(--rule-strong); padding:5px 11px;
}
@media (min-width:620px){
  .entry{ grid-template-columns:minmax(92px,110px) minmax(0,1fr); }
}

.record-strip{ background:var(--stone); }
.record-strip .plate{ background:var(--paper); }

/* Dark era block */
.era.on-dark .era-no{ -webkit-text-stroke-color:var(--rule-dark-2); }
.era.on-dark .era-span{ color:var(--copper-light); }
.era.on-dark .entry .e-yr{ color:var(--copper-light); }
.era.on-dark .entry h3{ color:var(--paper); }
.era.on-dark .entry p{ color:var(--stone); }
.era.on-dark .entry .e-tag{ color:var(--sage); border-color:var(--rule-dark-2); }
.era.on-dark + .era,.era + .era.on-dark{ border-top-color:transparent; }

/* --------------------------------------------------------------------------
   12. LEADERSHIP — typographic narrative
   -------------------------------------------------------------------------- */
.lead-hero{ background:var(--pine); color:var(--stone); }
.lead-hero h1{
  font-size:clamp(2.5rem,1.1rem + 5.6vw,5.4rem);
  line-height:.96; letter-spacing:-.03em; color:var(--paper);
  max-width:16ch;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.lead-hero h1 em{ font-style:italic; color:var(--copper-light); }

.statement{
  font-family:var(--serif);
  font-size:clamp(1.55rem,1rem + 2.6vw,3.1rem);
  line-height:1.16; letter-spacing:-.02em;
  max-width:20ch;
}
.statement--dark{ color:var(--paper); }

.srsa{ display:grid; gap:0; border-top:1px solid var(--rule); margin-top:clamp(26px,3vw,40px); }
.srsa-step{
  display:grid; gap:8px 30px;
  padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--rule);
}
.srsa-step .s-k{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
  display:flex; align-items:baseline; gap:10px;
}
.srsa-step .s-k .dot{ width:5px; height:5px; background:var(--copper); border-radius:50%; }
.srsa-step dd{ margin:0; }
.srsa-step p{ font-size:var(--t-small); color:var(--ink-soft); line-height:1.74; max-width:62ch; }
@media (min-width:680px){ .srsa-step{ grid-template-columns:minmax(160px,200px) minmax(0,1fr); } }
.on-dark .srsa,.band--pine .srsa{ border-top-color:var(--rule-dark); }
.on-dark .srsa-step,.band--pine .srsa-step{ border-bottom-color:var(--rule-dark); }
.on-dark .srsa-step .s-k,.band--pine .srsa-step .s-k{ color:var(--copper-light); }
.on-dark .srsa-step .s-k .dot,.band--pine .srsa-step .s-k .dot{ background:var(--copper-light); }
.on-dark .srsa-step p,.band--pine .srsa-step p{ color:var(--stone); }

.principles{ display:grid; gap:0; border-top:1px solid var(--rule); }
.principle{
  display:grid; gap:10px 34px;
  padding:clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--rule);
}
.principle .p-no{
  font-family:var(--serif); font-size:clamp(1.6rem,1rem + 1.6vw,2.3rem);
  color:transparent; -webkit-text-stroke:1px var(--copper);
  line-height:.9; font-variant-numeric:tabular-nums;
}
.principle h3{ font-size:var(--t-3); margin-bottom:10px; }
.principle p{ color:var(--ink-soft); font-size:var(--t-small); line-height:1.74; max-width:66ch; }
@media (min-width:760px){ .principle{ grid-template-columns:minmax(80px,110px) minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   13. LEGISLATIVE WORK — document language
   -------------------------------------------------------------------------- */
.doc-head{ background:var(--paper); border-bottom:1px solid var(--rule); }
.doc-head h1{
  font-size:clamp(2.3rem,1.1rem + 4.8vw,4.6rem);
  line-height:.98; letter-spacing:-.028em; max-width:16ch;
  margin-bottom:clamp(18px,2vw,26px);
}
.doc-meta{
  display:grid; gap:0;
  border-top:1px solid var(--rule-strong);
  margin-top:clamp(30px,3.4vw,48px);
}
.doc-meta div{
  padding:16px 0; border-bottom:1px solid var(--rule);
  display:grid; gap:4px 24px;
}
.doc-meta dt{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted);
}
.doc-meta dd{ margin:0; font-size:var(--t-small); color:var(--ink); font-weight:500; }
@media (min-width:560px){
  .doc-meta div{ grid-template-columns:minmax(180px,240px) minmax(0,1fr); align-items:baseline; }
}
@media (min-width:1024px){
  .doc-meta{ grid-template-columns:repeat(2,1fr); column-gap:clamp(32px,4vw,72px); }
}

/* Record table */
.table-hint{
  display:none;
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep); margin-bottom:16px;
}
@media (max-width:900px){ .table-hint{ display:block; } }
.record-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--rule-strong); }
.record-wrap:focus-visible{ outline:2px solid var(--copper); outline-offset:4px; }
table.record{
  width:100%; min-width:620px;
  border-collapse:collapse;
  font-size:var(--t-small);
}
table.record caption{
  text-align:left; padding-bottom:16px;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
}
table.record th,table.record td{
  text-align:left; padding:15px 18px 15px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
table.record thead th{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted);
  border-bottom:1px solid var(--rule-strong);
  padding-top:0;
}
table.record tbody th{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
table.record td{ color:var(--ink-soft); }
table.record .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
table.record tbody tr:hover td,table.record tbody tr:hover th{ background:rgba(151,97,63,.05); }
.table-note{ font-size:var(--t-micro); color:var(--ink-muted); letter-spacing:.04em; margin-top:16px; line-height:1.7; }

/* Office cards, document style */
.offices{ display:grid; gap:0; border-top:1px solid var(--rule-strong); }
.office{
  padding:clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--rule);
  display:grid; gap:12px 40px;
}
.office .o-term{
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
  font-variant-numeric:tabular-nums;
}
.office h3{ font-size:var(--t-3); margin-bottom:10px; }
.office p{ font-size:var(--t-small); color:var(--ink-soft); line-height:1.74; max-width:62ch; }
@media (min-width:820px){ .office{ grid-template-columns:minmax(150px,190px) minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   14. DEVELOPMENT — impact storytelling
   -------------------------------------------------------------------------- */
.dev-hero{ background:var(--pine-deep); color:var(--stone); }
.dev-hero h1{
  font-size:clamp(2.4rem,1.1rem + 5.2vw,5rem);
  line-height:.97; letter-spacing:-.03em; color:var(--paper); max-width:15ch;
  margin-bottom:clamp(18px,2vw,26px);
}
.dev-hero h1 em{ font-style:italic; color:var(--copper-light); }

.crs{ display:grid; gap:0; border-top:1px solid var(--rule); margin-top:clamp(20px,2.4vw,30px); }
.crs > div{
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--rule);
  display:grid; gap:6px 28px;
}
.crs dt{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
}
.crs dd{ margin:0; font-size:var(--t-small); color:var(--ink-soft); line-height:1.74; max-width:60ch; }
@media (min-width:640px){ .crs > div{ grid-template-columns:minmax(130px,160px) minmax(0,1fr); } }

.work-list{ border-top:1px solid var(--rule-strong); }
.work-list li{
  display:grid; gap:6px 34px;
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--rule);
}
.work-list .w-loc{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
}
.work-list h3{ font-size:1.06rem; font-family:var(--sans); font-weight:600; letter-spacing:-.005em; margin-bottom:6px; }
.work-list p{ font-size:var(--t-small); color:var(--ink-muted); line-height:1.7; max-width:66ch; }
@media (min-width:700px){ .work-list li{ grid-template-columns:minmax(150px,200px) minmax(0,1fr); } }

.pillars{ display:grid; gap:clamp(24px,3vw,40px); }
.pillar{ border-top:2px solid var(--copper); padding-top:clamp(18px,2vw,26px); }
.pillar h3{ font-size:var(--t-3); margin-bottom:12px; }
.pillar p{ font-size:var(--t-small); color:var(--ink-soft); line-height:1.72; }
.band--pine .pillar p,.on-dark .pillar p{ color:var(--stone); }
.band--pine .pillar,.on-dark .pillar{ border-top-color:var(--copper-light); }
@media (min-width:700px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .pillars--3{ grid-template-columns:repeat(3,1fr); } }

/* --------------------------------------------------------------------------
   15. VISION
   -------------------------------------------------------------------------- */
.vis-hero{ background:var(--stone); }
.vis-hero h1{
  font-size:clamp(2.5rem,1.1rem + 5.6vw,5.4rem);
  line-height:.95; letter-spacing:-.03em; max-width:14ch;
  margin-bottom:clamp(20px,2.2vw,30px);
}
.vis-hero h1 em{ font-style:italic; color:var(--copper-deep); }

.horizon{ display:grid; gap:0; }
.horizon-item{
  padding:clamp(30px,3.4vw,52px) 0;
  border-top:1px solid var(--rule);
  display:grid; gap:14px 44px;
}
.horizon-item:last-child{ border-bottom:1px solid var(--rule); }
.horizon-item .h-no{
  font-family:var(--sans);
  font-size:var(--t-micro); letter-spacing:.2em; font-weight:600;
  color:var(--copper-deep); font-variant-numeric:tabular-nums;
}
.horizon-item h2{ font-size:var(--t-2); margin-bottom:12px; }
.horizon-item p{ color:var(--ink-soft); max-width:60ch; }
@media (min-width:860px){
  .horizon-item{ grid-template-columns:minmax(70px,100px) minmax(0,.9fr) minmax(0,1.1fr); align-items:start; }
  .horizon-item h2{ margin-bottom:0; }
}

.closing-note{
  background:var(--pine); color:var(--stone);
}
.closing-note .statement{ color:var(--paper); max-width:24ch; }

/* --------------------------------------------------------------------------
   16. CONTACT
   -------------------------------------------------------------------------- */
.contact-hero{ background:var(--paper); }
.contact-hero h1{
  font-size:clamp(3.4rem,1.4rem + 8.4vw,8.5rem);
  line-height:.86; letter-spacing:-.038em;
  margin-bottom:clamp(20px,2.4vw,32px);
}
.contact-hero h1 em{ font-style:italic; color:var(--copper-deep); display:block; }

.contact-grid{ display:grid; gap:clamp(34px,4vw,70px); align-items:start; }
@media (min-width:960px){
  .contact-grid{ grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); }
}

.card-contact{
  border-top:2px solid var(--ink);
  padding-top:clamp(22px,2.4vw,32px);
}
.card-contact .c-name{
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.2rem);
  line-height:1.1; margin-bottom:6px;
}
.card-contact .c-role{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep); margin-bottom:clamp(22px,2.4vw,32px); display:block;
}
.channels{ border-top:1px solid var(--rule); }
.channels li{ border-bottom:1px solid var(--rule); }
.channels a{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(18px,2.2vw,26px) 0;
  text-decoration:none; color:var(--ink);
  transition:padding-left .3s var(--ease), color .22s var(--ease);
}
.channels a:hover{ padding-left:10px; color:var(--copper-deep); }
.channels .ch-k{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted); display:block; margin-bottom:7px;
  transition:color .22s var(--ease);
}
.channels a:hover .ch-k{ color:var(--copper-deep); }
.channels .ch-v{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);
  line-height:1.15; word-break:break-word;
}
.channels .arw{ flex:0 0 auto; color:var(--copper); transition:transform .3s var(--ease); }
.channels a:hover .arw{ transform:translateX(6px); }

/* --------------------------------------------------------------------------
   17. PAGE-TO-PAGE FOOTER LINK (next page)
   -------------------------------------------------------------------------- */
.nextlink{ background:var(--stone); border-top:1px solid var(--rule-strong); }
.nextlink a{
  display:flex; flex-wrap:wrap; gap:14px 30px; align-items:baseline; justify-content:space-between;
  padding:clamp(30px,3.4vw,50px) 0;
  text-decoration:none; color:var(--ink);
  transition:color .22s var(--ease);
}
.nextlink a:hover{ color:var(--copper-deep); }
.nextlink .nl-k{
  font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted);
}
.nextlink .nl-t{
  font-family:var(--serif);
  font-size:clamp(1.7rem,1.1rem + 2.4vw,3rem);
  line-height:1;
}
.nextlink .arw{ font-size:1.4rem; color:var(--copper); transition:transform .3s var(--ease); }
.nextlink a:hover .arw{ transform:translateX(8px); }

/* --------------------------------------------------------------------------
   18. GATE (index.html)
   -------------------------------------------------------------------------- */
.gate{
  min-height:100svh;
  display:grid; place-items:center;
  padding:32px 22px;
  background:var(--parchment);
}
.gate-box{ width:100%; max-width:340px; }
.gate-label{
  display:block;
  font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted); margin-bottom:16px;
}
.gate-field{
  display:flex; align-items:stretch;
  border:1px solid var(--ink);
  background:var(--paper);
}
.gate-field input{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent;
  padding:15px 16px;
  font-family:var(--sans); font-size:1rem; letter-spacing:.16em;
  color:var(--ink);
}
.gate-field input:focus{ outline:none; }
.gate-field:focus-within{ box-shadow:0 0 0 2px rgba(151,97,63,.35); }
.gate-field button{
  flex:0 0 auto;
  border:0; border-left:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  padding:0 20px; cursor:pointer;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  transition:background .22s var(--ease);
}
.gate-field button:hover{ background:var(--copper-deep); }
.gate-msg{
  min-height:1.4em;
  margin-top:14px;
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--copper-deep);
  opacity:0; transition:opacity .2s var(--ease);
}
.gate-msg.show{ opacity:1; }
.gate-box.shake{ animation:gshake .34s var(--ease); }
@keyframes gshake{
  0%,100%{ transform:translateX(0); }
  22%{ transform:translateX(-7px); }
  55%{ transform:translateX(6px); }
  80%{ transform:translateX(-3px); }
}

/* --------------------------------------------------------------------------
   19. REVEAL ANIMATION
   -------------------------------------------------------------------------- */
/* Hidden only when scripting is available, so content never disappears
   if JavaScript fails to run. */
.js .rv{ opacity:0; transform:translateY(16px); }
.js .rv-on{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv-d1{ transition-delay:.07s; }
.rv-d2{ transition-delay:.14s; }
.rv-d3{ transition-delay:.21s; }

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

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */
.muted{ color:var(--ink-muted); }
.on-dark .muted,.band--pine .muted{ color:var(--sage); }
.h-md{ font-size:var(--t-3); margin-bottom:16px; }
.flush-top{ margin-top:0; }
.band--pt0{ padding-top:0; }
.mw-18{ max-width:18ch; }
.mt-s{ margin-top:clamp(18px,2vw,26px); }
.mt-m{ margin-top:clamp(28px,3.2vw,46px); }
.mt-l{ margin-top:clamp(40px,4.6vw,72px); }
.mb-m{ margin-bottom:clamp(28px,3.2vw,46px); }
.center{ text-align:center; }
.maxw-sm{ max-width:52ch; }
.stack-24{ display:grid; gap:24px; }