.rulett-page {
  overflow: hidden;
}

.rulett-page .section {
  padding-block: var(--section-space);
}

.rulett-page .section-rule::before {
  margin-bottom: var(--space-4);
}

.rulett-hero {
  padding-block: var(--space-8) var(--space-9);
}

.rulett-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: stretch;
}

.rulett-hero__grid > * { min-width: 0; width: 100%; }

.rulett-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  min-height: 38.75rem;
  padding: var(--space-7);
  border: var(--border-default);
  background: var(--surface-panel);
  order: 1;
}

.rulett-hero__media {
  position: relative;
  min-height: 38.75rem;
  margin: 0;
  border-radius: 0;
  order: 2;
}

.rulett-hero__media::after,
.rulett-gallery__button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 12, .36), rgba(8, 10, 12, .08));
  content: "";
  pointer-events: none;
}

.rulett-hero__media::before {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--color-tension-yellow);
  content: "";
}

.rulett-hero__media img { object-position: 65% center; }
.rulett-hero__marker { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.rulett-hero__marker .number-marker { font-size: clamp(4rem, 6vw, 5rem); }
.rulett-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); max-width: 35rem; min-width: 0; }
.rulett-hero__copy > * { margin: 0; }
.rulett-hero__copy h1 { font-size: clamp(3.5rem, 5.1vw, 4rem); text-transform: uppercase; }
.rulett-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); min-width: 0; }
.rulett-hero__actions > * { flex: 1 1 12rem; min-width: 0; }

.rulett-section-head { max-width: 47.5rem; }
.rulett-section-head > :last-child { margin-bottom: 0; }

.rulett-rhythm__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: end;
  margin-top: var(--space-7);
}

.rulett-rhythm__grid > * { min-width: 0; width: 100%; }
.rulett-rhythm__card { display: flex; flex-direction: column; gap: var(--space-5); min-height: 22rem; padding: var(--space-5); border: var(--border-default); background: var(--surface-panel); transition: border-color var(--transition-fast); }
.rulett-rhythm__card > * { margin: 0; }
.rulett-rhythm__card:hover { border-color: var(--color-white-strong); }
.rulett-rhythm__card--lifted { transform: translateY(-2rem); background: var(--surface-raised); }
.rulett-rhythm__top { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.rulett-rhythm__top > * { min-width: 0; }
.rulett-rhythm__top .number-marker { font-size: 3.5rem; flex: 0 0 auto; }
.rulett-rhythm__top h3 { margin: var(--space-2) 0 0; text-transform: uppercase; }

.rulett-space__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr); gap: var(--space-5); align-items: center; }
.rulett-space__grid > * { min-width: 0; width: 100%; }
.rulett-space__content { grid-column: 1; display: flex; flex-direction: column; gap: var(--space-6); max-width: 33.75rem; }
.rulett-space__content > * { margin: 0; }
.rulett-space__lead { max-width: 33.75rem; }
.rulett-space__callout { display: flex; flex-direction: column; gap: var(--space-4); max-width: 29.375rem; padding: var(--space-5); border: var(--border-default); background: var(--surface-panel); }
.rulett-space__callout > * { margin: 0; }
.rulett-space__media { grid-column: 3; aspect-ratio: 3 / 4; margin: 0; border-radius: 0; }
.rulett-space__media img { object-position: center; }
.rulett-space__mobile-media { display: none; }

.rulett-route { background: var(--surface-panel); }
.rulett-route__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-5); align-items: end; margin-top: var(--space-7); }
.rulett-route__grid > * { min-width: 0; width: 100%; }
.rulett-route__module { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-height: 20rem; padding: var(--space-5); border: var(--border-default); background: var(--color-ink-950); }
.rulett-route__module > * { margin: 0; }
.rulett-route__module::before { position: absolute; top: -1px; left: var(--space-5); width: 4.5rem; height: 2px; background: var(--color-tension-yellow); content: ""; transform: skewX(-24deg); }
.rulett-route__module--c { border-bottom: var(--border-strong); }
.rulett-route__letter { color: var(--color-tension-yellow); font-family: var(--font-heading); font-size: 3.5rem; font-style: italic; font-weight: 800; line-height: .85; }
.rulett-route__module h3 { text-transform: uppercase; }

.rulett-social__heading { max-width: 42.5rem; }
.rulett-social__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr); gap: var(--space-5); align-items: start; margin-top: var(--space-7); }
.rulett-social__grid > * { min-width: 0; width: 100%; }
.rulett-social__main { grid-column: 1; max-width: 35.625rem; padding-left: var(--space-5); border-left: var(--border-accent); }
.rulett-social__main > :last-child { margin-bottom: 0; }
.rulett-social__cards { grid-column: 3; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rulett-social__cards > * { min-width: 0; width: 100%; }
.rulett-social__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border-default); background: var(--surface-panel); }
.rulett-social__card > * { margin: 0; }
.rulett-social__cta { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); min-width: 0; }
.rulett-social__cta > * { min-width: 0; }

