/* /schedule — hand-authored page styles (refactor Phase 1, 2026-07-05).
   Replaces the generated Framer markup 1:1: every size, colour and offset
   below is measured from the original render at 1440/1024/390 (see
   refactor-plan.md; QA gate: tools/qa_baseline.py compare).
   Breakpoints match the site's: <810 phone, 810–1199.98 tablet, ≥1200 desktop.
   The hero keeps class yg-pe8j1z — enhance.js mounts the og-ambient
   backdrop on it and main.css owns that band's gradient + grain.
   Selector discipline: elements own their margins inside their single rule
   (no blanket reset — it out-specifies the layout rules and eats margins). */

/* ---- fonts (verbatim from the original page's embedded CSS; files were
   already self-hosted) ---- */
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-style:normal;font-weight:712}
@font-face{font-family:"Cooper Hewitt Medium Italic";src:url("/assets/media/assets/CmwYO4gspavfqV41DaC9m6Kp9aY.woff2");font-style:normal;font-weight:708}
@font-face{font-family:"Source Sans Pro Bold";src:url("/assets/media/assets/mfJIi4ZsBj1zFYUodmv4QSL2jnU.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Source Sans Pro Regular";src:url("/assets/media/assets/alL3C3eWkOZCVYCmuhkboeZkZk.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/s/sourcesans3/v19/nwpDtKy2OAdR1K-IwhWudF-R3woAa8opPOrG97lwqF5JxCkSmg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- base ---- */
/* the generated pages ship a global border-box reset; the shared footer
   and injected pill nav are sized against it, so this page keeps it */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased}
.sc-page figure{margin:0}
.sc-page img{border:0}

/* ---- no top bar rules: the injected pill nav (main.css) is the site's
   one header on every page at every width ---- */

/* ---- hero (ambient band: the base gradient stack, grain and blobs all
   come from main.css/enhance.js through the yg-pe8j1z hook class — no
   background here, it would override main.css's layered one) ---- */
.sc-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;height:600px;padding:0 40px;
  box-sizing:border-box}
.sc-hero-stack{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:100%}
.sc-hero-logo{width:322px;height:52px}
/* pre-wrap keeps the original text node's leading/trailing spaces, which
   shift the centered lines by half a space exactly like the source page */
.sc-hero-title{margin:0;max-width:100%;color:#fff;white-space:pre-wrap;
  font:normal 712 90px/1 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.sc-br-sm{display:none}

/* ---- "UPCOMING EVENTS @YG" (phone shows the variant's short text) ---- */
.sc-upcoming{margin:40px 0 0;text-align:center;color:#333455;
  text-wrap:balance;white-space:pre-wrap;
  font:normal 712 60px/66px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
h1.sc-bp-sm{display:none}

/* ---- Lu.ma embed ---- */
.sc-embed{margin-top:40px;height:448px}

/* ---- thematic workshops ---- */
.sc-thematic{margin:97px 0 0;text-align:center;color:#343459;
  font:normal 712 60px/60px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.sc-intro p{width:600px;margin:20px auto 0;text-align:center;color:#343458;
  text-wrap:balance;
  font:normal 708 20px/30px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif;
  letter-spacing:-.5px}
.sc-intro p:first-child{margin-top:57px}

/* ---- workshop rows ---- */
.sc-rows{width:1080px;margin:0 auto}
.sc-row{display:flex;align-items:flex-start}
/* fixed-width columns: the original lets the May row overflow its 1080px
   container by 6px rather than shrink the text column */
.sc-col{flex:none}
.sc-photo{flex:none}
.sc-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sc-col p{margin:0;color:#343458;white-space:pre-wrap;
  font:normal 708 20px/30px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif;
  letter-spacing:-.5px}
.sc-col p.sc-month{margin:0;color:#343459;letter-spacing:normal;
  font:normal 712 50px/65px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.sc-col p.sc-title{margin:0;color:#343459;letter-spacing:normal;
  font:normal 712 40px/46px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
/* April's month + title sit in <em> in the source and the Cooper Hewitt
   face is registered upright, so the browser adds a synthetic slant on
   top of the already-italic glyphs — replicated on purpose */
.sc-row-april .sc-col p.sc-month,
.sc-row-april .sc-col p.sc-title{font-style:italic}

.sc-row-april{margin-top:120.8px}
.sc-row-april .sc-photo{width:476px;height:614px;margin-left:5px}
.sc-row-april .sc-col{width:475px;margin-left:124px;margin-top:91.7px}
.sc-row-april .sc-col p.sc-title{margin-top:37px}
.sc-row-april .sc-col p.sc-sched{margin-top:4px}
.sc-row-april .sc-col p.sc-desc{margin-top:50px}

.sc-row-may{margin-top:288.7px}
.sc-row-may .sc-col{width:475px;margin-top:5.7px}
.sc-row-may .sc-photo{width:476px;height:614px;margin-left:135px}
.sc-row-may .sc-col p.sc-month{line-height:50px}
.sc-row-may .sc-col p.sc-title{margin-top:50px;line-height:40px}
.sc-row-may .sc-col p.sc-sched{margin-top:10px}
.sc-row-may .sc-col p.sc-desc{margin-top:30px}
/* the original May column nests schedule/dates/description in a 439px
   sub-container while the month/title sit in the full 475px one */
.sc-row-may .sc-col p.sc-sched,
.sc-row-may .sc-col p.sc-date,
.sc-row-may .sc-col p.sc-desc{width:439px}

.sc-btn{display:flex;align-items:center;justify-content:center;width:max-content;
  height:40px;padding:0 15px;margin-top:10px;border-radius:8px;background:#333455;
  text-decoration:none;
  box-shadow:rgba(0,0,0,.15) 0 .706592px .706592px -.625px,
    rgba(0,0,0,.14) 0 1.80656px 1.80656px -1.25px,
    rgba(0,0,0,.14) 0 3.62176px 3.62176px -1.875px,
    rgba(0,0,0,.13) 0 6.8656px 6.8656px -2.5px,
    rgba(0,0,0,.1) 0 13.6468px 13.6468px -3.125px,
    rgba(0,0,0,.05) 0 30px 30px -3.75px}
.sc-col .sc-btn p{margin:0;color:#fff;letter-spacing:normal;
  font:normal 712 14px/16.8px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- CTA band (the photo asset itself is the pink duotone) ---- */
.sc-cta{position:relative;overflow:hidden;margin-top:169.5px;height:600px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;background:rgba(0,0,0,.02)}
.sc-cta-bg{position:absolute;inset:0;z-index:0}
.sc-cta-bg img{display:block;width:100%;height:100%;object-fit:cover}
.sc-cta h1{position:relative;z-index:1;margin:0;color:#343458;letter-spacing:-2px;
  font:normal 712 50px/60px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.sc-cta h2{position:relative;z-index:1;margin:0;width:390px;text-align:center;
  color:#343458;letter-spacing:-.5px;
  font:normal 708 24px/36px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
.sc-pill{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;height:40px;padding:0 15px;border-radius:8px;
  background:#fff;text-decoration:none}
.sc-pill p{margin:0;color:#323455;letter-spacing:normal;
  font:normal 712 14px/14px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- desktop >=1200: April column box model mirrors the original's
   (month/title line boxes 50/40 with the em glyphs painting beyond) ---- */
@media (min-width:1200px){
  .sc-row-april .sc-col{margin-top:99.7px}
  .sc-row-april .sc-col p.sc-month{line-height:50px}
  .sc-row-april .sc-col p.sc-title{margin-top:50px;line-height:40px}
  .sc-row-april .sc-col p.sc-sched{margin-top:10px}
  .sc-row-april .sc-col p.sc-desc{margin-top:50px}
  /* the original paints this photo half a pixel lower than the row top;
     the +/- margin pair shifts the paint without moving anything below */
  .sc-row-may .sc-photo{margin-top:.5px;margin-bottom:-.5px}
}

/* ---- tablet 810–1199.98 (probed at 1024 and 1100: photos follow the
   original's formulas - April fluid with a fixed -34px bleed, torii a
   fixed 373x886 flush right; hero shows the phone <br>) ---- */
@media (min-width:810px) and (max-width:1199.98px){
  .sc-br-sm{display:inline}
  .sc-rows{width:auto}
  .sc-row-april{margin-top:24.3px}
  /* the tablet variant clips a (-34,-7.7) anchored 868px-tall image to a
     grid-cell window: x60, width (100vw-70)/2, height 860.3 */
  .sc-row-april .sc-photo{position:relative;overflow:hidden;
    width:calc((100vw - 70px)/2);height:860.3px;
    margin-left:60px;margin-top:7.7px}
  .sc-row-april .sc-photo img{position:absolute;top:-7.7px;left:-94px;
    width:calc((100vw - 70px)/2 + 153px);height:868px}
  .sc-row-april .sc-col{width:auto;flex:1;margin-left:70px;margin-right:60px;
    margin-top:166.2px}
  .sc-row-april .sc-col p.sc-month{line-height:50px}
  .sc-row-april .sc-col p.sc-title{margin-top:50px;line-height:40px}
  .sc-row-april .sc-col p.sc-sched{margin-top:10px}
  .sc-row-april .sc-col p.sc-desc{margin-top:50px}
  .sc-row-may{margin-top:57.7px}
  .sc-row-may .sc-col{width:auto;flex:1;margin-left:120px;margin-right:70px;
    margin-top:157.7px}
  .sc-row-may .sc-col p.sc-sched,
  .sc-row-may .sc-col p.sc-date,
  .sc-row-may .sc-col p.sc-desc{width:auto}
  .sc-row-may .sc-photo{width:373px;height:886px;margin-left:0}
  .sc-row-may .sc-col p.sc-month{font-size:46px;line-height:46px}
  .sc-row-may .sc-col p.sc-title{margin-top:45px;font-size:35px;line-height:35px}
  .sc-cta{margin-top:26px}
}

/* ---- phone <810 (workshop photos are not part of the phone layout,
   matching the original's phone variant) ---- */
@media (max-width:809.98px){
  /* shorter hero so the lower half isn't an empty dark void on phones */
  .sc-hero{height:auto;min-height:380px;padding:72px 24px}
  .sc-hero-logo{width:185.7692px;height:30px}
  /* fluid title so "WORKSHOPS" fits at 320 instead of clipping off-screen */
  .sc-hero-title{font-size:clamp(32px,11.5vw,50px)}
  .sc-br-sm{display:inline}
  h1.sc-bp-lg{display:none}
  h1.sc-bp-sm{display:block}
  /* phone variant: 49px lines but the same 113px box (padding makes up
     the difference), so the flow below keeps its exact offsets */
  /* the events embed's empty "no upcoming events" state fills only its
     top half at 448px, leaving a large void — fit it closer to content */
  .sc-embed{height:320px}
  .sc-thematic{width:287px;margin:70px auto 0;font-size:49px;
    line-height:49px;padding:7.5px 0;letter-spacing:-.98px}
  /* 351px like the original at 390, but shrink below it instead of
     scrolling sideways on 320-360px phones (original scrolled) */
  .sc-intro p{width:min(351px,100vw - 39px);margin:20px auto 0}
  .sc-intro p:first-child{margin-top:31px}
  .sc-photo{display:none}
  /* phone columns are fluid: 60px side margins, width follows viewport */
  .sc-rows{width:auto;margin:0 60px}
  .sc-row{display:block}
  /* photos are hidden on phone, so the desktop photo-height margins left
     ~130-152px dead voids between blocks — tighten to real spacing */
  .sc-row-april{margin-top:48px}
  .sc-row-april .sc-col{width:auto;margin:0}
  .sc-row-may{margin-top:56px}
  .sc-row-may .sc-col{width:auto;margin:0}
  .sc-row-may .sc-col p.sc-sched,
  .sc-row-may .sc-col p.sc-date,
  .sc-row-may .sc-col p.sc-desc{width:auto}
  .sc-row-may .sc-col p.sc-month{font-size:35px;line-height:35px}
  .sc-row-may .sc-col p.sc-title{margin-top:45px;font-size:35px;line-height:35px}
  /* the phone variant of the original renders April's month/title without
     the desktop variant's synthetic italic (the <em> only slants >=810) */
  .sc-row-april .sc-col p.sc-month,
  .sc-row-april .sc-col p.sc-title,
  .sc-row-april .sc-col p.sc-month em,
  .sc-row-april .sc-col p.sc-title em{font-style:normal}
  .sc-row-april .sc-col p.sc-title{line-height:40px;padding:6px 0}
  .sc-cta{margin-top:56px}
  .sc-cta h1{font-size:35px;line-height:42px;margin:0 60px;text-align:center}
  .sc-cta h2{width:auto;max-width:390px;margin:0 60px;font-size:20px;
    line-height:30px}
}