/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --ink:#0D0C0A;
  --ink-raised:#151310;
  --paper:#EEE8DA;
  --ash:#8B8577;
  --signal:#6E9089;
  --rule:rgba(238,232,218,0.14);
  --body-copy:#D9D3C4;

  --font-display:'Fraunces', serif;
  --font-body:'Space Grotesk', sans-serif;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-lg: clamp(1.25rem, 2.4vw, 1.75rem);
  --text-xl: clamp(1.75rem, 3.4vw, 2.375rem);
  --text-2xl: clamp(2.25rem, 4.5vw, 3.5rem);
  --text-display: clamp(2.75rem, 8vw, 6rem);

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;

  --max: 1080px;
  --transition: 200ms ease;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
ul, ol{list-style:none;}
button{font:inherit; background:none; border:none; cursor:pointer; color:inherit;}
input, textarea, select{font:inherit; color:inherit;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

/* Skip link */
.skip-link{
  position:absolute; top:-48px; left:8px; z-index:100;
  background:var(--paper); color:var(--ink);
  padding:12px 20px; border-radius:2px; font-size:var(--text-sm); font-weight:500;
  transition:top var(--transition);
}
.skip-link:focus{top:8px;}

/* Focus visibility everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--signal); outline-offset:3px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
section{padding:var(--space-8) var(--space-4); max-width:var(--max); margin:0 auto;}
.col{max-width:660px;}
hr.rule{border:none; border-top:1px solid var(--rule); margin:0 var(--space-4);}
p{margin-bottom:var(--space-3); color:var(--body-copy); font-weight:300; font-size:var(--text-base);}
.pull{
  font-family:var(--font-display);
  font-size:var(--text-lg); font-weight:500; color:var(--paper);
  line-height:1.3; margin:var(--space-5) 0 0; max-width:560px;
}

.kicker{
  display:flex; align-items:baseline; gap:10px;
  color:var(--signal); font-size:var(--text-sm); font-weight:500;
  font-family:var(--font-body);
  margin-bottom:var(--space-4); text-transform:none;
}
.kicker .num{color:var(--ash); font-variant-numeric:tabular-nums;}

.sub-heading{
  font-family:var(--font-display); font-size:var(--text-base);
  font-weight:600; color:var(--paper); margin-bottom:var(--space-3);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(13,12,10,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:18px 24px;
  display:flex; justify-content:space-between; align-items:center;
  position:relative;
}
.nav-name{
  font-size:var(--text-sm); font-weight:500; color:var(--paper);
  text-decoration:none;
}
.nav-links{display:flex; gap:28px;}
.nav-links a{
  color:var(--ash); text-decoration:none; font-size:var(--text-sm); font-weight:400;
  transition:color var(--transition);
  padding:8px 0;
}
.nav-links a:hover, .nav-links a[aria-current="true"]{color:var(--paper);}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border-radius:2px;
}
.hamburger, .hamburger::before, .hamburger::after{
  display:block; width:22px; height:1.5px; background:var(--paper);
  position:relative; transition:transform var(--transition), opacity var(--transition);
}
.hamburger::before, .hamburger::after{content:""; position:absolute; left:0;}
.hamburger::before{top:-7px;}
.hamburger::after{top:7px;}
.nav-toggle[aria-expanded="true"] .hamburger{background:transparent;}
.nav-toggle[aria-expanded="true"] .hamburger::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .hamburger::after{transform:translateY(-7px) rotate(-45deg);}

@media (max-width:720px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--rule);
    max-height:0; overflow:hidden;
    transition:max-height var(--transition);
  }
  .nav-links.is-open{max-height:400px;}
  .nav-links li{border-top:1px solid var(--rule);}
  .nav-links a{display:block; padding:16px 24px; font-size:var(--text-base); min-height:44px;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
#hero{
  padding-top:var(--space-7); padding-bottom:var(--space-8);
  display:grid; grid-template-columns:1fr; gap:var(--space-6);
}
@media (min-width:900px){
  #hero{grid-template-columns:320px 1fr; align-items:center;}
}
.portrait{
  position:relative; aspect-ratio:4/5; max-width:320px;
  overflow:hidden;
}
.portrait svg{width:100%; height:100%;}
.portrait img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  display:block; filter:grayscale(15%) contrast(1.05) brightness(0.97);
}
.portrait::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 78% at 50% 42%, rgba(13,12,10,0) 40%, var(--ink) 100%);
  pointer-events:none;
}
.portrait-note{
  position:absolute; bottom:12px; left:12px;
  font-size:var(--text-xs); color:var(--ash);
  background:rgba(13,12,10,0.7); padding:4px 10px; border-radius:2px;
}
.hero-name{
  font-family:var(--font-display);
  font-size:var(--text-display);
  font-weight:600; line-height:1.02; letter-spacing:-0.01em;
  margin-bottom:var(--space-4);
}
.hero-thesis{
  font-size:var(--text-lg); font-weight:300; color:var(--paper);
  max-width:640px; margin-bottom:var(--space-3);
}
.hero-role{color:var(--ash); font-size:var(--text-base); margin-bottom:var(--space-3);}
.hero-proof{color:var(--ash); font-size:var(--text-xs); margin-bottom:var(--space-5); letter-spacing:0.01em;}

.hero-ctas{display:flex; flex-wrap:wrap; gap:var(--space-3);}
.cta-primary, .cta-secondary{
  display:inline-flex; align-items:center;
  font-size:var(--text-sm); font-weight:500;
  padding:14px 26px; border-radius:2px; text-decoration:none;
  min-height:44px;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.cta-primary{background:var(--paper); color:var(--ink);}
.cta-primary:hover{background:#fff;}
.cta-secondary{border:1px solid var(--rule); color:var(--paper);}
.cta-secondary:hover{border-color:var(--signal); color:var(--signal);}

/* ==========================================================================
   Selected Impact
   ========================================================================== */
.impact-intro{margin-bottom:var(--space-5);}
.impact-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:var(--space-6) var(--space-6);
}
.impact-grid .metric-value{font-size:var(--text-2xl);}

