/* December — theatrical pressbook / filmmaker case study. */
.film-page.december-page {
  --dec-black: #080a0b;
  --dec-ink: #11100e;
  --dec-cream: #eee4c9;
  --dec-paper: #e7e1d5;
  --dec-muted: #9b978d;
  --dec-blue: #9eb7bc;
  --dec-wine: #3d1119;
  background: var(--dec-black);
  color: var(--dec-cream);
  overflow-x: hidden;
}

.film-page.december-page::before {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.film-page.december-page .dec-wrap {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.film-page.december-page .dec-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: clamp(18px, 3vw, 30px) var(--gutter);
  color: rgba(238, 228, 201, 0.76);
}

.film-page.december-page .dec-nav a:hover,
.film-page.december-page .dec-nav a:focus-visible { color: var(--dec-cream); }

.film-page.december-page .dec-section-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(17, 16, 14, 0.35);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.film-page.december-page .dec-section-label-light {
  border-color: rgba(238, 228, 201, 0.25);
  color: rgba(238, 228, 201, 0.72);
}

/* Hero */
.film-page.december-page .dec-hero {
  position: relative;
  min-height: max(680px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: #151a1b;
}

.film-page.december-page .dec-hero-image,
.film-page.december-page .dec-hero-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film-page.december-page .dec-hero-image {
  z-index: -2;
  max-width: none;
  object-fit: cover;
  object-position: center 48%;
}

.film-page.december-page .dec-hero-wash {
  z-index: -1;
  background: rgba(4, 7, 8, 0.48);
}

.film-page.december-page .dec-kicker,
.film-page.december-page .dec-credit,
.film-page.december-page .dec-hero-bottom,
.film-page.december-page .dec-overline {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(9px, 0.85vw, 12px);
  letter-spacing: 0.18em;
  line-height: 1.55;
  text-transform: uppercase;
}

.film-page.december-page .dec-kicker {
  position: absolute;
  top: clamp(94px, 13vh, 136px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.film-page.december-page .dec-credit { position: absolute; top: 28%; }
.film-page.december-page .dec-credit-left { left: var(--gutter); }
.film-page.december-page .dec-credit-right { right: var(--gutter); text-align: right; }

.film-page.december-page .dec-title-lockup {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 51%;
  transform: translateY(-50%);
  text-align: center;
}

.film-page.december-page .dec-title-lockup h1,
.film-page.december-page .dec-language h2,
.film-page.december-page .dec-grade h2,
.film-page.december-page .dec-plan h2,
.film-page.december-page .dec-theatrical h2,
.film-page.december-page .dec-gallery h2,
.film-page.december-page .dec-credits h2 {
  font-family: "Bodoni Moda", Didot, "Times New Roman", serif;
  font-weight: 400;
}

.film-page.december-page .dec-title-lockup h1 {
  font-size: clamp(70px, 17.2vw, 270px);
  letter-spacing: -0.065em;
  line-height: 0.76;
  white-space: nowrap;
}

.film-page.december-page .dec-overline { margin-bottom: clamp(16px, 2vw, 26px); }
.film-page.december-page .dec-byline {
  margin-top: clamp(16px, 2.5vw, 30px);
  font-family: "Bodoni Moda", Didot, serif;
  font-size: clamp(17px, 2vw, 29px);
  font-style: italic;
}
.film-page.december-page .dec-byline strong { font-style: normal; font-weight: 500; }

.film-page.december-page .dec-hero-bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(20px, 3vw, 34px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 20px;
}
.film-page.december-page .dec-hero-bottom p:last-child { text-align: right; }
.film-page.december-page .dec-hero-bottom a {
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
}
.film-page.december-page .dec-hero-bottom a:hover,
.film-page.december-page .dec-hero-bottom a:focus-visible { color: white; }

/* Introduction */
.film-page.december-page .dec-intro {
  padding: clamp(72px, 11vw, 160px) 0;
  background: var(--dec-paper);
  color: var(--dec-ink);
}

.film-page.december-page .dec-statement {
  max-width: 12.5em;
  margin-top: clamp(56px, 8vw, 110px);
  font-family: "Bodoni Moda", Didot, serif;
  font-size: clamp(42px, 7.2vw, 104px);
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.film-page.december-page .dec-statement i { font-weight: 400; }

.film-page.december-page .dec-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(48px, 10vw, 160px);
  align-items: start;
  margin-top: clamp(64px, 10vw, 140px);
}

.film-page.december-page .dec-prose {
  max-width: 650px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.36;
}
.film-page.december-page .dec-prose p + p { margin-top: 1em; }

.film-page.december-page .dec-meta [data-project-meta] { margin: 0 0 30px; }
.film-page.december-page .dec-meta .project-tags li {
  border-color: rgba(17, 16, 14, 0.55);
  color: var(--dec-ink);
}
.film-page.december-page .dec-meta .project-client {
  background: var(--dec-ink);
  color: var(--dec-paper);
}
.film-page.december-page .dec-meta .project-status {
  color: var(--dec-ink);
}
.film-page.december-page .dec-meta dl { border-top: 1px solid rgba(17, 16, 14, 0.25); }
.film-page.december-page .dec-meta dl div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(17, 16, 14, 0.25);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}
.film-page.december-page .dec-meta dt { color: rgba(17, 16, 14, 0.52); }

/* Trailer */
.film-page.december-page .dec-trailer {
  padding: clamp(72px, 10vw, 144px) 0;
  background: #0b1114;
}

.film-page.december-page .dec-trailer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(300px, 1.2fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: center;
}

.film-page.december-page .dec-trailer-copy h2 {
  margin-top: clamp(48px, 8vw, 100px);
  font-family: "Bodoni Moda", Didot, serif;
  font-size: clamp(50px, 7vw, 98px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.film-page.december-page .dec-trailer-copy h2 i { font-weight: 400; }
.film-page.december-page .dec-trailer-copy > p {
  max-width: 29em;
  margin-top: 32px;
  color: rgba(238, 228, 201, 0.67);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
}

.film-page.december-page .dec-trailer-player { width: min(100%, 560px); justify-self: end; }
.film-page.december-page .dec-trailer-player video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 78svh;
  background: black;
  object-fit: contain;
}
.film-page.december-page .dec-player-caption,
.film-page.december-page .dec-grade-pairs figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 228, 201, 0.58);
}

/* Visual language */
.film-page.december-page .dec-language,
.film-page.december-page .dec-plan,
.film-page.december-page .dec-gallery {
  padding: clamp(72px, 11vw, 160px) 0;
  background: var(--dec-black);
}

.film-page.december-page .dec-language h2,
.film-page.december-page .dec-plan h2,
.film-page.december-page .dec-gallery h2 {
  margin-top: clamp(52px, 8vw, 110px);
  font-size: clamp(58px, 10.2vw, 150px);
  letter-spacing: -0.055em;
  line-height: 0.82;
}

.film-page.december-page .dec-language h2 i,
.film-page.december-page .dec-plan h2 i,
.film-page.december-page .dec-gallery h2 i,
.film-page.december-page .dec-theatrical h2 i { font-weight: 400; }

.film-page.december-page .dec-beats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px) clamp(16px, 3vw, 42px);
  margin-top: clamp(64px, 11vw, 150px);
}
.film-page.december-page .dec-beat-wide { grid-column: 1 / -1; }
.film-page.december-page .dec-beat img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.film-page.december-page .dec-beat div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(238, 228, 201, 0.28);
  margin-top: 12px;
}
.film-page.december-page .dec-beat span,
.film-page.december-page .dec-beat p {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.6;
  text-transform: uppercase;
}
.film-page.december-page .dec-beat p { color: rgba(238, 228, 201, 0.58); }

