/* ==========================================================================
   rikmanmomin.com — "People, Place & Progress"
   Design system: indigo ink · cool ivory · muted coral · soft eucalyptus
   Type: Fraunces (editorial display) + Archivo (institutional grotesque)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* colour */
  --ink:#191C36;
  --ink-2:#252A4C;
  --ink-3:#111327;
  --ivory:#F4F2EC;
  --ivory-2:#EAE7DD;
  --ivory-3:#DEDACE;
  --coral:#C05540;
  --coral-2:#D97A63;
  --coral-wash:#F6E4DE;
  --euca:#5E8574;
  --euca-2:#87A899;
  --euca-wash:#E3ECE6;
  --graphite:#31333B;
  --body:#3A3D4C;
  --muted:#65697C;
  --rule:rgba(25,28,54,.16);
  --rule-soft:rgba(25,28,54,.09);
  --rule-inv:rgba(244,242,236,.22);

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

  /* spacing scale */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4.5rem; --s7:6.5rem; --s8:9rem;

  /* layout */
  --shell:min(1440px,100% - 5rem);
  --shell-narrow:min(1080px,100% - 5rem);
  --measure:66ch;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:1024px){ :root{ --shell:min(1440px,100% - 3rem); --shell-narrow:min(1080px,100% - 3rem); --header-h:66px; } }
@media (max-width:640px){  :root{ --shell:calc(100% - 2.5rem); --shell-narrow:calc(100% - 2.5rem); --header-h:62px; } }

/* ---------- 2. Reset / base --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--body);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;color:var(--ink);line-height:1.08;letter-spacing:-.015em;font-optical-sizing:auto;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
ul{margin:0;padding:0;}
hr{border:0;border-top:1px solid var(--rule);margin:0;}

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

/* skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--ivory);padding:.85rem 1.4rem;
  font:600 .75rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:1rem;top:1rem;}

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--coral);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- 3. Layout helpers ------------------------------------------- */
.shell{width:var(--shell);margin-inline:auto;}
.shell-n{width:var(--shell-narrow);margin-inline:auto;}
.band{padding-block:clamp(3.5rem,7vw,var(--s8));}
.band--tight{padding-block:clamp(2.75rem,5vw,var(--s6));}
.band--ink{background:var(--ink);color:rgba(244,242,236,.82);}
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink h4{color:var(--ivory);}
.band--ivory2{background:var(--ivory-2);}
.band--euca{background:var(--euca-wash);}
.rule-top{border-top:1px solid var(--rule);}

.measure{max-width:var(--measure);}
.lede{
  font-size:clamp(1.125rem,1.02rem + .5vw,1.45rem);
  line-height:1.6;color:var(--ink-2);font-weight:400;
  letter-spacing:-.006em;
}
.band--ink .lede{color:rgba(244,242,236,.9);}

/* ---------- 4. Type components ------------------------------------------ */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font:600 .6875rem/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;color:var(--euca);
  margin:0 0 1.35rem;
}
.band--ink .eyebrow{color:var(--euca-2);}
.eyebrow .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.85rem;height:1.85rem;border:1px solid currentColor;border-radius:50%;
  font-size:.625rem;letter-spacing:.04em;flex:none;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35;max-width:5rem;}

.h-hero{font-size:clamp(2.75rem,1.5rem + 5.6vw,6rem);line-height:.95;letter-spacing:-.03em;}
.h-xl{font-size:clamp(2.1rem,1.35rem + 3.2vw,3.9rem);line-height:1.02;letter-spacing:-.025em;}
.h-lg{font-size:clamp(1.7rem,1.28rem + 1.75vw,2.7rem);line-height:1.1;letter-spacing:-.02em;}
.h-md{font-size:clamp(1.3rem,1.15rem + .65vw,1.7rem);line-height:1.2;}
.h-sm{font-size:clamp(1.08rem,1.02rem + .3vw,1.28rem);line-height:1.28;}

.serif-quote{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.35rem,1.1rem + 1.35vw,2.35rem);
  line-height:1.3;letter-spacing:-.015em;color:var(--ink);
}
.band--ink .serif-quote{color:var(--ivory);}
.attrib{
  font:600 .6875rem/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-top:1.5rem;
}
.band--ink .attrib{color:var(--euca-2);}

