/*
Theme Name: 10 Kilos of Cocaine
Theme URI: https://pennylaneproductions.com
Author: Penny Lane Production House
Author URI: https://pennylaneproductions.com
Description: Single-page cinematic landing theme for the feature film "10 Kilos of Cocaine," a Doran Eran film. Built as a self-contained one-page press/landing site with hero, synopsis, trailer, cast, filmmaker, themes and press-contact sections.
Version: 1.1.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.6
License: Proprietary
Text Domain: tenkilos
*/

/* =========================================================
   The rules below are the page's original design system,
   ported unmodified from the approved static HTML build.
   ========================================================= */

  :root {
    --bg: #0a0806;
    --bg-alt: #14100b;
    --bg-lift: #1c1712;
    --gold: #c89968;
    --gold-bright: #e8b06f;
    --gold-dim: #7a6142;
    --cream: #e8e2d6;
    --cream-dim: #b0a696;
    --muted: #7a6f5f;
    --rust: #8b3a2a;
    --hair: rgba(200, 153, 104, 0.18);
    --hair-strong: rgba(200, 153, 104, 0.4);

    --f-display: 'Anton', 'Impact', sans-serif;
    --f-body: 'Inter', system-ui, sans-serif;
    --f-mono: 'Special Elite', 'Courier New', monospace;

    --max: 1240px;
    --gutter: clamp(20px, 4vw, 60px);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--cream);
    font-family: var(--f-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  /* ---------- Layout helpers ---------- */
  .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  /* ---------- Header ---------- */
  .header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(10, 8, 6, 0.9), rgba(10, 8, 6, 0));
    backdrop-filter: blur(4px);
    transition: background 0.3s;
  }
  .header.scrolled {
    background: rgba(10, 8, 6, 0.95);
    border-bottom: 1px solid var(--hair);
  }
  .brand {
    font-family: var(--f-display);
    font-size: 20px;
    letter-spacing: 0.16em;
    color: var(--gold);
    text-transform: uppercase;
  }
  .brand .sm { font-size: 11px; color: var(--cream-dim); letter-spacing: 0.28em; display: block; margin-top: 2px; }
  .nav-actions { display: flex; gap: 8px; align-items: center; }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: var(--f-body);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--hair-strong);
    color: var(--cream);
    transition: all 0.2s;
    background: transparent;
  }
  .btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  .btn.primary {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
  }
  .btn.primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--bg); }
  .btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

  /* ---------- Hero ---------- */
  .hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    position: relative;
    overflow: hidden;
	padding: 70px 0;
  }
  .hero-poster {
    position: relative;
    background: #000;
    overflow: hidden;
  }
  .hero-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, var(--bg) 100%);
    pointer-events: none;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px var(--gutter) 80px;
    background: var(--bg);
  }
  .eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--gold);
  }
  .hero-title {
    font-family: var(--f-display);
    font-size: clamp(72px, 12vw, 168px);
    line-height: 0.85;
    letter-spacing: 0.01em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .hero-subtitle {
    font-family: var(--f-display);
    font-size: clamp(20px, 2.4vw, 32px);
    letter-spacing: 0.32em;
    color: var(--cream);
    text-transform: uppercase;
    margin-bottom: 40px;
  }
  .hero-tag {
    font-size: 16px;
    line-height: 1.6;
    color: var(--cream-dim);
    max-width: 460px;
    margin-bottom: 40px;
    font-weight: 300;
  }
  .hero-tag strong { color: var(--cream); font-weight: 500; }
  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 40px;
    padding: 20px 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
  }
  .hero-meta-item .label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .hero-meta-item .value {
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--cream);
    text-transform: uppercase;
  }
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ---------- Section framing ---------- */
  section {
    padding: 100px 0;
    position: relative;
  }
  .section-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 60px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hair);
  }
  .section-num {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 0.16em;
    min-width: 40px;
  }
  .section-eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--muted);
    text-transform: uppercase;
    margin-left: auto;
  }
  .section-title {
    font-family: var(--f-display);
    font-size: clamp(42px, 6vw, 82px);
    letter-spacing: 0.04em;
    color: var(--cream);
    text-transform: uppercase;
    line-height: 0.95;
  }
  .section-title .accent { color: var(--gold); }

  /* ---------- Synopsis section ---------- */
  .synopsis {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .synopsis-body p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--cream-dim);
    margin-bottom: 24px;
    font-weight: 300;
  }
  .synopsis-body p:first-child::first-letter {
    font-family: var(--f-display);
    font-size: 68px;
    line-height: 0.85;
    float: left;
    padding: 8px 14px 0 0;
    color: var(--gold);
  }
  .fact-card {
    background: var(--bg-alt);
    border: 1px solid var(--hair);
    padding: 32px 28px;
  }
  .fact-card h4 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hair);
  }
  .fact-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--hair);
    font-size: 13px;
  }
  .fact-row:last-child { border-bottom: none; }
  .fact-row .k {
    font-family: var(--f-mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
  }
  .fact-row .v {
    font-family: var(--f-display);
    color: var(--cream);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
  }
  .lang-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  .lang-pills span {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 4px 10px;
    background: var(--bg-lift);
    color: var(--gold-bright);
    text-transform: uppercase;
  }

  /* ---------- Pull quote / true story banner ---------- */
  .true-story {
    background: var(--bg-alt);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
  }
  .true-story::before {
    content: 'INSPIRED BY';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-display);
    font-size: clamp(120px, 20vw, 280px);
    color: rgba(200, 153, 104, 0.04);
    letter-spacing: 0.04em;
    pointer-events: none;
    white-space: nowrap;
  }
  .true-story-inner {
    position: relative;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .true-story-eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.32em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 32px;
  }
  .true-story blockquote {
    font-family: var(--f-display);
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--cream);
    text-transform: uppercase;
  }
  .true-story blockquote span { color: var(--gold); }
  .true-story cite {
    display: block;
    margin-top: 32px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--cream-dim);
    text-transform: uppercase;
    font-style: normal;
  }

  /* ---------- Trailer ---------- */
  .trailer-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid var(--hair);
    overflow: hidden;
  }
  .trailer-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .trailer-placeholder {
    position: absolute;
    inset: 0;
    background-image: url('images/still_arrest.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .trailer-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
  }
  .play-btn {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    z-index: 1;
  }
  .play-btn:hover { transform: scale(1.1); background: var(--gold-bright); }
  .play-btn::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 22px solid var(--bg);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 6px;
  }

  /* ---------- Real Sharon ---------- */
  .sharon-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 80px;
    align-items: start;
  }
  .sharon-portrait {
    position: relative;
  }
  .sharon-portrait img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: grayscale(0.15) contrast(1.05);
  }
  .sharon-portrait::after {
    content: 'THE REAL SHARON';
    position: absolute;
    bottom: -20px;
    left: 20px;
    right: 20px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--gold);
    background: var(--bg);
    padding: 8px 12px;
    text-align: center;
    border: 1px solid var(--hair-strong);
  }
  .sharon-name {
    font-family: var(--f-display);
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: 0.06em;
    color: var(--cream);
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 8px;
  }
  .sharon-role {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 32px;
  }
  .sharon-bio p {
    color: var(--cream-dim);
    margin-bottom: 20px;
    font-weight: 300;
    line-height: 1.85;
  }
  .facts-list {
    list-style: none;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--hair);
  }
  .facts-list li {
    padding: 12px 0 12px 32px;
    position: relative;
    color: var(--cream);
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px dashed var(--hair);
  }
  .facts-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 18px;
    height: 2px;
    background: var(--gold);
  }
  .sharon-links {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
  }

  /* ---------- Cast grid ---------- */
  .cast-grid {
    display: grid;
/*     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
  }
  .cast-card {
    background: var(--bg-alt);
    border: 1px solid var(--hair);
    transition: border-color 0.3s, transform 0.3s;
  }
  .cast-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
  }
  .cast-photo {
/*     aspect-ratio: 4/5; */
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-lift);
  }
  .cast-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	 object-position: top;
    filter: grayscale(0.1);
    transition: filter 0.4s;
  }
  .cast-card:hover .cast-photo img { filter: grayscale(0); }
  .cast-body { padding: 24px; }
  .cast-name {
    font-family: var(--f-display);
    font-size: 22px;
    letter-spacing: 0.08em;
    color: var(--cream);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .cast-role {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .cast-bio {
    font-size: 13.5px;
    color: var(--cream-dim);
    line-height: 1.6;
    font-weight: 300;
  }
  .cast-bio em { color: var(--gold-bright); font-style: normal; font-weight: 500; }
  .cast-known {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--hair);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
  }

  /* ---------- Filmmaker ---------- */
  .filmmaker {
    background: var(--bg-alt);
  }
  .filmmaker-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
  }
  .filmmaker-portrait {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
  }
  .filmmaker-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .filmmaker-name {
    font-family: var(--f-display);
    font-size: clamp(52px, 7vw, 96px);
    letter-spacing: 0.04em;
    line-height: 0.88;
    color: var(--cream);
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .filmmaker-role {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hair);
  }
  .filmmaker-bio {
    color: var(--cream-dim);
    line-height: 1.85;
    font-weight: 300;
    margin-bottom: 32px;
  }
  .achievements {
    list-style: none;
  }
  .achievements li {
    padding: 14px 0;
    border-bottom: 1px dashed var(--hair);
    font-size: 13.5px;
    color: var(--cream);
    display: flex;
    gap: 16px;
    align-items: baseline;
  }
  .achievements li strong {
    color: var(--gold);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    min-width: 90px;
    font-weight: 400;
  }

  /* ---------- Themes ---------- */
  .themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
  }
  .theme {
    background: var(--bg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background 0.3s;
  }
  .theme:hover { background: var(--bg-alt); }
  .theme-num {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 0.24em;
  }
  .theme-title {
    font-family: var(--f-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--cream);
    text-transform: uppercase;
    line-height: 1.1;
  }

  /* ---------- Contact / footer ---------- */
  .contact {
    background: var(--bg-alt);
    border-top: 1px solid var(--hair-strong);
    padding: 100px 0 40px;
    text-align: center;
  }
  .contact-eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.32em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .contact-title {
    font-family: var(--f-display);
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: 0.04em;
    color: var(--cream);
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .contact-name {
    font-family: var(--f-display);
    font-size: 24px;
    letter-spacing: 0.16em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .contact-info {
    color: var(--cream-dim);
    font-size: 15px;
    margin-bottom: 8px;
  }
  .contact-info a { color: var(--cream); border-bottom: 1px solid var(--hair-strong); padding-bottom: 2px; transition: color 0.2s; }
  .contact-info a:hover { color: var(--gold-bright); border-color: var(--gold); }

  footer {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid var(--hair);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--muted);
    text-transform: uppercase;
  }
  footer a:hover { color: var(--gold); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-poster { height: 70vh; }
    .hero-poster::after {
      background: linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
    }
    .hero-content { padding: 60px var(--gutter); }
    .synopsis { grid-template-columns: 1fr; gap: 40px; }
    .sharon-grid { grid-template-columns: 1fr; gap: 60px; }
    .sharon-portrait { max-width: 400px; }
    .filmmaker-grid { grid-template-columns: 1fr; gap: 40px; }
    section { padding: 70px 0; }
    .section-head { flex-wrap: wrap; margin-bottom: 40px; }
    .nav-actions .btn { padding: 8px 12px; font-size: 10px; }
    .nav-actions .btn span.hide-sm { display: none; }
  }
  @media (max-width: 500px) {
    .brand .sm { display: none; }
    .hero-meta { gap: 20px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .btn { justify-content: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

/* =========================================================
   WordPress page / post content (page.php, single.php)
   Kept minimal — inherits the site's cinematic dark chrome.
   ========================================================= */
.wp-page__article, .wp-single__article {
	max-width: 780px;
	margin: 0 auto;
}
.wp-page__content, .wp-single__content {
	color: var(--cream-dim);
	line-height: 1.85;
	font-weight: 300;
	font-size: 17px;
}
.wp-page__content p, .wp-single__content p { margin-bottom: 24px; }
.wp-page__content h2, .wp-single__content h2 {
	font-family: var(--f-display);
	color: var(--cream);
	font-size: 32px;
	letter-spacing: 0.04em;
	margin: 40px 0 16px;
	text-transform: uppercase;
}
.wp-page__content h3, .wp-single__content h3 {
	font-family: var(--f-display);
	color: var(--gold);
	font-size: 22px;
	letter-spacing: 0.06em;
	margin: 32px 0 12px;
	text-transform: uppercase;
}
.wp-page__content a, .wp-single__content a {
	color: var(--gold-bright);
	border-bottom: 1px solid var(--hair-strong);
}
.wp-page__content a:hover, .wp-single__content a:hover { color: var(--gold); border-color: var(--gold); }
.wp-page__content img, .wp-single__content img { margin: 24px 0; }
.wp-page__content blockquote, .wp-single__content blockquote {
	border-left: 2px solid var(--gold);
	padding-left: 24px;
	margin: 32px 0;
	font-family: var(--f-display);
	font-size: 24px;
	letter-spacing: 0.04em;
	color: var(--cream);
	text-transform: uppercase;
	line-height: 1.2;
}
.wp-single__nav a { color: var(--cream-dim); }
.wp-single__nav a:hover { color: var(--gold); }


/* =========================================================
   Global type-size bump — readability pass v1.2
   Appended after the original design system to raise all
   sub-14px elements without shifting layout weight.
   ========================================================= */

/* --- small typewriter labels (10–12px → 12–14px) --- */
.hero-meta-item .label,
.lang-pills span,
.cast-role,
.cast-known,
.site-footer { font-size: 12px; }

.section-eyebrow,
.section-num,
.fact-card h4,
.fact-row .k,
.sharon-role,
.filmmaker-role,
.achievements li strong,
.theme-num,
.brand .sm { font-size: 13px; }

.eyebrow,
.true-story-eyebrow,
.true-story cite,
.contact-eyebrow,
.btn { font-size: 14px; }

/* --- body copy (13.5–17px → 15–18px) --- */
.fact-row       { font-size: 14px; }
.hero-tag       { font-size: 17px; }
.synopsis-body p{ font-size: 18px; line-height: 1.8; }
.facts-list li  { font-size: 16px; }
.sharon-bio p,
.filmmaker-bio  { font-size: 16px; }
.cast-bio       { font-size: 15px; }
.achievements li{ font-size: 15px; }
.contact-info   { font-size: 16px; }

/* Slight bump to display accents that felt light next to the bigger body */
.cast-name  { font-size: 24px; }
.theme-title{ font-size: 24px; }

/* Mobile — keep bumps but don't overshoot narrow screens */
@media (max-width: 500px) {
  .synopsis-body p { font-size: 17px; }
  .sharon-bio p, .filmmaker-bio { font-size: 15.5px; }
  .btn, .eyebrow, .true-story-eyebrow, .contact-eyebrow { font-size: 13px; }
}



/* =========================================================
   Book Tickets page (page-book-tickets.php)
   Uses Contact Form 7 — styles below cover both the layout
   containers and CF7's own wrapper classes.
   ========================================================= */

.book-tickets { min-height: 100vh; padding-top: 100px; }

/* --- Compact hero --- */
.bt-hero { padding: 60px 0; border-bottom: 1px solid var(--hair); }
.bt-hero__grid { display: grid; grid-template-columns: 320px 1fr; gap: 60px; align-items: center; }
.bt-hero__poster { aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--hair); }
.bt-hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.bt-hero__title {
	font-family: var(--f-display);
	font-size: clamp(52px, 6vw, 88px);
	line-height: 0.9;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 24px;
	letter-spacing: 0.02em;
}
.bt-hero__title span {
	display: block; font-size: 0.32em; letter-spacing: 0.32em;
	color: var(--cream); margin-top: 14px;
}
.bt-hero__tag {
	color: var(--cream-dim); font-weight: 300; max-width: 560px;
	margin-bottom: 32px; line-height: 1.75; font-size: 17px;
}
.bt-meta {
	display: flex; flex-wrap: wrap; gap: 40px; padding: 20px 0;
	border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.bt-meta > div { display: flex; flex-direction: column; gap: 4px; }
.bt-meta .k {
	font-family: var(--f-mono); font-size: 12px; color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.24em;
}
.bt-meta .v {
	font-family: var(--f-display); font-size: 18px; color: var(--cream);
	letter-spacing: 0.08em; text-transform: uppercase;
}

/* --- Form section --- */
.bt-form-section { padding: 80px 0 120px; }

.bt-callout {
	background: var(--bg-alt); border: 1px solid var(--hair);
	border-left: 3px solid var(--gold); padding: 32px 36px; margin-bottom: 40px;
}
.bt-callout__stamp {
	display: inline-block; font-family: var(--f-mono); font-size: 13px;
	letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase;
	padding: 8px 16px; border: 1px solid var(--gold); margin-bottom: 20px;
	transform: rotate(-1.5deg);
}
.bt-callout p { color: var(--cream-dim); line-height: 1.75; font-weight: 300; font-size: 17px; }
.bt-callout p strong { color: var(--cream); font-weight: 500; }

/* --- CF7 form styling --- */
.wpcf7 { max-width: 720px; margin: 40px 0 60px; }
.wpcf7 form { margin: 0; }

/* Grid + fields */
.bt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bt-field { position: relative; }
.bt-field--full { grid-column: 1 / -1; }

.bt-field > label {
	display: block; font-family: var(--f-mono); font-size: 13px;
	letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase;
	margin-bottom: 10px;
}
.bt-field .req { color: var(--rust); font-weight: bold; }
.bt-field .opt {
	color: var(--muted); text-transform: none;
	letter-spacing: 0.04em; font-size: 12px;
}

/* CF7 wraps every input in <span class="wpcf7-form-control-wrap">.
   Target inputs directly instead. */
.bt-field .wpcf7-form-control-wrap { display: block; }
.bt-field input[type="text"],
.bt-field input[type="email"],
.bt-field input[type="tel"] {
	width: 100%;
	background: var(--bg-alt);
	border: 1px solid var(--hair-strong);
	color: var(--cream);
	padding: 16px 18px;
	font-family: var(--f-body);
	font-size: 16px;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.bt-field input:focus {
	outline: none; border-color: var(--gold); background: var(--bg-lift);
	box-shadow: 0 0 0 3px rgba(200, 153, 104, 0.15);
}

/* CF7 error state */
.bt-field .wpcf7-not-valid { border-color: var(--rust); }
.bt-field .wpcf7-not-valid-tip {
	display: block; color: #d97757; font-size: 13px;
	margin-top: 8px; font-family: var(--f-body);
}

/* --- Checkbox / acceptance --- */
.bt-field--checkbox {
	grid-column: 1 / -1;
	margin-top: 32px;
	padding: 20px;
	background: var(--bg-alt);
	border: 1px solid var(--hair);
}
.bt-field--checkbox .wpcf7-form-control-wrap { display: block; }
.bt-field--checkbox .wpcf7-acceptance .wpcf7-list-item {
	margin: 0; display: block;
}
.bt-field--checkbox .wpcf7-list-item-label {
	display: inline; color: var(--cream-dim); font-family: var(--f-body);
	font-size: 14px; line-height: 1.6; font-weight: 400;
	letter-spacing: 0;
}
.bt-field--checkbox label {
	display: flex; align-items: flex-start; gap: 14px;
	cursor: pointer; margin: 0;
}
.bt-field--checkbox input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 22px; height: 22px; min-width: 22px;
	border: 1px solid var(--hair-strong); background: var(--bg);
	cursor: pointer; margin-top: 2px; position: relative;
	transition: all 0.2s;
}
.bt-field--checkbox input[type="checkbox"]:checked {
	background: var(--gold); border-color: var(--gold);
}
.bt-field--checkbox input[type="checkbox"]:checked::after {
	content: '✓'; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%); color: var(--bg);
	font-size: 15px; font-weight: bold; line-height: 1;
}
.bt-field--checkbox input:focus-visible {
	outline: 2px solid var(--gold-bright); outline-offset: 2px;
}
.bt-field--checkbox em {
	color: var(--gold-bright); font-style: normal; font-weight: 500;
}

/* --- Submit --- */
.bt-submit {
	margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--hair);
}
.bt-submit .wpcf7-submit,
.bt-btn-lg {
	padding: 18px 36px !important;
	font-size: 13px !important;
	letter-spacing: 0.28em !important;
	cursor: pointer;
	border: 1px solid var(--gold) !important;
	background: var(--gold);
	color: var(--bg);
	font-family: var(--f-body);
	font-weight: 500;
	text-transform: uppercase;
	transition: background 0.2s;
}
.bt-submit .wpcf7-submit:hover { background: var(--gold-bright); }
.bt-fine {
	margin-top: 24px; font-size: 12.5px; color: var(--muted);
	max-width: 520px; line-height: 1.6; font-family: var(--f-body);
}

/* --- CF7 response messages --- */
.wpcf7 form .wpcf7-response-output {
	margin: 32px 0 0 !important;
	padding: 16px 22px !important;
	border: none !important;
	border-left: 3px solid var(--gold) !important;
	background: rgba(200, 153, 104, 0.1) !important;
	color: var(--cream) !important;
	font-family: var(--f-body) !important;
	font-size: 14px !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--rust) !important;
	background: rgba(139, 58, 42, 0.15) !important;
}

/* CF7 spinner */
.wpcf7-spinner {
	background: var(--gold) !important;
}

/* --- What Happens Next --- */
.bt-what-next {
	margin-top: 60px; padding: 44px 40px;
	background: var(--bg-alt); border: 1px solid var(--hair);
}
.bt-what-next h3 {
	font-family: var(--f-display); font-size: 24px;
	letter-spacing: 0.06em; color: var(--cream);
	text-transform: uppercase; margin-bottom: 28px;
	padding-bottom: 20px; border-bottom: 1px solid var(--hair);
}
.bt-what-next ol { list-style: none; counter-reset: bt-counter; padding: 0; }
.bt-what-next li {
	counter-increment: bt-counter;
	padding: 18px 0 18px 60px; position: relative;
	color: var(--cream-dim); line-height: 1.7;
	border-bottom: 1px dashed var(--hair); font-size: 15px;
}
.bt-what-next li::before {
	content: counter(bt-counter, decimal-leading-zero);
	position: absolute; left: 0; top: 18px;
	font-family: var(--f-mono); font-size: 14px;
	color: var(--gold); letter-spacing: 0.16em;
}
.bt-what-next li:last-child { border-bottom: none; }
.bt-what-next li strong { color: var(--cream); font-weight: 500; }

/* --- Mobile --- */
@media (max-width: 800px) {
	.book-tickets { padding-top: 80px; }
	.bt-hero { padding: 40px 0; }
	.bt-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.bt-hero__poster { max-width: 280px; margin: 0 auto; }
	.bt-meta { gap: 24px; }
	.bt-callout { padding: 24px; }
	.bt-callout p { font-size: 15px; }
	.bt-grid { grid-template-columns: 1fr; }
	.bt-what-next { padding: 32px 24px; }
	.bt-what-next li { padding-left: 48px; }
	.bt-form-section { padding: 60px 0 80px; }
}


/* =========================================================
   Thank You page (page-thank-you.php)
   ========================================================= */

.ty-page {
	min-height: 100vh;
	padding-top: 100px;
	display: flex;
	align-items: center;
}

.ty-hero { padding: 100px 0; width: 100%; }

.ty-hero__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.ty-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	color: var(--gold);
	margin-bottom: 32px;
	animation: ty-pop 0.5s ease-out;
}

@keyframes ty-pop {
	0% { transform: scale(0.7); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

.ty-title {
	font-family: var(--f-display);
	font-size: clamp(44px, 6vw, 72px);
	line-height: 0.95;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 24px;
	letter-spacing: 0.02em;
}
.ty-title span {
	display: block;
	font-size: 0.3em;
	letter-spacing: 0.28em;
	color: var(--cream);
	margin-top: 14px;
}

.ty-tag {
	color: var(--cream-dim);
	font-weight: 300;
	line-height: 1.75;
	font-size: 17px;
	max-width: 520px;
	margin: 0 auto 40px;
}
.ty-tag strong { color: var(--cream); font-weight: 500; }

.ty-meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	padding: 24px 0;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	margin-bottom: 44px;
}
.ty-meta > div { display: flex; flex-direction: column; gap: 4px; }
.ty-meta .k {
	font-family: var(--f-mono);
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.24em;
}
.ty-meta .v {
	font-family: var(--f-display);
	font-size: 17px;
	color: var(--cream);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ty-actions { margin-bottom: 56px; }
.ty-actions .btn {
	display: inline-block;
	padding: 18px 44px;
	font-size: 13px;
	letter-spacing: 0.28em;
	border: 1px solid var(--gold);
	background: var(--gold);
	color: var(--bg);
	font-family: var(--f-body);
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s;
}
.ty-actions .btn:hover { background: var(--gold-bright); }

.ty-share__label {
	display: block;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.24em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.ty-share__links {
	display: flex;
	justify-content: center;
	gap: 18px;
}
.ty-share__links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--hair-strong);
	color: var(--cream-dim);
	transition: all 0.2s;
}
.ty-share__links a:hover {
	border-color: var(--gold);
	color: var(--gold);
}

@media (max-width: 800px) {
	.ty-page { padding-top: 80px; }
	.ty-hero { padding: 60px 0; }
	.ty-meta { gap: 24px; }
}

/* =========================================================
   Landing page (page-landing.php) — Section 1: Hero
   ========================================================= */

.ld-page { background: var(--bg); }

.ld-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: 90px;
	background-color: var(--bg);
}

/* --- Visual layer wrapper: full-bleed on desktop --- */
.ld-hero__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* --- Layer 1: Background image, fades in first --- */
.ld-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center 25%;
	background-repeat: no-repeat;
	opacity: 0;
	animation: ld-bg-in 1.4s ease-out forwards;
	animation-delay: 0.15s;
}

