.oer-page { overflow: clip; }
.oer-page :is(a, button) { min-width: 0; }
.oer-page section[id], .oer-page article[id] { scroll-margin-top: 7rem; }
.oer-section { padding-block: var(--space-16); }
.oer-section + .oer-section { border-top: 1px solid rgba(184, 197, 202, 0.68); }
.oer-route-marker::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: var(--space-2); background: var(--color-teal-500); transform: rotate(45deg); }
.oer-orientation__grid, .oer-day__grid, .oer-navigation__grid, .oer-etiquette__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-6); }
.oer-orientation__copy { grid-column: span 5; min-width: 0; padding: var(--space-8); border-top: 2px solid var(--color-marine-800); background: var(--color-white); }
.oer-orientation__lead { max-width: 65ch; }
.oer-variable-note { max-width: 56ch; margin-top: var(--space-6); }
.oer-inline-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.oer-inline-actions > a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 600; }
.oer-route-panel { grid-column: span 3; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-6); border: 1px solid var(--border-color); border-top: 2px solid var(--color-teal-500); border-radius: var(--radius-panel); background: var(--surface-raised); }
.oer-route-panel > :is(h2, p) { margin: 0; }
.oer-route-panel h2 { font-size: 1.375rem; }
.oer-route-panel a { min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-small); font-weight: 600; }
.oer-section-intro { min-width: 0; }
.oer-starting-points__intro, .oer-spaces__intro, .oer-first-day__intro, .oer-questions__intro, .oer-visual-reference__intro { max-width: 66ch; margin-bottom: var(--space-8); }
.oer-starting-points__intro .lead, .oer-spaces__intro .lead, .oer-first-day__intro .lead, .oer-questions__intro .lead, .oer-visual-reference__intro .lead { max-width: 62ch; }
.oer-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.oer-resource-card { min-width: 0; min-height: 18rem; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border-color); border-radius: var(--radius-panel); border-top: 2px solid transparent; background: var(--surface-content); color: var(--color-ink); text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.oer-resource-card:hover { border-top-color: var(--color-teal-500); background: var(--surface-raised); color: var(--color-ink); }
.oer-resource-card :is(h3, p) { margin: 0; }
.oer-resource-card h3 { font-size: 1.25rem; }
.oer-resource-card p { font-size: var(--text-small); line-height: var(--line-small); }
.oer-resource-card__link { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; margin-top: auto; color: var(--color-marine-800); font-family: var(--font-heading); font-size: var(--text-small); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.oer-resource-card:hover .oer-resource-card__link { color: var(--color-teal-500); }
.oer-day { background: var(--surface-raised); }
.oer-day__intro { grid-column: 2 / span 4; min-width: 0; }
.oer-day__intro .lead { max-width: 67ch; }
.oer-day__rail { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-around; gap: var(--space-8); padding-top: var(--space-3); color: var(--color-teal-500); font-family: var(--font-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.oer-day__rail span { display: block; width: 2rem; height: 2rem; padding-top: .25rem; border: 1px solid var(--color-teal-500); border-radius: 50%; text-align: center; }
.oer-day__reading { grid-column: 2 / span 4; grid-row: 2; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.oer-time-block { min-width: 0; padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-color); }
.oer-time-block :is(h3, p, ul) { max-width: 67ch; }
.oer-time-block h3 { font-size: 1.25rem; }
.oer-time-block ul { margin-bottom: 0; font-size: var(--text-small); }
.oer-day__support { grid-column: 6 / span 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.oer-day__support figure { margin: 0; }
.oer-mini-checklist { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border-color); border-top: 2px solid var(--color-teal-500); border-radius: var(--radius-panel); background: var(--color-white); }
.oer-mini-checklist :is(h3, ul) { margin: 0; }
.oer-mini-checklist h3 { font-size: 1.125rem; }
.oer-mini-checklist ul { padding-left: 1.2rem; font-size: var(--text-small); }
.oer-route-line { display: flex; align-items: center; width: min(100%, 14rem); height: 1.5rem; margin-top: var(--space-4); }
.oer-route-line span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--color-teal-500); }
.oer-route-line i { flex: 1 1 auto; min-width: 0; height: 2px; background: var(--color-teal-500); }
.oer-route-line b { width: 0; height: 0; border-top: .42rem solid transparent; border-bottom: .42rem solid transparent; border-left: .65rem solid var(--color-teal-500); }
.oer-live-callout { margin: 0; }
.oer-navigation__copy { grid-column: span 5; min-width: 0; }
.oer-navigation__copy > .lead { max-width: 64ch; }
.oer-nav-principle { position: relative; min-width: 0; max-width: 58ch; padding: var(--space-5) 0 var(--space-5) var(--space-8); border-bottom: 1px solid var(--border-color); }
.oer-nav-principle h3 { font-size: 1.25rem; }
.oer-nav-principle ol { margin-bottom: 0; font-size: var(--text-small); }
.oer-compass-mark, .oer-diagram-mark, .oer-nav-principle > .oer-amber-dot { position: absolute; top: var(--space-5); left: 0; }
.oer-compass-mark { color: var(--color-teal-500); font-size: 1.4rem; }
.oer-diagram-mark { width: 1.35rem; height: .8rem; border-top: 2px solid var(--color-marine-800); border-bottom: 2px solid var(--color-teal-500); }
.oer-route-check-panel { grid-column: span 3; align-self: start; min-width: 0; }
.oer-route-check-panel h3 { font-size: 1.25rem; }
.oer-comparison-ledger { border-top: 2px solid var(--color-marine-800); border-bottom: 1px solid var(--border-color); background: var(--color-white); }
.oer-comparison-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(3.5rem, 1fr); gap: var(--space-6); min-width: 0; padding: var(--space-6); border: 1px solid var(--border-color); border-top: 0; }
.oer-comparison-row > * { min-width: 0; }
.oer-comparison-row :is(h3, p) { margin: 0; }
.oer-comparison-row h3 { font-size: 1.125rem; }
.oer-comparison-row__body p { max-width: 75ch; }
.oer-comparison-row__indicator { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.oer-teal-marker { width: .75rem; height: .75rem; background: var(--color-teal-500); transform: rotate(45deg); }
.oer-spectrum { display: block; width: 100%; max-width: 4.5rem; height: 4px; background: linear-gradient(90deg, var(--color-steel-300), var(--color-marine-800), var(--color-teal-500)); }
.oer-route-arrow { color: var(--color-teal-500); font-family: var(--font-heading); font-size: 1.5rem; }
.oer-step-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); position: relative; }
.oer-step-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border-color); border-top: 2px solid var(--color-teal-500); border-radius: var(--radius-panel); background: var(--color-white); }
.oer-step-card :is(h3, p, ul) { margin: 0; }
.oer-step-card h3 { font-size: 1.25rem; }
.oer-step-card p, .oer-step-card ul { font-size: var(--text-small); line-height: var(--line-small); }
.oer-step-card ul { padding-left: 1.2rem; }
.oer-step-card .card__link { margin-top: auto; }
.oer-time-tick { margin-top: auto; color: var(--color-steel-700); font-family: var(--font-heading); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.oer-first-day-note { margin: var(--space-6) 0 0; }
.oer-etiquette { background: var(--surface-raised); }
.oer-etiquette__content { grid-column: span 5; min-width: 0; }
.oer-etiquette__intro { max-width: 65ch; }
.oer-etiquette__intro .lead { max-width: 60ch; }
.oer-etiquette__blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.oer-etiquette__blocks > article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--border-color); }
.oer-etiquette__blocks h3 { font-size: 1.125rem; }
.oer-etiquette__blocks p { font-size: var(--text-small); line-height: var(--line-small); }
.oer-etiquette__image { grid-column: span 3; align-self: start; min-width: 0; margin: 0; }
.oer-etiquette__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.oer-question-ledger { padding: 0; overflow: hidden; }
.oer-question-ledger > article { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr); gap: var(--space-6); min-width: 0; padding: var(--space-6); border-bottom: 1px solid var(--border-color); }
.oer-question-ledger > article:last-child { border-bottom: 0; }
.oer-question-ledger > article > * { min-width: 0; }
.oer-question-ledger :is(h3, p) { margin: 0; }
.oer-question-ledger h3 { font-size: 1.125rem; }
.oer-question-ledger p { max-width: 72ch; }
.oer-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.oer-visual-panel { min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-panel); background: var(--color-white); }
.oer-visual-panel figcaption { max-width: 52ch; margin: var(--space-4) 0 0; font-size: 1rem; line-height: var(--line-body); }
.oer-continue-panel { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); min-width: 0; overflow: hidden; border-radius: var(--radius-panel); background-color: var(--color-marine-950); }
.oer-continue-panel__content { grid-column: span 5; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); }
.oer-continue-panel__content :is(h2, p) { margin: 0; }
.oer-continue-panel__content > p { max-width: 58ch; color: var(--color-steel-300); }
.oer-continue-panel .eyebrow { color: var(--color-steel-300); }
.oer-continue-links { display: flex; flex-direction: column; gap: var(--space-2); }
.oer-continue-links a { min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--color-white); font-family: var(--font-heading); font-weight: 600; }
.oer-continue-links a:hover { color: var(--color-teal-500); }
.oer-casino-context { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid rgba(184, 197, 202, .5); }
.oer-casino-context p { color: var(--color-steel-300); }
.oer-casino-context a { color: var(--color-white); }
.oer-casino-context a:hover { color: var(--color-teal-500); }
.oer-continue-panel__rail { grid-column: span 3; min-width: 0; background-image: linear-gradient(rgba(21, 154, 156, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 154, 156, .22) 1px, transparent 1px); background-size: 2rem 2rem; opacity: .75; }
.oer-amber-dot { display: inline-block; width: .48rem; height: .48rem; margin-right: .3rem; border-radius: 50%; background: var(--color-amber-500); vertical-align: middle; }
.oer-teal-marker { flex: 0 0 auto; }
@media (max-width: 61.25rem) { .oer-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oer-step-grid { grid-template-columns: 1fr; } .oer-step-card { min-height: 0; } }
@media (max-width: 60rem) { .oer-day__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .oer-day__intro { grid-column: 1 / span 5; } .oer-day__rail { display: none; } .oer-day__reading { grid-column: 1 / span 5; grid-row: 2; } .oer-day__support { grid-column: 6 / span 2; grid-row: 2; } }
@media (max-width: 56.25rem) { .oer-orientation__grid, .oer-navigation__grid, .oer-etiquette__grid { grid-template-columns: 1fr; } .oer-orientation__copy, .oer-route-panel, .oer-navigation__copy, .oer-route-check-panel, .oer-etiquette__content, .oer-etiquette__image { grid-column: 1; } .oer-etiquette__image { order: 2; } .oer-navigation__copy { order: 1; } .oer-route-check-panel { order: 2; } .oer-etiquette__blocks { grid-template-columns: 1fr; } .oer-day__grid { grid-template-columns: 1fr; } .oer-day__intro, .oer-day__reading, .oer-day__support { grid-column: 1; } .oer-day__intro { grid-row: auto; } .oer-day__reading { grid-row: auto; } .oer-day__support { grid-row: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .oer-day__support > * { min-width: 0; } .oer-continue-panel { grid-template-columns: 1fr; } .oer-continue-panel__content { grid-column: 1; } .oer-continue-panel__rail { display: none; } }
@media (max-width: 51.25rem) { .oer-comparison-row, .oer-question-ledger > article { grid-template-columns: 1fr; gap: var(--space-3); } .oer-comparison-row__indicator { justify-content: flex-start; } .oer-comparison-row { padding: var(--space-5); } }
@media (max-width: 45rem) { .oer-section { padding-block: var(--space-10); } .oer-orientation__copy { padding: var(--space-5); } .oer-route-panel { padding: var(--space-5); } .oer-day__support { grid-template-columns: 1fr; } .oer-day__support .media-frame img { aspect-ratio: 16 / 9; } .oer-nav-principle { padding-left: var(--space-6); } .oer-question-ledger > article { padding: var(--space-5); } .oer-continue-panel__content { padding: var(--space-5); } }
@media (max-width: 38.75rem) { .oer-resource-grid, .oer-visual-grid { grid-template-columns: 1fr; } .oer-resource-card { min-height: 0; } .oer-inline-actions { flex-direction: column; align-items: stretch; } .oer-inline-actions > a { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .oer-resource-card { transition: none; } }