/* Add your global styles here */

/* ============================================================================
   ACSS VARIABLES ONLY. No hand-written font sizes, no hand-written colors.
   Refactored Aug 11 2026. Backup of the previous hand-written version:
   136-lentsch-productions/089-etch-main-stylesheet-BACKUP-aug-11-2026.css

   Type scale  -> var(--text-xs|s|m|l|xl), var(--h1)      (was 18 ad-hoc rem values)
   Colors      -> var(--text-dark), var(--text-dark-muted), var(--primary)
   Line height -> var(--text-line-height), var(--base-heading-lh)
   Spacing     -> var(--space-*)

   The site runs color-scheme: dark only (declared by ACSS on :root), so
   --text-dark resolves to WHITE here. Verified by rasterising both values:
   #fff === var(--text-dark), rgba(255,255,255,.8) === var(--text-dark-muted).

   The four --tl-* tokens below are the ONLY derived values. ACSS 4 emits no
   --*-trans-* variables on this install (checked: 0 found), so these use ACSS's
   OWN construction, copied from how ACSS itself defines --text-dark-muted:
     --text-dark-muted: color-mix(in srgb, var(--text-dark) 80%, transparent);
   Defined once here, referenced everywhere. Change a step in one place.
   ============================================================================ */

:root{
  --tl-text-soft:   color-mix(in srgb, var(--text-dark) 60%, transparent);
  --tl-text-dim:    color-mix(in srgb, var(--text-dark) 50%, transparent);
  --tl-text-faint:  color-mix(in srgb, var(--text-dark) 35%, transparent);
  --tl-surface:     color-mix(in srgb, var(--text-dark)  3%, transparent);
  --tl-rule:        color-mix(in srgb, var(--text-dark) 10%, transparent);
  --tl-rule-soft:   color-mix(in srgb, var(--text-dark)  7%, transparent);
  --tl-accent-line: color-mix(in srgb, var(--primary)   40%, transparent);
}

/* Mobile hamburger nav + footer nav (moved from mu-plugin into Etch) */
#nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
label[for="nav-toggle"]{display:none;font-size:var(--text-l);line-height:1;cursor:pointer;color:var(--text-dark);padding:.2rem .5rem;user-select:none;}
@media (max-width:800px){
 .site-header__inner{position:relative;flex-wrap:wrap;align-items:center;}
 label[for="nav-toggle"]{display:block !important;margin-left:auto;}
 .site-header__nav{display:none !important;flex-direction:column;align-items:stretch;width:100%;gap:.15rem;padding:.5rem 0 .25rem;}
 #nav-toggle:checked ~ .site-header__nav{display:flex !important;}
 #nav-toggle:checked ~ .site-header__nav .site-header__link{display:block !important;text-align:right;padding:.9rem .25rem;width:100%;font-size:var(--text-m);}
 #nav-toggle:checked ~ .site-header__nav .btn{text-align:center;margin-top:.45rem;}
}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:1rem 0;}
.site-footer__navlink{color:var(--tl-text-soft);text-decoration:none;font-size:var(--text-s);}
.site-footer__navlink:hover{color:var(--text-dark);}
.site-footer nav,footer nav{display:flex !important;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;}
.site-footer nav a,footer nav a{display:inline-block !important;}
/* WCAG AA contrast */
.hero__eyebrow,.section-kicker,.about__more,.film-item__role,.vo-item__tag,.site-footer__tagline,.site-footer a{color:var(--primary) !important;}
.site-footer__copy{color:var(--tl-text-soft) !important;}
.btn--primary{color:var(--text-dark) !important;}

/* Press Kit: stack the At-a-Glance cards to one column on phones */
@media (max-width:600px){ .pk-grid{grid-template-columns:1fr !important;} }
.pk-val{overflow-wrap:break-word;word-break:break-word;}


