/* ---------- Tokens (sampled from the real MYCC logo) ---------- */
:root{
  --teal-900:#122831;
  --teal-800:#1c3d47;
  --teal-700:#28525f;
  --teal-600:#38758a;   /* exact logo teal */
  --teal-500:#5c93a6;
  --teal-100:#dbe8ec;
  --teal-50:#f2f7f8;

  --green-700:#1a8a1f;
  --green-600:#23b029;  /* exact logo green */

  --ink:#182523;
  --ink-soft:#3d4c49;
  --line:#d8ddd8;
  --paper:#ffffff;
  --paper-soft:#f6f5f0;

  --font-display:"Fraunces", ui-serif, Georgia, serif;
  --font-body:"Public Sans", ui-sans-serif, system-ui, sans-serif;

  --container:1120px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:80px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--teal-700);}
strong{color:var(--teal-900); font-weight:700;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--teal-900);
  line-height:1.2;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:2.5rem; color:var(--teal-600);}
h2{
  font-size:1.7rem; padding-bottom:.45em; margin-bottom:.85em;
  border-bottom:3px solid var(--teal-700);
  display:flex; align-items:center; gap:.4em;
}
h2::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--green-600); flex-shrink:0;
}
h3{font-size:1.25rem; color:var(--teal-800);}
p{margin:0 0 1em; color:var(--ink-soft);}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--teal-800); font-weight:700;
  padding:12px 18px; border:2px solid var(--green-600);
  border-radius:0 0 8px 0; text-decoration:none;
}
.skip-link:focus{left:0;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  padding:12px 24px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand-logo{height:42px; width:auto;}
.brand-full{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--teal-900);
  white-space:nowrap;
}
.main-nav{display:flex; gap:18px; margin-left:auto;}
.main-nav a{
  text-decoration:none; color:var(--ink-soft); font-weight:700; font-size:.94rem;
  padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.main-nav a:hover{color:var(--teal-800); border-bottom-color:var(--green-600);}
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{width:22px; height:2px; background:var(--teal-800); border-radius:2px;}

/* ---------- Photos ---------- */
.photo{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--paper-soft); margin:0;
}
/* Natural ratio, never cropped: the frame follows the photo. */
.photo img{width:100%; height:auto; aspect-ratio:auto; object-fit:contain; display:block;}
.photo figcaption{
  padding:9px 13px; font-size:.76rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--teal-700); background:var(--teal-50);
  border-top:1px solid var(--line);
}
/* Sizes are capped to each image's native width so nothing upscales. */
.photo-single{max-width:440px; margin:22px 0;}
.photo-wide{max-width:100%; margin:22px 0;}

/* ---------- Slideshow ---------- */
.slideshow{margin:22px 0; max-width:520px; position:relative;}
.slideshow-sq{max-width:430px;}

/* Carousel behaviour only applies once JS has enhanced it; without JS the
   slides stay in normal flow and every photo remains visible. */
.js-carousel .slides{
  position:relative; aspect-ratio:16/10;
  border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background:var(--paper-soft);
}
.js-carousel.slideshow-sq .slides{aspect-ratio:4/3;}
.js-carousel .slide{
  position:absolute; inset:0; border:0; border-radius:0; background:none;
  opacity:0; visibility:hidden; transition:opacity .5s ease;
}
.js-carousel .slide.is-active{opacity:1; visibility:visible;}
/* contain, so a slide shows the whole photo rather than a crop of it */
.js-carousel .slide img{width:100%; height:100%; aspect-ratio:auto; object-fit:contain;}
.js-carousel .slide figcaption{
  position:absolute; left:0; right:0; bottom:0; border:0; background:none;
  padding:34px 16px 14px; text-transform:none; letter-spacing:0; color:#fff;
  background-image:linear-gradient(to top, rgba(18,40,49,.94), rgba(18,40,49,.55) 55%, rgba(18,40,49,0));
}
/* Default colours suit the stacked no-JS fallback, where the caption sits on
   the light teal bar. The white treatment applies only over the scrim. */
