.home-body{background:var(--color-cobalt)}
.home-body .header{position:relative;z-index:5;max-width:1440px;padding-top:22px;padding-bottom:18px;color:var(--color-ivory);gap:36px}
.home-body .header .brand-linear{display:block;width:210px;height:auto;filter:brightness(0) invert(1)}
.home-body .header nav{align-items:center;gap:clamp(16px,2.5vw,38px)}
.home-body .header nav a{color:var(--color-ivory)}
.home-body .header .nav-watch{background:var(--color-gold);color:var(--color-ink-on-gold);padding:9px 22px;font-size:var(--cta-font-size);font-weight:var(--cta-font-weight)}
.home-body .header .nav-watch:hover{background:var(--color-ivory);color:var(--color-ink)}
.home-body .header-note{display:none}
.home-page{background:var(--color-paper)}
.home-hero{position:relative;isolation:isolate;overflow:hidden;min-height:680px;background-color:var(--color-cobalt);color:var(--color-ivory)}
.home-hero-sky{position:absolute;z-index:-1;inset:0;background-image:linear-gradient(180deg,var(--color-cobalt),transparent 18%),linear-gradient(90deg,color-mix(in srgb, var(--color-navy) 67%, transparent),transparent 64%),url('/assets/home/painted-sky.webp');background-size:cover;background-position:center;transform-origin:50% 0}
.home-hero-inner{position:relative;max-width:1440px;min-height:680px;margin:auto;padding:42px 5% 120px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.home-hero-copy{position:relative;z-index:4;padding-bottom:26px}
.home-hero h1{font-family:var(--font-display);font-size:var(--type-display);font-weight:var(--weight-medium);line-height:1.02;letter-spacing:-.035em;margin:0;white-space:nowrap}
.home-hero-intro{font-size:var(--type-lead);line-height:1.5;max-width:440px;margin:26px 0 0;color:var(--color-ivory)}
.home-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.home-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--cta-gap);max-width:100%;min-height:56px;padding:13px 25px;border-radius:100px;background:var(--color-orange-action);color:var(--color-on-orange-action);font-size:var(--cta-font-size);font-weight:var(--cta-font-weight);line-height:var(--cta-line-height);text-decoration:none;transition:background .2s,transform .2s}
.home-primary:hover{background:var(--color-orange-action-hover);transform:translateY(-2px)}
.home-secondary{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--color-ivory);font-size:var(--cta-font-size);font-weight:var(--cta-font-weight);line-height:var(--cta-line-height);text-decoration:underline;text-underline-offset:5px}
.home-secondary:hover{text-decoration-thickness:2px}
.home-hero-world{position:relative;z-index:2;align-self:center;margin-left:-10%;margin-right:-12%;margin-top:-26px;filter:drop-shadow(0 22px 18px color-mix(in srgb, var(--color-navy) 40%, transparent))}
.home-hero-world img{display:block;width:100%;height:auto}
.home-hero-world-float{transform-origin:50% 60%}
.home-hero-foreground{position:absolute;z-index:3;pointer-events:none;inset:auto 0 -36px;display:flex;justify-content:space-between;align-items:end}
.home-hero-foreground span{display:block;width:min(43vw,570px);height:auto;aspect-ratio:1011/778;background-image:url('/assets/home/foreground-garden-open.webp');background-size:200% auto;background-repeat:no-repeat;filter:blur(clamp(5px,.7vw,10px)) brightness(.85)}
.home-foreground-left{background-position:left bottom;transform:translate3d(-5%,0,0);transform-origin:0 100%}
.home-foreground-right{background-position:right bottom;transform:translate3d(5%,0,0);transform-origin:100% 100%}
@media(max-width:1000px){
  .home-body .header{gap:15px}
  .home-body .header .brand-linear{width:180px}
  .home-hero,.home-hero-inner{min-height:600px}
  .home-hero h1{font-size:var(--type-display)}
  .home-hero-world{margin-left:-5%;margin-right:-13%}
  .home-hero-foreground span{width:min(43vw,430px)}
}
@media(max-width:760px){
  .home-body .header{padding:20px 6% 12px;flex-wrap:wrap;gap:12px}
  .home-body .header .brand-linear{width:165px}
  .home-body .header nav{width:100%;margin:0;justify-content:space-between;gap:8px}
  .home-body .header nav a{font-size:var(--type-meta)}
  .home-body .header .nav-watch{position:absolute;top:20px;right:6%;padding:7px 15px}
  .home-hero,.home-hero-inner{min-height:0}
  .home-hero-inner{display:flex;flex-direction:column;align-items:stretch;padding:42px 6% 110px}
  .home-hero-copy{padding:0}
  .home-hero h1{font-size:var(--type-display);white-space:normal}
  .home-hero-intro{font-size:var(--type-body-large);margin-top:20px}
  .home-hero-actions{margin-top:22px}
  .home-hero-world{width:116%;max-width:760px;margin:12px -8% -30px;align-self:center}
  .home-hero-foreground{bottom:-18px}
  .home-hero-foreground span{width:49vw}
  .home-hero-sky{background-position:52% center}
}
@media(max-width:420px){
  .home-body .header .brand-linear{width:150px}
  .home-body .header nav a{font-size:var(--type-label)}
  .home-body .header .nav-watch{padding:7px 12px}
  .home-hero-inner{padding-top:32px;padding-bottom:85px}
  .home-hero h1{font-size:var(--type-display)}
  .home-hero-intro{font-size:var(--type-body)}
  .home-primary{min-height:51px;padding:12px 16px;gap:14px}
  .home-hero-world{width:130%;margin:16px -15% -25px}
  .home-hero-foreground span{width:52vw}
}
@media(max-width:360px){
  .home-body .header nav{flex-wrap:nowrap;justify-content:space-between;gap:4px}
  .home-body .header nav a{font-size:var(--type-tiny)}
  .home-body .header .nav-watch{padding:6px 9px;font-size:var(--type-body);gap:6px}
  .home-primary{padding-inline:12px;gap:8px}
}
@media(min-width:761px) and (max-height:780px){
  .home-hero,.home-hero-inner{min-height:580px}
  .home-hero-inner{padding-top:20px;padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){.home-primary{transition:none}}

/* Hero motion. home.js drives the scroll transforms and adds .is-live once it has taken over;
   without it (or with reduced motion) the hero is the still painting above. */
@media(prefers-reduced-motion:no-preference){
  .home-hero.is-live .home-hero-sky,.home-hero.is-live .home-hero-world,.home-hero.is-live .home-hero-copy,.home-hero.is-live .home-hero-foreground span{will-change:transform}
  .home-hero-world-float{animation:home-world-rise 1.5s cubic-bezier(.16,.84,.24,1) both}
  .home-hero-world-float img{animation:home-world-bob 7s ease-in-out 1.5s infinite}
  .home-hero-foreground{animation:home-garden-grow 1.3s cubic-bezier(.2,.9,.25,1) .15s both}
}
@keyframes home-world-rise{from{transform:translate3d(0,14%,0) scale(.94) rotate(2deg)}}
@keyframes home-world-bob{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-2.2%,0) rotate(-.6deg)}}
@keyframes home-garden-grow{from{transform:translate3d(0,38%,0)}}

