/* ══════════════════════════════════════════════════════
   about.css — About page (about.html) specific styles.
   Load order: styles.css → about.css → mobile.css.
   About hero reuses the GLOBAL .hero system (styles.css), not a prefixed one.

   NAVIGATION — grep "=== " for top-level anchors:
     === ABOUT PAGE ===                     base (sections "── 1.".."── 5.":
                                            Hero / Story / Alex / More / Quote)
     === DESKTOP: ABOUT (>=768px) ===       @media ≥768px        (~L294)
     === DESKTOP WIDE: ABOUT (>=1024px) === @media ≥1024px        (~L711)
     === MOBILE: ABOUT (base layout) ===            @media ≤767px  (~L731)
     === MOBILE: ABOUT - CINEMATIC OVERRIDES ===    @media ≤767px  (~L1077, loads after base)
        (sub: === MOBILE: ABOUT - story / timeline / milestones ===)
   (line hints approximate — grep the anchor text, not the number)
   Map: PROJECT_MAP.md · Rules: CLAUDE.md
══════════════════════════════════════════════════════ */

/* === ABOUT PAGE === */
.about-page { background: var(--deep-wine); }

/* ── 1. About Hero ── */
.about-hero {
  position: relative;
  min-height: 100vh;
  background-color: var(--deep-wine);
  overflow: hidden;
}
.about-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.about-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.1rem, 13vw, 4.8rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--text-light);
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.about-hero-title span { display: block; }
.about-hero-title em {
  font-style: italic;
  color: var(--beige);
}
.about-hero-body {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgba(244, 235, 217, 0.72);
  font-size: clamp(0.93rem, 1.5vw, 1.05rem);
  line-height: 1.74;
  max-width: 38ch;
}

/* ── 2. Story / Timeline ── */
.story-section {
  background: var(--cream);
  color: var(--text-dark);
  padding: clamp(4rem, 9vh, 8rem) 0;
}
.story-sticky-panel { display: none; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.story-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.story-images img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  filter: brightness(0.96) saturate(0.92);
}
.story-timeline { display: none; }
.story-milestones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.2rem, 4vw, 3.4rem);
}
.story-milestone { position: relative; }
.story-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9b7b55;
  margin-bottom: 0.85rem;
}
.story-milestone p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 1.65vw, 1.55rem);
  line-height: 1.45;
  color: var(--text-dark);
  font-weight: 400;
  max-width: 30rem;
}

/* ── 3. Alex Feature ── */
.alex-section {
  background: var(--dark-brown);
  border-top: 1px solid rgba(239, 226, 207, 0.05);
  border-bottom: 1px solid rgba(239, 226, 207, 0.05);
}
.alex-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 78vh;
}
.alex-text {
  background: var(--wine);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.75rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.alex-text .section-label-light { margin-bottom: 1.4rem; }
.alex-text h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-light);
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.alex-text h2 span { display: block; }
.alex-text h2 em { font-style: italic; color: var(--beige); }
.alex-text p {
  color: rgba(244, 235, 217, 0.76);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.78;
  max-width: 32rem;
  margin-bottom: 1.2rem;
}
.alex-text p:last-child { margin-bottom: 0; }
.alex-image {
  min-height: 60vw;
  position: relative;
  overflow: hidden;
}
.alex-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.alex-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(22, 13, 10, 0.72) 0%, rgba(22, 13, 10, 0.2) 18%, transparent 34%);
  pointer-events: none;
}
.alex-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── 4. More Than a Restaurant ── */
.more-section {
  background: var(--cream);
  color: var(--text-dark);
  padding: clamp(4rem, 8vh, 7rem) 0;
}
.more-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.more-eyebrow {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9b7b55;
  margin-bottom: 0.85rem;
}
.more-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  text-transform: none;
}
.more-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.more-card {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.more-card-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  filter: brightness(0.96) saturate(0.92);
  transition: filter 350ms ease, transform 500ms ease;
}
.more-card:hover .more-card-image {
  filter: brightness(1.02) saturate(1);
}
.more-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 0.8rem;
}
.more-card p {
  color: #3d2c22;
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 24ch;
}

.more-banner { display: none; }
.more-card-icon { display: none; }
.more-carousel-dots { display: none; }

/* ── 5. Final Quote ── */


