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

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

.offline-poker-page a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.op-hero {
  position: relative;
  min-height: 38.75rem;
  overflow: hidden;
  background: var(--color-charcoal-950);
  color: var(--color-off-white);
}

.op-hero__image,
.op-hero__image::after {
  position: absolute;
  inset: 0;
}

.op-hero__image {
  overflow: hidden;
}

.op-hero__image::after {
  content: "";
  background: var(--color-brick-shadow);
}

.op-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
  transition: transform var(--transition-fast);
}

.op-hero__desktop-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  min-height: 38.75rem;
  margin-inline: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: end;
}

.op-hero__copy {
  grid-column: 1 / span 5;
  width: min(100%, 35rem);
  min-width: 0;
  padding-bottom: 3rem;
}

.op-hero__copy .utility-label,
.op-hero__mobile-content .utility-label {
  color: var(--color-soft-copper);
}

.op-hero__copy h1 {
  margin-top: var(--space-3);
  color: var(--color-off-white);
}

.op-hero__deck {
  max-width: 31.25rem;
  color: var(--color-off-white);
  font-size: var(--text-body-large);
  line-height: var(--line-body-large);
}

.op-hero__support {
  display: flex;
  width: min(100%, 27.5rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--color-dark-muted);
}

.op-hero__support p {
  margin: 0;
}

.op-hero__mobile-content {
  display: none;
}

.op-number {
  display: block;
  color: var(--color-rust);
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 600;
  line-height: 0.9;
}

.op-premise__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 1.25rem;
}

.op-premise__rail {
  grid-column: 1 / span 3;
  width: 100%;
  max-width: 16.25rem;
  min-width: 0;
}

.op-premise__rail .utility-label {
  margin-top: var(--space-3);
}

.op-premise__intro {
  grid-column: 4 / span 6;
  width: 100%;
  max-width: 38.75rem;
  min-width: 0;
}

.op-premise__previews {
  display: grid;
  grid-column: 10 / span 3;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
}

.op-preview {
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(32, 33, 30, 0.35);
}

.op-preview:nth-child(2) { margin-left: 1rem; }
.op-preview:nth-child(4) { margin-left: 1.5rem; }
.op-preview span {
  color: var(--color-rust);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
}
.op-preview h3 { margin-top: var(--space-1); margin-bottom: var(--space-2); }
.op-preview p { margin: 0; font-size: var(--text-small); line-height: var(--line-small); }

.op-premise__actions {
  display: flex;
  grid-column: 4 / span 9;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-charcoal-800);
}

.op-premise__actions a,
.op-setting-inset a,
.op-orientation__modules a,
.op-visit__row > a:not(.button) {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  min-width: 0;
  color: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.op-premise__actions a {
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-charcoal-800);
}

.op-premise__actions a:last-child { border-right: 0; }
.op-premise__actions a::after,
.op-setting-inset a::after,
.op-orientation__modules a::after,
.op-visit__row > a:not(.button)::after {
  width: 0;
  height: 1px;
  margin-left: var(--space-2);
  background: var(--color-rust);
  content: "";
  transition: width var(--transition-fast);
}

.op-premise__actions a:hover::after,
.op-setting-inset a:hover::after,
.op-orientation__modules a:hover::after,
.op-visit__row > a:not(.button):hover::after { width: 1.25rem; }

.op-real-tables__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: start;
}

.op-real-tables__copy {
  grid-column: 1 / span 5;
  width: 100%;
  max-width: 31.25rem;
  min-width: 0;
}

.op-real-marker {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-rust);
}

.op-real-marker b {
  color: var(--color-rust);
  font-family: var(--font-heading);
  font-size: 1.625rem;
  line-height: 1;
}

.op-real-marker .utility-label { color: var(--color-rust); }
.op-real-tables__copy h2,
.op-real-people__copy h2,
.op-atmosphere__lead h2 { margin-top: var(--space-4); }
.op-real-tables__copy blockquote { max-width: 24.375rem; }

.op-real-tables__figure {
  grid-column: 6 / span 7;
  width: calc(100% + var(--gutter));
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin-top: var(--space-6);
  justify-self: start;
}

.op-real-tables__figure img,
.op-real-people__figure img { transition: transform var(--transition-fast); }

.op-real-cards__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
}

.op-real-cards__rail {
  grid-column: 1 / span 2;
  width: 100%;
  min-width: 0;
}

