/* Production stylesheet for losaltosinstitution.org.
   Layers page layout on top of the design system's tokens. Plain CSS — no
   framework, no build step, no runtime JS required to render. */
@import url("styles.css");

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--white);color:var(--link-color);padding:var(--space-3) var(--space-5);font:var(--type-button)}
.skip:focus{left:var(--space-4);top:var(--space-4)}

/* ---------- header ---------- */
.hdr{background:var(--surface-header);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-6);padding:0 var(--space-10);min-height:var(--header-height)}
.hdr__logo{display:inline-flex;flex:0 0 auto}
.hdr__logo img{height:60px;width:auto}
.nav{display:flex;justify-content:center;align-items:stretch;gap:var(--space-2);flex-wrap:wrap}
.nav a{position:relative;display:inline-flex;align-items:center;padding:var(--space-5) var(--space-4);font:var(--type-label);font-size:var(--text-sm);color:var(--nav-color);text-decoration:none;transition:var(--transition-color)}
.nav a:hover{color:var(--nav-color-active)}
.nav a[aria-current="page"]{color:var(--nav-color-active)}
.nav a[aria-current="page"]::before{content:"";position:absolute;top:0;left:var(--space-4);right:var(--space-4);height:3px;background:var(--nav-overline)}
.social{display:flex;align-items:center;gap:var(--space-3);list-style:none;margin:0;padding:0}
.social a{display:block;transition:var(--transition-opacity)}
.social a:hover{opacity:.7}
.social img{width:var(--social-dot);height:var(--social-dot)}
.navtoggle{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);height:var(--control-height);padding:0 var(--control-padding-x);font:var(--type-button);letter-spacing:var(--tracking-wide);border-radius:var(--radius-none);border:var(--border-width-hairline) solid transparent;text-decoration:none;cursor:pointer;transition:var(--transition-color)}
.btn--solid{background:var(--btn-solid-bg);color:var(--btn-solid-fg)}
.btn--solid:hover{background:var(--btn-solid-bg-hover);color:var(--btn-solid-fg)}
.btn--photo{background:var(--btn-onphoto-bg);color:var(--btn-onphoto-fg);min-width:238px}
.btn--photo:hover{background:var(--btn-onphoto-bg-hover);color:var(--btn-onphoto-fg)}
.btn--outline{background:transparent;color:var(--btn-outline-fg);border-color:var(--btn-outline-border)}
.btn--outline:hover{background:var(--btn-outline-bg-hover);color:var(--btn-outline-fg-hover)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:var(--hero-height);display:flex;align-items:center;overflow:hidden;background:var(--surface-inverse-deep)}
.hero__img,.band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__tint{position:absolute;inset:0;background:var(--overlay-photo)}
.hero__body{position:relative;padding:var(--space-16) var(--container-gutter);max-width:620px;color:var(--text-on-photo)}
.hero__eyebrow{font:var(--type-hero-eyebrow);text-transform:uppercase}
.hero__title{font:var(--type-hero-wordmark);color:inherit;text-transform:uppercase;margin:var(--space-1) 0}
.hero__tagline{font:var(--type-hero-tagline);text-transform:uppercase}
.hero__lead{font:var(--type-lead);margin-top:var(--space-4);max-width:26em}
.hero__lead strong{font-weight:var(--weight-semibold)}
.hero__cta{margin-top:var(--space-8)}

/* page-header variant for interior pages */
.phead{min-height:300px}
.phead .hero__tint{background:var(--overlay-photo)}
.phead__title{font:var(--type-hero-wordmark);font-size:var(--text-4xl);color:inherit;text-transform:uppercase}

/* ---------- layout ---------- */
.band{background:var(--surface-band)}
.band--photo{position:relative;min-height:285px;display:flex;align-items:center;overflow:hidden;background:var(--surface-inverse-deep)}
.band--photo .band__tint{position:absolute;inset:0;background:var(--overlay-photo-soft)}
.band--photo__body{position:relative;padding:var(--space-12) var(--container-gutter);max-width:660px;display:grid;gap:var(--space-8);justify-items:start}
.band--photo__body p{font:var(--type-h3);color:var(--text-on-photo)}
.section{padding:var(--section-padding-y) var(--container-gutter)}
.section--band{padding:var(--band-padding-y) var(--container-gutter)}
.wrap{max-width:var(--container-max);margin:0 auto}
.shead{display:grid;gap:var(--space-6);margin-bottom:var(--space-12)}
.shead p{font:var(--type-label)}
.rule{height:var(--border-width-rule);background:var(--border-rule);border:0}
.display{font:var(--type-display)}
.h2{font:var(--type-h2)}
.lead{font:var(--type-lead)}
.prose{font:var(--type-body);max-width:66ch;display:grid;gap:var(--space-5)}

