/* ===== Eye to Eye Films design tokens (sampled from logo.jpg) ===== */
:root{
  --beige:#f4eede;        /* sampled background */
  --beige-2:#ebe3cf;      /* card / panel tint */
  --beige-3:#fbf8f0;      /* inputs */
  --gold:#a2855b;         /* sampled gold – rules, film strip, ornaments (3.0:1, decorative/large only) */
  --gold-ink:#745f41;     /* gold for heading text – 5.25:1 on beige (AA) */
  --teal:#4c757c;         /* sampled film-strip arc – decorative */
  --teal-ink:#406369;     /* links/buttons – 5.65:1 on beige; white on it 6.55:1 */
  --teal-hover:#2f4b50;
  --navy:#111926;         /* sampled wordmark – body text 15.2:1 */
  --navy-soft:#3a4556;    /* secondary text */
  --font-display:"Cinzel",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --space:clamp(4rem,9vw,8rem);
  --maxw:1160px; --radius:4px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--beige);color:var(--navy);font:400 1.0625rem/1.7 var(--font-body)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,.wordmark{font-family:var(--font-display);color:var(--gold-ink);font-weight:700;letter-spacing:.06em;line-height:1.15}
h1{font-size:clamp(2rem,6vw,4rem);margin:.4em 0}
h2{font-size:clamp(1.6rem,4vw,2.5rem);margin:0 0 1.2em;text-align:center}
h3{font-size:1.15rem;margin:.2rem 0}
a{color:var(--teal-ink);text-underline-offset:3px}a:hover{color:var(--teal-hover)}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--beige-3);padding:.5rem 1rem}
.wrap{max-width:var(--maxw);margin:auto;padding:var(--space) 1.25rem}
.kicker{font:600 .78rem var(--font-body);letter-spacing:.35em;text-transform:uppercase;color:var(--teal-ink)}
.lede{font-size:1.15rem;color:var(--navy-soft);max-width:40rem;margin-inline:auto}
.small{font-size:.85rem;color:var(--navy-soft)}

/* nav */
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 1.25rem;max-width:var(--maxw);margin:auto}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{width:52px;border-radius:50%}
.wordmark{font-size:1rem;color:var(--navy);letter-spacing:.18em}.wordmark span{color:var(--gold-ink)}
.menu{background:none;border:1px solid var(--teal-ink);color:var(--teal-ink);padding:.45rem .9rem;font:600 .8rem var(--font-body);border-radius:var(--radius)}
#links{display:none;width:100%;flex-direction:column}#links.open{display:flex}
#links a{text-decoration:none;color:var(--navy);font:600 .8rem var(--font-body);letter-spacing:.18em;text-transform:uppercase;padding:.6rem 0;border-bottom:1px solid var(--beige-2)}
#links a:hover,#links a[aria-current]{color:var(--teal-ink)}

/* cathedral echo */
.cathedral{position:relative;overflow:hidden}
.cathedral::after{content:"";position:absolute;inset:auto 0 0;height:min(30vw,240px);background:url(assets/img/cathedral.svg) bottom center/contain no-repeat;opacity:.06;pointer-events:none}

