/* ===========================================================================
   EKPA — Greek Business Leaders  ·  editorial / archival design system
   =========================================================================== */
:root{
  --paper:#f6f1e6; --paper-2:#fbf8f1; --panel:#efe7d6; --panel-2:#e7ddc8;
  --ink:#181410; --ink-2:#4a433a; --ink-3:#7c7264;
  --line:#e2d8c4; --line-2:#cdbfa4;
  --crimson:#7c1d23; --crimson-2:#5f1318; --crimson-ink:#3d0c10;
  --gold:#9a7b41; --gold-2:#b89a5c;
  --white:#fff;
  --shadow-1:0 1px 2px rgba(40,28,12,.06), 0 6px 18px rgba(40,28,12,.05);
  --shadow-2:0 8px 34px rgba(40,28,12,.13);
  --ff-display:"Geom","Roboto",system-ui,sans-serif;
  --ff-text:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1220px; --gap:clamp(18px,3vw,34px);
  --r:3px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--crimson); text-decoration:none}
a:hover{color:var(--crimson-2)}
h1,h2,h3,h4{font-family:var(--ff-display); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin:0 0 .4em}
p{margin:0 0 1em}
::selection{background:var(--crimson); color:#fff}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,40px)}
.narrow{max-width:840px}
.kicker{font-family:var(--ff-sans); font-weight:600; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--crimson)}
.muted{color:var(--ink-3)}
.serif{font-family:var(--ff-text)}
.center{text-align:center}

/* hairline rule with diamond */
.rule{display:flex; align-items:center; gap:14px; color:var(--gold); margin:0 auto}
.rule::before,.rule::after{content:""; height:1px; background:var(--line-2); flex:1}
.rule i{width:6px; height:6px; transform:rotate(45deg); background:var(--gold); display:block}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--ff-sans);
  font-weight:600; font-size:.86rem; letter-spacing:.02em; padding:.78em 1.5em;
  border:1px solid var(--ink); color:var(--ink); background:transparent; border-radius:var(--r);
  cursor:pointer; transition:.22s ease; line-height:1}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn--primary{background:var(--crimson); border-color:var(--crimson); color:#fff}
.btn--primary:hover{background:var(--crimson-2); border-color:var(--crimson-2); color:#fff}
.btn--ghost{border-color:var(--line-2); color:var(--ink-2)}
.btn--ghost:hover{border-color:var(--ink); background:transparent; color:var(--ink)}
.btn .ekpa-ic{width:1.05em; height:1.05em; fill:currentColor}

/* ===========================================================================
   HEADER
   =========================================================================== */
.site-header{position:sticky; top:0; z-index:60; background:rgba(246,241,230,.9);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.topline{height:3px; background:linear-gradient(90deg,var(--crimson) 0 38%,var(--gold) 38% 62%,var(--ink) 62% 100%)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:13px}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand img{height:40px; width:auto}
.brand .bdiv{width:1px; height:34px; background:var(--line-2)}
.brand .btxt{display:flex; flex-direction:column; line-height:1.15}
.brand .btxt b{font-family:var(--ff-sans); font-weight:700; font-size:.86rem; letter-spacing:.02em; color:var(--ink)}
.brand .btxt span{font-size:.7rem; color:var(--ink-3); letter-spacing:.04em}
.main-nav ul{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0}
.main-nav a{font-family:var(--ff-sans); font-weight:500; font-size:.9rem; color:var(--ink-2);
  padding:.5em .8em; border-radius:var(--r); position:relative}
.main-nav a:hover{color:var(--ink)}
.main-nav .current-menu-item>a,.main-nav a.active{color:var(--crimson)}
.main-nav .current-menu-item>a::after,.main-nav a.active::after{content:""; position:absolute;
  left:.8em; right:.8em; bottom:.18em; height:2px; background:var(--crimson)}
.nav-toggle{display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r);
  width:42px; height:38px; cursor:pointer; align-items:center; justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; display:block;
  width:18px; height:2px; background:var(--ink); position:relative; transition:.2s}
.nav-toggle span::before{position:absolute; top:-6px}
.nav-toggle span::after{position:absolute; top:6px}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero{position:relative; padding-block:clamp(54px,8vw,104px) clamp(30px,5vw,56px); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(1100px 380px at 80% -10%, rgba(124,29,35,.06), transparent 60%),
    radial-gradient(900px 360px at 0% 120%, rgba(154,123,65,.08), transparent 60%)}
.hero-inner{position:relative; max-width:880px}
.hero .kicker{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px}
.hero .kicker::before{content:""; width:30px; height:1px; background:var(--crimson)}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.8rem); font-weight:700; letter-spacing:-.035em; margin-bottom:.28em}
.hero h1 em{font-style:normal; color:var(--crimson)}
.hero .lead{font-family:var(--ff-text); font-size:clamp(1.08rem,1.8vw,1.3rem); color:var(--ink-2);
  max-width:680px; margin-bottom:1.6em}