.rulett-gallery__intro { max-width: 40rem; }
.rulett-gallery__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.rulett-gallery__grid > * { min-width: 0; width: 100%; }
.rulett-gallery__item { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.rulett-gallery__item--main { grid-row: 1 / span 2; }
.rulett-gallery__button { position: relative; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; border: var(--border-default); background: var(--surface-raised); }
.rulett-gallery__button::before { position: absolute; right: -5px; bottom: -5px; z-index: -1; width: 100%; height: 100%; background: var(--color-tension-yellow); content: ""; }
.rulett-gallery__button img { width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform var(--transition-panel); }
.rulett-gallery__button:hover img { transform: scale(1.035); }
.rulett-gallery__item--main .rulett-gallery__button { aspect-ratio: 4 / 3; }
.rulett-gallery__item:not(.rulett-gallery__item--main) .rulett-gallery__button { aspect-ratio: 16 / 9; }
.rulett-gallery__item figcaption { margin: 0; max-width: 23rem; }
.rulett-gallery__item figcaption span { margin-right: var(--space-2); color: var(--color-tension-yellow); font-family: var(--font-heading); font-size: var(--text-nav); font-style: italic; font-weight: 800; }

.rulett-location__panel { position: relative; padding-block: var(--space-7); border-top: var(--border-strong); background: var(--surface-panel); }
.rulett-location__index { position: absolute; top: var(--space-5); right: max(var(--container-padding), 4vw); opacity: .32; }
.rulett-location__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: start; }
.rulett-location__grid > * { min-width: 0; width: 100%; }
.rulett-location__block { max-width: 29.375rem; padding-left: var(--space-5); border-left: var(--border-strong); }
.rulett-location__block > :last-child { margin-bottom: 0; }
.rulett-location__block--address { min-width: 22.5rem; }
.rulett-location__block h2 { max-width: 29rem; }
.rulett-location__block address { margin-bottom: var(--space-4); color: var(--color-white-strong); font-family: var(--font-heading); font-size: var(--text-lead); font-style: italic; font-weight: 700; line-height: var(--line-lead); }
.rulett-location__block a { color: var(--color-tension-yellow); font-family: var(--font-heading); font-size: var(--text-nav); font-style: italic; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.rulett-faq__head { max-width: 40.625rem; }
.rulett-faq__list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 57.5rem; margin-top: var(--space-7); }
.rulett-faq__list > * { min-width: 0; width: 100%; }
.rulett-faq__item { border: var(--border-default); background: var(--surface-panel); }
.rulett-faq__item h3 { margin: 0; }
.rulett-faq__trigger { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; align-items: center; width: 100%; min-width: 0; padding: var(--space-4) var(--space-5); border: 0; border-left: 2px solid var(--color-tension-yellow); background: transparent; color: var(--color-white-strong); font-family: var(--font-body); font-size: 1.125rem; font-style: normal; font-weight: 700; line-height: 1.35; text-align: left; }
.rulett-faq__trigger > * { min-width: 0; }
.rulett-faq__symbol { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--color-tension-yellow); font-family: var(--font-heading); font-size: 2rem; font-style: italic; font-weight: 800; }
.rulett-faq__answer { overflow: hidden; transition: max-height var(--transition-panel), opacity var(--transition-panel); }
.rulett-faq__answer p { max-width: 47.5rem; margin: 0; padding: 0 var(--space-5) var(--space-5); }

.rulett-final__panel { position: relative; overflow: hidden; max-width: 61.25rem; margin-inline: auto; padding: var(--space-8); border-top: var(--border-strong); background: var(--surface-panel); text-align: center; }
.rulett-final__panel::before { position: absolute; top: 0; bottom: 0; left: 0; width: .75rem; background: var(--color-tension-yellow); content: ""; transform: skewX(-16deg) translateX(-.35rem); }
.rulett-final__number { position: absolute; top: var(--space-4); left: 50%; color: var(--color-tension-yellow); font-family: var(--font-heading); font-size: clamp(6rem, 14vw, 10rem); font-style: italic; font-weight: 800; line-height: .8; opacity: .14; transform: translateX(-50%); }
.rulett-final__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); min-width: 0; }
.rulett-final__content > * { margin: 0; }
.rulett-final__content p { max-width: 38.125rem; margin-inline: auto; }
.rulett-final__content h2 { max-width: 43.75rem; text-transform: uppercase; }
.rulett-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); min-width: 0; }
.rulett-final__actions > * { flex: 0 1 auto; min-width: 0; }