/* hero */
.hero{text-align:center;padding:1rem 1.25rem calc(var(--space) + 2rem)}
.hero-logo{width:min(70vw,340px);margin:1rem auto 0;mix-blend-mode:multiply}
.hero-media{display:none}/* PLACEHOLDER showreel slot – see DESIGN.md */
.cta{display:flex;flex-direction:column;gap:.75rem;align-items:center;margin-top:2rem}
.btn{display:inline-block;padding:.9rem 1.8rem;background:var(--teal-ink);color:#fff;text-decoration:none;border:2px solid var(--teal-ink);border-radius:var(--radius);font:600 .8rem var(--font-body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--teal-hover);border-color:var(--teal-hover);color:#fff}
.btn.ghost{background:transparent;color:var(--teal-ink)}.btn.ghost:hover{background:var(--teal-ink);color:#fff}

/* page header (inner) */
.page-head{text-align:center;padding:3rem 1.25rem 6rem}

/* film-strip divider */
.strip{height:22px;max-width:var(--maxw);margin:0 auto;border-block:2px solid var(--gold);
  background:repeating-linear-gradient(90deg,transparent 0 10px,var(--gold) 10px 18px) center/100% 6px no-repeat}

/* films */
.featured,.grid{display:grid;gap:2rem}
.featured{margin-bottom:2rem}
.card{background:var(--beige-2);border:1px solid #ddd2b8;border-radius:var(--radius);overflow:hidden;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px #11192618}
.info{padding:1.1rem 1.3rem 1.4rem}
.meta{font:600 .75rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 .5rem}
.ph{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#e6dcc4 0 12px,#efe7d4 12px 24px);color:var(--navy-soft);font:600 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.2em}
.poster{aspect-ratio:16/9}.ph-t{color:var(--navy-soft);font-size:.85rem;font-style:italic}

/* about */
.about{display:grid;gap:2.5rem}.about h2{text-align:left}.portrait{aspect-ratio:3/4;border-radius:var(--radius)}
.awards{list-style:none;padding:0}.awards li{padding:.55rem 0 .55rem 1.6rem;border-bottom:1px solid var(--beige-2);position:relative}
.awards li::before{content:"✦";position:absolute;left:0;color:var(--gold)}

/* gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.gal .ph{aspect-ratio:4/3;border-radius:var(--radius)}

/* contact */
.contact{text-align:center}
form{display:grid;gap:1.1rem;max-width:620px;margin:2rem auto 0;text-align:left}
label{display:grid;gap:.35rem;font:600 .75rem var(--font-body);letter-spacing:.14em;text-transform:uppercase}
input,textarea,select{background:var(--beige-3);border:1px solid #cbbd9d;color:var(--navy);padding:.85rem;font:1rem var(--font-body);border-radius:var(--radius)}
input:focus,textarea:focus,select:focus{border-color:var(--teal-ink)}
.foot{text-align:center;color:var(--navy-soft);font-size:.85rem;padding-block:3rem}

/* ≥ 760px */
@media(min-width:760px){
  .menu{display:none}
  #links{display:flex!important;flex-direction:row;width:auto;gap:2rem}#links a{border:0;padding:0}
  .cta{flex-direction:row;justify-content:center}
  .featured{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:1fr 1.5fr;align-items:start}
  .gal{grid-template-columns:repeat(3,1fr)}
  .home .nav{justify-content:center}.home .brand{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-logo{-webkit-mask:radial-gradient(closest-side,#000 82%,transparent 100%);mask:radial-gradient(closest-side,#000 82%,transparent 100%)}
.cathedral::after{opacity:.045}
.home .brand img{display:none}
.motto{font:italic 600 1rem/1.4 var(--font-display);color:var(--teal-ink);text-align:center;letter-spacing:.04em;margin:.6rem auto 0}.motto + .cta{margin-top:1.4rem}
/* intro lightbox */
.intro-cta{margin-top:.75rem}
.lightbox{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:rgba(244,238,222,.94)}
.lightbox[hidden]{display:none}
.lb-inner{position:relative;width:min(92vw,1100px)}
.lightbox.portrait .lb-inner{width:min(88vw,calc(80vh*9/16))}
.lb-inner video{width:100%;display:block;border:2px solid var(--gold);border-radius:var(--radius);background:var(--beige-2);box-shadow:0 20px 60px #11192630}
.lb-close{position:absolute;top:-3rem;right:0;width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid var(--teal-ink);background:var(--teal-ink);color:#fff;font:1.6rem/1 var(--font-body);cursor:pointer}
.lb-close:hover{background:var(--teal-hover)}
.lightbox{width:100vw;height:100vh;height:100dvh;padding:3.75rem 1rem 1rem}
.lb-inner video{max-height:calc(100dvh - 5.5rem);object-fit:contain}
.lightbox.portrait .lb-inner{width:min(88vw,calc((100dvh - 5.5rem)*9/16))}
/* real content: YouTube facade, gallery, socials */
.yt{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;aspect-ratio:16/9;background:var(--beige-2)}
.yt img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:3.4rem;height:3.4rem;border-radius:50%;background:var(--teal-ink);color:#fff;display:grid;place-items:center;font-size:1.2rem;box-shadow:0 6px 20px #11192640;transition:background .2s}
.yt:hover .yt-play,.yt:focus-visible .yt-play{background:var(--teal-hover)}
.yt-frame{width:100%;aspect-ratio:16/9;border:0;display:block}
.src{font-size:.75rem;color:var(--navy-soft);margin:.6rem 0 0}
.card details{font-size:.85rem;margin-top:.5rem}.card summary{cursor:pointer;color:var(--teal-ink);font-weight:600}
.awlist{padding-left:1.1rem;margin:.4rem 0}
img.portrait{width:100%;height:auto;object-fit:cover;border:2px solid var(--gold)}
.gal figure{margin:0}.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);border:1px solid #ddd2b8}
.gal figcaption{font-size:.78rem;color:var(--navy-soft);margin-top:.35rem;line-height:1.35}
.rad img{width:100%;margin-top:2rem;border-radius:var(--radius);border:2px solid var(--gold)}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;margin:1rem 0}
.social a{font-weight:600;font-size:.82rem}
@media(min-width:1000px){.gal{grid-template-columns:repeat(5,1fr)}}
/* posters, laurels */
.poster-card{display:flex;flex-direction:column}
.poster-img,.yt-poster img{width:100%;aspect-ratio:800/1131;object-fit:cover}
.yt-poster{aspect-ratio:800/1131}
.sub{display:block;font-size:.72em;color:var(--navy-soft);letter-spacing:.04em;margin-top:.2rem}
.laurel-mini{list-style:none;padding:0;margin:.8rem 0;font-size:.85rem}
.laurel-mini li{padding:.3rem 0;border-bottom:1px solid #ddd2b8}
.laurel-mini b{font:600 .68rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin-right:.4rem}
.center{text-align:center}
.laurels{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:1.25rem}
.laurel{position:relative;text-align:center;padding:1.1rem 3rem;min-height:7rem;display:flex;flex-direction:column;justify-content:center;gap:.15rem}
.laurel::before,.laurel::after{content:"";position:absolute;top:50%;width:2.4rem;height:5.6rem;transform:translateY(-50%);background:url("assets/img/laurel.svg") center/contain no-repeat;opacity:.9}
.laurel::before{left:0}.laurel::after{right:0;transform:translateY(-50%) scaleX(-1)}
.lk{font:600 .66rem var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--teal-ink)}
.laurel.win .lk{color:var(--gold-ink)}
.lf{font:700 .95rem/1.25 var(--font-display);color:var(--navy);letter-spacing:.03em}
.lp{font-size:.8rem;font-style:italic;color:var(--navy-soft)}
@media(min-width:560px){.laurels{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.laurels{grid-template-columns:repeat(4,1fr)}}
@media(max-width:559px){.laurels{grid-template-columns:1fr 1fr;gap:.6rem}.laurel{padding:.6rem 1.5rem;min-height:5.5rem}.laurel::before,.laurel::after{width:1.3rem;height:3.8rem}.lf{font-size:.78rem}.lk{font-size:.56rem;letter-spacing:.12em}.lp{font-size:.7rem}}
.gal-h{text-align:center;font-size:1rem;margin:2.5rem 0 1rem}.gal-h:first-of-type{margin-top:0}
.gal.stills img{aspect-ratio:16/9}
@media(min-width:1000px){.gal.stills{grid-template-columns:repeat(3,1fr)}}
/* stills strip + lightbox */
.stills-strip{list-style:none;padding:0;margin:.9rem 0 .2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.still-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius);overflow:hidden}
.still-btn img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .25s}
.still-btn:hover img{transform:scale(1.04)}
.gal .still-btn img{aspect-ratio:16/9;border:1px solid #ddd2b8}
.still-lb img{width:100%;max-height:calc(100dvh - 9rem);object-fit:contain;border:2px solid var(--gold);border-radius:var(--radius);background:var(--beige-2)}
.still-cap{text-align:center;font-size:.85rem;color:var(--navy-soft);margin:.6rem 0 0}
/* DrDidsTV channel, premiere badge, characters */
.channel{display:grid;gap:2rem;align-items:center;text-align:center}
.channel h2{margin-bottom:.6em}
.channel-badge{width:min(60vw,260px);margin:auto;border-radius:50%;box-shadow:0 0 0 4px var(--beige),0 0 0 6px var(--gold)}
.ch-cta{margin-top:1.2rem}
@media(min-width:760px){.channel{grid-template-columns:auto 1fr;text-align:left}.channel h2{text-align:left}.ch-cta{justify-content:flex-start}}
.mr-poster{position:relative}.mr-poster img{width:100%;height:100%;object-fit:cover}
.premiere-badge{position:absolute;left:.7rem;bottom:.7rem;background:var(--teal-ink);color:#fff;font:600 .68rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;border-radius:var(--radius);border:1px solid var(--gold)}
.gal.chars{grid-template-columns:1fr}
.gal.chars img{aspect-ratio:3/2;object-fit:cover}
@media(min-width:760px){.gal.chars{grid-template-columns:repeat(3,1fr)}}
.footer-splash img{width:110px;margin:1.2rem auto .4rem}
.lowres{font-style:italic}
.mv-featured .poster,.mv-featured .yt{aspect-ratio:16/9}
@media(min-width:1000px){.gal.chars{grid-template-columns:repeat(3,1fr)}}
.gal.chars img{object-fit:contain;background:#fff}
.premiere-badge{top:.7rem;bottom:auto}
@media(max-width:559px){.premiere-badge{font-size:.56rem;padding:.3rem .5rem;top:.5rem;left:.5rem}}
.btn.sm{padding:.55rem 1rem;font-size:.7rem;letter-spacing:.12em}
.listen{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.8rem 0 1.2rem}.listen span{font:600 .72rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink,#745f41);margin-right:.3rem}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.4rem;margin-top:1.2rem}
.book{background:#fffaf0;border:1px solid #e3d7bd;border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column}
.book img,.book-ph{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:calc(var(--radius) - 2px)}
.book-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#406369;color:#f4eede;padding:1rem}.book-ph span{font:600 1.15rem 'Cinzel',serif}.book-ph small{opacity:.8;margin-top:.4rem}
.book h3{font-size:1rem;margin:.8rem 0 .2rem}.book .meta{font-size:.78rem;margin:0 0 .8rem}.book .buy{margin-top:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.book .still-btn{padding:0;border:0;background:none;cursor:zoom-in;width:100%}.bk-note{font-size:.82rem;margin:0 0 .8rem}
.bk-extras{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:0 0 .8rem}.bk-extras img{aspect-ratio:2000/1545;object-fit:cover;width:100%;border-radius:4px}.book .still-btn img{display:block}
.ph-poster{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#406369,#111926);color:#f4eede;font:600 1.4rem 'Cinzel',serif;text-align:center;padding:1rem}
.mini-track{margin-top:1.6rem;padding:1rem 1.2rem;border:1px solid #e3d7bd;border-radius:var(--radius);background:#fffaf0}.mini-track h3{margin:0;font-size:1.05rem}.mini-track .meta{font:500 .72rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;margin-left:.4rem}.mini-track .listen{margin:.6rem 0 0}
.book .yt{aspect-ratio:16/9;width:100%}.book .yt img{width:100%;height:100%;object-fit:cover}.yt-cap{font:600 .72rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin:.4rem 0 0}
.card a.poster{display:block;aspect-ratio:16/9;overflow:hidden}.card a.poster img{width:100%;height:100%;object-fit:cover}
.eps{margin:.2rem 0 .8rem;font-size:.85rem}.eps summary{cursor:pointer;color:var(--teal-ink);font-weight:600;letter-spacing:.06em}.eps ol{margin:.5rem 0 0 1.2rem;padding:0}.eps li{margin:.15rem 0}
.mini-track.has-vid{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:1.2rem;align-items:start}.mini-track.has-vid .yt{aspect-ratio:16/9;width:100%}.mini-track.has-vid .yt img{width:100%;height:100%;object-fit:cover}.mini-track.has-vid p{margin:.5rem 0 0}@media(max-width:700px){.mini-track.has-vid{grid-template-columns:1fr}}
.mini-track .sub{margin:.2rem 0 0;color:var(--gold-ink,#745f41)}.mini-track.has-vid + .mini-track{margin-top:1rem}
.series{margin-top:1rem;font-size:.9rem}.series span{font-weight:600;color:var(--gold-ink,#745f41)}
.gal.art img{aspect-ratio:4/5;object-fit:contain;background:#ece4d2;width:100%;height:auto}
.gal.art-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.gal.art-grid figure{margin:0;display:flex;flex-direction:column}
.gal.art-grid .still-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal.art-grid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#ece4d2;border-radius:var(--radius)}
.gal.art-grid figcaption{font-size:.74rem;line-height:1.35;margin-top:.4rem}
@media(max-width:900px){.gal.art-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.gal.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gal.art-grid img{object-fit:cover;background:none}
.books{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.book.poems{grid-column:1}
.book img,.book .yt,.book .book-ph{aspect-ratio:1/1;width:100%;object-fit:cover}
.book .yt img{aspect-ratio:1/1;height:100%}
.book .yt-cap{margin:.35rem 0 0}
.book h3{min-height:3.6em}
.book .meta{margin-bottom:.7rem}
@media(max-width:900px){.books{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.books{grid-template-columns:repeat(2,minmax(0,1fr))}.book h3{min-height:0}}
.book.poems img{object-position:left center}.book .buy .btn{flex:1 1 auto;text-align:center;padding-left:.6rem;padding-right:.6rem}