/* Re-grade */
.film-page.december-page .dec-grade {
  padding: clamp(72px, 11vw, 160px) 0;
  background: var(--dec-paper);
  color: var(--dec-ink);
}

.film-page.december-page .dec-grade-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: end;
  margin: clamp(56px, 8vw, 110px) 0 clamp(58px, 9vw, 125px);
}
.film-page.december-page .dec-grade h2 {
  font-size: clamp(65px, 11vw, 164px);
  letter-spacing: -0.06em;
  line-height: 0.8;
}
.film-page.december-page .dec-grade .dec-prose { font-size: clamp(19px, 1.9vw, 26px); }

.film-page.december-page .dec-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #151515;
  user-select: none;
}
.film-page.december-page .dec-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.film-page.december-page .dec-compare-before {
  position: absolute;
  inset: 0;
  width: var(--position);
  overflow: hidden;
}
.film-page.december-page .dec-compare-before img { width: calc(100vw - (2 * var(--gutter))); }
@media (min-width: 1440px) {
  .film-page.december-page .dec-compare-before img { width: calc(1440px - (2 * var(--gutter))); }
}
.film-page.december-page .dec-compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 1px;
  background: white;
  transform: translateX(-50%);
  pointer-events: none;
}
.film-page.december-page .dec-compare-line::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border: 1px solid white;
  background: rgba(8, 10, 11, 0.5);
  content: "↔";
  color: white;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 36px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.film-page.december-page .dec-compare input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  cursor: ew-resize;
  opacity: 0;
}
.film-page.december-page .dec-compare-label {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  padding: 6px 9px;
  background: rgba(8, 10, 11, 0.7);
  color: white;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.film-page.december-page .dec-compare-label-before { left: 14px; }
.film-page.december-page .dec-compare-label-after { right: 14px; }
.film-page.december-page .dec-scrub-note {
  margin-top: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(17, 16, 14, 0.55);
}

.film-page.december-page .dec-tech {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(52px, 7vw, 90px);
  border-top: 1px solid rgba(17, 16, 14, 0.3);
}
.film-page.december-page .dec-tech div {
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid rgba(17, 16, 14, 0.3);
}
.film-page.december-page .dec-tech div + div { padding-left: 18px; border-left: 1px solid rgba(17, 16, 14, 0.3); }
.film-page.december-page .dec-tech dt,
.film-page.december-page .dec-tech dd {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}
.film-page.december-page .dec-tech dt { margin-bottom: 8px; color: rgba(17, 16, 14, 0.48); }

.film-page.december-page .dec-grade-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 52px);
  margin-top: clamp(64px, 10vw, 135px);
}
.film-page.december-page .dec-pair-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.film-page.december-page .dec-pair-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.film-page.december-page .dec-grade-pairs figcaption { color: rgba(17, 16, 14, 0.56); }