.drop-lead::first-letter{
  font-family:var(--display);font-weight:500;
  float:left;font-size:4.4em;line-height:.78;
  padding:.06em .1em 0 0;color:var(--coral);
}

/* ---------- 5. Contour motif (Place) ------------------------------------ */
.contour{position:relative;overflow:hidden;}
.contour::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='360' viewBox='0 0 560 360'%3E%3Cg fill='none' stroke='%23191C36' stroke-width='1'%3E%3Cpath d='M-20 300C90 250 150 210 280 214s200 60 320 26'/%3E%3Cpath d='M-20 268C88 216 152 178 280 182s202 58 320 24'/%3E%3Cpath d='M-20 236C86 182 154 146 280 150s204 56 320 22'/%3E%3Cpath d='M-20 204C84 148 156 114 280 118s206 54 320 20'/%3E%3Cpath d='M-20 172C82 114 158 82 280 86s208 52 320 18'/%3E%3Cpath d='M-20 140C80 80 160 50 280 54s210 50 320 16'/%3E%3Cpath d='M-20 108C78 46 162 18 280 22s212 48 320 14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 360px;
  opacity:.055;
}
.band--ink .contour::before,.contour--inv::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='360' viewBox='0 0 560 360'%3E%3Cg fill='none' stroke='%23F4F2EC' stroke-width='1'%3E%3Cpath d='M-20 300C90 250 150 210 280 214s200 60 320 26'/%3E%3Cpath d='M-20 268C88 216 152 178 280 182s202 58 320 24'/%3E%3Cpath d='M-20 236C86 182 154 146 280 150s204 56 320 22'/%3E%3Cpath d='M-20 204C84 148 156 114 280 118s206 54 320 20'/%3E%3Cpath d='M-20 172C82 114 158 82 280 86s208 52 320 18'/%3E%3Cpath d='M-20 140C80 80 160 50 280 54s210 50 320 16'/%3E%3Cpath d='M-20 108C78 46 162 18 280 22s212 48 320 14'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.1;
}
.contour > *{position:relative;z-index:1;}

/* ---------- 6. Header / navigation -------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:90;
  background:rgba(244,242,236,.94);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead__in{
  width:var(--shell);margin-inline:auto;
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;}
.brand__mark{
  width:2.1rem;height:2.1rem;flex:none;
  display:grid;place-items:center;
  background:var(--coral);color:#fff;
  font:700 .7rem/1 var(--sans);letter-spacing:.02em;
}
.brand__name{
  font-family:var(--display);font-weight:500;font-size:1.02rem;
  letter-spacing:-.012em;color:var(--ink);white-space:nowrap;
}
.brand__name span{display:block;font:600 .5625rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--euca);}

.nav{display:flex;align-items:center;gap:.15rem;}
.nav a{
  position:relative;display:inline-flex;align-items:baseline;gap:.4rem;
  padding:.55rem .62rem;text-decoration:none;
  font:600 .7rem/1 var(--sans);letter-spacing:.115em;text-transform:uppercase;
  color:var(--ink-2);
  transition:color .25s var(--ease);
}
.nav a .idx{font-size:.5625rem;color:var(--euca);letter-spacing:.04em;transition:color .25s var(--ease);}
.nav a::after{
  content:"";position:absolute;left:.62rem;right:.62rem;bottom:.24rem;height:2px;
  background:var(--coral);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav a:hover{color:var(--coral);}
.nav a:hover::after{transform:scaleX(1);}
.nav a[aria-current="page"]{color:var(--coral);}
.nav a[aria-current="page"] .idx{color:var(--coral);}
.nav a[aria-current="page"]::after{transform:scaleX(1);}

.nav-toggle{
  display:none;align-items:center;gap:.6rem;
  background:none;border:1px solid var(--rule);border-radius:0;
  padding:.55rem .85rem;cursor:pointer;color:var(--ink);
  font:600 .6875rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px;}
.nav-toggle__bars i{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}

/* full-screen index overlay */
.navdrawer{
  position:fixed;inset:0;z-index:95;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 2rem) 0 2.5rem;
  opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease),visibility .34s var(--ease);
  overflow-y:auto;
}
.navdrawer[data-open="true"]{opacity:1;visibility:visible;}
.navdrawer ol{list-style:none;width:var(--shell);margin-inline:auto;}
.navdrawer li{border-top:1px solid var(--rule-inv);}
.navdrawer li:last-child{border-bottom:1px solid var(--rule-inv);}
.navdrawer a{
  display:flex;align-items:baseline;gap:1rem;
  padding:.95rem 0;text-decoration:none;color:var(--ivory);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,1.1rem + 2.4vw,2.5rem);letter-spacing:-.02em;
  transition:color .25s var(--ease),padding-left .3s var(--ease);
}
.navdrawer a .idx{font:600 .6875rem/1 var(--sans);letter-spacing:.16em;color:var(--euca-2);flex:none;}
.navdrawer a:hover,.navdrawer a:focus-visible{color:var(--coral-2);padding-left:.7rem;}
.navdrawer a[aria-current="page"]{color:var(--coral-2);}
body.nav-open{overflow:hidden;}