/* The rest of the home page reads as successive pages of the same painted world. */
.home-page #series,.home-page #episodes{max-width:none;padding:clamp(62px,7vw,104px) max(5%,calc((100% - 1296px)/2));scroll-margin-top:0}
.home-page #series{background:var(--color-pale-sky)}
.home-page #episodes{background:var(--color-white)}
.home-page #series .section-heading,.home-page #episodes .section-heading{align-items:baseline;margin-bottom:34px}
.home-page #series h2,.home-page #episodes h2{font-size:var(--type-section);font-weight:var(--weight-medium);letter-spacing:-.025em;color:var(--color-navy)}
.home-page #series .section-heading .catalog-link,.home-page #episodes .section-heading .catalog-link{color:var(--color-azure-deep);text-decoration-thickness:1.5px}
.home-page .catalog-series{box-shadow:0 22px 42px -27px color-mix(in srgb, var(--color-navy) 50%, transparent)}
.home-page #episodes .catalog-episode{background:var(--color-pale-sky);border:0;border-radius:16px;overflow:hidden;box-shadow:0 18px 34px -26px color-mix(in srgb, var(--color-navy) 38%, transparent);padding:0}
.home-page #episodes .catalog-episode-copy{padding:25px 28px 28px}
.home-page #episodes .catalog-episode img{border-radius:0}
.home-page #episodes .catalog-status{color:var(--color-azure-deep)}
.home-mission{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:570px;background:var(--color-navy);color:var(--color-ivory);overflow:hidden}
.home-mission-copy{align-self:center;max-width:750px;padding:clamp(72px,8vw,118px) clamp(42px,5vw,80px) clamp(72px,8vw,118px) max(5vw,calc((100vw - 1296px)/2))}
.home-mission-copy .eyebrow{color:var(--color-gold-soft);margin-bottom:20px}
.home-mission-copy h2{font-size:var(--type-display);font-weight:var(--weight-medium);letter-spacing:-.03em;line-height:1.04;margin:0 0 28px}
.home-mission-copy>p:not(.eyebrow){max-width:560px;margin:0 0 31px;color:var(--color-ivory);font-size:var(--type-lead);line-height:1.65}
.home-mission-copy .home-primary{min-height:54px}
.home-mission-art{position:relative;min-height:570px;margin:0;background:var(--color-gold-soft);overflow:hidden}
.home-mission-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 68%}
.home-mission-art figcaption{position:absolute;top:8%;right:7%;max-width:190px;color:var(--color-navy);font-family:var(--font-display);font-size:var(--type-subheading);font-weight:var(--weight-medium);line-height:var(--leading-tight);text-align:center;transform:rotate(5deg)}
@media(min-width:761px){
  .home-page #episodes .catalog-episode-grid:has(> :only-child){grid-template-columns:minmax(0,1fr)}
  .home-page #episodes .catalog-episode-grid:has(> :only-child) .catalog-episode{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);max-width:1060px}
  .home-page #episodes .catalog-episode-grid:has(> :only-child) .catalog-episode>a,.home-page #episodes .catalog-episode-grid:has(> :only-child) .catalog-episode img{height:100%}
  .home-page #episodes .catalog-episode-grid:has(> :only-child) .catalog-episode img{object-fit:cover}
  .home-page #episodes .catalog-episode-grid:has(> :only-child) .catalog-episode-copy{align-self:center;padding:clamp(28px,4vw,55px)}
}
@media(max-width:1100px){.home-mission-copy{padding-right:40px}.home-mission-art figcaption{max-width:150px}}
@media(max-width:760px){
  .home-page #series,.home-page #episodes{padding:64px 6% 72px}
  .home-page #series .section-heading,.home-page #episodes .section-heading{display:flex;align-items:flex-start;flex-direction:column;gap:10px}
  .home-mission{grid-template-columns:1fr}
  .home-mission-copy{padding:68px 6% 72px}
  .home-mission-copy h2{font-size:var(--type-display)}
  .home-mission-art{min-height:470px}
  .home-mission-art figcaption{font-size:var(--type-subheading)}
}
