/*
 * Fleur Productions — editorial system
 *
 * A shared final layer based on the visual language of Polderjongens:
 * large direct type, dark theatrical fields, warm paper, wine, rust and gold.
 * This file is intentionally loaded after the page-specific styles.
 */

:root {
  --fp-ink: #120e10;
  --fp-panel: #21151b;
  --fp-wine: #6a2e43;
  --fp-rust: #9e4b36;
  --fp-gold: #d1a05f;
  --fp-paper: #efe5d5;
  --fp-paper-soft: #e7dac9;
  --fp-line-light: rgba(239, 229, 213, .28);
  --fp-line-dark: rgba(33, 21, 27, .3);
}

html {
  background: var(--fp-ink);
  color-scheme: dark;
}

body,
.theatre-site,
.fleur-site,
.fleur-detail,
.client-profile-page,
.client-work-page {
  margin: 0;
  background: var(--fp-ink);
  color: var(--fp-paper);
  font-family: "DM Sans", Arial, sans-serif;
}

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

img,
video,
iframe {
  max-width: 100%;
}

::selection {
  background: var(--fp-gold);
  color: var(--fp-ink);
}

/* Shared masthead */
.theatre-header,
.fleur-detail .theatre-header {
  position: relative;
  z-index: 30;
  background: var(--fp-ink);
}

.theatre-header .navbar,
.fleur-detail .theatre-header .navbar,
.client-profile-page > .navbar,
.client-work-page > .navbar {
  min-height: 74px;
  padding: 1rem clamp(1.2rem, 4vw, 4rem);
  border: 0;
  border-bottom: 1px solid rgba(209, 160, 95, .3);
  border-radius: 0;
  background: var(--fp-ink);
  box-shadow: none;
  color: var(--fp-paper);
  backdrop-filter: none;
}

.theatre-header .logo,
.fleur-detail .theatre-header .logo,
.client-profile-page > .navbar .logo,
.client-work-page > .navbar .logo {
  color: var(--fp-paper);
  font: 400 1.55rem/1 "Bebas Neue", Arial, sans-serif;
  letter-spacing: .06em;
  text-decoration: none;
}

.theatre-header .nav-links,
.fleur-detail .theatre-header .nav-links,
.client-profile-page > .navbar .nav-links,
.client-work-page > .navbar .nav-links {
  gap: clamp(.5rem, 1.6vw, 1.35rem);
  margin: 0;
  padding: 0;
}

