/* /gallery — 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/768/390
   (QA gate: tools/qa_baseline.py compare).
   Breakpoints match the site's: <810 phone, 810–1199.98 tablet, ≥1200
   desktop — the gallery's tablet layout equals its desktop one, so only
   the phone block overrides.
   The hero keeps class yg-1xpoeol — enhance.js mounts the og-ambient
   backdrop on it and main.css owns that band's gradient + grain.
   The six carousels are plain overflowing <ul>s: enhance.js's
   fixCarousels turns them into native scroll-snap strips with drag. */

/* ---- 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}
.ga-page img{border:0}

/* ---- hero (ambient band: base gradient stack, grain and blobs all come
   from main.css/enhance.js through the yg-1xpoeol hook class) ---- */
.ga-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;height:600px}
/* overflow:hidden mirrors the source stack, which clips the title's
   italic overhang at its own right edge */
.ga-hero-stack{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:100%;overflow:hidden}
.ga-hero-logo{width:322px;height:52px}
.ga-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}

/* ---- the six discipline rows ---- */
.ga-wrap{max-width:1500px;margin:0 auto;padding:100px 120px}
/* flex column + align-items:center centres the fixed 960px strips even
   when they are wider than the row; overflow:hidden clips the excess
   symmetrically exactly like the source page */
.ga-row{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 0 15px;overflow:hidden}
.ga-h{margin:0;width:100%;text-align:center;color:#343458;
  letter-spacing:-2px;white-space:pre-wrap;
  font:normal 712 50px/1.2 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* strip heights mirror the source: the first (fashion) viewer is a fixed
   400px, every other one is half the viewport like the original's
   calc(var(--yg-viewport-height,100vh)*.5) */
.ga-strip{position:relative;flex:none;width:100%;height:400px}
.ga-strip-wide{height:50vh}
.ga-strip-960{width:960px;height:50vh}

.ga-car{display:flex;width:100%;height:100%;max-width:100%;margin:0;
  padding:10px;overflow:hidden}
.ga-car ul{display:flex;flex-direction:row;align-items:center;gap:10px;
  width:100%;height:100%;margin:0;padding:0;list-style:none}
.ga-car li{flex:none}
.ga-i{position:relative;flex-shrink:0}
.ga-i>div{position:absolute;top:0;right:0;bottom:0;left:0}

/* ---- CTA band (the photo asset itself is the pink duotone) ---- */
.ga-cta{position:relative;overflow:hidden;height:600px;padding:60px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px}
.ga-cta-bg{position:absolute;top:0;right:0;bottom:0;left:0}
/* the source page lays a 2% black overlay between the photo and the copy */
.ga-cta::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:rgba(0,0,0,.02)}
.ga-cta h1{position:relative;z-index:1;margin:0;color:#343458;text-align:center;
  letter-spacing:-2px;white-space:pre-wrap;
  font:normal 712 50px/1.2 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.ga-cta h2{position:relative;z-index:1;margin:0;width:390px;max-width:100%;
  text-align:center;color:#343458;letter-spacing:-.5px;white-space:pre-wrap;
  font:normal 708 24px/1.5 "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
.ga-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}
.ga-pill p{margin:0;color:#323455;letter-spacing:normal;
  font:normal 712 14px/1 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- phone <810 (tablet keeps the desktop values) ---- */
@media (max-width:809.98px){
  /* shorter hero so the lower half isn't an empty dark gradient void */
  .ga-hero{height:auto;min-height:360px;padding:64px 24px}
  .ga-hero-logo{width:186px;height:30px}
  .ga-hero-title{font-size:clamp(34px,13vw,50px)}
  .ga-wrap{padding:40px 30px 20px}
  .ga-h{font-size:45px}
  .ga-cta h1{font-size:45px}
}