@media (max-width:1180px){
  .nav{display:none;}
  .nav-toggle{display:inline-flex;}
}
/* At the narrowest handsets the wordmark and the index button must still
   share one line without crowding the viewport edge. */
@media (max-width:430px){
  .masthead__in{gap:.7rem;}
  .brand{gap:.5rem;}
  .brand__mark{width:1.8rem;height:1.8rem;font-size:.625rem;}
  .brand__name{font-size:.875rem;}
  .brand__name span{font-size:.5rem;letter-spacing:.15em;}
  .nav-toggle{padding:.5rem .6rem;gap:.45rem;font-size:.625rem;letter-spacing:.11em;}
  .nav-toggle__bars{width:14px;}
}

/* ---------- 7. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.95rem 1.5rem;
  font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--ink);color:var(--ink);
  background:transparent;cursor:pointer;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.btn svg{width:1.1rem;height:.6rem;flex:none;transition:transform .3s var(--ease);}
.btn:hover{background:var(--ink);color:var(--ivory);}
.btn:hover svg{transform:translateX(4px);}
.btn--fill{background:var(--coral);border-color:var(--coral);color:#fff;}
.btn--fill:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory);}
.btn--inv{border-color:rgba(244,242,236,.5);color:var(--ivory);}
.btn--inv:hover{background:var(--ivory);border-color:var(--ivory);color:var(--ink);}

.txtlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);text-decoration:none;
  padding-bottom:.4rem;border-bottom:1px solid currentColor;
  transition:gap .28s var(--ease),color .28s var(--ease);
}
.txtlink:hover{gap:.95rem;color:var(--ink);}
.band--ink .txtlink{color:var(--coral-2);}
.band--ink .txtlink:hover{color:var(--ivory);}

/* inline text links inside prose */
.prose a:not(.btn):not(.txtlink){
  color:var(--coral);text-decoration:none;
  border-bottom:1px solid rgba(192,85,64,.4);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.prose a:not(.btn):not(.txtlink):hover{color:var(--ink);border-color:var(--ink);}
.band--ink .prose a:not(.btn):not(.txtlink){color:var(--coral-2);border-bottom-color:rgba(217,122,99,.5);}
.band--ink .prose a:not(.btn):not(.txtlink):hover{color:var(--ivory);border-color:var(--ivory);}

/* ---------- 8. Image plates (never crop the subject) -------------------- */
.plate{
  position:relative;
  background:var(--ivory-2);
  padding:clamp(.6rem,1.4vw,1.1rem);
  /* --pw caps a plate at (roughly) the photograph's own pixel width so that
     low-resolution originals are never upscaled into softness. */
  max-width:var(--pw,100%);
  margin-inline:auto;
}
.plate img{width:100%;height:auto;}
.plate--euca{background:var(--euca-wash);}
.plate--ink{background:var(--ink-2);}
.plate--coral{background:var(--coral-wash);}
/* An L-shaped rule offset outside the plate. Only the right and bottom edges
   are drawn, and both sit clear of the plate, so the accent can never fall
   across the photograph or its caption. */
.plate--offset::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-1.15rem;bottom:-1.15rem;width:62%;height:62%;
  border-right:1px solid var(--coral);
  border-bottom:1px solid var(--coral);
}
.plate--offset{z-index:0;}
figure{margin:0;}
figcaption{
  margin-top:.95rem;padding-left:1rem;
  border-left:2px solid var(--coral);
  font-size:.8125rem;line-height:1.6;color:var(--muted);
  max-width:44ch;
}
.band--ink figcaption{color:rgba(244,242,236,.68);}

