/*
Theme Name: Cineplex
Description: A responsive editorial WordPress theme designed by Art Jazmines.
Version: 2.1.50
Author: Art Jazmines
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: cineplex
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope/Manrope-Variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora/Lora-Variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora/Lora-Italic-Variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
}

:root {
  --surface: #0d0b08;
  --obsidian: #0d0d11;
  --charcoal: #16161e;
  --elevated: #22222e;
  --text: #eae1d6;
  --muted: #d1c5b1;
  --primary: #ffe6b7;
  --gold: #f3c766;
  --on-gold: #261a00;
  --line: #4e4637;
  --serif: 'Lora', Georgia, serif;
  --sans: 'Manrope', Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 56px;
  --space-9: 64px;
  --space-11: 80px;
  --space-13: 96px;
  --shell-width: 1400px;
  color-scheme: dark;
  scroll-padding-top: var(--space-5);
}

/* 4px spacing scale. Thin strokes, optical letter spacing, fluid proportions and accessibility clipping are exceptions. */
* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  overflow-wrap: anywhere;
  background: var(--surface);
  color: var(--text);
  font: 400 16px/24px var(--sans);
}

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

a {
  color: var(--primary);
  text-underline-offset: .25em;

  &:hover {
    color: var(--gold);
  }
}

:focus-visible {
  outline: none;
  filter: brightness(1.2);
}

a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

button,
input,
textarea,
select {
  max-width: 100%;
  color: inherit;
  font: inherit;
  accent-color: var(--gold);
}

button,
input[type=submit] {
  cursor: pointer;
}

input,
textarea,
select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--space-2);
  background: var(--charcoal);
  caret-color: var(--gold);

  &::placeholder {
    color: var(--muted);
    opacity: 1;
  }
}

button,
input[type=submit],
.wp-block-button__link {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--space-2);
  background: var(--gold);
  color: var(--on-gold);
}

button,
input {
  &:disabled {
    opacity: .55;
    cursor: not-allowed;
  }
}

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

iframe {
  max-width: 100%;
}

figure {
  max-width: 100%;
  margin-inline: 0;
}

pre {
  overflow: auto;
  padding: var(--space-3);
  background: var(--obsidian);
}

table {
  max-width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--space-2);
  border: 1px solid var(--line);
  text-align: start;
}

hr {
  margin-block: var(--space-5);
  border: 0;
  border-top: 1px solid var(--line);
}

h1,
h2,
h3,
h4 {
  color: var(--primary);
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
}

h1 {
  margin: 0;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: -.02em;
}

h2 {
  font-size: 32px;
  line-height: 32px;
}

h3,
h4 {
  font-size: 24px;
  line-height: 24px;
}

p {
  margin: 0 0 var(--space-4);
}

.shell {
  width: min(100%, var(--shell-width));
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  z-index: 10000;
  inset: var(--space-3) auto auto var(--space-3);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--gold);
  color: var(--on-gold);
  clip-path: none;
}

.site-chrome {
  font: 400 16px/24px var(--sans);
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--obsidian);
  box-shadow: 0 4px 30px #0006;
}

.site-header {
  position: relative;
  z-index: 20;
  background: var(--obsidian);

  & .header-inner {
    display: flex;
    min-height: var(--space-11);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-3);
  }

  & .branding {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: row;
    gap: var(--space-3);
  }

  & .brand {
    display: flex;
    min-width: 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
  }

  & .brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  & .brand-name {
    font: 600 32px/40px var(--serif);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: font-size .24s ease, line-height .24s ease;
  }

  & .brand-tagline {
    margin-top: 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: max-height .24s ease, opacity .24s ease, visibility 0s linear 0s;
  }

  & .custom-logo-link {
    display: flex;
    flex-shrink: 0;
    transition: max-height .24s ease;
  }

  & .custom-logo {
    display: block;
    width: auto;
    max-width: none;
    max-height: var(--space-8);
    object-fit: contain;
    transition: max-height .24s ease;
  }
}

body.admin-bar .site-chrome {
  inset-block-start: 32px;
}

@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .site-chrome {
    inset-block-start: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar .site-chrome {
    inset-block-start: 0;
  }
}

.cineplex-nav {
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & a {
    display: inline-block;
    text-decoration: none;
  }

  & .current-menu-item > a,
  & .current-menu-ancestor > a {
    color: var(--gold);
  }

  & .menu-item-has-children {
    position: relative;
  }
}

.primary-nav {
  & > .menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
  }

  & a {
    padding-block: var(--space-2);
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;

    &:hover {
      color: var(--gold);
    }
  }

  & .sub-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 30;
    display: none;
    min-width: 208px;
    max-width: 280px;
    padding: var(--space-3);
    background: var(--elevated);
    box-shadow: 0 8px 20px #0006;

    & .sub-menu {
      position: static;
      min-width: 0;
      padding: var(--space-2) 0 var(--space-2) var(--space-3);
      box-shadow: none;
    }
  }

  & .menu-item-has-children {
    &:hover > .sub-menu,
    &:focus-within > .sub-menu {
      display: block;
    }
  }

  & > .menu > li:last-child > .sub-menu {
    inset-inline: auto 0;
  }
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gold);
}

.context-bar {
  font: 400 16px/24px var(--sans);
  background: var(--obsidian);
}

.context-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.context-controls {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
}

.context-search-toggle {
  display: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 0.5%, transparent);
  background: color-mix(in srgb, var(--gold) 0.5%, transparent);
  color: var(--muted);
  box-shadow: 0 3px 10px rgb(0 0 0 / 10%), inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  transition: width .24s ease, min-width .24s ease, flex-basis .24s ease, opacity .2s ease, transform .2s ease, visibility 0s linear .2s;

  &:hover,
  &[aria-expanded=true] {
    border-color: color-mix(in srgb, var(--gold) 2%, transparent);
    color: var(--gold);
  }

  & svg {
    display: block;
  }
}

.context-search {
  width: 100%;
  min-width: 0;
  flex: 0 1 240px;
  overflow: hidden;
  transition: flex-basis .24s ease, max-width .24s ease, max-height .24s ease, opacity .18s ease, transform .24s ease, visibility 0s linear .24s;
}

.secondary-nav {
  min-width: 0;
  width: 100%;
  flex: 1 1 0;

  & > .secondary-nav-swiper {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
    --nav-edge-fade: 24px;

    &.has-overflow-left {
      mask-image: linear-gradient(to right, transparent, #000 var(--nav-edge-fade), #000 100%);
      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--nav-edge-fade), #000 100%);
    }

    &.has-overflow-right {
      mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--nav-edge-fade)), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--nav-edge-fade)), transparent 100%);
    }

    &.has-overflow-left.has-overflow-right {
      mask-image: linear-gradient(to right, transparent, #000 var(--nav-edge-fade), #000 calc(100% - var(--nav-edge-fade)), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--nav-edge-fade), #000 calc(100% - var(--nav-edge-fade)), transparent 100%);
    }
  }

  & > .secondary-nav-swiper:not(.swiper-initialized) {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  & .swiper-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  & > .secondary-nav-swiper.swiper-initialized .swiper-wrapper {
    gap: 0;
  }

  & .swiper-wrapper > li {
    width: auto;
    flex: 0 0 auto;
  }

  & a {
    white-space: nowrap;
    padding-block: var(--space-2);
    color: var(--muted);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
  }

  & .sub-menu {
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid var(--line);
  }
}

