.offline-poker-page {
  background: var(--surface-base);
}

.offline-poker-page .section {
  position: relative;
}

.offline-poker-page .eyebrow {
  margin-block-end: var(--space-4);
}

.op-hero {
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.op-hero::before,
.op-closing__panel::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(8vw, 7rem);
  content: "";
  background: var(--surface-velvet);
  opacity: 0.6;
}

.op-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.op-hero__grid > * { min-width: 0; }

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

.op-hero__copy > * { margin: 0; }
.op-hero__copy h1 { max-width: 34rem; }
.op-hero__copy .lead { max-width: 34rem; }
.op-hero__actions { width: 100%; margin-top: var(--space-2); }

.op-hero__media {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: var(--border-subtle);
}

.op-hero__media img { height: 100%; object-position: 50% 35%; }
.op-hero__media figcaption {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
}

.op-hero__media figcaption span { min-width: 0; }
.op-hero__media figcaption span:first-child { color: var(--color-table-light); font-weight: 700; }

.op-meaning__intro { max-width: 41.25rem; }
.op-meaning__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.op-meaning__grid > * { min-width: 0; }
.op-meaning__item {
  min-width: 0;
  padding: var(--space-5) 0 0;
  border-top: var(--border-subtle);
}

.op-meaning__item p:last-child { max-width: 18rem; }
.op-meaning__item--lagoon { padding: var(--space-5); background: var(--surface-lounge); border-top-color: var(--color-burnt-apricot); }
.op-number { margin: 0 0 var(--space-3); color: var(--color-table-light); font-family: var(--font-heading); font-size: 3rem; line-height: 1; }

.op-room__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 4rem);
}

.op-room__grid > * { min-width: 0; }
.op-room__media { width: 100%; margin: 0; aspect-ratio: 4 / 5; border: var(--border-subtle); }
.op-room__media img { height: 100%; object-position: 50% 35%; }
.op-room__content { min-width: 0; }
.op-room__content > p:not(.eyebrow) { max-width: 33.75rem; }
.op-detail-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.op-detail-rail__item { min-width: 0; padding-top: var(--space-3); border-top: var(--border-subtle); }
.op-detail-rail__item h3 { font-size: 1.3rem; }
.op-detail-rail__item p { max-width: 15.5rem; margin-bottom: 0; font-size: var(--text-meta); }

.op-journey__intro { max-width: 38.75rem; }
.op-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.op-stages > * { position: relative; min-width: 0; }
.op-stage { padding-top: var(--space-5); border-top: var(--border-subtle); }
.op-stage:not(:last-child)::after { position: absolute; top: 0; right: calc(var(--space-6) / -2); width: var(--space-6); height: 1px; content: ""; background: var(--color-burnt-apricot); }
.op-stage__number { margin: 0 0 var(--space-3); color: var(--color-table-light); font-size: var(--text-utility); font-weight: 800; letter-spacing: var(--tracking-utility); }
.op-stage p:last-child { max-width: 20rem; }
.op-dining-note { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-7); padding: var(--space-5); border: var(--border-subtle); background: var(--surface-base); }
.op-dining-note > * { min-width: 0; }
.op-dining-note h3, .op-dining-note p { margin-bottom: 0; }
.op-dining-note p { max-width: 36rem; }

.op-rhythm::before { position: absolute; inset: 0; pointer-events: none; content: ""; background: radial-gradient(circle at 78% 24%, rgba(232,185,130,.14), transparent 22rem); }
.op-rhythm .container { position: relative; }
.op-rhythm__intro { max-width: 37.5rem; }
.op-rhythm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 8vw, 7rem); row-gap: var(--space-6); margin-top: var(--space-7); }
.op-rhythm__grid > * { min-width: 0; }
.op-principle { max-width: 17rem; padding-top: var(--space-4); border-top: var(--border-subtle); }
.op-principle:nth-child(2), .op-principle:nth-child(4) { margin-top: var(--space-8); }
.op-principle p:last-child { margin-bottom: 0; }
.op-principle__phrase { margin: 0 0 var(--space-3); color: var(--color-table-light); font-family: var(--font-heading); font-size: 1.35rem; font-style: italic; }