/* ---------- 9. Hero (home) ---------------------------------------------- */
.opening{background:var(--ivory);border-bottom:1px solid var(--rule);}
.opening__grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
  padding-block:clamp(2.75rem,5.5vw,5.5rem);
}
.opening__kicker{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font:600 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--euca);margin-bottom:1.6rem;
}
.opening__kicker b{color:var(--coral);font-weight:600;}
.opening__kicker i{width:2.4rem;height:1px;background:currentColor;opacity:.4;font-style:normal;}
.opening h1{margin-bottom:1.5rem;}
.opening h1 em{font-style:italic;color:var(--coral);font-weight:400;}
.opening__sub{max-width:52ch;margin-bottom:2rem;}
.opening__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.6rem;}
.opening__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.opening__facts div{padding:1.15rem 1.15rem 0 0;}
.opening__facts div+div{border-left:1px solid var(--rule);padding-left:1.15rem;}
.opening__facts dt{
  font:600 .625rem/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--euca);
  margin-bottom:.3rem;
}
.opening__facts dd{margin:0;font-family:var(--display);font-size:1.02rem;line-height:1.28;color:var(--ink);}

/* ---------- 10. Editorial split ----------------------------------------- */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,5rem);align-items:center;
}
.split--wide-l{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.split--wide-r{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
.split--top{align-items:start;}
.split__media{min-width:0;}
.split__body{min-width:0;}
.split--flip .split__media{order:2;}

/* two-column prose */
.cols2{columns:2;column-gap:clamp(1.75rem,3vw,3.25rem);}
.cols2 p{break-inside:avoid;}
@media (max-width:820px){ .cols2{columns:1;} }

/* ---------- 11. Fact strip / stats -------------------------------------- */
.factstrip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.factstrip > div{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1.6rem 1.4rem;
}
.factstrip dt{font:600 .625rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--euca);margin-bottom:.5rem;}
.factstrip dd{margin:0;font-family:var(--display);font-size:clamp(1.3rem,1.1rem + .8vw,1.85rem);line-height:1.12;color:var(--ink);letter-spacing:-.02em;}
.factstrip dd small{display:block;font-family:var(--sans);font-size:.8125rem;letter-spacing:0;color:var(--muted);margin-top:.45rem;line-height:1.55;}
.band--ink .factstrip{border-color:var(--rule-inv);}
.band--ink .factstrip > div{border-color:var(--rule-inv);}
.band--ink .factstrip dd{color:var(--ivory);}
.band--ink .factstrip dd small{color:rgba(244,242,236,.65);}
.band--ink .factstrip dt{color:var(--euca-2);}

/* ---------- 12. Ledger list (numbered editorial rows) ------------------- */
.ledger{list-style:none;border-top:1px solid var(--rule);}
.ledger > li{border-bottom:1px solid var(--rule);}
.ledger__row{
  display:grid;grid-template-columns:5.5rem minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1.4rem,2.5vw,2.1rem) 0;align-items:start;
}
.ledger__no{
  font:600 .6875rem/1.6 var(--sans);letter-spacing:.16em;color:var(--euca);padding-top:.35rem;
}
.ledger__ttl{font-family:var(--display);font-size:clamp(1.15rem,1.02rem + .55vw,1.5rem);line-height:1.2;color:var(--ink);letter-spacing:-.015em;}
.ledger__txt{color:var(--body);}
.band--ink .ledger,.band--ink .ledger > li{border-color:var(--rule-inv);}
.band--ink .ledger__ttl{color:var(--ivory);}
.band--ink .ledger__txt{color:rgba(244,242,236,.78);}
.band--ink .ledger__no{color:var(--euca-2);}
@media (max-width:860px){
  .ledger__row{grid-template-columns:3.2rem minmax(0,1fr);}
  .ledger__txt{grid-column:2;}
}

