/* Mazhaka Foundation | V17: site-wide editorial type system
   This replaces the V15 typography pass. It is the ONLY typography override
   loaded after Claude's site.css; no additional cascade layer is introduced.
   Intent: natural, readable type proportions, precise editorial hierarchy,
   comfortable body measure, and responsive optical corrections.
*/
:root {
  --serif: 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --reading: 1.68;
  --measure: 64ch;
  --type-track-display: -.012em;
  --type-track-head: -.008em;
  --type-sans: var(--sans);
}
html { text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--reading);
  font-kerning: normal;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main p { overflow-wrap: break-word; text-wrap: pretty; }
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--type-track-display);
  line-height: 1.10;
  text-wrap: balance;
  font-kerning: normal;
  font-synthesis: none;
}
.display .accent, .display em { font-style: normal; }
:is(.row .t,.card-text h3,.entry h3,.story-box h3,.way strong,
    .upcoming h3,.panel-cover-copy h2,.panel-summary,.chapters h3,
    .highlights h3,.mobile-menu a) {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: var(--type-track-head);
  font-kerning: normal;
  text-wrap: pretty;
}
/* The headline is the highest level of the hierarchy. The surrounding copy
   stays deliberately modest so it does not compete. */
.hero h1 {
  font-size: clamp(53px, 4.75vw, 80px);
  line-height: 1.105;
  letter-spacing: -.014em;
  margin-bottom: clamp(22px, 2.15vw, 32px);
}
.hero h1 span { white-space: normal; }
.hero-desc {
  font-size: clamp(16px,1.18vw,18px);
  line-height: 1.72;
  letter-spacing: -.008em;
  max-width: 42ch;
  margin-bottom: clamp(27px, 2.5vw, 35px);
}
/* Navigation and functional text must be quietly precise, never microtype. */
.nav { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.btn { font-size: 14px; font-weight: 600; letter-spacing: .004em; line-height: 1.2; }
.header-actions .btn { font-size: 13px; }
.link-u { font-size: 14px; line-height: 1.35; }
.slide-count, .hero-caption, .meta { font-variant-numeric: tabular-nums; }
/* About: deliberate three-line display beside the portrait composition. */
.about h2 { font-size: clamp(53px, 5.15vw, 83px); line-height: 1.095; letter-spacing: -.012em; margin-bottom: 30px; }
.about-body { font-size: clamp(16px,1.16vw,18px); line-height: 1.76; max-width: 52ch; }
/* Programme cards and landing copy. */
.work h2 { font-size: clamp(45px, 3.5vw, 62px); line-height: 1.11; }
.work-lead p { font-size: 15.5px; line-height: 1.73; max-width: 44ch; }
.card-text .tag { font-size: 12px; letter-spacing: .065em; line-height: 1.35; }
.card-text h3 { font-size: clamp(28px, 2.3vw, 37px); line-height: 1.18; letter-spacing: -.006em; }
.card-text p { font-size: 13.5px; line-height: 1.64; }
/* Dramatic editorial statement: spacious, but not compressed. */
.manifesto h2 { font-size: clamp(60px,7.2vw,115px); line-height: 1.07; letter-spacing: -.015em; max-width: 1040px; }
.manifesto p { font-size: clamp(16px, 1.22vw, 19px); line-height: 1.75; max-width: 47ch; }
/* All editorial section titles share a recognisable hierarchy. */
.index h2 { font-size: clamp(50px,5.5vw,91px); line-height: 1.095; }
.index-head p { font-size: 16px; line-height: 1.7; }
.row .t { font-size: clamp(23px,2.42vw,36px); line-height: 1.21; letter-spacing: -.006em; }
.row .p, .row .d { font-size: 13px; line-height: 1.45; }
.story h2 { font-size: clamp(55px,6.4vw,105px); line-height: 1.075; }
.story-top p { font-size: 16px; line-height: 1.74; max-width: 40ch; }
.big-num { font-size: clamp(140px,13vw,220px); line-height: .95; letter-spacing: 0; font-family: var(--serif); }
.story-box h3 { font-size: clamp(34px,2.9vw,45px); line-height: 1.17; }
.story-box p { font-size: 15px; line-height: 1.72; max-width: 48ch; }
.stripe h2 { font-size: clamp(51px,5.5vw,88px); line-height: 1.10; }
.stripe p { font-size: 16px; line-height: 1.76; max-width: 47ch; }
.journal h2 { font-size: clamp(52px,6.5vw,106px); line-height: 1.09; }
.journal-head p { font-size: 16px; line-height: 1.75; max-width: 42ch; }
.entry h3 { font-size: clamp(33px,3.1vw,50px); line-height: 1.20; letter-spacing: -.007em; max-width: 22ch; margin-top: 17px; }
.entry p { font-size: 15.5px; line-height: 1.75; max-width: var(--measure); }
.meta { font-size: 12px; font-weight: 600; letter-spacing: .03em; line-height: 1.5; }
.upcoming h3 { font-size: clamp(44px,4.3vw,72px); line-height: 1.12; max-width: 19ch; }
.upcoming p { font-size: 16px; line-height: 1.73; }
.join h2 { font-size: clamp(58px,6.75vw,108px); line-height: 1.095; max-width: 16ch; }
.join-lead { font-size: 16px; line-height: 1.75; max-width: 49ch; }
.way strong { font-size: clamp(29px,2.45vw,38px); line-height: 1.2; }
.way span.d { font-size: 14px; line-height: 1.55; }
/* Modal typography is editorial, not a scaled-down duplicate of the hero. */
.panel-cover-copy h2 { font-size: clamp(46px,5.8vw,80px); line-height: 1.095; letter-spacing: -.01em; max-width: 20ch; }
.panel-summary { font-size: clamp(26px,2.9vw,38px); line-height: 1.35; letter-spacing: -.008em; max-width: 42ch; }
.chapters h3, .highlights h3 { font-size: clamp(27px,2.4vw,33px); line-height: 1.2; }
.chapters p, .highlights li { font-size: 15.5px; line-height: 1.76; max-width: var(--measure); }
.mobile-menu a { line-height: 1.2; letter-spacing: -.008em; }
/* Featured generation interaction: let the words breathe while preserving
   the fixed image, sticky scroll progression, colour band, and click panels. */
.index-experience .index-head {
  grid-template-columns: minmax(0,1fr) minmax(250px,315px);
  gap: clamp(40px,5.3vw,82px);
  align-items: end;
  margin-bottom: clamp(25px,3vh,39px);
}
.index-experience h2 {
  font-size: clamp(51px,5.12vw,85px);
  line-height: 1.09;
  letter-spacing: -.011em;
  max-width: 990px;
  text-wrap: balance;
}
.index-experience .index-head p { font-size: clamp(14px,1.06vw,16px); line-height: 1.7; max-width: 39ch; }
.index-experience .row {
  min-height: clamp(48px,5.85vh,69px);
  grid-template-columns: 42px minmax(0,1fr) minmax(115px,20%) 26px;
  gap: clamp(11px,1.3vw,22px);
  padding: 9px 16px;
}
.index-experience .row .t { font-size: clamp(23px,2.05vw,33px); line-height: 1.22; letter-spacing: -.005em; }
.index-experience .row .p { font-size: clamp(11.5px,.9vw,13.5px); line-height: 1.5; }
.index-experience .row .n { font-size: 11px; font-weight: 650; letter-spacing: .06em; }
.generation-footer { font-size: 12px; line-height: 1.5; }
/* Keep the photographed foundation activity clear and legible under the type. */
.generation-photo img { object-position: 50% 43%; filter: saturate(.85) brightness(.80) contrast(1.03); }
.generation-vignette { background:
  linear-gradient(90deg,rgba(5,28,22,.85) 0%,rgba(5,28,22,.67) 45%,rgba(5,28,22,.48) 100%),
  linear-gradient(180deg,rgba(5,28,22,.34),rgba(5,28,22,.05) 48%,rgba(5,28,22,.56)); }
@media(max-width:1199px) and (min-width:1000px) {
  .index-experience h2 { font-size: clamp(47px,4.75vw,69px); }
  .index-experience .row { min-height: 48px; }
  .index-experience .row .t { font-size: clamp(21px,2.3vw,28px); }
}
@media(max-width:999px) {
  .hero h1 { font-size: clamp(46px,8.4vw,76px); line-height: 1.095; }
  .about h2 { font-size: clamp(50px,7.2vw,73px); }
  .work h2 { font-size: clamp(43px,6.2vw,62px); }
  .index-experience .index-head { display:block; margin-bottom: 27px; }
  .index-experience h2 { font-size: clamp(48px,7.05vw,71px); max-width: 800px; }
  .index-experience .index-head p { font-size: 15px; margin-top: 20px; max-width: 53ch; }
  .index-experience .row { grid-template-columns: 32px minmax(0,1fr) 26px; min-height: 56px; padding: 10px 8px; }
  .index-experience .row .t { font-size: clamp(22px,3vw,30px); line-height: 1.2; }
  .index-experience .row .p { display:none; }
  .generation-photo img { object-position: 56% 48%; }
}
@media(max-width:640px) {
  .hero h1 { font-size: clamp(41px,10.5vw,61px); line-height: 1.105; letter-spacing: -.01em; }
  .hero-desc { font-size: 15.5px; line-height: 1.68; max-width: 36ch; }
  .about h2 { font-size: clamp(44px,10.7vw,66px); line-height: 1.105; }
  .about-body { font-size: 15.8px; line-height: 1.76; }
  .work h2 { font-size: clamp(39px,9.4vw,57px); }
  .manifesto h2 { font-size: clamp(49px,10vw,73px); line-height: 1.1; }
  .index-experience h2 { font-size: clamp(41px,9.3vw,61px); line-height: 1.1; max-width: 370px; }
  .index-experience .index-head p { font-size: 14px; line-height: 1.65; margin-top: 15px; }
  .index-experience .row { grid-template-columns: 22px minmax(0,1fr) 20px; gap: 7px; min-height: 55px; padding: 9px 5px; }
  .index-experience .row .t { font-size: clamp(17.5px,4.6vw,23px); line-height: 1.23; }
  .index-experience .row .n { font-size: 10px; }
  .index-experience .row .a { font-size: 18px; }
  .index-experience .row.is-current { padding-left: 11px; }
  .generation-content { padding: 94px 20px 32px; }
  .generation-footer { font-size: 11px; line-height: 1.55; }
  .story h2 { font-size: clamp(45px,10.15vw,67px); }
  .stripe h2 { font-size: clamp(45px,10vw,63px); }
  .journal h2 { font-size: clamp(46px,10vw,69px); }
  .join h2 { font-size: clamp(49px,10.5vw,74px); }
  .entry h3 { font-size: clamp(30px,8vw,43px); line-height: 1.18; }
  .upcoming h3 { font-size: clamp(39px,8.8vw,57px); }
  .panel-cover-copy h2 { font-size: clamp(37px,9vw,59px); line-height: 1.1; }
  .panel-summary { font-size: clamp(26px,6.2vw,34px); }
  .mobile-menu a { font-size: clamp(39px,9.4vw,60px); line-height: 1.18; }
}
@media(max-width:380px) {
  .hero h1 { font-size: clamp(38px,10.2vw,43px); }
  .index-experience .row .t { font-size: clamp(17px,4.45vw,20px); }
  .entry h3 { font-size: clamp(28px,7.6vw,34px); }
}
@media(max-height:780px) and (min-width:1000px) {
  .index-experience h2 { font-size: clamp(43px,4.3vw,67px); }
  .index-experience .row { min-height: clamp(39px,5.35vh,52px); }
  .index-experience .row .t { font-size: clamp(20px,1.9vw,28px); }
  .index-experience .index-head { margin-bottom: 18px; }
}


/* V21 — Quiet programme list: the interactive colour band is the cue.
   Remove the repeated diagonal arrows and give programme titles their space. */
.index-experience .row .a { display: none; }
.index-experience .row { grid-template-columns: 42px minmax(0,1fr) minmax(115px,20%); }
@media (max-width: 999px) {
  .index-experience .row { grid-template-columns: 32px minmax(0,1fr); }
}
@media (max-width: 640px) {
  .index-experience .row { grid-template-columns: 22px minmax(0,1fr); }
}