.theatre-header .nav-links a,
.fleur-detail .theatre-header .nav-links a,
.client-profile-page > .navbar .nav-links a,
.client-work-page > .navbar .nav-links a {
  padding: .35rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(239, 229, 213, .7);
  font: 700 .67rem/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.theatre-header .nav-links a:hover,
.fleur-detail .theatre-header .nav-links a:hover,
.theatre-header .nav-links a.active,
.fleur-detail .theatre-header .nav-links a.active,
.client-profile-page > .navbar .nav-links a:hover,
.client-work-page > .navbar .nav-links a:hover,
.client-profile-page > .navbar .nav-links a.active,
.client-work-page > .navbar .nav-links a.active {
  border-bottom-color: var(--fp-gold);
  background: transparent;
  color: var(--fp-gold);
}

.theatre-header .language-switch,
.fleur-detail .theatre-header .language-switch,
.client-profile-page > .navbar .language-switch,
.client-work-page > .navbar .language-switch {
  padding: .34rem .48rem;
  border: 1px solid rgba(239, 229, 213, .22);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.theatre-header .language-pill,
.fleur-detail .theatre-header .language-pill,
.client-profile-page > .navbar .language-pill,
.client-work-page > .navbar .language-pill {
  padding: .12rem .22rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(239, 229, 213, .46);
  box-shadow: none;
  font: 700 .62rem/1 "DM Sans", Arial, sans-serif;
  letter-spacing: .08em;
}

.theatre-header .language-pill-active,
.fleur-detail .theatre-header .language-pill-active,
.client-profile-page > .navbar .language-pill-active,
.client-work-page > .navbar .language-pill-active {
  color: var(--fp-gold);
}

/* Shared editorial type */
.eyebrow,
.section-label,
.repost-label,
.home-clean-label {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.home-reframe em,
.repost-intro h1 em {
  color: var(--fp-gold);
  font-family: "Bebas Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.fleur-site .production-intro h1,
.contact-theatre h1,
.repost-intro h1,
.work-detail-intro h1,
.client-profile-page .project-section h1,
.client-work-page .client-work-hero h1 {
  font-family: "Bebas Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .8;
}

/* Home and overview pages now use the exact same restrained accents. */
.home-reframe {
  --home-ink: var(--fp-ink);
  --home-deep: var(--fp-panel);
  --home-paper: var(--fp-paper);
  --home-paper-deep: var(--fp-paper-soft);
  --home-wine: var(--fp-wine);
  --home-gold: var(--fp-gold);
}

.home-reframe .theatre-header {
  position: absolute;
  background: transparent;
}

.home-reframe .theatre-header .navbar {
  background: linear-gradient(180deg, rgba(18, 14, 16, .76), transparent);
}

.home-clean-hero h1 em {
  color: var(--fp-gold);
  font-size: 1em;
}

.home-video-feature {
  background: var(--fp-gold);
}

.home-event-band > div,
.home-clean-cta,
.collaborations-hero .collaborations-roll,
.collaborations-closing,
.productions-opening,
.repost-closing {
  background: var(--fp-wine);
}

.work-opening,
.about-editorial-hero {
  background: var(--fp-panel);
}

.work-choices,
.home-clean-intro,
.collaborations-intro,
.collaborations-ledger,
.about-manifesto,
.about-image-notes,
.about-experience,
.about-editorial-process,
.repost-main {
  background: var(--fp-paper);
}

.work-choice {
  border-radius: 0;
}

.work-choice:hover {
  background: var(--fp-paper-soft);
}

.choice-three {
  background: var(--fp-wine);
}

.choice-four {
  background: var(--fp-gold);
}

.work-closing,
.about-closing {
  background: var(--fp-rust);
}

.production-card {
  border-color: rgba(209, 160, 95, .35);
}

.production-card::after {
  background: linear-gradient(0deg, rgba(18, 14, 16, .93) 2%, rgba(18, 14, 16, .08) 70%);
}

/* Photography: a dark prologue and a clean, image-first gallery. */
.production-intro {
  min-height: 560px;
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 8vw, 9rem);
  background: var(--fp-panel);
  color: var(--fp-paper);
}

.production-intro .back-to-work {
  margin-bottom: clamp(4rem, 9vw, 8rem);
  color: rgba(239, 229, 213, .72);
}

.production-intro .eyebrow {
  color: var(--fp-gold);
}

.fleur-site .production-intro h1 {
  max-width: 62rem;
  font-size: clamp(5rem, 10vw, 10.5rem);
  text-transform: none;
}

.fleur-site .production-intro h1 em {
  color: var(--fp-gold);
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
}

.production-intro > p:last-child {
  max-width: 34rem;
  color: rgba(239, 229, 213, .74);
  font-family: "DM Sans", Arial, sans-serif;
}

.cast-photo-callout {
  border: 0;
  border-top: 1px solid var(--fp-line-dark);
  border-bottom: 1px solid var(--fp-line-dark);
  border-radius: 0;
  background: var(--fp-paper);
  color: var(--fp-panel);
  box-shadow: none;
}

.cast-photo-callout > span,
.cast-photo-callout a b {
  color: var(--fp-wine);
}

.full-photo-grid {
  background: var(--fp-ink);
}

.full-photo-grid .photo-grid-item {
  border: 1px solid rgba(239, 229, 213, .16);
  background: #080708;
}

.photo-credit {
  background: var(--fp-paper);
  color: var(--fp-panel);
  box-shadow: -5px -5px 0 var(--fp-gold);
}

/* Video, reels and shorts: replace the old rounded-card interface. */
.fleur-detail .work-section {
  padding: 0;
  background: var(--fp-ink);
  color: var(--fp-paper);
  text-align: left;
}

.fleur-detail .work-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
}

.fleur-detail .work-detail-intro {
  display: grid;
  max-width: none;
  min-height: 530px;
  place-content: end start;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 8vw, 9rem) clamp(4rem, 7vw, 7rem);
  background: var(--fp-wine);
  color: var(--fp-paper);
}

.fleur-detail .work-detail-intro .section-label {
  margin: 0 0 1.1rem;
  color: var(--fp-gold);
}

.fleur-detail .work-detail-intro h1 {
  max-width: 70rem;
  margin: 0;
  color: var(--fp-paper);
  font-size: clamp(5.6rem, 12vw, 12rem);
}

.fleur-detail .work-detail-intro > p:not(.section-label) {
  max-width: 36rem;
  margin: 1.7rem 0 0;
  color: rgba(239, 229, 213, .78);
  font-size: 1rem;
  line-height: 1.7;
}

.fleur-detail .work-back-button {
  width: fit-content;
  margin: 2rem 0 0;
  padding: 0 0 .4rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--fp-paper);
  box-shadow: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fleur-detail .work-block {
  margin: 0;
  padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 6vw, 6rem);
  background: var(--fp-panel);
}

