.offline-poker-page {
  overflow: hidden;
  background: var(--color-limestone-white);
}

.offline-poker-page .container--wide,
.offline-poker-page .container {
  min-width: 0;
}

.op-hero {
  padding: calc(var(--space-10) + var(--space-6)) 0 var(--space-10);
}

.op-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-7);
}

.op-hero__media,
.op-hero__copy,
.op-table__media,
.op-table__copy,
.op-lounge__copy,
.op-lounge__media,
.op-room__media,
.op-room__panel,
.op-dining__copy,
.op-materials {
  min-width: 0;
  width: 100%;
}

.op-hero__media {
  min-height: 39rem;
  margin-left: max(-5rem, calc((100vw - var(--container-wide-max)) / -2));
}

.op-hero__media img { height: 100%; object-position: 38% center; }
.op-hero__media figcaption { position: absolute; left: var(--space-5); bottom: var(--space-4); z-index: 2; color: var(--color-limestone-white); }

.op-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 30rem;
}

.op-hero__copy :is(h1, p) { margin: 0; }
.op-hero__copy h1 { font-size: clamp(3rem, 4.4vw, 3.5rem); }
.op-hero__lead { max-width: 47ch; color: var(--color-muted-ink); font-size: var(--text-lead); font-weight: 500; line-height: var(--leading-lead); }
.op-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-muted-ink); font-size: var(--text-meta); font-weight: 700; letter-spacing: var(--tracking-meta); text-transform: uppercase; }
.op-breadcrumb a { color: var(--color-celadon-deep); }
.op-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.op-hero__status .eyebrow { margin: 0; }

.op-pillars__intro { width: 41.667%; min-width: 0; max-width: 58ch; }
.op-pillars__intro h2 { margin-bottom: var(--space-3); }
.op-pillars__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); border-top: 1px solid var(--color-brushed-copper); }
.op-pillar { min-width: 0; padding-top: var(--space-5); border-top: 1px solid rgba(32,49,47,.14); transition: background-color var(--transition-fast); }
.op-pillar:focus { background: rgba(169,197,174,.22); outline: 2px solid var(--color-focus); outline-offset: 3px; }
.op-pillar .meta { margin-bottom: var(--space-3); color: var(--color-celadon-deep); }
.op-pillar h3 { max-width: 17ch; }
.op-pillar p:last-child { max-width: 38ch; margin-bottom: 0; }

.op-table__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); justify-content: space-between; gap: 8.333%; align-items: start; }
.op-table__media { position: relative; aspect-ratio: 4 / 5; }
.op-table__media::before { position: absolute; inset: var(--space-5) auto auto calc(var(--space-5) * -1); width: 1rem; height: 72%; background: var(--color-celadon-green); content: ""; }
.op-table__media img { position: relative; z-index: 1; height: 100%; object-position: center; }
.op-table__copy { max-width: 35.625rem; }
.op-table__copy > p:not(.op-table__callout) { max-width: 50ch; }
.op-table__details { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.op-table__details article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.op-table__details h3 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-nav); font-weight: 700; letter-spacing: var(--tracking-nav); }
.op-table__details p { max-width: 40ch; margin-bottom: 0; }
.op-table__callout { max-width: 46ch; margin-top: var(--space-6); margin-bottom: 0; padding: var(--space-4); background: rgba(169,197,174,.32); }
.op-table__callout a { color: var(--color-celadon-deep); font-weight: 700; }

