:root{--yellow:#ffc400;--red:#e21a13;--ink:#111;--paper:#f4f0e6;--muted:#cbc6b9}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0d0d0d;color:#fff;font-family:Arial,Helvetica,sans-serif}
.site-header{position:sticky;top:0;z-index:50;min-height:68px;padding:8px 4vw;background:rgba(8,8,8,.96);display:flex;align-items:center;gap:22px;border-bottom:1px solid #333}
.brand{font-weight:1000;font-size:27px;letter-spacing:-2px;text-decoration:none;color:white;white-space:nowrap}.brand b{color:var(--yellow)}
.byline{font-size:10px;line-height:1.1}.site-header nav{display:flex;gap:22px;margin-left:auto}.site-header nav a{color:white;text-decoration:none;font-size:12px;font-weight:800}
.cta{display:inline-block;background:var(--yellow);color:#111;text-decoration:none;font-weight:1000;padding:15px 22px;box-shadow:5px 5px 0 rgba(0,0,0,.28);transform:rotate(-.4deg);border:0;cursor:pointer}.cta.compact{font-size:12px;padding:12px 15px}.cta.large{font-size:20px;padding:20px 30px}
.hero{position:relative;background:#111;line-height:0}.hero-image{display:block;width:100%;height:auto;object-fit:contain}
.hero-content{position:absolute;left:24%;bottom:42px;width:min(720px,70vw)}.hero h1{margin:0;font-size:clamp(70px,11vw,150px);line-height:.72;letter-spacing:-7px;text-shadow:4px 4px 0 #000}.hero h1 span{display:block}.hero h1 b{display:block;color:var(--yellow)}
.main-tagline{font-size:clamp(17px,2.2vw,31px);font-weight:1000;margin:18px 0 8px;text-shadow:2px 2px 0 #000}
.comic-line{font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:clamp(18px,2.2vw,31px);font-weight:700}.comic-line strong{display:inline-block;background:var(--yellow);color:#111;padding:4px 12px;transform:rotate(-3deg);font-size:1.25em}.comic-line.small{font-size:22px}
.paper-section{background:var(--paper);color:#192b45;padding:55px max(5vw,30px);position:relative;background-image:radial-gradient(#d7d0c2 0.6px,transparent .6px);background-size:6px 6px}.section-label{display:inline-block;background:var(--red);padding:7px 11px;color:white;font-weight:1000;font-size:19px;transform:rotate(-1deg);margin-bottom:18px}
.film-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:48px;max-width:1180px;margin:auto}.script-title{font-family:"Comic Sans MS",cursive;font-size:52px;margin:0}.script-by{font-family:"Comic Sans MS",cursive;font-size:20px}.paper-section blockquote{font-family:"Comic Sans MS",cursive;font-size:24px;font-weight:700;margin:25px 0}.paper-section p,.why-block p,.writers-section p{font-size:17px;line-height:1.55}
.scrap{background:#e9d5aa;color:#25345b;padding:22px;align-self:start;transform:rotate(3deg);box-shadow:4px 8px 14px #0003;font-family:"Comic Sans MS",cursive;font-size:24px}.scrap h3{font-size:28px;margin:0 0 14px}.scrap div{margin:7px 0}.scrap .faustino{text-decoration:line-through;text-decoration-thickness:2px}.scrap .faustino span{color:#d51f1f;text-decoration:none;display:inline-block;margin-left:12px;font-size:28px}.scrap small{display:block;margin-top:15px;font-weight:bold}
.dark-section{padding:55px 4vw 65px;background:#111;position:relative;overflow:hidden}.dark-section h2,.why-section h2,.writers-section>h2{font-family:"Comic Sans MS",cursive;font-size:35px}
.characters{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:22px 0 35px}.character-card{background:#171717;border:2px solid #ddd;box-shadow:0 7px 16px #0008;overflow:hidden}.character-card img{width:100%;height:230px;object-fit:cover;filter:contrast(1.03)}.character-copy{padding:14px}.character-copy h3{font-family:"Comic Sans MS",cursive;font-size:32px;margin:-36px 0 10px;text-shadow:2px 2px 2px #000;position:relative}.character-copy p{min-height:86px;line-height:1.35}.read-character{width:100%;background:var(--yellow);border:0;padding:12px;font-weight:1000;cursor:pointer}
.why-section{padding:55px max(5vw,30px);background:#161616}.why-intro{max-width:1050px;margin:0 auto 35px}.why-intro h2{font-size:47px}.why-copy{max-width:1050px;margin:auto}.why-block{padding:30px 0;border-top:1px solid #444}.why-block h3{font-size:29px;color:var(--yellow);margin-top:0}.why-block p{max-width:900px}.why-block p:has(br){font-weight:800;line-height:1.8}
.writers-section{background:#ece7da;color:#171717;padding:55px max(5vw,30px)}.writer-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;max-width:1050px;margin:auto}.writer-grid h2{font-family:"Comic Sans MS",cursive;font-size:38px}
.screenplay-section{padding:55px max(5vw,30px);display:flex;justify-content:space-between;align-items:center;background:#111;border-top:8px solid var(--yellow)}.screenplay-section h2{font-size:44px;margin:5px 0}
footer{background:#050505;padding:28px 5vw;display:flex;justify-content:space-between;align-items:center;font-size:12px}footer strong{color:var(--yellow)}
.character-modal{width:min(820px,92vw);max-height:88vh;background:#f3efe4;color:#151515;border:0;padding:0;box-shadow:0 20px 70px #000}.character-modal::backdrop{background:#000c}.modal-inner{padding:42px 48px 55px}.modal-kicker{display:inline-block;background:var(--red);color:white;padding:6px 9px;font-weight:900}.modal-inner h2{font-family:"Comic Sans MS",cursive;font-size:48px;margin:10px 0 20px}.modal-inner p{font-size:17px;line-height:1.55}.close-modal{position:sticky;float:right;top:10px;margin:10px 12px 0 0;background:#111;color:white;border:0;border-radius:50%;width:38px;height:38px;font-size:25px;cursor:pointer}
@media(max-width:900px){.site-header nav,.byline{display:none}.site-header{justify-content:space-between}.hero{min-height:0}.hero-content{left:7%;width:86vw}.film-grid,.writer-grid{grid-template-columns:1fr}.scrap{max-width:310px}.characters{grid-template-columns:repeat(2,1fr)}.screenplay-section{display:block}.screenplay-section .cta{margin-top:20px}}
@media(max-width:560px){.site-header .brand{font-size:22px}.cta.compact{font-size:10px}.hero{min-height:0}.hero-content{bottom:25px}.hero h1{font-size:72px}.characters{grid-template-columns:1fr}.character-card img{height:320px}.paper-section,.why-section,.writers-section{padding-left:22px;padding-right:22px}.modal-inner{padding:32px 22px}.comic-line strong{margin-top:8px}}

/* v5 readability adjustment */
.paper-section { color:#10213a; }
.paper-section p { color:#17243a; font-weight:500; }

.contact-button{background:transparent;color:#fff;border:1px solid #777;padding:11px 15px;font-weight:900;font-size:12px;cursor:pointer;white-space:nowrap}
.contact-button:hover,.contact-button:focus{border-color:var(--yellow);color:var(--yellow)}
.contact-modal{width:min(520px,92vw);background:#f3efe4;color:#151515;border:0;padding:0;box-shadow:0 20px 70px #000}
.contact-modal::backdrop{background:#000c}
.contact-inner{padding:42px 48px 48px}
.contact-inner h2{font-family:"Comic Sans MS",cursive;font-size:44px;margin:10px 0 24px}
.contact-inner p{font-size:18px;margin:10px 0}
.contact-inner a{color:#151515;font-weight:800;text-decoration-thickness:2px}
.close-contact{position:absolute;right:12px;top:12px;background:#111;color:white;border:0;border-radius:50%;width:38px;height:38px;font-size:25px;cursor:pointer}
@media(max-width:560px){.contact-button{padding:10px 9px;font-size:10px}.contact-inner{padding:36px 22px}}

/* v8 — one top content bar */
.site-header.single-nav{display:flex;align-items:center;gap:24px}
.single-nav .main-nav{display:flex;align-items:center;gap:18px;margin-left:auto}
.single-nav .main-nav a,.single-nav .main-nav button{font-family:Arial,Helvetica,sans-serif;color:#fff;text-decoration:none;font-size:12px;font-weight:900;background:none;border:0;padding:10px 0;cursor:pointer;white-space:nowrap}
.single-nav .main-nav a:hover,.single-nav .main-nav button:hover{color:var(--yellow)}
.single-nav .main-nav .cta{color:#111;padding:12px 15px}
.single-nav .main-nav .cta:hover{color:#111}
.characters-modal{width:min(1050px,94vw);max-height:90vh;background:#111;color:#fff;border:0;padding:0;box-shadow:0 20px 70px #000}
.characters-modal::backdrop{background:#000c}
.characters-panel-inner{padding:35px}
.characters-panel-inner h2{font-family:"Comic Sans MS",cursive;font-size:42px;margin:10px 0 20px}
.characters-panel-inner img{display:block;width:100%;height:auto}
.close-characters{position:absolute;right:12px;top:12px;background:#fff;color:#111;border:0;border-radius:50%;width:38px;height:38px;font-size:25px;cursor:pointer;z-index:2}
@media(max-width:900px){
 .site-header.single-nav{align-items:flex-start}
 .single-nav .main-nav{display:flex;overflow-x:auto;gap:15px;padding-bottom:3px}
 .single-nav .main-nav a,.single-nav .main-nav button{font-size:10px}
}

/* v9 — Why Howay Day hierarchy */
.why-main-label{
  display:block;
  width:max-content;
  max-width:100%;
  margin:12px auto 34px;
  background:var(--yellow);
  color:#111;
  padding:14px 22px 11px;
  font-weight:1000;
  font-size:clamp(28px,4vw,52px);
  letter-spacing:-1.5px;
  transform:rotate(-1deg);
  box-shadow:7px 7px 0 var(--red);
  border:3px solid #111;
}


/* v13 — approved crowd bridge between Characters and Why Howay Day */
.stadium-bridge{position:relative;background:#080808;overflow:hidden}
.stadium-bridge img{display:block;width:100%;height:auto}
.stadium-bridge-link{
  position:absolute;right:2.7%;top:51%;
  width:14.2%;height:20%;
  display:block;color:transparent;font-size:1px;text-decoration:none;
}
.stadium-bridge-link:focus{outline:3px solid var(--yellow);outline-offset:3px}


/* v16 — approved master visual */
.master-visual{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  background:#050505;
  line-height:0;
  scroll-margin-top:0;
}
.master-visual>img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
}
.master-nav-hotspots{
  position:absolute;
  inset:0 0 auto 0;
  height:4.1%;
  pointer-events:none;
}
.master-nav-hotspots .hot{
  position:absolute;
  top:0;
  height:100%;
  display:block;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
}
.master-nav-hotspots .story{left:22.5%;width:10%}
.master-nav-hotspots .why{left:34.8%;width:14%}
.master-nav-hotspots .characters{left:50.8%;width:11%}
.master-nav-hotspots .writers{left:63.5%;width:11%}
.master-nav-hotspots .contact{left:76.5%;width:8%}
.master-nav-hotspots .screenplay{left:86%;width:12.5%}
.master-nav-hotspots .hot:focus-visible,
.master-screenplay-hotspot:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:-3px;
}
.characters-target{
  position:absolute;
  left:0;
  top:64%;
  width:1px;
  height:1px;
  scroll-margin-top:15px;
}
.master-screenplay-hotspot{
  position:absolute;
  right:1.5%;
  bottom:2.5%;
  width:17%;
  height:7%;
  display:block;
}
#why{margin-top:0}