.rulett-page {
  overflow-x: clip;
}

.rulett-page p,
.rulett-page h2,
.rulett-page h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.rulett-hero {
  position: relative;
  overflow: clip;
  background: var(--color-paper);
}

.rulett-hero::before {
  position: absolute;
  inset: auto auto -15rem -14rem;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  background: repeating-conic-gradient(from 25deg, var(--color-sun) 0 13deg, transparent 13deg 27deg);
  content: "";
  pointer-events: none;
}

.rulett-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-4);
}

.rulett-hero__copy,
.rulett-hero__media,
.rulett-postcard__media,
.rulett-postcard__copy,
.rulett-closeup__copy,
.rulett-closeup__media,
.rulett-faq__content,
.rulett-contact__intro,
.rulett-contact__detail,
.rulett-contact__detail > div {
  min-width: 0;
}

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

.rulett-hero__copy h1 {
  margin: 0;
  max-width: 10ch;
  text-shadow: 5px 5px 0 var(--color-orange);
}

.rulett-hero__lead {
  max-width: 42ch;
  font-size: var(--text-lead);
  line-height: 1.55;
}

.rulett-hero__lead p {
  margin: 0;
}

.rulett-hero__actions,
.rulett-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.rulett-hero__actions > *,
.rulett-contact__actions > * {
  min-width: 0;
}

.rulett-hero__media {
  grid-column: 3;
  width: 100%;
  margin: var(--space-5) 0 0;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-orange);
}

.rulett-rhythm {
  background: var(--color-white);
}

.rulett-rhythm__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.rulett-rhythm__heading h2,
.rulett-steps__heading h2,
.rulett-postcard > h2,
.rulett-faq__content > h2 {
  margin: 0;
}

.rulett-rhythm__panels {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
  align-items: start;
  gap: var(--space-4);
}

.rulett-rhythm__panel {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-md);
}

.rulett-rhythm__panel h3 {
  margin-bottom: var(--space-3);
}

.rulett-rhythm__panel p {
  margin: 0;
}

.rulett-rhythm__panel--cream { background: var(--color-paper); }
.rulett-rhythm__panel--sky { margin-top: -2rem; background: var(--color-sky); }
.rulett-rhythm__panel--peach { margin-top: 1.5rem; background: var(--color-peach); box-shadow: var(--shadow-orange); }
.rulett-rhythm__panel--cream p { max-width: 38ch; }
.rulett-rhythm__panel--sky p { max-width: 45ch; }
.rulett-rhythm__panel--peach p { max-width: 34ch; }

.rulett-steps {
  background: var(--color-paper);
}

.rulett-steps__heading {
  max-width: 28ch;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.rulett-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.rulett-steps__list::before {
  position: absolute;
  top: 2.3rem;
  right: 16%;
  left: 16%;
  height: 4rem;
  border-top: 3px solid var(--color-brown);
  border-radius: 50%;
  content: "";
}

.rulett-step {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.rulett-step h3,
.rulett-step p {
  margin: 0;
}

.rulett-step p { max-width: 36ch; }

.rulett-step__number {
  display: inline-flex;
  width: 4.5rem;
  min-width: 4.5rem;
  height: 4.5rem;
  align-items: center;
  justify-content: center;
  border: var(--border-thin);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
}

.rulett-step__number--sun { background: var(--color-sun); }
.rulett-step__number--sky { background: var(--color-sky); }
.rulett-step__number--peach { background: var(--color-peach); }

.rulett-postcard {
  background: var(--color-sky);
}

.rulett-postcard > .container > h2 {
  max-width: 30ch;
  margin-bottom: var(--space-6);
}

.rulett-postcard__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
  align-items: center;
}

.rulett-postcard__media {
  grid-column: 1;
  width: 100%;
  margin: 0;
  aspect-ratio: 5 / 4;
  border-radius: 999px 999px var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-orange);
}

.rulett-postcard__copy {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rulett-postcard__maincopy h3,
.rulett-postcard__note h3 {
  margin-bottom: var(--space-3);
}

.rulett-postcard__maincopy p,
.rulett-postcard__note p {
  margin: 0;
}

.rulett-postcard__maincopy p { max-width: 42ch; }

.rulett-postcard__note {
  max-width: 32ch;
  padding: var(--space-4);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-peach);
}

.rulett-age {
  background: var(--color-paper);
}

