/* ==========================================================================
   pankajchoudhary.com — "Civic Grid" design system
   PUBLIC SERVICE. PROGRESS. PURPOSE.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* colour */
  --forest:#1F2A24;          /* deep forest charcoal — primary */
  --forest-deep:#16201B;
  --sage:#7F9280;            /* dusty sage — secondary */
  --sage-ink:#4F6152;
  --stone:#EDE7DB;           /* warm stone / parchment — main background */
  --stone-2:#E4DCCC;
  --paper:#F6F2E9;           /* lifted surface */
  --copper:#8C5027;          /* burnished copper — accent */
  --copper-soft:#C0824C;
  --pale:#DCE3D9;            /* very pale grey-green — supporting */
  --graphite:#15181A;        /* near-black graphite — text */
  --graphite-60:rgba(21,24,26,.62);
  --graphite-40:rgba(21,24,26,.40);
  --rule:rgba(31,42,36,.20);
  --rule-soft:rgba(31,42,36,.11);
  --rule-dark:rgba(237,231,219,.18);

  /* type */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;

  /* metrics */
  --gut:clamp(16px,2.4vw,34px);
  --pad:clamp(20px,5vw,84px);
  --maxw:1560px;
  --navh:clamp(88px,9.5vw,116px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5,p,figure,blockquote,ol,ul,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
::selection{background:var(--copper);color:var(--stone)}

/* ---------- 3. BASE ---------- */
body{
  background:var(--stone);
  color:var(--graphite);
  font-family:var(--body);
  font-size:clamp(16px,.55vw + 14.6px,18px);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* faint civic grid over the whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--rule-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--rule-soft) 1px,transparent 1px);
  background-size:clamp(80px,9vw,140px) clamp(80px,9vw,140px);
  opacity:.42;
}
main,header,footer{position:relative;z-index:1}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--forest);color:var(--stone);padding:14px 22px;
  font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* ---------- 4. TYPE SCALE ---------- */
.d1,.d2,.d3,.d4{font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:.94;text-wrap:balance}
.d1{font-size:clamp(40px,8.2vw,116px)}
.d2{font-size:clamp(32px,5.4vw,74px);line-height:.98}
.d3{font-size:clamp(26px,3.2vw,44px);line-height:1.04;letter-spacing:-.02em}
.d4{font-size:clamp(20px,1.9vw,27px);line-height:1.16;letter-spacing:-.012em;font-weight:600}

