/* Das Egg — single-page homepage. Black & white, Montserrat, no buttons/nav. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{ --ink:#1a1a1a; --paper:#fff; --muted:#6b6b6b; --rule:#e6e6e6; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Montserrat',-apple-system,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}

/* Masthead */
.masthead{display:flex;justify-content:center;align-items:center;padding:2.5rem 1.5rem 1.5rem;border-bottom:1px solid var(--rule)}
.logo{width:min(320px,64vw);height:auto;display:block}

/* Carousel of stills */
.carousel{position:relative;max-width:1100px;margin:2.5rem auto 0;padding:0 1.5rem}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:center;display:block;color:#fff;aspect-ratio:16/10;background:#000}
.slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s ease}
.slide:hover img{transform:scale(1.05);opacity:.55}
.slide-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.2em;font-size:.9rem;font-weight:600;opacity:0;transition:opacity .3s;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.slide:hover .slide-label{opacity:1}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:rgba(255,255,255,.9);color:var(--ink);font-size:26px;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.arrow.prev{left:34px}.arrow.next{right:34px}
.scroll-cue{text-align:center;margin:2.25rem 0 .4rem;color:var(--muted);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500}

/* Shared video wrapper */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Trailer grid 3x2 */
.trailers{max-width:1100px;margin:1.5rem auto 3rem;padding:0 1.5rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem}
.tile{margin:0}
.tile figcaption{margin-top:.7rem;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:600;text-align:center}

/* Section titles */
.section-title{text-align:center;text-transform:uppercase;letter-spacing:.15em;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:1.5rem}

/* EG reel */
.reel{max-width:900px;margin:3rem auto;padding:0 1.5rem}
.video-wrap.wide{max-width:900px;margin:0 auto}

/* Understudies grid */
.understudies{max-width:1100px;margin:3rem auto;padding:0 1.5rem}
.episodes{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem}
.episode{margin:0}
.episode figcaption{margin-top:.7rem;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:600;text-align:center}

/* Footer */
.foot{display:flex;justify-content:center;padding:2rem 1.5rem;border-top:1px solid var(--rule);margin-top:2rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}

@media (max-width:820px){
  .grid,.episodes{grid-template-columns:repeat(2,1fr)}
  .arrow.prev{left:24px}.arrow.next{right:24px}
}
@media (max-width:520px){
  .grid,.episodes{grid-template-columns:1fr}
  .arrow{width:40px;height:40px;font-size:22px}
}