/* Page-level styles extracted from the PixelBit mockups. */

/* ===== index ===== */
.lang-select:hover .lang-menu,
  .lang-select:focus-within .lang-menu{opacity:1;visibility:visible;transform:none}
.hero{position:relative;
    background:var(--navy);
    color:#fff;
    overflow:hidden;
    padding:90px 0 110px;}
.hero::before{content:"";position:absolute;inset:0;
    background:
      radial-gradient(900px 500px at 85% 20%, rgba(232,163,61,.20), transparent 60%),
      radial-gradient(700px 400px at 10% 90%, rgba(232,163,61,.12), transparent 60%);
    pointer-events:none;}
.hero::after{content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:22px 22px;
    opacity:.5;pointer-events:none;}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .9fr;gap:60px;align-items:center}
h1.hero-title{font-family:var(--mca-display);
    font-weight:500;
    font-size:clamp(44px, 6vw, 76px);
    line-height:1.02;
    letter-spacing:-.02em;
    margin:18px 0 22px;}
h1.hero-title em{font-style:italic;color:var(--gold-soft);font-weight:400}
.hero p.lede{font-size:19px;
    color:#cfd9e6;
    max-width:540px;
    margin-bottom:32px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.hero-meta{display:flex;gap:32px;color:#9fb1c8;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.hero-meta strong{display:block;color:#fff;font-family:var(--mca-display);font-size:28px;font-weight:600;letter-spacing:-.01em;text-transform:none;margin-bottom:2px}
.hero-visual{position:relative;
    height:480px;}
.photo{position:absolute;border-radius:14px;overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.a{top:0;right:60px;width:300px;height:300px;transform:rotate(-3deg)}
.photo.b{bottom:0;right:0;width:240px;height:280px;transform:rotate(4deg)}
.photo.c{bottom:40px;left:0;width:220px;height:220px;transform:rotate(-2deg)}
.badge{position:absolute;left:20px;top:30px;
    background:var(--gold);color:var(--navy-deep);
    padding:14px 18px;border-radius:12px;
    font-family:var(--mca-display);font-weight:600;
    transform:rotate(-4deg);
    box-shadow:0 12px 30px rgba(0,0,0,.3);
    font-size:14px;line-height:1.2;
    max-width:180px;
    z-index:3;
}
.badge span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--sans);font-weight:600;opacity:.7;margin-bottom:4px}
.quicklinks{background:var(--cream);
    padding:0;
    position:relative;
    margin-top:-40px;
    z-index:3;}
.quicklinks .inner{background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
    padding:8px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:4px;
    max-width:1180px;
    margin:0 auto;}
.ql{display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:22px 12px;border-radius:12px;
    text-align:center;color:var(--navy);
    transition:background .15s, transform .15s;}
.ql:hover{background:var(--cream);transform:translateY(-2px)}
.ql .ico{width:42px;height:42px;border-radius:50%;
    background:var(--navy);color:var(--gold);
    display:grid;place-items:center;font-size:18px;}
.ql .label{font-weight:600;font-size:14px}
.ql .sub{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.el{background:var(--paper)}
.el-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:50px;}
.el-text p{margin-bottom:18px;font-size:16px;color:#374151}
.el-pills{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px}
.el-features{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.audiences{background:var(--cream)}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.audience{border-radius:20px;padding:48px 40px;
    position:relative;overflow:hidden;
    min-height:340px;display:flex;flex-direction:column;justify-content:space-between;
    color:#fff;}
.audience.prospective{background:var(--navy);}
.audience.current{background:var(--red);}
.audience::before{content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:18px 18px;opacity:.6;}
.audience > *{position:relative;z-index:2}
.audience .tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:14px}
.audience.current .tag{color:#ffd0d0}
.audience h3{font-family:var(--mca-display);font-size:36px;line-height:1.05;font-weight:500;letter-spacing:-.01em;margin-bottom:14px}
.audience p{color:rgba(255,255,255,.85);font-size:16px;max-width:380px;margin-bottom:28px}
/* padding-left:0 here and in the two lists below is an opt-out from the body-copy
   indent in design-system.css. These draw their own "→" and have no marker to
   leave room for, so the indent would just push them out of line with the copy
   beside them. Any future list that sets list-style:none wants the same. */
.audience ul{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.audience ul li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.9);font-size:14px}
.audience ul li::before{content:"→";color:var(--gold-soft);font-weight:700}
.audience.current ul li::before{color:#ffd0d0}
.audience .arrow-link{display:inline-flex;align-items:center;gap:10px;
    font-weight:600;color:#fff;
    padding:12px 22px;border-radius:999px;
    background:rgba(255,255,255,.12);
    align-self:flex-start;
    transition:background .15s;}
.audience .arrow-link:hover{background:rgba(255,255,255,.22)}
.events{background:var(--paper)}
.life{background:var(--navy);color:#fff;padding:100px 0}
.life .section-title{color:#fff}
.life .section-title em{color:var(--gold-soft)}
.life .section-lede{color:#cfd9e6}
.life .section-eyebrow{color:var(--gold-soft)}
.photo-grid{display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:160px;
    gap:14px;
    margin-top:50px;}
.photo-tile{overflow:hidden;border-radius:12px;background:#1a3559;
    position:relative;
    transition:transform .25s;}
.photo-tile:hover{transform:scale(1.02)}
.photo-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.photo-tile:hover img{transform:scale(1.06)}
.photo-tile.tall{grid-row:span 2}
.photo-tile.wide{grid-column:span 2}
.photo-tile .cap{position:absolute;left:14px;bottom:14px;right:14px;
    color:#fff;font-weight:600;font-size:13px;
    text-shadow:0 2px 8px rgba(0,0,0,.6);}
.news{background:var(--paper)}
.news-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px;flex-wrap:wrap;gap:20px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
    transition:transform .15s, box-shadow .15s;}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.news-card .img{height:200px;background:linear-gradient(135deg,#234e7a,#0B2545);
    position:relative;overflow:hidden;}
.news-card .img img{width:100%;height:100%;object-fit:cover}
.news-card .body{padding:24px}
.news-card .cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:10px}
.news-card h4{font-family:var(--mca-display);font-size:20px;font-weight:600;color:var(--navy);margin-bottom:8px;line-height:1.25}
.news-card p{font-size:14px;color:var(--muted);margin-bottom:14px}
.news-card .date{font-size:12px;color:var(--muted)}
.scroll-cue{position:fixed;right:24px;bottom:24px;z-index:40;
    width:50px;height:50px;display:grid;place-items:center;
    /* padding:0 matters. Buttons pick up 8px 16px from the UA stylesheet, and
       with place-items:center that leaves an 18px-wide content box for a 22px
       chevron — the icon overflowed and sat 2px right of centre. */
    border:none;padding:0;line-height:0;border-radius:999px;cursor:pointer;
    color:var(--gold);background:var(--navy-deep);
    box-shadow:0 6px 20px rgba(6,24,47,.32);
    opacity:0;transform:translateY(8px);pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, background .2s ease;}
.scroll-cue.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-cue:hover{background:#0a2444}
.scroll-cue:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.scroll-cue svg{animation:cueBob 1.8s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue,.scroll-cue svg{transition:opacity .2s ease;animation:none}}

/* ===== about ===== */
.mission{background:var(--paper)}
.mission-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;margin-top:50px}
.mission-text p{margin-bottom:18px;font-size:16px;color:#374151}
.mission-text p:first-child{font-family:var(--mca-display);font-size:22px;line-height:1.45;color:var(--navy);font-style:italic}
.stat-card{background:var(--navy);color:#fff;border-radius:20px;padding:40px;position:relative;overflow:hidden}
.stat-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px;opacity:.6}
.stat-card .grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:30px 24px}
.stat-card .stat strong{display:block;font-family:var(--mca-display);font-size:42px;font-weight:600;color:var(--gold-soft);line-height:1}
.stat-card .stat span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#cfd9e6;margin-top:6px;display:block}
.timeline{background:var(--cream)}
.tl{margin-top:50px;border-left:2px solid var(--line);margin-left:8px}
.tl-item{position:relative;padding:0 0 40px 40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-9px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--cream)}
.tl-item .yr{font-family:var(--mca-display);font-weight:700;color:var(--red);font-size:14px;letter-spacing:.1em}
.tl-item h4{font-family:var(--mca-display);font-size:22px;font-weight:600;color:var(--navy);margin:6px 0 8px}
.tl-item p{font-size:15px;color:var(--muted);max-width:620px}
.values{background:var(--paper)}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:50px}
.leaders{background:var(--cream)}
.leader-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px}
.leader{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.leader:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.leader .avatar{height:200px;background:linear-gradient(135deg,#234e7a,#0B2545);display:grid;place-items:center;color:var(--gold-soft);font-family:var(--mca-display);font-size:48px;font-weight:600}
.leader .body{padding:20px}
.leader h4{font-family:var(--mca-display);font-size:19px;font-weight:600;color:var(--navy)}
.leader .role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;margin-top:4px}
.leader p{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}

/* ===== academics ===== */
.approach{background:var(--paper)}
.approach-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-top:50px}
.approach-text p{margin-bottom:18px;font-size:16px;color:#374151}
.approach-text p:first-child{font-family:var(--mca-display);font-size:22px;line-height:1.45;color:var(--navy);font-style:italic}
.stat-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;text-align:center}
.stat-box strong{display:block;font-family:var(--mca-display);font-size:38px;font-weight:600;color:var(--navy);line-height:1}
.stat-box span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}
.subjects{background:var(--cream)}
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px}
.subject{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;transition:transform .15s,box-shadow .15s}
.subject:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.subject .ico{width:48px;height:48px;border-radius:12px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.subject h4{font-family:var(--mca-display);font-size:21px;font-weight:600;color:var(--navy);margin-bottom:8px}
.subject p{font-size:14px;color:var(--muted);line-height:1.55}
.expeditions{background:var(--navy);color:#fff}
.expeditions .section-title{color:#fff}
.expeditions .section-title em{color:var(--gold-soft)}
.expeditions .section-eyebrow{color:var(--gold-soft)}
.expeditions .section-lede{color:#cfd9e6}
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.exp-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;transition:transform .2s}
.exp-card:hover{transform:translateY(-3px)}
.exp-card .img{height:170px;overflow:hidden}
.exp-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.exp-card:hover .img img{transform:scale(1.06)}
.exp-card .body{padding:22px}
.exp-card .grade{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin-bottom:8px}
.exp-card h4{font-family:var(--mca-display);font-size:20px;font-weight:600;color:#fff;margin-bottom:8px}
.exp-card p{font-size:14px;color:#cfd9e6;line-height:1.5}
.grades{background:var(--paper)}
.tabs{display:flex;gap:8px;margin:40px 0 0;flex-wrap:wrap}
.tab{padding:14px 28px;border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:none;
    background:var(--cream);color:var(--navy);font-family:var(--mca-display);font-size:20px;font-weight:600;cursor:pointer;transition:all .15s;}
.tab:hover{background:#fff}
.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.tab-panel{display:none;background:#fff;border:1px solid var(--line);border-radius:0 18px 18px 18px;padding:40px;box-shadow:var(--shadow)}
.tab-panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.panel-grid h3{font-family:var(--mca-display);font-size:28px;font-weight:600;color:var(--navy);margin-bottom:8px}
.panel-grid .tagline{color:var(--red);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.panel-grid p{font-size:15px;color:#374151;line-height:1.6}
.panel-grid ul{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.panel-grid ul li{display:flex;gap:11px;font-size:15px;color:#374151}
.panel-grid ul li::before{content:"→";color:var(--gold);font-weight:700}
.panel-grid ul li strong{color:var(--navy)}
.sbg{background:var(--cream)}
.sbg-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;margin-top:50px}
.scale{display:flex;flex-direction:column;gap:10px}
.scale-row{display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.scale-row .lvl{font-family:var(--mca-display);font-size:34px;font-weight:700;text-align:center;color:#fff;border-radius:10px;padding:6px 0}
.scale-row:nth-child(1) .lvl{background:#3f8f6b}
.scale-row:nth-child(2) .lvl{background:#285571}
.scale-row:nth-child(3) .lvl{background:#E8A33D;color:var(--navy-deep)}
.scale-row:nth-child(4) .lvl{background:#B23A48}
.scale-row .desc strong{display:block;color:var(--navy);font-size:15px}
.scale-row .desc span{font-size:13px;color:var(--muted)}
.support{background:var(--paper)}
.support-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:50px}

/* ===== families ===== */
/* The Families page reuses .ql / .ql .ico for a different component — a
   left-aligned card with a rounded-square icon, against the homepage's centred
   tile with a navy circle. Extracted into one stylesheet these overwrote the
   homepage versions, which is why the homepage quick links were rendering as
   Families cards. Scoped to the page instead. */
/* Both mockups use a .quicklinks band but colour it differently — cream on the
   homepage, paper on Families. Extracted into one stylesheet the later rule won
   everywhere, which turned the homepage band paper. Scoped by page instead. */
.page-families .quicklinks{background:var(--paper)}
.page-families .ql-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.page-families .ql{display:flex;align-items:flex-start;gap:16px;
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;
    transition:transform .15s, box-shadow .15s, border-color .15s;}
.page-families .ql:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--navy)}
.page-families .ql .ico{flex-shrink:0;width:46px;height:46px;border-radius:12px;
    background:var(--cream);display:grid;place-items:center;font-size:22px;}
.page-families .ql h4{font-family:var(--mca-display);font-size:19px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:8px}
.page-families .ql h4 .arr{color:var(--gold);transition:transform .15s}
.page-families .ql:hover h4 .arr{transform:translateX(4px)}
.page-families .ql p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.essentials{background:var(--cream)}
.ess-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px;align-items:start}
.ess-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px}
.ess-card h4{font-family:var(--mca-display);font-size:22px;font-weight:600;color:var(--navy);margin-bottom:20px}
.bell{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.bell:first-of-type{border-top:none}
.bell .label{font-weight:500;color:var(--ink)}
.bell .time{font-family:var(--mca-display);font-weight:600;color:var(--red);font-size:15px;letter-spacing:.02em}
.ess-note{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.55}
.lang-strip{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.lang-strip::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px;opacity:.5}
.lang-strip .container{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.lang-strip h2{font-family:var(--mca-display);font-weight:500;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.01em;margin-bottom:16px}
.lang-strip h2 em{font-style:italic;color:var(--gold-soft);font-weight:400}
.lang-strip p{color:#cfd9e6;font-size:16px;line-height:1.6;max-width:520px}
.lang-pills{display:flex;flex-wrap:wrap;gap:12px}
.lang-pills .lp{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;
    padding:18px 22px;flex:1;min-width:140px;}
.lang-pills .lp .flag{font-size:24px}
.lang-pills .lp .nm{font-family:var(--mca-display);font-weight:600;font-size:18px;margin-top:6px}
.lang-pills .lp .sm{font-size:12px;color:#9fb1c8;margin-top:2px}
.resources{background:var(--paper)}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px}
.faq{background:var(--cream)}
.faq-list{margin-top:46px;max-width:880px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 24px;
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:var(--mca-display);font-size:19px;font-weight:600;color:var(--navy);}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{flex-shrink:0;font-size:26px;color:var(--gold);font-weight:400;line-height:1;transition:transform .2s}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item .ans{padding:0 24px 24px;color:var(--muted);font-size:15px;line-height:1.65;max-width:760px}

/* ===== calendar ===== */
.cal-wrap{background:var(--paper)}
.cal-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--line);
    background:#fff;color:var(--navy);font-size:13px;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;transition:all .15s;font-family:var(--sans);}
.chip .swatch{width:9px;height:9px;border-radius:50%}
.chip:hover{border-color:var(--navy)}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip[data-cat="academic"] .swatch{background:#285571}
.chip[data-cat="athletics"] .swatch{background:#B23A48}
.chip[data-cat="arts"]      .swatch{background:#E8A33D}
.chip[data-cat="family"]    .swatch{background:#3f8f6b}
.chip[data-cat="holiday"]   .swatch{background:#7d6bb0}
.month-nav{display:flex;align-items:center;gap:18px}
.month-nav h2{font-family:var(--mca-display);font-size:30px;font-weight:600;color:var(--navy);min-width:230px;text-align:center}
.navbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:18px;cursor:pointer;display:grid;place-items:center;transition:all .15s}
.navbtn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.cal{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.cal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--navy);color:#cfd9e6}
.cal-head div{padding:14px 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-align:left}
.cal-body{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cell{min-height:118px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:8px;position:relative}
.cell:nth-child(7n+1){border-left:none}
.cell.empty{background:#fcfaf4}
.cell .n{font-family:var(--mca-display);font-weight:600;font-size:15px;color:var(--muted)}
.cell.today .n{background:var(--gold);color:var(--navy-deep);width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.ev{display:block;margin-top:6px;padding:4px 8px;border-radius:7px;
    font-size:11.5px;font-weight:600;line-height:1.25;color:#fff;cursor:default;
    /* min-width:0 is the part that matters: without it a long event title sets
       the column's min-content width and one busy day stretches the whole
       calendar. The truncation below only takes effect once this allows it. */
    min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev.academic{background:#285571}
.ev.athletics{background:#B23A48}
.ev.arts{background:#E8A33D;color:var(--navy-deep)}
.ev.family{background:#3f8f6b}
.ev.holiday{background:#7d6bb0}
.ev.hidden{display:none}
/* Pills that open the event's own page. The colour stays the category's —
   only the hover and focus states say it is clickable. The text colour is
   restated under .cal because a link colour set in Elementor's kit is an
   "a" rule that would otherwise outrank the plain .ev above. */
.cal a.ev{cursor:pointer;text-decoration:none;color:#fff;transition:filter .15s,box-shadow .15s}
.cal a.ev.arts{color:var(--navy-deep)}
.cal a.ev:hover{color:#fff;filter:brightness(1.12);box-shadow:0 2px 8px rgba(13,31,56,.22)}
.cal a.ev.arts:hover{color:var(--navy-deep)}
.cal a.ev:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cal-empty{padding:60px;text-align:center;color:var(--muted);font-style:italic;font-family:var(--mca-display)}
.upcoming{background:var(--cream)}
@media (max-width:760px){.cal-controls{flex-direction:column;align-items:flex-start}
    .month-nav{width:100%;justify-content:space-between}
    .month-nav h2{min-width:0;font-size:24px}
    .cell{min-height:84px}
    .cal-head div{padding:10px 6px;font-size:10px}
    .ev{font-size:10px;padding:3px 5px}}

/* ===== gallery ===== */
.gallery-wrap{background:var(--paper)}
.gal-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 36px}
.gal-btn{padding:10px 20px;border-radius:999px;border:1px solid var(--line);
    background:#fff;color:var(--navy);font-size:14px;font-weight:600;cursor:pointer;
    font-family:var(--sans);transition:all .15s;display:inline-flex;align-items:center;gap:8px;}
.gal-btn:hover{border-color:var(--navy);transform:translateY(-1px)}
.gal-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.gal-btn .count{font-size:12px;opacity:.6;font-weight:600}
.gal-btn.active .count{opacity:.8}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;}
.tile{overflow:hidden;border-radius:14px;background:#1a3559;position:relative;
    transition:transform .25s, opacity .3s;}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:hover img{transform:scale(1.06)}
.tile.tall{grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile .overlay{position:absolute;inset:0;
    background:linear-gradient(to top, rgba(6,24,47,.78) 0%, rgba(6,24,47,0) 55%);
    display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
    opacity:.9;transition:opacity .2s;}
.tile:hover .overlay{opacity:1}
.tile .cap{color:#fff;font-weight:600;font-size:14px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tile .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
    color:var(--gold-soft);margin-bottom:4px;}
.tile.is-hidden{display:none}
.gal-empty{padding:60px 0;text-align:center;color:var(--muted);font-family:var(--mca-display);font-style:italic;font-size:20px;display:none}

/* ===== form ===== */
.form-wrap{background:var(--paper)}
.form-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:48px;margin-top:50px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:var(--shadow)}
.fieldset{border:none;margin-bottom:30px}
.fieldset:last-of-type{margin-bottom:0}
.fieldset > legend{font-family:var(--mca-display);font-size:19px;font-weight:600;color:var(--navy);margin-bottom:18px;width:100%;border-bottom:1px solid var(--line);padding-bottom:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field.full{grid-column:1 / -1}
.row .field{margin-bottom:0}
label{font-size:13px;font-weight:600;color:var(--navy);letter-spacing:.01em}
label .req{color:var(--red)}
.hint{font-size:12px;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{font:inherit;font-size:15px;color:var(--ink);
    background:var(--cream);border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;width:100%;transition:border-color .15s, box-shadow .15s, background .15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);background:#fff;
    box-shadow:0 0 0 3px rgba(40,85,113,.12);}
textarea{resize:vertical;min-height:110px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235B6675' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.opt-group{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative;display:inline-flex;align-items:center;gap:9px;
    padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--cream);
    font-size:14px;font-weight:500;color:var(--navy);cursor:pointer;transition:all .15s;}
.opt:hover{border-color:var(--navy)}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt .box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--muted);display:grid;place-items:center;transition:all .15s}
.opt .box.round{border-radius:50%}
.opt input:checked ~ .box{background:var(--navy);border-color:var(--navy)}
.opt input:checked ~ .box::after{content:"";width:7px;height:7px;border-radius:2px;background:#fff}
.opt .box.round input:checked ~ *{}
.opt input:checked + .box.round::after{border-radius:50%}
.opt:has(input:checked){border-color:var(--navy);background:#fff}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:24px}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--navy);flex-shrink:0}
.consent label{font-weight:500;color:var(--muted);font-size:13px;line-height:1.5}
.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form-note{font-size:12px;color:var(--muted)}
.success{display:none;background:#eef6f1;border:1px solid #bfe0cd;border-radius:14px;
    padding:24px;color:#22613f;}
.success.show{display:block;animation:fadein .3s ease}
.success h4{font-family:var(--mca-display);font-size:20px;margin-bottom:6px;color:#1c4f33}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
/* Same reason as the header: clear the admin bar for logged-in editors. */
.admin-bar .side{top:128px}
@media screen and (max-width:782px){ .admin-bar .side{top:142px} }
@media screen and (max-width:600px){ .admin-bar .side{top:96px} }
.side-card{background:var(--navy);color:#fff;border-radius:18px;padding:28px;position:relative;overflow:hidden}
.side-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px;opacity:.5}
.side-card > *{position:relative;z-index:2}
.side-card h4{font-family:var(--mca-display);font-size:20px;font-weight:600;margin-bottom:14px}
.side-card ul{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:12px}
.side-card ul li{display:flex;gap:11px;font-size:14px;color:#cfd9e6;line-height:1.45}
.side-card ul li::before{content:"→";color:var(--gold-soft);font-weight:700;flex-shrink:0}
.side-contact{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:24px}
.side-contact h4{font-family:var(--mca-display);font-size:18px;color:var(--navy);margin-bottom:10px}
.side-contact p{font-size:14px;color:var(--muted);line-height:1.7}
.side-contact a{color:var(--red);font-weight:600}

/* ===================================================================
 * Elementor containers default to a column
 *
 * Several components in the design are horizontal flex rows — the pair of hero
 * buttons, the stat strip beneath them, the EL pills, the tab bar. They set
 * display:flex and rely on flex-direction's default of row.
 *
 * When one of those becomes an Elementor container, Elementor's own .e-con
 * rule sets flex-direction:column, so the row silently becomes a stack: the
 * two hero buttons went full width, one above the other.
 *
 * This restates row for exactly the classes the stylesheets declare as flex
 * without a direction. Sections and cards are deliberately absent — those are
 * meant to be columns.
 * =================================================================== */
.e-con.hero-ctas, .e-con.hero-meta, .e-con.el-pills, .e-con.lang-pills,
.e-con.opt-group, .e-con.gal-filters, .e-con.filters, .e-con.tabs,
.e-con.news-head, .e-con.events-head, .e-con.life-head, .e-con.cal-controls,
.e-con.month-nav, .e-con.form-actions, .e-con.consent, .e-con.breadcrumb,
.e-con.foot-bottom, .e-con.socials, .e-con.ql, .e-con.bell{
    flex-direction:row;
    align-items:center;
    width:auto;
}
/* These wrap rather than squeeze when the row runs out of room. */
.e-con.hero-ctas, .e-con.el-pills, .e-con.lang-pills, .e-con.opt-group,
.e-con.gal-filters, .e-con.filters, .e-con.news-head, .e-con.events-head{
    flex-wrap:wrap;
}
/* Children of a row must size to their content, not stretch across it. */
.e-con.hero-ctas > *, .e-con.el-pills > *, .e-con.lang-pills > *,
.e-con.opt-group > *, .e-con.tabs > *{
    width:auto;flex:0 0 auto;
}

/* ===================================================================
 * Let colour inherit inside the design's dark bands
 *
 * Elementor writes a colour onto every widget from the kit's globals —
 * .elementor-widget-text-editor gets the global text colour, a Heading widget's
 * title gets the global primary — and it writes them into each page's own
 * stylesheet, which loads after the theme's. At equal specificity that beats
 * anything here, and crucially it beats *inheritance*.
 *
 * On a paper background nobody notices, because the globals happen to match the
 * design. On the navy hero, the two audience cards, the expeditions band and
 * the sidebar, it is the difference between white text and ink or navy text on
 * a dark panel — which is what turned the audience headings navy-on-navy and
 * the hero stat labels near-black.
 *
 * Restoring inherit inside those containers is enough: the design's own rules
 * (.hero p.lede, .exp-card h4) still apply to the elements themselves, and
 * everything unstyled falls back to the band's colour, which is the point.
 * =================================================================== */
.hero .elementor-widget-text-editor,
.life .elementor-widget-text-editor,
.audience .elementor-widget-text-editor,
.expeditions .elementor-widget-text-editor,
.lang-strip .elementor-widget-text-editor,
.stat-card .elementor-widget-text-editor,
.side-card .elementor-widget-text-editor{
    color:inherit;
}

/* ===================================================================
 * The homepage hero's two columns
 *
 * The design puts the copy and the photo collage side by side via
 * .hero .container. Elementor's boxed container renders .e-con-inner instead,
 * so the grid is restated here against the element that actually exists.
 * =================================================================== */
.hero > .e-con-inner{
    display:grid;grid-template-columns:1.2fr .9fr;gap:60px;align-items:center;
    /* The design gives the hero 110px underneath, not the 90px every other
       section gets. Restated here because the section's own padding is zeroed
       to stop it doubling with Elementor's. */
    padding-bottom:110px;
}
@media (max-width:900px){
    .hero > .e-con-inner{grid-template-columns:1fr;gap:40px}
}

/* ===================================================================
 * Elementor sections: don't pay for section padding twice
 *
 * Interior sections render as <section class="e-con">, so they pick up the
 * theme's section{padding:90px 0} — and Elementor separately applies the
 * container's own padding setting to .e-con-inner. Both were landing, giving
 * every interior section 180px of vertical padding instead of 90px and a very
 * conspicuous gap above each heading.
 *
 * The container setting wins because it also carries the 28px side gutter that
 * keeps content off the screen edge on a phone, so the element-level rule is
 * the one that gives way. Block axis only — the inline padding here is
 * Elementor's and must stay.
 * =================================================================== */
.elementor section.e-con{padding-block:0}
/* The boxed inner is the design's .container: 1280px wide *including* a 28px
   gutter, giving a 1224px content column. Elementor applies container padding
   outside this element, which would have widened the column instead. */
.elementor .e-con > .e-con-inner{padding-inline:28px}

/* ===================================================================
 * Elementor Pro form → the approved tour-form design
 *
 * The design was drawn as fieldsets, .field wrappers and .opt pills. Elementor
 * renders its own markup — .elementor-field-group, .elementor-field-textual,
 * .elementor-field-option — so none of that styling could reach it and the form
 * came out looking like stock Elementor.
 *
 * Rather than restyle the design to suit the plugin, this maps the plugin's
 * markup onto the design. Everything is scoped to .form-card so it cannot leak
 * into any other form built later.
 * =================================================================== */
.form-card .elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;gap:18px;margin:0}
.form-card .elementor-field-group{
    display:flex;flex-direction:column;align-items:stretch;gap:7px;
    margin:0;padding:0;
    /* nowrap is load-bearing. Elementor sets flex-wrap:wrap on field groups,
       which in a column flex container wraps along the block axis — so the
       label and its input were laid out as two side-by-side columns instead of
       stacked, and the input then overflowed the group. */
    flex-wrap:nowrap;
}
.form-card .elementor-field-group > label{width:100%}
.form-card .elementor-field-group.elementor-col-50{width:calc(50% - 9px)}
.form-card .elementor-field-group.elementor-col-100{width:100%}

/* Group headings, standing in for the design's <legend>. */
.form-card .mca-legend{
    display:block;width:100%;
    font-family:var(--mca-display);font-size:19px;font-weight:600;color:var(--navy);
    border-bottom:1px solid var(--line);padding-bottom:10px;margin-top:12px;
}
.form-card .elementor-field-type-html:first-child .mca-legend{margin-top:0}

/* Labels and inputs. */
/* The extra .elementor-form in this selector is deliberate. Elementor emits
   .elementor-widget-form .elementor-field-group > label with the kit's global
   typography, which outranks a two-class selector and flattened the label
   weight back to 400. */
.form-card .elementor-form .elementor-field-group > label.elementor-field-label{
    font-size:13px;font-weight:600;color:var(--navy);letter-spacing:.01em;padding:0;
}
.form-card .elementor-field-required .elementor-field-label:after{content:" *";color:var(--red)}
.form-card .elementor-field-textual{
    font:inherit;font-size:15px;color:var(--ink);
    background:var(--cream);border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;width:100%;line-height:1.4;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.form-card .elementor-field-textual:focus{
    outline:none;border-color:var(--navy);background:#fff;
    box-shadow:0 0 0 3px rgba(40,85,113,.12);
}
.form-card textarea.elementor-field-textual{resize:vertical;min-height:110px}
.form-card .elementor-select-wrapper .select-caret-down-wrapper{
    inset-inline-end:14px;color:var(--muted);
}

/* Radio and checkbox groups become the design's pills. */
.form-card .elementor-field-subgroup{display:flex;flex-wrap:wrap;gap:10px;margin:0}
/* Elementor gives options flex-basis:100% unless the subgroup is marked
   inline, which stacks each choice as a full-width bar. The design wants pills
   that sit next to each other and wrap. */
.form-card .elementor-field-subgroup .elementor-field-option{
    flex-basis:auto;flex-grow:0;
    position:relative;display:inline-flex;align-items:center;gap:9px;
    padding:10px 16px;border:1px solid var(--line);border-radius:10px;
    background:var(--cream);transition:border-color .15s, background .15s;
}
.form-card .elementor-field-subgroup .elementor-field-option:hover{border-color:var(--navy)}
.form-card .elementor-field-subgroup .elementor-field-option:has(input:checked){
    border-color:var(--navy);background:#fff;
}
.form-card .elementor-field-subgroup input{
    width:16px;height:16px;margin:0;accent-color:var(--navy);flex-shrink:0;
}
.form-card .elementor-field-subgroup label{
    font-size:14px;font-weight:500;color:var(--navy);margin:0;cursor:pointer;
}

/* The consent tick is a boxed callout, not another pill. */
.form-card .elementor-field-type-acceptance .elementor-field-subgroup{
    background:var(--cream);border:1px solid var(--line);border-radius:12px;
    padding:16px;gap:12px;align-items:flex-start;
}
.form-card .elementor-field-type-acceptance .elementor-field-option{
    padding:0;border:0;background:none;align-items:flex-start;flex-basis:100%;
}
.form-card .elementor-field-type-acceptance .elementor-field-option:hover{border:0}
.form-card .elementor-field-type-acceptance input{width:18px;height:18px;margin-top:2px}
.form-card .elementor-field-type-acceptance label{
    font-weight:500;color:var(--muted);font-size:13px;line-height:1.5;
}

/* Submit, matching .btn.primary. */
.form-card .elementor-field-type-submit{align-items:flex-start}
.form-card .elementor-button[type=submit]{
    background:var(--gold);color:var(--navy-deep);
    font-family:var(--sans);font-size:15px;font-weight:600;
    border:none;border-radius:999px;padding:14px 26px;
    box-shadow:var(--shadow);transition:background .15s, transform .15s;
}
.form-card .elementor-button[type=submit]:hover{background:#d8942f;transform:translateY(-1px)}

/* Messages. */
.form-card .elementor-message{font-size:14px;margin-top:14px}
.form-card .elementor-message-success{
    background:#eef6f1;border:1px solid #bfe0cd;border-radius:14px;
    padding:20px;color:#22613f;
}
.form-card .elementor-message-danger{color:var(--red)}

@media (max-width:560px){
    .form-card{padding:26px}
    .form-card .elementor-field-group.elementor-col-50{width:100%}
}

/* ===================================================================
 * Responsive — interior pages
 *
 * These came from the interior mockups and were missed when pages.css was
 * first extracted: only the calendar's 760px block made it across, so every
 * other grid held its desktop column count on a phone. That is what pushed
 * the quick-links row to 749px on a 375px screen and stacked cards on top of
 * one another.
 *
 * Breakpoints match the mockups exactly (900px, then 560px) rather than being
 * re-invented, so the interior pages step down at the same widths the homepage
 * already did in design-system.css.
 * =================================================================== */
@media (max-width:900px){
	/* homepage — these live here because the sections they belong to do */
	.hero .container{grid-template-columns:1fr;gap:40px}
	/* width:100% is load-bearing. The mockup's `margin:0 auto` switches a grid
	   item from stretch to shrink-to-fit, and every child here is absolutely
	   positioned, so it shrank to zero width and the collage positioned itself
	   against nothing — photos landing off both edges of the screen. */
	.hero-visual{height:400px;width:100%;max-width:480px;margin:0 auto}
	.quicklinks .inner{grid-template-columns:repeat(3,1fr)}
	.el-grid{grid-template-columns:1fr;gap:36px}
	.audience-grid{grid-template-columns:1fr}
	.photo-grid{grid-template-columns:repeat(2,1fr)}
	.news-grid{grid-template-columns:1fr}
	/* about */
	.mission-grid{grid-template-columns:1fr;gap:36px}
	.values-grid{grid-template-columns:1fr 1fr}
	.leader-grid{grid-template-columns:1fr 1fr}
	/* academics */
	.approach-grid,.sbg-grid{grid-template-columns:1fr;gap:36px}
	.subject-grid,.exp-grid{grid-template-columns:1fr 1fr}
	.panel-grid{grid-template-columns:1fr;gap:24px}
	.support-grid{grid-template-columns:1fr 1fr}
	/* families */
	.page-families .ql-grid{grid-template-columns:1fr 1fr}
	.ess-grid{grid-template-columns:1fr}
	.lang-strip .container{grid-template-columns:1fr;gap:30px}
	.res-grid{grid-template-columns:1fr 1fr}
	/* schedule a tour */
	.form-grid{grid-template-columns:1fr;gap:32px}
	.side{position:static}
	.row{grid-template-columns:1fr}
	/* student life */
	.gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
	.tile.wide{grid-column:span 2}
}

@media (max-width:560px){
	/* homepage */
	.quicklinks .inner{grid-template-columns:repeat(2,1fr)}
	.photo-grid{grid-template-columns:1fr 1fr;grid-auto-rows:130px}
	.scroll-cue{right:16px;bottom:16px;width:46px;height:46px}
	/* The mockups stopped at 560px, so nothing here was ever checked against a
	   320px phone — still a real share of school traffic on older handsets.
	   These two stayed as two-column grids whose items cannot shrink below
	   their content, which pushed the homepage 43px wider than the screen. */
	.el-features{grid-template-columns:1fr}
	.hero-meta{gap:20px;flex-wrap:wrap}
	/* interior */
	.values-grid{grid-template-columns:1fr}
	.leader-grid{grid-template-columns:1fr}
	.subject-grid,.exp-grid,.support-grid,.stat-strip{grid-template-columns:1fr}
	.tab{font-size:17px;padding:12px 18px}
	.tab-panel{padding:26px}
	.page-families .ql-grid{grid-template-columns:1fr}
	.res-grid{grid-template-columns:1fr}
	.gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:140px}
	.tile.tall{grid-row:span 1}
}

/* ============================================================
   STAFF DIRECTORY  ([mca_directory])

   Two layouts over the same records. The roster is the default and
   the one the school's directory actually needs: portrait left,
   name, job title, contact and biography right, one person per row
   down a hairline-ruled column. The card grid below it is the older
   compact treatment, kept for [mca_directory layout="cards"] and for
   places a full row is more than the page wants.

   Both keep the lettered-tile fallback, so somebody with no photo
   still reads as a person and not as a gap.
   ============================================================ */
.dir-intro{font-size:17px;color:var(--muted);max-width:60ch;margin-bottom:34px}

/* Every category block is an anchor target — the navigation reaches them as
   custom links to /staff/#staff-school-leaders — and the header is sticky, so
   without this the heading someone just clicked to lands underneath it. */
/* Each category is a <section>, which picks up the 90px band padding that
   design-system.css gives every section on the site. That is right for a
   full-bleed page band and wrong for a block inside a text column — left alone
   it put 180px of empty paper between one category and the next. */
.dir-cat{padding:0;scroll-margin-top:124px}
.dir-cat-title,
.dir-dept{font-family:var(--mca-display);font-size:26px;font-weight:600;color:var(--navy);
	letter-spacing:-.01em;margin:56px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line)}
/* first-of-type, not first-child: the intro paragraph is usually the first child
   of .dir-wrap, so first-child matched nothing and every page opened with 56px
   of empty space above its first category. */
.dir-wrap > .dir-cat:first-of-type .dir-cat-title,
.dir-dept:first-of-type{margin-top:0}
.dir-cat-note{font-size:15px;color:var(--muted);margin-top:14px;max-width:64ch}

/* ---- Roster ---- */

/* The shortcode renders inside page.php's .prose column, and can just as easily
   be dropped into an Elementor Text Editor widget. Both of those are
   editor-authored contexts as far as design-system.css is concerned, so its
   body-copy rules indent every list and space every item apart — right for a
   bulleted list somebody typed, wrong for markup this file lays out itself.
   Those rules weigh (0,1,1); the .dir-wrap prefix here outweighs them on
   specificity, rather than leaving it to load order to settle. */
.dir-wrap ul.dir-roster,
.dir-wrap ul.dir-contact{list-style:none;padding-left:0;margin-left:0}
.dir-wrap .dir-contact > li + li{margin-top:0}
.dir-roster{margin:0}
/* Four siblings on a named grid — portrait, heading, contact, biography — so the
   phone layout can move two of them out from beside the portrait and run them
   the full width instead. Areas that have no element (somebody with no bio, or
   a site not showing contact details) simply collapse. */
.dir-row{
	display:grid;
	grid-template-columns:168px 1fr;
	grid-template-areas:
		"photo head"
		"photo contact"
		"photo bio";
	/* The portrait spans all three rows, and when it is taller than they are —
	   anyone with a short biography, or none — the browser shares that extra
	   height out between them, opening gaps under the name and above the
	   biography that vary from person to person. Sending the slack to the last
	   row instead keeps the top of every row identical and lets the ragged edge
	   fall at the bottom, where nobody reads it. */
	grid-template-rows:auto auto 1fr;
	column-gap:32px;
	padding:32px 0;
}
.dir-row .dir-photo{grid-area:photo}
.dir-row .dir-head{grid-area:head}
.dir-row .dir-contact{grid-area:contact}
.dir-row .dir-bio{grid-area:bio}
/* Only between rows: the category heading's own rule already separates the
   first one, and two lines 12px apart reads as a mistake. margin-top is stated
   because the body-copy rules in design-system.css space consecutive list items
   apart, which is right for a bulleted list and wrong for a roster whose
   spacing is its padding. */
.dir-wrap .dir-row + .dir-row{border-top:1px solid var(--line);margin-top:0}

.dir-photo{
	position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
	background:linear-gradient(135deg,#234e7a,#0B2545);
	display:grid;place-items:center;align-self:start;
}
.dir-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dir-initials{font-family:var(--mca-display);font-size:44px;font-weight:600;color:var(--gold-soft)}

/* margin-top is stated rather than left at 0: this is an <h3>, and the prose
   column gives headings a 1.6em top margin so a section title clears the
   paragraph above it. Here the heading sits beside a portrait and starts level
   with it. */
.dir-name{font-family:var(--mca-display);font-size:23px;font-weight:600;color:var(--navy);
	letter-spacing:-.01em;line-height:1.2;margin-top:0}
.dir-role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);
	font-weight:600;margin-top:6px}
/* The paragraph is styled, not the wrapper: a rule on p in the prose column
   applies to this element directly, and a direct rule beats anything inherited
   from its parent however specific that parent's selector is. */
.dir-bio{margin-top:14px;max-width:68ch}
.dir-bio p{font-size:15.5px;line-height:1.6;color:#374151}

/* ---- Contact details, shared by both layouts ---- */
.dir-contact{list-style:none;padding-left:0;margin-top:12px;
	display:flex;flex-wrap:wrap;gap:6px 22px}
.dir-contact li{display:flex;align-items:center;gap:7px;margin:0}
.dir-contact .mca-icon{color:var(--gold);flex:none}
/* Scoped through the row and the card to outweigh the body-copy link rule in
   design-system.css. The shortcode renders inside page.php's .prose column, and
   a roster of red underlined addresses reads as a wall of links rather than as
   contact details — they stay navy and underline on hover instead. */
.dir-row .dir-contact a,
.dir-person .dir-contact a{font-size:14px;color:var(--navy);text-decoration:none;word-break:break-word}
.dir-row .dir-contact a:hover,
.dir-person .dir-contact a:hover{color:var(--navy);text-decoration:underline}

/* ---- Card grid ---- */
/* Fluid rather than a fixed four columns. The shortcode has to look right in
   page.php's 780px .prose column, in a full-width Elementor container, and on a
   phone — auto-fill settles that per container instead of per viewport, which a
   media query cannot do. */
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px;margin-top:26px}
.dir-person{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
	transition:transform .15s,box-shadow .15s}
.dir-person:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.dir-person .avatar{height:200px;background:linear-gradient(135deg,#234e7a,#0B2545);
	display:grid;place-items:center;color:var(--gold-soft);
	font-family:var(--mca-display);font-size:48px;font-weight:600}
.dir-person .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.dir-person .body{padding:20px}
.dir-person h4{font-family:var(--mca-display);font-size:19px;font-weight:600;color:var(--navy)}
.dir-person .role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);
	font-weight:600;margin-top:4px}
.dir-person p{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
.dir-person .dir-contact{flex-direction:column;gap:3px}

.dir-empty{color:var(--muted);font-style:italic}

/* A phone keeps the portrait beside the name rather than stacking it: a
   full-width photo per person turns a staff of sixty into a scroll nobody
   finishes. Square at this size, because a 4:5 crop of a head-and-shoulders
   photo loses the shoulders once it is this small. */
@media(max-width:680px){
	.dir-row{
		grid-template-columns:92px 1fr;
		grid-template-areas:
			"photo head"
			"contact contact"
			"bio bio";
		column-gap:16px;
		padding:24px 0;
	}
	.dir-photo{aspect-ratio:1/1;border-radius:12px}
	.dir-initials{font-size:28px}
	.dir-name{font-size:19px}
	.dir-bio{margin-top:12px;font-size:15px}
	.dir-contact{gap:4px 16px}
	.dir-cat-title,
	.dir-dept{font-size:22px;margin-top:40px}
	.dir-cat{scroll-margin-top:88px}
}

/* ===================================================================
 * 404 — page not found
 *
 * Everything structural here is borrowed: the navy .page-hero, the floating
 * .quicklinks row, .section-title and .side-card. What is new is the search
 * field, which the theme had no styling for because nothing else in the design
 * exposes site search, and the two-column list of destinations.
 * =================================================================== */

.notfound-search{display:flex;gap:10px;max-width:560px;margin-top:30px;flex-wrap:wrap}
/* min-width:0 so the field can actually shrink inside the flex row — without
   it the input keeps its default intrinsic width and pushes the button out. */
.notfound-search input[type=search]{
	flex:1 1 240px;min-width:0;
	font:inherit;font-size:15px;color:var(--ink);
	background:#fff;border:1px solid transparent;border-radius:999px;
	padding:13px 20px;line-height:1.4;
	-webkit-appearance:none;appearance:none;
}
.notfound-search input[type=search]::placeholder{color:var(--muted)}
.notfound-search input[type=search]:focus{
	outline:none;border-color:var(--gold);
	box-shadow:0 0 0 3px rgba(232,163,61,.35);
}
.notfound-search .btn{
	flex:0 0 auto;
	/* .btn is only ever an <a> elsewhere in the design, so it never had to
	   name a family. As a <button> it would otherwise fall back to the
	   browser's UI font — the same reason .form-card's submit sets this. */
	font-family:var(--sans);
}

.notfound-help{background:var(--paper)}
.notfound-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
/* No contact details set in Settings → School Information, so there is no
   second column to sit beside. */
.notfound-grid.is-wide{grid-template-columns:1fr}

.notfound-links ul{
	list-style:none;padding-left:0;margin:10px 0 0;
	display:grid;grid-template-columns:1fr 1fr;gap:0 32px;
}
.notfound-links li{margin:0}
.notfound-links a{
	display:flex;align-items:center;gap:12px;
	font-weight:600;font-size:16px;color:var(--navy);
	padding:15px 0;border-bottom:1px solid var(--line);
	transition:color .15s,gap .15s;
}
.notfound-links a::before{content:"→";color:var(--red);font-weight:700}
.notfound-links a:hover{color:var(--red);gap:16px}
.notfound-help .side-card p{font-size:14px;color:#cfd9e6;line-height:1.55;margin-bottom:18px}
.notfound-help .side-card a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.notfound-help .side-card a:hover{color:var(--gold-soft)}

@media(max-width:860px){
	.notfound-grid{grid-template-columns:1fr;gap:36px}
	.notfound-links ul{grid-template-columns:1fr}
}
@media(max-width:560px){
	.notfound-search{gap:12px}
	.notfound-search input[type=search]{flex:1 1 100%}
	.notfound-search .btn{width:100%;text-align:center;justify-content:center}
}

/* ===================================================================
 * Single event — the page a calendar pill opens
 *
 * The hero and .side-card are borrowed as they are. New here is the
 * definition list inside the card, the note on past events, and the
 * two-column layout when the event has a written description beside it.
 * =================================================================== */

.event-page{background:var(--paper)}
.event-page-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:start}
/* Nothing written in the post body, so the details card stands on its own. */
.event-page-grid.is-narrow{grid-template-columns:minmax(0,520px)}
.event-page-photo{margin-bottom:32px}
.event-page-photo img{width:100%;height:auto;border-radius:14px}

.event-facts dl{margin:0 0 20px;display:flex;flex-direction:column;gap:16px}
.event-facts dt{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#9fb1c8}
.event-facts dt .mca-icon{color:var(--gold-soft)}
.event-facts dd{margin:4px 0 0 26px;font-size:16px;color:#fff;line-height:1.45}
.event-facts ul{margin-bottom:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.event-facts .btn{display:inline-flex;align-items:center;gap:8px}

.event-past-note{
	display:inline-block;margin:0 0 28px;padding:8px 16px;border-radius:999px;
	background:var(--cream);border:1px solid var(--line);
	font-size:13px;font-weight:600;color:var(--muted);
}
.event-back{margin-top:40px}
.event-back a{font-weight:600;color:var(--navy)}
.event-back a:hover{color:var(--red)}

@media(max-width:860px){
	.event-page-grid{grid-template-columns:1fr;gap:36px}
	/* Details first on a phone: the when and where are what people came for. */
	.event-facts{order:-1}
}