main.gallery-page {
  background: var(--color-ink);
}

.gallery-page .gallery-hero,
.gallery-page .gallery-section,
.gallery-page .gallery-closing {
  overflow: hidden;
}

.gallery-page .gallery-hero {
  padding-block: var(--section-space) calc(var(--section-space) + var(--space-4));
}

.gallery-page .gallery-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  gap: var(--space-8);
}

.gallery-page .gallery-hero__copy,
.gallery-page .gallery-hero__figure,
.gallery-page .gallery-material__intro,
.gallery-page .gallery-material__portrait,
.gallery-page .gallery-material__room,
.gallery-page .gallery-rhythm__rail,
.gallery-page .gallery-rhythm__statement,
.gallery-page .gallery-dining__copy,
.gallery-page .gallery-dining__guide,
.gallery-page .gallery-dining__figure,
.gallery-page .gallery-host__figure,
.gallery-page .gallery-host__copy,
.gallery-page .gallery-edit__lead,
.gallery-page .gallery-edit__main,
.gallery-page .gallery-edit__rail,
.gallery-page .gallery-edit__support,
.gallery-page .gallery-closing__copy,
.gallery-page .gallery-closing__actions {
  min-width: 0;
}

.gallery-page .gallery-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-block-end: var(--space-8);
}

.gallery-page .gallery-hero__copy > * {
  min-width: 0;
  margin: 0;
}

.gallery-page .gallery-hero__copy .intro {
  max-width: 48ch;
}

.gallery-page .gallery-hero__figure {
  width: 100%;
  margin: 0 calc((100vw - min(100vw - (var(--gutter-desktop) * 2), var(--container-max))) / -2) 0 0;
}

.gallery-page .gallery-hero__media {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.gallery-page .gallery-figure {
  min-width: 0;
  margin: 0;
}

.gallery-page .gallery-figure__trigger {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: var(--border-soft);
  border-radius: var(--radius-control);
  background: var(--color-deep-brown);
  color: inherit;
  text-align: left;
}

.gallery-page .gallery-figure__trigger:hover + figcaption,
.gallery-page .gallery-figure__trigger:focus-visible + figcaption {
  border-color: var(--color-warm-orange);
}

.gallery-page .gallery-figure__media {
  width: 100%;
  height: 100%;
}

.gallery-page .gallery-figure__media img {
  width: 100%;
  height: 100%;
}

.gallery-page .gallery-figure figcaption {
  max-width: 38ch;
}

.gallery-page .gallery-figure figcaption strong {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--text-small);
  font-weight: 600;
}

.gallery-page .gallery-figure figcaption p {
  margin: 0;
}

.gallery-page .gallery-section__heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.gallery-page .gallery-section__heading > * {
  min-width: 0;
  margin: 0;
}

.gallery-page .gallery-section__heading .intro {
  max-width: 54ch;
}

.gallery-page .gallery-material {
  padding-block: var(--section-space);
}

.gallery-page .gallery-material__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-8);
  align-items: start;
}

.gallery-page .gallery-material__left {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
}

.gallery-page .gallery-material__left > * {
  min-width: 0;
  margin: 0;
}

.gallery-page .gallery-material__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 43ch;
}

.gallery-page .gallery-material__intro > * {
  margin: 0;
}

.gallery-page .gallery-material__portrait .gallery-figure__media {
  aspect-ratio: 4 / 5;
}

.gallery-page .gallery-material__room {
  padding-block-start: 4.5rem;
}

.gallery-page .gallery-material__room .gallery-figure__media {
  aspect-ratio: 3 / 2;
}

.gallery-page .gallery-rhythm {
  padding-block: var(--section-space);
  background: var(--color-deep-brown);
}

.gallery-page .gallery-rhythm__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: var(--space-8);
}

.gallery-page .gallery-rhythm__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 34ch;
}

.gallery-page .gallery-rhythm__rail > * {
  margin: 0;
}

.gallery-page .gallery-rhythm__note {
  padding-block-start: var(--space-6);
  border-block-start: var(--border-rule);
}

.gallery-page .gallery-rhythm__statement {
  padding-block-start: var(--space-12);
}