/* Press quotes (lp-press) */
.lp-press__lede{color:var(--tl-text-soft);font-size:var(--text-s);margin:.25rem 0 2rem;max-width:56ch;}
.lp-press__list{display:flex;flex-direction:column;gap:0;}
.lp-press__item{display:grid;grid-template-columns:120px 1fr;gap:1.75rem;padding:1.9rem 0;border-top:1px solid var(--tl-rule);align-items:start;}
.lp-press__item:first-child{border-top:none;padding-top:0;}
.lp-press__item--noscore{grid-template-columns:1fr;}
.lp-press__score{border-left:2px solid var(--primary);padding-left:.85rem;}
.lp-press__score-value{display:block;font-size:var(--text-xl);font-weight:800;letter-spacing:-.03em;line-height:var(--base-heading-lh);font-variant-numeric:tabular-nums;color:var(--text-dark);}
.lp-press__score-outlet{display:block;margin-top:.2rem;font-size:var(--text-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--tl-text-soft);font-weight:600;}
.lp-press__quote{display:block;background:none;padding:0;border:none;border-radius:0;margin:0 0 .9rem;font-size:var(--text-l);line-height:var(--text-line-height);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--text-dark);}
.lp-press__attr{display:flex;flex-direction:row;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline;font-size:var(--text-xs);color:var(--text-dark-muted);margin:0;}
.lp-press__outlet{font-weight:700;color:var(--text-dark);}
.lp-press__link{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--tl-accent-line);}
.lp-press__link:hover{border-bottom-color:var(--primary);}
@media (max-width:620px){
 .lp-press__item{grid-template-columns:1fr;gap:.9rem;}
 .lp-press__score{border-left:none;border-top:2px solid var(--primary);padding-left:0;padding-top:.6rem;}
 .lp-press__score-value{font-size:var(--text-l);}
}


/* Where to watch (lp-where) */
.lp-where__lede{color:var(--tl-text-soft);font-size:var(--text-s);margin:.25rem 0 1.75rem;max-width:56ch;}
.lp-where__list{display:flex;flex-direction:column;gap:0;}
.lp-where__row{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;padding:.95rem 0;border-bottom:1px solid var(--tl-rule);}
.lp-where__row:last-child{border-bottom:none;}
.lp-where__title{font-weight:700;font-size:var(--text-m);color:var(--text-dark);}
.lp-where__year{font-weight:500;color:var(--tl-text-soft);}
.lp-where__link{font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase;font-weight:700;border:1px solid var(--tl-accent-line);border-radius:999px;padding:.34rem .85rem;color:var(--primary);text-decoration:none;white-space:nowrap;}
.lp-where__link:hover{border-color:var(--primary);color:var(--text-dark);background:color-mix(in srgb, var(--primary) 12%, transparent);}

/* ================= FILM PAGES (single + archive) =================
   Reuses the dark / primary language of .lp-press and .lp-where rather than
   introducing a second look. */

.film-page{
  max-width:1120px;
  margin-inline:auto;
  padding:var(--space-l) var(--space-m) var(--space-xxl);
}

/* hero: poster left, intro right */
.film-page__hero{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:var(--space-l);
  align-items:start;
}
.film-page__poster{
  width:100%;
  aspect-ratio:2/3;
  object-fit:contain;
  display:block;
  border-radius:10px;
  background:var(--base);
  border:1px solid var(--tl-rule-soft);
  box-shadow:var(--box-shadow-3);
}
.film-page__title{
  font-size:var(--h1);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:var(--base-heading-lh);
  color:var(--text-dark);
  margin:0 0 .8rem;
}
.film-page__disambig{
  font-size:var(--text-s);
  line-height:var(--text-line-height);
  color:var(--tl-text-soft);
  margin:0 0 1.15rem;
  max-width:62ch;
}
.film-page__logline{
  font-size:var(--text-l);
  line-height:var(--text-line-height);
  font-style:italic;
  font-weight:500;
  color:var(--text-dark);
  margin:0;
  max-width:56ch;
}