.op-holdem__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(2rem, 5vw, 4rem); }
.op-holdem__grid > * { min-width: 0; }
.op-holdem__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 31.25rem; }
.op-holdem__content > * { margin: 0; }
.op-holdem__media { width: 100%; margin: 0; aspect-ratio: 3 / 4; border: var(--border-subtle); }
.op-holdem__media img { height: 100%; object-position: 50% 35%; }
.op-holdem__note { max-width: 22.5rem; padding-top: var(--space-5); border-top: var(--border-subtle); grid-column: 1; }
.op-holdem__note p { margin-bottom: var(--space-2); color: var(--color-pearl-cream); font-family: var(--font-heading); font-size: 1.55rem; font-style: italic; line-height: var(--leading-compact); }
.op-holdem__note span { color: var(--color-pearl-muted); font-size: var(--text-meta); line-height: var(--leading-meta); }

.op-lounge__panel { padding: clamp(var(--space-6), 6vw, var(--space-9)); border: var(--border-subtle); box-shadow: var(--shadow-inset); background: var(--surface-raised); }
.op-lounge__lead { max-width: 38.75rem; }
.op-lounge__lead .lead { margin-bottom: 0; }
.op-lounge__statements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.op-lounge__statements > * { min-width: 0; padding-top: var(--space-4); border-top: var(--border-subtle); }
.op-lounge__statements p { max-width: 17.5rem; margin-bottom: 0; }
.op-lounge__route { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-7); min-width: 0; }
.op-lounge__route > * { min-width: 0; margin: 0; }
.op-lounge__route p { max-width: 25rem; }

.op-evening__figure { position: relative; width: 100%; margin: 0; aspect-ratio: 21 / 9; border: var(--border-subtle); }
.op-evening__figure img { height: 100%; object-position: 50% 35%; }
.op-evening__overlay { position: absolute; inset-inline-start: var(--space-6); inset-block-end: var(--space-6); width: min(34%, 22.5rem); padding: var(--space-5); background: rgba(22, 11, 18, .82); }
.op-evening__overlay > * { margin: 0; }
.op-evening__overlay h2 { margin-top: var(--space-3); font-size: clamp(1.9rem, 3vw, 2.8rem); }
.op-evening__caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: var(--border-subtle); }
.op-evening__caption > * { min-width: 0; }
.op-evening__caption p { max-width: 37.5rem; margin: 0; font-size: var(--text-meta); }
.op-evening__caption span { color: var(--color-table-light); font-size: var(--text-utility); font-weight: 700; letter-spacing: var(--tracking-utility); white-space: nowrap; }

.op-faq__intro { max-width: 37.5rem; }
.op-faq__list { margin-top: var(--space-7); border-top: var(--border-subtle); }
.op-faq__item { border-bottom: var(--border-subtle); }
.op-faq__item.is-open { border-color: var(--color-border-strong); }
.op-faq__button { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; align-items: center; width: 100%; min-width: 0; padding: var(--space-5) 0; background: transparent; color: var(--color-pearl-cream); font-family: var(--font-heading); font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 500; line-height: var(--leading-compact); text-align: left; }
.op-faq__button > * { min-width: 0; }
.op-faq__symbol { color: var(--color-burnt-apricot); font-family: var(--font-body); font-size: 1.5rem; text-align: right; }
.op-faq__answer { max-width: 38.75rem; padding-bottom: var(--space-5); }
.op-faq__answer p { margin: 0; }
.op-faq__contact { margin-top: var(--space-6); }

.op-closing { overflow: hidden; }
.op-closing__panel { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); padding: clamp(4rem, 8vw, 8rem); border: var(--border-subtle); background: var(--surface-lounge); box-shadow: var(--shadow-inset); }
.op-closing__panel::before { z-index: 0; width: min(10vw, 8rem); opacity: .8; }
.op-closing__panel > * { position: relative; z-index: 1; min-width: 0; }
.op-closing__statement { max-width: 56.25rem; }
.op-closing__statement h2 { margin-bottom: 0; font-size: clamp(3rem, 6vw, 5.75rem); }
.op-closing__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); max-width: 33.75rem; align-self: end; }
.op-closing__action > * { margin: 0; }

@media (max-width: 1040px) {
  .op-holdem__grid { gap: var(--space-6); }
}