/* === DESKTOP: ABOUT (>=768px) === */
/* ════════════════════════════════════════════
   TABLET+ (≥ 768px)
════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* About hero — unified height + layout matching Menu hero system */
  .about-hero {
    min-height: 45vh;          /* как у главной (.hero) */
    align-items: stretch;
  }

  /* Hero text panel — unified to 52% / 560px (same width as all hero) */
  .about-hero .hero-copy {
    width: min(52%, 560px);
  }

  /* Body text fills the same width as the heading */
  .about-hero-body {
    max-width: none;
  }

  .story-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
  }
  .story-sticky-panel {
    display: flex;
    align-items: center;
    align-self: center;
    position: static;
    top: auto;
    transform: translateX(-10%);
  }
  .story-img-wrapper {
    position: relative;
    width: 100%;
    transform: none;
  }
  .story-sticky-img {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
  }
  .story-sticky-img img {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 520px;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    border-radius: 12px;
    transition: opacity 280ms ease;
  }
  .story-sticky-img img.fading { opacity: 0; }

  .story-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
  }
  .story-arrow:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.40);
    transform: translateY(-50%) scale(1.08);
  }
  .story-arrow:active { transform: translateY(-50%) scale(0.96); }
  .story-arrow-prev { left: 0.85rem; }
  .story-arrow-next { right: 0.85rem; }

  .story-images { display: none; }
  .story-timeline { display: none; }

  .story-milestones {
    position: relative;
    padding-left: 2rem;
    padding-top: 0.5rem;
    gap: clamp(3rem, 6vh, 5rem);
  }
  .story-milestones::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(155, 123, 85, 0.3) 6%,
      rgba(155, 123, 85, 0.3) 94%,
      transparent 100%);
  }
  .story-milestone {
    position: relative;
    cursor: pointer;
    transition: opacity 200ms ease;
  }
  .story-milestone:hover { opacity: 0.75; }
  .story-milestone::before {
    content: '';
    position: absolute;
    left: calc(-2rem - 3px);
    top: 0.28rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid #9b7b55;
    box-shadow: 0 0 0 3px var(--cream);
    transition: background 200ms ease, box-shadow 200ms ease;
  }
  .story-milestone.is-active .story-label { color: #7a5c35; }
  .story-milestone.is-active p { color: var(--text-dark); }
  .story-milestone.is-active::before {
    background: #9b7b55;
    box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px #9b7b55;
  }



  .alex-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    position: static;
    overflow: visible;
  }
  .alex-image {
    position: relative;
    min-height: 78vh;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
    margin-left: calc((100vw - min(100vw, 1200px)) / 2);
  }
  .alex-image img {
    object-position: 20% top;
  }
  .alex-image::after {
    background:
      linear-gradient(to right,
        transparent 45%,
        rgba(10, 4, 4, 0.55) 72%,
        rgba(10, 4, 4, 1) 100%),
      linear-gradient(to bottom,
        transparent 55%,
        rgba(10, 4, 4, 0.35) 100%);
  }
  .alex-text {
    position: relative;
    z-index: auto;
    max-width: none;
    min-height: unset;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem);
  }

  .more-section {
    padding: clamp(3.8rem, 6.65vh, 6.175rem) 0;
  }
  .more-section .page-width {
    max-width: 1360px;
  }
  .more-header {
    margin-bottom: clamp(2.85rem, 4.75vw, 4.275rem);
  }
  .more-banner { display: none; }
  .more-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(3.5rem, 5.5vw, 6rem);
  }
  .more-card { text-align: center; }
  .more-card-image {
    display: block;
    aspect-ratio: 4 / 3.1;
    margin-bottom: 1.71rem;
    filter: brightness(0.96) saturate(0.94);
    transition: filter 350ms ease, transform 500ms ease;
  }
  .more-card:hover .more-card-image {
    filter: brightness(1.03) saturate(1);
    transform: scale(1.012);
  }
  .more-card h3 {
    font-size: 0.78rem;
    margin-bottom: 0.95rem;
  }
  .more-card p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.74;
    max-width: 24ch; /* card constraint kept intentionally */
    margin: 0 auto;
  }

  /* Alex section — descriptive paragraphs, dark wine background */
  .alex-text p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
    max-width: 38ch;
    margin-bottom: 2rem;
  }
  .alex-text p:last-child { margin-bottom: 0; }

  /* ── DESKTOP DARK THEME OVERRIDES ──────────────────────────────── */

  /* Story section — cream → deep cinematic black */
  .story-section {
    background: #080202;
    color: var(--cream, #EFE2CF);
    border-top: 1px solid rgba(201,169,110,0.08);
    border-bottom: 1px solid rgba(201,169,110,0.06);
    padding: clamp(2.5rem, 4.5vh, 4rem) 0 clamp(5rem, 10vh, 9rem);
  }

  .story-milestone p {
    color: rgba(239,226,207,0.82);
    font-family: 'Cormorant Garamond', Georgia, serif;
  }

  /* Timeline vertical line — gold */
  .story-milestones::before {
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(201,169,110,0.45) 6%,
      rgba(201,169,110,0.45) 94%,
      transparent 100%);
  }

  /* Timeline dots — gold on dark background */
  .story-milestone::before {
    background: #c9a96e;
    border: 1px solid #c9a96e;
    box-shadow: 0 0 0 3px #080202, 0 0 0 5px rgba(201,169,110,0.35);
  }

  .story-milestone.is-active .story-label { color: #c9a96e; }
  .story-milestone.is-active p { color: var(--cream, #EFE2CF); }
  .story-milestone.is-active::before {
    background: #c9a96e;
    box-shadow: 0 0 0 3px #080202, 0 0 0 5px rgba(201,169,110,0.6);
  }

  /* Story images — darker cinematic treatment with gold frame */
  .story-sticky-img {
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(201,169,110,0.18), 0 20px 60px rgba(0,0,0,0.55);
  }
  .story-sticky-img img {
    filter: brightness(0.84) saturate(0.78) contrast(1.06);
    border-radius: 14px;
  }

  /* Story section divider label */
  .story-section .section-label {
    color: rgba(201,169,110,0.55);
  }
  .story-section h2 {
    color: var(--cream, #EFE2CF);
  }

  /* Active milestone — left accent bar */
  .story-milestone.is-active {
    opacity: 1;
  }
  .story-milestone.is-active .story-label {
    color: #c9a96e;
  }
  .story-milestone.is-active p {
    color: var(--cream, #EFE2CF);
  }

  /* Non-active milestones — slightly dimmed */
  .story-milestone:not(.is-active) .story-label {
    color: rgba(201,169,110,0.55);
  }
  .story-milestone:not(.is-active) p {
    color: rgba(239,226,207,0.52);
  }

  /* Alex section — тот же градиент, что в хедере (.site-header) */
  .alex-text {
    background: linear-gradient(
      to bottom,
      rgba(10, 4, 4, 0.92) 0%,
      rgba(10, 4, 4, 0.76) 55%,
      rgba(10, 4, 4, 0)    100%
    );
  }

  /* Alex image — cinematic fade into the new background color */
  .alex-image::after {
    background:
      linear-gradient(to right,
        transparent 35%,
        rgba(20,5,5,0.55) 68%,
        rgba(9,3,3,1) 100%),
      linear-gradient(to bottom,
        transparent 50%,
        rgba(10,4,4,0.45) 100%);
  }

  /* Alex image — darken & warm the photo */
  .alex-image img {
    filter: brightness(0.82) saturate(0.78) contrast(1.06);
  }

  /* More section — тот же градиент, что в футере (.site-footer, desktop) */
  .more-section {
    background:
      radial-gradient(ellipse 75% 85% at 50% 72%, rgba(108,20,32,0.34) 0%, rgba(90,17,26,0.12) 45%, transparent 72%),
      linear-gradient(to right, rgba(6,2,3,0.62) 0%, rgba(6,2,3,0.10) 30%, transparent 50%, rgba(6,2,3,0.10) 70%, rgba(6,2,3,0.62) 100%),
      linear-gradient(to bottom, #070303 0%, #120508 40%, #220810 78%, #2c0b14 100%);
    color: var(--cream, #EFE2CF);
    /* своей границы нет: линию-разделитель даёт .alex-section border-bottom
       (над тёмным фоном Alex → читается золотой, формат как у линии перед Alex) */
  }

  .more-eyebrow {
    color: rgba(201,169,110,0.60);
  }

  .more-title {
    color: var(--cream, #EFE2CF);
  }

  /* More section header rule */
  .more-header::after {
    content: '';
    display: block;
    width: 3rem;
    height: 1px;
    background: linear-gradient(to right, #c9a96e, rgba(201,169,110,0.2));
    margin: 1.4rem auto 0;
  }

  /* More cards — dark editorial treatment */
  .more-card {
    text-align: center;
    position: relative;
  }

  .more-card-image {
    filter: brightness(0.66) saturate(0.80) contrast(1.08);
    border-radius: 10px;
    transition: filter 350ms ease, transform 500ms ease;
  }

  .more-card:hover .more-card-image {
    filter: brightness(0.78) saturate(0.90) contrast(1.05);
    transform: scale(1.015);
  }

  .more-card h3 {
    color: rgba(201,169,110,0.82);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.28em;
  }

  .more-card p {
    color: rgba(239,226,207,0.60);
  }

  /* Section divider between story and alex */
  .alex-section {
    background: linear-gradient(
      180deg,
      #0d0208 0%,
      #080202 100%
    );
    border-top: 1px solid rgba(201,169,110,0.08);
    border-bottom: 1px solid rgba(201,169,110,0.08);  /* линия после Alex = формат линии после hero/перед Alex */
  }
}

/* === DESKTOP WIDE: ABOUT (>=1024px) === */
/* ════════════════════════════════════════════
   DESKTOP (≥ 1024px)
════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .alex-text { padding: 4rem 4rem; }
  .story-grid { grid-template-columns: 1fr 1.2fr; }
}

/* ════════════════════════════════════════════
   MOBILE (≤ 767px)
════════════════════════════════════════════ */
/* === MOBILE: ABOUT (base layout: hero / story / alex / more / final-quote) === */
/* NB: a SECOND mobile block follows below — "MOBILE: ABOUT - CINEMATIC OVERRIDES"
   (re-skin); it loads later and overrides parts of this one. Edit the right block. */
@media (max-width: 767px) {

  .about-page { overflow-x: hidden; }
  .story-arrow { display: none; }

  .about-hero {
    min-height: 82svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }
  .about-hero .hero-photo {
    background-image: url('photos/about-us/about us-hero-mobile.webp') !important;
    background-position: center center;
    inset: 0 0 0 30%;
  }
  .about-hero .hero-vignette {
    background:
      linear-gradient(to right,
        rgba(8,2,2,0.95) 0%,
        rgba(8,2,2,0.90) 25%,
        rgba(8,2,2,0.72) 38%,
        rgba(8,2,2,0.38) 52%,
        rgba(8,2,2,0.10) 66%,
        transparent 80%
      ),
      linear-gradient(to bottom,
        rgba(8,2,2,0.80) 0%,
        rgba(8,2,2,0.30) 16%,
        transparent 34%
      ),
      linear-gradient(to top,
        #080202 0%,
        rgba(8,2,2,0.97) 18%,
        rgba(8,2,2,0.72) 38%,
        rgba(8,2,2,0.30) 62%,
        transparent 78%
      );
  }
  .about-hero .hero-inner {
    align-items: flex-start;
    padding: 0 1.5rem clamp(4rem, 8vh, 6rem);
    width: 100%;
  }
  .about-hero .hero-copy {
    width: auto;
    max-width: 90vw;
  }
  .about-eyebrow,
  .hero-eyebrow {
    display: none;
  }
  .about-hero-title {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 7vw;
  }
  /* Match homepage h1 behavior — keep "Wine Bar / & Kitchen" style 2-line split.
     "Every place has" sits on line 1, "a story" on line 2 via natural wrap. */
  .about-hero-title span { display: inline; }
  .about-hero-title span + span::before { content: ' '; }
  .about-hero .hero-rule {
    display: block;
    width: 3rem;
    height: 1px;
    background: linear-gradient(to right, #c9a96e, rgba(201,169,110,0.2));
    margin-bottom: 1.25rem;
  }

  .about-hero-body {
    font-size: 1.12rem;
    line-height: 1.72;
    color: rgba(239,226,207,0.82);
    max-width: 18rem;
    margin-bottom: 0;
    text-shadow: 0 1px 12px rgba(0,0,0,0.65), 0 2px 28px rgba(0,0,0,0.45);
  }

  .story-section {
    background: var(--cream);
    padding: 3rem 0 3.25rem;
  }
  .story-grid { gap: 0; }
  .story-images { display: none; }
  .story-timeline { display: none; }

  .story-milestones {
    counter-reset: milestone;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }

  /*
    Geometry: page-margin(1rem) + number-width(2.8rem) = line at 3.8rem
    text starts at: 3.8rem + gap(1.1rem) = 4.9rem
  */
  .story-milestones::before {
    content: '';
    position: absolute;
    left: 3.8rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(155, 123, 85, 0.38) 4%,
      rgba(155, 123, 85, 0.38) 96%,
      transparent 100%);
  }

  .story-milestone {
    counter-increment: milestone;
    position: relative;
    padding: 1.75rem 1.25rem 1.75rem 4.9rem;
  }
  .story-milestone::before {
    content: counter(milestone, decimal-leading-zero);
    position: absolute;
    left: 1rem;
    top: 1.55rem;
    width: 2.6rem;
    text-align: right;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: rgba(155, 123, 85, 0.20);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .story-milestone::after {
    content: '';
    position: absolute;
    left: calc(3.8rem - 3px);
    top: 2.2rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9b7b55;
    box-shadow: 0 0 0 3px var(--cream);
  }

  .story-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #9b7b55;
    margin-bottom: 0.4rem;
  }
  .story-milestone p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 400;
    max-width: none;
  }

  .alex-section {
    border-top: none;
    border-bottom: none;
  }
  .alex-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .alex-image {
    order: 0;
    width: 100%;
    min-height: 72vw;
    max-height: 88vw;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .alex-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
  }
  .alex-image::before { display: none; }
  .alex-image::after { display: none; }

  .alex-text {
    order: 1;
    background: var(--wine);
    padding: 2.75rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
  }
  .alex-text .section-label-light {
    font-size: 0.6rem;
    letter-spacing: 0.36em;
    color: #c9a96e;
    margin-bottom: 1.1rem;
  }
  .alex-text h2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
  }
  .alex-text h2 span { display: block; }
  .alex-text p {
    font-size: 1rem;
    line-height: 1.78;
    color: rgba(244, 235, 217, 0.76);
    margin-bottom: 1rem;
    max-width: 34ch;
  }
  .alex-text p:last-child { margin-bottom: 0; }

  .more-section {
    background: var(--cream);
    padding: 3.4rem 0 3.85rem;
  }
  .more-header {
    padding: 0 1.75rem;
    margin-bottom: 2.1rem;
    text-align: left;
  }
  .more-eyebrow { margin-bottom: 0.6rem; }
  .more-title { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }
  .more-banner { display: none; }
  .more-card-image { display: none !important; }

  .more-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 0.4rem 10vw 1.05rem;
    scrollbar-width: none;
    align-items: stretch;
  }
  .more-cards::-webkit-scrollbar { display: none; }

  .more-card {
    flex: 0 0 75vw;
    min-width: 0;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.35rem 1.5rem 2.55rem;
    background: #faf4ec;
    border-radius: 1.5rem;
    border: 1px solid rgba(155, 123, 85, 0.18);
    box-shadow: 0 2px 20px rgba(22, 13, 10, 0.07);
    gap: 0;
    position: relative;
  }
  .more-card + .more-card::before { display: none; }

  .more-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #9b7b55;
    margin-bottom: 1.3rem;
    flex-shrink: 0;
  }
  .more-card-body { width: 100%; }
  .more-card h3 {
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 0.85rem;
  }
  .more-card p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.65;
    color: #1A0F0B;
    max-width: none;
  }

  .more-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
  }
  .more-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(155, 123, 85, 0.28);
    transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
  }
  .more-carousel-dot.active {
    width: 20px;
    border-radius: 3px;
    background: #9b7b55;
  }

  .final-quote { padding: 3rem 1.5rem; }
  .final-quote-text {
    font-size: clamp(1.5rem, 6.5vw, 1.9rem);
    line-height: 1.45;
  }
  .final-quote-text::before,
  .final-quote-text::after { content: none; }
  .final-quote-text span:first-child::before {
    content: '\201C\2009';
    color: #9b7b55;
    font-family: inherit;
  }
  .final-quote-text span:last-child::after {
    content: '\2009\201D';
    color: #9b7b55;
    font-family: inherit;
  }
}

/* ════════════════════════════════════════════
   MOBILE OVERRIDES  (≤ 767px)
   About-specific cinematic upgrades
════════════════════════════════════════════ */
/* === MOBILE: ABOUT - CINEMATIC OVERRIDES (hero vignette / story dark / timeline re-skin) === */
/* Second mobile block (loads after the base one above) — overrides on purpose. */
@media (max-width: 767px) {

  /* About hero — cinematic bottom-heavy vignette */
  .about-hero .hero-vignette {
    background:
      /* Затемнение как на главной: тёмное слева под текстом, фото справа читается */
      linear-gradient(to bottom,
        rgba(8,2,2,0.6) 0%,
        rgba(8,2,2,0.18) 14%,
        transparent 28%
      ),
      linear-gradient(to right,
        rgba(8,2,2,0.86) 0%,
        rgba(8,2,2,0.68) 24%,
        rgba(8,2,2,0.44) 46%,
        rgba(8,2,2,0.2) 68%,
        rgba(8,2,2,0.05) 86%,
        transparent 100%
      ),
      linear-gradient(to top,
        #080202 0%,
        rgba(8,2,2,0.82) 16%,
        rgba(8,2,2,0.38) 36%,
        transparent 56%
      ) !important;
  }

  /* ── Story Section — dark cinematic burgundy ── */
  /* === MOBILE: ABOUT - story / timeline / milestones === */
  .story-section {
    background: #110406;
    color: var(--cream, #EFE2CF);
    padding: 2.75rem 0 3rem;
  }

  /* Timeline vertical line — gold */
  .story-milestones::before {
    left: 3.0rem;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(201,169,110,0.48) 4%,
      rgba(201,169,110,0.48) 96%,
      transparent 100%);
  }

  /* Numbers — subtle gold, moved left for more text width */
  .story-milestone::before {
    left: 0.65rem;
    width: 2.15rem;
    color: rgba(201,169,110,0.20);
    font-size: 2rem;
  }

  /* Milestone padding: tighter left so text has more breathing room */
  .story-milestone {
    padding: 1.6rem 1.25rem 1.6rem 4.15rem;
  }

  /* Gold dot — halo on dark background */
  .story-milestone::after {
    left: calc(3.0rem - 3px);
    background: #c9a96e;
    box-shadow: 0 0 0 3px #110406, 0 0 0 4.5px rgba(201,169,110,0.30);
  }

  /* Subtle gold divider between timeline items */
  .story-milestone + .story-milestone {
    border-top: 1px solid rgba(201,169,110,0.07);
  }

  /* Labels — warm gold */
  .story-label {
    color: rgba(201,169,110,0.72);
    letter-spacing: 0.30em;
    font-size: 0.57rem;
  }

  /* Body text — cream on dark */
  .story-milestone p {
    color: rgba(239,226,207,0.78);
    font-size: 1.05rem;
    line-height: 1.54;
  }

  /* ── Alex — slightly taller photo on mobile ── */
  .alex-image {
    min-height: 82vw;
    max-height: 108vw;
  }

  /* ── More Than a Restaurant — dark horizontal carousel ── */
  .more-section {
    background: #080202;
    padding: 3.75rem 0 4rem;
  }
  .more-header {
    padding: 0 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
  }
  .more-eyebrow {
    color: rgba(201,169,110,0.65);
    letter-spacing: 0.30em;
  }
  .more-title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.06;
    color: var(--cream, #EFE2CF);
  }
  .more-banner { display: none; }

  /* Horizontal snap carousel */
  .more-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.9rem;
    padding: 0.5rem 8vw 1.25rem;
    scrollbar-width: none;
    align-items: stretch;
  }
  .more-cards::-webkit-scrollbar { display: none; }

  .more-card {
    flex: 0 0 78vw;
    min-width: 0;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.75rem 2.75rem;
    background: linear-gradient(160deg, #1e080c 0%, #0f0304 100%);
    border-radius: 1.25rem;
    border: 1px solid rgba(201,169,110,0.14);
    box-shadow: 0 6px 36px rgba(0,0,0,0.50);
    position: relative;
    overflow: hidden;
  }

  /* Photo hidden — clean icon-only luxury cards */
  .more-card-image { display: none !important; }

  /* Gold circle icon */
  .more-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(201,169,110,0.28);
    color: #c9a96e;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
  }

  .more-card-body { width: 100%; }

  .more-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.27em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.82);
    margin-bottom: 0.85rem;
    line-height: 1.4;
  }
  .more-card p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.65;
    color: rgba(239,226,207,0.62);
    max-width: none;
    margin: 0;
  }

  /* Gold pagination dots */
  .more-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
  }
  .more-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(201,169,110,0.22);
    transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
  }
  .more-carousel-dot.active {
    width: 20px;
    border-radius: 3px;
    background: rgba(201,169,110,0.80);
  }
}