.slide-title{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.1rem; line-height:1.25; color:var(--teal-900);
}
.js-carousel .slide-title{color:#fff;}

.ss-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.5); background:rgba(18,40,49,.55); color:#fff;
  font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.ss-arrow:hover{background:rgba(18,40,49,.85);}
.ss-prev{left:10px;} .ss-next{right:10px;}
.ss-bar{display:flex; align-items:center; gap:10px; margin-top:4px;}
.ss-dots{display:flex; gap:0;}
/* The dot stays 9px visually, but the button itself is a 24px hit target
   (WCAG 2.5.8). The visual is drawn by ::after so the border still hugs the
   dot rather than the enlarged box. */
.ss-dot{
  width:24px; height:24px; padding:0; cursor:pointer;
  border:0; background:none; position:relative;
}
.ss-dot::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--teal-500); background:transparent;
  transition:background .2s ease, border-color .2s ease;
}
.ss-dot[aria-current="true"]::after{background:var(--green-600); border-color:var(--green-600);}
.ss-play{
  margin-left:auto; cursor:pointer; background:none; border:0; padding:2px 4px;
  font-family:var(--font-body); font-size:.76rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-700);
}
.ss-play:hover{color:var(--green-700);}
.ss-arrow:focus-visible, .ss-dot:focus-visible, .ss-play:focus-visible{
  outline:2px solid var(--green-600); outline-offset:2px;
}
/* script.js makes the carousel itself a tab stop, so it needs a visible ring. */
.slideshow:focus-visible{outline:2px solid var(--green-600); outline-offset:4px;}

/* Announces user-driven slide changes to screen readers only. */
.ss-status{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Motion ---------- */
.photo{transition:transform .25s ease, box-shadow .25s ease;}
.photo img{transition:transform .4s ease;}
.photo:not(.slide):hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(18,40,49,.13);}
.photo:not(.slide):hover img{transform:scale(1.035);}
.text-link{transition:color .2s ease;}
.text-link:hover{transform:none;}

/* Scroll reveal. Hidden state is gated on .js so content stays visible
   when JavaScript never runs. */
.js .reveal{opacity:0; transform:translateY(18px);}
.js .reveal.in-view{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s ease;
}

@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .reveal.in-view{opacity:1; transform:none; transition:none;}
  .photo, .photo img, .js-carousel .slide, .ss-arrow{transition:none;}
  .photo:not(.slide):hover{transform:none;}
  .photo:not(.slide):hover img{transform:none;}
  .project-card{transition:none;}
  .project-card:hover{transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Masthead ---------- */
.masthead{padding:44px 0 32px; border-bottom:1px solid var(--line); background:var(--paper-soft);}
.masthead-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start;}
.masthead-photo{max-width:430px;}
/* The mission copy now carries the masthead in place of the old facts table. */
.masthead-mission{max-width:60ch;}
.masthead-mission p:last-child{margin-bottom:0;}
.eyebrow{
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem;
  color:var(--teal-600); margin:0 0 .5em;
}