/* Storyboard reinterpretation */
.film-page.december-page .dec-plan-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
}
.film-page.december-page .dec-plan-head p {
  color: rgba(238, 228, 201, 0.64);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.45;
}
.film-page.december-page .dec-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  margin-top: clamp(65px, 10vw, 140px);
  list-style: none;
}
.film-page.december-page .dec-plan-grid li { display: grid; grid-template-columns: 40px 1fr; }
.film-page.december-page .dec-plan-grid img {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 15px;
  object-fit: cover;
}
.film-page.december-page .dec-plan-grid li:nth-child(1) img { object-position: center; }
.film-page.december-page .dec-plan-grid li:nth-child(2) img { object-position: center; }
.film-page.december-page .dec-plan-grid li:nth-child(3) img { object-position: 62% center; }
.film-page.december-page .dec-plan-grid span,
.film-page.december-page .dec-plan-grid p {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  line-height: 1.55;
  text-transform: uppercase;
}
.film-page.december-page .dec-plan-grid span { color: rgba(238, 228, 201, 0.42); }

/* Theatrical announcement */
.film-page.december-page .dec-theatrical {
  padding: clamp(72px, 11vw, 160px) 0;
  background: var(--dec-wine);
}
.film-page.december-page .dec-theatrical-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(48px, 9vw, 140px);
  align-items: center;
}
.film-page.december-page .dec-poster img { width: 100%; }
.film-page.december-page .dec-poster figcaption {
  margin-top: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 228, 201, 0.57);
}
.film-page.december-page .dec-theatrical h2 {
  margin-top: clamp(50px, 7vw, 90px);
  font-size: clamp(52px, 7.6vw, 108px);
  letter-spacing: -0.055em;
  line-height: 0.84;
}
.film-page.december-page .dec-theatrical-copy > p:not(.dec-progress-note) {
  margin-top: clamp(34px, 5vw, 60px);
  color: rgba(238, 228, 201, 0.76);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.42;
}
.film-page.december-page .dec-progress-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}
.film-page.december-page .dec-progress-note span { width: 7px; height: 7px; background: var(--dec-cream); border-radius: 50%; }

