/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --paper:       #F6F2E8;
  --paper-deep:  #EFE8D9;
  --paper-sunk:  #E7DECA;
  --ink:         #17140F;
  --ink-soft:    #5C554A;
  --ink-faint:   #8B8273;
  --madder:      #8E1B1B;
  --madder-soft: #A9483F;
  --rule:        #CDC3AC;
  --rule-faint:  #E0D7C2;

  --font-display: "Hoefler Text", Baskerville, "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", "Times New Roman", serif;
  --font-body:    Charter, "Bitstream Charter", "Sitka Text", Cambria, Constantia, Georgia, serif;
  --font-util:    SFMono-Regular, "SF Mono", "IBM Plex Mono", "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;

  --measure: 34em;
  --rail-w: 15.5rem;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:       #14120E;
    --paper-deep:  #1C1913;
    --paper-sunk:  #24201A;
    --ink:         #F0EADB;
    --ink-soft:    #A99F8C;
    --ink-faint:   #7C7361;
    --madder:      #E0655A;
    --madder-soft: #C9584E;
    --rule:        #3A342A;
    --rule-faint:  #2A251E;
  }
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}

html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.02rem,0.96rem + 0.28vw,1.15rem);
  line-height:1.72;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--madder);color:var(--paper)}

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

/* ============================================================
   3. SHELL
   ============================================================ */
.shell{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  align-items:start;
}
.page{
  min-width:0;
  padding:0 var(--pad-x) 0;
  border-left:1px solid var(--rule-faint);
}
.band{
  padding-block:clamp(3.5rem,8vw,6.5rem);
  border-bottom:1px solid var(--rule-faint);
  scroll-margin-top:2rem;
}
.band:last-of-type{border-bottom:0}
.wrap{max-width:var(--measure)}
.wrap-wide{max-width:52rem}

/* ============================================================
   4. TYPE ROLES
   ============================================================ */
.eyebrow{
  font-family:var(--font-util);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:block;
  margin-bottom:1.1rem;
}
.eyebrow-mad{color:var(--madder)}

.h-part{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.1rem,1.3rem + 3.4vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.018em;
}
.h-chap{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.65rem,1.25rem + 1.7vw,2.35rem);
  line-height:1.1;
  letter-spacing:-.012em;
  margin-bottom:.35rem;
}
.h-sub{
  font-family:var(--font-util);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--madder);
  margin-bottom:1.6rem;
}
.h-minor{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.22rem;
  letter-spacing:-.005em;
  margin-bottom:.6rem;
}

.prose p + p{margin-top:1.1em}
.prose p{max-width:var(--measure)}
.prose em{font-style:italic}
.lede{
  font-size:1.16em;
  line-height:1.6;
  color:var(--ink-soft);
}

.dropcap::first-letter{
  font-family:var(--font-display);
  float:left;
  font-size:3.6em;
  line-height:.8;
  padding:.06em .1em 0 0;
  color:var(--madder);
}

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

/* ============================================================
   5. RAIL
   ============================================================ */