@media (max-width: 1020px) {
  .op-room__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .op-room__media { max-width: 43rem; }
  .op-room__content { max-width: 41.25rem; }
}

@media (max-width: 980px) {
  .op-meaning__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-meaning__item--lagoon { grid-column: 1 / -1; }
  .op-meaning__item--lagoon p:last-child { max-width: 35rem; }
}

@media (max-width: 960px) {
  .op-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-stage:nth-child(3) { grid-column: 1 / -1; }
  .op-stage:nth-child(2)::after { display: none; }
  .op-stage:nth-child(3) p:last-child { max-width: 38rem; }
}

@media (max-width: 950px) {
  .op-lounge__statements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-lounge__statements article:nth-child(3) { grid-column: 1 / -1; }
  .op-lounge__statements article:nth-child(3) p { max-width: 35rem; }
}

@media (max-width: 920px) {
  .op-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .op-hero__copy { max-width: 41.25rem; }
  .op-hero__media { max-width: 100%; }
  .op-rhythm__grid { column-gap: var(--space-6); }
  .op-principle { max-width: none; }
}

@media (max-width: 900px) {
  .op-holdem__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .op-holdem__content { max-width: 37.5rem; }
  .op-holdem__media { max-width: 43rem; }
  .op-holdem__note { grid-column: auto; }
}

@media (max-width: 860px) {
  .op-closing__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-8); }
  .op-closing__action { align-self: auto; }
}

@media (max-width: 700px) {
  .op-meaning__grid,
  .op-stages,
  .op-rhythm__grid,
  .op-lounge__statements { grid-template-columns: minmax(0, 1fr); }
  .op-meaning__item--lagoon,
  .op-stage:nth-child(3),
  .op-lounge__statements article:nth-child(3) { grid-column: auto; }
  .op-meaning__item p:last-child,
  .op-meaning__item--lagoon p:last-child,
  .op-stage p:last-child,
  .op-stage:nth-child(3) p:last-child,
  .op-lounge__statements p,
  .op-lounge__statements article:nth-child(3) p { max-width: 35rem; }
  .op-stage:not(:last-child)::after { display: none; }
  .op-principle:nth-child(2), .op-principle:nth-child(4) { margin-top: 0; }
  .op-evening__figure { aspect-ratio: 4 / 5; }
  .op-evening__overlay { position: static; width: 100%; padding: var(--space-5); background: var(--surface-raised); }
  .op-evening__caption { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

@media (max-width: 680px) {
  .op-dining-note { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 660px) {
  .op-lounge__route { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .op-rhythm__grid { gap: var(--space-5); }
  .op-principle { padding: var(--space-5) var(--space-4); background: rgba(22, 11, 18, .14); }
}

@media (max-width: 600px) {
  .op-closing__panel { padding: var(--space-6); }
}

@media (max-width: 767px) {
  .op-hero { padding-top: var(--space-7); }
  .op-hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .op-hero__copy { display: contents; }
  .op-hero__copy .eyebrow { order: 1; }
  .op-hero__copy h1 { order: 2; }
  .op-hero__media { order: 3; aspect-ratio: 4 / 5; }
  .op-hero__copy .lead { order: 4; max-width: none; }
  .op-hero__actions { order: 5; }
  .op-hero__grid > .eyebrow,
  .op-hero__grid > h1,
  .op-hero__grid > .lead,
  .op-hero__grid > .op-hero__actions { width: 100%; }
  .op-hero__media figcaption { grid-template-columns: minmax(0, 1fr); }
  .op-room__media,
  .op-holdem__media { aspect-ratio: 4 / 5; }
  .op-room__content > p:not(.eyebrow),
  .op-holdem__content { max-width: none; }
  .op-detail-rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .op-detail-rail__item p { max-width: 35rem; }
  .op-lounge__panel { padding: var(--space-6); }
  .op-faq__button { font-size: 1.35rem; }
  .op-faq__answer { max-width: none; }
}

@media (max-width: 420px) {
  .op-hero__actions,
  .op-dining-note .button-group,
  .op-closing__action .button-group { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .op-hero__actions .button,
  .op-dining-note .button,
  .op-closing__action .button,
  .op-lounge__route .button,
  .op-faq__contact,
  .op-holdem__content .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .offline-poker-page * { transition-duration: 180ms; }
}