/* ==========================================================================
   YTC at Morton East — shared stylesheet
   Every page loads this one file. Change a color here, it changes everywhere.
   Read CONTENT-GUIDE.md before editing.
   ========================================================================== */

:root{
  /* Morton East: maroon and white. This is the school's identity. */
  --maroon:#6B0F1E;
  --maroon-deep:#2E060D;
  --maroon-soft:#B02A3E;

  /* YTC blue — the organization's color, used for the global/teaching side */
  --blue:#1B9BD8;
  --blue-deep:#0E6FA0;

  /* Warm neutrals — paper, not screen */
  --cream:#FAF4F1;
  --sand:#F0E4E2;
  --ink:#1C1A19;
  --muted:#6B625E;
  --line:#E6D8D5;
  --paper:#ffffff;

  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:"Segoe UI",Frutiger,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.narrow{max-width:760px;}
img{max-width:100%;height:auto;display:block;}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar{background:var(--maroon-deep);color:#fff;border-bottom:3px solid var(--maroon-soft);}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;
}
.brandmark{
  display:flex;align-items:center;gap:11px;
  font-weight:700;color:#fff;letter-spacing:-.01em;
  text-decoration:none;font-size:15px;
}
.cubes{display:flex;gap:3px;flex:none;}
.cubes span{
  width:21px;height:21px;border-radius:3px;color:#fff;
  font-size:12px;font-weight:800;display:grid;place-items:center;
}
.cubes span:nth-child(1){background:var(--blue);}
.cubes span:nth-child(2){background:#8CC63E;}
.cubes span:nth-child(3){background:#F7941D;}
.brandmark small{
  display:block;font-size:10px;letter-spacing:.14em;font-weight:600;
  color:#D8B9BF;text-transform:uppercase;
}

nav.main{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
nav.main a{color:#E8D5D8;text-decoration:none;font-size:15px;font-weight:600;}
nav.main a:hover,nav.main a[aria-current="page"]{color:#fff;}

.toggle{display:flex;border:1px solid rgba(255,255,255,.3);border-radius:999px;overflow:hidden;flex:none;}
.toggle button{
  border:0;background:transparent;padding:6px 15px;font:inherit;font-size:13px;
  font-weight:600;color:#E8D5D8;cursor:pointer;transition:.15s;
}
.toggle button[aria-pressed="true"]{background:#fff;color:var(--maroon-deep);}

/* --------------------------------------------------------------------------
   Photo hero
   -------------------------------------------------------------------------- */
.photohero{
  position:relative;background:var(--maroon-deep);color:#fff;overflow:hidden;
  min-height:min(84vh,720px);display:flex;align-items:flex-end;
}
.photohero img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.34;filter:saturate(.6) contrast(1.06);
}
.photohero::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(176,42,62,.34) 0%, rgba(46,6,13,0) 60%),
    linear-gradient(180deg,rgba(46,6,13,.72) 0%,rgba(46,6,13,.5) 38%,rgba(46,6,13,.98) 100%);
}
.photohero .wrap{position:relative;z-index:2;padding-top:100px;padding-bottom:64px;}
.photohero .kicker{
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:#E79AA8;margin-bottom:24px;
}
.photohero h1{color:#fff;max-width:17ch;}
.photohero .lede{color:#F3E2E4;}

h1{
  font-size:clamp(42px,7vw,84px);line-height:.98;margin:0;
  letter-spacing:-.033em;font-weight:800;color:var(--maroon-deep);
}
h1 em{font-style:normal;color:var(--blue);}
h2{
  font-size:clamp(28px,3.8vw,44px);letter-spacing:-.026em;margin:0 0 14px;
  color:var(--maroon-deep);font-weight:800;line-height:1.08;
}
h3{font-size:20px;margin:0 0 8px;color:var(--maroon-deep);letter-spacing:-.01em;}
.lede{font-size:21px;color:var(--muted);max-width:60ch;margin:26px 0 0;}
.sub{color:var(--muted);font-size:18px;margin:0 0 32px;max-width:66ch;}

.eyebrow{
  display:inline-block;background:var(--maroon);color:#fff;
  padding:7px 20px;border-radius:999px;font-weight:700;font-size:14px;
}
.eyebrow.blue{background:var(--blue);}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;background:var(--maroon);color:#fff;text-decoration:none;
  padding:16px 34px;border-radius:6px;font-weight:700;font-size:17px;
  transition:.15s;border:0;cursor:pointer;
}
.btn:hover{background:var(--maroon-soft);}
.btn.blue{background:var(--blue);}
.btn.blue:hover{background:var(--blue-deep);}
.btn.light{background:#fff;color:var(--maroon-deep);}
.btn.light:hover{background:var(--sand);}
.btn.outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);}
.btn.outline:hover{background:rgba(255,255,255,.12);}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center;}
.btn-note{font-size:15px;color:var(--muted);}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
header.hero{padding:60px 0 48px;}
section{padding:76px 0;}
section.cream{background:var(--cream);}
section.sand{background:var(--sand);}
section.maroon{
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(176,42,62,.42) 0%, rgba(46,6,13,0) 62%),
    var(--maroon-deep);
  color:#fff;
}
section.maroon h2{color:#fff;}
section.maroon .sub,section.maroon p{color:#F0DBDE;}
section.maroon .statement{color:#fff;}

/* Big statement line */
.statement{
  font-size:clamp(26px,3.6vw,42px);line-height:1.24;font-weight:750;
  letter-spacing:-.022em;color:var(--maroon-deep);max-width:20ch;
}
.statement .blue{color:var(--blue);}

/* Numbers band */
.band{
  background:linear-gradient(100deg,var(--maroon-deep) 0%,var(--maroon) 55%,#8A1526 100%);
  color:#fff;padding:52px 0;
}
.band .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px;}
.band .v{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em;}
.band .l{font-size:14.5px;color:#EFC3CB;margin-top:10px;line-height:1.45;}

/* Two-column text + image */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.split.flip .txt{order:2;}
.split img{border-radius:10px;}
.figure figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;}
.figure{margin:0;}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:26px;}
.card .num{
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--maroon-soft);margin-bottom:10px;
}
.card p{margin:0;color:var(--muted);font-size:16px;}

/* Ladder */
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:14px;}
.rung{padding:26px 26px 26px 0;border-top:3px solid var(--maroon);}
.rung + .rung{padding-left:26px;}
.rung:nth-child(2){border-top-color:var(--maroon-soft);}
.rung:nth-child(3){border-top-color:var(--blue);}
.rung:nth-child(4){border-top-color:var(--blue-deep);}
.rung .n{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--muted);margin-bottom:8px;}
.rung p{margin:0;color:var(--muted);font-size:15.5px;}

/* People */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;}
.person{border-top:3px solid var(--blue);padding-top:18px;}
.person .name{font-weight:800;color:var(--maroon-deep);font-size:20px;letter-spacing:-.01em;}
.person .role{font-size:14px;color:var(--maroon-soft);font-weight:700;margin-bottom:10px;}
.person p{margin:0;color:var(--muted);font-size:15.5px;}

