@font-face {
  font-family: "Cormorant Garamond";
  src: url("./assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

/* Jumbler — preview-only play button, without headings or controls underneath.
   Add this stylesheet AFTER the existing styles.css link.
   This file changes only the .film-section; it does not replace any artwork,
   page scripts, store settings, tutorial files, or support-form configuration.
*/

/* Keep the existing heading in the DOM for the section's accessible name.
   Remove the visible title, subtitle, Watch the film button, YouTube link,
   and explanatory text. The only visible element here is the video frame. */
.film-section .film-heading-row,
.film-section .film-underbar,
.film-section .film-privacy {
  display: none !important;
}

/* Keep loading announcements available to assistive technology without
   reserving any visible space beneath the player. */
.film-section .film-feedback {
  position: absolute;
  inset: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* YouTube supplies playback controls. There is no second button below it. */
.film-section .film-reset {
  display: none !important;
}

.film-section .film-preview {
  --preview-play-size: clamp(48px, 4.3cqw, 76px);
  --preview-play-y: 45%;
  cursor: pointer;
  isolation: isolate;
}

/* These two shapes belong ONLY to the clickable poster link. The existing
   script hides that link when it creates the one YouTube iframe; consequently
   this button never floats over the actual video or its built-in controls. */
.film-section .film-preview::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--preview-play-y);
  width: var(--preview-play-size);
  height: var(--preview-play-size);
  box-sizing: border-box;
  border: 2px solid #efcf70;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(43, 29, 27, .92), rgba(8, 5, 14, .94));
  box-shadow:
    inset 0 0 0 2px rgba(9, 5, 13, .9),
    inset 0 0 0 3px rgba(237, 191, 91, .27),
    0 0 0 4px rgba(9, 5, 13, .56),
    0 5px 20px rgba(0, 0, 0, .68);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.film-section .film-preview::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(50% + var(--preview-play-size) * .035);
  top: var(--preview-play-y);
  width: calc(var(--preview-play-size) * .29);
  height: calc(var(--preview-play-size) * .36);
  background: linear-gradient(135deg, #fff5bf, #f8cd62 52%, #bb761c);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.film-section .film-preview:hover::before,
.film-section .film-preview:focus-visible::before {
  border-color: #fff0ad;
  box-shadow:
    inset 0 0 0 2px rgba(9, 5, 13, .9),
    inset 0 0 0 3px rgba(237, 191, 91, .5),
    0 0 0 4px rgba(9, 5, 13, .56),
    0 0 24px rgba(225, 175, 63, .45);
}

.film-section .film-preview:focus-visible {
  outline: 3px solid #ffe6a0;
  outline-offset: -5px;
}

/* Explicit safeguard against a decorative control surviving playback. */
.film-section .film-preview[hidden] {
  display: none !important;
}
.film-section .film-preview[hidden]::before,
.film-section .film-preview[hidden]::after {
  content: none;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .film-section .film-preview::before {
    transition: none;
  }
}

/* Promo refresh: a clear invitation, native playback, and recoverable failures. */
.film-section .film-heading-row { display:flex !important; }
.film-section .film-heading-row h2 { font-size:clamp(14px,1.1vw,20px); letter-spacing:.035em; text-transform:none; }
.film-section .film-heading-row > span { display:none; }
.film-section .film-underbar { display:flex !important; justify-content:flex-end; margin-top:10px; }
.film-section .film-start { display:none !important; }
.film-section .film-underbar a { font-size:12px; padding:8px 0; text-decoration:underline; }
.film-section .film-privacy { display:block !important; font-size:12px; line-height:1.5; margin-top:0; }
.film-section .film-feedback { position:static; display:flex; width:auto; height:auto; margin:8px 4px 0; padding:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; align-items:center; }
.film-section .film-status { font-size:12px; }
.film-section .film-reset:not([hidden]) { display:block !important; min-height:44px; cursor:pointer; font-size:12px; }
.film-section .film-reset:focus-visible { outline:2px solid #ffe6a0; outline-offset:3px; }
.film-section .film-reset[hidden], .film-section .film-mount[hidden] { display:none !important; }
.film-section .film-surface { min-height:0; min-width:0; }
.film-section .film-preview { --preview-play-size:clamp(56px,5vw,80px); --preview-play-y:43%; }
.film-preview-label { position:absolute; bottom:0; left:0; right:0; padding:34px 12px 16px; background:linear-gradient(transparent,rgba(6,3,12,.95)); text-align:center; font:600 clamp(14px,1.2vw,20px)/1.4 system-ui,sans-serif; color:#fff2cf; }
.film-preview-label > span { display:block; font-size:12px; font-weight:400; color:#e3d4e7; margin-top:3px; }
.film-mount video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
@media (max-width:550px) { .film-preview-label { padding-bottom:10px; } }

/* Upright, naturally proportioned display lettering for the landing preview. */
.landing .tagline,
.landing .feature h2,
.film-section .film-heading-row h2,
.film-preview-label {
  font-family: "Cormorant Garamond", Garamond, Georgia, serif;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
}
.landing .tagline {
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.08;
}
.landing .feature h2 {
  font-weight: 600;
  letter-spacing: .025em;
}
.film-section .film-heading-row {
  margin-bottom: 14px;
}
.film-section .film-heading-row h2 {
  font-size: clamp(20px, 1.65vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .015em;
  color: #f1d89a;
  text-shadow: 0 2px 8px #000;
}
.film-preview-label {
  padding: 34px 12px 17px;
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .025em;
  color: #f8df9e;
  text-shadow: 0 2px 6px #000, 0 0 18px rgba(223, 176, 75, .18);
}
.film-preview-label::before,
.film-preview-label::after {
  content: "";
  display: inline-block;
  width: clamp(22px, 3vw, 44px);
  height: 1px;
  margin: 0 .65em;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, #c6a15c);
}
.film-preview-label::after {
  background: linear-gradient(90deg, #c6a15c, transparent);
}
@media (max-width:550px) {
  .film-preview-label { padding-bottom: 11px; font-size: 21px; }
  .film-section .film-heading-row h2 { font-size: 20px; }
}