/* ---------- Facts table (school-profile "quick facts" pattern) ---------- */
.facts-table{
  width:100%; border-collapse:collapse; margin-top:1.2em; font-size:1rem;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.facts-table th, .facts-table td{
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top;
}
.facts-table tr:last-child th, .facts-table tr:last-child td{border-bottom:none;}
.facts-table tr:nth-child(even){background:var(--paper-soft);}
.facts-table th{
  width:220px; font-weight:800; color:var(--teal-800); background:var(--teal-100);
  font-size:.9rem;
}
.facts-table tr:nth-child(even) th{background:var(--teal-100);}
.facts-table td{color:var(--ink-soft);}
.facts-table td a{color:var(--teal-700); font-weight:700;}
.facts-table.compact th{width:150px;}

/* ---------- Page shell ---------- */
.page-shell{padding-top:0;}
/* Capped for line length: ~80 characters at the 18px body size. */
.content-col{display:flex; flex-direction:column; min-width:0; max-width:720px; margin:0 auto;}
.content-section{padding:34px 0; border-bottom:1px solid var(--line);}
.content-section:last-child{border-bottom:none;}

/* Info blocks (Initiatives) */
.info-block{
  margin-top:24px; padding:18px 0 6px 20px;
  border-left:3px solid var(--green-600);
}
.status-line{font-weight:800; color:var(--green-700); font-size:.98rem;}

/* Sub-group heading inside an info block (h4 already inherits the display
   font above; only the size is missing). */
.sub-head{font-size:1.05rem; margin-top:1.6em;}

/* Project cards. Deliberately not reusing .photo: that class is tuned for
   figures with a caption bar, and this is a flex-column link card. */
.project-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  list-style:none; margin:1.2em 0 0; padding:0;
}
.project-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit; overflow:hidden;
  border:1px solid var(--line); border-radius:8px; background:var(--paper-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(18,40,49,.13);}
.project-card:focus-visible{outline:2px solid var(--green-600); outline-offset:3px;}
.project-card img{width:100%; height:auto; border-bottom:1px solid var(--line);}
.project-name{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  line-height:1.25; color:var(--teal-900); padding:12px 14px 0;
}
.project-note{padding:5px 14px 0; font-size:.9rem; line-height:1.5; color:var(--ink-soft);}
/* margin-top:auto pins the host line to the bottom so cards of unequal
   description length still line up. */
.project-host{
  margin-top:auto; padding:10px 14px 12px;
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-700);
}
.project-card:hover .project-host{color:var(--green-700);}

/* Plain lists */
.plain-list{list-style:none; margin:0 0 1em; padding:0;}
.plain-list li{
  padding:10px 0 10px 20px; position:relative; font-size:1.02rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.plain-list li:last-child{border-bottom:none;}
.plain-list li::before{content:"—"; position:absolute; left:0; color:var(--green-600); font-weight:700;}
.plain-list.tight li{padding:6px 0 6px 20px; border-bottom:none;}
.plain-list strong{color:var(--teal-900);}

.text-link{
  display:inline-block; margin-top:1em; font-weight:800; font-size:1rem;
  text-decoration:none; color:var(--teal-700); border-bottom:2px solid var(--green-600);
  padding-bottom:1px;
}
.text-link:hover{color:var(--green-700);}


/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); background:var(--paper-soft); padding:22px 0;}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-inner p{margin:0; font-size:.88rem; color:var(--ink-soft); font-weight:600;}
.footer-nav{display:flex; gap:20px; flex-wrap:wrap;}
.footer-nav a{text-decoration:none; color:var(--ink-soft); font-size:.88rem; font-weight:700;}
.footer-nav a:hover{color:var(--teal-800);}

/* ---------- Responsive ---------- */
/* The header carries three links, so it collapses to the menu button earlier
   than the page layout breaks — otherwise labels wrap mid-word. */
@media (max-width:1100px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    border-bottom:1px solid var(--line);
  }
  .main-nav.open{max-height:460px; overflow-y:auto;}
  .main-nav a{padding:14px 24px; border-top:1px solid var(--line); border-bottom:none;}
  .nav-toggle{display:flex;}
  .brand-full{display:none;}
}
@media (max-width:900px){
  .masthead-grid{grid-template-columns:1fr;}
  .masthead-photo{max-width:420px;}
}
@media (max-width:600px){
  .wrap{padding:0 18px;}
  .facts-table th{width:auto; display:block;}
  .facts-table td{display:block;}
  .facts-table tr{display:block; border-bottom:1px solid var(--line); padding:8px 0;}
  .facts-table th, .facts-table td{border-bottom:none; padding:4px 14px;}
  .project-grid{grid-template-columns:1fr;}
}