@keyframes ld-bg-in {
	from { opacity: 0; transform: scale(1.06); }
	to   { opacity: 1; transform: scale(1); }
}

/* --- Layer 2: Girl cutout, slides up after bg --- */
.ld-hero__girl {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 25%;
	height: 100%;
	max-height: 900px;
	width: auto;
	object-fit: contain;
	object-position: bottom center;
	transform: translate(-50%, 100%);
	opacity: 0;
	animation: ld-girl-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: 1.1s;
	pointer-events: none;
}

@keyframes ld-girl-in {
	from { transform: translate(-50%, 60px); opacity: 0; }
	to   { transform: translate(-50%, 0); opacity: 1; }
}

/* --- Overlay gradients --- */
.ld-hero__fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		90deg,
		rgba(10, 8, 6, 0) 0%,
		rgba(10, 8, 6, 0) 35%,
		rgba(10, 8, 6, 0.55) 55%,
		rgba(10, 8, 6, 0.85) 75%,
		var(--bg) 100%
	);
}

.ld-hero__fade-bottom {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to top,
		var(--bg) 0%,
		rgba(10, 8, 6, 0) 15%
	);
}

/* --- Text content, fades in last --- */
.ld-hero__content {
	position: relative;
	z-index: 3;
	width: 100%;
}