/* Pull quote */
.pull{
  border-left:4px solid var(--blue);padding:4px 0 4px 26px;margin:0;
  font-size:clamp(19px,2.2vw,25px);line-height:1.45;color:var(--maroon-deep);
  max-width:56ch;font-weight:600;letter-spacing:-.012em;
}
.pull cite{
  display:block;font-size:14px;color:var(--muted);font-style:normal;
  margin-top:16px;font-weight:600;letter-spacing:0;
}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;}
.gallery figure{margin:0;}
.gallery img{border-radius:8px;filter:saturate(.9);}
.gallery figcaption{font-size:13px;color:var(--muted);margin-top:8px;}

/* Wide banner image */
.banner img{width:100%;object-fit:cover;max-height:340px;}

/* Info rows */
.rows{border-top:1px solid var(--line);}
.row{
  display:grid;grid-template-columns:220px 1fr;gap:26px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start;
}
.row .k{font-weight:800;color:var(--maroon-deep);font-size:18px;}
.row .k small{display:block;font-weight:500;color:var(--muted);font-size:13.5px;margin-top:4px;}
.row .v{color:var(--muted);font-size:16px;}
.row .v strong{color:var(--ink);}
.row .v p{margin:0 0 8px;}

/* Agenda days (host page) */
.day{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:24px 0;border-top:1px solid var(--line);}
.day:first-of-type{border-top:0;}
.day .when{font-weight:800;color:var(--maroon-deep);font-size:17px;}
.day .where{font-size:13.5px;color:var(--muted);margin-top:4px;font-weight:500;}
.day ul{margin:0;padding-left:20px;color:var(--muted);}
.day li{margin-bottom:6px;}
.day li strong{color:var(--ink);}

