.ofk-page {
  overflow: hidden;
  background: var(--color-outback-charcoal);
}

.ofk-page .ofk-shell {
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
}

.ofk-page .caption {
  color: var(--color-pale-ochre);
}

.ofk-page .surface-light .caption {
  color: color-mix(in srgb, var(--color-charcoal-ink) 65%, transparent);
}

.ofk-hero {
  position: relative;
  padding-block: clamp(var(--space-8), 9vw, var(--space-10));
}

.ofk-hero::after,
.ofk-close::before {
  position: absolute;
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-desert-rust), transparent);
}

.ofk-hero::after {
  right: 0;
  bottom: 0;
  left: 0;
}

.ofk-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-5);
}

.ofk-hero__copy {
  grid-column: 1 / span 5;
  min-width: 0;
  max-width: 31.25rem;
}

.ofk-hero__copy h1 {
  max-width: 25ch;
}

.ofk-hero__lead {
  display: flex;
  min-width: 0;
  max-width: 31.25rem;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-desert-rust);
}

.ofk-hero__lead p,
.ofk-hero__lead a {
  margin: 0;
}

.ofk-hero__media {
  grid-column: 6 / span 7;
  min-width: 0;
  width: calc(100% + max(0px, (100vw - var(--container-max)) / 2));
  min-height: 40rem;
  border-radius: 0;
}

.ofk-hero__media::after,
.ofk-casino__media::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgb(23 26 24 / 0.28), transparent 58%);
}

.ofk-hero__media .caption {
  position: absolute;
  z-index: 1;
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: 16rem;
  text-align: right;
}

.ofk-heat {
  background: var(--color-charcoal-lift);
}

.ofk-heat__intro {
  width: 100%;
  min-width: 0;
  max-width: 36.25rem;
  margin-inline-start: calc((100% + var(--space-5)) / 12);
}

.ofk-heat__intro .lead {
  margin-block-end: 0;
}

.ofk-heat__panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.ofk-heat__panel {
  min-width: 0;
  min-height: 100%;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-stone-line);
  transition: border-color var(--transition-fast);
}

.ofk-heat__panel:hover {
  border-top-color: var(--color-desert-rust);
}

.ofk-heat__panel p {
  max-width: 20.625rem;
}

.ofk-heat__panel blockquote {
  margin-block-end: 0;
  font-size: 1rem;
}

.ofk-number {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--color-desert-rust);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ofk-heat__closing {
  width: 100%;
  max-width: 33.75rem;
  margin-block: var(--space-6) 0;
}

.ofk-ingredients__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 0;
  column-gap: var(--space-5);
}

.ofk-ingredients__media {
  grid-column: 1 / span 5;
  min-width: 0;
  min-height: 48rem;
  border-radius: 0;
}

.ofk-ingredients__media .caption {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
}

.ofk-ingredients__copy {
  grid-column: 7 / span 5;
  align-self: center;
  min-width: 0;
  max-width: 31.875rem;
  padding-block: var(--space-8);
  color: var(--color-charcoal-ink);
}

.ofk-principles {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: principles;
}

.ofk-principles > li {
  position: relative;
  min-width: 0;
  max-width: 26.875rem;
  padding-block-start: var(--space-5);
  padding-inline-start: var(--space-7);
  border-top: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 28%, transparent);
  counter-increment: principles;
}

.ofk-principles > li::before {
  position: absolute;
  top: var(--space-5);
  left: 0;
  content: "0" counter(principles);
  color: var(--color-desert-rust);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.ofk-principles h3,
.ofk-principles p {
  margin-block-end: var(--space-3);
}

.ofk-principles p {
  max-width: 26.875rem;
}

.ofk-hearth {
  background: var(--color-outback-charcoal);
}

.ofk-hearth__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5);
}

.ofk-hearth__heading {
  grid-column: 1 / span 5;
  min-width: 0;
  max-width: 35rem;
}

.ofk-hearth__media {
  grid-column: 7 / span 6;
  min-width: 0;
  min-height: 28rem;
  border-radius: 0;
}

.ofk-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.ofk-process__step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-stone-line);
}

.ofk-process__step > span {
  min-width: 0;
  color: var(--color-desert-rust);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.ofk-process__step > div {
  min-width: 0;
}

.ofk-process__step h3 {
  margin-block-end: var(--space-3);
  font-size: 1.25rem;
}

.ofk-process__step p {
  max-width: 16.875rem;
  margin-block-end: 0;
}

.ofk-hearth__statement {
  width: 100%;
  max-width: 35rem;
  margin-block: var(--space-6) 0;
  color: var(--color-pale-ochre);
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: var(--leading-lead);
}

.ofk-table__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5);
}