.fleur-detail .work-block:nth-of-type(even) {
  background: var(--fp-ink);
}

.fleur-detail .work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem) clamp(1rem, 2vw, 2rem);
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}

.fleur-detail .work-card,
.fleur-detail .work-grid-wide .work-card,
.fleur-detail .work-grid-horizontal .work-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: .65rem;
  border: 1px solid rgba(239, 229, 213, .22);
  border-radius: 0;
  background: #080708;
  color: var(--fp-paper);
  box-shadow: none;
  text-align: left;
  transform: none;
}

.fleur-detail .work-card:nth-child(even) {
  margin-top: clamp(3rem, 7vw, 7rem);
}

.fleur-detail .work-card:hover {
  border-color: var(--fp-gold);
  transform: none;
}

.fleur-detail .short-wrapper,
.fleur-detail .video-wrapper,
.fleur-detail .insta-wrapper {
  border-radius: 0;
  background: #080708;
}

.fleur-detail .work-card h3 {
  color: var(--fp-paper);
  font: 400 clamp(2rem, 3vw, 3.2rem)/.9 "Bebas Neue", Arial, sans-serif;
}

.fleur-detail .work-card p {
  color: rgba(239, 229, 213, .68);
  line-height: 1.6;
}

.fleur-detail .cta-button,
.fleur-detail .work-block-action .cta-button {
  border: 0;
  border-radius: 0;
  background: var(--fp-gold);
  color: var(--fp-panel);
  box-shadow: none;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.theatre-video-intro {
  color: rgba(239, 229, 213, .72);
}

.theatre-video-card,
.theatre-video-card video {
  border-radius: 0;
}

.theatre-video-credit,
.theatre-video-sound {
  border-radius: 0;
}

/* Contact has the same paper/wine split as the Polderjongens introduction. */
.contact-theatre {
  min-height: min(820px, calc(100vh - 74px));
  background: var(--fp-wine);
}

.contact-theatre > div:first-child {
  align-self: center;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 8vw, 9rem);
}

.contact-theatre > div:first-child::before {
  display: none;
  content: none;
}

.contact-theatre .eyebrow {
  color: var(--fp-gold);
}

.contact-theatre h1 {
  font-size: clamp(5rem, 9vw, 9rem);
}

.contact-theatre h1 em {
  color: var(--fp-gold);
  font-family: inherit;
  font-style: normal;
}

.contact-notes span {
  border-radius: 0;
}

.theatre-form {
  border-radius: 0;
  background: var(--fp-paper);
  color: var(--fp-panel);
}

.theatre-form input,
.theatre-form textarea,
.theatre-form select {
  border-radius: 0;
  color-scheme: light;
}

.theatre-form .theatre-button {
  padding: 1rem 1.2rem;
  border-radius: 0;
  background: var(--fp-gold);
  color: var(--fp-panel);
  box-shadow: none;
}

/* Shared footers — one quiet close across every route. */
.theatre-footer,
.site-footer,
.client-profile-page .site-footer,
.client-work-page .site-footer {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 6rem) 1.6rem;
  border: 0;
  border-top: 1px solid rgba(209, 160, 95, .28);
  border-radius: 0;
  background: var(--fp-ink);
  color: var(--fp-paper);
  box-shadow: none;
}

.theatre-footer .logo,
.site-footer .footer-eyebrow {
  color: var(--fp-gold);
}

.theatre-footer a,
.site-footer a {
  color: var(--fp-paper);
}

.site-footer .footer-cta {
  border: 1px solid var(--fp-line-light);
  border-radius: 0;
  background: var(--fp-panel);
}