.op-real-cards__rail .utility-label { margin-top: var(--space-3); }
.op-real-cards__reading {
  grid-column: 3 / span 7;
  width: 100%;
  max-width: 42.5rem;
  min-width: 0;
}

.op-real-cards__reading h2 { margin-top: var(--space-3); }

.op-gestures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-6);
}

.op-gestures article {
  width: 100%;
  min-width: 0;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-dark-divider);
}

.op-gestures article:last-child { border-bottom: 1px solid var(--color-dark-divider); }
.op-gestures h3 { margin-bottom: var(--space-1); }
.op-gestures p { margin: 0; max-width: 31.25rem; color: var(--color-dark-muted); }

.op-setting-inset {
  display: flex;
  grid-column: 10 / span 3;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  align-self: start;
  padding: var(--space-5);
  border: 1px solid var(--color-steel-line);
  border-left: 3px solid var(--color-olive);
  border-radius: var(--radius-control);
  background: var(--color-charcoal-800);
}

.op-setting-inset .utility-label { color: #b3bc8e; }
.op-setting-inset p { margin: 0; color: var(--color-dark-muted); }
.op-setting-inset a { color: var(--color-off-white); }

.op-real-people { background: var(--color-warm-white); }
.op-real-people__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: start;
}

.op-real-people__figure {
  grid-column: 1 / span 5;
  width: 100%;
  max-width: 28.75rem;
  min-width: 0;
  aspect-ratio: 4 / 5;
}

.op-real-people__figure figcaption {
  width: 100%;
  max-width: 18.75rem;
  margin-top: var(--space-3);
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  line-height: var(--line-small);
}

.op-real-people__copy {
  grid-column: 7 / span 5;
  width: 100%;
  max-width: 32.5rem;
  min-width: 0;
}

.op-social-statement {
  width: 100%;
  max-width: 25rem;
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--color-rust);
  font-family: var(--font-heading);
  font-size: var(--text-subsection);
  font-weight: 600;
  line-height: var(--line-subheading);
}

.op-atmosphere__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
}

.op-atmosphere__lead {
  grid-column: 1 / span 7;
  width: 100%;
  max-width: 45rem;
  min-width: 0;
}

.op-atmosphere .op-real-marker .utility-label { color: var(--color-soft-copper); }
.op-atmosphere__sensory {
  display: grid;
  grid-column: 1 / span 12;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
  margin-top: var(--space-6);
}

.op-atmosphere__sensory article {
  width: 100%;
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-steel-line);
}

.op-atmosphere__sensory .utility-label { color: var(--color-soft-copper); }
.op-atmosphere__sensory h3 { margin-top: var(--space-2); }
.op-atmosphere__sensory p { width: 100%; max-width: 26.25rem; margin: 0; color: var(--color-dark-muted); }

.op-atmosphere__hospitality {
  display: flex;
  grid-column: 4 / span 6;
  width: 100%;
  max-width: 37.5rem;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-dark-divider);
}

.op-atmosphere__hospitality p { margin: 0; }
.op-atmosphere__actions {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.op-flow__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
}

.op-flow__intro {
  grid-column: 1 / span 4;
  width: 100%;
  max-width: 23.75rem;
  min-width: 0;
}

.op-flow__intro .utility-label { color: var(--color-olive); }
.op-flow__steps {
  display: grid;
  grid-column: 6 / span 7;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--color-charcoal-800);
}

.op-flow__steps li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  padding: var(--space-5) 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-charcoal-800);
}

.op-flow__steps li:last-child { border-bottom: 1px solid var(--color-charcoal-800); }
.op-flow__number { min-width: 0; color: var(--color-rust); font-family: var(--font-heading); font-size: 2.5rem; font-weight: 600; line-height: .9; }
.op-flow__steps li > div { width: 100%; max-width: 36.25rem; min-width: 0; }
.op-flow__steps h3 { margin-top: var(--space-2); }
.op-flow__steps p { margin: 0; }
.op-flow__steps .utility-label { color: var(--color-olive); }

.op-orientation__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
}

.op-orientation__intro {
  grid-column: 1 / span 4;
  width: 100%;
  max-width: 23.75rem;
  min-width: 0;
}

.op-orientation__modules {
  display: grid;
  grid-column: 5 / span 8;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-4) 1.25rem;
  width: 100%;
  min-width: 0;
}

.op-orientation__modules article {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  border-top: 1px solid var(--color-steel-line);
  border-bottom: 1px solid var(--color-steel-line);
}