.search-form {
  position: relative;
  width: 100%;
  min-width: 0;
  flex: 0 1 240px;
  margin-inline-start: auto;

  & input {
    width: 100%;
    height: var(--space-6);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-7);
    border: 0;
    border-radius: var(--space-4);
    background: var(--charcoal);
    font-size: 16px;
    line-height: 24px;
  }

  & button {
    position: absolute;
    inset: 0 auto 0 0;
    display: grid;
    width: var(--space-6);
    height: var(--space-6);
    place-items: center;
    padding: 0;
    border-radius: var(--space-4);
    background: transparent;
    color: var(--muted);
  }
}

#content {
  min-width: 0;
  flex: 1;
  outline: none;
}

.page-heading {
  padding-block: var(--space-6);
  background: var(--charcoal);

  & h1 {
    font-size: 32px;
    line-height: 32px;
  }
}

.heading-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.heading-copy {
  min-width: 0;
}

.heading-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em;
}

.heading-note {
  max-width: 30ch;
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--space-3);
  background: var(--obsidian);
  color: var(--muted);
  font-size: 16px;
}

.archive-description {
  max-width: 70ch;
  margin-top: var(--space-3);

  & p:last-child {
    margin: 0;
  }
}

.content-area {
  min-height: 120px;
  padding-block: var(--space-6);
}

.cineplex-hero {
  margin-bottom: var(--space-4);
}

.cineplex-hero-title {
  margin: 0 0 var(--space-4);
  color: var(--primary);
  font: 600 32px/1.1 var(--serif);
}

.cineplex-hero-image {
  margin-bottom: var(--space-4);

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.cineplex-hero-content {
  color: var(--text);

  & > :last-child {
    margin-bottom: 0;
  }
}

.entry-content {
  display: flow-root;
  min-width: 0;

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  & :where(p, ul, ol, blockquote):not([class]) {
    max-width: 75ch;
  }

  & a {
    text-decoration: underline;
  }

  & .alignwide,
  & .alignfull {
    width: 100%;
    margin-inline: 0;
  }

  & :where(ul, ol, blockquote) {
    margin-block: var(--space-4);
  }

  & :where(ul, ol) {
    padding-inline-start: var(--space-4);
  }

  & :where(figure, pre, table) {
    margin-block: var(--space-4);
  }
}

.alignleft {
  float: left;
  margin: 0 var(--space-4) var(--space-3) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--space-3) var(--space-4);
}

.aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}

.wp-caption-text,
.gallery-caption {
  color: var(--muted);
  font-size: 16px;
}

.wp-block-table {
  overflow-x: auto;
}

.post-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.post-summary {
  min-width: 0;

  & h2 {
    margin: var(--space-3) 0 var(--space-2);

    & a {
      text-decoration: none;
    }
  }
}

.search-page {
  font-size: 16px;
  line-height: 1.7;
}

.search-results-toolbar {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-4);
}

.search-results-search {
  position: relative;
  width: 100%;
  min-width: 0;
  flex: 1 1 240px;

  & input {
    width: 100%;
    height: var(--space-6);
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-7);
    border: 0;
    border-radius: var(--space-4);
    background: var(--charcoal);
    font-size: 16px;
    line-height: 24px;
  }

  & button {
    position: absolute;
    inset: 0 auto 0 0;
    display: grid;
    width: var(--space-6);
    height: var(--space-6);
    place-items: center;
    padding: 0;
    border-radius: var(--space-4);
    background: transparent;
    color: var(--muted);
  }
}

.search-results-count {
  margin: var(--space-2) 0 0;
  color: var(--text);
  font-size: 14px;
  text-align: center;
}

.search-results-filters {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 0 0 auto;

  & > label > span {
    opacity: 1;
  }

  & label {
    display: grid;
    gap: var(--space-1);
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
    flex: 1 1 0;
  }

  & .search-filter-toggle {
    display: flex;
    width: 100%;
    min-width: 150px;
    height: var(--space-6);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--space-2);
    background: var(--charcoal);
    color: var(--text);
    font-size: 16px;
    text-align: start;
  }

  & .search-filter-toggle-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & button {
    height: var(--space-6);
    box-sizing: border-box;
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .search-results-filters {
    width: min(100%, 420px);
    margin-inline-start: auto;
  }
}

.search-results-list {
  display: grid;
  scroll-margin-top: 200px;
}

.search-result {
  min-width: 0;
  padding-block: var(--space-3);

  &:first-child {
    padding-top: 0;
  }

  & h2 {
    margin: 0;
    font-family: var(--sans);
    font-size: 24px;
    line-height: 1.35;

    & a {
      text-decoration: none;
    }
  }
}

.search-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: 14px;
}

.search-result-type {
  opacity: 1;
}

.search-result-date {
  opacity: 1;
}

.search-result-excerpt {
  max-width: 75ch;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

.search-result-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: var(--space-1);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;

  & .cineplex-icon {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
  }
}

.search-no-results {
  margin: 0;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.post-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.post-meta {
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: 16px;
}

.featured-image {
  display: block;
  margin-bottom: var(--space-5);
}

.pagination,
.post-navigation,
.comments-area {
  margin-top: var(--space-6);
}

.search-pagination {
  margin-top: var(--space-6);
  min-width: 0;

  & .nav-links {
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
  }
}

.search-pagination-mobile {
  display: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.page-numbers {
  padding: var(--space-2);
}

.search-pagination .page-numbers {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;

  & .cineplex-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
  }

  &.current {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--on-gold);
    font-weight: 800;
  }

  &:not(.current):hover {
    border-color: var(--line);
  }

  &.prev,
  &.next {
    width: 40px;
    min-width: 40px;
    white-space: nowrap;
    gap: 0;
    padding-inline: 0;
    border-color: color-mix(in srgb, var(--line) 35%, transparent);

    & .pagination-label {
      display: none;
    }
  }
}

.comments-area {
  max-width: 75ch;
}

.comment-list {
  padding-inline-start: var(--space-4);
}

.comment-body {
  padding-block: var(--space-3);
}

.comment-form {
  & label {
    display: block;
  }

  & input:not([type=checkbox]),
  & textarea {
    width: 100%;
  }
}

.comment-form-cookies-consent label {
  display: inline;
}

.bypostauthor {
  background: transparent;
}