/* ---------- overlap card ---------- */
.overlap{display:flex;align-items:flex-start}
.overlap img{width:58%;height:auto;object-fit:cover}
.overlap__card{background:var(--surface-card);padding:var(--space-20) var(--space-16);margin-left:-9%;margin-top:84px;flex:1 1 0;min-width:0}
.overlap__card h2{margin-bottom:var(--space-8)}
.overlap__card p{font:var(--type-body);max-width:58ch}
.overlap__foot{margin-top:var(--space-8)}
.tlink{font-weight:var(--weight-semibold)}

/* ---------- navy priorities table ---------- */
.panel{background:var(--surface-inverse);color:var(--text-on-inverse)}
.prow{display:grid;grid-template-columns:var(--icon-lg) minmax(0,320px) minmax(0,1fr);align-items:start;column-gap:var(--space-8);padding:var(--space-8) var(--space-7)}
.prow+.prow{border-top:var(--divider-inverse)}
.prow h3{font:var(--type-h4);color:var(--text-on-inverse)}
.prow p{font:var(--type-lead);color:var(--text-on-inverse)}
.glyph{width:var(--icon-lg);height:var(--icon-lg);flex:0 0 auto;background:var(--white);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.glyph--navy{background:var(--blue-600)}
.glyph--img{background:none}

/* ---------- featured fellow ---------- */
.fellow{background:var(--surface-inverse);color:var(--text-on-inverse);display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-16);align-items:center;padding:var(--space-20) var(--container-gutter)}
.fellow__meta{display:grid;gap:var(--space-4)}
.fellow__meta h3{font:var(--type-h3);color:var(--text-on-inverse)}
.fellow__meta p{font:var(--type-body);color:var(--text-on-inverse)}
.fellow__role{opacity:.9}
.fellow__rule{height:1px;background:var(--border-rule-inverse);margin:var(--space-2) 0 var(--space-6)}
.portrait{width:100%;aspect-ratio:503/715;object-fit:cover;background:var(--surface-inverse-deep)}
.portrait--empty{display:grid;place-items:center;font:var(--type-legal);color:rgba(255,255,255,.55);text-align:center;padding:var(--space-6)}

