/* Google's CSS2 endpoint wants family names in alphabetical order — Anton,
   Archivo, Archivo Expanded. The old URL had Archivo Expanded ahead of
   Archivo, which is a good way to get a 400 back and silently fall through
   to system-ui for every heading on the site. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Archivo+Expanded:wght@600;700;900&display=swap');

:root{
  --navy:#191970;
  --yellow:#ffeb37;
  --pink:#fd6eae;
  --lightblue:#d9e4f5;
  --grey:#6b6b80;
  --ink:#14142b;
  --paper:#f7f6f2;
  --white:#ffffff;
  --rule:3px solid var(--ink);
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans-wide:'Archivo Expanded','Archivo',system-ui,sans-serif;
  /* Poster face for the big titles. Anton ships one weight only, so every rule
     that uses --display sets font-weight:400 — asking for 700/900 makes the
     browser fake the bold and the letterforms go mushy. */
  --display:'Anton','Archivo Expanded','Archivo',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Inline emphasis must never fall back to a different family. */
strong,b,em,i,cite,q,small,label,button,input,textarea,select{font-family:inherit}
em,i{font-style:italic}

/* ---------- TYPE ---------- */
.display{font-family:var(--display);font-weight:400;letter-spacing:-0.005em;line-height:1.02}
h1{font-family:var(--display);font-weight:400;letter-spacing:-0.005em;line-height:1.02;font-size:clamp(46px,7.2vw,94px)}
h2{font-family:var(--display);font-weight:400;letter-spacing:0;line-height:1.06;font-size:clamp(34px,4.4vw,54px)}
h3{font-family:var(--sans-wide);font-weight:700;font-size:22px;letter-spacing:-0.01em;line-height:1.15}
h1,h2,h3,.display,.logo{overflow-wrap:break-word}
p{max-width:62ch;font-family:var(--sans)}

/* .lead changes SIZE only — colour matches surrounding body copy, so a lead
   paragraph followed by normal paragraphs never reads as two typefaces. */
.lead{font-size:19px;font-weight:500}
.prose p{font-size:17px}
.prose p + p{margin-top:16px}

.kicker{font-weight:700;font-size:13.5px;letter-spacing:0.02em;color:var(--navy);margin-bottom:12px;font-family:var(--sans)}
.kicker.pink{color:var(--pink)}
.kicker.yellow{color:var(--yellow)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
section{border-bottom:var(--rule)}
.pad{padding:76px 0}
.pad-sm{padding:52px 0}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 32px;max-width:1180px;margin:0 auto}
.logo{font-family:var(--display);font-weight:400;font-size:25px;letter-spacing:0.01em;text-decoration:none;color:var(--ink)}
.navlinks{display:flex;gap:30px;align-items:center;font-weight:600;font-size:15px}
.navlinks a{text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
.navlinks a:hover,.navlinks a.active{border-bottom-color:var(--pink)}
.navlinks .store{background:var(--navy);color:var(--paper);padding:9px 18px;border:3px solid var(--navy)}
.navlinks .store:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* --- DROPDOWN ---
   The menu sits 16px below the trigger for breathing room. That gap used to
   break the hover chain: the pointer left .dropdown mid-travel and the menu
   vanished. ::after lays an invisible bridge across the gap, exactly as wide
   as the menu, so any straight or diagonal path from trigger to menu item
   stays inside .dropdown the whole way. :focus-within adds keyboard support. */
.dropdown{position:relative}
.dropdown > .droptrigger{
  cursor:default;font-weight:600;border:0;border-bottom:3px solid transparent;
  padding:4px 0;display:inline-block;font-family:inherit;font-size:inherit;
  background:none;color:inherit;
}
.dropdown:hover > .droptrigger,
.dropdown:focus-within > .droptrigger{border-bottom-color:var(--pink)}

.dropdown::after{
  content:"";position:absolute;top:100%;left:-18px;
  width:262px;height:20px;display:none;
}
.dropdown:hover::after,.dropdown:focus-within::after{display:block}

.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 16px);left:-18px;
  background:var(--paper);border:var(--rule);
  min-width:262px;padding:8px 0;z-index:120;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:11px 18px;border:none;font-size:14.5px}
.dropdown-menu a:hover,.dropdown-menu a:focus{background:var(--yellow);border:none}

