.trivia-essays-page {
  overflow: hidden;
}

.trivia-essays-page section {
  padding-block: var(--space-9);
}

.trivia-essays-page .container--content {
  width: min(100% - (var(--container-padding) * 2), var(--container-content));
}

.te-hero {
  padding-block: var(--space-8) var(--space-9) !important;
}

.te-hero__layout,
.te-feature__layout,
.te-places__layout,
.te-availability__layout {
  display: grid;
  min-width: 0;
  gap: var(--space-7);
}

.te-hero__layout {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}

.te-hero__copy,
.te-hero__media,
.te-feature__copy,
.te-feature__media,
.te-places__copy,
.te-places__media,
.te-availability__copy,
.te-checklist {
  min-width: 0;
  width: 100%;
}

.te-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.te-hero__copy > * {
  margin: 0;
}

.te-hero__heading {
  width: min(100%, 40rem);
  border-block-end: 1px solid var(--color-champagne-500);
  padding-block-end: var(--space-4);
}

.te-hero__heading h1 {
  margin: 0;
}

.te-hero__subtitle {
  margin: var(--space-3) 0 0;
  color: var(--color-champagne-300);
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-style: italic;
  line-height: var(--leading-heading);
}

.te-hero__deck {
  width: min(100%, 38rem);
  color: var(--color-platinum-300);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.te-hero__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.te-hero__actions > * {
  min-width: 0;
  margin: 0;
}

.te-hero__note {
  width: min(100%, 30rem);
  color: var(--color-platinum-300);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.te-hero__media {
  justify-self: end;
  max-width: 40rem;
  padding-block-start: var(--space-6);
}

.te-hero__image-frame {
  aspect-ratio: 2 / 1;
}

.te-hero__image-frame img {
  filter: saturate(0.9) contrast(1.04);
}

.te-lenses {
  border-block: var(--border-subtle);
  background: var(--color-midnight-800);
}

.te-lenses__intro,
.te-production__intro,
.te-themes__intro,
.te-research__intro,
.te-standards__intro {
  width: min(100%, 42rem);
}

.te-lenses__intro > :last-child,
.te-production__intro > :last-child,
.te-themes__intro > :last-child,
.te-research__intro > :last-child,
.te-standards__intro > :last-child,
.te-places__intro > :last-child {
  margin-block-end: 0;
}

.te-lenses__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}

.te-lens-card {
  min-width: 0;
  border: var(--border-subtle);
  border-block-start-color: var(--color-champagne-500);
  background: var(--color-midnight-900);
  padding: var(--space-5);
  transition: border-color var(--transition-fast);
}

.te-lens-card:hover {
  border-color: rgba(212, 175, 55, 0.62);
}

.te-lens-card__number,
.te-theme-card__number,
.te-principle__index {
  display: block;
  color: var(--color-champagne-300);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.12em;
}

.te-lens-card--oxblood .te-lens-card__number {
  color: #aa5360;
}

.te-lens-card__label,
.te-place-essay__label,
.te-feature__beat-index {
  margin: var(--space-3) 0;
  color: var(--color-platinum-300);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.te-lens-card h3,
.te-theme-card h3,
.te-principle h3,
.te-route-row h3,
.te-production__body h3,
.te-place-essay h3,
.te-feature__beat h3 {
  margin-block-end: var(--space-3);
}

.te-lens-card h3 {
  font-size: 1.65rem;
}

.te-lens-card p:last-child,
.te-theme-card p,
.te-principle p,
.te-route-row__copy p,
.te-production__body p,
.te-place-essay p,
.te-feature__beat p {
  margin-block-end: 0;
  color: var(--color-platinum-300);
}

.te-feature {
  background: var(--color-obsidian-950);
}

.te-feature__layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.te-feature__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.te-feature__copy > * {
  margin: 0;
}

.te-feature__copy h2 {
  width: min(100%, 44rem);
}

.te-feature__deck {
  width: min(100%, 44rem);
  color: var(--color-platinum-300);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.te-feature__beats {
  display: flex;
  width: min(100%, 46rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.te-feature__beat {
  min-width: 0;
}

.te-feature__beat--ruled {
  border-inline-start: 2px solid var(--color-champagne-500);
  padding-inline-start: var(--space-4);
}

.te-feature__media {
  padding-block-start: var(--space-6);
}

.te-feature__image-frame {
  aspect-ratio: 2 / 1;
}

.te-feature__image-frame img,
.te-places__image-frame img {
  filter: saturate(0.88) contrast(1.04);
}

.te-text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-champagne-300);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration-thickness: 1px;
}

.te-production {
  border-block: var(--border-subtle);
}

.te-production__notes {
  display: flex;
  width: min(100%, 49rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
  margin-block-start: var(--space-7);
}

.te-production__note {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-5);
  border-block-start: var(--border-subtle);
  padding-block-start: var(--space-5);
}

.te-production__label {
  min-width: 0;
  margin: 0;
  color: var(--color-champagne-300);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.te-production__label span {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-platinum-300);
}

.te-production__body {
  min-width: 0;
  width: min(100%, 39rem);
}

.te-production__body--sound::before {
  display: block;
  width: 100%;
  height: 8px;
  margin-block-end: var(--space-3);
  background: repeating-linear-gradient(90deg, var(--color-line-dark) 0 1px, transparent 1px 8px, var(--color-champagne-500) 8px 9px, transparent 9px 16px);
  content: "";
}

.te-places {
  background: var(--color-midnight-900);
}

.te-places__layout {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

.te-places__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.te-places__intro {
  width: min(100%, 42rem);
}

.te-place-essay {
  width: min(100%, 38rem);
  border-block-start: var(--border-subtle);
  padding-block-start: var(--space-5);
}

.te-place-essay__label {
  color: var(--color-champagne-300);
}

.te-places__media {
  min-width: 0;
}

.te-places__image-frame {
  aspect-ratio: 16 / 10;
}

.te-places__media figcaption {
  width: min(100%, 30rem);
}

.te-places__media figcaption span {
  color: var(--color-champagne-300);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.te-themes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.te-theme-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-subtle);
  border-block-start-color: var(--color-champagne-500);
  background: var(--color-midnight-900);
  padding: var(--space-5);
  transition: border-color var(--transition-fast);
}

.te-theme-card > * {
  margin: 0;
}

.te-theme-card:hover {
  border-color: rgba(212, 175, 55, 0.62);
}

.te-theme-card--oxblood {
  border-block-start-color: var(--color-oxblood-700);
}

.te-theme-card .te-text-link {
  margin-block-start: auto;
}

.te-themes__quote {
  width: min(100%, 38rem);
  margin: var(--space-8) 0 0 max(0px, 16.666%);
}

.te-research {
  background: var(--color-midnight-800);
}

.te-research__rows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin-block-start: var(--space-7);
  border-block-start: var(--border-subtle);
}

.te-route-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) max-content;
  min-width: 0;
  align-items: center;
  gap: var(--space-5);
  border-block-end: var(--border-subtle);
  padding: var(--space-5) 0;
  transition: background-color var(--transition-fast);
}

