/* Kristin Lehman Custom Theme — everything that is not a token
   ============================================================================
   Tokens live in colors_and_type.css, which loads first and is a byte-identical
   copy of ../../Design Guidelines/colors_and_type.css.

   🔴 This file must never define anything the token file owns: --kl-*. It loads
   second and would silently win. Add new tokens to the canonical file instead.

   ⚠️ Bump KL_STYLE_VER in functions.php on every change here. Browsers and
   Kinsta's CDN cache by ?ver= query string, not by file content, so a correct
   upload can render stale.

   A handful of one-off geometry values stay literal on purpose: the "+" glyph
   size, the lightbox close ×, and the fixed pixel widths of the nav toggle,
   play button and reel items. They appear exactly once and naming them would
   add indirection without adding meaning. Every colour, family, weight,
   line-height and letter-spacing is tokenised.
   ============================================================================ */

/* ---------------------------------------------------------------
   Fonts — self-hosted Poppins (never a Google Fonts <link>)
   Lives here rather than in colors_and_type.css because these paths are
   theme-relative and only resolve from inside the theme folder.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   Reset — :where() so it never outweighs component rules
   --------------------------------------------------------------- */
:where(html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd) {
  margin: 0;
  padding: 0;
}
*, *::before, *::after { box-sizing: border-box; }

/* 🔴 `height: auto` is load-bearing, not tidiness. WordPress emits real width and
   height attributes on every image it renders. Scaling the width to 100% without
   releasing the height leaves the attribute height in force, which stretches or
   squashes the picture. This is what warped the closing photo. */
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; background: none; border: none; }
a { color: inherit; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: var(--kl-scroll-offset); }

body {
  background: var(--kl-bg);
  color: var(--kl-ink);
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-light);
  font-size: var(--kl-type-body);
  line-height: var(--kl-lh-body);
  -webkit-font-smoothing: antialiased;
}

.container,
.section__inner {
  max-width: var(--kl-container);
  margin-inline: auto;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-space-md);
  padding: 1.5% 3%;
  background: var(--kl-bg);
  position: relative;
}

.site-header__logo a { display: block; }
.site-header__logo img {
  display: block;
  height: auto;
  max-width: 220px;
  width: auto;
}

.site-header__menu {
  display: flex;
  align-items: center;
  gap: var(--kl-space-lg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.site-nav__list a {
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-bold);
  font-size: var(--kl-type-label);
  letter-spacing: var(--kl-ls-label);
  text-transform: uppercase;
  line-height: var(--kl-lh-label);
  color: var(--kl-accent);
  text-decoration: none;
  transition: color var(--kl-dur-fast) var(--kl-ease-std);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--kl-nav-hover); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--kl-ink);
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kl-accent);
  color: var(--kl-on-dark);
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-bold);
  font-size: var(--kl-type-label);
  letter-spacing: var(--kl-ls-label);
  text-transform: uppercase;
  line-height: var(--kl-lh-label);
  padding: 18px 40px;
  border-radius: var(--kl-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--kl-dur-fast) var(--kl-ease-std);
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 87vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  background-color: var(--kl-ink);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: var(--kl-space-lg) 5%;
}

.hero__inner { max-width: var(--kl-hero-inner); }

.hero__eyebrow {
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-heavy);
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: var(--kl-ls-label);
  text-transform: uppercase;
  line-height: var(--kl-lh-body);
  color: var(--kl-ink);
  text-shadow: 0 0 37px var(--kl-hero-eyebrow-glow);
  margin-bottom: var(--kl-space-sm);
}

.hero__title {
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-semibold);
  font-size: clamp(48px, 11vw, 131px);
  line-height: var(--kl-lh-tight);
  text-transform: uppercase;
  color: var(--kl-hero-title-fill);
  -webkit-text-stroke: .5px var(--kl-ink);
  margin: 0;
}

/* ---------------------------------------------------------------
   Sections (shared rhythm)
   --------------------------------------------------------------- */
.section { padding: var(--kl-space-lg) 5%; }

.section-heading {
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-bold);
  font-size: clamp(22px, 2.4vw, 30px);
  text-transform: uppercase;
  line-height: var(--kl-lh-body);
  color: var(--kl-ink);
  margin-bottom: var(--kl-space-md);
}
.section-heading--center { text-align: center; }