.op-evening { background: var(--color-limestone-white); }
.op-evening__intro { width: 50%; min-width: 0; max-width: 62ch; }
.op-evening__intro p { max-width: 60ch; }
.op-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); }
.op-timeline::before { position: absolute; top: 0; left: 0; width: 0; height: 1px; background: var(--color-brushed-copper); content: ""; transition: width var(--transition-slow); }
.op-timeline.is-visible::before { width: 100%; }
.op-timeline__step { min-width: 0; opacity: .72; transform: translateY(.5rem); transition: opacity var(--transition-base), transform var(--transition-base); }
.op-timeline.is-visible .op-timeline__step { opacity: 1; transform: translateY(0); }
.op-timeline.is-visible .op-timeline__step:nth-child(2) { transition-delay: 70ms; }
.op-timeline.is-visible .op-timeline__step:nth-child(3) { transition-delay: 140ms; }
.op-timeline.is-visible .op-timeline__step:nth-child(4) { transition-delay: 210ms; }
.op-timeline__step .meta { margin-bottom: var(--space-3); color: var(--color-brushed-copper); }
.op-timeline__step h3 { max-width: 15ch; }
.op-timeline__step p:last-child { max-width: 34ch; margin-bottom: 0; }
.op-evening__outro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 33.333%; min-width: 0; margin-top: var(--space-7); }
.op-evening__outro p { max-width: 38ch; margin: 0; }
.op-evening__outro a:not(.button) { color: var(--color-celadon-deep); font-weight: 700; }

.op-faq { position: relative; }
.op-faq .eyebrow, .op-faq__intro p { color: var(--color-limestone-white); }
.op-faq .eyebrow::after { background: var(--color-celadon-green); }
.op-faq__intro { width: 50%; min-width: 0; max-width: 40rem; margin-inline: auto; text-align: center; }
.op-faq__intro h2 { margin-bottom: var(--space-3); }
.op-faq__intro p { max-width: 48ch; margin-inline: auto; }
.op-accordion { display: flex; flex-direction: column; gap: 0; width: 66.667%; min-width: 0; max-width: 51.25rem; margin: var(--space-7) auto 0; border-top: 1px solid rgba(169,197,174,.65); }
.op-accordion__item { min-width: 0; border-bottom: 1px solid rgba(169,197,174,.65); }
.op-accordion__item h3 { margin: 0; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; }
.op-accordion__item button { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; width: 100%; min-width: 0; align-items: center; gap: var(--space-4); border: 0; background: transparent; padding: var(--space-5) 0; color: var(--color-limestone-white); font-weight: 700; text-align: left; }
.op-accordion__item button span { width: 2rem; color: var(--color-peach-terracotta); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 400; text-align: center; }
.op-accordion__answer { max-width: 58ch; padding: 0 0 var(--space-5); color: var(--color-limestone-white); }
.op-accordion__answer p { margin-bottom: 0; }

.op-lounge__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); justify-content: space-between; gap: 8.333%; align-items: start; }
.op-lounge__copy { max-width: 35rem; }
.op-lounge__copy > p:not(.op-lounge__cta-copy) { max-width: 56ch; }
.op-lounge__media { aspect-ratio: 3 / 2; margin-top: var(--space-7); }
.op-lounge__media img { height: 100%; }
.op-lounge__moments { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0; }
.op-lounge__moments article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-brushed-copper); }
.op-lounge__moments h3 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-nav); font-weight: 700; }
.op-lounge__moments p { max-width: 36ch; margin-bottom: 0; }
.op-lounge__cta-copy { max-width: 35ch; }

.op-room { background: var(--color-danube-blue); padding: var(--section-space) 0; }
.op-room__layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--space-7); }
.op-room__media { min-height: 31rem; margin-left: max(-4.5rem, calc((100vw - var(--container-wide-max)) / -2)); }
.op-room__media img { height: 100%; object-position: center; }
.op-room__panel { max-width: 33.125rem; border-radius: var(--radius-4) 0 var(--radius-3) 0; background: var(--color-limestone-white); padding: var(--space-7); }
.op-room__panel > p { max-width: 55ch; }
.op-room__panel blockquote { max-width: 34ch; }
.op-room__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

