



@font-face{font-family:Barlow;src:url('./assets/fonts/barlow-regular.ttf')}@font-face{font-family:Barlow;src:url('./assets/fonts/barlow-bold.ttf');font-weight:700}*{box-sizing:border-box}body{margin:0;background:#facdc1;color:#153328;font-family:Barlow,Arial,sans-serif;font-size:18px;line-height:1.6}a{color:inherit}main{max-width:1120px;margin:auto;padding:70px 30px 100px}.hero{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:70px}.hero img{width:100%;max-height:440px;object-fit:cover;object-position:top;border-radius:180px 180px 12px 12px;background:#c0e3d9}h1,h2,h3,p{margin:0}h1{font-size:clamp(3.5rem,8vw,6.5rem);line-height:1;letter-spacing:-.04em;margin-bottom:22px}h2{font-size:clamp(2.3rem,5vw,4rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:24px}h3{font-size:1.2rem;line-height:1.3}p+p{margin-top:16px}.lead{font-size:1.3rem;max-width:650px}.story{max-width:760px;margin:75px 0}.timeline-section{background:#f8eee8;padding:clamp(26px,5vw,65px);border-radius:24px}.timeline-intro{max-width:680px;margin-bottom:42px}.timeline{list-style:none;margin:0 0 0 9px;padding:0;border-left:2px solid #82aa9c}.timeline li{position:relative;padding:0 0 34px 35px}.timeline li:last-child{padding-bottom:0}.timeline li:before{content:'';position:absolute;left:-9px;top:8px;width:16px;height:16px;border-radius:50%;background:#153328;border:3px solid #f8eee8}.year{display:block;font-weight:700;color:#477b69;letter-spacing:.06em;margin-bottom:4px}.timeline p{margin-top:5px}.closing{max-width:700px;margin-top:75px}footer{background:#153328;color:#fff;padding:35px 30px}footer div{max-width:1120px;margin:auto}footer a{margin-right:25px}@media(max-width:700px){.hero{grid-template-columns:1fr;gap:30px}.hero img{max-height:340px;max-width:280px}main{padding:45px 22px 65px}.story,.closing{margin-top:50px}.timeline-section{margin-inline:-8px}.timeline li{padding-left:26px}}



/* Portrait blends into the existing peach background. */



.hero{gap:clamp(32px,6vw,70px);align-items:start}



.hero img{display:block;width:min(100%,340px);height:390px;max-height:none;object-fit:cover;object-position:center top;border-radius:0;background:transparent;mask-image:linear-gradient(#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(#000 78%,transparent 100%)}



.timeline-section{padding:clamp(26px,4vw,52px)}



.timeline-intro{margin-bottom:28px}



.timeline li{padding:0 0 18px 28px}



.timeline li:last-child{padding-bottom:0}



.timeline li:before{top:7px;width:14px;height:14px;left:-8px}



.year{margin-bottom:0;font-size:.9rem;line-height:1.3}



.timeline h3{font-size:1.08rem}



.timeline p{margin-top:2px;font-size:1rem;line-height:1.4}



@media(max-width:700px){.hero img{width:min(72%,270px);height:285px;max-height:none;justify-self:center}.timeline li{padding-left:22px;padding-bottom:16px}}



.about-nav{display:flex;flex-wrap:wrap;gap:28px}.about-nav a{padding:10px 0}@media(max-width:700px){.about-nav{gap:14px;font-size:15px}}







/* Compact, readable chronology. */



body,.lead{font-size:16px}.timeline-intro{margin-bottom:20px}.timeline li{display:grid;grid-template-columns:55px minmax(0,1fr);column-gap:14px;padding:0 0 12px 22px}.timeline li:last-child{padding-bottom:0}.timeline .year{grid-column:1;grid-row:1 / 3;padding-top:2px;font-size:15px}.timeline h3,.timeline p{grid-column:2}.timeline h3{font-size:16px;line-height:1.35}.timeline p{font-size:16px;line-height:1.4;margin-top:1px}.timeline li:before{top:5px}@media(max-width:700px){.timeline li{grid-template-columns:45px minmax(0,1fr);column-gap:9px;padding:0 0 12px 17px}.timeline li:last-child{padding-bottom:0}}






/* Consistent content width across the page. */


main{max-width:1020px}.story,.closing{max-width:none}@media(max-width:700px){main{padding-inline:24px}.timeline-section{margin-inline:0}}



main{padding-top:40px}
@media(max-width:700px){main{padding-top:32px}}

@media(min-width:701px){.hero{display:block;position:relative;padding-right:38%}.hero img{position:absolute;right:0;top:0;width:min(34%,340px)}.story{max-width:60%;min-height:205px;margin:48px 0 30px}}