.ld-hero__text {
	max-width: 620px;
	margin-left: auto;
}

/* Staggered fade-up for each text element */
.ld-anim {
	opacity: 0;
	transform: translateY(18px);
	animation: ld-text-in 0.8s ease-out forwards;
}
.ld-anim--1 { animation-delay: 1.9s; }
.ld-anim--2 { animation-delay: 2.05s; }
.ld-anim--3 { animation-delay: 2.25s; }
.ld-anim--4 { animation-delay: 2.4s; }
.ld-anim--5 { animation-delay: 2.55s; }

@keyframes ld-text-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ld-hero__title {
	font-family: var(--f-display);
	font-size: clamp(56px, 7vw, 96px);
	line-height: 0.9;
	color: var(--gold);
	text-transform: uppercase;
	margin: 20px 0 28px;
	letter-spacing: 0.02em;
}
.ld-hero__title span {
	display: block;
	font-size: 0.3em;
	letter-spacing: 0.3em;
	color: var(--cream);
	margin-top: 14px;
}

.ld-hero__intro {
	color: var(--cream-dim);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	max-width: 520px;
	margin-bottom: 32px;
}
.ld-hero__intro strong { color: var(--cream); font-weight: 500; }

.ld-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	padding: 20px 0;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	margin-bottom: 36px;
}
.ld-hero__meta > div { display: flex; flex-direction: column; gap: 4px; }
.ld-hero__meta .k {
	font-family: var(--f-mono);
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.24em;
}
.ld-hero__meta .v {
	font-family: var(--f-display);
	font-size: 17px;
	color: var(--cream);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ld-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.ld-hero__actions .btn {
	display: inline-block;
	padding: 18px 36px;
	font-size: 13px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	text-decoration: none;
	font-family: var(--f-body);
	font-weight: 500;
	border: 1px solid var(--gold);
	transition: background 0.2s, color 0.2s;
}
.ld-hero__actions .btn.primary {
	background: var(--gold);
	color: var(--bg);
}
.ld-hero__actions .btn.primary:hover { background: var(--gold-bright); }
.ld-hero__actions .btn:not(.primary) {
	background: transparent;
	color: var(--gold);
}
.ld-hero__actions .btn:not(.primary):hover {
	background: var(--gold);
	color: var(--bg);
}

/* =========================================================
   Tablet + Mobile: two-row stacked layout
   Row 1 = bg + girl (fixed height)
   Row 2 = text content (normal flow, solid bg)
   ========================================================= */
@media (max-width: 1024px) {
	.ld-hero {
		flex-direction: column;
		align-items: stretch;
		min-height: auto;
		padding-top: 70px;
	}

	/* Row 1: visual becomes a normal block, fixed height */
	.ld-hero__visual {
		position: relative;
		inset: auto;
		width: 100%;
		height: 60vh;
		min-height: 420px;
		max-height: 640px;
		flex-shrink: 0;
	}

	.ld-hero__girl { 
		max-height: 100%; 
		left: 50%;
	}

	/* Row 1 fades: soft edges left/right + bottom transition into row 2 */
	.ld-hero__fade {
		background: linear-gradient(
			to top,
			var(--bg) 0%,
			rgba(10, 8, 6, 0.15) 22%,
			rgba(10, 8, 6, 0) 45%
		);
	}
	.ld-hero__fade-bottom {
		background: linear-gradient(
			to top,
			var(--bg) 0%,
			rgba(10, 8, 6, 0) 20%
		);
	}

	/* Row 2: text content, solid background, normal padding */
	.ld-hero__content {
		position: relative;
		z-index: 3;
		background: var(--bg);
		padding: 40px;
	}

	.ld-hero__text { max-width: 100%; margin-left: 0; }

	.ld-hero__meta { gap: 24px; }
	.ld-hero__actions { flex-direction: column; }
	.ld-hero__actions .btn { text-align: center; }
}

@media (max-width: 600px) {
	.ld-hero__visual { height: 50vh; min-height: 340px; }
	.ld-hero__content {
		position: relative;
		z-index: 3;
		background: var(--bg);
		padding: 20px;
	}
}

/* =========================================================
   Landing page — Shared section header pattern
   (used by every numbered section from here on)
   ========================================================= */

.ld-section-head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 56px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--hair);
}