.rail{
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  padding:2.6rem 1.4rem 2.6rem var(--pad-x);
  font-family:var(--font-util);
  font-size:.72rem;
  line-height:1.4;
  scrollbar-width:thin;
}
.rail__brand{
  font-family:var(--font-display);
  font-size:1.02rem;
  line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:.3rem;
}
.rail__brand-sub{
  color:var(--ink-faint);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.62rem;
  margin-bottom:2rem;
}
.rail__group{
  margin-top:1.5rem;
  padding-top:.85rem;
  border-top:1px solid var(--rule-faint);
}
.rail__group:first-of-type{margin-top:0;border-top:0;padding-top:0}
.rail__link{
  display:grid;
  grid-template-columns:1.6rem 1fr;
  gap:.55rem;
  padding:.3rem 0;
  text-decoration:none;
  color:var(--ink-soft);
  transition:color .18s ease;
}
.rail__link:hover{color:var(--ink)}
.rail__mark{
  color:var(--ink-faint);
  text-align:right;
  font-variant-numeric:tabular-nums;
  transition:color .18s ease;
}
.rail__link.is-active{color:var(--ink)}
.rail__link.is-active .rail__mark{color:var(--madder)}
.rail__part{
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.63rem;
  color:var(--ink-faint);
}
.rail__link.rail__link--part{padding-bottom:.5rem}
.rail__link--part.is-active .rail__part{color:var(--ink)}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{padding-block:clamp(3rem,9vw,7rem) clamp(3rem,7vw,5rem)}
.hero__kicker{
  font-family:var(--font-util);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:2rem;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3rem,1.4rem + 7.2vw,6.6rem);
  line-height:.94;
  letter-spacing:-.028em;
  margin-bottom:1.4rem;
}
.hero__byline{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  color:var(--ink-soft);
  margin-bottom:2.4rem;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.hero__thesis p + p{margin-top:1.1em}

/* --- signature: Kenny's two boxes --- */
.boxes{padding-top:.4rem}
.boxes__note{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1rem;
  color:var(--ink-soft);
  margin-bottom:1.6rem;
  max-width:30ch;
  line-height:1.5;
}
.box{
  border:1px solid var(--ink);
  padding:1.9rem 1.4rem;
  font-family:var(--font-display);
  font-size:1.14rem;
  line-height:1.25;
  clip-path:inset(0 0 0 0);
}
.box--aspiration{
  border-color:var(--madder);
  color:var(--madder);
}
.box__cap{
  font-family:var(--font-body);
  font-size:.86rem;
  color:var(--ink-faint);
  line-height:1.55;
  margin:.75rem 0 1.6rem;
  max-width:34ch;
}
.box__cap--last{margin-bottom:0}
.boxes__gap{
  height:2.2rem;
  border-left:1px dashed var(--rule);
  margin-left:1.4rem;
}

/* --- stats band --- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.5rem);
  margin-top:clamp(3rem,7vw,5rem);
  padding-top:2.2rem;
  border-top:1px solid var(--rule);
}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,1.4rem + 3.2vw,3.9rem);
  line-height:1;
  letter-spacing:-.03em;
  margin-bottom:.7rem;
}
.stat__lab{
  font-family:var(--font-util);
  font-size:.68rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.stat__src{
  display:block;
  margin-top:.5rem;
  color:var(--ink-faint);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ============================================================
   7. MOBILE CONTENTS
   ============================================================ */
.toc{
  display:none;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:1rem 0;
  font-family:var(--font-util);
  font-size:.75rem;
}
.toc > summary{
  cursor:pointer;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.68rem;
  color:var(--madder);
}
.toc__list{margin-top:1rem;display:grid;gap:.45rem}
.toc__list a{color:var(--ink-soft);text-decoration:none}
.toc__list a:hover{color:var(--ink)}

/* ============================================================
   8. COMPONENTS
   ============================================================ */
/* pull quote — hung left, italic */
.pq{
  margin:2.6rem 0;
  padding-left:1.5rem;
  border-left:2px solid var(--madder);
  max-width:38rem;
}
.pq__text{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);
  line-height:1.34;
  letter-spacing:-.005em;
}
.pq__who{
  display:block;
  margin-top:.85rem;
  font-family:var(--font-util);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* vignette panel */
.vig{
  background:var(--paper-deep);
  border-top:1px solid var(--rule);
  padding:1.7rem clamp(1.2rem,3vw,2rem);
  margin:2.6rem 0;
  max-width:42rem;
}
.vig__head{
  font-family:var(--font-util);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--madder);
  margin-bottom:1rem;
}
.vig p + p{margin-top:.9em}
.vig p{font-size:.97em;max-width:none}

/* numbered principle list */
.enum{margin:1.8rem 0;max-width:42rem}
.enum__item{
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  gap:.9rem;
  padding:1.05rem 0;
  border-top:1px solid var(--rule-faint);
}
.enum__item:last-child{border-bottom:1px solid var(--rule-faint)}
.enum__n{
  font-family:var(--font-util);
  font-size:.72rem;
  color:var(--madder);
  padding-top:.42em;
  font-variant-numeric:tabular-nums;
}
.enum__t{
  font-family:var(--font-display);
  font-size:1.12rem;
  letter-spacing:-.005em;
  display:block;
  margin-bottom:.15rem;
}
.enum__d{font-size:.96em;color:var(--ink-soft)}

/* graduate-profile diagram */
.gp{margin:2.8rem 0;max-width:44rem}
.gp__pillars{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
}
.gp__pillar{
  border:1px solid var(--ink);
  border-bottom:0;
  padding:1.5rem .9rem 1.7rem;
  text-align:center;
  font-family:var(--font-display);
  font-size:1.08rem;
  line-height:1.2;
}
.gp__plinth{
  border:1px solid var(--madder);
  border-top-width:2px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.gp__found{
  padding:.95rem .7rem;
  text-align:center;
  font-family:var(--font-util);
  font-size:.66rem;
  line-height:1.5;
  color:var(--madder);
  border-left:1px solid var(--rule);
}
.gp__found:first-child{border-left:0}
.gp__cap{
  font-family:var(--font-util);
  font-size:.66rem;
  letter-spacing:.1em;
  color:var(--ink-faint);
  margin-top:.9rem;
}

/* we do / we do not */
.creed{margin:2.2rem 0;max-width:48rem}
.creed__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding:1rem 0;
  border-top:1px solid var(--rule-faint);
}
.creed__row:last-child{border-bottom:1px solid var(--rule-faint)}
.creed__head{
  font-family:var(--font-util);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding-bottom:.7rem;
  border-top:0;
}
.creed__head-do{color:var(--ink)}
.creed__head-not{color:var(--madder)}
.creed__do{font-family:var(--font-display);font-size:1.04rem;line-height:1.35}
.creed__not{
  font-family:var(--font-display);
  font-size:1.04rem;
  line-height:1.35;
  color:var(--ink-faint);
  text-decoration:line-through;
  text-decoration-color:var(--madder);
  text-decoration-thickness:1px;
}

