:root {
  /* Locked review typography: never shrink based on review length or narrow mobile width. */
  --review-font-size: 18px;
  --review-line-height: 1.7;
  --like-green: #769b70;
  --like-green-soft: rgba(118,155,112,.12);
  --dislike-red: #a54a4d;
  --dislike-red-soft: rgba(165,74,77,.12);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * FINAL V2 browser-alignment corrections.
 * Artwork is not modified: live content is fitted into the locked AVIF windows.
 */

/* Clapboard: keep poster + compact facts in the upper two-column area, then use
   the full board width for Cast & Crew and My POV. Rating intentionally sits
   above those two final sections. */
.clapboard-body {
  min-height: 0;
  padding: 58px 14px 24px;
}
.clapboard-content {
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 15px;
  align-items: start;
}
.poster-frame {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1122 / 1402;
  align-self: start;
}
.poster-frame-art {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.poster-safe-zone {
  inset: 6.5% 6.2%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050505;
}
.movie-poster {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.movie-meta {
  min-width: 0;
  padding-top: 0;
}
.movie-title {
  margin-bottom: 13px;
}
.meta-list-primary > div {
  grid-template-columns: minmax(72px, .72fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
}
.meta-list-primary dd {
  font-size: .81rem;
  line-height: 1.38;
}

/* Full-width editorial treatment for the two final clapboard sections. */
.meta-list-wide {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}
.meta-list-wide > div {
  display: block;
  width: 100%;
  padding: 13px 0 14px;
  border-top: 1px solid rgba(216,174,99,.26);
}
.meta-list-wide dt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: #ddb56b;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.meta-list-wide dt::after {
  content: "";
  flex: 1 1 auto;
  min-width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(216,174,99,.52), rgba(216,174,99,0));
}
.meta-list-wide dd {
  width: 100%;
  margin: 10px 0 0;
  min-width: 0;
  color: var(--ivory);
  overflow-wrap: anywhere;
}
.meta-cast-row {
  margin-top: 0;
}
.movie-cast {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 0 5px;
  white-space: normal;
}
.cast-crew-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 27px;
}
.cast-role-label {
  display: inline-flex;
  width: 78px;
  min-width: 78px;
  justify-content: center;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(216,174,99,.62);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(216,174,99,.12), rgba(216,174,99,.045));
  box-shadow: inset 0 0 8px rgba(216,174,99,.035);
  color: #e1b96d;
  font-size: .58rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cast-role-value {
  min-width: 0;
  color: #f1eadb;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.42;
  overflow-wrap: anywhere;
  word-break: normal;
}
.movie-rating {
  color: var(--gold) !important;
  letter-spacing: .1em;
  white-space: nowrap;
}
.meta-pov-row {
  padding-bottom: 10px !important;
}
/* My POV should read like raw chalk written directly on the clapboard surface. */
.movie-pov {
  width: 100%;
  margin-top: 10px !important;
  padding: 0 5px 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(247,246,239,.94) !important;
  font-family: "Chalkboard SE", "Marker Felt", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 1.58 !important;
  letter-spacing: .012em;
  text-shadow:
    0 .35px 0 rgba(255,255,255,.22),
    0 0 .8px rgba(255,255,255,.18);
  overflow-wrap: anywhere;
}

/* Reactions: retain the black/gold cinema frame while giving each live action a
   restrained semantic color. Green/red stays muted so it does not fight the artwork. */
.reaction-button[data-vote="like"] svg {
  fill: var(--like-green);
}
.reaction-button[data-vote="like"] .reaction-label,
.reaction-button[data-vote="like"] strong {
  color: var(--like-green);
}
.reaction-button[data-vote="dislike"] svg {
  fill: var(--dislike-red);
}
.reaction-button[data-vote="dislike"] .reaction-label,
.reaction-button[data-vote="dislike"] strong {
  color: var(--dislike-red);
}
.reaction-button[data-vote="like"]:hover,
.reaction-button[data-vote="like"][aria-pressed="true"] {
  background: var(--like-green-soft);
}
.reaction-button[data-vote="dislike"]:hover,
.reaction-button[data-vote="dislike"][aria-pressed="true"] {
  background: var(--dislike-red-soft);
}
.reaction-button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -3px;
}

/* Theater: Asset 07 intentionally contains screen area below the MY REVIEW badge.
   Pull the stretchable middle upward into that screen area so review copy begins
   shortly below the badge instead of after a large empty block. */