.lede{font-size:clamp(18px,1.5vw,23px);line-height:1.56;color:#20262a}
.prose p+p{margin-top:1.05em}
.prose p{max-width:70ch}
.prose strong{font-weight:600}
.small{font-size:15px;line-height:1.6;color:var(--graphite-60)}

/* editorial label — the recurring "civic" marker */
.tag{
  font-family:var(--display);font-weight:600;
  font-size:clamp(10px,.72vw,12px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-ink);display:inline-flex;align-items:center;gap:.7em;
}
.tag::before{content:"";width:22px;height:1px;background:var(--copper);flex:none}
.tag--plain::before{display:none}
.tag--light{color:var(--pale)}
.tag--light::before{background:var(--copper-soft)}

/* oversized section numeral */
.num{
  font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(46px,6.4vw,104px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px var(--sage);
}
.num--solid{color:var(--copper);-webkit-text-stroke:0}

.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- 5. NAVIGATION (Civic Grid bar) ---------- */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(237,231,219,.93);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav__top{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--pad) 12px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.plate{display:flex;align-items:center;gap:12px;text-decoration:none}
.plate__mark{
  width:30px;height:30px;flex:none;position:relative;border:1px solid var(--forest);
}
.plate__mark::before,.plate__mark::after{
  content:"";position:absolute;background:var(--copper);
}
.plate__mark::before{left:50%;top:5px;bottom:5px;width:1px;transform:translateX(-.5px)}
.plate__mark::after{top:50%;left:5px;right:5px;height:1px;transform:translateY(-.5px)}
.plate__name{
  font-family:var(--display);font-weight:700;line-height:1.02;
  font-size:clamp(13px,1.05vw,15.5px);letter-spacing:.13em;text-transform:uppercase;
}
.plate__name span{display:block;color:var(--sage-ink);font-weight:600;letter-spacing:.19em;font-size:.72em}

.nav__meta{
  font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--graphite-40);font-variant-numeric:tabular-nums;text-align:right;
  display:none;
}
.nav__meta b{color:var(--copper);font-weight:600}

/* the numbered index ruler */
.nav__index{display:none;border-top:1px solid var(--rule-soft)}
.nav__index ul{
  list-style:none;
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(8,1fr);
}
.nav__index li{border-left:1px solid var(--rule-soft)}
.nav__index li:last-child{border-right:1px solid var(--rule-soft)}
.nav__index a{
  display:block;padding:11px 12px 12px;text-decoration:none;position:relative;
  font-family:var(--display);font-size:clamp(11px,.83vw,13px);font-weight:600;
  letter-spacing:.05em;color:var(--graphite);transition:background .35s var(--ease),color .35s var(--ease);
}
.nav__index a i{
  display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  color:var(--graphite-40);margin-bottom:5px;font-variant-numeric:tabular-nums;
}
.nav__index a:hover{background:var(--pale)}
.nav__index a[aria-current="page"]{background:var(--forest);color:var(--stone)}
.nav__index a[aria-current="page"] i{color:var(--copper-soft)}

/* mobile trigger */
.burger{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:none;border:1px solid var(--forest);
  padding:9px 16px;min-height:46px;cursor:pointer;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.burger__bars{display:inline-block;width:16px;height:9px;position:relative}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--forest);transition:transform .3s var(--ease)}
.burger__bars::before{top:0}
.burger__bars::after{bottom:0}
.is-open .burger__bars::before{transform:translateY(3.75px) rotate(45deg)}
.is-open .burger__bars::after{transform:translateY(-3.75px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:90;background:var(--forest);color:var(--stone);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  visibility:hidden;
}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad);border-bottom:1px solid var(--rule-dark);
}
.drawer__title{font-family:var(--display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}
.drawer__close{
  background:none;border:1px solid var(--rule-dark);color:var(--stone);cursor:pointer;
  padding:9px 18px;min-height:46px;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.drawer nav{padding:6px var(--pad) 40px}
.drawer a{
  display:flex;align-items:baseline;gap:16px;text-decoration:none;
  padding:17px 0;border-bottom:1px solid var(--rule-dark);
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(24px,7vw,34px);min-height:56px;
}
.drawer a i{font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--copper-soft);font-variant-numeric:tabular-nums;flex:none;width:2.2em}
.drawer a[aria-current="page"]{color:var(--copper-soft)}
.drawer__foot{margin-top:auto;padding:22px var(--pad) 34px;border-top:1px solid var(--rule-dark);color:var(--pale);font-size:14px}
.drawer__foot a{display:inline;font-family:var(--body);font-size:15px;padding:0;border:0;min-height:0}

body.no-scroll{overflow:hidden}

@media (min-width:1000px){
  .burger{display:none}
  .nav__meta{display:block}
  .nav__index{display:block}
}

/* ---------- 6. LAYOUT PRIMITIVES ---------- */
.grid{display:grid;gap:var(--gut);grid-template-columns:repeat(12,1fr)}
@media (max-width:899px){.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:639px){.grid{grid-template-columns:1fr}}

.sec{padding-block:clamp(56px,7.5vw,124px)}
.sec--tight{padding-block:clamp(40px,5vw,74px)}
.sec--dark{background:var(--forest);color:var(--stone)}
.sec--dark .lede{color:var(--pale)}
.sec--dark .small{color:rgba(237,231,219,.66)}
.sec--dark .rule{background:var(--rule-dark)}
.sec--dark .num{-webkit-text-stroke-color:var(--sage-ink)}
.sec--pale{background:var(--pale)}
.sec--paper{background:var(--paper)}
.sec--line{border-top:1px solid var(--rule)}

/* section header: numeral + label + title */
.head{display:grid;gap:clamp(14px,2vw,26px);grid-template-columns:auto 1fr;align-items:start;margin-bottom:clamp(28px,4vw,54px)}
.head__body{display:grid;gap:14px}
@media (max-width:639px){.head{grid-template-columns:1fr;gap:12px}}

/* image frames — never crop faces */
.frame{
  background:var(--paper);border:1px solid var(--rule);padding:clamp(10px,1.2vw,18px);
  position:relative;
}
.sec--dark .frame{background:rgba(237,231,219,.06);border-color:var(--rule-dark)}
.frame img{width:100%;height:auto}
.frame__cap{
  margin-top:12px;display:flex;gap:10px;align-items:baseline;
  font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-40);
}
.sec--dark .frame__cap{color:rgba(237,231,219,.6)}
.frame__cap b{color:var(--copper);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
/* corner ticks */
.frame::before,.frame::after{content:"";position:absolute;width:11px;height:11px;border:1px solid var(--copper);pointer-events:none}
.frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 24px;border:1px solid var(--forest);background:transparent;color:var(--forest);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  min-height:48px;
}
.btn svg{width:16px;height:9px;flex:none;transition:transform .35s var(--ease)}
.btn:hover{background:var(--forest);color:var(--stone)}
.btn:hover svg{transform:translateX(5px)}
.btn--solid{background:var(--forest);color:var(--stone)}
.btn--solid:hover{background:var(--copper);border-color:var(--copper)}
.btn--light{border-color:var(--pale);color:var(--stone)}
.btn--light:hover{background:var(--stone);color:var(--forest)}