.op-orientation__modules article:nth-child(1) { grid-column: 1 / span 5; }
.op-orientation__modules article:nth-child(2) { grid-column: 2 / span 6; }
.op-orientation__modules article:nth-child(3) { grid-column: 1 / span 5; }
.op-orientation__modules .op-number { color: var(--color-soft-copper); }
.op-orientation__modules h3 { margin-top: var(--space-3); }
.op-orientation__modules p { width: 100%; max-width: 22.5rem; }
.op-orientation__modules a { margin-top: auto; color: var(--color-off-white); }

.op-visit__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: start;
}

.op-visit__copy {
  grid-column: 1 / span 5;
  width: 100%;
  max-width: 31.25rem;
  min-width: 0;
}

.op-visit__panel {
  display: grid;
  grid-column: 7 / span 5;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: 31.25rem;
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-charcoal-800);
  background: var(--color-warm-white);
}

.op-visit__row {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-4);
}

.op-visit__row:first-child { padding-top: 0; }
.op-visit__row + .op-visit__row { border-top: 1px solid var(--color-charcoal-800); }
.op-visit__row p { margin: 0; }
.op-visit__row .button { margin-top: var(--space-2); }
.op-visit__row a { overflow-wrap: anywhere; }

.op-closing { padding-block: var(--space-9); }
.op-closing__copy {
  display: flex;
  width: 100%;
  max-width: 38.75rem;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-inline: auto;
  text-align: center;
}

.op-closing__copy .rule { width: 3.5rem; }
.op-closing__copy h2,
.op-closing__copy p { margin: 0; }
.op-closing__copy h2 { width: 100%; }
.op-closing__copy p { width: 100%; }
.op-closing__actions {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-start;
  margin-top: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .op-hero:hover .op-hero__image img { transform: scale(1.02); }
  .op-real-tables__figure:hover img,
  .op-real-people__figure:hover img { transform: scale(1.02); }
  .op-gestures article:hover { border-top-color: var(--color-soft-copper); }
}

@media (max-width: 65.625rem) {
  .op-premise__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-5) 1rem; }
  .op-premise__rail { grid-column: 1 / span 3; }
  .op-premise__intro { grid-column: 4 / span 5; }
  .op-premise__previews { grid-column: 4 / span 5; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-preview:nth-child(2), .op-preview:nth-child(4) { margin-left: 0; }
  .op-premise__actions { grid-column: 1 / span 8; margin-top: var(--space-4); }

  .op-real-tables__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: var(--space-5); }
  .op-real-tables__copy { grid-column: 1 / span 5; }
  .op-real-tables__figure { grid-column: 1 / span 8; width: 100%; margin-top: 0; }

  .op-real-cards__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: var(--space-5); }
  .op-real-cards__rail { grid-column: 1 / span 2; }
  .op-real-cards__reading { grid-column: 3 / span 6; }
  .op-setting-inset { grid-column: 3 / span 6; }

  .op-real-people__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: var(--space-5); }
  .op-real-people__copy { grid-column: 1 / span 6; grid-row: 1; }
  .op-real-people__figure { grid-column: 1 / span 5; grid-row: 2; }

  .op-atmosphere__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .op-atmosphere__lead { grid-column: 1 / span 6; }
  .op-atmosphere__sensory { grid-column: 1 / span 8; }
  .op-atmosphere__hospitality { grid-column: 2 / span 6; }

  .op-flow__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: var(--space-5); }
  .op-flow__intro { grid-column: 1 / span 5; }
  .op-flow__steps { grid-column: 1 / span 8; }

  .op-orientation__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: var(--space-5); }
  .op-orientation__intro { grid-column: 1 / span 4; }
  .op-orientation__modules { grid-column: 1 / span 8; grid-template-columns: minmax(0, 1fr); }
  .op-orientation__modules article:nth-child(n) { grid-column: 1; }

  .op-visit__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: var(--space-5); }
  .op-visit__copy { grid-column: 1 / span 5; }
  .op-visit__panel { grid-column: 1 / span 8; }
}

@media (max-width: 61.25rem) {
  .op-hero { min-height: 34rem; }
  .op-hero__desktop-content { min-height: 34rem; }
  .op-hero__copy { grid-column: 1 / span 6; }
}

@media (max-width: 57.5rem) {
  .op-atmosphere__sensory { grid-template-columns: minmax(0, 1fr); }
  .op-atmosphere__sensory article { max-width: 26.25rem; }
}