/* ---------- 13. Chronology (journey) ------------------------------------ */
.chrono{
  display:flex;gap:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-bottom:1.75rem;
  border-top:1px solid var(--rule);
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.chrono::-webkit-scrollbar{height:5px;}
.chrono::-webkit-scrollbar-track{background:var(--ivory-3);}
.chrono::-webkit-scrollbar-thumb{background:var(--euca);}
.chrono__item{
  flex:0 0 clamp(300px,31vw,430px);
  scroll-snap-align:start;
  border-right:1px solid var(--rule);
  padding:2.1rem clamp(1.25rem,2vw,2rem) 0 0;
  margin-right:clamp(1.25rem,2vw,2rem);
  position:relative;
}
.chrono__item:last-child{border-right:0;margin-right:0;padding-right:0;}
.chrono__item::before{
  content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;
  background:var(--coral);border-radius:50%;
}
.chrono__yr{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,2rem + 2vw,3.9rem);line-height:.92;letter-spacing:-.035em;
  color:var(--ink);margin-bottom:.2rem;
}
.chrono__tag{font:600 .625rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--euca);margin-bottom:1rem;}
.chrono__ttl{font-family:var(--display);font-size:1.3rem;line-height:1.22;color:var(--ink);margin-bottom:.75rem;letter-spacing:-.015em;}
.chrono__txt{font-size:.9375rem;line-height:1.68;color:var(--body);}
.chrono__media{margin-bottom:1.35rem;}
.chrono-hint{
  display:flex;align-items:center;gap:.6rem;margin-top:1.25rem;
  font:600 .625rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:900px){
  .chrono{display:block;overflow:visible;border-top:0;padding-bottom:0;}
  .chrono__item{
    flex:none;border-right:0;border-left:2px solid var(--rule);
    padding:0 0 2.75rem 1.6rem;margin-right:0;
  }
  .chrono__item:last-child{border-left:2px solid var(--rule);padding-bottom:0;}
  .chrono__item::before{top:.5rem;left:-5.5px;}
  .chrono-hint{display:none;}
}

/* ---------- 14. Milestone panels (deep journey) ------------------------- */
.panel{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);
  gap:clamp(1.25rem,3vw,3rem);
  padding-block:clamp(2.25rem,4vw,3.5rem);
  border-top:1px solid var(--rule);
}
.panel__year{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,1.4rem + 1.8vw,2.9rem);line-height:.95;
  letter-spacing:-.035em;color:var(--coral);
}
.panel__year small{display:block;font:600 .625rem/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--euca);margin-top:.55rem;}
.panel__body h3{margin-bottom:.9rem;}
.panel__media{margin-top:1.75rem;max-width:640px;}
@media (max-width:720px){ .panel{grid-template-columns:1fr;gap:1rem;} }

/* ---------- 15. Case blocks (challenge / response / relevance) ---------- */
.case{border-top:2px solid var(--ink);padding-top:1.5rem;}
.case + .case{margin-top:clamp(2.25rem,4vw,3.25rem);}
.case__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;margin-bottom:1.15rem;}
.case__tag{
  font:600 .625rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--euca);padding:.42rem .7rem;
}
.case__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.25rem);}
.case__grid > div{border-top:1px solid var(--rule);padding-top:1rem;}
.case__grid h4{
  font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--coral);margin-bottom:.6rem;
}
.case__grid p{font-size:.9375rem;line-height:1.7;}
@media (max-width:800px){ .case__grid{grid-template-columns:1fr;gap:1.35rem;} }

/* ---------- 16. Pull quote block ---------------------------------------- */
.pull{
  border-left:3px solid var(--coral);
  padding:.35rem 0 .35rem 1.5rem;
  margin:2rem 0;
}
.pull p{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,1.02rem + .6vw,1.5rem);line-height:1.38;color:var(--ink);letter-spacing:-.012em;}
.pull cite{display:block;margin-top:.9rem;font:600 .6875rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-style:normal;}
.band--ink .pull p{color:var(--ivory);}
.band--ink .pull cite{color:var(--euca-2);}