/* inline "next" link */
.jump{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .3s var(--ease)
}
.jump:hover{border-bottom-color:var(--copper)}

/* ---------- 7. HOME: split editorial opening ---------- */
.open{border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.open__in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(30px,4.4vw,64px) var(--pad) clamp(34px,4vw,60px);
  display:grid;gap:clamp(24px,3.4vw,54px);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;
}
.open__name{font-family:var(--display);font-weight:700;letter-spacing:-.038em;line-height:.86;
  font-size:clamp(40px,7.9vw,122px);text-transform:uppercase}
.open__name em{display:block;font-style:normal;color:var(--copper)}
.open__claim{
  font-family:var(--display);font-weight:600;letter-spacing:-.012em;line-height:1.12;
  font-size:clamp(19px,2.35vw,34px);max-width:16ch;margin-top:clamp(20px,2.6vw,34px)
}
.open__claim span{color:var(--sage-ink)}
.open__meta{
  margin-top:clamp(22px,3vw,40px);display:grid;gap:0;border-top:1px solid var(--rule);
  grid-template-columns:repeat(3,1fr)
}
.open__meta div{padding:14px 14px 0 0;border-right:1px solid var(--rule-soft)}
.open__meta div:last-child{border-right:0}
.open__meta dt{font-family:var(--display);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--graphite-40);margin-bottom:6px}
.open__meta dd{margin:0;font-size:15px;line-height:1.35;font-weight:600}
.open__portrait{position:relative}
.open__portrait .frame{background:var(--pale)}
@media (max-width:899px){
  .open__in{grid-template-columns:1fr;padding-top:26px}
  .open__portrait{order:-1}
  .open__meta{grid-template-columns:1fr;border-top:1px solid var(--rule)}
  .open__meta div{border-right:0;border-bottom:1px solid var(--rule-soft);padding:12px 0}
  .open__meta div:last-child{border-bottom:0}
}

/* ---------- 8. MILESTONE STRIP (horizontal) ---------- */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.strip__track{display:flex;min-width:min-content}
.strip__item{
  flex:0 0 clamp(240px,23vw,320px);border-right:1px solid var(--rule-soft);
  padding:clamp(20px,2.4vw,34px) clamp(18px,2vw,28px);
}
.strip__item:last-child{border-right:0}
.strip__yr{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.1vw,44px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.strip__yr::after{content:"";display:block;width:26px;height:2px;background:var(--copper);margin:12px 0 14px}
.strip__t{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.28;margin-bottom:8px}
.strip__d{font-size:14.5px;line-height:1.55;color:var(--graphite-60)}
.strip__hint{font-family:var(--display);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite-40);padding:10px 0 0}