/* big hero search */
.hero-search{display:flex; align-items:center; gap:14px; width:100%; max-width:620px;
  background:var(--white); border:1px solid var(--line-2); border-radius:14px;
  padding:1.05em 1.2em; cursor:text; text-align:left; transition:.2s; box-shadow:var(--shadow-1)}
.hero-search:hover{border-color:var(--ink-3)}
.hero-search:focus-visible{outline:2px solid var(--crimson); outline-offset:2px}
.hero-search svg{width:22px; height:22px; fill:var(--crimson); flex:none}
.hero-search .hs-text{flex:1; min-width:0; font-family:var(--ff-sans); font-size:1.05rem; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hero-search .hs-key{flex:none; font-family:var(--ff-sans); font-size:.8rem; font-weight:600; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:6px; padding:.3em .55em; background:var(--paper-2)}
.hero-search-hint{font-family:var(--ff-sans); font-size:.82rem; color:var(--ink-3); margin:.7em 0 0}

.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.7em}
.hero-stats{display:flex; flex-wrap:wrap; gap:34px; margin-top:46px; padding-top:30px; border-top:1px solid var(--line)}
.hero-stats .st b{font-family:var(--ff-display); font-weight:600; font-size:2.3rem; color:var(--crimson); display:block; line-height:1}
.hero-stats .st span{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}

/* portrait marquee band */
.portrait-band{position:relative; margin-top:8px; padding-block:14px;
  border-block:1px solid var(--line); background:var(--paper-2); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee{display:flex; gap:14px; width:max-content; animation:scrollx 70s linear infinite}
.portrait-band:hover .marquee{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee a{flex:0 0 auto; width:96px}
.marquee figure{margin:0; width:96px; height:124px; overflow:hidden; border-radius:var(--r);
  background:var(--panel); position:relative; box-shadow:var(--shadow-1)}
.marquee img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.22) contrast(1.02);
  transition:filter .5s, transform .5s}
.marquee a:hover img{filter:none; transform:scale(1.05)}
.marquee .mono{display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-family:var(--ff-display); font-size:1.7rem; color:var(--ink-3); background:var(--panel-2)}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}}

/* ===========================================================================
   CINEMA — duotone film interlude (signature: oxblood-tinted film, rhymes with
   the duotone portraits used across the archive)
   =========================================================================== */
.cinema{position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end;
  overflow:hidden; background:#0e0a08; color:#f3ecdd; isolation:isolate}
.cinema-stage{position:absolute; inset:-10% 0; z-index:0; will-change:transform}
.cinema-video{width:100%; height:100%; object-fit:cover; filter:grayscale(.7) contrast(1.05) brightness(.72)}
.cinema-tint{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--crimson); mix-blend-mode:color; opacity:.42}
.cinema-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,9,7,.92), rgba(12,9,7,.55) 52%, rgba(12,9,7,.18)),
             linear-gradient(0deg, rgba(12,9,7,.85), transparent 46%)}
.cinema-inner{position:relative; z-index:2; max-width:900px; padding-block:clamp(44px,7vw,86px)}
.cinema .kicker{color:var(--gold-2); display:inline-flex; align-items:center; gap:10px; margin-bottom:18px}
.cinema .kicker::before{content:""; width:30px; height:1px; background:var(--gold)}
.cinema-quote{font-family:var(--ff-display); font-weight:700; font-size:clamp(1.85rem,4.4vw,3.45rem);
  line-height:1.13; letter-spacing:-.025em; color:#fff; margin:0; text-wrap:balance}
.cinema-quote em{font-style:normal; color:var(--gold-2)}
.cinema-foot{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16)}
.cinema-cap{font-family:var(--ff-sans); font-size:.84rem; letter-spacing:.01em; color:#cbbfa9; max-width:520px}
.sound-btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--ff-sans); font-weight:600;
  font-size:.82rem; color:#f3ecdd; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.26);
  border-radius:40px; padding:.6em 1.15em; cursor:pointer; transition:.2s; backdrop-filter:blur(4px); flex:none}