.ld-section-num {
	font-family: var(--f-mono);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--gold);
}

.ld-section-title {
	font-family: var(--f-display);
	font-size: clamp(30px, 3.5vw, 44px);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cream);
	flex-grow: 1;
}
.ld-section-title .accent { color: var(--gold); }

.ld-section-tag {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.24em;
	color: var(--muted);
	text-transform: uppercase;
	white-space: nowrap;
}

/* =========================================================
   Section 2: The Story
   ========================================================= */

.ld-story { padding: 100px 0; }

.ld-story__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	align-items: start;
}

.ld-story__body p {
	color: var(--cream-dim);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.85;
	margin-bottom: 22px;
}
.ld-story__body p:last-child { margin-bottom: 0; }

.ld-story__lead { font-size: 17px; }

.ld-dropcap {
	float: left;
	font-family: var(--f-display);
	font-size: 72px;
	line-height: 0.8;
	color: var(--gold);
	padding-right: 12px;
	padding-top: 6px;
}

.ld-story__card {
	background: var(--bg-alt);
	border: 1px solid var(--hair);
	border-top: 3px solid var(--gold);
	padding: 32px 28px;
	position: sticky;
	top: 110px;
}

.ld-story__card-title {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hair);
}

.ld-story__specs > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--hair);
}
.ld-story__specs > div:last-child { border-bottom: none; }