/* ---------- 9. TYPOGRAPHIC MATRIX (index rows) ---------- */
.matrix{border-top:1px solid var(--rule)}
.matrix a{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:clamp(16px,3vw,44px);align-items:center;
  padding:clamp(20px,2.5vw,34px) 0;border-bottom:1px solid var(--rule);
  text-decoration:none;position:relative;transition:padding-inline .4s var(--ease),color .4s var(--ease)
}
.matrix a::after{content:"";position:absolute;inset:0 -100vw;background:var(--forest);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.matrix a:hover{color:var(--stone);padding-inline:clamp(10px,1.6vw,26px)}
.matrix a:hover::after{transform:scaleY(1)}
.matrix a:hover .matrix__n{color:var(--copper-soft);-webkit-text-stroke:0}
.matrix a:hover .matrix__d{color:var(--pale)}
.matrix__n{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.3vw,19px);letter-spacing:.06em;color:var(--copper);font-variant-numeric:tabular-nums}
.matrix__t{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,50px);letter-spacing:-.028em;line-height:1;text-transform:uppercase}
.matrix__d{font-size:15.5px;line-height:1.5;color:var(--graphite-60);transition:color .4s var(--ease)}
.matrix__go{width:22px;height:11px;flex:none}
@media (max-width:899px){
  .matrix a{grid-template-columns:auto 1fr;gap:10px 16px;padding:20px 0}
  .matrix__d{grid-column:1/-1;padding-left:0}
  .matrix__go{display:none}
}

/* ---------- 10. EVIDENCE FIGURES ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-dark)}
.figs div{padding:clamp(22px,2.6vw,34px) clamp(16px,1.8vw,26px) clamp(24px,3vw,40px);border-right:1px solid var(--rule-dark)}
.figs div:last-child{border-right:0}
.figs dt{font-family:var(--display);font-weight:700;font-size:clamp(38px,4.6vw,68px);line-height:.94;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--stone)}
.figs dt sup{font-size:.42em;vertical-align:super;color:var(--copper-soft);letter-spacing:0}
.figs dd{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:rgba(237,231,219,.72)}
.figs dd b{display:block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:7px}
@media (max-width:899px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .figs div:nth-child(2n){border-right:0}
  .figs div:nth-child(-n+2){border-bottom:1px solid var(--rule-dark)}
}
@media (max-width:479px){
  .figs{grid-template-columns:1fr}
  .figs div{border-right:0;border-bottom:1px solid var(--rule-dark)}
  .figs div:last-child{border-bottom:0}
}

/* ---------- 11. RIBBON CHRONOLOGY (journey) ---------- */
.ribbon{position:relative;padding-block:clamp(20px,3vw,40px)}
.ribbon__line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule);display:none}
.ribbon__track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.ribbon__node{
  flex:0 0 clamp(260px,26vw,340px);scroll-snap-align:start;
  border-left:1px solid var(--rule);padding:0 clamp(16px,1.8vw,26px);position:relative;
}
.ribbon__node:last-child{border-right:1px solid var(--rule)}
.ribbon__yr{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--forest)}
.ribbon__dot{width:9px;height:9px;background:var(--copper);border-radius:50%;margin:16px 0}
.ribbon__t{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.25;margin-bottom:9px}
.ribbon__d{font-size:14.5px;line-height:1.55;color:var(--graphite-60)}
@media (min-width:1000px){
  .ribbon__line{display:block}
  .ribbon__track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr;overflow:visible;padding:0}
  .ribbon__node:nth-child(1){grid-column:1}.ribbon__node:nth-child(2){grid-column:2}
  .ribbon__node:nth-child(3){grid-column:3}.ribbon__node:nth-child(4){grid-column:4}
  .ribbon__node:nth-child(5){grid-column:5}.ribbon__node:nth-child(6){grid-column:6}
  .ribbon__node{flex:none;padding-block:clamp(14px,1.6vw,26px)}
  .ribbon__node:nth-child(odd){grid-row:1;align-self:end;text-align:left}
  .ribbon__node:nth-child(even){grid-row:2}
  .ribbon__node:nth-child(odd) .ribbon__dot{margin-bottom:0;margin-top:18px}
  .ribbon__node:nth-child(even) .ribbon__yr{order:3}
  .ribbon__node:nth-child(even){display:flex;flex-direction:column}
  .ribbon__node:nth-child(even) .ribbon__dot{margin-top:0;order:0}
  .ribbon__node:nth-child(even) .ribbon__t{order:1}
  .ribbon__node:nth-child(even) .ribbon__d{order:2;margin-bottom:16px}
}