.tag{
  display:inline-block;background:var(--blue);color:#fff;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.07em;
  margin-left:8px;vertical-align:2px;
}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:18px 0;}
details summary{
  cursor:pointer;font-weight:700;color:var(--maroon-deep);font-size:18px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;
}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";color:var(--blue);font-weight:800;font-size:24px;line-height:1;}
details[open] summary::after{content:"\2013";}
details p{color:var(--muted);margin:12px 0 0;max-width:70ch;font-size:16px;}

/* Closing band */
.closer{
  background:
    radial-gradient(80% 130% at 82% 10%, rgba(176,42,62,.5) 0%, rgba(46,6,13,0) 60%),
    var(--maroon-deep);
  color:#fff;padding:88px 0;
}
.closer h2{color:#fff;max-width:20ch;}
.closer p{color:#F0DBDE;max-width:56ch;font-size:19px;margin:20px 0 30px;}

/* Footer */
footer{padding:52px 0;font-size:15px;color:var(--muted);background:var(--cream);border-top:1px solid var(--line);}
footer a{color:var(--maroon);}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-bottom:30px;}
footer h4{margin:0 0 12px;color:var(--maroon-deep);font-size:13px;text-transform:uppercase;letter-spacing:.11em;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:7px;}

/* Editor note — visible on purpose. Delete when resolved. */
.todo{
  background:#FFF6DF;border-left:4px solid #C99000;padding:15px 19px;
  border-radius:0 6px 6px 0;font-size:14px;color:#6b5200;margin-top:26px;
}

/* --------------------------------------------------------------------------
   Bilingual switching — see assets/js/lang.js
   -------------------------------------------------------------------------- */
[lang-es]{display:none;}
body.es [lang-en]{display:none;}
body.es [lang-es]{display:block;}
body.es li[lang-es]{display:list-item;}
body.es span[lang-es],body.es strong[lang-es],body.es cite[lang-es],
body.es a[lang-es],body.es em[lang-es]{display:inline;}
body.es summary[lang-es]{display:flex;}
[lang-en]{display:block;}
li[lang-en]{display:list-item;}
span[lang-en],strong[lang-en],cite[lang-en],a[lang-en],em[lang-en]{display:inline;}
summary[lang-en]{display:flex;}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:30px;}
  .split.flip .txt{order:0;}
  .row,.day{grid-template-columns:1fr;gap:8px;}
  .rung + .rung{padding-left:0;}
  nav.main{gap:16px;font-size:14px;order:3;width:100%;padding-top:4px;}
  section{padding:52px 0;}
  .photohero .wrap{padding-top:60px;padding-bottom:44px;}
  .photohero{min-height:auto;}
}

/* --------------------------------------------------------------------------
   Banner hero (home page) — full-width image, slim info bar below
   -------------------------------------------------------------------------- */
.bannerhero{background:var(--maroon-deep);}
.bannerhero > img{width:100%;display:block;}
.bannerbar{
  background:
    radial-gradient(80% 160% at 85% 0%, rgba(176,42,62,.45) 0%, rgba(46,6,13,0) 60%),
    var(--maroon-deep);
  color:#fff;border-top:3px solid var(--maroon-soft);
}
.bannerbar .inner{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-top:22px;padding-bottom:22px;flex-wrap:wrap;
}
.bannerbar .big{font-size:21px;font-weight:800;letter-spacing:-.01em;}
.bannerbar .small{font-size:14px;color:#E79AA8;margin-top:5px;}
.bannerbar .ctas{display:flex;gap:12px;flex-wrap:wrap;}
@media (max-width:820px){
  .bannerbar .inner{flex-direction:column;align-items:flex-start;}
}

/* Orientation strip under the home banner */
.orientbar{
  background:
    radial-gradient(80% 160% at 85% 0%, rgba(176,42,62,.4) 0%, rgba(46,6,13,0) 60%),
    var(--maroon-deep);
  color:#fff;border-top:3px solid var(--maroon-soft);
}
.orientbar .inner{padding-top:24px;padding-bottom:24px;}
.journeyline{
  font-style:italic;font-weight:600;font-size:19px;color:#7EC8EF;line-height:1.45;
}
.orient{font-size:15px;color:#E8CFD4;margin-top:8px;}
.orient strong{color:#fff;}

/* Program card schedule line — story first, details last */
.card .meet{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;font-weight:700;color:var(--maroon);
}