.offline-poker-page {
  background: var(--color-ink);
}

.op-hero {
  position: relative;
  min-height: 42.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  background: var(--color-ink);
}

.op-hero__media,
.op-hero__container {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.op-hero__media {
  height: 100%;
}

.op-hero__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(17, 18, 22, 0.9) 0%, rgba(17, 18, 22, 0.68) 42%, rgba(17, 18, 22, 0.12) 78%);
}

.op-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

.op-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.op-hero__copy {
  width: min(100%, 35rem);
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-10);
}

.op-hero__copy > * { margin: 0; }
.op-hero__copy h1 { max-width: 34rem; }
.op-hero__copy .lead { max-width: 35rem; }

.op-hero__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.op-hero__note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-subtle);
  color: var(--color-mist);
  font-size: var(--text-label);
  line-height: var(--leading-label);
}

.op-sequence__container { display: flex; min-width: 0; flex-direction: column; gap: var(--space-7); }
.op-sequence__intro { width: min(100%, 42.5rem); margin-left: 8.333%; }
.op-sequence__intro > :last-child { margin-bottom: 0; }
.op-sequence__list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.op-sequence__item { display: grid; grid-template-columns: minmax(0, 16.666%) minmax(0, 1fr); min-width: 0; }
.op-sequence__number { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 1px solid var(--color-gold); border-radius: var(--radius-circle); color: var(--color-gold); font-variant-numeric: tabular-nums; }
.op-sequence__body { width: min(100%, 36.25rem); min-width: 0; padding-left: var(--space-4); border-left: 1px solid var(--color-gold); }
.op-sequence__body > :last-child { margin-bottom: 0; }

.op-formats { background: linear-gradient(135deg, var(--color-burgundy), var(--color-navy) 65%); }
.op-formats__container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8.333%; align-items: start; }
.op-formats__intro { width: min(100%, 32.5rem); min-width: 0; }
.op-formats__intro > :last-child { margin-bottom: 0; }
.op-formats__panel-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.op-format-panel { position: relative; min-width: 0; padding: var(--space-5); border: var(--border-subtle); border-radius: var(--radius-card); background: var(--color-graphite); box-shadow: var(--shadow-card); }
.op-format-panel > :last-child { margin-bottom: 0; }
.op-format-panel__label, .op-tactic__label { margin: 0 0 var(--space-3); color: var(--color-gold); font-size: var(--text-meta); font-weight: 700; letter-spacing: .12em; line-height: var(--leading-meta); text-transform: uppercase; }
.op-format-panel--chip::after { position: absolute; top: var(--space-5); right: var(--space-5); width: 1.75rem; height: 1.75rem; border: 1px dashed var(--color-gold); border-radius: 50%; content: ""; }
.op-format-panel--rule { border-top: var(--border-gold); }
.op-formats__action { justify-self: start; width: auto; padding-inline: var(--space-5); }

.op-atmosphere { padding-block: var(--space-10); background: var(--color-ink); }
.op-atmosphere__container { position: relative; min-width: 0; }
.op-atmosphere__figure { margin: 0; }
.op-atmosphere__media { width: 100%; height: clamp(25rem, 42vw, 37rem); }
.op-atmosphere__media img { object-position: center center; }
.op-atmosphere__caption { position: relative; width: min(100%, 29.5rem); margin-top: calc(var(--space-8) * -1); margin-left: var(--space-7); z-index: 1; display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.op-atmosphere__caption > * { margin: 0; }
.op-atmosphere__note { padding: var(--space-4); border-top: 2px solid var(--color-burgundy); background: var(--color-linen); color: var(--color-ink); }
.op-atmosphere__note h3 { color: var(--color-ink); }
.op-atmosphere__note > :last-child { margin-bottom: 0; }

.op-tactics__container { display: flex; min-width: 0; flex-direction: column; gap: var(--space-8); }
.op-tactics__intro { width: min(100%, 40rem); margin-inline: auto; text-align: center; }
.op-tactics__intro > :last-child { margin-bottom: 0; }
.op-tactics__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr); gap: 8.333%; min-width: 0; align-items: start; }
.op-tactic { min-width: 0; padding-left: var(--space-4); border-left: 1px solid var(--color-gold); }
.op-tactic--timing { margin-top: var(--space-7); }
.op-tactic--reading { border-left-color: rgba(199,166,106,.55); }
.op-tactic > :last-child { margin-bottom: 0; }