/* vertical chronology entries (long form) */
.chron{border-top:1px solid var(--rule)}
.chron__item{display:grid;grid-template-columns:minmax(120px,1.6fr) minmax(0,7fr);gap:clamp(16px,3vw,52px);padding:clamp(28px,3.6vw,52px) 0;border-bottom:1px solid var(--rule)}
.chron__yr{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;position:sticky;top:calc(var(--navh) + 20px);align-self:start}
.chron__yr small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin-top:9px;font-weight:600}
.chron__body h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,29px);letter-spacing:-.018em;line-height:1.14;margin-bottom:14px}
@media (max-width:767px){
  .chron__item{grid-template-columns:1fr;gap:14px}
  .chron__yr{position:static}
}

/* ---------- 12. DOCUMENT / ARCHIVE (parliamentary) ---------- */
.doc{
  background:var(--paper);border:1px solid var(--rule);position:relative;
  padding:clamp(22px,3vw,44px);
}
.doc+.doc{margin-top:calc(var(--gut) * -1 + var(--gut))}
.doc__no{
  position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(16px,1.8vw,26px);
  font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,64px);line-height:.8;
  letter-spacing:-.05em;color:var(--stone-2);font-variant-numeric:tabular-nums;pointer-events:none
}
.doc h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.75vw,26px);letter-spacing:-.016em;line-height:1.16;margin:12px 0 12px;max-width:26ch;position:relative}
.doc__meta{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-family:var(--display);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--graphite-40)
}
.doc__meta b{color:var(--sage-ink);font-weight:600}

.quote{
  border-left:2px solid var(--copper);padding:6px 0 6px clamp(18px,2vw,30px);
  font-size:clamp(18px,1.55vw,23px);line-height:1.5;font-style:italic
}
.quote cite{
  display:block;margin-top:16px;font-style:normal;font-family:var(--display);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-40)
}
.sec--dark .quote cite{color:rgba(237,231,219,.6)}