.ofk-table__media {
  grid-column: 1 / span 6;
  min-width: 0;
  min-height: 43rem;
  border-radius: 0;
}

.ofk-table__media .caption {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
}

.ofk-table__copy {
  grid-column: 7 / span 6;
  min-width: 0;
  max-width: 38.75rem;
}

.ofk-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block: var(--space-6);
}

.ofk-categories > article {
  min-width: 0;
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-stone-line);
}

.ofk-categories h3 {
  margin-block-end: var(--space-3);
  font-size: 1.25rem;
}

.ofk-categories p {
  max-width: 16.25rem;
  margin-block-end: 0;
}

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

.ofk-table__action p {
  max-width: 35rem;
  margin: 0;
}

.ofk-night {
  background: linear-gradient(125deg, var(--color-outback-charcoal) 8%, var(--color-charcoal-lift) 55%, var(--color-cobalt-night));
}

.ofk-night__heading {
  width: 100%;
  max-width: 52rem;
}

.ofk-night__columns {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.ofk-night__columns > div:first-child {
  grid-column: 2 / span 4;
  min-width: 0;
  max-width: 26.25rem;
}

.ofk-night__casino-note {
  grid-column: 7 / span 5;
  min-width: 0;
  max-width: 26.25rem;
  padding: var(--space-5);
  background: var(--color-deep-bush-green);
  border-inline-start: 2px solid var(--color-pale-ochre);
}

.ofk-night__columns h3 {
  font-size: 1.25rem;
}

.ofk-night__columns p {
  margin-block-end: 0;
}

.ofk-night__statement {
  width: 100%;
  max-width: 56.25rem;
  margin-block: var(--space-8) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-editorial);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: var(--leading-heading);
}

.ofk-context-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  min-width: 0;
  gap: var(--space-6);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-pale-ochre) 45%, transparent);
  background: var(--color-deep-bush-green);
}

.ofk-context-band strong {
  min-width: 0;
  color: var(--color-pale-ochre);
  font-size: var(--text-small);
  letter-spacing: 0.12em;
  line-height: var(--leading-small);
}

.ofk-context-band p {
  min-width: 0;
  max-width: 33.75rem;
  margin: 0;
}

.ofk-casino__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-5);
}

.ofk-casino__copy {
  grid-column: 1 / span 5;
  min-width: 0;
  max-width: 42.5rem;
}

.ofk-casino__copy .lead {
  margin-block-end: 0;
}

.ofk-casino__media {
  grid-column: 7 / span 6;
  min-width: 0;
  min-height: 28rem;
  border-radius: 0;
}

.ofk-games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block: var(--space-7);
}

.ofk-games > article {
  min-width: 0;
  padding-block-start: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-pale-ochre) 42%, transparent);
}

.ofk-games h3 {
  font-size: 1.25rem;
}

.ofk-games p {
  max-width: 18.75rem;
  margin-block-end: 0;
}

.ofk-responsible {
  width: calc(100% - ((100% + var(--space-5)) / 6));
  min-width: 0;
  max-width: 62.5rem;
  margin-inline: auto;
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-pale-ochre) 48%, transparent);
  background: color-mix(in srgb, var(--color-deep-bush-green) 78%, var(--color-outback-charcoal));
}

.ofk-responsible h3 {
  font-size: 1.25rem;
}

.ofk-responsible p {
  max-width: 42.5rem;
  margin-block-end: 0;
}

.ofk-routes {
  background: var(--color-outback-charcoal);
}

.ofk-routes__intro {
  width: 100%;
  max-width: 42.5rem;
  margin-inline-start: calc((100% + var(--space-5)) / 12);
}

.ofk-routes__intro .lead {
  margin-block-end: 0;
}