.op-rhythm__intro { width: 58.333%; min-width: 0; max-width: 42.5rem; margin-inline: auto; text-align: center; }
.op-rhythm__intro p { max-width: 50ch; margin-inline: auto; }
.op-rhythm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.op-rhythm__grid article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-brushed-copper); }
.op-rhythm__grid .meta { color: var(--color-celadon-deep); }
.op-rhythm__grid h3 { max-width: 16ch; }
.op-rhythm__grid p:last-child { max-width: 34ch; margin-bottom: 0; }
.op-rhythm__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-brushed-copper); }
.op-rhythm__links > * { min-width: 0; }
.op-rhythm__links p { width: 100%; margin: 0; }

.op-dining__layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(25rem, 5fr); justify-content: space-between; gap: 8.333%; align-items: center; }
.op-dining__copy { max-width: 38.75rem; }
.op-dining__copy > p:not(.op-dining__cta-copy) { max-width: 60ch; }
.op-dining__details { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0; }
.op-dining__details article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-brushed-copper); }
.op-dining__details h3 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-nav); font-weight: 700; }
.op-dining__details p { max-width: 36ch; margin-bottom: 0; }
.op-dining__cta-copy { max-width: 25ch; }
.op-materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-3); height: 25rem; padding: var(--space-5); border-radius: var(--radius-3); background: var(--color-limestone-warm); }
.op-materials span { min-width: 0; min-height: 0; border-radius: var(--radius-2); }
.op-materials span:nth-child(1) { background: var(--color-peach-terracotta); border-radius: var(--radius-4) var(--radius-2) var(--radius-2); }
.op-materials span:nth-child(2) { background: var(--color-celadon-green); }
.op-materials span:nth-child(3) { background: linear-gradient(135deg, #47705f, #a9c5ae); }
.op-materials span:nth-child(4) { border: 1px solid rgba(255,255,255,.76); background: rgba(250,248,242,.45); backdrop-filter: blur(.5rem); }

.op-next { position: relative; }
.op-next__intro { width: 58.333%; min-width: 0; max-width: 43.75rem; margin-inline: auto; text-align: center; }
.op-next__intro p { max-width: 58ch; margin-inline: auto; }
.op-next__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); margin-top: var(--space-7); }
.op-next__choices article { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.op-next__choices article + article { padding-left: var(--space-7); border-left: 1px solid var(--color-brushed-copper); }
.op-next__choices h3, .op-next__choices p { margin: 0; }
.op-next__choices p { max-width: 40ch; }
.op-next__choices a:not(.button) { color: var(--color-celadon-deep); }

@media (max-width: 1100px) {
  .op-hero__layout { gap: var(--space-6); }
  .op-hero__media { min-height: 34rem; margin-left: -2rem; }
  .op-hero__copy h1 { font-size: 3rem; }
  .op-room__panel { padding: var(--space-6); }
}

@media (max-width: 1050px) {
  .op-room__layout { grid-template-columns: 1fr; gap: 0; }
  .op-room__media { min-height: auto; aspect-ratio: 3 / 2; margin-left: 0; }
  .op-room__panel { width: calc(100% - var(--space-7)); max-width: none; margin: calc(var(--space-6) * -1) auto 0; padding: var(--space-6); }
}

@media (max-width: 1024px) {
  .op-table__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .op-table__media { width: min(60%, 28rem); aspect-ratio: 4 / 5; }
  .op-table__copy { max-width: none; }
  .op-lounge__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .op-lounge__copy { max-width: none; }
  .op-lounge__media { margin-top: 0; }
  .op-dining__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .op-dining__copy { max-width: none; }
  .op-materials { height: 8.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; }
}

@media (max-width: 980px) {
  .op-pillars__intro { width: 50%; }
  .op-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-pillars__grid .op-pillar:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - var(--space-3)); }
}

@media (max-width: 960px) {
  .op-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-evening__outro { width: 50%; }
  .op-rhythm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-rhythm__grid article:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - var(--space-3)); }
}