.op-rules__container { display: flex; min-width: 0; flex-direction: column; gap: var(--space-7); }
.op-rules__intro { width: min(100%, 40.625rem); }
.op-rules__intro > :last-child { margin-bottom: 0; }
.op-rules__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); width: min(100%, 64rem); min-width: 0; }
.op-rule-panel { position: relative; min-width: 0; padding: var(--space-5); border: var(--border-subtle); border-top: 2px solid var(--color-gold); border-radius: var(--radius-card); background: var(--color-graphite); }
.op-rule-panel > :last-child { margin-bottom: 0; }
.op-rule-panel__number { display: block; margin-bottom: var(--space-4); color: var(--color-gold); font-size: var(--text-label); font-variant-numeric: tabular-nums; }
.op-rule-panel--chip::after { position: absolute; top: var(--space-5); right: var(--space-5); width: 1.5rem; height: 1.5rem; border: 1px dashed var(--color-gold); border-radius: 50%; content: ""; }
.op-rule-panel--burgundy { background: linear-gradient(135deg, rgba(88,42,53,.92), var(--color-graphite)); }
.op-rules__closing { width: min(100%, 38.75rem); margin: 0; }

.op-groups { background: var(--color-ink); }
.op-groups__container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8.333%; align-items: start; }
.op-groups__media { width: 100%; height: 36rem; }
.op-groups__media img { object-position: center center; }
.op-groups__copy { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.op-groups__copy > * { margin: 0; }
.op-groups__copy .lead { max-width: 32.5rem; }
.op-groups__units { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.op-groups__units article { min-width: 0; padding-top: var(--space-4); border-top: var(--border-subtle); }
.op-groups__units article > :last-child { margin-bottom: 0; }
.op-groups__callout { max-width: 28.75rem; padding: var(--space-5); border-left: 3px solid var(--color-burgundy); background: var(--color-linen); color: var(--color-ink); }
.op-groups__callout h3 { color: var(--color-ink); }
.op-groups__callout > :last-child { margin-bottom: 0; }

.op-nights__container { display: flex; min-width: 0; flex-direction: column; gap: var(--space-7); }
.op-nights__intro { width: min(100%, 40rem); }
.op-nights__intro > :last-child { margin-bottom: 0; }
.op-nights__list { width: min(100%, 52rem); display: flex; min-width: 0; flex-direction: column; margin: 0; }
.op-nights__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-5); min-width: 0; padding-block: var(--space-5); border-top: var(--border-subtle); }
.op-nights__row:last-child { border-bottom: var(--border-subtle); }
.op-nights__row dt { min-width: 0; color: var(--color-mist); font-size: var(--text-meta); letter-spacing: .12em; text-transform: uppercase; }
.op-nights__row dt span { width: 2rem; height: 2rem; display: inline-grid; place-items: center; margin-right: var(--space-2); border: 1px solid var(--color-gold); border-radius: 50%; color: var(--color-gold); font-variant-numeric: tabular-nums; }
.op-nights__row dd { min-width: 0; margin: 0; }
.op-nights__row dd > :last-child { margin-bottom: 0; }

