.hangulat-es-ter-page {
  position: relative;
  overflow: clip;
  background: var(--color-charcoal-950);
}

.hangulat-es-ter-page::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: repeating-linear-gradient(0deg, transparent 0 7px, rgba(231, 225, 211, 0.035) 8px 9px), repeating-linear-gradient(90deg, transparent 0 44px, rgba(135, 70, 56, 0.1) 45px 46px);
  content: "";
}

.hangulat-es-ter-page > section {
  position: relative;
  z-index: 1;
}

.hangulat-es-ter-page h1,
.hangulat-es-ter-page h2,
.hangulat-es-ter-page h3 {
  text-wrap: balance;
}

.hangulat-es-ter-page p,
.hangulat-es-ter-page figcaption {
  text-wrap: pretty;
}

.het-hero {
  display: grid;
  min-height: 42.5rem;
  isolation: isolate;
  color: var(--color-offwhite-100);
}

.het-hero__image,
.het-hero__shade,
.het-hero__container {
  grid-area: 1 / 1;
}

.het-hero__image {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  object-position: 68% center;
}

.het-hero__shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(16, 18, 20, 0.94) 0%, rgba(16, 18, 20, 0.81) 38%, rgba(16, 18, 20, 0.34) 71%, rgba(16, 18, 20, 0.48) 100%);
}

.het-hero__container {
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  align-items: end;
  min-width: 0;
  padding-block: var(--space-8);
}

.het-hero__content {
  display: flex;
  grid-column: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.het-hero__content .eyebrow,
.het-hero__content h1,
.het-hero__content p {
  margin: 0;
}

.het-hero__content h1 {
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: var(--leading-display);
  max-inline-size: 18ch;
}

.het-hero__lead {
  max-inline-size: 56ch;
  color: var(--color-offwhite-100);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.het-hero__location {
  max-inline-size: 56ch;
  padding-inline-start: var(--space-3);
  border-inline-start: var(--border-strong-width) solid var(--color-accent);
  color: var(--color-offwhite-300);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.het-hero__actions {
  width: 100%;
}

.het-duality__intro {
  max-inline-size: 42.5rem;
}

.het-duality__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  min-width: 0;
}

.het-duality__panel {
  display: flex;
  min-width: 0;
  min-block-size: 100%;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.het-duality__panel > * {
  margin: 0;
}

.het-duality__panel--restaurant {
  background-color: #20201d;
}

.het-duality__panel--salon {
  border-inline-start: var(--border-strong-width) solid var(--color-accent);
  background-color: #141719;
}

.het-stamp {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-rust-600);
  color: var(--color-offwhite-300);
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.het-duality__bridge {
  max-inline-size: 62ch;
  margin: var(--space-6) 0 0;
  color: var(--color-offwhite-300);
}

.het-evening__intro {
  max-inline-size: 40rem;
}

.het-evening__stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.het-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-inline-start-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard-soft);
}

.het-stage:nth-child(2) {
  transform: translateY(var(--space-5));
}

.het-stage:nth-child(3) {
  transform: translateY(var(--space-7));
  background: #131619;
}

.het-stage__number {
  min-width: 0;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: var(--weight-extrabold);
  line-height: 0.9;
}

.het-stage__copy {
  min-width: 0;
}

.het-stage__copy > *:last-child {
  margin-block-end: 0;
}

.het-materials__intro {
  max-inline-size: 44rem;
}

.het-materials__layout {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: var(--space-6);
  align-items: stretch;
  min-width: 0;
}

.het-materials__media {
  position: relative;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.het-materials__media::after,
.het-plate__media::after,
.het-gallery__media::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(16, 18, 20, 0.28);
  content: "";
  transition: background-color var(--transition-fast);
}

.het-materials__media img,
.het-plate__media img,
.het-gallery__media img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.05);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.het-materials__media img {
  object-position: center;
}

.het-materials__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.het-material-card {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-3);
}

.het-material-card > * {
  margin: 0;
}

.het-material-card--light {
  border-color: var(--color-steel-500);
  background: #202020;
}

.het-material-card--light .eyebrow::before {
  background: var(--color-accent);
}

.het-zones__intro {
  max-inline-size: 43.75rem;
}

.het-zones__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.het-zone-card {
  display: flex;
  min-width: 0;
  min-block-size: 100%;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.het-zone-card > * {
  margin: 0;
}

.het-zone-card--concrete {
  border-color: var(--color-concrete-200);
  background: var(--color-concrete-200);
  color: var(--color-charcoal-950);
}

.het-zone-card--concrete h3,
.het-zone-card--concrete p {
  color: var(--color-charcoal-950);
}

.het-zone-card--salon {
  border-inline-start: var(--border-strong-width) solid var(--color-accent);
  background: var(--color-charcoal-900);
}

.het-zone-card--steel {
  background: var(--color-steel-700);
}

.het-plate__layout {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--space-6);
  align-items: start;
  min-width: 0;
}

.het-plate__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.het-plate__copy > * {
  margin: 0;
}

.het-plate__lead {
  max-inline-size: 54ch;
  color: var(--color-offwhite-300);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.het-plate__callout {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-inline-start: var(--border-strong-width) solid var(--color-accent);
  background: var(--color-surface);
}

.het-plate__callout > * {
  margin: 0;
}

.het-plate__callout h3 {
  font-size: 1.75rem;
}

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

.het-plate__next > * {
  margin: 0;
}

.het-plate__next p {
  max-inline-size: 38ch;
  color: var(--color-offwhite-300);
}

.het-plate__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}