.rulett-lightbox { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: var(--space-5); }
.rulett-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .86); }
.rulett-lightbox__dialog { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; width: min(100%, 68rem); max-height: calc(100vh - 3rem); min-width: 0; }
.rulett-lightbox__figure { min-width: 0; margin: 0; }
.rulett-lightbox__figure img { width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; }
.rulett-lightbox__figure figcaption { margin: var(--space-3) 0 0; color: var(--color-white-strong); text-align: center; }
.rulett-lightbox__close, .rulett-lightbox__nav { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: var(--border-default); background: var(--surface-panel); color: var(--color-white-strong); font-size: 1.5rem; }
.rulett-lightbox__close { position: absolute; top: -3.25rem; right: 0; }
.rulett-lightbox__nav--prev { justify-self: start; }
.rulett-lightbox__nav--next { justify-self: end; }

@media (max-width: 68.75rem) {
  .rulett-hero__grid { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); gap: var(--space-5); }
  .rulett-hero__panel, .rulett-hero__media { min-height: 34rem; }
  .rulett-hero__panel { padding: var(--space-6); }
  .rulett-hero__copy h1 { font-size: 3.5rem; }
}

@media (max-width: 65.625rem) {
  .rulett-route__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rulett-route__module--c { grid-column: 1 / -1; }
}

@media (max-width: 62.5rem) {
  .rulett-rhythm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rulett-rhythm__card--lifted { transform: none; }
  .rulett-rhythm__card:last-child { grid-column: 1 / -1; }
  .rulett-space__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .rulett-space__content { grid-column: 1; }
  .rulett-space__media { grid-column: 2; }
}

@media (max-width: 60rem) {
  .rulett-social__grid { grid-template-columns: minmax(0, 1fr); }
  .rulett-social__main, .rulett-social__cards { grid-column: 1; max-width: none; }
  .rulett-social__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rulett-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .rulett-gallery__item--main { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 56.25rem) {
  .rulett-hero { padding-block: var(--space-6) var(--space-8); }
  .rulett-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .rulett-hero__media { min-height: 0; aspect-ratio: 16 / 10; order: 1; }
  .rulett-hero__panel { min-height: 0; order: 2; }
  .rulett-location__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .rulett-location__block--address { min-width: 0; }
  .rulett-faq__list { max-width: none; }
}

@media (max-width: 51.25rem) {
  .rulett-space__grid { grid-template-columns: minmax(0, 1fr); }
  .rulett-space__content, .rulett-space__media { grid-column: 1; max-width: none; }
  .rulett-space__media { display: none; }
  .rulett-space__mobile-media { display: block; aspect-ratio: 3 / 4; border-radius: 0; }
  .rulett-space__lead { max-width: none; }
  .rulett-space__callout { max-width: none; }
}

@media (max-width: 48rem) {
  .rulett-hero__panel { padding: var(--space-5); }
  .rulett-hero__marker .number-marker { font-size: 3.5rem; }
  .rulett-hero__copy { max-width: none; }
  .rulett-hero__copy h1 { font-size: 2.25rem; line-height: 1.055; }
  .rulett-hero__actions { flex-direction: column; }
  .rulett-hero__actions > * { flex-basis: auto; min-height: 3rem; }
  .rulett-rhythm__grid, .rulett-route__grid, .rulett-social__cards, .rulett-gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .rulett-rhythm__card:last-child, .rulett-route__module--c, .rulett-gallery__item--main { grid-column: auto; }
  .rulett-rhythm__card { min-height: 0; }
  .rulett-rhythm__top .number-marker { font-size: 3rem; }
  .rulett-route__module { min-height: 0; padding: var(--space-5); }
  .rulett-route__grid { gap: var(--space-4); padding-left: var(--space-4); border-left: 2px solid var(--color-tension-yellow); }
  .rulett-route__module::before { display: none; }
  .rulett-route__letter { font-size: 2.5rem; }
  .rulett-social__cta { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .rulett-gallery__item:not(.rulett-gallery__item--main) .rulett-gallery__button { aspect-ratio: 4 / 3; }
  .rulett-gallery__item:last-child .rulett-gallery__button { aspect-ratio: 16 / 10; }
  .rulett-location__panel { padding-block: var(--space-6); }
  .rulett-location__index { top: var(--space-3); right: var(--container-padding); font-size: 3.5rem; }
  .rulett-location__block { max-width: none; padding: var(--space-5); border-left: var(--border-strong); background: rgba(8, 10, 12, .35); }
  .rulett-faq__trigger { grid-template-columns: minmax(0, 1fr) 2.75rem; padding: var(--space-4); font-size: 1rem; }
  .rulett-faq__answer p { padding: 0 var(--space-4) var(--space-4); }
  .rulett-final__panel { padding: var(--space-6) var(--space-5); }
  .rulett-final__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .rulett-final__actions > * { width: 100%; min-height: 3rem; }
  .rulett-lightbox { padding: var(--space-3); }
  .rulett-lightbox__dialog { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rulett-page *, .rulett-page *::before, .rulett-page *::after { transition-duration: 0ms !important; }
}