@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#12160f; --paper:#f7f6f2; --panel:#ffffff;
  --brown:#6B3F1D; --orange:#E8720C; --near-black:#1A1A1A;
  --gray-hero:#F1EFEC; --line:rgba(18,22,15,0.14); --muted:#5b6157;
  --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0; overflow-x:hidden;}
body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6;}
a{color:inherit;}
.wrap{max-width:840px; margin:0 auto; width:100%;}
img{max-width:100%; height:auto;}

.site-header{display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:var(--brown); position:sticky; top:0; z-index:10; gap:12px;}
.site-header .brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.site-header .dot{width:20px; height:20px; border-radius:50%; background:#fff; flex-shrink:0;}
.site-header .name{font-family:var(--display); font-weight:500; font-size:16px; color:#fff; white-space:nowrap;}
.site-header nav{display:flex; gap:18px; font-size:13px; color:#E4D3C2; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.site-header nav::-webkit-scrollbar{display:none;}
.site-header nav a{text-decoration:none; color:inherit; white-space:nowrap; flex-shrink:0;}
.site-header nav a.active{color:#fff; font-weight:600; border-bottom:2px solid var(--orange); padding-bottom:2px;}

@media (max-width:640px){
  .site-header{padding:12px 16px; flex-wrap:wrap;}
  .site-header .name{font-size:14px;}
  .site-header nav{gap:14px; font-size:12px; width:100%; padding-bottom:2px;}
  .hero{padding:18px 16px !important;}
  .hero .big{font-size:18px !important; line-height:1.4;}
  .section{padding:16px !important;}
  table{font-size:12px;}
  th,td{padding:6px !important;}
}

.hero{background:var(--gray-hero); padding:28px; border-bottom:2px solid var(--near-black);}
.hero .big{font-family:var(--display); font-size:22px; font-weight:500; line-height:1.4; margin-bottom:16px; color:var(--ink);}
.page-title{font-family:var(--display); font-size:19px; font-weight:500; color:var(--ink);}
.page-sub{font-size:13px; color:var(--muted); margin-top:4px;}

.bullets{list-style:none; margin:0; padding:0;}
.bullets li{display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:14px; line-height:1.6;}
.dot-brown{width:14px; height:14px; border-radius:50%; background:var(--brown); display:flex; align-items:center; justify-content:center; margin-top:3px; flex-shrink:0;}
.dot-brown .inner{width:5px; height:5px; border-radius:50%; background:#fff;}

.section{padding:22px 28px; overflow-x:auto;}
.section h2{font-family:var(--display); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); margin:0 0 12px;}

.pill{display:inline-block; background:#fff; border:1.5px solid var(--near-black); font-size:11px; padding:3px 11px; border-radius:12px; color:var(--near-black); font-weight:500;}

.card{border:0.5px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:14px; background:var(--panel);}
.card .accent-o{border-left:3px solid var(--orange);}
.card .accent-b{border-left:3px solid var(--brown);}
.card-body{padding:14px;}
.card-title{font-family:var(--display); font-size:14px; font-weight:500; margin-bottom:4px; color:var(--ink);}
.card-desc{font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:8px;}

.cite-list{list-style:none; margin:0; padding:0;}
.cite-item{padding:14px 0; border-bottom:0.5px solid var(--line);}
.cite-item:last-child{border-bottom:none;}
.cite-num{font-family:var(--display); font-size:12px; color:var(--orange); font-weight:600;}
.cite-text{font-size:13px; color:var(--ink); line-height:1.6; margin-top:2px;}
.cite-tags{margin-top:6px;}
.cite-tags .pill{margin-right:6px; margin-bottom:4px;}

table{width:100%; border-collapse:collapse; font-size:13px; min-width:420px;}
th{text-align:left; font-family:var(--display); font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); padding:8px 10px; border-bottom:2px solid var(--near-black);}
td{padding:10px; border-bottom:0.5px solid var(--line); vertical-align:top;}

.timeline{position:relative; padding-left:22px; margin-top:6px;}
.timeline::before{content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--orange);}
.tl-item{position:relative; padding-bottom:20px;}
.tl-dot{position:absolute; left:-22px; top:2px; width:12px; height:12px; border-radius:50%; border:2px solid #fff;}
.tl-dot.now{background:var(--orange);}
.tl-dot.past{background:var(--brown);}
.tl-year{font-family:var(--display); font-size:13px; color:var(--orange); font-weight:600;}
.tl-title{font-size:13px; color:var(--ink); font-weight:500;}
.tl-mentor{font-size:12px; color:var(--muted);}

.site-footer{border-top:1px solid var(--line); padding:22px 28px; font-size:12px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
@media (max-width:640px){
  .site-footer{padding:16px; font-size:11px;}
}

.photo-grid-3, .photo-grid-2{display:grid; gap:10px;}
.photo-grid-3{grid-template-columns:repeat(3, minmax(0,1fr));}
.photo-grid-2{grid-template-columns:repeat(2, minmax(0,1fr));}
.two-col{display:flex; gap:24px;}
.two-col > div{flex:1; min-width:0;}
@media (max-width:520px){
  .photo-grid-3, .photo-grid-2{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .two-col{flex-direction:column;}
}