/* ==========================================================================
   Metrics (shared typographic-number component)
   ========================================================================== */
.metric-label{color:var(--ash); font-size:var(--text-xs); margin-bottom:6px; line-height:1.4;}
.metric-value{
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums; font-weight:600;
  font-size:clamp(1.75rem, 3.6vw, 2.5rem); line-height:1.1;
}
.metric-value .from{color:var(--ash); font-weight:400;}
.metric-value .to{color:var(--paper);}

/* ==========================================================================
   The Work
   ========================================================================== */
.case{
  position:relative;
  padding-top:var(--space-7); padding-bottom:var(--space-7);
  border-top:1px solid var(--rule);
  overflow:hidden;
}
.case:first-of-type{border-top:none;}
.case-compact{padding-top:var(--space-6); padding-bottom:var(--space-2);}
.case-ghost{
  position:absolute; top:var(--space-6); right:0;
  font-family:var(--font-display); font-size:clamp(4rem, 12vw, 9rem);
  font-weight:300; color:var(--paper); opacity:0.05; line-height:1;
  pointer-events:none; user-select:none;
}
.case-years{color:var(--ash); font-size:var(--text-sm); margin-bottom:10px;}
.title{
  font-family:var(--font-display);
  font-size:var(--text-xl); font-weight:600; line-height:1.15;
  margin-bottom:var(--space-4); max-width:680px;
}
.case-motif{width:160px; height:48px; display:block; margin:var(--space-4) 0;}

.metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-5) var(--space-6); margin-top:var(--space-4);
}
.firsts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-4); margin-top:var(--space-5);
}
.chip{
  font-family:var(--font-display); font-style:italic;
  font-size:var(--text-sm); color:var(--ash);
  border:1px solid var(--rule); border-radius:2px;
  padding:14px 16px; margin-bottom:0;
}

/* ==========================================================================
   Built to Last, timeline
   ========================================================================== */