.navtoggle{display:none;background:none;border:var(--rule);font-weight:700;font-size:14px;padding:8px 14px;cursor:pointer;font-family:inherit}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;font-weight:700;font-size:15px;padding:14px 26px;
  text-decoration:none;border:3px solid var(--ink);background:transparent;
  color:var(--ink);transition:transform .14s ease;font-family:var(--sans);
}
.btn:hover{transform:translate(-2px,-2px)}
.btn-yellow{background:var(--yellow);border-color:var(--yellow)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.btn-pink{background:var(--pink);border-color:var(--pink)}
.btn-ghost-light{background:transparent;border-color:var(--paper);color:var(--paper)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

.arrowlink{font-weight:700;font-size:15px;text-decoration:none;border-bottom:3px solid var(--pink);padding-bottom:2px;display:inline-block}
.arrowlink:hover{border-bottom-color:var(--navy)}

/* ---------- HERO ---------- */
.hero{display:grid;grid-template-columns:1.12fr .88fr;min-height:80vh}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:64px;background:var(--navy);color:var(--paper);position:relative;overflow:hidden}
.hero-text::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:var(--pink);opacity:.16}
.hero-text .kicker{color:var(--yellow);position:relative;z-index:1}
.hero-text h1,.hero-text p,.hero-text .btnrow{position:relative;z-index:1}
.hero-text h1{margin-bottom:24px}
.hero-text p{color:#dcdbf0;font-size:19px;max-width:44ch}
.hero-img{position:relative;overflow:hidden;background:var(--ink)}
.hero-img img,.hero-img video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* ---------- BANNERS ---------- */
.banner{background:var(--navy);color:var(--paper);padding:64px 0}
.banner .kicker{color:var(--yellow)}
.banner p{color:#dcdbf0;font-size:18.5px}

/* full-bleed video masthead */
.banner-video{position:relative;overflow:hidden;background:var(--navy);color:var(--paper);padding:88px 0;min-height:380px}
.banner-video video,.banner-video img.bgfallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banner-video::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(25,25,112,.65) 0%,rgba(25,25,112,.56) 55%,rgba(20,20,43,.40) 100%)}
.banner-video .wrap{position:relative;z-index:2}
.banner-video .kicker{color:var(--yellow)}
.banner-video p{color:#e4e3f4;font-size:18.5px}

/* split masthead — text beside a portrait-orientation video */
.banner-split{display:grid;grid-template-columns:.86fr 1.14fr;background:var(--navy);color:var(--paper)}
.banner-split .bs-text{padding:72px 40px 72px 0;display:flex;flex-direction:column;justify-content:center}
.banner-split .bs-text .wrapinner{max-width:600px;margin-left:auto;padding-left:32px}
.banner-split .kicker{color:var(--yellow)}
.banner-split p{color:#dcdbf0;font-size:18.5px}
.banner-portrait{position:relative;min-height:440px;background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
.banner-portrait video,.banner-portrait img{position:static;width:auto;height:100%;max-width:100%;object-fit:contain}

/* ---------- VIDEO / EMBED BLOCKS ---------- */
.videoframe{border:var(--rule);background:var(--ink);max-width:860px;margin-top:26px;width:fit-content}
.videoframe video{width:100%;height:auto;display:block;background:#000}
/* the campus teaching clip is a near-square phone crop, not 16:9 */
.videoframe.narrow{max-width:520px}
.videocap{font-size:14.5px;color:var(--grey);margin-top:12px;max-width:860px}

.ytwrap{position:relative;padding-top:56.25%;max-width:860px;margin-top:24px;border:var(--rule);background:#000}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.calembed{border:var(--rule);background:var(--white);margin-top:26px;padding:10px;min-height:640px;overflow:hidden}

/* autoplaying video placed inline within a normal split (not a full-bleed masthead) */
.split-img.inlinevid{min-height:0;background:var(--ink)}
.split-img.inlinevid video{position:static;width:100%;height:auto;display:block;object-fit:contain}

/* ---------- SPLIT / GRID ---------- */
.split{display:grid;grid-template-columns:1fr 1fr}
.split.img-left{grid-template-columns:.92fr 1.08fr}
.split-img{position:relative;min-height:420px;background:var(--ink)}
.split-img img{width:100%;height:100%;object-fit:cover;object-position:center 15%;position:absolute;inset:0}
/* full designed posters (title text baked in) must never be cropped */
.split-img.poster img{object-fit:contain;background:var(--ink)}
.split-body{padding:68px 56px;display:flex;flex-direction:column;justify-content:center}
.split-body p + p{margin-top:14px}

.tracks{display:grid;grid-template-columns:1fr 1fr}
.track{padding:60px 52px;border-right:var(--rule)}
.track:last-child{border-right:none;background:var(--lightblue)}
.track h2{margin-bottom:16px}
.track p{margin-bottom:22px;font-size:16.5px}
.tracklinks{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- QUOTES ---------- */
.quotestrip{background:var(--ink);color:var(--paper);padding:60px 0}
.quotegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.quote p{font-size:17px;font-weight:500;line-height:1.45;margin-bottom:12px;max-width:34ch}
.quote cite{font-style:normal;font-size:13.5px;font-weight:700;color:var(--yellow)}

.pullquote{border-left:8px solid var(--pink);padding:6px 0 6px 26px;margin:34px 0}
.pullquote p{font-size:20px;font-weight:600;line-height:1.38;margin-bottom:10px}
.pullquote cite{font-style:normal;font-size:14px;font-weight:700;color:var(--navy)}
.pullquote.italic p{font-style:italic}
.banner .attrib,.banner-video .attrib{color:var(--yellow);font-weight:700;font-size:15px;font-style:normal;display:block;margin-top:10px}

.quotecard{background:var(--white);border:var(--rule);padding:26px}
.quotecard p{font-size:16px;margin-bottom:12px}
.quotecard cite{font-style:normal;font-size:13.5px;font-weight:700;color:var(--navy)}
.quotecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px;margin-top:32px}

/* ---------- SHOW BLOCKS ---------- */
.show{border-bottom:var(--rule)}
.show:last-child{border-bottom:none}
.showhead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.badge{background:var(--yellow);color:var(--ink);font-weight:700;font-size:13px;padding:6px 12px;border:3px solid var(--ink);line-height:1.3}
.badge.pink{background:var(--pink)}
.badge.blue{background:var(--lightblue)}
.proglist{list-style:none;margin:20px 0;max-width:620px}
.proglist li{padding:10px 0;border-bottom:1px solid #cfcfdd;font-weight:600;font-size:16px}
.proglist li:last-child{border-bottom:none;color:var(--grey);font-weight:500}
.proglist a{text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:1px}
.proglist a:hover,.proglist a:focus{background:var(--yellow);border-bottom-color:var(--navy)}
.listenhint{font-size:13.5px;color:var(--grey);font-weight:500}

/* ---------- SHOW BLOCKS (Shows page) ----------
   The title stays inside the show's own content column so it reads as part of
   that show, not as a floating banner. Separation comes from a thick accent
   rule across the top of each block plus a different background per show.
   scroll-margin keeps the sticky header off the title when the residency page
   deep-links straight to a show. */
.showblock{scroll-margin-top:96px;border-top:11px solid var(--pink)}
.showblock.accent-yellow{border-top-color:var(--yellow)}
.showblock.accent-navy{border-top-color:var(--navy)}
.showblock .showlabel{font-weight:700;font-size:13px;letter-spacing:.09em;color:var(--navy);margin-bottom:14px}

/* ---------- OFFERINGS ---------- */
.offergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0;border-top:var(--rule)}
.offer{padding:34px 30px;border-right:var(--rule);border-bottom:var(--rule)}
.offer:last-child{border-right:none}
.offer h3{margin-bottom:14px}
.offer ul{list-style:none}
.offer li{padding:7px 0;font-size:15.5px;border-bottom:1px solid #d8d8e4}
.offer li:last-child{border-bottom:none}

.instlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:0;border-top:var(--rule);border-left:var(--rule);margin-top:26px}
.instlist div{padding:16px 18px;border-right:var(--rule);border-bottom:var(--rule);font-weight:600;font-size:15px;background:var(--white)}

/* ---------- FAQ ---------- */
.faq{border-top:var(--rule)}
.faq details{border-bottom:var(--rule);background:var(--white)}
.faq summary{padding:20px 24px;font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:700;color:var(--navy)}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{background:var(--yellow)}
.faq .answer{padding:0 24px 22px;font-size:16px}

/* ---------- CHECKLIST ---------- */
.checklist{list-style:none;margin:22px 0}
.checklist li{padding:12px 0 12px 34px;position:relative;font-size:17px;font-weight:500;border-bottom:1px solid #d8d8e4}
.checklist li:last-child{border-bottom:none}
.checklist li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:16px;background:var(--pink)}

/* ---------- PART DIVIDER (Lessons) ---------- */
.partbar{background:var(--ink);color:var(--paper);padding:36px 0}
.partbar .partnum{font-family:var(--sans-wide);font-weight:900;font-size:13px;letter-spacing:.08em;color:var(--yellow);margin-bottom:8px}
.partbar h2{margin:0}
.partbar p{color:#c9c8de;margin-top:10px;font-size:17px}

/* ---------- FORM ---------- */
.form{display:grid;gap:18px;max-width:560px;margin-top:28px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.field input,.field textarea{width:100%;padding:13px 14px;font-size:16px;border:3px solid var(--ink);background:var(--white);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:4px solid var(--pink);outline-offset:1px}
.field textarea{min-height:150px;resize:vertical}
.namerow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- BIO ---------- */
.bio{background:var(--white);border:var(--rule);padding:36px}
.bio p{margin-bottom:15px;font-size:16px;max-width:none}
.bio p:last-child{margin-bottom:0}
.bio summary{font-weight:700;cursor:pointer;font-size:17px;font-family:var(--sans-wide)}

.eduline{list-style:none;margin-top:16px}
.eduline li{padding:9px 0;border-bottom:1px solid #d8d8e4;font-weight:600;font-size:15.5px}
.eduline li:last-child{border-bottom:none}

/* ---------- CTA BAR ---------- */
.ctabar{background:var(--yellow);padding:54px 0;text-align:center}
.ctabar h2{margin-bottom:20px}
.ctabar p{margin:0 auto}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:var(--paper);padding:52px 0;border:none}
.footgrid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
footer .logo{color:var(--paper)}
.footcol h4{font-size:13.5px;font-weight:700;color:var(--yellow);margin-bottom:12px;letter-spacing:0.02em}
.footcol a{display:block;text-decoration:none;font-size:15px;padding:4px 0;color:#dcdbf0}
.footcol a:hover{color:var(--yellow)}
.footnote{margin-top:34px;padding-top:22px;border-top:1px solid #34344f;font-size:13.5px;color:#9c9cb5}

/* ---------- PLACEHOLDER ---------- */
.todo{background:var(--lightblue);border:3px dashed var(--navy);padding:18px 22px;font-size:15px;font-weight:600;color:var(--navy);margin-top:22px;max-width:860px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-img{min-height:320px;order:-1}
  .hero-text{padding:48px 28px}
  .banner-split{grid-template-columns:1fr}
  .banner-split .bs-text{padding:48px 22px}
  .banner-split .bs-text .wrapinner{padding-left:0;max-width:none}
  .banner-portrait{min-height:380px;order:-1}
  .banner-video{padding:60px 0;min-height:0}
  .tracks{grid-template-columns:1fr}
  .track{border-right:none;border-bottom:var(--rule);padding:44px 28px}
  .track:last-child{border-bottom:none}
  .split,.split.img-left{grid-template-columns:1fr}
  /* the portrait photos are 4:5, so a short box crops them to a letterbox band;
     posters are taller still and need room or the baked-in title is unreadable */
  .split-img{min-height:360px}
  .split-img.poster{min-height:440px}
  .split-body{padding:44px 28px}
  .quotegrid{grid-template-columns:1fr;gap:28px}
  .offer{border-right:none}
  .namerow{grid-template-columns:1fr}
  .wrap{padding:0 22px}
  .pad{padding:52px 0}
  .calembed{min-height:560px;padding:6px}
  .showblock{border-top-width:9px}

  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:var(--rule);flex-direction:column;align-items:flex-start;gap:0;padding:12px 22px 20px}
  .navlinks.open{display:flex}
  .navlinks a{padding:11px 0;width:100%}
  .navlinks .store{text-align:center;width:100%;margin-top:10px}
  .dropdown{width:100%}
  .dropdown::after{display:none!important}
  .dropdown-menu{display:block;position:static;border:none;margin:0 0 0 14px;padding:0;min-width:0;top:auto}
  .dropdown-menu a{padding:9px 0}
  .dropdown-menu a:hover{background:none}
  .navtoggle{display:block}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}