/* data rows */
.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.data caption{text-align:left;padding-bottom:16px;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite-40)}
.data th,.data td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;font-size:15.5px}
.data thead th{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink);font-weight:600;border-bottom:1px solid var(--rule);padding-bottom:12px}
.data tbody th{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.data td:last-child,.data th:last-child{padding-right:0}
.data .win{color:var(--sage-ink);font-weight:600}
.data .loss{color:var(--copper);font-weight:600}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 13. CITY-GRID MODULES (development) ---------- */
.modgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
.mod{
  border:1px solid var(--rule);padding:clamp(20px,2.4vw,36px);background:var(--paper);
  display:flex;flex-direction:column;gap:14px;position:relative
}
.mod--flat{background:transparent;border-color:var(--rule-soft)}
.mod--ink{background:var(--forest);color:var(--stone);border-color:var(--forest)}
.mod--ink .small{color:rgba(237,231,219,.7)}
.mod--sage{background:var(--pale);border-color:transparent}
.mod__k{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
.mod h3{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.015em;line-height:1.18}
.mod__big{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.2vw,60px);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media (max-width:899px){.modgrid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:639px){.modgrid{grid-template-columns:1fr}.modgrid>*{grid-column:1/-1 !important}}

/* ---------- 14. ARCHIVE INDEX (achievements) ---------- */
.arch{border-top:1px solid var(--rule)}
.arch__item{border-bottom:1px solid var(--rule)}
.arch__bar{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2.6vw,40px);align-items:center;
  padding:clamp(20px,2.4vw,32px) 0;color:inherit;transition:color .3s var(--ease)
}
.arch__bar:hover .arch__t{color:var(--copper)}
.arch__n{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.1vw,16px);letter-spacing:.08em;color:var(--copper);font-variant-numeric:tabular-nums}
.arch__t{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.35vw,34px);letter-spacing:-.022em;line-height:1.08;transition:color .3s var(--ease)}
.arch__t small{display:block;font-family:var(--body);font-weight:400;font-size:14.5px;letter-spacing:0;color:var(--graphite-60);margin-top:8px;line-height:1.45}
.arch__sign{width:34px;height:34px;flex:none;border:1px solid var(--rule);position:relative}
.arch__sign::before,.arch__sign::after{content:"";position:absolute;background:var(--forest);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.arch__sign::before{left:50%;top:10px;bottom:10px;width:1px;transform:translateX(-.5px)}
.arch__sign::after{top:50%;left:10px;right:10px;height:1px;transform:translateY(-.5px)}
.arch__bar[aria-expanded="true"] .arch__sign::before{transform:translateX(-.5px) scaleY(0)}
.arch__panel{overflow:hidden;height:0;transition:height .45s var(--ease)}
.arch__inner{padding:0 0 clamp(26px,3.4vw,46px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,46px)}
.arch__facts{border-top:1px solid var(--rule-soft);margin-top:20px;padding-top:18px;display:grid;gap:14px}
.arch__facts div{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:16px;align-items:baseline}
.arch__facts dt{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.arch__facts dd{margin:0;font-size:15.5px;line-height:1.55}
@media (max-width:899px){
  .arch__inner{grid-template-columns:1fr}
  .arch__bar{grid-template-columns:auto 1fr;gap:12px 16px}
  .arch__sign{display:none}
}

/* ---------- 15. QUIET / VISION SECTIONS ---------- */
.quiet{padding-block:clamp(70px,11vw,190px)}
.quiet__lead{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(30px,5.2vw,74px);max-width:17ch
}
.pillar{border-top:1px solid var(--rule);padding-block:clamp(30px,4vw,58px);display:grid;grid-template-columns:auto minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,3vw,50px);align-items:start}
.sec--dark .pillar{border-top-color:var(--rule-dark)}
.pillar h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.3vw,33px);letter-spacing:-.02em;line-height:1.1}
@media (max-width:899px){.pillar{grid-template-columns:1fr;gap:14px}}

/* ---------- 16. CONTACT ---------- */
.contact__big{
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.9;
  font-size:clamp(44px,10vw,150px);text-transform:uppercase
}
.cardlist{display:grid;gap:0;border-top:1px solid var(--rule)}
.cardlist a,.cardlist div{
  display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(0,3fr);gap:clamp(12px,2.4vw,40px);
  align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--rule);
  text-decoration:none;transition:padding-inline .35s var(--ease)
}
.cardlist a:hover{padding-inline:14px}
.cardlist dt,.cardlist .k{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-ink)}
.cardlist .v{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,33px);letter-spacing:-.02em;line-height:1.1;word-break:break-word}
.cardlist a:hover .v{color:var(--copper)}
@media (max-width:639px){.cardlist a,.cardlist div{grid-template-columns:1fr;gap:8px}}