.timeline{
  margin:var(--space-6) 0;
  border-left:1px solid var(--rule);
}
.timeline li{
  position:relative; padding:0 0 var(--space-6) var(--space-5);
}
.timeline li::before{
  content:""; position:absolute; left:-5px; top:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--signal);
}
.timeline-year{
  display:block; color:var(--ash); font-size:var(--text-xs);
  margin-bottom:6px; letter-spacing:0.01em;
}
.timeline h3{
  font-family:var(--font-display); font-size:var(--text-lg);
  font-weight:600; margin-bottom:6px;
}
.timeline p{max-width:520px; margin-bottom:0;}

/* ==========================================================================
   Speaking & Media
   ========================================================================== */
.speaking-grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-6);
  margin-top:var(--space-6);
}
@media (min-width:700px){
  .speaking-grid{grid-template-columns:1fr 1fr;}
}
.topic-list li{
  position:relative; padding-left:20px; margin-bottom:var(--space-3);
  color:var(--body-copy); font-size:var(--text-base); font-weight:300;
}
.topic-list li::before{
  content:""; position:absolute; left:0; top:11px;
  width:6px; height:1px; background:var(--signal);
}
.download-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--signal); text-decoration:none; font-size:var(--text-sm); font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition);
}
.download-link:hover{border-color:var(--signal);}

/* ==========================================================================
   Recognition
   ========================================================================== */
.awards{margin-top:var(--space-5);}
.award{
  padding:22px 0; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline;
}
.award:last-child{border-bottom:1px solid var(--rule);}
.award-org{color:var(--paper); font-weight:500; font-size:var(--text-base);}
.award-detail{color:var(--ash); font-size:var(--text-sm);}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-7);
  margin-top:var(--space-6);
}
@media (min-width:900px){
  .contact-grid{grid-template-columns:1.3fr 1fr;}
}
form{max-width:520px;}
.field{margin-bottom:var(--space-5);}
label{display:block; font-size:var(--text-xs); color:var(--ash); margin-bottom:8px;}
.field-hint{display:block; font-size:var(--text-xs); color:var(--ash); margin-top:6px;}
input, textarea, select{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--rule);
  color:var(--paper); font-size:var(--text-base); padding:10px 0; font-weight:300;
  min-height:44px;
}
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8577' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
}
select option{background:var(--ink-raised); color:var(--paper);}
textarea{resize:vertical; min-height:120px; padding-top:12px;}
input:focus, textarea:focus, select:focus{outline:none; border-bottom-color:var(--signal);}

.hp-field{position:absolute; left:-9999px; top:-9999px;}

button[type="submit"]{
  margin-top:var(--space-2); background:var(--paper); color:var(--ink);
  font-weight:500; font-size:var(--text-sm); padding:14px 28px;
  border-radius:2px; min-height:44px;
  transition:background var(--transition);
}
button[type="submit"]:hover{background:#fff;}
.form-status{
  margin-top:var(--space-3); font-size:var(--text-sm); color:var(--signal); min-height:1.4em;
}
.form-status[data-state="error"]{color:#C97A6E;}

.contact-aside p{font-size:var(--text-sm);}
.contact-aside a{color:var(--paper); text-decoration:none; border-bottom:1px solid var(--rule);}
.contact-aside a:hover{border-color:var(--signal); color:var(--signal);}
.privacy-note{color:var(--ash); font-size:var(--text-xs); margin-top:var(--space-4); max-width:320px;}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  border-top:1px solid var(--rule);
  padding:var(--space-6) var(--space-4) var(--space-7);
}
.footer-inner{max-width:var(--max); margin:0 auto;}
.footer-name{color:var(--paper); font-weight:500; font-size:var(--text-sm); margin-bottom:4px;}
footer p{color:var(--ash); font-size:var(--text-xs); margin-bottom:8px;}
footer a{color:var(--ash); text-decoration:underline; text-underline-offset:2px;}
footer a:hover{color:var(--paper);}
.footer-copyright{margin-bottom:0;}

/* ==========================================================================
   Scroll-reveal (progressive enhancement, JS-gated)
   ========================================================================== */
.reveal{opacity:0; transform:translateY(8px); transition:opacity 400ms ease, transform 400ms ease;}
.reveal.is-visible{opacity:1; transform:none;}