/* section headings */
.film-page h2{
  font-size:var(--text-xs);
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--primary);
  margin:var(--space-l) 0 1rem;
  padding-top:1.15rem;
  border-top:1px solid var(--tl-rule);
}

/* Crew rows: now <li> inside ul.film-crew-list (was unclassed <p>).
   The :not([class]) guard is no longer needed - the list scopes it. */
.film-crew-list li{
  margin:0 0 .4rem;
  font-size:var(--text-s);
  line-height:var(--text-line-height);
  color:var(--text-dark-muted);
}

/* cast */
.film-cast{
  margin:0 0 .4rem;
  font-size:var(--text-s);
  line-height:var(--text-line-height);
  color:var(--text-dark);
  font-weight:600;
}
.film-cast__role{ color:var(--tl-text-soft); font-weight:400; }

/* awards */
.film-award{
  margin:0;
  padding:.6rem 0;
  border-bottom:1px solid var(--tl-rule-soft);
  font-size:var(--text-s);
  line-height:var(--text-line-height);
  color:var(--text-dark-muted);
}

/* press: quote first, then the outlet as a real outbound link */
.film-press{
  margin:0;
  padding:1.35rem 0;
  border-bottom:1px solid var(--tl-rule);
}
.film-press__quote{
  display:block;
  font-size:var(--text-l);
  line-height:var(--text-line-height);
  font-style:italic;
  font-weight:500;
  color:var(--text-dark);
  margin:0 0 .55rem;
}
.film-press__quote:empty{ display:none; }
.film-press__outlet{
  font-weight:700;
  color:var(--text-dark);
  text-decoration:none;
  border-bottom:1px solid var(--tl-accent-line);
}
.film-press__outlet:hover{ color:var(--primary); border-bottom-color:var(--primary); }
.film-press__author,
.film-press__date{ color:var(--tl-text-soft); font-size:var(--text-xs); }
.film-press__author:empty,
.film-press__date:empty{ display:none; }
.film-press__author:not(:empty)::before,
.film-press__date:not(:empty)::before{ content:" \00B7 "; color:var(--tl-text-faint); }

/* Details now sits inside the hero's right column */
.film-page__intro h2{ margin-top:1.7rem; }
/* The intro paragraph rule was removed Aug 11 2026. It existed to style the
   Details rows, which are now a <dl>. At specificity (0,1,1) it out-ranked
   .film-page__disambig and .film-page__logline (0,1,0) and was silently
   overriding the logline's size and colour. The two remaining paragraphs in
   the intro carry their own classes and style themselves. */
/* Details rows are key/value pairs, so they are a definition list.
   dl > div > dt + dd is valid HTML5 and keeps each pair on its own line
   while dt/dd stay inline, preserving the original "Label: value" look.
   Companies render as ONE dt with several dd, comma joined. */
.film-details{ margin:0; }
.film-details__row{
  margin:0 0 .35rem;
  font-size:var(--text-s);
  line-height:var(--text-line-height);
  color:var(--text-dark-muted);
}
.film-details dt,
.film-details dd{ display:inline; margin:0; }
.film-details dt::after{ content:": "; }
.film-details dd + dd::before{ content:", "; }

.film-page__poster{ position:sticky; top:1.5rem; }
@media (max-width:860px){ .film-page__poster{ position:static; } }

/* where to watch: pill links, same shape as .lp-where__link */
.film-watch{ display:inline-block; margin:0 .45rem .5rem 0; }
.film-watch__link{
  display:inline-block;
  font-size:var(--text-xs);
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:700;
  border:1px solid var(--tl-accent-line);
  border-radius:999px;
  padding:.42rem .95rem;
  color:var(--primary);
  text-decoration:none;
  white-space:nowrap;
}
.film-watch__link:hover{ border-color:var(--primary); color:var(--text-dark); background:color-mix(in srgb, var(--primary) 12%, transparent); }