/* ---------------------------------------------------------------
   About
   --------------------------------------------------------------- */
/* Three columns, as on the live site: the heading and lead share the first
   column, then one column per body paragraph. `align-items: start` is what puts
   the body paragraphs level with the ABOUT heading while the lead sits below it,
   which is how the original reads. `auto-fit` means the copy can gain or lose a
   paragraph without this layout needing to know. */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--kl-space-lg);
  align-items: start;
}

.about__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kl-space-md) var(--kl-space-lg);
  align-items: start;
}

.about__lead {
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-regular);
  font-size: clamp(18px, 2vw, 24px);
  line-height: var(--kl-lh-lead);
  color: var(--kl-ink);
  margin-bottom: 0;
}
.about__body p {
  font-size: var(--kl-type-body);
  font-weight: var(--kl-fw-light);
  line-height: var(--kl-lh-body);
  color: var(--kl-ink);
  margin-bottom: var(--kl-space-sm);
}
.about__body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Work — filmography grid
   --------------------------------------------------------------- */
.credits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kl-space-md);
  margin-top: var(--kl-space-lg);
  margin-bottom: var(--kl-space-lg);
}

/* Posters keep their own aspect ratio and their own colour. The live site does
   neither a uniform crop nor a grayscale treatment here. */
.credit__image {
  width: 100%;
  height: auto;
  margin-bottom: var(--kl-space-sm);
}

/* A single rust rule under the whole box, not a border around it. */
.credit details {
  border-bottom: 3px solid var(--kl-accent);
}

.credit summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-space-sm);
  padding: var(--kl-space-sm) var(--kl-space-md);
  background: var(--kl-toggle-title-bg);
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-bold);
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: var(--kl-ls-summary);
  text-transform: uppercase;
  line-height: var(--kl-lh-summary);
  color: var(--kl-accent);
}
.credit summary::-webkit-details-marker { display: none; }

/* Title and episode note read as one wrapping text run, as on the live site,
   rather than being pushed to opposite ends of the bar. */
.credit__label { min-width: 0; }
.credit__note { white-space: nowrap; }

/* Rust disc with a white arrow: right when closed, rotated to point down when
   open. Drawn as an inline SVG rather than a glyph because the self-hosted
   Poppins files are subsets and do not carry arrow characters. */
.credit__toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kl-accent);
  color: var(--kl-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--kl-dur-fast) var(--kl-ease-std);
}
.credit__toggle svg { width: 14px; height: 14px; }
.credit details[open] .credit__toggle { transform: rotate(90deg); }

.credit__content {
  padding: var(--kl-space-md);
  background: var(--kl-toggle-content-bg);
  font-size: var(--kl-type-body);
  font-weight: var(--kl-fw-light);
  line-height: var(--kl-lh-body);
}
/* "Season 12", not "SEASON 12". The live site sets these in sentence case. */
.credit__content h6 {
  font-weight: var(--kl-fw-bold);
  margin-bottom: 6px;
  margin-top: var(--kl-space-sm);
}
.credit__content h6:first-child { margin-top: 0; }

/* Episode lists are bulleted on the live site. The :where() reset zeroes list
   padding at zero specificity, so both properties have to be restated here.
   Losing bullets inside post content is a known trap in this workspace:
   WORKSPACE-file-management.md, Global Open Issues #6. */
.credit__content ul {
  list-style: disc;
  padding-left: 1.35em;
  margin-bottom: var(--kl-space-sm);
}
.credit__content li { margin-bottom: 4px; }

/* ---------------------------------------------------------------
   Watch Full Episodes — video reel
   --------------------------------------------------------------- */
.reel-heading { margin-top: var(--kl-space-lg); }

/* Carousel: three portrait slides across, chevrons overlaying the outer edges,
   dot pagination centred beneath. The track itself is a scroll-snap strip, so it
   remains usable if JavaScript never runs; main.js only wires the controls. */
.reel-carousel { position: relative; }

.reel {
  display: flex;
  gap: var(--kl-space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }

/* Portrait, three across. Landscape stills are cropped to fit by object-fit,
   which is what the live site does. */
.reel__item {
  position: relative;
  flex: 0 0 calc((100% - 2 * var(--kl-space-sm)) / 3);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}
.reel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kl-dur-slow) var(--kl-ease-std);
}
.reel__item:hover img { transform: scale(1.03); }

