/* West Beach Academy — draft styles */
:root{
  --cream:#FCF8F3; --sand:#F4EBDD; --ink:#1F1A14; --muted:#5f5a52;
  --sea:#0E4D4A; --sea-dark:#0A3836; --navy:#111A24; --line:#E3D9CA; --accent:#C9824A;
  --display:'Jost','Avenir Next','Avenir',Futura,'Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:#fff;font-size:15px;line-height:1.75;font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--sea)}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;line-height:1.2;margin:0 0 .6em;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.2vw,3rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.3rem)}
h3{font-size:1.35rem;font-weight:400}
h4{font-size:1rem;font-weight:500;letter-spacing:.02em}
p{margin:0 0 1.1em}
.container{width:min(1080px,90vw);margin:0 auto}
.narrow{width:min(820px,88vw);margin:0 auto}
.rule{width:44px;height:2px;background:var(--ink);margin:-.2em auto 1.4em;border:0}
.center{text-align:center}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--sea);font-weight:500;margin-bottom:.6em;display:block}

/* placeholders */
.ph{background:#FFF1B8;border:1px dashed #C9A100;padding:0 .3em;border-radius:3px;font-style:normal;color:#5a4600;font-weight:400}
.ph-block{background:#FFF8D6;border:1px dashed #C9A100;padding:1em 1.2em;border-radius:6px;color:#5a4600;font-size:.9rem}
.draft-banner{background:var(--sea-dark);color:#fff;text-align:center;font-size:.78rem;letter-spacing:.05em;padding:.45em 1em}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:84px;width:min(1200px,94vw);margin:0 auto}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.logo svg{width:46px;height:46px;flex:none}
.logo-text{font-family:var(--display);line-height:1.05;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;font-weight:500}
.logo-text small{display:block;letter-spacing:.24em;font-size:.6rem;color:var(--muted);font-weight:400;margin-top:3px}
.main-nav{display:flex;align-items:center;gap:2.1rem}
.main-nav a{font-family:var(--display);text-decoration:none;color:var(--ink);font-size:.86rem;letter-spacing:.08em;font-weight:400}
.main-nav a:hover,.main-nav a.active{color:var(--sea);text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;background:var(--sea);color:#fff!important;text-decoration:none!important;font-family:var(--display);font-size:.85rem;letter-spacing:.08em;padding:.75em 1.6em;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--sea-dark)}
.btn-outline{background:transparent;color:var(--sea)!important;border:1px solid var(--sea)}
.btn-outline:hover{background:var(--sea);color:#fff!important}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* hero */
.hero{position:relative;height:min(68vh,620px);min-height:380px;overflow:hidden;background:#cfe0e3}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-caption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 5vw 1.6rem;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.page-hero{height:min(46vh,420px);min-height:260px}

/* sections */
.section{padding:clamp(3.2rem,7vw,5.5rem) 0}
.cream{background:var(--cream)}
.sand{background:var(--sand)}
.intro h1{margin-bottom:.7em}
.lead{font-size:1.05rem}

/* schedule grid (mirrors reference layout) */
.sched-row{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding:1.8rem 0;border-top:1px solid var(--line)}
.sched-row:first-of-type{border-top:0}
.sched-row h4{margin:0}
.sched-row .time{color:var(--muted);font-size:.9rem}
.sched-list{list-style:none;margin:0;padding:0;font-size:.92rem}
.sched-list li{padding:.15em 0}

/* cards */
.grid{display:grid;gap:1.6rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{padding:1.3rem 1.4rem 1.5rem}
.card-body p{font-size:.92rem;margin-bottom:.6em}
.meta{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sea);font-weight:500;font-family:var(--display)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split.wide img{aspect-ratio:4/3}

/* pillars */
.pillar{padding:1.6rem 1.4rem;background:#fff;border-top:3px solid var(--sea)}
.pillar h3{font-size:1.15rem;margin-bottom:.4em}
.pillar p{font-size:.9rem;margin:0}

/* campus list */
.campus-group{margin-top:3rem}
.campus-group>h3{border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:1.4rem}
.place{display:grid;grid-template-columns:200px 1fr;gap:1.4rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.place:last-child{border-bottom:0}
.place img{width:200px;height:140px;object-fit:cover}
.place .noimg{width:200px;height:140px;background:var(--sand);display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--sea);font-size:2rem}
.place h4{font-size:1.08rem;margin-bottom:.15em;font-family:var(--display);font-weight:400}
.place .dist{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:.4em;display:block}
.place p{margin:0;font-size:.93rem}
.campus-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2.2rem 0}
.campus-strip figure{margin:0}
.campus-strip img{width:100%;aspect-ratio:1/1;object-fit:cover}
.campus-strip figcaption{font-family:var(--display);font-size:.85rem;margin-top:.5rem;letter-spacing:.04em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.4rem 0 2rem}
.chips span{border:1px solid var(--line);background:#fff;padding:.3em .9em;font-size:.82rem;border-radius:999px}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.member{text-align:center}
.member .portrait{aspect-ratio:1/1;background:#e9e4dc;border-top:4px solid var(--ink);display:flex;align-items:center;justify-content:center;color:#9a9286;font-family:var(--display);letter-spacing:.1em;font-size:.8rem;text-transform:uppercase;overflow:hidden}
.member .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.member h4{margin:.9rem 0 .1rem;font-family:var(--display);font-weight:400;font-size:1.05rem}
.member .role{font-size:.85rem;color:var(--muted)}
.founder{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;align-items:center}

/* list */
ul.ticks{padding-left:1.1rem}
ul.ticks li{margin:.25em 0}

/* form */
form.interest{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
form.interest .full{grid-column:1/-1}
form.interest label{display:block;font-size:.8rem;letter-spacing:.04em;margin-bottom:.3rem;font-weight:500}
form.interest input,form.interest select,form.interest textarea{width:100%;padding:.75em .8em;border:1px solid #cfc6b8;background:#fff;font:inherit;font-size:.92rem}
form.interest textarea{min-height:110px}
form.interest .checks{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem}
form.interest .checks label{font-weight:300;display:flex;gap:.4rem;align-items:center;margin:0}
form.interest .checks input{width:auto}
.form-note{font-size:.8rem;color:var(--muted)}

/* CTA */
.cta{text-align:center}
.cta p{max-width:560px;margin:0 auto 1.6rem}

/* footer */
.site-footer{background:var(--navy);color:#c9cfd6;padding:4rem 0 1.5rem;font-size:.88rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.site-footer h4{color:#fff;font-family:var(--display);font-weight:500;font-size:1.05rem;margin-bottom:1rem}
.site-footer a{color:#c9cfd6;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.45em 0}
.footer-logo{display:inline-flex;background:#fff;padding:.6rem .8rem;border-radius:6px;margin-bottom:1rem}
.footer-bottom{border-top:1px solid #2b3642;margin-top:3rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:#8b96a3}

/* responsive */
@media (max-width:960px){
  .main-nav{position:absolute;top:84px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 6vw 1.2rem;border-bottom:1px solid #eee;display:none}
  .main-nav.open{display:flex}
  .main-nav a{padding:.75rem 0;width:100%;border-bottom:1px solid #f1f1f1}
  .main-nav .btn{margin-top:.8rem;width:auto;border:0;padding:.75em 1.6em}
  .nav-toggle{display:block}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  .nav-wrap{height:72px}
  .main-nav{top:72px}
  .hero{height:52vh;min-height:300px}
  .page-hero{height:34vh;min-height:220px}
  .sched-row{grid-template-columns:1fr;gap:.6rem}
  .g2,.g3,.g4,.split,.founder,.team-grid{grid-template-columns:1fr}
  .campus-strip{grid-template-columns:1fr 1fr}
  .place{grid-template-columns:1fr;gap:.8rem}
  .place img,.place .noimg{width:100%;height:190px}
  form.interest{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .split img{aspect-ratio:4/3}
}
.site-footer .footer-logo .logo-text{color:var(--ink)}
/* home hero: aerial of harbor, West Beach & wharf */
.hero picture{display:block;width:100%;height:100%}
.hero-home{height:min(62vh,540px)}
.hero-home img{object-position:center 40%}
@media (max-width:640px){.hero-home{height:auto!important;min-height:0!important}.hero-home .hero-caption{font-size:.68rem;padding:1.6rem 5vw .8rem;background:linear-gradient(transparent,rgba(0,0,0,.3))}.hero-home picture,.hero-home img{height:auto}}
/* CTA band with aerial photo */
.photo-band{position:relative;color:#fff;background:#0A3836 url('../images/bh-funk-zone-mission-creek.jpg') center 55%/cover no-repeat}
.photo-band::before{content:"";position:absolute;inset:0;background:rgba(8,32,34,.62)}
.photo-band .container{position:relative}
.photo-band h2,.photo-band p{color:#fff}
.photo-band .btn{background:#fff;color:var(--sea)!important}
.photo-band .btn:hover{background:var(--cream)}
.photo-band .ph{color:#5a4600}
/* readable caption pill on busy aerial heroes */
.hero-caption{background:linear-gradient(transparent,rgba(0,0,0,.35))!important}
.hero-caption span.pill{display:inline-block;background:rgba(6,28,30,.72);padding:.45em .9em;border-radius:3px;text-shadow:none;line-height:1.5}
@media (max-width:640px){.hero-caption span.pill{letter-spacing:.08em;font-size:.66rem}}
a.member{display:block}
a.member:hover .portrait{background:#dfe9e6;color:var(--sea)}