.sticky .post-summary {
  border-color: var(--gold);
}

.site-footer {
  font: 400 16px/24px var(--sans);
  background: var(--obsidian);
  color: var(--muted);

  & > .shell {
    padding-block: var(--space-9);
  }

  & .brand-name {
    font-size: 16px;
    line-height: 24px;
  }

  & .brand-tagline,
  & .footer-column h2,
  & .footer-column a,
  & .footer-links a,
  & .footer-bottom {
    font-size: 16px;
    line-height: 24px;
  }
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-11);
}

.footer-branding {
  & .brand-name {
    font-size: 16px;
    line-height: 16px;
  }

  & .custom-logo-link {
    display: flex;
    margin-bottom: var(--space-3);
  }
}

.footer-column {
  & h2 {
    margin: 0 0 var(--space-3);
    font: 800 16px/24px var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  & a {
    padding-block: var(--space-2);
    color: var(--muted);
    font-size: 16px;

    &:hover {
      color: var(--gold);
    }
  }

  & .sub-menu {
    padding-inline-start: var(--space-3);
  }
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 16px;

  & p {
    margin: 0;
  }
}

.footer-links {
  & > .menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  & a {
    padding-block: var(--space-2);
    color: var(--muted);
    font-size: 16px;

    &:hover {
      color: var(--gold);
    }
  }

  & .sub-menu {
    padding-inline-start: var(--space-3);
  }
}

.context-search-enhanced .site-chrome.is-compact {
  & .context-inner {
    min-height: 56px;
    padding-block: var(--space-2);
    transition: min-height .24s ease, padding .24s ease, gap .24s ease;
  }

  & .context-search-toggle {
    display: grid;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: var(--space-2);
    z-index: 1;
  }

  & .secondary-nav {
    margin-inline-end: 48px;
    transition: margin .24s ease;
  }

  & .context-bar:not(.is-search-open) .context-search {
    max-width: 0;
    max-height: 0;
    flex-basis: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(12px);
  }

  & .context-bar.is-search-open .context-inner {
    min-height: 0;
    padding-block: var(--space-3);
  }

  & .context-bar.is-search-open {
    & .secondary-nav {
      margin-inline-end: 0;
    }

    & .context-search-toggle {
      width: 0;
      min-width: 0;
      flex-basis: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-50%) scale(.8);
      pointer-events: none;
    }

    & .context-search {
      max-width: 240px;
      max-height: 40px;
      flex: 1 1 240px;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
      transition-delay: 0s;
    }
  }
}

@media (min-width: 1200px) {
  .menu-toggle {
    display: none !important;
  }

  .site-chrome.is-compact .site-header {
    & .header-inner {
      min-height: 56px;
      padding-block: 0;
    }

    & .branding {
      gap: var(--space-1);
    }

    & .brand-name {
      font-size: 16px;
      line-height: 20px;
    }

    & .brand-tagline {
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      transition-delay: 0s, 0s, .24s;
    }

    & .custom-logo-link {
      max-height: 32px;
    }

    & .custom-logo {
      max-height: 32px;
    }
  }

  .context-search-enhanced .site-chrome.is-compact {
    & .context-search-toggle {
      inset-block-start: var(--space-2);
      inset-inline-end: var(--space-7);
    }
  }

  #primary-navigation {
    max-width: 70%;
  }
}

.nav-drawer-header {
  display: none;
}

@media (max-width: 1199px) {
  .context-controls {
    display: contents;
  }

  .context-search-enhanced .site-chrome.is-compact .context-search-toggle {
    inset-inline-end: var(--space-7);
  }

  .site-header {
    & .header-inner {
      min-height: 56px;
      flex-wrap: wrap;
      padding-block: 0;
    }

    & .branding {
      flex: 1;
      gap: 8px;
    }

    & .custom-logo {
      max-height: 32px;
    }
  }

  #primary-navigation {
    flex-basis: 100%;
  }

  .primary-nav {
    & > .menu {
      align-items: flex-start;

      & > li {
        min-width: 144px;
      }
    }

    & .sub-menu {
      position: static;
      display: block;
      min-width: 0;
      max-width: none;
      padding: var(--space-2) 0 var(--space-2) var(--space-3);
      background: transparent;
      box-shadow: none;
    }
  }

  .nav-enhanced {
    & .menu-toggle:not([hidden]) {
      display: flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--line) 0.5%, transparent);
      border-radius: var(--space-2);
      background: color-mix(in srgb, var(--gold) 0.5%, transparent);
      color: var(--muted);
      box-shadow: 0 3px 10px rgb(0 0 0 / 10%), inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);

      &:hover {
        border-color: color-mix(in srgb, var(--gold) 2%, transparent);
        color: var(--gold);
      }
    }

    & #primary-navigation {
      position: fixed;
      inset: 0 0 0 auto;
      z-index: 2147483647;
      display: block;
      width: min(420px, 85vw);
      height: 100vh;
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 0 0 calc(var(--space-5) + env(safe-area-inset-bottom));
      background: var(--surface);
      box-shadow: -8px 0 32px #0008;
      transform: translateX(105%);
      visibility: hidden;
      transition: transform .24s ease, visibility 0s linear .24s;
    }

    & .nav-drawer-header {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      height: 80px;
      min-height: 80px;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding: env(safe-area-inset-top) var(--space-3) 0;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 33%, transparent);
      background: var(--surface);
      box-shadow: 0 8px 18px #0006;
    }

    & .nav-drawer-brand {
      display: flex;
      flex: 1;
      min-width: 0;
      align-items: center;
      gap: 8px;

      & .custom-logo-link {
        display: flex;
        align-items: center;
        width: auto;
        max-width: none;
        flex: 0 1 auto;
      }

      & .custom-logo {
        max-height: 32px;
      }

      & .brand {
        min-width: 0;
        align-self: center;
        text-decoration: none;
      }

      & .brand-copy {
        display: block;
        min-width: 0;
        flex: 1;
      }

      & .brand-name {
        display: block;
        color: var(--primary);
        font: 600 16px/1.35 var(--serif);
        letter-spacing: .12em;
        text-transform: uppercase;
      }

      & .brand-tagline {
        display: none;
      }
    }

    & .nav-drawer-close {
      display: grid;
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--gold);
      cursor: pointer;

      &:hover {
        background: transparent;
      }
    }

    & .primary-nav > .menu {
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: stretch;
      margin: var(--space-3) 0 0;

      & > li {
        min-width: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 5%, transparent);

        &:last-child {
          border-bottom: 0;
        }
      }

      & > li > a {
        display: block;
        padding: var(--space-4) var(--space-4);
        color: var(--muted);
        font: 600 15px/1.4 var(--sans);
        letter-spacing: .18em;
        text-decoration: none;
        text-transform: uppercase;

        &:hover {
          color: var(--gold);
        }
      }
    }

    & .site-chrome.is-menu-open {
      z-index: 2147483647;
    }

    & .menu-toggle[aria-expanded=true] + #primary-navigation {
      transform: translateX(0);
      visibility: visible;
      transition-delay: 0s;
    }

    & .site-chrome.is-menu-open .site-header {
      z-index: 60;
    }

    & .menu-toggle[aria-expanded=true] {
      position: relative;
      z-index: 3;
    }

    & .nav-scrim:not([hidden]) {
      position: fixed;
      inset: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: rgb(0 0 0 / 65%);
      opacity: 0;
      visibility: hidden;
      transition: opacity .24s ease, visibility 0s linear .24s;
    }

    & .site-chrome.is-menu-open .nav-scrim:not([hidden]) {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }
  }

  .context-inner {
    align-items: flex-start;
  }

  .footer-columns {
    gap: var(--space-5);
  }
}