/* Stills */
.film-page.december-page .dec-gallery { border-bottom: 1px solid rgba(238, 228, 201, 0.16); }
.film-page.december-page .dec-stills { margin-top: clamp(60px, 10vw, 135px); gap: clamp(10px, 2vw, 26px); }
.film-page.december-page .dec-stills figure:nth-child(3n + 1) { grid-column: 1 / -1; }
.film-page.december-page .dec-stills img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film-page.december-page .dec-stills figure:nth-child(2) img,
.film-page.december-page .dec-stills figure:nth-child(3) img { aspect-ratio: 4 / 5; }
.film-page.december-page .dec-stills figcaption {
  padding: 48px 16px 12px;
  font-size: 9px;
}

/* Credits */
.film-page.december-page .dec-credits {
  padding: clamp(72px, 11vw, 150px) 0;
  background: var(--dec-paper);
  color: var(--dec-ink);
}
.film-page.december-page .dec-credits h2 {
  margin: clamp(58px, 8vw, 110px) 0;
  font-size: clamp(74px, 15vw, 220px);
  letter-spacing: -0.065em;
  line-height: 0.78;
  text-align: center;
}
.film-page.december-page .dec-credits-grid { border-top: 1px solid rgba(17, 16, 14, 0.3); }
.film-page.december-page .dec-credits-grid div {
  display: grid;
  grid-template-columns: minmax(180px, 0.4fr) 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(17, 16, 14, 0.3);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  line-height: 1.55;
  text-transform: uppercase;
}
.film-page.december-page .dec-credits-grid span { color: rgba(17, 16, 14, 0.5); }
.film-page.december-page .dec-credits-grid strong { font-weight: 400; }

.film-page.december-page .dec-footer {
  padding: 18px var(--gutter) 28px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 228, 201, 0.64);
}

@media (max-width: 900px) {
  .film-page.december-page .dec-credit { top: 25%; }
  .film-page.december-page .dec-intro-grid,
  .film-page.december-page .dec-trailer-grid,
  .film-page.december-page .dec-grade-head,
  .film-page.december-page .dec-plan-head,
  .film-page.december-page .dec-theatrical-grid { grid-template-columns: 1fr; }
  .film-page.december-page .dec-trailer-player { justify-self: center; width: min(100%, 430px); }
  .film-page.december-page .dec-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-page.december-page .dec-tech div:nth-child(3) { padding-left: 0; border-left: 0; }
  .film-page.december-page .dec-plan-head p { max-width: 34em; }
  .film-page.december-page .dec-theatrical-copy { order: -1; }
}

@media (max-width: 620px) {
  .film-page.december-page .dec-nav { width: 100vw; max-width: 100%; }
  .film-page.december-page .dec-nav .nav-links { margin-left: auto; }
  .film-page.december-page .dec-hero { min-height: max(620px, 100svh); }
  .film-page.december-page .dec-hero-image { object-position: 58% center; }
  .film-page.december-page .dec-credit { top: 23%; max-width: 42%; overflow-wrap: anywhere; }
  .film-page.december-page .dec-title-lockup { left: 10px; right: 10px; }
  .film-page.december-page .dec-title-lockup h1 { font-size: clamp(48px, 15.2vw, 64px); letter-spacing: -0.07em; }
  .film-page.december-page .dec-hero-bottom { grid-template-columns: 1fr; justify-items: center; row-gap: 10px; }
  .film-page.december-page .dec-hero-bottom p:first-child { display: none; }
  .film-page.december-page .dec-hero-bottom p:last-child { text-align: center; }
  .film-page.december-page .dec-intro-grid { gap: 44px; }
  .film-page.december-page .dec-beats,
  .film-page.december-page .dec-grade-pairs,
  .film-page.december-page .dec-plan-grid { grid-template-columns: 1fr; }
  .film-page.december-page .dec-beat-wide { grid-column: auto; }
  .film-page.december-page .dec-beat div { grid-template-columns: 120px 1fr; }
  .film-page.december-page .dec-tech { grid-template-columns: 1fr; }
  .film-page.december-page .dec-tech div + div { padding-left: 0; border-left: 0; }
  .film-page.december-page .dec-plan-grid img { aspect-ratio: 4 / 3; }
  .film-page.december-page .dec-stills { grid-template-columns: 1fr; }
  .film-page.december-page .dec-stills figure:nth-child(3n + 1) { grid-column: auto; }
  .film-page.december-page .dec-stills figure:nth-child(2) img,
  .film-page.december-page .dec-stills figure:nth-child(3) img { aspect-ratio: 16 / 9; }
  .film-page.december-page .dec-credits-grid div { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .film-page.december-page * { scroll-behavior: auto !important; }
}