.ld-story__specs dt {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.ld-story__specs dd {
	font-family: var(--f-body);
	font-size: 13.5px;
	color: var(--cream);
	text-align: right;
	margin: 0;
}

/* =========================================================
   Quote Banner
   ========================================================= */

.ld-quote {
	position: relative;
	padding: 90px 0;
	background: var(--bg-alt);
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	overflow: hidden;
	text-align: center;
}

.ld-quote__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--f-display);
	font-size: clamp(70px, 14vw, 180px);
	text-transform: uppercase;
	color: var(--cream);
	opacity: 0.04;
	white-space: nowrap;
	letter-spacing: 0.04em;
	pointer-events: none;
}

.ld-quote__inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

.ld-quote__eyebrow { justify-content: center; margin-bottom: 28px; }

.ld-quote__text {
	font-family: var(--f-display);
	font-size: clamp(24px, 3.2vw, 38px);
	line-height: 1.3;
	color: var(--cream);
	letter-spacing: 0.01em;
	margin: 0 0 28px;
}
.ld-quote__text .accent { color: var(--gold); }

.ld-quote__cite {
	display: block;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	font-style: normal;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
	.ld-story { padding: 64px 0; }
	.ld-story__grid { grid-template-columns: 1fr; gap: 40px; }
	.ld-story__card { position: static; }
	.ld-dropcap { font-size: 56px; }
	.ld-section-head { flex-wrap: wrap; gap: 10px 20px; margin-bottom: 40px; }
	.ld-section-tag { order: 3; width: 100%; }

	.ld-quote { padding: 64px 0; }
}
/* =========================================================
   Section 3: The Trailer (scroll-dock effect)
   ========================================================= */