.op-care { background: linear-gradient(135deg, #32171f 0%, var(--color-ink) 70%); }
.op-care__container { display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); }
.op-care__intro { width: min(100%, 38.75rem); }
.op-care__intro > :last-child { margin-bottom: 0; }
.op-care__unit { width: min(100%, 38.75rem); min-width: 0; padding-left: var(--space-5); border-left: 2px solid var(--color-gold); }
.op-care__unit > :last-child { margin-bottom: 0; }
.op-care__unit--offset { width: min(100%, 35rem); margin-left: 8.333%; }
.op-care__unit h3 span { color: var(--color-gold); font-family: var(--font-body); font-size: var(--text-label); letter-spacing: .08em; vertical-align: middle; }
.op-care__note { width: min(100%, 30rem); display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.op-care__note > * { margin: 0; }

.op-close { padding-block: var(--space-10); background: var(--color-ink); }
.op-close__container { display: flex; justify-content: center; min-width: 0; }
.op-close__block { position: relative; width: min(100%, 32.5rem); display: flex; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-7); text-align: center; }
.op-close__block::before, .op-close__block::after { position: absolute; width: 30%; height: 2rem; content: ""; pointer-events: none; }
.op-close__block::before { top: 0; left: 0; border-top: 1px solid var(--color-gold); border-left: 1px solid var(--color-gold); }
.op-close__block::after { right: 0; bottom: 0; border-right: 1px solid var(--color-gold); border-bottom: 1px solid var(--color-gold); }
.op-close__block > * { margin: 0; }
.op-close__actions { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.op-close__actions > * { min-width: 11.25rem; padding-inline: var(--space-5); }

@media (max-width: 63.74rem) {
  .op-hero__copy { width: min(100%, 43rem); }
  .op-hero__media img { object-position: 72% center; }
  .op-formats__container { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .op-formats__intro { width: min(100%, 42rem); }
  .op-formats__panel-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-formats__action { grid-column: 1 / -1; }
  .op-atmosphere__caption { margin-top: var(--space-5); margin-left: 0; }
  .op-tactics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .op-tactic--timing { margin-top: 0; }
  .op-tactic--reading { grid-column: 1 / -1; width: min(100%, 26.25rem); }
  .op-groups__container { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .op-groups__media { height: 27rem; }
  .op-groups__copy { width: min(100%, 38.75rem); }
  .op-care__unit--offset { margin-left: 0; }
}

@media (max-width: 51.24rem) {
  .op-rules__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.49rem) {
  .op-hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .op-hero__media { width: 100%; height: 23rem; }
  .op-hero__media::after { display: none; }
  .op-hero__container { width: 100%; }
  .op-hero__copy { width: 100%; padding-block: var(--space-6) var(--space-8); }
  .op-hero__copy h1 { font-size: clamp(2.8rem, 13vw, 3.4rem); }
  .op-hero__notes { grid-template-columns: minmax(0, 1fr); }
  .op-sequence__container, .op-tactics__container, .op-rules__container, .op-nights__container { gap: var(--space-6); }
  .op-sequence__intro { width: 100%; margin-left: 0; }
  .op-sequence__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .op-sequence__body { width: 100%; padding-left: 0; border-left: 0; }
  .op-formats__panel-group { grid-template-columns: minmax(0, 1fr); }
  .op-formats__action { width: 100%; }
  .op-atmosphere { padding-block: var(--space-8); }
  .op-atmosphere__media { height: 29rem; }
  .op-atmosphere__caption { width: 100%; padding: var(--space-5); }
  .op-tactics__intro { width: 100%; margin-inline: 0; text-align: left; }
  .op-tactics__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .op-tactic--reading { grid-column: auto; width: 100%; }
  .op-rules__grid { width: 100%; gap: var(--space-3); }
  .op-groups__media { height: 30rem; }
  .op-nights__list { width: 100%; }
  .op-nights__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .op-care__unit, .op-care__unit--offset, .op-care__note { width: 100%; }
  .op-close { padding-block: var(--space-8); }
  .op-close__container { justify-content: stretch; }
  .op-close__block { width: 100%; align-items: stretch; padding: var(--space-6) var(--space-5); text-align: left; }
  .op-close__actions { flex-direction: column; align-items: stretch; }
  .op-close__actions > * { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .op-atmosphere__media img, .op-groups__media img { transition: transform var(--transition-slow), filter var(--transition-slow); }
  .op-atmosphere__media:hover img, .op-groups__media:hover img { transform: scale(1.03); filter: brightness(1.04); }
}