/* Approved smoked-glass composition. Existing reveal and snap controllers apply. */
.about-section.about-glass {
  --about-ink: #f1eee6;
  --about-muted: #c9c7bf;
  --about-accent: #c1b6a5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--about-ink);
  background: linear-gradient(180deg, #12121100 42%, #12121160), url("../media/chef/about-smoked-glass.webp") center / cover, #181914;
}
.native-scroll.is-about-view:not(.menu-open) .site-header {
  background: transparent; color: var(--espresso); border-bottom-color: transparent;
}
.native-scroll.is-about-view:not(.menu-open) .nav-ice-curve {
  display: block; height: calc(var(--header-height) + 48px);
}
.native-scroll .about-glass.section-space {
  min-height: var(--viewport-small-height); padding-block: max(108px, calc(var(--viewport-small-height) * 0.13)) max(36px, calc(var(--viewport-small-height) * 0.06));
}
.about-glass > .container { position: relative; max-width: 1160px; padding-inline: clamp(32px, 5vw, 72px); }
.about-glass .about-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 30px 10%; }
.about-glass .about-heading .editorial-heading { font-size: clamp(42px, 4.25vw, 59px); line-height: 1.05; letter-spacing: -.018em; }
.about-glass .editorial-heading em { color: var(--about-accent); }
.about-glass .about-photo { width: 100%; max-width: 365px; justify-self: end; align-self: center; }
.about-glass .about-portrait { border-radius: 0; box-shadow: 0 18px 46px #0507061f; }
.about-glass .about-grid figcaption { margin-top: 16px; color: #b5b1a7; font-size: 8px; line-height: 1.65; letter-spacing: .1em; }
.about-glass .about-copy .body-copy { color: var(--about-muted); font-size: 15px; line-height: 1.65; font-weight: 300; margin-bottom: 18px; }
.about-glass .about-facts { margin-top: 48px; padding-top: 25px; border-top-color: #f0e8d824; }
.about-glass .numbers-grid > div { border-color: #f0e8d82b; }
.about-glass .numbers-grid > div:last-child { border-color: #b4a28b78; }
.about-glass .number { color: var(--about-ink); font-size: 38px; }
.about-glass .numbers-grid .number--text { font-size: 29px; }
.about-glass .numbers-grid p:last-child { color: #bcb8ae; font-size: 11px; line-height: 1.55; }

/* A short biography ends with its content, even on a tall desktop viewport. */
@media (min-width: 768px) {
  .about-glass.section-space,
  .native-scroll .about-glass.section-space {
    min-height: 0;
    padding-block: clamp(108px, 8vw, 144px) clamp(44px, 4vw, 72px);
  }
  .about-glass > .container { max-width: 1480px; }
  .about-glass .about-grid { column-gap: 8%; }
  .about-glass .about-heading .editorial-heading { font-size: clamp(42px, 4.25vw, 72px); }
  .about-glass .about-photo { max-width: 490px; }
  .about-glass .about-copy .body-copy { max-width: 60ch; font-size: clamp(15px, 1.25vw, 18px); }
  .about-glass .about-copy .body-copy:last-child { margin-bottom: 0; }
  .about-glass .about-facts { margin-top: clamp(32px, 3vw, 48px); }
  .about-glass .numbers-grid .number { font-size: clamp(36px, 2.5vw, 46px); }
  .about-glass .numbers-grid .number--text { font-size: clamp(26px, 2.1vw, 34px); }
}

@media (max-width: 767px) {
  .native-scroll .about-glass.section-space {
    height: var(--viewport-small-height); min-height: min-content;
    padding-block: calc(var(--header-height) + 57px) max(19px, env(safe-area-inset-bottom));
  }
  .native-scroll .about-glass > .container {
    max-width: 480px; padding-inline: 24px;
    height: 100%; display: grid; grid-template-columns: 1fr;
    grid-template-rows: minmax(min-content, 1fr) auto; gap: 19px;
  }
  .native-scroll .about-glass .about-grid {
    display: grid; grid-template-columns: 1fr;
    grid-template-areas: 'heading' 'photo' 'copy';
    grid-template-rows: auto minmax(112px, 1fr) auto; gap: 17px;
  }
  .native-scroll .about-glass .about-heading { grid-area: heading; }
  .native-scroll .about-glass .about-heading .editorial-heading { font-size: clamp(28px, 8.1vw, 35px); line-height: 1.08; }
  .native-scroll .about-glass .about-photo {
    grid-area: photo; width: 100%; max-width: none; height: 100%; min-height: 112px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
    justify-self: center; align-self: stretch; contain: size;
  }
  .native-scroll .about-glass .about-portrait { width: min(76%, 255px); height: auto; max-height: calc(100% - 23px); min-height: 0; flex-shrink: 1; object-fit: contain; }
  .native-scroll .about-glass .about-grid figcaption { margin: 0; max-width: 300px; font-size: 7px; line-height: 1.4; letter-spacing: .055em; text-align: center; }
  .native-scroll .about-glass .about-copy { grid-area: copy; }
  .native-scroll .about-glass .about-copy .body-copy { font-size: clamp(12.5px, 3.42vw, 14px); line-height: 1.48; margin: 0; }
  .native-scroll .about-glass .about-copy .body-copy + .body-copy { margin-top: 10px; }
  .native-scroll .about-glass .about-facts { grid-area: auto; margin: 0; border-top: 1px solid #f0e8d824; padding-top: 14px; }
  .native-scroll .about-glass .about-facts .numbers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .native-scroll .about-glass .about-facts .numbers-grid > div { padding-left: 8px; }
  .native-scroll .about-glass .about-facts .number { font-size: 27px; margin-bottom: 5px; }
  .native-scroll .about-glass .about-facts .number--text { font-size: 19px; line-height: 1.05; }
  .native-scroll .about-glass .about-facts .numbers-grid p:last-child { font-size: 9px; line-height: 1.4; }
}
@media (max-width: 767px) and (max-height: 720px) {
  .native-scroll .about-glass.section-space { padding-top: calc(var(--header-height) + 51px); padding-bottom: 14px; }
  .native-scroll .about-glass > .container { gap: 12px; padding-inline: 20px; }
  .native-scroll .about-glass .about-grid { gap: 12px; }
  .native-scroll .about-glass .about-copy .body-copy { font-size: clamp(12px, 3.4vw, 13.5px); line-height: 1.42; }
  .native-scroll .about-glass .about-copy .body-copy + .body-copy { margin-top: 8px; }
  .native-scroll .about-glass .about-facts { padding-top: 11px; }
}
@media (max-width: 767px) and (max-height: 660px) {
  .native-scroll .about-glass > .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(132px, 1fr) auto; gap: 12px 16px; }
  .native-scroll .about-glass .about-grid { display: contents; }
  .native-scroll .about-glass .about-heading { grid-area: 1 / 1 / 2 / -1; }
  .native-scroll .about-glass .about-photo { grid-area: 2 / 1 / 3 / 2; gap: 6px; }
  .native-scroll .about-glass .about-portrait { width: 100%; max-height: calc(100% - 29px); }
  .native-scroll .about-glass .about-grid figcaption { font-size: 6.5px; letter-spacing: .01em; }
  .native-scroll .about-glass .about-copy { grid-area: 3 / 1 / 4 / -1; }
  .native-scroll .about-glass .about-facts { grid-area: 2 / 2 / 3 / 3; align-self: center; padding: 0; border-top: 0; }
  .native-scroll .about-glass .about-facts .numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 6px; }
  .native-scroll .about-glass .about-facts .number { font-size: 25px; }
  .native-scroll .about-glass .about-facts .number--text { font-size: 17px; }
}
@media (max-width: 359px) and (max-height: 660px) {
  .native-scroll .about-glass > .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}