.sound-btn:hover{background:var(--crimson); border-color:var(--crimson)}
.sound-btn svg{width:1.1em; height:1.1em; fill:currentColor}
.sound-btn .on{display:none}
.sound-btn[aria-pressed="true"] .off{display:none}
.sound-btn[aria-pressed="true"] .on{display:inline-flex}
.sound-btn[aria-pressed="true"]{background:var(--crimson); border-color:var(--crimson)}
@media(prefers-reduced-motion:reduce){ .cinema-stage{inset:0; transform:none !important} }
@media(max-width:640px){
  .cinema{min-height:72vh}
  .cinema-scrim{background:linear-gradient(0deg, rgba(12,9,7,.92), rgba(12,9,7,.4))}
}

/* ===========================================================================
   SECTIONS
   =========================================================================== */
.section{padding-block:clamp(48px,7vw,92px)}
.section--alt{background:var(--paper-2); border-block:1px solid var(--line)}
.section--ink{background:var(--ink); color:#e9e2d4}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .kicker{color:var(--gold-2)}
.section--ink .muted{color:#b3a892}
.sec-head{max-width:760px; margin-bottom:clamp(28px,4vw,52px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head .kicker{display:block; margin-bottom:12px}
.sec-head h2{font-size:clamp(1.9rem,3.8vw,3rem); font-weight:600}
.sec-head p{font-family:var(--ff-text); color:var(--ink-2); font-size:1.06rem; margin-top:.6em}
.section--ink .sec-head p{color:#c9bfa9}

/* nav cards on home */
.navcards{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap)}
.navcard{display:flex; flex-direction:column; gap:10px; padding:26px 22px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r); transition:.24s; color:var(--ink)}
.navcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--line-2)}
.navcard .nn{font-family:var(--ff-display); font-size:1.05rem; color:var(--gold); font-weight:600}
.navcard h3{font-size:1.5rem; margin:0}
.navcard p{font-size:.92rem; color:var(--ink-3); margin:0}
.navcard .go{margin-top:auto; font-family:var(--ff-sans); font-weight:600; font-size:.82rem;
  letter-spacing:.04em; color:var(--crimson)}

/* ===========================================================================
   LEADERS GRID + CARDS
   =========================================================================== */
.lead-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap)}
.lead-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.lcard{display:flex; flex-direction:column; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:.26s ease; color:var(--ink); height:100%}
.lcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--line-2)}
.lcard .portrait{position:relative; aspect-ratio:4/5; background:var(--panel); overflow:hidden}
.lcard .portrait img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) sepia(.12) contrast(1.02); transition:filter .55s, transform .7s}
@media(hover:hover){
  .lcard .portrait img{filter:grayscale(1) sepia(.2) contrast(1.03) brightness(1.01)}
  .lcard:hover .portrait img{filter:none; transform:scale(1.045)}
}
.lcard .portrait .mono{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-size:3rem; color:var(--ink-3); background:
  repeating-linear-gradient(45deg,var(--panel),var(--panel) 10px,var(--panel-2) 10px,var(--panel-2) 20px)}
.lcard .ind{position:absolute; top:10px; left:10px; font-family:var(--ff-sans); font-weight:600;
  font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(24,20,16,.72);
  padding:.32em .6em; border-radius:2px; backdrop-filter:blur(3px)}