/* ---------- 17. Marker list --------------------------------------------- */
.markers{list-style:none;display:grid;gap:1.05rem;}
.markers li{position:relative;padding-left:1.85rem;line-height:1.68;}
.markers li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.6rem;height:.6rem;background:var(--coral);
  transform:rotate(45deg);
}
.markers--euca li::before{background:var(--euca);}
.markers strong{color:var(--ink);font-weight:600;}
.band--ink .markers strong{color:var(--ivory);}

/* ---------- 18. Page opener (interior pages) ---------------------------- */
.pagehead{
  background:var(--ink);color:rgba(244,242,236,.8);
  padding-block:clamp(3rem,6vw,5.75rem);
}
.pagehead h1,.pagehead h2,.pagehead h3,.pagehead h4{color:var(--ivory);}
.pagehead .lede{color:rgba(244,242,236,.88);}
.pagehead .eyebrow{color:var(--euca-2);}
.pagehead h1{margin-bottom:1.4rem;}
.pagehead h1 em{font-style:italic;color:var(--coral-2);font-weight:400;}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font:600 .625rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--euca-2);margin-bottom:1.9rem;
}
.crumbs a{text-decoration:none;color:inherit;transition:color .25s var(--ease);}
.crumbs a:hover{color:var(--coral-2);}
.crumbs span[aria-current]{color:rgba(244,242,236,.9);}
.pagehead__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.75rem,4vw,4rem);align-items:end;}
.pagehead__meta{display:grid;gap:1.1rem;}
.pagehead__meta div{border-top:1px solid var(--rule-inv);padding-top:.85rem;}
.pagehead__meta dt{font:600 .625rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--euca-2);margin-bottom:.3rem;}
.pagehead__meta dd{margin:0;font-family:var(--display);font-size:1.05rem;line-height:1.3;color:var(--ivory);}

/* ---------- 19. Next-page rail ------------------------------------------ */
.nextrail{border-top:1px solid var(--rule);}
.nextrail a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  padding:clamp(1.75rem,3.5vw,2.75rem) 0;text-decoration:none;
  transition:padding-left .35s var(--ease);
}
.nextrail a:hover{padding-left:.9rem;}
.nextrail small{display:block;font:600 .625rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--euca);margin-bottom:.7rem;}
.nextrail strong{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);line-height:1.1;color:var(--ink);letter-spacing:-.025em;}
.nextrail svg{width:2.6rem;height:1rem;color:var(--coral);flex:none;transition:transform .35s var(--ease);}
.nextrail a:hover svg{transform:translateX(8px);}

/* ---------- 20. Contact ------------------------------------------------- */
.contactcard{display:grid;gap:0;border-top:1px solid var(--rule-inv);}
.contactcard > div{border-bottom:1px solid var(--rule-inv);padding:1.6rem 0;}
.contactcard dt{font:600 .625rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--euca-2);margin-bottom:.65rem;}
.contactcard dd{margin:0;}
.contactcard a,.contactcard .val{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2.1rem);line-height:1.15;letter-spacing:-.022em;
  color:var(--ivory);text-decoration:none;
  display:inline-flex;align-items:center;gap:.85rem;
  transition:color .25s var(--ease);
}
.contactcard a:hover{color:var(--coral-2);}
.contactcard a svg{width:1.15rem;height:1.15rem;flex:none;color:var(--coral-2);}