.theater {
  position: relative;
}
.theater-top {
  position: relative;
  z-index: 1;
}
.theater-middle {
  position: relative;
  z-index: 2;
  margin-top: -18%;
  padding-top: 3.2%;
  min-height: 175px;
}
.review-body {
  position: relative;
  z-index: 3;
}

/* Asset 09 is intentionally dark, but on real phones the red seat rows disappear.
   Enhance only the rendered browser image: no AVIF pixels are changed. */
.theater-bottom {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  opacity: 1;
  filter: brightness(1.46) contrast(1.14) saturate(1.34);
  transform: translateZ(0);
  transform-origin: center top;
  filter-rendering: optimizeQuality;
}

/* Related reel artwork contains five physical windows. The browser crops the
   locked artwork after the last populated window, so an unused final frame is
   never shown. The underlying AVIF remains unchanged. */
.related-reel {
  --reel-full-width: 920px;
  --related-count: 4;
  position: relative;
  flex: none;
  width: calc(var(--reel-full-width) * var(--related-count) / 5);
  height: calc(var(--reel-full-width) * 549 / 2048);
  aspect-ratio: auto;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: var(--reel-full-width) 100%;
}
.related-grid {
  position: absolute;
  top: 13.5%;
  bottom: 14.1%;
  left: calc(var(--reel-full-width) * .0065);
  right: auto;
  width: calc(var(--reel-full-width) * .987);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .76%;
}
.related-card {
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 3px;
  padding: 5% 5.5% 4.5%;
}
.related-poster-zone {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.related-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.related-title {
  min-height: 2.25em;
  padding: 0 2px;
  color: var(--ivory);
  font-size: .69rem;
  line-height: 1.08;
  font-weight: 800;
  overflow: hidden;
}
.related-stars {
  min-height: 1.1em;
  color: var(--gold);
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
}

/* Comments artwork is a fixed 1496×880 horizontal shell. Match that ratio first,
   then position the live HTML exactly over the artwork's empty fields/panels. */
.comments-shell {
  min-height: 0;
  aspect-ratio: 1496 / 880;
  padding: 0;
  overflow: visible;
}
.comments-bg {
  background-size: 100% 100%;
}
.comments-content {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
}
.recent-comments {
  position: absolute;
  left: 3.75%;
  top: 16.1%;
  width: 41.1%;
  height: 77.5%;
  padding: 1.5% 1.5%;
  overflow: auto;
}
.add-comment {
  position: absolute;
  left: 50.55%;
  top: 16.1%;
  width: 45.15%;
  height: 77.8%;
}
.comment-form {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.comment-form input,
.comment-form textarea {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  border-color: transparent;
  border-radius: 0;
  background: rgba(0,0,0,.18);
  box-shadow: none;
  color: var(--ivory);
  padding: 0 3.2%;
  font-size: clamp(13px, 3.15vw, 16px);
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(216,174,99,.55);
}
#commentName {
  top: 0;
  height: 10.35%;
}
#commentEmail {
  top: 13.55%;
  height: 10.35%;
}
#commentText {
  top: 26.8%;
  height: 44.2%;
  min-height: 0;
  padding-top: 2.4%;
  padding-bottom: 2.4%;
  resize: none;
}
.comment-actions {
  position: absolute;
  left: 13.4%;
  right: 13.4%;
  top: 84.65%;
  height: 13.55%;
  margin: 0;
  display: block;
}
.comment-actions button {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 5%;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: clamp(.58rem, 2.1vw, .72rem);
  line-height: 1;
}
.comment-actions button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}
.comment-status {
  position: absolute;
  top: 101.5%;
  left: 0;
  width: 100%;
  min-height: 1.4em;
  margin: 0;
  padding: 0 2%;
  text-align: center;
}
.comment-empty {
  margin: 0;
  padding: 0;
}

@media (max-width: 370px) {
  :root {
    --review-font-size: 18px;
    --review-line-height: 1.7;
  }

  .clapboard-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .clapboard-content {
    grid-template-columns: minmax(0, 41%) minmax(0, 1fr);
    column-gap: 12px;
  }
  .meta-list-primary > div {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 6px;
  }
  .cast-crew-row {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 9px;
  }
  .cast-role-label {
    width: 72px;
    min-width: 72px;
  }
  .cast-role-value {
    font-size: .79rem;
  }
  .movie-pov {
    font-size: .96rem !important;
  }

  .related-reel {
    --reel-full-width: 860px;
    width: calc(var(--reel-full-width) * var(--related-count) / 5);
    height: calc(var(--reel-full-width) * 549 / 2048);
  }

  .comments-shell {
    /* Preserve artwork geometry rather than switching to a stacked layout. */
    min-height: 0;
  }
}