#reels {
  --film-serif: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --film-ivory: #f3f1e7;
  padding-top: clamp(54px, 6.8vw, 112px);
  color: var(--film-ivory);
}
#reels .film-heading {
  display: flex;
  justify-content: center;
  margin: 0 auto clamp(30px, 4vw, 64px);
  text-align: center;
}
#reels .film-heading h2 {
  color: var(--film-ivory);
  font: 365 clamp(56px, 7.2vw, 132px)/1.13 Geist, Arial, sans-serif;
  letter-spacing: -.077em;
  padding: 0 .1em .035em;
}
#reels .film-heading em {
  font-family: var(--film-serif);
  font-weight: 400;
  letter-spacing: -.06em;
  color: #dbe3d0;
}
#reels .edition {
  border-radius: 13px;
  border-color: #d2ddd036;
  box-shadow: inset 0 1px #f4fff324;
}
#reels .edition-info { gap: 4px; }
#reels .edition-info strong {
  font: 400 clamp(31px, 4.2vw, 78px)/1.05 var(--film-serif);
  letter-spacing: -.042em;
  color: #fcfaf1;
}
#reels .edition-cut {
  font: 510 clamp(10px, .92vw, 15px)/1.4 Geist, Arial, sans-serif;
  letter-spacing: .04em;
  color: #e2e6dc;
}
#reels .edition-info small { margin-bottom: 4px; }
#reels .edition-info .cali-wordmark {
  display: block;
  width: clamp(59px, 5.2vw, 90px);
  height: auto;
}
#reels .filters .cali-wordmark {
  display: block;
  width: 75px;
  height: auto;
}
#hero-credit img.cali-emblem, #reels img.cali-emblem {
  display: inline-block;
  width: 23px;
  height: 23px;
  object-fit: contain;
  filter: brightness(0) invert(.96);
}
#reels .worktools {
  border: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 12px 20px;
  padding: clamp(10px, 1.5vw, 24px) 0 clamp(17px, 2vw, 28px);
  align-items: center;
}
#reels .filters, #reels .view-options {
  align-items: center;
  gap: 5px;
}
#reels .filters button, #reels .view-options button {
  min-height: 42px;
  padding: 5px 14px;
  border-radius: 999px;
  border-color: var(--glass-rim);
  color: var(--glass-ink);
  background: linear-gradient(168deg,#ffffff0c,transparent 65%),var(--glass-solid);
  font: 500 clamp(11px, .9vw, 14px)/1.2 Geist, Arial, sans-serif;
  --glass-rim: #e0e7d825;
  --glass-solid: #1c211e;
  --glass-fill: #aab5a70d;
  --glass-ink: #dde3d9;
  --glass-spec: #f5fff445;
}
#reels .filters button[aria-pressed="true"],
#reels .view-options button[aria-pressed="true"] {
  --glass-ink: #18201a;
  --glass-solid: #d7e0d5;
  --glass-fill: #cfdbcaeb;
  --glass-rim: #edf6e4c9;
}
#reels .view-options { margin: 0; flex: none; }
#reels .projector {
  border-radius: 16px;
  border-color: #ccd9c529;
  background: radial-gradient(ellipse at 30% 40%,#2c352e, #1a201b 43%, #121511 80%);
}
#reels .projector-header {
  border-color: #d8e8dc18;
}
#reels .projector-header .mini {
  font: 530 11px/1.4 Geist, Arial, sans-serif;
  letter-spacing: .045em;
  color: #dbe0d5;
  text-transform: none;
}
#reels .projector-header .dot { width: 5px; height: 5px; }
#reels .projector-footer { border-color: #d8e8dc18; }
#reels .score-page {
  border-color: #e1e9db39;
  background: linear-gradient(134deg,#505a4d87,#252d26b5 52%,#222923db);
  box-shadow: inset 0 1px #f2fff32b, 0 12px 28px #0003;
}
#reels .score-stack::before, #reels .score-stack::after {
  background: linear-gradient(130deg,#293029,#191e19);
  border-color: #cad6c534;
}
#reels .score-page h3 {
  font: 400 clamp(31px, 3.65vw, 68px)/1.025 var(--film-serif);
  letter-spacing: -.046em;
  color: var(--film-ivory);
  margin: 12px 0;
}
#reels .projection-client {
  font: 500 clamp(10px,.82vw,13px)/1.3 Geist, Arial, sans-serif;
  color: #cdd6ca;
  letter-spacing: .06em;
}
#reels .card h3 {
  font: 400 clamp(22px, 2vw, 38px)/1.08 var(--film-serif);
  margin: 14px 0 6px;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
#reels .film-credit {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 465 12px/1.4 Geist, Arial, sans-serif;
  color: #c1c8bb;
}
#reels .film-credit .cali-emblem { width: 14px; height: 14px; }
#reels .card-tag {
  border-radius: 100px;
  font: 520 9px/1.2 Geist, Arial, sans-serif;
  letter-spacing: .055em;
  color: #f6f7ef;
  background: #151c16a8;
  border: 1px solid #e0ebd941;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 680px) {
  #reels .worktools { flex-direction: column; align-items: flex-start; gap: 14px; }
  #reels .filters button, #reels .view-options button { padding: 4px 12px; min-height: 38px; }
  #reels .filters .cali-wordmark { width: 66px; }
  #reels .edition-info .cali-wordmark { width: 56px; }
  #reels .edition-info strong { font-size: clamp(26px,6.6vw,38px); }
  #reels .score-page h3 { margin: 3px 0 6px; font-size: clamp(26px,6.1vw,36px); }
  #reels .card h3 { margin-top: 11px; font-size: clamp(21px,4.8vw,29px); }
  #reels .film-credit { font-size: 11px; }
}

/* The master is vertical. Frame the hold beside its title on wide campaign cards. */
@media (min-width: 860px) {
  #reels .edition[data-reel="cali-essentials-studio"]::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: -16px;
    background: center / cover url("assets/iliesse-planche-essentials.webp");
    filter: blur(18px) brightness(.55);
  }
  #reels .edition[data-reel="cali-essentials-studio"] .edition-art {
    background-size: auto 108%;
    background-position: right center;
    background-repeat: no-repeat;
    mask-image: linear-gradient(90deg, transparent 20%, #000 67%);
  }
}

/* Keep the case results attached to the commissioned film in both gallery layouts. */
#reels .essentials-pair { align-items: start; }
#reels .essentials-case { margin: 0; min-width: 0; }
#reels .essentials-case .edition { width: 100%; }
#reels .campaign-outcome {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 2px 2px;
  font: 430 clamp(11px, .9vw, 14px)/1.45 Geist, Arial, sans-serif;
  color: #c4cdc2;
}
#reels .campaign-brief { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.45; color: #e5e8de; }
#reels .campaign-outcome strong { color: #f2f2e9; font-weight: 600; font-variant-numeric: tabular-nums; }
#reels .campaign-outcome i { color: #8e9a89; font-style: normal; }
#reels .campaign-outcome a { color: #d8e6cf; text-decoration: underline; text-underline-offset: .23em; }
#reels .campaign-outcome a:hover { color: #fff; }