/* ---------- 17. FOOTER ---------- */
.foot{background:var(--forest-deep);color:var(--stone);position:relative;z-index:1}
.foot__mark{
  padding-top:clamp(40px,5vw,70px);
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.86;
  font-size:clamp(38px,10.5vw,158px);text-transform:uppercase;color:var(--stone);
  border-bottom:1px solid var(--rule-dark);padding-bottom:clamp(20px,2.6vw,38px)
}
.foot__mark span{color:var(--sage-ink)}
.foot__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,4fr);gap:clamp(24px,3vw,54px);padding-block:clamp(34px,4.4vw,64px)}
.foot h2{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-bottom:18px}
.foot__nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.foot__nav a{
  display:flex;gap:10px;align-items:baseline;text-decoration:none;padding:7px 0;
  font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--pale);transition:color .3s var(--ease)
}
.foot__nav a i{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--sage-ink);font-variant-numeric:tabular-nums}
.foot__nav a:hover{color:var(--copper-soft)}
.foot__contact a{color:var(--stone);text-decoration:none;border-bottom:1px solid rgba(237,231,219,.28);transition:border-color .3s var(--ease),color .3s var(--ease)}
.foot__contact a:hover{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}
.foot__contact p{margin-bottom:12px;font-size:16px}
.foot__contact .k{display:block;font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:4px}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.social a,.social span{
  width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--rule-dark);
  color:var(--pale);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)
}
.social a:hover{background:var(--copper);border-color:var(--copper);color:var(--forest-deep)}
.social span{opacity:.42}
.social svg{width:17px;height:17px;fill:currentColor}
.foot__base{
  border-top:1px solid var(--rule-dark);padding-block:24px 34px;
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;align-items:center;
  font-size:13.5px;color:rgba(237,231,219,.66)
}
.foot__base a{color:var(--pale);text-decoration:none;border-bottom:1px solid rgba(237,231,219,.3)}
.foot__base a:hover{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}
@media (max-width:899px){.foot__grid{grid-template-columns:1fr;gap:34px}}

/* ---------- 18. INDEX / PASSCODE GATE ---------- */
.gate{
  min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px;
  background:var(--stone);position:relative;overflow:hidden
}
.gate::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(31,42,36,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,42,36,.10) 1px,transparent 1px),
    linear-gradient(to right,rgba(31,42,36,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,42,36,.05) 1px,transparent 1px);
  background-size:clamp(120px,14vw,190px) clamp(120px,14vw,190px),clamp(120px,14vw,190px) clamp(120px,14vw,190px),
    calc(clamp(120px,14vw,190px)/5) calc(clamp(120px,14vw,190px)/5),calc(clamp(120px,14vw,190px)/5) calc(clamp(120px,14vw,190px)/5);
}
.gate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(237,231,219,0) 0%,rgba(237,231,219,.72) 62%,rgba(228,220,204,.94) 100%)
}
.gate__box{
  position:relative;z-index:2;width:min(432px,100%);
  background:var(--paper);border:1px solid var(--forest);
  padding:clamp(30px,5vw,46px) clamp(24px,4.4vw,42px) clamp(28px,4vw,40px)
}
.gate__box::before,.gate__box::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--copper)}
.gate__box::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.gate__box::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.gate__key{
  width:38px;height:38px;border:1px solid var(--forest);position:relative;margin-bottom:26px
}
.gate__key::before,.gate__key::after{content:"";position:absolute;background:var(--copper)}
.gate__key::before{left:50%;top:7px;bottom:7px;width:1px;transform:translateX(-.5px)}
.gate__key::after{top:50%;left:7px;right:7px;height:1px;transform:translateY(-.5px)}
.gate__label{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--sage-ink);margin-bottom:12px}
.gate__title{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.4vw,32px);letter-spacing:-.025em;line-height:1.05;margin-bottom:8px}
.gate__hint{font-size:15px;line-height:1.55;color:var(--graphite-60);margin-bottom:26px}
.gate__field{position:relative;margin-bottom:16px}
.gate__field label{display:block;font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite-40);margin-bottom:9px}
.gate__field input{
  width:100%;padding:15px 16px;background:var(--stone);border:1px solid var(--rule);
  font-family:var(--display);font-size:17px;letter-spacing:.22em;color:var(--graphite);
  transition:border-color .3s var(--ease),background .3s var(--ease);min-height:52px
}
.gate__field input::placeholder{color:var(--graphite-40);letter-spacing:.22em}
.gate__field input:focus{outline:none;border-color:var(--copper);background:#fff}
.gate.is-wrong .gate__field input{border-color:#8E3B2A;background:#FBF0EC}
.gate__btn{
  width:100%;min-height:54px;cursor:pointer;border:1px solid var(--forest);background:var(--forest);color:var(--stone);
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  transition:background .3s var(--ease),color .3s var(--ease)
}
.gate__btn:hover{background:var(--copper);border-color:var(--copper)}
.gate__msg{
  min-height:22px;margin-top:14px;font-size:14px;color:#8E3B2A;
  display:flex;align-items:center;gap:9px;opacity:0;transition:opacity .25s var(--ease)
}
.gate__msg.is-on{opacity:1}
.gate__msg::before{content:"";width:6px;height:6px;background:#8E3B2A;flex:none}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.gate.is-wrong .gate__box{animation:shake .5s var(--ease)}

/* ---------- 19. MOTION ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}

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

/* ---------- 20. UTILITIES ---------- */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-s{margin-top:clamp(14px,1.8vw,22px)}
.mt-m{margin-top:clamp(22px,3vw,40px)}
.mt-l{margin-top:clamp(34px,4.6vw,64px)}
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}
.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}
.c9{grid-column-end:span 9}.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.s2{grid-column-start:2}.s3{grid-column-start:3}.s4{grid-column-start:4}.s5{grid-column-start:5}
.s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}
@media (max-width:899px){
  .c1,.c2,.c3,.c4,.c5{grid-column-end:span 3}
  .c6,.c7,.c8{grid-column-end:span 6}
  .c9,.c10,.c11,.c12{grid-column-end:span 6}
  .s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9{grid-column-start:auto}
  .modgrid .c1,.modgrid .c2,.modgrid .c3,.modgrid .c4,.modgrid .c5{grid-column-end:span 6}
}
@media (max-width:639px){
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{grid-column:1/-1}
}
.flip{order:-1}
@media (max-width:899px){.md-first{order:-1}}