@media (max-width: 899px) {
  .op-hero { padding-top: var(--space-10); }
  .op-hero__layout { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: var(--space-5); }
  .op-hero__media { min-height: 29rem; }
  .op-hero__copy { gap: var(--space-3); }
  .op-hero__copy h1 { font-size: clamp(2.5rem, 5vw, 3rem); }
  .op-accordion { width: 83.333%; }
  .op-next__choices { gap: var(--space-6); }
  .op-next__choices article + article { padding-left: var(--space-6); }
}

@media (max-width: 767px) {
  .op-hero { padding: var(--space-9) 0 var(--space-8); }
  .op-hero__layout { grid-template-columns: 1fr; gap: var(--space-5); width: min(100% - (var(--gutter) * 2), var(--container-wide-max)); }
  .op-hero__media { min-height: auto; aspect-ratio: 3 / 2; margin-left: 0; }
  .op-hero__copy { max-width: none; }
  .op-hero__lead { max-width: 38ch; }
  .op-hero__copy .button { width: 100%; min-height: 3rem; }
  .op-pillars__intro, .op-evening__intro, .op-faq__intro, .op-rhythm__intro, .op-next__intro { width: 100%; }
  .op-table__media { width: 100%; max-width: 30rem; }
  .op-table__media::before { display: none; }
  .op-table__copy > p:not(.op-table__callout) { max-width: 42ch; }
  .op-timeline { grid-template-columns: 1fr; gap: var(--space-5); margin-left: var(--space-5); padding: 0 0 0 var(--space-5); border-left: 1px solid var(--color-brushed-copper); }
  .op-timeline::before { display: none; }
  .op-timeline__step { position: relative; }
  .op-timeline__step::before { position: absolute; top: .5rem; left: calc(var(--space-5) * -1 - .3rem); width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-brushed-copper); content: ""; }
  .op-evening__outro { width: 100%; max-width: 30rem; }
  .op-accordion { width: 100%; }
  .op-lounge__copy > p:not(.op-lounge__cta-copy) { max-width: 42ch; }
  .op-lounge__copy .button { width: 100%; }
  .op-room__panel { width: calc(100% - var(--space-5)); margin-top: calc(var(--space-5) * -1); padding: var(--space-5); }
  .op-room__actions .button { width: 100%; }
  .op-rhythm__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .op-rhythm__grid article:nth-child(3) { grid-column: auto; max-width: none; }
  .op-rhythm__links { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .op-rhythm__links .text-link { width: 100%; justify-content: space-between; }
  .op-dining__copy > p:not(.op-dining__cta-copy) { max-width: 42ch; }
  .op-dining__copy .button { width: 100%; }
  .op-next__choices { grid-template-columns: 1fr; gap: var(--space-6); }
  .op-next__choices article + article { padding-top: var(--space-6); padding-left: 0; border-top: 1px solid var(--color-brushed-copper); border-left: 0; }
  .op-next__choices .button { width: 100%; }
}

@media (max-width: 599px) {
  .op-hero__copy h1 { font-size: 2.5rem; }
  .op-hero__media figcaption { left: var(--space-4); font-size: .625rem; }
  .op-pillars__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .op-pillars__grid .op-pillar:nth-child(3) { grid-column: auto; max-width: none; }
  .op-pillars__intro p { max-width: 42ch; }
  .op-pillar p:last-child { max-width: 42ch; }
  .op-table__details { gap: var(--space-4); }
  .op-timeline__step p:last-child { max-width: 42ch; }
  .op-faq__intro p { max-width: 38ch; }
  .op-accordion__item button { min-height: 3.25rem; padding: var(--space-4) 0; }
  .op-lounge__media { aspect-ratio: 3 / 2; }
  .op-room__media { aspect-ratio: 3 / 2; }
  .op-room__panel blockquote { padding-left: var(--space-4); font-size: 1.625rem; }
  .op-materials { height: 7rem; padding: var(--space-3); gap: var(--space-2); }
  .op-next__intro p { max-width: 40ch; }
}

@media (prefers-reduced-motion: reduce) {
  .op-timeline::before,
  .op-timeline__step { transition: none; }
}