.het-plate__media img {
  object-position: 66% center;
}

.het-plate__media::after {
  background: rgba(16, 18, 20, 0.18);
}

.het-sound {
  background: rgba(25, 28, 31, 0.55);
}

.het-sound__intro {
  max-inline-size: 42.5rem;
}

.het-sound__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.het-sound-card {
  display: flex;
  min-width: 0;
  min-block-size: 100%;
  flex-direction: column;
  gap: var(--space-4);
}

.het-sound-card > * {
  margin: 0;
}

.het-sound-card--lower {
  transform: translateY(var(--space-5));
  border-color: var(--color-steel-500);
  background: #141719;
}

.het-gallery__intro {
  max-inline-size: 42.5rem;
}

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

.het-gallery__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.het-gallery__item--wide {
  grid-column: span 7;
}

.het-gallery__item--detail {
  grid-column: span 5;
}

.het-gallery__item--food {
  grid-column: 1 / span 6;
}

.het-gallery__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.het-gallery__media--landscape {
  aspect-ratio: 16 / 9;
}

.het-gallery__media--portrait,
.het-gallery__media--food {
  aspect-ratio: 4 / 3;
}

.het-gallery__media--landscape img {
  object-position: center;
}

.het-gallery__media--portrait img {
  object-position: center;
}

.het-gallery__media--food img {
  object-position: 65% center;
}

.het-gallery figcaption {
  min-width: 0;
  color: var(--color-offwhite-300);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.het-gallery figcaption strong {
  color: var(--color-offwhite-100);
}

.het-final__panel {
  min-width: 0;
  padding: var(--space-7);
  border-color: var(--color-steel-500);
}

.het-final__content {
  display: flex;
  max-inline-size: 45rem;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.het-final__content > * {
  margin: 0;
}

.het-final__content > p:not(.het-final__route) {
  max-inline-size: 58ch;
}

.het-final__route {
  max-inline-size: 46ch;
  color: var(--color-offwhite-300);
}

.het-final__actions {
  width: 100%;
}

.het-note {
  padding-block: 0 var(--section-space);
}

.het-note__panel {
  display: flex;
  max-inline-size: 53.75rem;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-inline-start: var(--border-strong-width) solid var(--color-accent);
  background: var(--color-surface);
}

.het-note__label {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.het-note__panel p {
  min-width: 0;
  max-inline-size: 70ch;
  margin: 0;
  color: var(--color-offwhite-300);
}

@media (hover: hover) and (pointer: fine) {
  .het-duality__panel:hover,
  .het-zone-card:hover {
    border-color: var(--color-steel-500);
    transform: translate(-2px, -2px);
  }

  .het-materials__media:hover::after,
  .het-plate__media:hover::after,
  .het-gallery__media:hover::after {
    background: rgba(16, 18, 20, 0.12);
  }

  .het-materials__media:hover img,
  .het-plate__media:hover img,
  .het-gallery__media:hover img {
    filter: saturate(0.96) contrast(1.1);
    transform: scale(1.012);
  }
}

@media (max-width: 979px) {
  .het-materials__layout,
  .het-plate__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .het-materials__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .het-materials__copy {
    width: 100%;
  }

  .het-plate__copy {
    grid-row: 1;
  }

  .het-plate__media {
    grid-row: 2;
    width: 100%;
  }
}

@media (max-width: 959px) {
  .het-evening__stages,
  .het-sound__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .het-stage,
  .het-stage:nth-child(2),
  .het-stage:nth-child(3),
  .het-sound-card--lower {
    transform: none;
  }

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

  .het-zone-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .het-duality__panels,
  .het-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .het-gallery__item--wide,
  .het-gallery__item--detail,
  .het-gallery__item--food {
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  .het-hero {
    min-height: 26.5rem;
  }

  .het-hero__image {
    object-position: 60% 72%;
  }

  .het-hero__shade {
    background: linear-gradient(180deg, rgba(16, 18, 20, 0.15) 0%, rgba(16, 18, 20, 0.55) 39%, rgba(16, 18, 20, 0.96) 100%);
  }

  .het-hero__container {
    display: flex;
    align-items: end;
    padding-block: var(--space-5);
  }

  .het-hero__content {
    width: 100%;
    gap: var(--space-3);
  }

  .het-hero__content h1 {
    font-size: 2.25rem;
    line-height: 1;
    max-inline-size: 19ch;
  }

  .het-hero__lead {
    max-inline-size: none;
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .het-hero__location {
    max-inline-size: none;
  }

  .het-hero__actions,
  .het-final__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .het-hero__actions > .button,
  .het-final__actions > .button {
    width: 100%;
    min-height: 3rem;
  }

  .het-duality__panel,
  .het-stage,
  .het-zone-card,
  .het-sound-card,
  .het-material-card {
    padding: var(--space-4);
  }

  .het-final__panel {
    padding: var(--space-5) var(--space-4);
  }
}

@media (max-width: 639px) {
  .het-zones__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .het-zone-card:nth-child(3) {
    grid-column: 1;
  }

  .het-note__panel {
    flex-direction: column;
    gap: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hangulat-es-ter-page *,
  .hangulat-es-ter-page *::before,
  .hangulat-es-ter-page *::after {
    transition: none !important;
    animation: none !important;
  }
}