.gallery-page .gallery-rhythm__statement blockquote {
  max-width: 22ch;
  margin: 0;
}

.gallery-page .gallery-rhythm__statement p {
  max-width: 58ch;
  margin: var(--space-6) 0 0;
}

.gallery-page .gallery-dining {
  padding-block: var(--section-space);
}

.gallery-page .gallery-dining__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-8);
}

.gallery-page .gallery-dining__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 48ch;
}

.gallery-page .gallery-dining__copy > * {
  margin: 0;
}

.gallery-page .gallery-dining__guide {
  width: 100%;
  padding-block-start: var(--space-16);
}

.gallery-page .gallery-dining__guide .rule {
  width: 100%;
}

.gallery-page .gallery-dining__figure {
  margin-block-start: calc(var(--space-12) * -1);
}

.gallery-page .gallery-dining__figure .gallery-figure__media {
  aspect-ratio: 4 / 5;
}

.gallery-page .gallery-formats {
  padding-block: var(--section-space);
  background: var(--color-cocoa);
}

.gallery-page .gallery-formats__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.gallery-page .gallery-formats__head > * {
  margin: 0;
}

.gallery-page .gallery-formats__head .intro {
  max-width: 54ch;
}

.gallery-page .gallery-formats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block-start: var(--space-12);
}

.gallery-page .gallery-format {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8);
  border: var(--border-rule);
  background: var(--color-cocoa);
}

.gallery-page .gallery-format > * {
  min-width: 0;
  margin: 0;
}

.gallery-page .gallery-format h3 {
  max-width: 16ch;
}

.gallery-page .gallery-format p {
  max-width: 36ch;
}

.gallery-page .gallery-format a {
  margin-block-start: auto;
  font-size: var(--text-small);
  font-weight: 600;
}

.gallery-page .gallery-flow {
  padding-block: var(--section-space);
}

.gallery-page .gallery-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-8);
  align-items: start;
}

.gallery-page .gallery-flow__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 36ch;
}

.gallery-page .gallery-flow__intro > * {
  margin: 0;
}

.gallery-page .gallery-flow__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-start: var(--border-rule);
}

.gallery-page .gallery-flow__stage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-inline-start: var(--border-rule);
}

.gallery-page .gallery-flow__stage:last-child {
  border-inline-end: var(--border-rule);
}

.gallery-page .gallery-flow__stage > * {
  margin: 0;
}

.gallery-page .gallery-flow__stage h3 {
  font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.gallery-page .gallery-flow__stage p {
  max-width: 28ch;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.gallery-page .gallery-host {
  padding-block: var(--section-space);
  background: var(--color-deep-brown);
}

.gallery-page .gallery-host__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-8);
}

.gallery-page .gallery-host__figure .gallery-figure__media {
  aspect-ratio: 3 / 2;
}

.gallery-page .gallery-host__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 44ch;
  padding-block-start: var(--space-12);
}

.gallery-page .gallery-host__copy > * {
  margin: 0;
}

.gallery-page .gallery-host__copy h2 {
  max-width: 13ch;
}

.gallery-page .gallery-host__copy p {
  max-width: 44ch;
}

.gallery-page .gallery-host__callout {
  max-width: 44ch;
  padding-block-start: var(--space-6);
  border-block-start: var(--border-rule);
}

.gallery-page .gallery-edit {
  padding-block: var(--section-space);
}

.gallery-page .gallery-edit__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.gallery-page .gallery-edit__head > * {
  margin: 0;
}

.gallery-page .gallery-edit__head .intro {
  max-width: 52ch;
}

.gallery-page .gallery-edit__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-8);
  margin-block-start: var(--space-12);
}

.gallery-page .gallery-edit__main .gallery-figure__media {
  aspect-ratio: 16 / 10;
}

.gallery-page .gallery-edit__rail {
  max-width: 28ch;
  padding-block-start: var(--space-8);
  border-block-start: var(--border-rule);
}

.gallery-page .gallery-edit__rail > * {
  margin: 0;
}

.gallery-page .gallery-edit__support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  grid-column: 1 / 2;
}

.gallery-page .gallery-edit__support .gallery-figure__media {
  aspect-ratio: 4 / 5;
}