.ofk-routes__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.ofk-route {
  display: flex;
  min-width: 0;
  min-height: 19rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.ofk-route h3,
.ofk-route p,
.ofk-route a {
  margin: 0;
}

.ofk-route p {
  max-width: 26.25rem;
}

.ofk-route a:last-child {
  margin-top: auto;
}

.ofk-close {
  position: relative;
  background: var(--color-charcoal-lift);
}

.ofk-close::before {
  top: 0;
  right: 0;
  left: 0;
}

.ofk-close__column {
  width: calc((100% + var(--space-5)) * 7 / 12 - var(--space-5));
  min-width: 0;
  max-width: 47.5rem;
  margin-inline-start: calc((100% + var(--space-5)) / 12);
}

.ofk-close__column > h2 {
  max-width: 47.5rem;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.ofk-close__note {
  max-width: 34rem;
}

.ofk-close__access {
  min-width: 0;
  max-width: 35rem;
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-stone-line);
}

.ofk-close__access h3 {
  font-size: 1.25rem;
}

.ofk-close__access p {
  margin-block-end: 0;
}

.ofk-contact-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

@media (max-width: 67.4375rem) {
  .ofk-hero__grid,
  .ofk-hearth__top,
  .ofk-table__grid,
  .ofk-casino__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .ofk-hero__copy,
  .ofk-hero__media,
  .ofk-hearth__heading,
  .ofk-hearth__media,
  .ofk-table__media,
  .ofk-table__copy,
  .ofk-casino__copy,
  .ofk-casino__media {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  .ofk-hero__media,
  .ofk-hearth__media,
  .ofk-table__media,
  .ofk-casino__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .ofk-hero__media {
    order: -1;
  }

  .ofk-table__media {
    aspect-ratio: 16 / 10;
  }

  .ofk-hero__copy h1 {
    max-width: 18ch;
  }

  .ofk-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ofk-process__step p {
    max-width: 22rem;
  }

  .ofk-casino__copy .lead {
    max-width: 42.5rem;
  }
}

@media (max-width: 64.9375rem) {
  .ofk-heat__panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ofk-heat__panel:nth-child(3) {
    grid-column: 1 / -1;
  }

  .ofk-heat__panel:nth-child(3) p {
    max-width: 36rem;
  }

  .ofk-games {
    grid-template-columns: 1fr;
  }

  .ofk-games p {
    max-width: 38rem;
  }
}

@media (max-width: 59.9375rem) {
  .ofk-ingredients__grid {
    grid-template-columns: 1fr;
  }

  .ofk-ingredients__media,
  .ofk-ingredients__copy {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  .ofk-ingredients__media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .ofk-ingredients__copy {
    width: min(100% - (var(--gutter) * 2), 42.5rem);
    margin-inline: auto;
    padding-block: var(--space-7);
  }

  .ofk-night__columns {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .ofk-night__columns > div:first-child,
  .ofk-night__casino-note {
    grid-column: 1;
    width: 100%;
    max-width: 32rem;
  }
}

@media (max-width: 51.1875rem) {
  .ofk-routes__panels {
    grid-template-columns: 1fr;
  }

  .ofk-route {
    min-height: 0;
  }

  .ofk-route a:last-child {
    margin-top: 0;
  }

  .ofk-routes__intro {
    margin-inline-start: 0;
  }
}

@media (max-width: 47.9375rem) {
  .ofk-page .ofk-shell {
    width: min(100% - (var(--gutter) * 2), var(--container-max));
  }

  .ofk-hero {
    padding-block: 0 clamp(var(--space-8), 14vw, var(--space-9));
  }

  .ofk-hero__grid {
    gap: var(--space-6);
  }

  .ofk-hero__media,
  .ofk-hearth__media,
  .ofk-table__media,
  .ofk-casino__media {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }

  .ofk-hero__media {
    aspect-ratio: 16 / 10;
  }

  .ofk-hero__media .caption,
  .ofk-table__media .caption,
  .ofk-ingredients__media .caption {
    position: static;
    margin: var(--space-3) var(--gutter) 0;
    text-align: left;
  }

  .ofk-hero__copy h1 {
    max-width: none;
    font-size: clamp(2.625rem, 12vw, 3.5rem);
  }

  .ofk-hero__lead {
    max-width: none;
  }

  .ofk-heat__intro,
  .ofk-routes__intro,
  .ofk-close__column {
    width: 100%;
    margin-inline-start: 0;
  }

  .ofk-heat__panels,
  .ofk-process,
  .ofk-categories {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .ofk-heat__panel:nth-child(3) {
    grid-column: 1;
  }

  .ofk-heat__panel p,
  .ofk-heat__panel:nth-child(3) p,
  .ofk-process__step p,
  .ofk-categories p {
    max-width: none;
  }

  .ofk-ingredients__copy {
    width: min(100% - (var(--gutter) * 2), 42.5rem);
    padding-block: var(--space-7);
  }

  .ofk-ingredients__media {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .ofk-principles {
    gap: var(--space-4);
  }

  .ofk-hearth__top {
    gap: var(--space-5);
  }

  .ofk-process__step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .ofk-table__media {
    aspect-ratio: 4 / 5;
  }

  .ofk-table__action .button,
  .ofk-route .button {
    width: 100%;
  }

  .ofk-night__statement {
    margin-block: var(--space-7) var(--space-5);
  }

  .ofk-context-band {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: var(--space-5) var(--gutter);
  }

  .ofk-responsible {
    width: 100%;
    padding: var(--space-5);
  }

  .ofk-route {
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .ofk-close__column > h2 {
    font-size: clamp(2.125rem, 9vw, 2.5rem);
  }

  .ofk-contact-link {
    width: 100%;
    padding-inline: var(--space-4);
    border: 1px solid var(--color-stone-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ofk-heat__panel {
    transition: none;
  }
}