.rulett-age__panel {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-brown);
  color: var(--color-white);
  box-shadow: inset 0 0 0 3px var(--color-sun);
}

.rulett-age__badge {
  display: flex;
  width: 6.5rem;
  min-width: 6.5rem;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--color-white);
  border-radius: var(--radius-pill);
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
}

.rulett-age__content {
  min-width: 0;
  max-width: 50ch;
}

.rulett-age__content h2 { color: var(--color-white); }
.rulett-age__content p { margin-bottom: var(--space-3); }
.rulett-age__content p:last-child { margin-bottom: 0; max-width: 40ch; }
.rulett-age__content a { color: var(--color-white); text-decoration-color: var(--color-orange); }

.rulett-dining {
  background: var(--color-white);
}

.rulett-dining__heading {
  max-width: 52ch;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.rulett-dining__heading h2 { margin-bottom: var(--space-4); }
.rulett-dining__heading p { margin: 0; }

.rulett-dining__panels {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  align-items: center;
}

.rulett-dining__panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-thin);
  border-radius: var(--radius-md);
}

.rulett-dining__panel h3,
.rulett-dining__panel p { margin: 0; }
.rulett-dining__panel p { max-width: 36ch; }
.rulett-dining__panel--sun { grid-column: 1; background: var(--color-sun); transform: rotate(-1deg); }
.rulett-dining__panel--sky { grid-column: 3; background: var(--color-sky); transform: rotate(1deg); }

.rulett-dining__icon {
  grid-column: 2;
  min-width: 0;
  color: var(--color-brown);
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 1;
  text-align: center;
}

.rulett-related {
  background: var(--color-paper);
}

.rulett-related__heading {
  max-width: 48ch;
  margin-bottom: var(--space-6);
}

.rulett-related__heading h2 { margin-bottom: var(--space-4); }
.rulett-related__heading p { margin: 0; }

.rulett-related__panels {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  align-items: stretch;
}

.rulett-related__panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-thin);
  border-radius: var(--radius-md);
}

.rulett-related__panel h3,
.rulett-related__panel p { margin: 0; }
.rulett-related__panel p { max-width: 36ch; }
.rulett-related__panel--peach { grid-column: 1; background: var(--color-peach); }
.rulett-related__panel--sky { grid-column: 3; background: var(--color-sky); box-shadow: var(--shadow-sky); }

.rulett-closeup {
  background: var(--color-white);
}

.rulett-closeup__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: center;
}

.rulett-closeup__copy {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.rulett-closeup__copy h2,
.rulett-closeup__copy p { margin: 0; }
.rulett-closeup__copy p { max-width: 42ch; }

.rulett-closeup__media {
  grid-column: 3;
  width: 100%;
  margin: 0;
}

.rulett-closeup__image {
  width: 100%;
  aspect-ratio: 1;
  border-width: 4px;
  box-shadow: 6px 6px 0 var(--color-sun);
}

.rulett-closeup__media figcaption {
  max-width: 28ch;
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  background: var(--color-peach);
}

.rulett-faq {
  background: var(--color-paper);
}

.rulett-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
  align-items: start;
}

.rulett-faq__content {
  grid-column: 1;
  width: 100%;
  max-width: 53.75rem;
}

.rulett-faq__content > h2 { margin-bottom: var(--space-6); }

.rulett-faq__items {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.rulett-faq__item {
  min-width: 0;
  overflow: hidden;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.rulett-faq__item:nth-child(odd) { border-top: 10px solid var(--color-sun); }
.rulett-faq__item:nth-child(even) { border-top: 10px solid var(--color-sky); }

.rulett-faq__question {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-brown);
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
}

.rulett-faq__question span {
  width: 1.5rem;
  min-width: 1.5rem;
  font-size: var(--text-h4);
  line-height: 1;
  text-align: center;
  transition: transform var(--transition-fast);
}

.rulett-faq__question[aria-expanded="true"] span { transform: rotate(45deg); }

.rulett-faq__answer {
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.rulett-faq__answer p {
  max-width: 60ch;
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
}

.rulett-faq__sun {
  grid-column: 2;
  justify-self: end;
  width: 11rem;
  height: 11rem;
  margin-top: var(--space-8);
  border: var(--border-strong);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-sun) 0 12deg, var(--color-orange) 12deg 20deg);
}

.rulett-contact {
  background: var(--color-sky);
}

