/* ---------------------------------------------------------------
   kennygeiler.com
   Header styling modeled on antontammi.com:
   Maison Neue-style grotesk, 15.2px base, 700 nav/logo, #131313 on #FFF3E6 (warm cream)
   --------------------------------------------------------------- */

:root {
  --ink: #131313;
  --paper: #FFF3E6;
  --gutter: 140px;
  --base: 15.2px;
  --pad-y: 30.4px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* iOS Safari defaults this to `auto`, which inflates type inside blocks it
     decides are too narrow. That resizes text away from what is written here
     and can push a block past the viewport. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Nothing should scroll sideways. `clip` rather than `hidden` so this does
     not silently become a scroll container. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--base);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--paper);
}

a { color: inherit; text-decoration: none; }

/* Addresses are one long unbreakable token; let them break rather than
   stretch their container. */
.email, .screener__note a { overflow-wrap: anywhere; }

/* ---------------- Header ---------------- */

.header {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin: 0 var(--gutter);
  padding: var(--pad-y) 0;
  flex-wrap: wrap;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 auto 0 0;
  order: 1;
}
.logo span { border-bottom: 1px solid var(--ink); }

/* Transparent to layout on wide screens: the nav and the secondary group lay
   out as direct children of .header, exactly as they did before the panel
   existed. It only becomes a box under 1024px. */
/* Both are transparent to layout here, so the nav, the company mark and the
   address all act as direct children of .header and keep their own places on
   its flex lines. `display: contents` lifts one level only, which is why the
   secondary group needs it too. */
.header__panel,
.header__secondary { display: contents; }

.header__secondary .menu-item { order: 2; }

.header__contact {
  order: 3;
  flex-basis: 100%;
  margin-top: 2px;
}

.email {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.header--nav {
  order: 1;
  display: flex;
  gap: 38px;
  margin: 0 38px 0 0;
  flex-wrap: wrap;
}
.header--nav a,
.header__secondary .menu-item {
  display: flex;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: var(--pad-y) 15.2px;
  margin: calc(var(--pad-y) * -1) -15.2px;
  align-items: flex-start;
}
/* One hover language for the whole chrome: links dim, nothing moves. Anything
   that changes an element's box on hover shifts the layout under the cursor
   and flickers. */
.header a,
.footer a { transition: opacity 0.15s ease; }

.header a:hover,
.footer a:hover { opacity: 0.55; }

.header a:active,
.footer a:active { opacity: 0.4; }

.header a:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  opacity: 1;
}

/* Production-company item: animated mark + label, like ANT POST on antontammi.com */
.menu-item { align-items: center; gap: 8px; }
.menu-item__media { display: block; line-height: 0; }
.menu-item__media img {
  display: block;
  height: 22px;
  width: auto;
}
.menu-item__label { display: block; white-space: nowrap; }

.menu-toggle {
  display: none;
  order: 2;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.menu-toggle:hover { opacity: 0.55; }
.menu-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  opacity: 1;
}

/* ---------------- Main ---------------- */

main {
  margin: 0 var(--gutter);
  padding-bottom: 60px;
}

/* ---------------- Title card ----------------
   Left: the banner artwork as an image. Right: the credits as live text, so
   they stay editable. Credit type is sized in cqw on wide screens so it tracks
   the banner beside it, and in rem once the two stack. */

.titlecard {
  container-type: inline-size;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4cqw;
  margin: 10px 0 clamp(40px, 6vw, 80px);
}

.titlecard p { margin: 0; }
.titlecard b { font-weight: 800; }
.titlecard i { font-style: italic; }

/* Left: banner */

.tc-banner {
  flex: 0 1 58%;
  min-width: 0;
}
.tc-credits, .tc-banner, .screener__intro { min-width: 0; }

.tc-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* Lets a white-background export sit on the page ground as cleanly as a
     transparent one: white multiplies away, the black and red do not. */
  mix-blend-mode: multiply;
}

/* Right: credits */

.tc-credits {
  flex: 0 0 auto;
  text-align: right;
  font-size: 1.32cqw;
  line-height: 1.33;
}

/* Hero trailer */
.hero-video { margin-bottom: clamp(40px, 6vw, 80px); }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-frame video,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  z-index: 1;
}
/* Shown only when the <video> fails to load a source */
.video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 20px;
  z-index: 2;
}
.video-fallback code { font-weight: 400; opacity: 0.7; margin-left: 0.4em; }
.video-fallback[hidden] { display: none; }

/* Screener request */