/* ---- archive ---- */
.film-archive__title{
  max-width:1120px;
  margin:var(--space-l) auto .35rem;
  padding-inline:var(--space-m);
  font-size:var(--h1);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--text-dark);
}
.film-archive__grid{
  max-width:1120px;
  margin-inline:auto;
  padding:var(--space-m) var(--space-m) var(--space-xxl);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--space-l) var(--space-m);
}
.film-card{ display:flex; flex-direction:column; gap:.5rem; }
.film-card__poster-link{ display:block; text-decoration:none; }
.film-card__poster{
  width:100%;
  aspect-ratio:2/3;
  object-fit:contain;
  display:block;
  border-radius:8px;
  background:var(--base);
  border:1px solid var(--tl-rule-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}
.film-card__poster-link:hover .film-card__poster{ transform:translateY(-4px); box-shadow:var(--box-shadow-2); }
.film-card__title{ font-size:var(--text-m); font-weight:700; margin:0; line-height:var(--base-heading-lh); }
.film-card__title a{ color:var(--text-dark); text-decoration:none; }
.film-card__title a:hover{ color:var(--primary); }
.film-card__year{ font-size:var(--text-xs); color:var(--tl-text-soft); margin:0; }
.film-card__logline{ font-size:var(--text-xs); line-height:var(--text-line-height); color:var(--tl-text-soft); margin:0; }

/* ---- Lentsch Productions grid: cards became links, keep them looking like cards ---- */
.lp-film__link{ display:block; text-decoration:none; color:inherit; }
.lp-film__poster{ transition:transform .25s ease, box-shadow .25s ease; }
.lp-film__link:hover .lp-film__poster{ transform:translateY(-4px); box-shadow:var(--box-shadow-2); }
.lp-film__link:hover .lp-film__title{ color:var(--primary); }

@media (max-width:860px){
  .film-page__hero{ grid-template-columns:1fr; gap:var(--space-m); }
  .film-page__poster{ max-width:230px; }
}


/* Missing poster: Etch renders a light placeholder SVG as a data URI.
   Hide the graphic; the dark background + border become a clean empty slot. */
.film-page__poster[src^="data:image/svg+xml"],
.film-card__poster[src^="data:image/svg+xml"],
.lp-film__poster[src^="data:image/svg+xml"]{ opacity:0; }

/* ...and put an on-brand "coming soon" slot in its place. Scoped by
   aspect-ratio rather than inset:0 because the LP link also wraps the title. */
.film-page__poster-wrap,
.film-card__poster-link,
.lp-film__link{ position:relative; display:block; }

.film-page__poster-wrap:has(img[src^="data:image/svg+xml"])::before,
.film-card__poster-link:has(img[src^="data:image/svg+xml"])::before,
.lp-film__link:has(img[src^="data:image/svg+xml"])::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  aspect-ratio:2/3;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background:
    radial-gradient(115% 78% at 50% 16%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent) 0%, var(--base-ultra-dark) 72%),
    var(--base);
}
.film-page__poster-wrap:has(img[src^="data:image/svg+xml"])::after,
.film-card__poster-link:has(img[src^="data:image/svg+xml"])::after,
.lp-film__link:has(img[src^="data:image/svg+xml"])::after{
  content:"Coming soon";
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc((100cqw) * 0);
  bottom:auto;
  margin-top:0;
  color:var(--primary);
  font-size:var(--text-xs); letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  white-space:nowrap;
  padding-top:.75rem;
  border-top:1px solid var(--tl-accent-line);
}
/* place the words about two thirds down the poster area */
.film-page__poster-wrap:has(img[src^="data:image/svg+xml"])::after{ top:62%; }
.film-card__poster-link:has(img[src^="data:image/svg+xml"])::after{ top:62%; }
.lp-film__link:has(img[src^="data:image/svg+xml"])::after{ top:62%; }