.ld-trailer { padding: 100px 0; position: relative; }

/* The empty slot that defines where the video docks to */
.ld-trailer__slot {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	border-radius: 4px;
	background: var(--bg-alt);
	border: 1px solid var(--hair);
}

/* Once the fixed video has fully docked and scrolled past, this
   border matches the frame styling so there's no visual jump */
.ld-trailer__slot.is-filled {
	border: 3px solid var(--gold);
	outline: 4px solid var(--bg);
	outline-offset: -1px;
	box-shadow: 0 0 0 1px var(--hair-strong);
}

.ld-trailer__slot .ld-trailer__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 0 44px 32px;
}

.ld-trailer__caption-eyebrow {
	font-family: var(--f-mono);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cream-dim);
	margin-bottom: 8px;
}

.ld-trailer__caption-title {
	font-family: var(--f-display);
	font-size: clamp(26px, 3.6vw, 40px);
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.05;
	margin-bottom: 16px;
}
.ld-trailer__caption-title span {
	display: block;
	font-size: 0.6em;
	color: var(--cream);
	letter-spacing: 0.04em;
	text-transform: none;
	font-family: var(--f-body);
	font-weight: 300;
	margin-top: 4px;
}

.ld-trailer__caption-desc {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 480px;
}
.ld-trailer__caption-desc svg {
	flex-shrink: 0;
	color: var(--gold);
	margin-top: 2px;
}
.ld-trailer__caption-desc p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cream-dim);
	font-weight: 300;
}
.ld-trailer__caption-desc strong { color: var(--cream); font-weight: 500; }