.gallery-page .gallery-closing {
  padding-block: var(--section-space);
  background: var(--color-deep-brown);
}

.gallery-page .gallery-closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: end;
}

.gallery-page .gallery-closing__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 48ch;
}

.gallery-page .gallery-closing__copy > * {
  margin: 0;
}

.gallery-page .gallery-closing__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 13.75rem;
  padding-inline-start: var(--space-8);
  border-inline-start: var(--border-rule);
}

.gallery-page .gallery-closing__actions > * {
  width: 100%;
  margin: 0;
}

.gallery-page .gallery-lightbox {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: none;
  overflow-y: auto;
  padding: var(--space-6);
  background: rgb(17 16 15 / 95%);
}

.gallery-page .gallery-lightbox.is-open {
  display: grid;
  place-items: center;
}

.gallery-page .gallery-lightbox__dialog {
  display: grid;
  width: min(100%, 70rem);
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.gallery-page .gallery-lightbox__controls {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  gap: var(--space-3);
}

.gallery-page .gallery-lightbox__controls button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-rule);
  background: var(--color-cocoa);
  color: var(--color-paper);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.gallery-page .gallery-lightbox__controls button:hover {
  border-color: var(--color-warm-orange);
  color: var(--color-warm-orange);
}

.gallery-page .gallery-lightbox__image {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border: var(--border-soft);
  background: var(--color-field);
}

.gallery-page .gallery-lightbox__caption {
  max-width: 60ch;
  margin: 0;
  color: var(--color-ash);
}

@media (max-width: 1020px) {
  .gallery-page .gallery-flow__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page .gallery-flow__intro {
    max-width: 54ch;
  }

  .gallery-page .gallery-flow__stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page .gallery-flow__stage:nth-child(3) {
    border-block-start: var(--border-rule);
  }

  .gallery-page .gallery-flow__stage:nth-child(4) {
    border-block-start: var(--border-rule);
  }
}

@media (max-width: 980px) {
  .gallery-page .gallery-hero__figure {
    margin: 0;
  }

  .gallery-page .gallery-edit__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page .gallery-edit__rail {
    max-width: 54ch;
    padding-block-start: var(--space-6);
  }

  .gallery-page .gallery-edit__support {
    grid-column: auto;
  }
}

@media (max-width: 940px) {
  .gallery-page .gallery-material__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page .gallery-material__intro {
    grid-column: 1 / -1;
    max-width: 56ch;
  }

  .gallery-page .gallery-material__left {
    display: contents;
  }

  .gallery-page .gallery-material__portrait {
    grid-column: 1 / 2;
  }

  .gallery-page .gallery-material__room {
    grid-column: 2 / 3;
    padding-block-start: 0;
  }
}

@media (max-width: 900px) {
  .gallery-page .gallery-dining__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page .gallery-dining__guide {
    display: none;
  }

  .gallery-page .gallery-dining__figure {
    margin-block-start: 0;
  }
}

@media (max-width: 860px) {
  .gallery-page .gallery-formats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page .gallery-format--corporate {
    grid-column: 1 / -1;
  }
}

@media (max-width: 850px) {
  .gallery-page .gallery-host__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page .gallery-host__copy {
    width: min(100%, 46rem);
    max-width: none;
    padding-block-start: 0;
  }
}