/* ---------- grids ---------- */
.grid{display:grid;gap:var(--grid-gap-wide)}
.grid--5{grid-template-columns:repeat(5,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.tile{display:grid;justify-items:center;gap:var(--space-6);text-align:center;text-decoration:none}
.tile span{font:var(--type-label);color:var(--text-heading);text-wrap:balance}

/* fellow roster card */
.fcard{background:var(--surface-card);display:grid}
.fcard img,.fcard .portrait{width:100%;aspect-ratio:503/715;object-fit:cover}
.fcard__body{padding:var(--space-6)}
.fcard__body h3{font:var(--type-h4);margin-bottom:var(--space-2)}
.fcard__body p{font:var(--type-legal);color:var(--text-muted)}

/* centre list */
.clist{display:grid;gap:0}
.citem{display:grid;grid-template-columns:var(--icon-lg) 1fr;gap:var(--space-6);padding:var(--space-6) 0;align-items:start}
.citem+.citem{border-top:var(--divider-hairline)}
.citem h3{font:var(--type-h4)}
.citem p{font:var(--type-body);color:var(--text-body);margin-top:var(--space-2)}

/* note / disclosure block */
.note{background:var(--surface-card);border-left:0;padding:var(--space-6) var(--space-8);font:var(--type-body);display:grid;gap:var(--space-3);outline:var(--divider-hairline)}
.note strong{font-weight:var(--weight-semibold)}

/* stats */
.stats{gap:var(--grid-gap-wide)}
.stat{display:grid;gap:var(--space-2)}
.stat__n{font:var(--type-display);color:var(--text-heading);line-height:1}
.stat__l{font:var(--type-lead);color:var(--text-body)}

/* program inclusions */
.incl{display:grid;gap:var(--space-3);align-content:start}
.incl h3{font:var(--type-h4);color:var(--text-heading)}
.incl p{font:var(--type-body)}

/* FAQ accordion — native details/summary, no JS */
.faq{display:grid}
.faq details{border-top:var(--divider-hairline);background:var(--surface-card)}
.faq details:last-child{border-bottom:var(--divider-hairline)}
.faq summary{font:var(--type-h4);color:var(--text-heading);padding:var(--space-5) var(--space-10) var(--space-5) var(--space-6);cursor:pointer;list-style:none;position:relative;transition:var(--transition-color)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:var(--space-6);top:50%;width:10px;height:10px;border-right:2px solid var(--blue-600);border-bottom:2px solid var(--blue-600);transform:translateY(-70%) rotate(45deg);transition:transform var(--duration-fast) var(--ease-standard)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{color:var(--blue-700)}
.faq details p{font:var(--type-body);padding:0 var(--space-10) var(--space-6) var(--space-6);max-width:74ch}

/* ---------- footer ---------- */
.ftr{background:var(--surface-card);padding:var(--space-10) var(--space-12);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-10)}
.ftr__logo img{height:84px;width:auto}
.ftr__mid{display:grid;gap:var(--space-3);justify-items:start}
.ftr__links{display:flex;gap:var(--space-6);flex-wrap:wrap}
.ftr__links a{font-size:var(--text-sm)}
.ftr__legal{font:var(--type-legal);max-width:62ch}
.ftr__right{display:flex;align-items:center;gap:var(--space-8)}
.ftr__right img.partner{height:62px;width:auto}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--container-gutter:40px}
  .fellow{grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-10)}
  .overlap__card{padding:var(--space-12) var(--space-10);margin-top:56px}
  .grid--5{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hdr{grid-template-columns:auto auto;gap:var(--space-4);padding:var(--space-4) var(--space-5);position:relative}
  .hdr__social{display:none}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 var(--space-4);background:transparent;border:var(--border-width-hairline) solid var(--border-strong);color:var(--nav-color);font:var(--type-button);cursor:pointer}
  .nav{display:none;grid-column:1/-1;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding-bottom:var(--space-3)}
  .nav a{padding:var(--space-4) 0;border-top:var(--divider-hairline)}
  .nav a[aria-current="page"]::before{left:0;right:auto;width:28px}
  .hdr[data-open="true"] .nav{display:flex}
  .hero{min-height:0}
  .hero__body{padding:var(--space-14) var(--container-gutter);max-width:none}
  .hero__title{font-size:var(--text-4xl)}
  .hero__tagline{font-size:var(--text-base)}
  .overlap{display:grid}
  .overlap img{width:100%}
  .overlap__card{margin-left:0;margin-top:0}
  .prow{grid-template-columns:var(--icon-lg) 1fr;row-gap:var(--space-3)}
  .prow h3{grid-column:2}
  .prow p{grid-column:2}
  .fellow{grid-template-columns:1fr;padding:var(--space-14) var(--container-gutter)}
  .fellow__portrait{max-width:320px}
  .section,.section--band{padding:var(--space-14) var(--container-gutter)}
  .display{font-size:var(--text-4xl)}
  .band--photo__body p{font:var(--type-h4);font-size:var(--text-lg);color:var(--text-on-photo)}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .stat__n{font-size:var(--text-4xl)}
  .ftr{grid-template-columns:1fr;justify-items:start;gap:var(--space-8);padding:var(--space-10) var(--space-6)}
}
@media (max-width:560px){
  :root{--container-gutter:20px}
  .grid--5,.grid--4{grid-template-columns:repeat(2,1fr)}
  .hero__title{font-size:var(--text-3xl)}
  .hero__eyebrow{font-size:var(--text-base)}
  .btn--photo{min-width:0;width:100%}
  .overlap__card{padding:var(--space-8) var(--space-6)}
  .prow{grid-template-columns:1fr;row-gap:var(--space-2)}
  .prow h3,.prow p{grid-column:1}
  .ftr__logo img{height:64px}
}
@media print{
  .hdr,.navtoggle,.band--photo,.skip{display:none}
}