.lcard .lbody{padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1}
.lcard .yrs{font-family:var(--ff-sans); font-size:.74rem; letter-spacing:.1em; color:var(--gold); font-weight:600}
.lcard h3{font-size:1.32rem; margin:0; line-height:1.12}
.lcard .role{font-size:.82rem; color:var(--ink-3); font-weight:500}
.lcard .desc{font-family:var(--ff-text); font-size:.9rem; color:var(--ink-2); margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lcard .more{margin-top:auto; padding-top:12px; font-family:var(--ff-sans); font-weight:600;
  font-size:.78rem; letter-spacing:.04em; color:var(--crimson)}

/* ===========================================================================
   FILTER BAR (archive)
   =========================================================================== */
.archive-head{padding-block:clamp(40px,6vw,72px) 24px}
.archive-head h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.filters{position:sticky; top:62px; z-index:40; background:rgba(246,241,230,.94);
  backdrop-filter:blur(8px); border-block:1px solid var(--line); padding-block:14px; margin-bottom:34px}
.filters .frow{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.search-wrap{position:relative; flex:1; min-width:220px}
.search-wrap input{width:100%; font-family:var(--ff-sans); font-size:.92rem; padding:.7em .9em .7em 2.4em;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--white); color:var(--ink)}
.search-wrap input:focus{outline:2px solid var(--crimson); outline-offset:2px; border-color:var(--crimson)}
.search-wrap svg{position:absolute; left:.8em; top:50%; transform:translateY(-50%); width:16px; height:16px; fill:var(--ink-3)}
.fselect{position:relative}
.fselect select{appearance:none; font-family:var(--ff-sans); font-size:.86rem; font-weight:500;
  padding:.7em 2.2em .7em .9em; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--white); color:var(--ink-2); cursor:pointer; max-width:210px}
.fselect select:focus{outline:2px solid var(--crimson); outline-offset:2px; border-color:var(--crimson)}
.fselect::after{content:""; position:absolute; right:.85em; top:50%; width:7px; height:7px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-65%) rotate(45deg); pointer-events:none}
.filters .fmeta{display:flex; align-items:center; gap:14px; margin-top:10px; font-size:.84rem; color:var(--ink-3)}
.filters .fmeta b{color:var(--crimson); font-weight:600}
.btn-clear{background:none; border:none; color:var(--ink-3); font-family:var(--ff-sans); font-size:.82rem;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.btn-clear:hover{color:var(--crimson)}
.no-results{text-align:center; padding:60px 0; color:var(--ink-3); font-family:var(--ff-text); font-size:1.1rem}

/* ===========================================================================
   SINGLE LEADER
   =========================================================================== */
.lead-hero{background:var(--paper-2); border-bottom:1px solid var(--line); padding-block:36px clamp(34px,5vw,60px)}
.breadcrumb{font-family:var(--ff-sans); font-size:.8rem; color:var(--ink-3); margin-bottom:26px}
.breadcrumb a{color:var(--ink-3)} .breadcrumb a:hover{color:var(--crimson)}
.lead-hero-grid{display:grid; grid-template-columns:330px 1fr; gap:clamp(28px,4vw,56px); align-items:start}
.lead-portrait{position:relative; aspect-ratio:4/5; background:var(--panel); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-2)}
.lead-portrait img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.16) contrast(1.03)}
.lead-portrait .mono{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-size:5rem; color:var(--ink-3); background:
  repeating-linear-gradient(45deg,var(--panel),var(--panel) 12px,var(--panel-2) 12px,var(--panel-2) 24px)}