html.nav-drawer-open {
  overflow: hidden;

  & body {
    position: fixed;
    inset-inline: 0;
    top: var(--nav-scroll-y);
    width: 100%;
    overflow: hidden;
  }
}

html.nav-drawer-restoring {
  overflow-anchor: none;
}

html.nav-header-transitioning body {
  overflow-anchor: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .site-header .custom-logo {
    max-height: var(--space-8);
  }
}

@media (max-width: 767px) {
  .context-search-enhanced .site-chrome.is-compact .context-search-toggle {
    inset-inline-end: var(--space-3);
  }

  .site-header {
    & .header-inner {
      gap: var(--space-3);
    }

    & .brand-name {
      font-size: 24px;
    }

    & .brand-tagline {
      font-size: 16px;
      letter-spacing: .14em;
    }
  }

  #primary-navigation .primary-nav a {
    font-size: 12px;
  }

  .context-inner {
    flex-direction: column;
    gap: var(--space-3);
  }

  .context-search {
    max-width: none;
    flex-basis: auto;
  }

  .search-form {
    max-width: none;
    flex-basis: auto;
  }

  .secondary-nav {
    width: 100%;
  }

  .context-search-enhanced .context-bar:not(.is-search-open) {
    & .context-inner {
      min-height: 56px;
      flex-direction: row;
      align-items: center;
      padding-block: var(--space-2);
    }

    & .secondary-nav {
      width: auto;
      flex: 1;
      margin-inline-end: 48px;
    }

    & .context-search-toggle {
      display: grid;
      position: absolute;
      inset-block-start: var(--space-2);
      inset-inline-end: var(--space-3);
      z-index: 1;
    }

    & .context-search {
      max-width: 0;
      max-height: 0;
      flex-basis: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateX(12px);
    }
  }

  .context-search-enhanced .context-bar.is-search-open {
    & .context-inner {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-3);
    }

    & .secondary-nav {
      margin-inline-end: 0;
    }

    & .context-search-toggle {
      width: 0;
      min-width: 0;
      flex-basis: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    & .context-search {
      width: 100%;
      max-width: none;
      max-height: 40px;
      flex: 0 1 auto;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }
  }

  .site-chrome.is-compact {
    & .context-inner {
      flex-direction: row;
      align-items: center;
    }

    & .secondary-nav {
      width: auto;
      flex: 1;
    }

    & .context-bar.is-search-open {
      & .context-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
      }

      & .secondary-nav {
        margin-inline-end: 0;
      }

      & .context-search-toggle {
        inset-block-start: var(--space-3);
        transform: none;
      }

      & .context-search {
        width: 100%;
        max-width: none;
        flex: 0 1 auto;
      }
    }
  }

  .context-search-enhanced .site-chrome.is-compact .context-search-toggle {
    inset-inline-end: var(--space-4);
  }

  .context-search-enhanced .site-chrome.is-compact .context-bar.is-search-open .context-search {
    width: 100%;
    max-width: none;
    flex: 0 1 auto;
  }

  .page-heading {
    padding-block: var(--space-5);

    & h1 {
      font-size: 32px;
      line-height: 32px;
    }
  }

  .heading-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  h2 {
    font-size: 24px;
    line-height: 24px;
  }

  .heading-note {
    max-width: 100%;
    flex-shrink: 1;
  }

  .heading-context {
    gap: var(--space-2);
    font-size: 16px;
  }

  .content-area {
    padding-block: var(--space-5);
  }

  .post-list {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-7);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .site-footer > .shell {
    padding-block: var(--space-7);
  }

  .alignleft,
  .alignright {
    float: none;
    margin: 0 0 var(--space-4);
  }
}

@media (max-width: 420px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .primary-nav > .menu {
    flex-direction: column;
  }

  .site-header {
    & .brand-name {
      font-size: 24px;
    }

    & .branding {
      gap: var(--space-2);
    }

    & .custom-logo-link {
      max-width: none;
    }
  }

  .menu-toggle {
    padding: var(--space-2);
    font-size: 16px;
  }

  .context-search-enhanced .site-chrome.is-compact .context-search-toggle {
    inset-inline-end: var(--space-3);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition: color .18s ease, background-color .18s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .context-inner,
  .context-search-toggle,
  .context-search,
  .secondary-nav,
  #primary-navigation,
  .nav-scrim {
    transition: none;
  }
}

@media (forced-colors: active) {
  button,
  input,
  .heading-note {
    border: 1px solid ButtonText;
  }
}

.cineplex-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
  font-size: 24px;
  vertical-align: middle;
}

/* Text and native content rhythm on the same 8px baseline. */
h5,
h6 {
  margin-block: var(--space-4);
  font-size: 16px;
  line-height: 24px;
}

.brand-tagline,
.primary-nav a,
.secondary-nav a,
.heading-context,
.heading-note,
.post-meta,
.wp-caption-text,
.gallery-caption,
.footer-column a,
.footer-links a,
.footer-bottom,
.bento-meta,
.bento-read,
.menu-toggle {
  line-height: 24px;
}

/* Compact site chrome; card copy keeps its own sans-serif hierarchy. */
.site-header {
  & .brand-name {
    font-size: 24px;
    line-height: 32px;
  }

  & .brand-tagline {
    font-size: 14px;
    line-height: 1.2;
  }
}

@media (max-width: 767px) {
  .search-results-count {
    display: none;
  }

  .search-results-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: end;
  }

  .search-results-filters label {
    min-width: 0;
    gap: 2px;
    font-size: 14px;
  }

  .search-results-filters .search-filter-toggle,
  .search-results-filters button {
    height: 40px;
    min-width: 0;
    padding-block: var(--space-1);
    font-size: 16px;
  }

  .search-results-filters button {
    grid-column: 1 / -1;
  }

  .search-pagination {
    display: none;
  }

  .search-pagination-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .search-pagination-mobile-control {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
  }

  .search-pagination-mobile-control.is-disabled {
    opacity: .33;
  }

  .search-pagination-mobile-status {
    display: inline-flex;
    min-width: 72px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--muted);
    font-size: 16px;
  }

  .search-pagination-mobile-current {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--space-1);
    color: var(--text);
    background: transparent;
    font: inherit;
    line-height: 32px;
    padding: 0;
    text-align: center;
    appearance: none;
    cursor: pointer;
  }

  .search-pagination-mobile-current option {
    background: var(--charcoal);
    color: var(--text);
  }

  .search-pagination-mobile .cineplex-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transform: translateY(1px);
  }

  .site-header .brand-name {
    font-size: 16px;
    line-height: 16px;
  }

  .site-header .brand-tagline {
    font-size: 5px;
  }
}