@media (max-width: 51.25rem) {
  .op-closing__actions { flex-direction: column; }
  .op-closing__actions .button { width: 100%; }
}

@media (max-width: 47.9375rem) {
  .op-hero { min-height: 0; overflow: visible; }
  .op-hero__image { position: relative; height: clamp(18.75rem, 60vw, 22.5rem); }
  .op-hero__image img { object-position: 67% center; }
  .op-hero__desktop-content { display: none; }
  .op-hero__mobile-content {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--gutter) var(--space-6);
    background: var(--color-charcoal-950);
  }
  .op-hero__mobile-content h1,
  .op-hero__mobile-content p { margin: 0; }
  .op-hero__mobile-content .display { font-size: clamp(2.625rem, 12vw, 2.875rem); }
  .op-hero__deck { max-width: none; }
  .op-hero__support { width: 100%; max-width: none; margin-top: 0; }

  .op-premise__grid,
  .op-real-tables__grid,
  .op-real-cards__grid,
  .op-real-people__grid,
  .op-atmosphere__grid,
  .op-flow__grid,
  .op-orientation__grid,
  .op-visit__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }

  .op-premise__rail,
  .op-premise__intro,
  .op-premise__previews,
  .op-premise__actions,
  .op-real-tables__copy,
  .op-real-tables__figure,
  .op-real-cards__rail,
  .op-real-cards__reading,
  .op-setting-inset,
  .op-real-people__copy,
  .op-real-people__figure,
  .op-atmosphere__lead,
  .op-atmosphere__sensory,
  .op-atmosphere__hospitality,
  .op-flow__intro,
  .op-flow__steps,
  .op-orientation__intro,
  .op-orientation__modules,
  .op-visit__copy,
  .op-visit__panel { grid-column: 1; }

  .op-premise__rail,
  .op-premise__intro,
  .op-real-tables__copy,
  .op-real-cards__rail,
  .op-real-cards__reading,
  .op-real-people__copy,
  .op-atmosphere__lead,
  .op-flow__intro,
  .op-orientation__intro,
  .op-visit__copy { max-width: none; }

  .op-premise__previews { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .op-preview { padding-block: var(--space-3); }
  .op-premise__actions { flex-direction: column; margin-top: 0; }
  .op-premise__actions a { width: 100%; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--color-charcoal-800); }
  .op-premise__actions a:last-child { border-bottom: 0; }

  .op-real-tables__figure { width: 100%; aspect-ratio: 4 / 3; }
  .op-real-tables__copy { order: 1; }
  .op-real-tables__figure { order: 2; }
  .op-real-tables__copy .button { margin-top: var(--space-2); }

  .op-real-cards__reading h2 { margin-top: 0; }
  .op-setting-inset { padding: var(--space-4); }
  .op-setting-inset a { width: 100%; }

  .op-real-people__copy { grid-row: auto; }
  .op-real-people__figure { grid-row: auto; width: 100%; max-width: none; }
  .op-real-people__figure figcaption { max-width: 20rem; }

  .op-atmosphere__lead { max-width: none; }
  .op-atmosphere__sensory { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .op-atmosphere__hospitality { max-width: none; margin-top: 0; }
  .op-atmosphere__actions { flex-direction: column; }
  .op-atmosphere__actions .button { width: 100%; justify-content: flex-start; }

  .op-flow__steps { border-left: 0; }
  .op-flow__steps li { grid-template-columns: 2.875rem minmax(0, 1fr); padding-left: 0; }
  .op-flow__number { font-size: 2rem; }

  .op-orientation__modules { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .op-orientation__modules article { padding-inline: 0; border-bottom: 0; }
  .op-orientation__modules article:last-child { border-bottom: 1px solid var(--color-steel-line); }
  .op-orientation__modules a { width: 100%; border: 1px solid var(--color-off-white); justify-content: center; padding-inline: var(--space-4); }

  .op-visit__panel { max-width: none; padding: var(--space-4); }
  .op-visit__row .button { width: 100%; }

  .op-closing { padding-block: var(--space-8); }
  .op-closing__copy { max-width: none; }
}

@media (max-width: 26.25rem) {
  .op-flow__steps li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .op-flow__number { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .op-hero__image img,
  .op-real-tables__figure img,
  .op-real-people__figure img,
  .op-premise__actions a::after,
  .op-setting-inset a::after,
  .op-orientation__modules a::after,
  .op-visit__row > a:not(.button)::after { transition: none; }
}