.site-footer .cta-button {
  border-radius: 0;
  background: var(--fp-gold);
  color: var(--fp-panel);
}

.site-footer .social-link {
  border-radius: 0;
}

/* The event stories keep their individual palettes, but share the same finish. */
.event-case-page .event-back-link,
.event-case-page .cats-series-copy > a {
  border-radius: 0;
}

.event-case-page .event-hero-meta,
.event-case-page .event-headliner figcaption,
.event-case-page .event-act figcaption,
.event-case-page .photo-credit {
  border-radius: 0;
}

@media (max-width: 950px) {
  .theatre-header .navbar,
  .fleur-detail .theatre-header .navbar,
  .client-profile-page > .navbar,
  .client-work-page > .navbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .theatre-header .nav-meta,
  .fleur-detail .theatre-header .nav-meta,
  .client-profile-page > .navbar .nav-meta,
  .client-work-page > .navbar .nav-meta {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .theatre-header .nav-links,
  .fleur-detail .theatre-header .nav-links,
  .client-profile-page > .navbar .nav-links,
  .client-work-page > .navbar .nav-links {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .theatre-header .nav-links::-webkit-scrollbar,
  .fleur-detail .theatre-header .nav-links::-webkit-scrollbar,
  .client-profile-page > .navbar .nav-links::-webkit-scrollbar,
  .client-work-page > .navbar .nav-links::-webkit-scrollbar {
    display: none;
  }

  .fleur-detail .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fleur-detail .work-card:nth-child(even) {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .production-intro,
  .fleur-detail .work-detail-intro {
    min-height: 470px;
  }

  .fleur-site .production-intro h1,
  .fleur-detail .work-detail-intro h1,
  .contact-theatre h1 {
    font-size: clamp(4.2rem, 19vw, 6rem);
  }

  .contact-theatre {
    grid-template-columns: minmax(0, 1fr);
  }

  .theatre-footer,
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .theatre-header .navbar,
  .fleur-detail .theatre-header .navbar,
  .client-profile-page > .navbar,
  .client-work-page > .navbar {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .production-intro,
  .fleur-detail .work-detail-intro,
  .contact-theatre > div:first-child,
  .fleur-detail .work-block {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .fleur-detail .work-card {
    padding: .4rem;
  }
}

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

/* Individual production stories use the Polderjongens editorial rhythm. */
.production-story-page .production-story-hero > img {
  filter: saturate(.82) contrast(1.08);
}

.production-story-page .polder-video-section[hidden] {
  display: none !important;
}

.production-story-page .production-story-video video {
  aspect-ratio: 1 / 1;
}

.production-story-page .production-story-video-horizontal video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Soldaat combines two wide bow films with three square portraits. */
.production-story-page[data-production="soldaat"] .production-story-video-horizontal {
  grid-column: 1 / -1;
  width: 83%;
}

.production-story-page[data-production="soldaat"] .production-story-video-horizontal:not(.polder-video-feature) {
  justify-self: end;
}

.production-story-page[data-production="soldaat"] .polder-video-card:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 620px);
  margin-top: 0;
}

@media (max-width: 850px) {
  .production-story-page[data-production="soldaat"] .production-story-video-horizontal {
    width: 100%;
  }
}

/* Willem's clips are vertical: preserve the complete frame instead of cropping it square. */
.production-story-page[data-production="willem"] .polder-video-grid {
  max-width: 900px;
  justify-items: center;
}

.production-story-page[data-production="willem"] .production-story-video {
  width: min(100%, 390px);
}

.production-story-page[data-production="willem"] .production-story-video video {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
}

.production-story-page[data-production="willem"] .polder-video-feature {
  width: min(100%, 540px);
  justify-self: center;
}

.production-story-page[data-production="willem"] .polder-video-feature video {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 28%;
}

/* Tick, Tick… Boom! uses vertical bow footage: show the full frame and keep the series compact. */
.production-story-page[data-production="tick"] .polder-video-grid {
  max-width: 1040px;
  justify-items: center;
}

.production-story-page[data-production="tick"] .production-story-video {
  width: min(100%, 360px);
}

.production-story-page[data-production="tick"] .production-story-video video {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
}

.production-story-page[data-production="tick"] .polder-video-feature {
  width: min(100%, 430px);
  justify-self: center;
}

.production-story-page[data-production="tick"] .polder-video-card:last-child {
  margin-top: 0;
}

.production-story-page[data-production="tick"] .polder-photo-grid {
  max-width: 1160px;
  row-gap: clamp(3.5rem, 7vw, 6rem);
}

.production-story-page[data-production="tick"] .story-photo-1,
.production-story-page[data-production="tick"] .story-photo-5 {
  grid-column: 1 / 13;
  margin-top: 0;
}

.production-story-page[data-production="tick"] .story-photo-2 {
  grid-column: 1 / 5;
}

.production-story-page[data-production="tick"] .story-photo-3 {
  grid-column: 5 / 9;
  margin-top: clamp(3rem, 6vw, 6rem);
}

.production-story-page[data-production="tick"] .story-photo-4 {
  grid-column: 9 / 13;
}

.production-story-page[data-production="tick"] .story-photo-6 {
  grid-column: 1 / 7;
  margin-top: 0;
}

.production-story-page[data-production="tick"] .story-photo-7 {
  grid-column: 7 / 13;
  margin-top: clamp(3rem, 6vw, 6rem);
}

.production-story-page[data-production="tick"] .story-photo-8 {
  grid-column: 2 / 7;
}

.production-story-page[data-production="tick"] .story-photo-9 {
  grid-column: 7 / 12;
  margin-top: clamp(3rem, 6vw, 6rem);
}

.production-story-page[data-production="willem"] .polder-photo-grid {
  max-width: 980px;
  row-gap: clamp(3.5rem, 7vw, 6rem);
}

.production-story-page[data-production="willem"] .story-photo-1,
.production-story-page[data-production="willem"] .story-photo-4 {
  grid-column: 2 / 12;
  margin-top: 0;
}

.production-story-page[data-production="willem"] .story-photo-2,
.production-story-page[data-production="willem"] .story-photo-5 {
  grid-column: 2 / 6;
  margin-top: 0;
}

.production-story-page[data-production="willem"] .story-photo-3,
.production-story-page[data-production="willem"] .story-photo-6 {
  grid-column: 7 / 11;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.production-story-page[data-production="willem"] .story-photo-7 {
  grid-column: 1 / 13;
  margin-top: 0;
}

.production-story-page[data-production="willem"] .story-photo-8 {
  grid-column: 2 / 6;
  margin-top: 0;
}

.production-story-page[data-production="willem"] .story-photo-9 {
  grid-column: 7 / 11;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.production-story-page[data-production="willem"] .production-story-video-square {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0;
}

.production-story-page[data-production="willem"] .production-story-video-paired-square {
  grid-column: auto;
}

.production-story-page[data-production="willem"] .production-story-video-square:not(.production-story-video-paired-square) {
  width: min(100%, 540px);
}

.production-story-page[data-production="willem"] .production-story-video-square video {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 14%;
}

.production-story-page .polder-opening-section[hidden] {
  display: none !important;
}

.production-story-page .polder-opening-section {
  padding-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgba(209,160,95,.28);
  background: #181014;
}

.production-story-page .polder-opening-grid {
  max-width: 1320px;
  row-gap: clamp(3.5rem, 7vw, 6rem);
}

.production-story-page .polder-opening-photo:nth-child(odd) {
  grid-column: 1 / 7;
}

.production-story-page .polder-opening-photo:nth-child(even) {
  grid-column: 7 / 13;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.production-story-page .story-photo-1 {
  grid-column: 1 / 13;
}

.production-story-page .story-photo-2 {
  grid-column: 1 / 5;
}

.production-story-page .story-photo-3 {
  grid-column: 5 / 9;
  margin-top: clamp(5rem, 10vw, 10rem);
}

.production-story-page .story-photo-4 {
  grid-column: 9 / 13;
}

.production-story-page .story-photo-5 {
  grid-column: 2 / 7;
}

.production-story-page .story-photo-6 {
  grid-column: 7 / 13;
  margin-top: clamp(4rem, 8vw, 8rem);
}

.production-story-page .story-photo-7 {
  grid-column: 1 / 13;
}

.production-story-page .story-photo-8 {
  grid-column: 1 / 5;
}

.production-story-page .story-photo-9 {
  grid-column: 5 / 13;
  margin-top: clamp(5rem, 10vw, 10rem);
}

.production-story-page .story-photo-10 {
  grid-column: 2 / 7;
}

.production-story-page .story-photo-11 {
  grid-column: 7 / 13;
  margin-top: clamp(4rem, 8vw, 8rem);
}

.production-story-page .story-photo-12 {
  grid-column: 1 / 13;
}

.production-story-page .story-photo-13 {
  grid-column: 1 / 8;
}

.production-story-page .story-photo-14 {
  grid-column: 8 / 13;
  margin-top: clamp(4rem, 8vw, 8rem);
}

.production-story-page .story-count-1 .story-photo-1 {
  grid-column: 4 / 10;
}

.production-story-page .story-count-2 .story-photo-1 {
  grid-column: 1 / 5;
}

.production-story-page .story-count-2 .story-photo-2 {
  grid-column: 5 / 13;
  margin-top: clamp(5rem, 10vw, 10rem);
}

.production-story-page .story-count-4 .story-photo-1 {
  grid-column: 1 / 7;
}

.production-story-page .story-count-4 .story-photo-2 {
  grid-column: 7 / 13;
  margin-top: clamp(5rem, 10vw, 10rem);
}

.production-story-page .story-count-4 .story-photo-3 {
  grid-column: 2 / 6;
  margin-top: 0;
}

.production-story-page .story-count-4 .story-photo-4 {
  grid-column: 6 / 12;
  margin-top: clamp(4rem, 8vw, 8rem);
}

@media (max-width: 680px) {
  .production-story-page[data-production="willem"] .production-story-video-paired-square {
    grid-column: 1;
  }

  .production-story-page[data-production="tick"] .polder-video-grid {
    grid-template-columns: 1fr;
  }

  .production-story-page[data-production="tick"] .production-story-video,
  .production-story-page[data-production="tick"] .polder-video-feature {
    width: min(100%, 390px);
  }

  .production-story-page .story-photo,
  .production-story-page .story-count-1 .story-photo-1,
  .production-story-page .story-count-2 .story-photo-1,
  .production-story-page .story-count-2 .story-photo-2,
  .production-story-page .story-count-4 .story-photo-1,
  .production-story-page .story-count-4 .story-photo-2,
  .production-story-page .story-count-4 .story-photo-3,
  .production-story-page .story-count-4 .story-photo-4 {
    grid-column: 1;
    margin-top: 0;
  }

  .production-story-page[data-production="willem"] .story-photo,
  .production-story-page[data-production="willem"] .story-photo-1,
  .production-story-page[data-production="willem"] .story-photo-2,
  .production-story-page[data-production="willem"] .story-photo-3,
  .production-story-page[data-production="willem"] .story-photo-4,
  .production-story-page[data-production="willem"] .story-photo-5,
  .production-story-page[data-production="willem"] .story-photo-6,
  .production-story-page[data-production="willem"] .story-photo-7,
  .production-story-page[data-production="willem"] .story-photo-8,
  .production-story-page[data-production="willem"] .story-photo-9 {
    grid-column: 1;
    width: min(100%, 460px);
    margin-top: 0;
    justify-self: center;
  }

  .production-story-page[data-production="willem"] .story-photo-1,
  .production-story-page[data-production="willem"] .story-photo-4,
  .production-story-page[data-production="willem"] .story-photo-7 {
    width: 100%;
  }

  .production-story-page[data-production="tick"] .story-photo,
  .production-story-page[data-production="tick"] .story-photo-1,
  .production-story-page[data-production="tick"] .story-photo-2,
  .production-story-page[data-production="tick"] .story-photo-3,
  .production-story-page[data-production="tick"] .story-photo-4,
  .production-story-page[data-production="tick"] .story-photo-5,
  .production-story-page[data-production="tick"] .story-photo-6,
  .production-story-page[data-production="tick"] .story-photo-7,
  .production-story-page[data-production="tick"] .story-photo-8,
  .production-story-page[data-production="tick"] .story-photo-9 {
    grid-column: 1;
    width: 100%;
    margin-top: 0;
    justify-self: center;
  }

  .production-story-page .polder-opening-photo,
  .production-story-page .polder-opening-photo:nth-child(odd),
  .production-story-page .polder-opening-photo:nth-child(even) {
    grid-column: 1;
    width: min(100%, 560px);
    margin-top: 0;
    justify-self: center;
  }
}