@media (min-width: 768px) {
  .context-search-enhanced .site-chrome.is-compact .context-search-toggle {
    inset-inline-end: var(--space-3);
  }
}

@media (min-width: 768px) {
  .site-header .brand-tagline {
    font-size: 8px;
  }
}

.secondary-nav a {
  font-size: 14px;
  line-height: 24px;
}

.page-heading h1 {
  font-size: 32px;
  line-height: 32px;
}

.heading-context,
.heading-note {
  font-size: 16px;
  line-height: 24px;
}

.site-footer {
  & .brand-name {
    font-size: 16px;
    line-height: 24px;
  }

  & .brand-tagline,
  & .footer-column h2,
  & .footer-column a,
  & .footer-links a,
  & .footer-bottom {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 767px) {
  .page-heading h1 {
    font-size: 24px;
    line-height: 24px;
  }
}

@media (max-width: 767px) {
  .context-search-enhanced .context-bar:not(.is-search-open) .context-search-toggle {
    inset-inline-end: var(--space-3);
  }
}

@media (min-width: 1200px) {
  .site-header {
    & .branding {
      flex: 0 1 320px;
    }

    & #primary-navigation {
      min-width: 0;
      flex: 1;
    }
  }

  .primary-nav > .menu {
    justify-content: flex-end;
    column-gap: var(--space-3);
  }

  .primary-nav > .menu > li > a {
    font-size: 12px;
  }
}

/* Shared navigation typography across desktop and mobile layouts. */
body.cineplex-site :is(#primary-navigation, .secondary-nav) a {
  font-size: 16px;
}

/* Requested typography exceptions to the 8px scale. */
#menu-minor-menu a {
  font-size: 12px;
}

.heading-context {
  font-size: 10px;
}

.site-footer {
  & .brand-tagline {
    font-size: 8px;
  }
}

.footer-column {
  & h2 {
    font-size: 10px;
  }

  & a {
    padding-block: 0;
    font-size: 12px;
    line-height: 16px;
  }

  & li {
    line-height: 16px;

    & + li {
      margin-block-start: var(--space-2);
    }
  }
}

.site-footer {
  & .brand-name {
    font-size: 14px;
  }

  & .brand-tagline {
    font-size: 10px;
    line-height: 1.2;
  }

  & .footer-branding .brand {
    text-decoration: none;
  }

  & .footer-branding .brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  & .footer-column h2 {
    font-size: 12px;
    line-height: 16px;
  }

  & .footer-column a,
  & .footer-links a {
    font-size: 12px;
    line-height: 16px;
  }

  & .footer-bottom,
  & .footer-bottom a {
    font-size: 12px;
    line-height: 16px;
  }
}

.footer-bottom,
.footer-bottom a {
  font-size: 12px;
}

.heading-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);

  & h1 {
    min-width: 0;
  }
}

.post-back-button {
  display: inline-flex;
  width: var(--space-6);
  height: var(--space-6);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;

  & .cineplex-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 1;
  }
}

/* Shared footer typography, using the homepage scale on every template. */
body.cineplex-site .site-footer {
  & .brand-tagline {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .02em;
  }

  & .footer-column h2,
  & .footer-column a,
  & .footer-links a,
  & .footer-bottom,
  & .footer-bottom a {
    font-size: 14px;
    line-height: 1.5;
  }

  & .brand-name {
    font-size: 24px;
    line-height: 1.3;
  }

}

/* Homepage typography: 16px reading text with a 14px supporting scale. */
body.home {
  & .heading-context,
  & .heading-note {
    font-size: 14px;
    line-height: 1.5;
  }

  & .page-heading h1 {
    font-size: clamp(32px, 3vw, 40px);
    line-height: 1.2;
  }
}

/* Reference editorial bento: seven native WordPress stories. */
@keyframes bento-wiggle {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-.6deg); }
  40%, 80% { transform: rotate(.6deg); }
}

