.production-section{background:#e9ece6;overflow:hidden}
.production-grid--gallery{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:52px;align-items:start}
.production-gallery{min-width:0}
.production-gallery__viewport{position:relative;overflow:hidden;background:#17352d;box-shadow:0 24px 60px rgba(23,53,45,.12);touch-action:pan-y;cursor:grab}
.production-gallery__viewport.is-dragging{cursor:grabbing}
.production-gallery__track{display:flex;transition:transform .72s cubic-bezier(.19,1,.22,1);will-change:transform}
.production-gallery__slide{position:relative;flex:0 0 100%;height:clamp(430px,45vw,650px);margin:0;overflow:hidden;background:#17352d}
.production-gallery__slide img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.03);transform:scale(1.035);transition:transform 1.1s cubic-bezier(.19,1,.22,1),filter .7s ease}
.production-gallery__slide.is-active img{transform:scale(1);filter:saturate(.96) contrast(1.03)}
.production-gallery__slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,29,25,.05) 42%,rgba(10,29,25,.78) 100%);pointer-events:none}
.production-gallery__slide figcaption{position:absolute;z-index:1;left:28px;bottom:25px;color:#fff;font-size:clamp(20px,2vw,30px);font-weight:650;letter-spacing:-.02em}
.production-gallery__controls{display:flex;align-items:center;gap:14px;margin-top:15px}
.production-gallery__arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(23,53,45,.3);background:#f7f8f4;color:#17352d;font-size:20px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.production-gallery__arrow:hover{background:#17352d;color:#fff;border-color:#17352d}
.production-gallery__thumbs{display:flex;gap:8px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
.production-gallery__thumbs::-webkit-scrollbar{display:none}
.production-gallery__thumb{position:relative;flex:0 0 clamp(62px,7vw,92px);height:58px;padding:0;border:1px solid transparent;background:#cdd4ce;opacity:.58;overflow:hidden;cursor:pointer;transition:opacity .25s ease,border-color .25s ease,transform .25s ease}
.production-gallery__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.production-gallery__thumb:hover{opacity:.9;transform:translateY(-2px)}
.production-gallery__thumb.is-active{border-color:#c96844;opacity:1}
.production-gallery__meta{display:flex;justify-content:space-between;gap:15px;margin-top:12px;color:#5a6c64;font-size:10px;font-weight:800;letter-spacing:.14em}
.production-brief{position:sticky;top:112px;padding:31px 30px 28px;background:#17352d;color:#fff;box-shadow:0 24px 60px rgba(23,53,45,.12)}
.production-brief .section-kicker{color:#d88763;margin-bottom:24px}
.production-brief h3{margin:0 0 22px;font-size:clamp(35px,3.25vw,54px);line-height:.95;letter-spacing:-.055em}
.production-brief h3 em{color:#d5dfd3;font-family:Georgia,serif;font-weight:400}
.production-brief__lead{margin:0 0 28px;color:#d2ddd7;font-size:13px;line-height:1.75}
.production-brief__facts{border-top:1px solid rgba(255,255,255,.2)}
.production-brief__facts article{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.production-brief__facts b{color:#d88763;font-size:10px;letter-spacing:.08em}
.production-brief__facts h4{margin:0 0 6px;font-size:15px;line-height:1.2}
.production-brief__facts p{margin:0;color:#b8cbc1;font-size:11px;line-height:1.62}
@media (max-width:1100px){.production-grid--gallery{gap:32px}.production-brief{padding:26px 22px}.production-brief h3{font-size:38px}}
@media (max-width:900px){.production-grid--gallery{grid-template-columns:1fr;gap:35px}.production-brief{position:relative;top:auto}.production-gallery__slide{height:clamp(390px,65vw,560px)}}
@media (max-width:560px){.production-gallery__slide{height:390px}.production-gallery__slide figcaption{left:18px;bottom:18px;font-size:22px}.production-gallery__thumb{flex-basis:68px;height:48px}.production-gallery__arrow{width:36px;height:36px}.production-gallery__meta{font-size:8px}.production-brief h3{font-size:36px}}
@media (prefers-reduced-motion:reduce){.production-gallery__track,.production-gallery__slide img,.production-gallery__thumb{transition:none}}

/* Clean gallery controls: arrows live on the image and appear only on hover. */
.production-grid--gallery { align-items: center; }
.production-brief { position: relative; top: auto; align-self: center; }
.production-gallery__controls,
.production-gallery__meta { display: none !important; }
.production-gallery__viewport > .production-gallery__arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(23,53,45,.62);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .22s ease, background .22s ease, transform .22s ease;
}
.production-gallery__viewport > .production-gallery__arrow--prev { left: 18px; }
.production-gallery__viewport > .production-gallery__arrow--next { right: 18px; }
.production-gallery__viewport:hover > .production-gallery__arrow,
.production-gallery__viewport:focus-within > .production-gallery__arrow {
  opacity: 1;
  pointer-events: auto;
}
.production-gallery__viewport > .production-gallery__arrow:hover {
  background: #17352d;
  transform: translateY(-50%) scale(1.06);
}

/* Subtle white controls: visible enough to discover, quiet enough not to compete with the image. */
.production-gallery__viewport > .production-gallery__arrow {
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  opacity: .56;
  backdrop-filter: blur(2px);
}
.production-gallery__viewport:hover > .production-gallery__arrow,
.production-gallery__viewport:focus-within > .production-gallery__arrow { opacity: .56; }
.production-gallery__viewport > .production-gallery__arrow:hover {
  background: rgba(255,255,255,.28);
  color: #fff;
  opacity: .82;
}
.gallery-side-hit {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 35%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.gallery-side-hit--prev { left: 0; }
.gallery-side-hit--next { right: 0; }
.production-gallery.is-loop-resetting .production-gallery__slide img { transition: none !important; }
.production-gallery__slide img,
.production-gallery__slide.is-active img {
  transform: scale(1);
  filter: saturate(.92) contrast(1.03);
  transition: none;
}

/* Production chapter: turn the gallery into a dark factory-floor exhibit. */
.production-section {
  position: relative;
  background:
    radial-gradient(circle at 78% 8%, rgba(213,223,211,.1), transparent 25%),
    linear-gradient(118deg, #142b25 0%, #1b3930 57%, #10251f 100%);
  color: #f5f6ef;
}

.production-section::before {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px),
    linear-gradient(135deg, transparent 0 58%, rgba(216,135,99,.07) 58.2%, transparent 58.5%);
  content: "";
  pointer-events: none;
}

.production-section .section-heading h2 { color: #f5f6ef; }
.production-section .section-heading h2 em { color: #d88763; }
.production-section .section-heading > p { color: rgba(235,242,234,.68); }
.production-grid--gallery { grid-template-columns: minmax(0,1.8fr) minmax(300px,.82fr); gap: 30px; }

.production-gallery__viewport {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 78px rgba(2,15,11,.34), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.production-gallery__slide::after {
  background:
    linear-gradient(180deg, rgba(7,24,19,.06) 24%, rgba(7,24,19,.86) 100%),
    linear-gradient(90deg, rgba(7,24,19,.22), transparent 38%);
}

.production-brief {
  background: rgba(8,27,22,.56);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid #d88763;
  box-shadow: 0 30px 78px rgba(2,15,11,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.production-process-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 19px;
  padding: 0 3px;
  color: rgba(235,242,234,.54);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.production-process-rail::before {
  position: absolute;
  top: 50%;
  right: 3px;
  left: 3px;
  height: 1px;
  background: rgba(235,242,234,.22);
  content: "";
}

.production-process-rail::after {
  position: absolute;
  top: 50%;
  left: 3px;
  width: var(--production-progress, 0%);
  height: 2px;
  background: #d88763;
  content: "";
  transform: translateY(-.5px);
  transition: width .72s cubic-bezier(.19,1,.22,1);
}

.production-process-rail span {
  position: relative;
  z-index: 1;
  flex: 1 1 25%;
  padding-right: 7px;
  background: #17352d;
  color: rgba(235,242,234,.48);
  transition: color .32s ease, transform .32s ease;
}

.production-process-rail span::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border: 1px solid rgba(235,242,234,.55);
  border-radius: 50%;
  background: #17352d;
  content: "";
  vertical-align: -1px;
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.production-process-rail span.is-active { color: #f5f6ef; transform: translateY(-2px); }
.production-process-rail span.is-active::before { border-color: #d88763; background: #d88763; box-shadow: 0 0 0 4px rgba(216,135,99,.14); }

html.editorial-motion #production .production-process-rail {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .58s ease .24s, transform .7s cubic-bezier(.19,1,.22,1) .24s;
}

html.editorial-motion #production.is-chapter-visible .production-process-rail { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .production-grid--gallery { grid-template-columns: 1fr; gap: 28px; }
  .production-process-rail { margin-bottom: 2px; }
}

@media (max-width: 560px) {
  .production-process-rail { overflow-x: auto; padding-bottom: 4px; font-size: 7px; letter-spacing: .06em; }
  .production-process-rail span { min-width: 95px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .production-process-rail,
  .production-process-rail::after,
  .production-process-rail span { opacity: 1; transform: none; transition: none; }
}