/* ---------- 21. Footer --------------------------------------------------- */
.sitefoot{background:var(--ink-3);color:rgba(244,242,236,.68);}
.sitefoot__top{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);
  padding-block:clamp(3rem,5vw,4.5rem);
}
.sitefoot__word{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,1.4rem + 2.2vw,3.1rem);line-height:1.02;letter-spacing:-.03em;
  color:var(--ivory);margin-bottom:1.1rem;
}
.sitefoot__word em{font-style:italic;color:var(--coral-2);}
.sitefoot p{font-size:.9375rem;max-width:40ch;}
.sitefoot h2{
  font-family:var(--sans);font-size:.625rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--euca-2);margin-bottom:1.15rem;
}
.footnav{list-style:none;display:grid;gap:.6rem;}
.footnav a{
  text-decoration:none;font-size:.9375rem;color:rgba(244,242,236,.72);
  transition:color .25s var(--ease);
}
.footnav a:hover{color:var(--coral-2);}
.footcontact{display:grid;gap:.85rem;font-size:.9375rem;}
.footcontact a{color:var(--ivory);text-decoration:none;border-bottom:1px solid rgba(244,242,236,.28);transition:color .25s var(--ease),border-color .25s var(--ease);}
.footcontact a:hover{color:var(--coral-2);border-color:var(--coral-2);}
.footcontact span{display:block;color:rgba(244,242,236,.6);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:.2rem;}

.social{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem;}
.social li{list-style:none;}
.social span,.social a{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border:1px solid var(--rule-inv);border-radius:50%;
  color:rgba(244,242,236,.8);
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.social a:hover{background:var(--coral);border-color:var(--coral);color:#fff;}
.social svg{width:1.05rem;height:1.05rem;fill:currentColor;}

.sitefoot__base{
  border-top:1px solid var(--rule-inv);
  padding-block:1.6rem 2rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.9rem 1.75rem;
  font-size:.8125rem;color:rgba(244,242,236,.6);
}
.sitefoot__base a{color:rgba(244,242,236,.82);text-decoration:none;border-bottom:1px solid rgba(244,242,236,.3);}
.sitefoot__base a:hover{color:var(--coral-2);border-color:var(--coral-2);}

@media (max-width:880px){
  .sitefoot__top{grid-template-columns:1fr;gap:2.5rem;}
}

/* ---------- 22. Passcode gate (index.html) ------------------------------ */
.gate{
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:1.5rem;background:var(--ink);
}
.gate__box{width:min(400px,100%);}
.gate__label{
  display:block;
  font:600 .6875rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--euca-2);margin-bottom:1.35rem;
}
.gate__field{position:relative;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid rgba(244,242,236,.35);padding-bottom:.7rem;transition:border-color .28s var(--ease);}
.gate__field:focus-within{border-color:var(--coral-2);}
.gate__input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--ivory);
  font-family:var(--display);font-weight:400;font-size:1.55rem;letter-spacing:.24em;
  padding:0;
}
.gate__input::placeholder{color:rgba(244,242,236,.28);letter-spacing:.24em;}
.gate__btn{
  flex:none;background:var(--coral);border:0;color:#fff;cursor:pointer;
  font:600 .6875rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:.8rem 1.25rem;
  transition:background .28s var(--ease);
}
.gate__btn:hover{background:var(--coral-2);}
.gate__msg{
  margin-top:1.1rem;min-height:1.4rem;
  font:500 .8125rem/1.4 var(--sans);letter-spacing:.02em;color:var(--coral-2);
}
.gate__msg[hidden]{display:none;}

/* ---------- 23. Motion --------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease);}
[data-reveal].is-in[style*="--d"]{transition-delay:var(--d);}

@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;
  }
  [data-reveal]{opacity:1;transform:none;}
  .chrono{scroll-snap-type:none;}
}

/* ---------- 24. Responsive transformations ------------------------------ */
@media (max-width:1024px){
  .opening__grid{grid-template-columns:1fr;gap:2.25rem;}
  .opening__media{order:-1;max-width:640px;}
  .split,.split--wide-l,.split--wide-r{grid-template-columns:1fr;gap:2rem;}
  .split--flip .split__media{order:0;}
  .pagehead__grid{grid-template-columns:1fr;gap:2rem;align-items:start;}
}
@media (max-width:560px){
  .opening__facts{grid-template-columns:1fr;}
  .opening__facts div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule);}
  .opening__facts div{padding:1rem 0 0;}
  .opening__acts .btn{width:100%;justify-content:center;}
  .plate--offset::after{display:none;}
  .nextrail a{grid-template-columns:1fr;gap:1rem;}
  .sitefoot__base{flex-direction:column;}
}