/* three-column action guide */
.cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3.5vw,3rem);
  margin-top:2.4rem;
}
.col__head{
  font-family:var(--font-display);
  font-size:1.3rem;
  padding-bottom:.7rem;
  margin-bottom:1.1rem;
  border-bottom:1px solid var(--madder);
}
.col__list li{
  padding:.7rem 0;
  border-top:1px solid var(--rule-faint);
  font-size:.95em;
  line-height:1.6;
}
.col__list li:first-child{border-top:0;padding-top:0}

/* lineage timeline */
.line{margin:2.4rem 0;max-width:44rem}
.line__row{
  display:grid;
  grid-template-columns:4.5rem minmax(0,1fr);
  gap:1.2rem;
  padding:.85rem 0;
  border-top:1px solid var(--rule-faint);
}
.line__row:last-child{border-bottom:1px solid var(--rule-faint)}
.line__yr{
  font-family:var(--font-util);
  font-size:.72rem;
  color:var(--madder);
  padding-top:.3em;
  font-variant-numeric:tabular-nums;
}
.line__who{font-family:var(--font-display);font-size:1.06rem}
.line__what{font-size:.94em;color:var(--ink-soft)}

/* cycle steps */
.cycle{margin:2.2rem 0;max-width:40rem}
.cycle__step{
  display:grid;
  grid-template-columns:1.8rem minmax(0,1fr);
  gap:.9rem;
  padding:.75rem 0;
  border-left:1px dashed var(--rule);
  padding-left:1.4rem;
  margin-left:.3rem;
}
.cycle__n{
  font-family:var(--font-util);
  font-size:.72rem;
  color:var(--madder);
  padding-top:.3em;
}
.cycle__loop{
  font-family:var(--font-util);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--madder);
  padding-left:1.4rem;
  margin-left:.3rem;
  padding-top:.9rem;
}

/* footer */
.foot{
  padding-block:3.5rem 5rem;
  font-family:var(--font-util);
  font-size:.7rem;
  line-height:1.85;
  color:var(--ink-faint);
  max-width:40rem;
}
.foot a{color:var(--ink-soft)}

/* ============================================================
   9. MOTION
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.68,.3,1);
}

@keyframes draw-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.js .box{animation:draw-in .85s cubic-bezier(.3,.7,.3,1) both}
.js .box--ranking{animation-delay:.35s}
.js .box--aspiration{animation-delay:1.35s}
.js .box__cap{animation:fade-up .6s ease both}
.js .box__cap--first{animation-delay:1.05s}
.js .box__cap--last{animation-delay:2.05s}
.js .boxes__gap{animation:fade-up .5s ease both;animation-delay:1.2s}

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

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .page{border-left:0}
  .toc{display:block}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:2.8rem}
  .cols{grid-template-columns:minmax(0,1fr);gap:2.4rem}
}
@media (max-width:680px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  .gp__pillars{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .gp__pillar{border-bottom:1px solid var(--ink);padding:1rem}
  .gp__plinth{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.5rem;border-top-width:1px}
  .gp__found{border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
  .gp__found:nth-child(odd){border-left:0}
  .gp__found:nth-child(-n+2){border-top:0}
  .creed__row{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .creed__row--head{display:none}
  .hero__kicker{font-size:.6rem;letter-spacing:.16em}
  .line__row{grid-template-columns:3.6rem minmax(0,1fr);gap:.9rem}
  .dropcap::first-letter{font-size:3em}
}

/* ============================================================
   11. APPLIED PAGE (kockerbecks)
   ============================================================ */
.backlink{
  display:inline-block;
  font-family:var(--font-util);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-decoration:none;
  margin-bottom:2rem;
}
.backlink:hover{color:var(--madder)}

.kid__head{margin-bottom:2.2rem}
.kid__name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem,1.6rem + 4vw,4.4rem);
  line-height:1;
  letter-spacing:-.028em;
  margin-bottom:.6rem;
}
.kid__meta{
  font-family:var(--font-util);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--madder);
  margin-bottom:1.2rem;
}
.kid__now{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:40rem;
}

.tips{max-width:44rem}
.tip{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr);
  gap:1rem;
  padding:1.7rem 0;
  border-top:1px solid var(--rule-faint);
}
.tip:last-child{border-bottom:1px solid var(--rule-faint)}
.tip__n{
  font-family:var(--font-util);
  font-size:.72rem;
  color:var(--madder);
  padding-top:.55em;
  font-variant-numeric:tabular-nums;
}
.tip__t{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.2rem,1.1rem + .6vw,1.5rem);
  line-height:1.22;
  letter-spacing:-.008em;
  margin-bottom:.7rem;
}
.tip__body p{font-size:.99em}
.tip__body p + p{margin-top:.9em}
.tip__meta{
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px dashed var(--rule);
  display:grid;
  gap:.6rem;
}
.tip__lab{
  display:block;
  font-family:var(--font-util);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--madder);
  margin-bottom:.2rem;
}
.tip__meta > div{font-size:.9em;line-height:1.6;color:var(--ink-soft)}

@media (max-width:680px){
  .tip{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .tip__n{padding-top:0}
}