.film-archive__lede{
  margin:0 auto var(--space-m);
  padding-inline:var(--space-m);
  font-size:var(--text-m);
  line-height:var(--text-line-height);
  color:var(--tl-text-soft);
  max-width:min(1120px, 68ch);
}


/* Section labels inside the About bio. Same visual language as .section-kicker,
   with top spacing because these sit in running text, not at a section top. */
.about__section-title{
  font-size:var(--text-m);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin:var(--space-m) 0 0;
}

/* Entity Home accordion (film pages).
   Kalicube corroboration: the identifiers stay in the DOM as crawlable HTML text
   ALONGSIDE the schema sameAs, because plenty of crawlers read DOM text more
   readily than they parse JSON-LD. Two channels saying the same thing is the point.
   NO AFFORDANCES rule (Tommy, Jul 25 2026): remove the invitation to click, never
   the thing itself. No disclosure arrow, no pointer cursor. Text stays fully
   visible at real contrast and normal size, and the accordion still opens on click.
   This is deliberately NOT black-hat hiding. */
.entity-home{
  margin-top:var(--space-l);
  padding-top:var(--space-m);
  border-top:1px solid var(--tl-rule-soft);
}
.entity-home__summary{
  list-style:none;
  cursor:default;
  font-size:var(--text-xs);
  letter-spacing:.02em;
  color:var(--tl-text-soft);
  margin:0;
}
.entity-home__summary::-webkit-details-marker{display:none;}
.entity-home__summary::marker{content:"";}
.entity-home p{
  font-size:var(--text-xs);
  line-height:var(--text-line-height);
  color:var(--tl-text-soft);
  margin:.55rem 0 0;
}

.entity-home__link{
  color:var(--text-dark-muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.entity-home__link:hover{ color:var(--text-dark); }


/* [tl_entity_home] shortcode styles, copied from the live homepage (printed there in ),
   scoped to the homepage entity home so they never reach the film pages' entity home. */
.entity-home:has(> .entity-home__tables){padding-inline:clamp(1rem,5.5vw,80px);}
.entity-home:has(> .entity-home__tables) .entity-home__summary{list-style:none;cursor:default;color:rgba(255,255,255,0.7);}
@supports (color:color-mix(in srgb,red 50%,transparent)){.entity-home:has(> .entity-home__tables) .entity-home__summary{color:color-mix(in srgb,currentColor 70%,transparent);}}
.entity-home:has(> .entity-home__tables) .entity-home__summary::-webkit-details-marker{display:none;}
.entity-home:has(> .entity-home__tables) .entity-home__summary::marker{content:"";}
.entity-home:has(> .entity-home__tables) .entity-home__tables{margin-block-start:1rem;}
.entity-home:has(> .entity-home__tables) .entity-home__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block-end:1.5rem;max-width:100%;}
.entity-home:has(> .entity-home__tables) .entity-home__table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--text-s,0.875rem);line-height:1.4;}
.entity-home:has(> .entity-home__tables) .entity-home__caption{caption-side:top;text-align:left;font-weight:600;padding:0 0 0.4rem;color:var(--accent,#b8873a);}
.entity-home:has(> .entity-home__tables) .entity-home__table th,.entity-home:has(> .entity-home__tables) .entity-home__table td{border:1px solid var(--neutral-medium,#d7d7d7);padding:0.35rem 0.6rem;text-align:left;vertical-align:top;}
.entity-home:has(> .entity-home__tables) .entity-home__table th{font-weight:600;background:var(--neutral-ultra-light,#f4f4f4);}
.entity-home:has(> .entity-home__tables) .entity-home__table code{font-size:0.9em;word-break:break-all;}

/* Etch tag style "body" (vkjrkr4): Etch for WordPress prints it on every page without a block linking it. */
body { background-color: var(--base); }

/* WordPress core parity: WP 6.7+ prints this inline on every live page (wp-img-auto-sizes-contain-inline-css). */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}