/* ---------- 21. TABLES ON DARK SURFACES ---------- */
.sec--dark .data{color:var(--stone)}
.sec--dark .data caption{color:rgba(237,231,219,.6)}
.sec--dark .data thead th{color:var(--sage);border-bottom-color:rgba(237,231,219,.28)}
.sec--dark .data th,.sec--dark .data td{border-bottom-color:rgba(237,231,219,.14)}
.sec--dark .data .win{color:var(--sage)}
.sec--dark .data .loss{color:var(--copper-soft)}

/* ---------- 22. COMPONENTS ON DARK SURFACES ---------- */
.sec--dark .matrix{border-top-color:rgba(237,231,219,.18)}
.sec--dark .matrix a{border-bottom-color:rgba(237,231,219,.18)}
.sec--dark .matrix__d{color:rgba(237,231,219,.66)}
.sec--dark .matrix a::after{background:var(--stone)}
.sec--dark .matrix a:hover{color:var(--forest)}
.sec--dark .matrix a:hover .matrix__n{color:var(--copper)}
.sec--dark .matrix a:hover .matrix__d{color:var(--graphite-60)}
.sec--dark .mod--flat{border-color:rgba(237,231,219,.22)}
.sec--dark .mod h2,.sec--dark .mod h3,.sec--dark .mod .mod__big{color:var(--stone)}
.sec--dark .mod .small{color:rgba(237,231,219,.72)}
.sec--dark .quote{color:var(--stone)}
.sec--dark .jump{color:var(--copper-soft)}
.sec--dark .prose a{color:var(--copper-soft)}
.prose a{color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(140,80,39,.45);transition:border-color .3s var(--ease)}
.prose a:hover{border-bottom-color:var(--copper)}
.sec--pale .lede a{color:var(--copper)}
.lede a{color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(140,80,39,.5)}
.lede a:hover{border-bottom-color:var(--copper)}

/* ---------- 23. SMALL-PHONE REFINEMENTS ---------- */
@media (max-width:560px){
  .plate__name span{display:none}
  .plate__name{letter-spacing:.1em}
  .burger{padding:9px 12px;letter-spacing:.14em}
}
@media (max-width:400px){
  .frame{padding:8px}
  .open__name{letter-spacing:-.03em}
}
@media (min-width:900px){
  .arch__inner{padding-left:calc(26px + clamp(14px,2.6vw,40px))}
}