.te-route-row:hover {
  background: rgba(245, 245, 240, 0.025);
}

.te-route-row__index {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-champagne-300);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.1em;
}

.te-route-row__copy {
  min-width: 0;
  width: min(100%, 38rem);
}

.te-route-row__copy h3 {
  font-size: 1.65rem;
}

.te-route-row__action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-champagne-300);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.te-availability {
  border-block: var(--border-subtle);
}

.te-availability__layout {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}

.te-availability__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.te-availability__copy > * {
  margin: 0;
}

.te-availability__copy h2 {
  width: min(100%, 38rem);
}

.te-availability__copy > p:not(.eyebrow) {
  width: min(100%, 34rem);
  color: var(--color-platinum-300);
}

.te-availability__action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.te-availability__action > * {
  margin: 0;
}

.te-availability__action p {
  width: min(100%, 24rem);
  color: var(--color-platinum-300);
  font-size: var(--text-sm);
}

.te-checklist {
  border: var(--border-subtle);
  background: var(--color-midnight-900);
  padding: var(--space-5);
}

.te-checklist > * {
  margin: 0;
}

.te-checklist ol {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
  padding-inline-start: 1.4rem;
}

.te-checklist li {
  min-width: 0;
  padding-inline-start: var(--space-2);
}

.te-checklist li strong,
.te-checklist li span {
  display: block;
}

.te-checklist li strong {
  color: var(--color-ivory-50);
}

.te-checklist li span {
  color: var(--color-platinum-300);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.te-standards {
  background: var(--color-midnight-900);
}

.te-standards__principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-block-start: var(--space-7);
}