/* Large open circle with a white triangle, not a small filled disc. */
.reel__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(56px, 17%, 110px);
  aspect-ratio: 1 / 1;
  border: 3px solid var(--kl-on-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reel__play svg {
  width: 34%;
  height: auto;
  fill: var(--kl-on-dark);
  margin-left: 6%;
}

.reel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--kl-on-dark);
  filter: drop-shadow(0 0 3px var(--kl-play-bg));
}
.reel__nav svg { width: 100%; height: 100%; }
.reel__nav--prev { left: 4px; }
.reel__nav--next { right: 4px; }
.reel__nav[disabled] { opacity: .35; cursor: default; }

.reel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--kl-space-md);
}
.reel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  background: var(--kl-nav-hover);
  cursor: pointer;
  transition: background var(--kl-dur-fast) var(--kl-ease-std);
}
.reel__dot.is-active { background: var(--kl-ink); }

/* ---------------------------------------------------------------
   Contacts
   --------------------------------------------------------------- */
.contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kl-space-lg);
  margin-top: var(--kl-space-lg);
}

.contact-block__title {
  font-family: var(--kl-font);
  font-weight: var(--kl-fw-bold);
  font-size: var(--kl-type-label);
  letter-spacing: var(--kl-ls-summary);
  text-transform: capitalize;
  line-height: var(--kl-lh-summary);
  color: var(--kl-ink);
  margin-bottom: var(--kl-space-sm);
}
.contact-block p:not(.contact-block__title) {
  font-size: var(--kl-type-body);
  font-weight: var(--kl-fw-light);
  line-height: var(--kl-lh-body);
  color: var(--kl-ink);
}

/* ---------------------------------------------------------------
   Closing photo
   --------------------------------------------------------------- */
/* No grayscale filter. The source photograph is already black and white, so the
   filter was doing nothing except risking a double treatment. `height: auto` comes
   from the reset and is what keeps this from stretching. */
.closer img { width: 100%; height: auto; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
/* Full-bleed rust bar with white text, not ink on the tan canvas. */
.site-footer {
  padding: var(--kl-space-md) 5%;
  text-align: center;
  background: var(--kl-accent);
}
.site-footer p {
  font-size: var(--kl-type-footer);
  font-weight: var(--kl-fw-bold);
  letter-spacing: var(--kl-ls-summary);
  text-transform: uppercase;
  color: var(--kl-on-dark);
}

/* ---------------------------------------------------------------
   Lightbox (Sizzle Reel + reel items)
   --------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--kl-scrim);
  z-index: 9999;
  padding: 6% 5%;
}
.lightbox.is-open { display: flex; }

.lightbox__frame-wrap {
  position: relative;
  width: 100%;
  max-width: var(--kl-hero-inner);
  aspect-ratio: 16 / 9;
}
.lightbox__frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  color: var(--kl-on-dark);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Placeholder state (no content migrated into a section yet)
   --------------------------------------------------------------- */
.placeholder-note {
  padding: var(--kl-space-md);
  border: 1px dashed var(--kl-accent);
  border-radius: var(--kl-radius-sm);
  color: var(--kl-ink);
  opacity: .7;
  font-size: var(--kl-type-label);
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .credits { grid-template-columns: repeat(2, 1fr); }
  .contacts { grid-template-columns: 1fr; gap: var(--kl-space-md); }

  /* The three-column About cannot hold three readable measures at this width. */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--kl-space-md);
  }
  .about__lead { margin-bottom: var(--kl-space-sm); }

  .reel__item { flex-basis: calc((100% - var(--kl-space-sm)) / 2); }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .site-header__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kl-space-md);
    background: var(--kl-bg);
    padding: var(--kl-space-md) 5% var(--kl-space-lg);
    z-index: 100;
  }
  .site-header__menu.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--kl-space-sm); }
  .credits { grid-template-columns: 1fr; }
  .about__body { grid-template-columns: 1fr; }
  .reel__item { flex-basis: 100%; }
}

/* ---------------------------------------------------------------
   Motion discipline
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}