/* === ABOUT: новые мобильные блоки, на десктопе скрыты === */
.story-card-title { display: none; }
/* вес выше, чем у .about-hero-title span */
.about-hero-title .aht-short { display: none; }

/* ════════════════════════════════════════════════════════════
   MOBILE: ABOUT — приведение к обновлённой главной (02.09.2026)
   Только ≤767px. Десктоп не затрагивается: все правила внутри media.
   Токены те же, что на главной: контейнер 20px, карточки 20px,
   золото #C9A96E, кнопки 48px, бордовый градиент как у .modal-submit.
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. HERO — геометрия как на главной ──
     min-height, отступ сверху, центровка и ширина текста взяты
     с .page-home .hero, чтобы обе страницы читались одинаково. */
  .about-hero {
    /* 56svh оставляли 76px пустоты под текстом — блок теперь по контенту */
    min-height: 48svh;
    padding-top: 12.5svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
  .about-hero .hero-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 0;    /* 67px снизу и давали пустоту под описанием */
    align-items: flex-end;
  }
  .about-hero .hero-copy {
    padding: 1.25rem 0 0.5rem;
  }
  /* Бокал опускаем на уровень описания. Мобильный кроп по пропорциям почти
     совпадает с рамкой, поэтому при cover двигать нечего — увеличиваем кадр
     на 35% по высоте и показываем его верх, содержимое уходит вниз. */
  .about-hero .hero-photo {
    background-size: auto 135%;
    background-position: 50% 3px;    /* кадр поднят на 20% высоты hero (405px) */
  }
  /* Кегль задан выше в этом же файле и перебивал общее правило —
     повышаем вес через .about-hero. Масштаб тот же, что на главной. */
  /* На мобильной заголовок — «Our Story» вместо длинной фразы */
  .about-hero-title > span:not(.aht-short) { display: none; }
  .about-hero-title .aht-short { display: block; }

  .about-hero .about-hero-title {
    font-size: clamp(2.21rem, 10.09vw, 2.7rem);   /* +10% к масштабу главной */
    line-height: 1.04;
    text-wrap: balance;   /* строки распределяются ровно, а не «EVERY / PLACE HAS A / STORY» */
    /* та же ширина колонки, что у описания — заголовок переносится в неё */
    max-width: 14.75rem;   /* 236px — как на главной */
  }
  .about-hero-body {
    font-size: 0.984rem;        /* как описание hero на главной — 15.7px */
    line-height: 1.55;
    max-width: 14.75rem;        /* 236px — как на главной */
  }
  .about-hero-body br { display: none; }   /* перенос из десктопной вёрстки */

  /* ── 2. ИСТОРИЯ — одна бордовая карточка ── */
  .story-section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    /* Отступ после описания — примерно одна пустая строка того же кегля
       (17.3px × 1.55 ≈ 27px). Ещё 8px даёт низ hero. */
    padding-top: 2.45rem;   /* +5% высоты hero к прежним 19px */
  }
  .story-grid {
    padding-left: 0;
    padding-right: 0;
  }
  .story-card-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #C9A96E;
    margin: 0 0 1.5rem;
  }
  .story-milestones {
    counter-reset: story;
    background: linear-gradient(160deg, rgba(74,13,23,0.55) 0%, rgba(26,4,9,0.92) 60%);
    border: 1px solid rgba(201,169,110,0.16);
    border-radius: 20px;
    padding: 1.5rem 1.25rem 1.25rem;
    margin: 0;
  }
  /* Вертикальная золотая линия вдоль номеров */
  .story-milestones::before {
    content: '';
    position: absolute;
    left: calc(1.25rem + 15px);
    top: 4.4rem;
    bottom: 2.6rem;
    width: 1px;
    background: linear-gradient(to bottom, rgba(201,169,110,0.45), rgba(201,169,110,0.08));
  }
  .story-milestone {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 0.9rem;
    padding: 0 0 1.15rem;
    margin: 0;
  }
  .story-milestone + .story-milestone {
    padding-top: 1.15rem;
    border-top: 1px solid rgba(201,169,110,0.12);
  }
  /* Номера 01–04 кружками — счётчиком, без правки разметки */
  .story-milestone::before {
    counter-increment: story;
    content: counter(story, decimal-leading-zero);
    position: static;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(201,169,110,0.45);
    border-radius: 50%;
    background: #1a0409;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #C9A96E;
  }
  .story-milestone::after { content: none; }
  .story-label {
    grid-column: 2;
    font-size: 0.75rem;          /* было 9.1px */
    letter-spacing: 0.18em;
    color: #C9A96E;
    margin-bottom: 0.35rem;
  }
  .story-milestone p {
    grid-column: 2;
    font-size: 0.94rem;          /* 15px */
    line-height: 1.55;
    margin: 0;
  }

  /* ── 3. АЛЕКС — фото сверху, карточка под ним ── */
  .alex-section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .alex-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .alex-image {
    order: 1;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }
  .alex-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center 22%;   /* лицо и бокал в кадре */
  }
  .alex-text {
    order: 2;
    background: linear-gradient(160deg, rgba(74,13,23,0.6) 0%, rgba(26,4,9,0.94) 65%);
    border: 1px solid rgba(201,169,110,0.16);
    border-top: none;
    border-radius: 0 0 20px 20px;
    padding: 1.5rem 1.25rem 1.6rem;
  }
  .alex-text p {
    font-size: 0.94rem;          /* 15px */
    line-height: 1.6;
  }

  /* ── 4. MORE THAN A RESTAURANT — одна колонка ── */
  /* Мозаика: слева одна высокая карточка, справа две поменьше друг над другом */
  .more-section .more-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 9.6rem;   /* содержимое карточек абсолютное — высоту задаём рядами */
    gap: 0.7rem;
    overflow: visible;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .more-section .more-card {
    width: auto;
    flex: 0 0 auto;
    border-radius: 20px;
    overflow: hidden;
    min-height: 0;
  }
  .more-section .more-card:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .more-section .more-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .more-section .more-card:nth-child(3) { grid-column: 2; grid-row: 2; }
  /* Тело карточки лежит абсолютом поверх фото и было без фона —
     текст сливался с картинкой. Мягкое затемнение снизу. */
  .more-section .more-card-body {
    background: linear-gradient(to top,
      rgba(8,2,3,0.96) 0%,
      rgba(8,2,3,0.82) 45%,
      rgba(8,2,3,0.35) 78%,
      transparent 100%);
    padding-top: 2.6rem;
  }
  .more-section .more-card p {
    font-size: 0.94rem;          /* было 12.2px */
    line-height: 1.5;
    color: rgba(239,226,207,0.88);
  }
  .more-section .more-card h3 {
    font-size: 1.06rem;
    line-height: 1.18;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
  }
  .more-section .more-card p {
    font-size: 0.76rem;
    line-height: 1.35;
  }
  .more-section .more-card-body {
    padding: 1.6rem 0.75rem 0.85rem;
  }
  .more-carousel-dots { display: none; }   /* карусели больше нет */

  /* ── 5. ЦИТАТА — компактнее ── */
  .final-quote {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }

}



/* ═══════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ АЛЕКС — во всю ширину, без карточки
   Контейнер фото имел min-height 82vw при картинке в 257px — из-за
   этого под снимком оставалась пустая полоса в 63px. Теперь высоту
   задаёт сама картинка, а блок с текстом идёт от края до края.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .alex-section {
    padding-left: 0;
    padding-right: 0;
  }

  .alex-image {
    min-height: 0;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
  }
  /* статичная картинка: контейнер обнимает её по высоте, пустоты нет */
  .alex-image img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }

  /* Никакого бордового налёта на снимке: нижний градиент убран. */
  .alex-image::after { display: none; }

  .alex-text {
    border: none;
    border-radius: 0;
    padding: 1.75rem 1.25rem 2.5rem;
    /* Начинается почти чёрным — тем же, чем заканчивается снимок, поэтому
       стыка не видно и краснота на фото не заходит. Заканчивается цветом
       .more-section (#080202), так что нижняя граница тоже не читается. */
    background: linear-gradient(to bottom,
      #0A0203 0%,
      #200710 9%,
      #2E0810 22%,          /* было #5A111A — слишком светлый; это --wine */
      #200710 58%,
      #120406 82%,
      #080202 100%);
  }
}