.lead-id .yrs{font-family:var(--ff-sans); letter-spacing:.14em; font-weight:600; color:var(--gold); font-size:.86rem}
.lead-id h1{font-size:clamp(2.3rem,4.6vw,3.7rem); margin:.14em 0 .2em}
.lead-id .role{font-family:var(--ff-text); font-size:1.18rem; color:var(--ink-2); margin-bottom:18px}
.lead-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.tag{font-family:var(--ff-sans); font-size:.76rem; font-weight:500; padding:.4em .8em; border-radius:40px;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--white)}
.tag a{color:inherit}
.tag--ind{background:var(--crimson); border-color:var(--crimson); color:#fff}
.tag--ind a{color:#fff}
.lead-quote{font-family:var(--ff-text); font-style:italic; font-weight:500; font-size:clamp(1.2rem,2.3vw,1.6rem);
  line-height:1.38; color:var(--crimson-ink); border-top:1px solid var(--line-2); padding-top:20px; margin-top:6px}
.lead-quote::before{content:"“"; font-size:2em; color:var(--gold); line-height:0; vertical-align:-.35em; margin-right:.06em}

.lead-body{padding-block:clamp(40px,5vw,64px)}
.lead-cols{display:grid; grid-template-columns:1fr 310px; gap:clamp(34px,5vw,64px); align-items:start}
.prose{font-family:var(--ff-text); font-size:1.08rem; line-height:1.8; color:#241f19}
.prose h2{font-family:var(--ff-display); font-size:1.8rem; margin:1.4em 0 .5em}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose p:first-of-type::first-letter{font-family:var(--ff-display); float:left; font-size:3.4em; line-height:.74;
  padding:.08em .14em 0 0; color:var(--crimson); font-weight:700}
.side{position:sticky; top:84px; display:flex; flex-direction:column; gap:26px}
.panel{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 24px}
.panel h3{font-family:var(--ff-sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px; font-weight:700}
.dl{display:grid; grid-template-columns:1fr; gap:12px}
.dl .row{display:flex; flex-direction:column; gap:1px}
.dl .row .k{font-family:var(--ff-sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.dl .row .v{font-family:var(--ff-text); font-size:1rem; color:var(--ink)}
.achv{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.achv li{position:relative; padding-left:24px; font-family:var(--ff-text); font-size:.98rem; color:var(--ink-2)}
.achv li::before{content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px;
  background:var(--gold); transform:rotate(45deg)}

/* mini timeline (single) */
.mini-tl{list-style:none; margin:0; padding:0; position:relative}
.mini-tl::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line-2)}
.mini-tl li{position:relative; padding:0 0 16px 26px}
.mini-tl li:last-child{padding-bottom:0}
.mini-tl li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--paper-2); border:2px solid var(--crimson)}
.mini-tl .y{font-family:var(--ff-sans); font-weight:700; font-size:.82rem; color:var(--crimson)}
.mini-tl .e{font-family:var(--ff-text); font-size:.94rem; color:var(--ink-2)}

.related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:24px}

/* ===========================================================================
   GLOBAL / DECADE TIMELINE PAGE
   =========================================================================== */
.tl-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px}
.chip{font-family:var(--ff-sans); font-size:.82rem; font-weight:500; padding:.5em 1em; border-radius:40px;
  border:1px solid var(--line-2); background:var(--white); color:var(--ink-2); cursor:pointer; transition:.18s}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--crimson); border-color:var(--crimson); color:#fff}
.timeline{position:relative}
.timeline::before{content:""; position:absolute; left:140px; top:0; bottom:0; width:2px; background:var(--line-2)}
.tl-decade{position:relative; margin-bottom:36px}
.tl-decade .dlabel{position:absolute; left:0; top:0; width:112px; text-align:right;
  font-family:var(--ff-display); font-weight:700; font-size:1.7rem; color:var(--crimson)}
.tl-events{margin-left:178px; display:flex; flex-direction:column; gap:14px}
.tl-ev{position:relative; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 18px; transition:.2s}
.tl-ev:hover{box-shadow:var(--shadow-1); border-color:var(--line-2)}
.tl-ev::before{content:""; position:absolute; left:-44px; top:18px; width:13px; height:13px; border-radius:50%;
  background:var(--paper); border:3px solid var(--gold)}
.tl-ev.k-foundation::before{border-color:var(--crimson)}
.tl-ev.k-birth::before{border-color:#3f6f52}
.tl-ev.k-death::before{border-color:var(--ink-3)}
.tl-ev .yy{font-family:var(--ff-sans); font-weight:700; font-size:.82rem; color:var(--gold); letter-spacing:.06em}
.tl-ev .tt{font-family:var(--ff-text); font-size:1rem; color:var(--ink); margin-top:1px}
.tl-ev .who{font-family:var(--ff-sans); font-size:.8rem; color:var(--crimson); font-weight:600}
.tl-ev .who a{color:var(--crimson)}
.tl-kinds{display:inline-flex; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-3); margin-top:6px}
.tl-kinds i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; border:2px solid}

/* ===========================================================================
   CHARTS PAGE
   =========================================================================== */
.chart-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap)}
.chart-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.chart-card h3{font-family:var(--ff-display); font-size:1.45rem; margin:0 0 4px}
.chart-card p{font-size:.84rem; color:var(--ink-3); margin:0 0 16px}
.chart-holder{position:relative; height:300px}
.chart-card.wide{grid-column:1 / -1}
.chart-card.wide .chart-holder{height:330px}

/* ===========================================================================
   ZEITGEIST PAGE
   =========================================================================== */
.zg-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap)}
.zg-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 30px 32px;
  transition:.24s}