.te-principle {
  min-width: 0;
  border-block-start: var(--border-subtle);
  padding-block-start: var(--space-4);
}

.te-principle__index {
  margin-block-end: var(--space-3);
}

.te-principle--wide {
  grid-column: 1 / -1;
  width: min(100%, 46rem);
}

.te-principle:nth-child(2) .te-principle__index {
  color: var(--color-platinum-300);
}

.te-principle:nth-child(3) .te-principle__index {
  color: #aa5360;
}

.te-standards__note {
  width: min(100%, 44rem);
  margin: var(--space-7) 0 0;
  border: var(--border-subtle);
  padding: var(--space-4);
  color: var(--color-platinum-300);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.te-closing {
  padding-block: var(--space-10) !important;
}

.te-closing__inner {
  display: flex;
  width: min(100%, 40rem);
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-inline: auto;
  text-align: center;
}

.te-closing__inner > * {
  margin: 0;
}

.te-closing__inner > p:not(.eyebrow):not(.te-closing__support) {
  width: min(100%, 38rem);
  color: var(--color-platinum-300);
}

.te-closing__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.te-closing__actions > * {
  min-width: 0;
  width: auto;
}

.te-closing__support {
  color: var(--color-platinum-300);
  font-size: var(--text-sm);
}

@media (min-width: 700px) and (max-width: 1079px) {
  .te-lenses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .te-hero__layout,
  .te-feature__layout,
  .te-places__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .te-hero__media,
  .te-feature__media {
    justify-self: stretch;
    max-width: none;
    padding-block-start: 0;
  }

  .te-feature__media {
    order: 2;
  }

  .te-feature__copy {
    order: 1;
  }

  .te-places__media {
    order: 2;
  }

  .te-places__copy {
    order: 1;
  }
}

@media (max-width: 959px) {
  .te-themes__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .te-themes__quote {
    margin-inline: 0;
  }
}

@media (max-width: 899px) {
  .trivia-essays-page section {
    padding-block: var(--space-8);
  }

  .te-production__note {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .te-production__body {
    width: min(100%, 44rem);
  }

  .te-route-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-5) 0;
  }

  .te-route-row__index {
    flex-direction: row;
    align-items: center;
  }

  .te-route-row__copy {
    width: 100%;
  }

  .te-route-row__action {
    justify-content: flex-start;
  }

  .te-availability__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 699px) {
  .te-hero {
    padding-block-start: var(--space-7) !important;
  }

  .te-hero__layout,
  .te-feature__layout,
  .te-places__layout,
  .te-availability__layout {
    gap: var(--space-6);
  }

  .te-hero__copy,
  .te-feature__copy,
  .te-places__copy,
  .te-availability__copy {
    gap: var(--space-4);
  }

  .te-hero__heading {
    width: 100%;
  }

  .te-hero__media,
  .te-feature__media {
    width: 100%;
  }

  .te-hero__image-frame,
  .te-feature__image-frame,
  .te-places__image-frame {
    aspect-ratio: 16 / 10;
  }

  .te-lenses__grid,
  .te-standards__principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .te-lenses__grid {
    gap: var(--space-5);
  }

  .te-lens-card,
  .te-theme-card {
    padding: var(--space-5);
  }

  .te-feature__beats {
    gap: var(--space-5);
  }

  .te-feature__beat--ruled {
    padding-inline-start: var(--space-3);
  }

  .te-production__notes,
  .te-themes__grid,
  .te-research__rows,
  .te-standards__principles {
    margin-block-start: var(--space-6);
  }

  .te-principle--wide {
    grid-column: auto;
    width: 100%;
  }

  .te-checklist {
    padding: var(--space-4);
  }

  .te-closing {
    padding-block: var(--space-9) !important;
  }
}

@media (max-width: 519px) {
  .te-closing__actions {
    width: min(100%, 20rem);
    flex-direction: column;
  }

  .te-closing__actions > .button {
    width: 100%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .te-hero__image-frame:hover img,
  .te-feature__image-frame:hover img {
    transform: scale(1.025);
  }

  .te-places__image-frame:hover img {
    filter: saturate(0.96) contrast(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .te-lens-card,
  .te-theme-card,
  .te-route-row,
  .te-hero__image-frame img,
  .te-feature__image-frame img,
  .te-places__image-frame img {
    transition: none;
  }
}