@media (max-width: 820px) {
  .gallery-page .gallery-closing__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page .gallery-closing__copy {
    max-width: 54ch;
  }

  .gallery-page .gallery-closing__actions {
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .gallery-page .gallery-closing__actions > * {
    width: auto;
    flex: 1 1 0;
  }
}

@media (max-width: 800px) {
  .gallery-page .gallery-rhythm__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page .gallery-rhythm__rail {
    max-width: 42ch;
  }

  .gallery-page .gallery-rhythm__statement {
    padding-block-start: 0;
  }
}

@media (max-width: 699px) {
  .gallery-page .gallery-hero {
    padding-block-start: var(--section-space);
  }

  .gallery-page .gallery-hero__grid,
  .gallery-page .gallery-material__grid,
  .gallery-page .gallery-dining__grid,
  .gallery-page .gallery-formats__grid,
  .gallery-page .gallery-host__grid,
  .gallery-page .gallery-edit__grid,
  .gallery-page .gallery-closing__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page .gallery-hero__copy {
    gap: var(--space-6);
    padding-block-end: 0;
  }

  .gallery-page .gallery-hero__copy .intro,
  .gallery-page .gallery-material__intro,
  .gallery-page .gallery-dining__copy,
  .gallery-page .gallery-formats__head .intro,
  .gallery-page .gallery-flow__intro,
  .gallery-page .gallery-host__copy,
  .gallery-page .gallery-edit__head .intro,
  .gallery-page .gallery-closing__copy {
    max-width: 39ch;
  }

  .gallery-page .gallery-hero__figure,
  .gallery-page .gallery-dining__figure,
  .gallery-page .gallery-host__figure,
  .gallery-page .gallery-edit__main {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .gallery-page .gallery-hero__figure figcaption,
  .gallery-page .gallery-dining__figure figcaption,
  .gallery-page .gallery-host__figure figcaption,
  .gallery-page .gallery-edit__main figcaption {
    width: min(100% - (var(--gutter-mobile) * 2), var(--container-max));
    margin-inline: auto;
  }

  .gallery-page .gallery-material__intro,
  .gallery-page .gallery-material__portrait,
  .gallery-page .gallery-material__room {
    grid-column: auto;
  }

  .gallery-page .gallery-material__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .gallery-page .gallery-material__room {
    padding-block-start: 0;
  }

  .gallery-page .gallery-rhythm__statement blockquote {
    max-width: 24ch;
    font-size: clamp(2.5rem, 13vw, 3.5rem);
    line-height: 0.96;
  }

  .gallery-page .gallery-dining__copy {
    gap: var(--space-6);
  }

  .gallery-page .gallery-dining__figure {
    margin-block-start: 0;
  }

  .gallery-page .gallery-formats__grid {
    gap: var(--space-6);
    margin-block-start: var(--space-8);
  }

  .gallery-page .gallery-format,
  .gallery-page .gallery-format--corporate {
    grid-column: auto;
    padding: var(--space-6);
  }

  .gallery-page .gallery-flow__stages {
    grid-template-columns: minmax(0, 1fr);
    border-block-start: 0;
    border-inline-start: var(--border-rule);
  }

  .gallery-page .gallery-flow__stage,
  .gallery-page .gallery-flow__stage:last-child,
  .gallery-page .gallery-flow__stage:nth-child(3),
  .gallery-page .gallery-flow__stage:nth-child(4) {
    position: relative;
    padding: 0 0 var(--space-8) var(--space-8);
    border: 0;
  }

  .gallery-page .gallery-flow__stage + .gallery-flow__stage {
    padding-block-start: var(--space-4);
  }

  .gallery-page .gallery-flow__stage .index {
    position: relative;
    z-index: 1;
    width: 2.25rem;
    margin-inline-start: calc(var(--space-8) * -1 - 1.125rem);
    padding: var(--space-2);
    background: var(--color-cocoa);
    text-align: center;
  }

  .gallery-page .gallery-flow__stage p {
    max-width: 38ch;
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .gallery-page .gallery-host__copy {
    gap: var(--space-6);
  }

  .gallery-page .gallery-host__copy h2 {
    max-width: 14ch;
  }

  .gallery-page .gallery-edit__grid {
    gap: var(--space-8);
    margin-block-start: var(--space-8);
  }

  .gallery-page .gallery-edit__support {
    display: flex;
    width: calc(100% + (var(--gutter-mobile) * 2));
    margin-inline: calc(var(--gutter-mobile) * -1);
    padding-inline: var(--gutter-mobile);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .gallery-page .gallery-edit__support .gallery-figure {
    width: 78vw;
    min-width: 78vw;
    scroll-snap-align: start;
  }

  .gallery-page .gallery-edit__support .gallery-figure figcaption {
    max-width: 38ch;
  }

  .gallery-page .gallery-closing__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }

  .gallery-page .gallery-closing__actions > * {
    width: 100%;
  }

  .gallery-page .gallery-lightbox {
    padding: var(--space-4);
  }

  .gallery-page .gallery-lightbox__image {
    max-height: 58vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-page .gallery-edit__support {
    scroll-behavior: auto;
  }
}