.rulett-contact__paper {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-5), 5vw, var(--space-8));
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}

.rulett-contact__paper::after {
  position: absolute;
  right: -8rem;
  bottom: -9rem;
  width: 22rem;
  height: 22rem;
  border: var(--border-strong);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-sun) 0 15deg, transparent 15deg 30deg);
  content: "";
  pointer-events: none;
}

.rulett-contact__intro {
  position: relative;
  z-index: 1;
  max-width: 48ch;
  margin-bottom: var(--space-6);
}

.rulett-contact__intro h2 { margin-bottom: var(--space-4); }
.rulett-contact__intro p { margin: 0; }

.rulett-contact__details {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.rulett-contact__detail {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: var(--space-3);
}

.rulett-contact__icon {
  display: inline-flex;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-brown);
  border-radius: 50%;
  background: var(--color-sun);
  font-weight: 700;
  line-height: 1;
}

.rulett-contact__detail h3 {
  margin-bottom: var(--space-1);
  font-size: var(--text-lead);
}

.rulett-contact__detail p { margin: 0; }

.rulett-contact__actions {
  position: relative;
  z-index: 1;
}

@media (max-width: 60rem) {
  .rulett-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr); }
  .rulett-rhythm__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rulett-rhythm__panel--sky { margin-top: 0; }
  .rulett-rhythm__panel--peach { grid-column: 1 / span 2; width: min(100%, 42rem); margin-top: 0; }
}

@media (max-width: 56.25rem) {
  .rulett-postcard__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .rulett-postcard__media,
  .rulett-postcard__copy { grid-column: 1; }
  .rulett-postcard__copy { align-items: flex-start; }
  .rulett-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rulett-steps__list::before { display: none; }
  .rulett-step:nth-child(3) { grid-column: 1 / span 2; width: min(100%, 24rem); justify-self: center; }
  .rulett-closeup__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .rulett-closeup__copy,
  .rulett-closeup__media { grid-column: 1; }
  .rulett-closeup__media { order: -1; }
  .rulett-faq__layout { grid-template-columns: 1fr; }
  .rulett-faq__content { grid-column: 1; max-width: none; }
  .rulett-faq__sun { display: none; }
  .rulett-contact__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rulett-contact__detail:nth-child(3) { grid-column: 1 / span 2; }
}

@media (max-width: 51.25rem) {
  .rulett-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .rulett-hero__copy,
  .rulett-hero__media { grid-column: 1; }
  .rulett-hero__media { width: 100%; max-width: none; margin-top: 0; }
}

@media (max-width: 48.75rem) {
  .rulett-dining__panels,
  .rulett-related__panels { grid-template-columns: 1fr; gap: var(--space-5); }
  .rulett-dining__panel--sun,
  .rulett-dining__panel--sky,
  .rulett-related__panel--peach,
  .rulett-related__panel--sky { grid-column: 1; transform: none; }
  .rulett-dining__icon { display: none; }
}

@media (max-width: 42.5rem) {
  .rulett-age__panel { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
  .rulett-age__badge { width: auto; min-width: 5rem; }
  .rulett-contact__details { grid-template-columns: 1fr; }
  .rulett-contact__detail:nth-child(3) { grid-column: 1; }
  .rulett-contact__actions { flex-direction: column; align-items: stretch; }
  .rulett-contact__actions .button { width: 100%; }
}

@media (max-width: 30rem) {
  .rulett-hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .rulett-hero__actions .button,
  .rulett-dining__panel .button,
  .rulett-related__panel .button { width: 100%; }
  .rulett-rhythm__panels,
  .rulett-steps__list { grid-template-columns: 1fr; }
  .rulett-rhythm__panel--peach,
  .rulett-step:nth-child(3) { grid-column: 1; width: 100%; }
  .rulett-steps__list { gap: var(--space-6); }
  .rulett-step { position: relative; }
  .rulett-step:not(:last-child)::after { position: absolute; top: 4.75rem; bottom: -3rem; width: 3px; background: var(--color-brown); content: ""; }
  .rulett-hero__copy h1 { font-size: clamp(2.5rem, 12vw, 3.7rem); }
  .rulett-contact__paper::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rulett-page *,
  .rulett-page *::before,
  .rulett-page *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; }
  .rulett-dining__panel--sun,
  .rulett-dining__panel--sky { transform: none; }
}