.zg-card:hover{box-shadow:var(--shadow-2); transform:translateY(-3px)}
.zg-ic{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--crimson); margin-bottom:16px}
.zg-ic svg{width:24px; height:24px; fill:#fff}
.zg-card h3{font-size:1.55rem; margin:0 0 .35em}
.zg-card p{font-family:var(--ff-text); font-size:.98rem; color:var(--ink-2); margin:0}
.zg-num{font-family:var(--ff-display); color:var(--gold); font-size:1rem; font-weight:600}

/* ===========================================================================
   COMPANIES PAGE
   =========================================================================== */
.co-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.co-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:24px; transition:.22s}
.co-card:hover{box-shadow:var(--shadow-1); border-color:var(--line-2)}
.co-card .cyr{font-family:var(--ff-sans); font-weight:700; font-size:.8rem; color:var(--gold); letter-spacing:.06em}
.co-card h3{font-size:1.4rem; margin:.2em 0 .3em}
.co-card .cind{font-size:.8rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.co-card .cfounders{margin-top:12px; font-family:var(--ff-text); font-size:.92rem; color:var(--ink-2)}
.co-card .cfounders a{color:var(--crimson); font-weight:500}

/* generic page prose */
.page-hero{padding-block:clamp(40px,6vw,76px) 18px}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.page-hero .lead{font-family:var(--ff-text); font-size:1.12rem; color:var(--ink-2); max-width:720px; margin-top:.5em}

/* ===========================================================================
   FOOTER
   =========================================================================== */
.site-footer{background:var(--ink); color:#cabfa9; margin-top:0}
.footer-top{padding-block:clamp(44px,6vw,72px); border-bottom:1px solid rgba(255,255,255,.1)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
.footer-brand img{height:46px; filter:brightness(0) invert(1); opacity:.92; margin-bottom:16px}
.footer-brand p{color:#9d9281; font-size:.92rem; max-width:380px; font-family:var(--ff-text)}
.fcol h4{font-family:var(--ff-sans); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2); margin:0 0 14px}
.fcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.fcol a{color:#cabfa9; font-size:.92rem}
.fcol a:hover{color:#fff}
.footer-bottom{padding-block:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:#8a8071}
.footer-bottom .pw{color:#b3a892}
.footer-bottom .pw b{color:var(--gold-2)}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media(max-width:1080px){
  .navcards{grid-template-columns:repeat(2,1fr)}
  .lead-grid,.lead-grid.cols-3,.related-grid{grid-template-columns:repeat(3,1fr)}
  .co-grid{grid-template-columns:repeat(2,1fr)}
  .lead-cols{grid-template-columns:1fr; }
  .side{position:static; flex-direction:row; flex-wrap:wrap}
  .side .panel{flex:1; min-width:240px}
}
@media(max-width:820px){
  .main-nav{position:fixed; inset:0 0 0 auto; width:min(82vw,330px); background:var(--paper);
    border-left:1px solid var(--line); transform:translateX(100%); transition:.28s; padding:80px 24px 24px; z-index:55}
  .main-nav.open{transform:none; box-shadow:var(--shadow-2)}
  .main-nav ul{flex-direction:column; align-items:stretch; gap:2px}
  .main-nav a{padding:.8em .6em; font-size:1rem; border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex}
  .lead-hero-grid{grid-template-columns:1fr; gap:24px}
  .lead-portrait{max-width:280px}
  .chart-grid,.zg-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .timeline::before{left:54px}
  .tl-decade .dlabel{width:42px; font-size:1rem}
  .tl-events{margin-left:78px}
  .tl-ev::before{left:-30px}
  .prose p:first-of-type::first-letter{font-size:3em}
}
@media(max-width:560px){
  body{font-size:16px}
  .lead-grid,.lead-grid.cols-3,.related-grid,.navcards,.co-grid{grid-template-columns:repeat(2,1fr); --gap:14px}
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .brand .btxt{display:none}
}
@media(max-width:400px){
  .lead-grid,.related-grid{grid-template-columns:1fr 1fr}
}

/* ===========================================================================
   REVIEW FIXES — a11y, mobile nav, responsive polish
   =========================================================================== */
.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--crimson); color:#fff;
  padding:.7em 1.2em; font-family:var(--ff-sans); font-weight:600; border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0; color:#fff}

.nav-scrim{position:fixed; inset:0; background:rgba(24,20,16,.42); z-index:54; opacity:0; pointer-events:none;
  transition:opacity .28s}
.nav-scrim.show{opacity:1; pointer-events:auto}
@media(min-width:821px){ .nav-scrim{display:none} }

.nav-toggle.is-open span{background:transparent}
.nav-toggle.is-open span::before{top:0; transform:rotate(45deg)}
.nav-toggle.is-open span::after{top:0; transform:rotate(-45deg)}

:where(a,button,.lcard,.navcard,.chip,.btn,.co-card,.zg-card):focus-visible{
  outline:2px solid var(--crimson); outline-offset:3px; border-radius:2px}

.prose p:first-of-type::first-letter{padding-top:.04em}

@media(max-width:720px){
  .search-wrap{flex-basis:100%}
  .fselect{flex:1 1 46%}
  .fselect,.fselect select{width:100%; max-width:none}
}
@media(max-width:1080px){
  .side{flex-direction:column}
  .side .panel{flex:0 0 auto; min-width:0}
}
@media(max-width:820px){
  .tl-ev::before{left:-30px}
}

/* ===========================================================================
   CATALOG — left filter sidebar + A–Z index (HBS-style)
   =========================================================================== */
.archive-intro{font-family:var(--ff-text); font-size:1.08rem; color:var(--ink-2); max-width:720px; margin:.5em 0 0}
.catalog{display:grid; grid-template-columns:262px 1fr; gap:clamp(24px,3vw,48px); align-items:start;
  padding-bottom:clamp(48px,7vw,90px)}
.cat-sidebar{position:sticky; top:78px}
.cat-sidebar-inner{display:flex; flex-direction:column; gap:16px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.cat-sidebar .search-wrap{width:100%}
.facet{display:flex; flex-direction:column; gap:6px}
.facet label{font-family:var(--ff-sans); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.facet .fselect,.facet .fselect select{width:100%; max-width:none}
.cat-sidebar .btn-clear{align-self:flex-start; margin-top:2px}

.az-bar{display:flex; flex-wrap:wrap; gap:3px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line)}
.az{font-family:var(--ff-sans); font-weight:600; font-size:.8rem; min-width:30px; height:30px; padding:0 6px;
  border:1px solid transparent; border-radius:var(--r); background:transparent; color:var(--ink-2); cursor:pointer; transition:.15s}
.az:hover{background:var(--panel)}
.az.active{background:var(--crimson); color:#fff}
.az.is-empty{color:var(--line-2); cursor:default; pointer-events:none}

.cat-meta{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:22px; font-size:.84rem; color:var(--ink-3)}
.cat-meta b{color:var(--crimson); font-weight:700; font-size:1rem}
.cat-meta-sort{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}

/* bibliography panel */
.sources summary{cursor:pointer; font-family:var(--ff-sans); font-weight:600; font-size:.86rem; color:var(--crimson); list-style:none}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:"+ "; font-weight:700}
.sources[open] summary::before{content:"– "}
.src-list{margin:12px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:8px;
  font-family:var(--ff-text); font-size:.85rem; color:var(--ink-2); line-height:1.5}

@media(max-width:900px){
  .catalog{grid-template-columns:1fr; gap:24px}
  .cat-sidebar{position:static}
  .cat-sidebar-inner{flex-direction:row; flex-wrap:wrap; align-items:flex-end}
  .cat-sidebar-inner .search-wrap{flex:1 1 100%}
  .facet{flex:1 1 30%; min-width:150px}
  .cat-sidebar .btn-clear{flex:1 1 100%}
}
@media(max-width:560px){
  .cat-sidebar-inner .facet{flex:1 1 46%}
}

/* ===========================================================================
   GLOBAL SEARCH — header pill + command-palette overlay
   =========================================================================== */
.header-right{display:flex; align-items:center; gap:14px}
.search-open{display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-sans); font-size:.85rem;
  font-weight:500; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:40px; padding:.5em .85em; cursor:pointer; transition:.2s}
.search-open:hover{border-color:var(--ink); color:var(--ink)}
.search-open svg{width:16px; height:16px; fill:currentColor}
.search-open .so-key{font-size:.72rem; font-weight:600; line-height:1; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:5px; padding:.25em .45em; background:var(--paper)}

.search-overlay{position:fixed; inset:0; z-index:120; display:flex; justify-content:center; align-items:flex-start;
  padding:max(8vh,40px) 20px 20px}
.search-overlay[hidden]{display:none}
.search-backdrop{position:absolute; inset:0; background:rgba(14,10,8,.55); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s}
.search-overlay.show .search-backdrop{opacity:1}
.search-panel{position:relative; width:min(680px,100%); background:var(--paper); border:1px solid var(--line-2);
  border-radius:14px; box-shadow:0 30px 80px rgba(20,14,6,.42); overflow:hidden; max-height:78vh;
  display:flex; flex-direction:column; transform:translateY(-10px) scale(.985); opacity:0; transition:transform .2s, opacity .2s}
.search-overlay.show .search-panel{transform:none; opacity:1}
.search-head{display:flex; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line)}
.search-ico{width:20px; height:20px; fill:var(--ink-3); flex:none}
#search-input{flex:1; min-width:0; border:none; background:none; font-family:var(--ff-sans); font-size:1.1rem;
  color:var(--ink); padding:4px 0}
#search-input:focus{outline:none}
#search-input::placeholder{color:var(--ink-3)}
.search-close{font-size:.72rem; font-weight:600; color:var(--ink-3); background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:6px; padding:.4em .6em; cursor:pointer; flex:none}
.search-close:hover{border-color:var(--ink); color:var(--ink)}

.search-results{overflow-y:auto; padding:8px; flex:1}
.sg-label{font-family:var(--ff-sans); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:13px 12px 6px; display:flex; align-items:center; gap:8px}
.sg-label span{color:var(--gold); font-weight:700}
.search-item{display:flex; align-items:center; gap:13px; padding:9px 12px; border-radius:9px; color:var(--ink);
  text-decoration:none; scroll-margin:8px}
.search-item.is-active{background:var(--panel)}
.si-thumb{width:42px; height:42px; flex:none; border-radius:7px; overflow:hidden; background:var(--panel-2);
  display:flex; align-items:center; justify-content:center}
.si-thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4) sepia(.1)}
.si-mono{font-family:var(--ff-display); font-weight:700; font-size:1rem; color:var(--ink-3)}
.si-facet-ico{background:rgba(124,29,35,.08)}
.si-facet-ico svg{width:20px; height:20px; fill:var(--crimson)}
.si-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.si-name{font-family:var(--ff-display); font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.si-name mark{background:rgba(154,123,65,.3); color:inherit; border-radius:2px; padding:0 1px}
.si-sub{font-size:.8rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.si-tag{flex:none; font-family:var(--ff-sans); font-size:.66rem; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); border-radius:30px; padding:.32em .65em}

.search-empty{padding:22px 14px}
.se-hint{font-family:var(--ff-text); color:var(--ink-2); margin:0 0 16px}
.se-chips{display:flex; flex-wrap:wrap; gap:8px}
.se-chip{font-family:var(--ff-sans); font-size:.82rem; font-weight:500; color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:30px; padding:.45em .85em; text-decoration:none}
.se-chip:hover{border-color:var(--crimson); color:var(--crimson)}
.se-chip em{font-style:normal; color:var(--gold); font-weight:700}
.search-noresults{padding:34px 16px; text-align:center; font-family:var(--ff-text); color:var(--ink-2)}
.search-noresults span{font-size:.86rem; color:var(--ink-3)}

.search-foot{display:flex; align-items:center; gap:16px; padding:11px 16px; border-top:1px solid var(--line);
  background:var(--paper-2); font-size:.74rem; color:var(--ink-3); flex-wrap:wrap}
.sf-keys{display:inline-flex; align-items:center; gap:5px}
.search-foot kbd{font-family:var(--ff-sans); font-size:.72rem; background:var(--paper); border:1px solid var(--line-2);
  border-radius:4px; padding:.1em .42em; color:var(--ink-2)}
.search-count{margin-left:auto; color:var(--gold); font-weight:600}

@media(max-width:560px){
  .search-open .so-label,.search-open .so-key{display:none}
  .search-open{padding:.55em}
  .search-overlay{padding:0; align-items:stretch}
  .search-panel{max-height:100%; height:100%; border-radius:0; border:none; width:100%}
  .sf-keys:not(:last-child){display:none}
}