.screener {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: clamp(24px, 3.5vw, 40px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.screener__title {
  margin: 0;
  font-size: clamp(22px, 5.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.15;
}

.screener__note {
  margin: 8px 0 0;
  max-width: 34em;
  opacity: 0.75;
}
/* Permanent rule rather than one added on hover: anything that changes an
   element's box under the cursor shifts the line and flickers. */
.screener__note a { border-bottom: 1px solid currentColor; }
.screener__note a:hover { opacity: 0.6; }
.screener__note a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.screener__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field label {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
  opacity: 0.7;
}

.field input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 6px 0;
  min-width: 0;
  transition: opacity 0.15s ease;
}
.field input::placeholder { opacity: 0.45; }
.field input:focus { outline: 0; border-bottom-width: 2px; padding-bottom: 5px; }
.field input:focus-visible { outline: 0; }

/* Kept in the tab order for bots, out of the way for everyone else */
.screener__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.screener__submit {
  grid-column: 1 / -1;
  justify-self: start;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 13px 26px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.screener__submit:hover { background: var(--paper); color: var(--ink); }
.screener__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.screener__submit:disabled { opacity: 0.45; cursor: default; }
.screener__submit:disabled:hover { background: var(--ink); color: var(--paper); }

.screener__status {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  min-height: 1.35em;
}
.screener__status.is-error { color: #c0392b; }
.screener__status.is-ok { font-weight: 700; }

/* ---------------- Theater mode ----------------
   While the trailer is playing the page goes black and everything else steps
   back, so the only lit thing on screen is the video. Restored on pause. */

html, body { transition: background-color 0.55s ease; }

html.is-playing,
html.is-playing body { background: #000; }

html.is-playing .header,
html.is-playing .titlecard,
html.is-playing .screener,
html.is-playing .footer {
  opacity: 0;
  pointer-events: none;
}

.header, .titlecard, .screener, .footer { transition: opacity 0.55s ease; }

html.is-playing .video-frame { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html, body,
  .header, .titlecard, .screener, .footer { transition: none; }
}

/* ---------------- Footer ---------------- */

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 var(--gutter);
  padding: var(--pad-y) 0;
}
.footer a { font-weight: 700; letter-spacing: 0.02em; }

/* ---------------- Responsive ---------------- */

@media (max-width: 1200px) {
  :root { --gutter: 60px; }
  .header--nav { gap: 24px; }
}

/* The nav runs out of room well before the page does, so it collapses first.
   As a panel rather than an expanding band: a menu that pushes the page down
   ends up competing with whatever it pushed, which is what makes it feel
   cramped. Full screen, it has only itself to arrange. */
@media (max-width: 1024px) {
  .menu-toggle {
    display: block;
    position: relative;
    z-index: 60;
    font-size: 1.05rem;
    line-height: 1;
  }
  body.nav-open .menu-toggle { font-size: 1.45rem; margin-top: -0.2rem; }

  .header__panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--paper);
    padding: 84px var(--gutter) calc(var(--gutter) + 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .header__panel { display: flex; flex-direction: column; }
  body.nav-open { overflow: hidden; }

  /* Keep the name above the panel so the close control has something to sit
     opposite, and the menu stays anchored to whose site it is */
  body.nav-open .logo { position: relative; z-index: 60; }

  /* Primary: where you can actually go on this site */
  .header--nav {
    order: 1;
    flex-direction: column;
    gap: 0;
    margin: 0;
  }
  .header--nav a {
    padding: 8px 0;
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    /* Long labels wrap at this size; balance keeps the break even instead of
       stranding one word on the second line */
    text-wrap: balance;
  }

  /* Secondary: an address and a link off this site. Set quietly, pushed to the
     bottom, and small enough that the mark sits beside its label instead of
     being driven off the edge by a 25-character company name. */
  .header__secondary {
    /* Must re-declare: it is `display: contents` on wide screens, and a
       contents box generates no box, so margin-top: auto would do nothing */
    display: flex;
    order: 2;
    margin-top: auto;
    padding-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .header__secondary .menu-item {
    padding: 0;
    margin: 0;
    align-items: center;
    /* On the narrowest phones the label plus mark exceed the column; let the
       mark drop under the label rather than spill past the edge, where
       overflow-x: clip would silently cut it off */
    flex-wrap: wrap;
    /* align-items: flex-start on the parent sizes this to max-content, which
       would never wrap; bound it by the column so it can */
    max-width: 100%;
    gap: 6px 10px;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
  }
  .menu-item__media { order: 2; }
  .menu-item__media img { height: 1.15em; }

  .header__contact { order: 3; flex-basis: auto; margin: 0; }
  .header__contact .email {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --pad-y: 20px; }

  /* Banner takes the full width; credits drop underneath at a readable size
     rather than scaling down with the artwork */
  .titlecard {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .tc-banner { flex: 0 0 auto; }
  /* Billing-block setting: role on its own line, names beneath it. Inline,
     the names wrapped mid-phrase and left orphans hanging under their role. */
  .tc-credits {
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .tc-credits p + p { margin-top: 11px; }
  .cr-role { display: block; }
  .cr-names { display: block; text-wrap: pretty; }

  .screener { grid-template-columns: 1fr; gap: 22px; }
  .screener__form { grid-template-columns: 1fr; }
  .screener__submit { justify-self: stretch; text-align: center; padding: 16px 26px; }
  /* 16px keeps iOS Safari from zooming the page when a field takes focus */
  .field input { font-size: 16px; padding: 10px 0; }

  .footer { flex-direction: column; gap: 6px; }
}