.cineplex-home {
  --bento-bg: #16130d;
  --bento-line: #332b1e;
  --bento-gold: #e0b868;
  --bento-muted: #b0aaa0;
  --bento-title: #eee8de;
  --bento-accent-border: #786035;
  --bento-badge-bg: #0b0906e8;
  --bento-overlay-top: #09070420;
  --bento-dispatch-end: #211b12;

  & .cineplex-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }

  & .bento-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    grid-column: span 3;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--bento-line);
    border-radius: 16px;
    background: var(--bento-bg);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;

    &:hover {
      border-color: color-mix(in srgb, var(--bento-line) 82%, var(--bento-title) 18%);
      box-shadow: 0 5px 16px #0002;
      transform: scale(1.005);

      & h2 a {
        color: var(--bento-gold);
      }
    }

    &:active {
      transform: scale(.995);
    }

      & h2 {
      margin: 0;
      font: 600 24px/1.3 var(--serif);
      text-wrap: pretty;

      & a {
        color: var(--bento-title);
        text-decoration: none;

        &::after {
          position: absolute;
          inset: 0;
          z-index: 2;
          content: ' ';
        }
      }
    }

    & .bento-excerpt {
      display: -webkit-box;
      max-width: none;
      margin: 0;
      overflow: hidden;
      color: var(--bento-muted);
      font-size: 16px;
      line-height: 1.6;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }

  & .bento-image {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 16 / 11;
    border-radius: 10px;
    background: var(--surface);

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    & > img {
      position: relative;
      z-index: 1;
      object-fit: contain;
    }
  }

  & .bento-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
  }

  & .bento-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    color: var(--bento-muted);
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;

    & .bento-category {
      display: none;
      color: var(--bento-gold);
    }

    & time {
      font-size: 14px;
    }
  }

  & .bento-badge {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 16px;
    max-width: calc(100% - 32px);
    padding: 3px 10px;
    border: 1px solid var(--bento-accent-border);
    border-radius: 24px;
    background: var(--bento-badge-bg);
    color: var(--bento-gold);
    font-size: 10px;
    line-height: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  & .bento-card.page .bento-badge {
    display: none;
  }

  & .bento-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
  }

  & .bento-bottom-first .bento-footer {
    display: none;
  }

  & .bento-credit {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--bento-muted);
    font-size: 14px;
    line-height: 20px;
  }

  & .bento-author-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--bento-accent-border);
    border-radius: 50%;
    color: var(--bento-gold);
    font: 700 14px/1 var(--sans);
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }

  & .bento-read {
    display: inline-flex;
    align-items: center;
    align-self: auto;
    flex-shrink: 0;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--bento-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 20px;
    text-transform: uppercase;

    & .cineplex-icon {
      width: 10px;
      height: 10px;
      font-size: 14px;
      line-height: 1;
    }
  }

  & .bento-lead {
    min-height: 560px;
    grid-column: span 7;
    grid-row: span 3;

    & > .bento-image {
      position: absolute;
      z-index: -2;
      inset: 0;
      aspect-ratio: auto;
      border-radius: 0;

      &::after {
        position: absolute;
        z-index: 2;
        inset: 0;
        background: linear-gradient(180deg, var(--bento-overlay-top) 0%, color-mix(in srgb, var(--bento-bg) 54.9%, transparent) 35%, color-mix(in srgb, var(--bento-bg) 96.1%, transparent) 65%, var(--bento-bg) 100%);
        content: "";
        pointer-events: none;
      }
    }

    & > .bento-copy {
      justify-content: flex-end;
      gap: 16px;
      margin-top: 200px;
      padding: 32px;
    }

    & h2 {
      font-size: 36px;
      line-height: 1.2;
    }

    & .bento-meta {
      margin-bottom: -8px;
      font-size: 14px;

      & time {
        font-size: 14px;
      }
    }

    & .bento-excerpt {
      font-size: 16px;
      -webkit-line-clamp: 4;
    }

    & .bento-footer {
      margin-top: 8px;
    }

    & .bento-badge {
      z-index: 3;
    }
  }

  & .bento-compact {
    grid-column: span 2;
    gap: 16px;
    padding: 16px;

    &:nth-child(3) {
      grid-column: span 3;
    }

    & .bento-copy {
      gap: 8px;
    }

    & .bento-footer {
      flex-wrap: wrap;
      margin-top: auto;
    }

    & .bento-author-mark {
      display: none;
    }
  }

  & .bento-horizontal {
    display: flex;
    align-items: center;
    flex-direction: row;
    grid-column: span 5;
    gap: 16px;
    padding: 16px;

    & > .bento-image {
      width: 88px;
      height: 104px;
      flex-shrink: 0;
      aspect-ratio: auto;
    }

    & h2 {
      font-size: 22px;
    }

    & .bento-excerpt {
      -webkit-line-clamp: 2;
    }
  }

  & .bento-wide {
    grid-column: span 8;
    align-items: center;
    flex-direction: row;
    gap: 24px;
    padding: 24px;

    & > .bento-image {
      width: 40%;
      aspect-ratio: 4 / 3;
      height:100%;
    }

    & .bento-copy {
      align-self: stretch;
      gap: 12px;
    }

    & h2 {
      font-size: 28px;
    }

    & .bento-footer {
      margin-top: auto;
    }
  }

  & .bento-image-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;

    & img {
      transform: scale(1.15);
      filter: blur(12px) brightness(.65);
      object-fit: cover;
    }
  }

  & .bento-dispatch {
    grid-column: span 4;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, var(--bento-bg), var(--bento-dispatch-end));

    & > .bento-image {
      aspect-ratio: 2 / 1;
    }

    & .bento-copy {
      align-self: stretch;
    }

    & .bento-footer {
      margin-top: auto;
    }
  }

  @media (min-width: 1400px) {
    & .cineplex-bento {
      grid-template-columns: repeat(14, minmax(0, .9fr)) repeat(10, minmax(0, 1.14fr));
    }

    & .bento-horizontal,
    & .bento-wide {
      & .bento-badge {
        display: none;
      }

      & .bento-category {
        display: inline;
      }

      & .bento-meta time {
        display: none;
      }
    }

    & .bento-lead {
      grid-column: span 14;
    }

    & .bento-compact,
    & .bento-compact:nth-child(3) {
      grid-column: span 5;
    }

    & .bento-horizontal {
      grid-column: span 10;
    }

    & .bento-wide {
      grid-column: span 16;
    }

    & .bento-dispatch {
      grid-column: span 8;
    }
  }

  @media (max-width: 1399.98px) {
    & .cineplex-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    & .bento-lead,
    & .bento-wide {
      grid-column: span 2;
      grid-row: auto;
    }

    & .bento-compact,
    & .bento-compact:nth-child(3),
    & .bento-horizontal,
    & .bento-dispatch {
      grid-column: span 1;
    }

    & .bento-horizontal {
      align-items: stretch;
      flex-direction: column;

      & > .bento-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
      }
    }

    & .bento-dispatch:last-child {
      grid-column: span 2;
      flex-direction: row;

      & > .bento-image {
        width: 35%;
        aspect-ratio: 1 / 1;
      }
    }
  }

  @media (min-width: 1100px) and (max-width: 1399.98px) {
    & .cineplex-bento {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    & .bento-lead {
      min-height: 520px;
      grid-column: 1 / span 2;
      grid-row: 1 / span 3;
    }

    & .bento-card:nth-child(2) {
      grid-column: 3;
      grid-row: 1;
      gap: 12px;
      padding: 12px;

      & > .bento-image {
        aspect-ratio: 16 / 10;
      }

      & .bento-copy {
        gap: 6px;
      }

      & .bento-meta {
        gap: 4px;
        font-size: 14px;
        letter-spacing: .03em;
        line-height: 1.2;
      }

      & .bento-meta time {
        font-size: 14px;
      }

      & h2 {
        font-size: 22px;
        line-height: 1.2;
      }

      & .bento-excerpt {
        font-size: 16px;
        line-height: 1.6;
      }

      & .bento-footer {
        padding-top: 8px;
      }

      & .bento-credit,
      & .bento-read {
        font-size: 14px;
        line-height: 20px;
      }
    }

    & .bento-card:nth-child(3),
    & .bento-card:nth-child(4) {
      display: flex;
      align-items: center;
      flex-direction: row;
      grid-column: 3;
      gap: 12px;
      padding: 12px;

      & > .bento-image {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
        aspect-ratio: auto;
      }

      & > .bento-copy {
        min-width: 0;
        gap: 4px;
      }

      & h2 {
        font-size: 22px;
        line-height: 1.25;
      }

      & .bento-meta {
        gap: 4px;
        font-size: 14px;
        letter-spacing: .02em;
        line-height: 1.2;
      }

      & .bento-meta time {
        display: none;
      }

      & .bento-badge {
        display: none;
      }

      & .bento-category {
        display: inline;
      }

      & .bento-excerpt {
        font-size: 16px;
        line-height: 1.6;
        -webkit-line-clamp: 2;
      }

      & .bento-footer {
        gap: 4px;
        padding-top: 4px;
      }

      & .bento-credit {
        font-size: 14px;
      }

      & .bento-read {
        display: none;
      }
    }

    & .bento-card:nth-child(3) {
      grid-row: 2;
    }

    & .bento-card:nth-child(4) {
      grid-row: 3;
    }

    & .bento-card:nth-child(5),
    & .bento-card:nth-child(6),
    & .bento-card:nth-child(7) {
      align-items: stretch;
      flex-direction: column;
      grid-row: 4;
      gap: 12px;
      padding: 16px;

      & > .bento-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
      }

      & > .bento-copy {
        align-self: stretch;
        gap: 6px;
      }

      & .bento-meta {
        gap: 4px;
        font-size: 14px;
        letter-spacing: .03em;
        line-height: 1.2;
      }

      & .bento-meta time {
        font-size: 14px;
      }

      & h2 {
        font-size: 22px;
        line-height: 1.25;
      }

      & .bento-excerpt {
        font-size: 16px;
        line-height: 1.6;
      }

      & .bento-footer {
        padding-top: 8px;
      }
    }

    & .bento-card:nth-child(5) {
      grid-column: 1;

      & .bento-footer {
        display: flex;
      }
    }

    & .bento-card:nth-child(5).post,
    & .bento-card:nth-child(6).post {
      & .bento-badge {
        display: block;
      }
    }

    & .bento-card:nth-child(6) {
      grid-column: 2;
      align-items: stretch;
      gap: 12px;
      padding: 16px;
    }

    & .bento-card:nth-child(7) {
      grid-column: 3;
    }
  }

  @media (min-width: 600px) and (max-width: 1099.98px) {
    & .bento-wide,
    & .bento-dispatch:last-child {
      & .bento-badge {
        display: none;
      }

      & .bento-category {
        display: inline;
      }

      & .bento-meta time {
        display: none;
      }
    }
  }

  @media (max-width: 599.98px) {
    & .cineplex-bento {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    & .bento-card,
    & .bento-compact:nth-child(3),
    & .bento-dispatch:last-child {
      grid-column: 1;
      grid-row: auto;
    }

    & .bento-lead {
      min-height: 520px;

      & > .bento-copy {
        padding: 24px;
      }

      & h2 {
        font-size: 30px;
      }
    }

    & .bento-wide,
    & .bento-dispatch:last-child {
      align-items: stretch;
      flex-direction: column;
    }

    & .bento-wide > .bento-image,
    & .bento-dispatch:last-child > .bento-image {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
    }

    & .bento-horizontal {
      align-items: center;
      flex-direction: row;

      & .bento-badge {
        display: none;
      }

      & .bento-category {
        display: inline;
      }

      & > .bento-image {
        width: 72px;
        height: 96px;
        aspect-ratio: auto;
      }

      & h2 {
        font-size: 22px;
      }

      & .bento-meta time {
        display: none;
      }
    }

    & .bento-footer {
      flex-wrap: wrap;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    & .bento-card {
      transition: none;

    }
  }
}

  :is(body.single, body.page:not(.home)) {
    --article-black: var(--surface);
    --article-card: var(--charcoal);
    --article-panel: var(--elevated);
    --article-border: var(--line);
    --article-gold: var(--gold);
    --article-gold-light: var(--primary);
    --article-gold-muted: var(--muted);
    --article-cream: var(--text);
    --article-muted: var(--muted);
    --article-body: var(--text);
    background: var(--article-black);
    color: var(--article-body);
    font-family: var(--sans);
  }

  :is(body.single, body.page:not(.home)) .article-hero {
    position: relative;
    padding-block: clamp(40px, 6vw, 40px) 40px;
    border-bottom: 1px solid color-mix(in srgb, var(--article-border) 70%, transparent);
    background: radial-gradient(ellipse at 50% 0, var(--charcoal) 0, var(--article-black) 72%);
  }

  :is(body.single, body.page:not(.home)) .article-heading {
    display: grid;
    gap: var(--space-1);
  }

  :is(body.single, body.page:not(.home)) .article-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--article-gold);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
  }

  :is(body.single, body.page:not(.home)) .article-kicker span {
    width: 24px;
    height: 1px;
    flex: 0 0 auto;
    background: var(--article-gold);
  }

  :is(body.single, body.page:not(.home)) .article-back-link {
    color: var(--article-muted);
    font: inherit;
    letter-spacing: .12em;
    text-decoration: none;
  }

  :is(body.single, body.page:not(.home)) .article-back-link:hover {
    color: var(--article-gold);
  }

  :is(body.single, body.page:not(.home)) .article-heading h1 {
    margin: 0;
    color: var(--article-cream);
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
  }

  :is(body.single, body.page:not(.home)) .article-deck {
    max-width: 760px;
    margin: 0;
    color: color-mix(in srgb, var(--article-gold-light) 82%, transparent);
    font-family: var(--serif);
    font-size: clamp(20px, 2.2vw, 24px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
  }

  :is(body.single, body.page:not(.home)) .article-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
  }

  :is(body.single, body.page:not(.home)) .article-byline.no-author {
    justify-content: flex-end;
  }

  :is(body.single, body.page:not(.home)) .article-author {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
  }

  :is(body.single, body.page:not(.home)) .article-author-mark {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--article-gold-muted);
    border-radius: 50%;
    background: var(--article-panel);
    color: var(--article-gold);
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
  }

  :is(body.single, body.page:not(.home)) .article-author-copy p {
    margin: 0;
    font-family: var(--sans);
  }

  :is(body.single, body.page:not(.home)) .article-author-name {
    color: var(--article-cream);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  :is(body.single, body.page:not(.home)) .article-author-meta,
  :is(body.single, body.page:not(.home)) .article-date {
    color: var(--article-muted);
    font-size: 14px;
    letter-spacing: .03em;
  }

  :is(body.single, body.page:not(.home)) .article-date {
    flex: 0 0 auto;
  }

  :is(body.single, body.page:not(.home)) .article-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
    margin-inline: auto;
    padding-block: 64px 80px;
  }

  :is(body.single, body.page:not(.home)) .article-main {
    min-width: 0;
    grid-column: 1 / -1;
  }

  :is(body.single, body.page:not(.home)) .article-layout.has-sidebar .article-main {
    grid-column: span 8;
  }

  :is(body.single, body.page:not(.home)) .article-sidebar {
    grid-column: span 4;
  }

  :is(body.single, body.page:not(.home)) .article-copy {
    display: flow-root;
    min-width: 0;
    color: var(--article-body);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
  }

  :is(body.single, body.page:not(.home)) .article-copy > :first-child {
    margin-top: 0;
  }

  :is(body.single, body.page:not(.home)) .article-copy > p {
    max-width: 72ch;
    margin-block: 0 24px;
    color: var(--article-body);
    font: 400 16px/1.7 var(--sans);
  }

  :is(body.single, body.page:not(.home)) .article-copy > p:first-child {
    color: var(--article-cream);
    font: 400 18px/1.7 var(--sans);
  }

  :is(body.single, body.page:not(.home)) .article-copy > p:first-child::first-letter {
    float: left;
    padding: 6px 12px 2px 0;
    color: var(--article-gold);
    font: 600 56px/.9 var(--serif);
    text-shadow: 0 2px 10px rgb(230 195 122 / 20%);
  }

  :is(body.single, body.page:not(.home)) .article-copy > p:first-child + p::before {
    display: block;
    margin: 0 0 28px;
    color: color-mix(in srgb, var(--article-gold) 60%, transparent);
    content: "\2726  \2726  \2726";
    font: 14px/1.5 var(--serif);
    letter-spacing: .3em;
    text-align: center;
  }

  :is(body.single, body.page:not(.home)) .article-copy h2,
  :is(body.single, body.page:not(.home)) .article-copy h3,
  :is(body.single, body.page:not(.home)) .article-copy h4 {
    margin-block: 36px 16px;
    color: var(--article-cream);
    font-family: var(--serif);
    line-height: 1.2;
  }

  :is(body.single, body.page:not(.home)) .article-copy h2 {
    font-size: 28px;
  }

  :is(body.single, body.page:not(.home)) .article-copy h3 {
    font-size: 24px;
  }

  :is(body.single, body.page:not(.home)) .article-copy h4 {
    font-size: 20px;
  }

  :is(body.single, body.page:not(.home)) .article-copy h5 {
    font-size: 18px;
  }

  :is(body.single, body.page:not(.home)) .article-copy h6 {
    font-size: 16px;
  }

  :is(body.single, body.page:not(.home)) .article-copy > :is(ul, ol) {
    max-width: 72ch;
  }

  :is(body.single, body.page:not(.home)) .article-copy blockquote,
  :is(body.single, body.page:not(.home)) .article-copy .wp-block-quote {
    position: relative;
    margin: 40px 0;
    padding: 28px 32px;
    overflow: hidden;
    border-inline-start: 2px solid var(--article-gold);
    border-radius: 8px;
    background: linear-gradient(90deg, var(--article-card), var(--surface), var(--article-card));
    box-shadow: 0 20px 48px rgb(0 0 0 / 24%);
    color: var(--article-cream);
    font: italic 500 20px/1.6 var(--serif);
  }

  :is(body.single, body.page:not(.home)) .article-copy blockquote p {
    margin: 0;
    color: inherit;
    font: inherit;
  }

  :is(body.single, body.page:not(.home)) .article-copy figcaption,
  :is(body.single, body.page:not(.home)) .article-copy .wp-block-pullquote cite {
    display: block;
    margin-top: 16px;
    color: var(--article-gold);
    font: 400 14px/1.6 var(--sans);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  :is(body.single, body.page:not(.home)) .article-copy a {
    color: var(--article-gold-light);
    text-decoration-color: color-mix(in srgb, var(--article-gold) 45%, transparent);
  }

  :is(body.single, body.page:not(.home)) .article-copy a:hover {
    color: var(--article-gold);
  }

  :is(body.single, body.page:not(.home)) .article-next {
    position: static;
    display: block;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--article-border) 80%, transparent);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--article-card), var(--surface));
    text-decoration: none;
  }

  :is(body.single, body.page:not(.home)) .article-next:hover h2 {
    color: var(--article-gold);
  }

  :is(body.single, body.page:not(.home)) .article-next-image {
    position: relative;
    display: block;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--article-black);

    & > img {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: auto;
      max-height: 280px;
      object-fit: contain;
    }
  }

  :is(body.single, body.page:not(.home)) .article-next-image-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.15);
      filter: blur(12px) brightness(.65);
    }
  }

  :is(body.single, body.page:not(.home)) .article-next h2 {
    margin: 0 0 12px;
    color: var(--article-cream);
    font: 600 22px/1.4 var(--serif);
  }

  :is(body.single, body.page:not(.home)) .article-next p {
    margin: 0 0 16px;
    color: var(--article-body);
    font-size: 16px;
    line-height: 1.7;
  }

  :is(body.single, body.page:not(.home)) .article-next time {
    color: var(--article-gold-muted);
    font: 400 14px/1.5 var(--sans);
  }

  :is(body.single, body.page:not(.home)) .article-next-label {
    display: block;
    margin-bottom: 8px;
    color: var(--article-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  :is(body.single, body.page:not(.home)) .article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--article-border) 70%, transparent);
    font-size: 14px;
  }

  :is(body.single, body.page:not(.home)) .article-tags > span {
    margin-inline-end: 4px;
    color: var(--article-muted);
    text-transform: uppercase;
  }

  :is(body.single, body.page:not(.home)) .article-tags a {
    padding: 4px 10px;
    border: 1px solid var(--article-border);
    border-radius: 2px;
    background: var(--article-card);
    color: var(--article-gold);
    text-decoration: none;
  }

  :is(body.single, body.page:not(.home)) .article-tags a:hover {
    background: var(--article-border);
  }

  body.single .article-gallery {
    margin-top: 16px;
  }

  body.single .article-gallery-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.single .article-gallery-grid figure {
    min-width: 0;
    margin: 0;
  }

  body.single .article-gallery-grid img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  body.single .article-gallery-grid figcaption {
    margin-top: 12px;
    color: var(--article-muted);
    font: 400 14px/1.6 var(--sans);
  }

  :is(body.single, body.page:not(.home)) .comments-area {
    width: min(100% - 48px, var(--shell-width));
    margin-inline: auto;
    padding-bottom: 48px;
  }

  @media (max-width: 767px) {
    :is(body.single, body.page:not(.home)) .article-hero {
      padding-block: 40px 32px;
    }

    :is(body.single, body.page:not(.home)) .article-byline {
      margin-top: 24px;
      padding-top: 20px;
    }

    :is(body.single, body.page:not(.home)) .article-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 36px;
      padding-block: 40px 56px;
    }

    :is(body.single, body.page:not(.home)) .article-layout.has-sidebar .article-main,
    :is(body.single, body.page:not(.home)) .article-sidebar {
      grid-column: 1;
    }

    body.single .article-sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    body.single .article-gallery {
      order: 1;
      margin-top: 0;
    }

    body.single .article-next {
      order: 2;
    }

    :is(body.single, body.page:not(.home)) .article-next {
      position: static;
    }

    :is(body.single, body.page:not(.home)) .article-copy blockquote,
    :is(body.single, body.page:not(.home)) .article-copy .wp-block-quote {
      padding: 24px;
    }

    :is(body.single, body.page:not(.home)) .comments-area {
      width: min(100% - 32px, var(--shell-width));
    }

  }

  @media (max-width: 480px) {
    :is(body.single, body.page:not(.home)) .article-byline {
      align-items: flex-start;
      flex-direction: column;
    }
  }