/* --- The fixed, animating video dock --- */
.ld-trailer__dock {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

.ld-trailer__frame {
	position: fixed;
	overflow: hidden;
	background: #000;
	border: 3px solid var(--gold);
	box-shadow: 0 12px 40px rgba(0,0,0,0.5);
	cursor: pointer;
	pointer-events: auto;
	will-change: left, top, width, height;
}

.ld-trailer__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ld-trailer__pause-cue {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.85);
	z-index: 3;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(10, 8, 6, 0.55);
	border: 1px solid var(--gold);
	color: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}
.ld-trailer__frame:hover .ld-trailer__pause-cue,
.ld-trailer__frame.is-paused .ld-trailer__pause-cue { opacity: 0; transform: translate(-50%, -50%) scale(1); }
.ld-trailer__frame:not(.is-paused) .ld-trailer__pause-cue svg { display: none; }
.ld-trailer__frame.is-paused .ld-trailer__pause-cue svg { display: block; }

.ld-trailer__fade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	z-index: 1;
	background: linear-gradient(to top, rgba(10,8,6,0.95) 0%, rgba(10,8,6,0.6) 35%, rgba(10,8,6,0) 100%);
	pointer-events: none;
}

@media (max-width: 800px) {
	.ld-trailer { padding: 64px 0; }
	.ld-trailer__slot .ld-trailer__caption { padding: 0 22px 22px; }
	.ld-trailer__caption-desc { flex-direction: column; gap: 8px; }
	/* Disable the docking animation on mobile — too janky on small screens,
	   just show the video in-place normally */
	.ld-trailer__dock { display: none !important; }
	.ld-trailer__slot { border: 1px solid var(--gold); outline: 4px solid var(--bg); outline-offset: -1px; }
	.ld-trailer__slot::before {
		content: '';
		position: absolute;
		inset: 0;
		background: url('https://10kilosthemovie.com/wp-content/uploads/2026/07/trailer-poster.webp') center/cover;
	}
}

/* Caption fades in as the video approaches landed size, rather than
   always being visible — avoids overlapping small corner video */
.ld-trailer__slot .ld-trailer__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 0 44px 32px;
	opacity: 0;
	transition: opacity 0.2s;
}
.ld-trailer__slot.is-filled .ld-trailer__caption { opacity: 1; }

/* Sound confirmation badge, briefly shown when it lands */
.ld-trailer__sound-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(10, 8, 6, 0.75);
	border: 1px solid var(--gold);
	border-radius: 20px;
	color: var(--gold);
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}
.ld-trailer__sound-badge.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Once landed, allow the iframe to receive real clicks again
   (native Vimeo controls need pointer events) */
.ld-trailer__frame.has-landed iframe {
	pointer-events: auto;
}
.ld-trailer__frame.has-landed { cursor: default; }

/* Once landed, remove the custom gradient + hover-darken overlays
   so Vimeo's native controls are fully visible/readable */
.ld-trailer__frame.has-landed .ld-trailer__fade {
	display: none;
}
.ld-trailer__frame.has-landed::after {
	display: none;
}