/**
 * About Us — PDF pp.12-17.
 *
 * Editorial "chapter" magazine format: each numbered chapter is its own PDF
 * page (a full screen of its own in the approved design), so sections here
 * are generously sized via clamp()/vh image bands + generous text padding
 * rather than compressed — but not forced to a hard min-height:100svh the
 * way Homepage's single-scene sections are, since a chapter's natural
 * height (image band + text) already reads as close to one screen without
 * that forcing, and forcing it would leave awkward empty cream space below
 * shorter chapters (Vision & Purpose, Barista-style short chapters).
 *
 * RTL: built with logical properties (margin-inline, padding-inline,
 * text-align: start/end, border-inline-start) and DOM-order grid/flex so
 * dir="rtl" mirrors composition order automatically — see MISSING-ASSETS.md
 * "RTL preview mode" for how to verify.
 */

.about-header {
  background: var(--color-cream);
  padding-block: var(--section-pad-y-lg) var(--space-6);
  text-align: center;
}
.about-header__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cherry-temp);
  margin: 0 0 var(--space-4);
}
.about-header__title {
  font-size: clamp(2.5rem, 5.5vw, var(--fs-6));
  color: var(--color-ink);
  margin: 0;
}

/* ---- Shared chapter number / rule / label ---- */
.chapter__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.chapter__number {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--color-copper-temp);
  line-height: 1;
}
.chapter__rule {
  width: 40px;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 1px solid var(--color-cherry-temp);
}
.chapter__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-000);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.chapter__heading {
  font-size: clamp(2rem, 3.6vw, var(--fs-5));
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
  line-height: 1.15;
}
.chapter__script {
  display: block;
  font-family: var(--font-script);
  font-size: var(--fs-3);
  color: var(--color-cherry-temp);
  margin-block-start: var(--space-2);
}
.chapter__body {
  color: var(--color-ink-soft);
  font-size: var(--fs-1);
  line-height: 1.75;
  max-width: 34rem;
  margin: 0;
}

/* ================= 01 · The Origin (hero carousel) ================= */
.about-origin {
  background: var(--color-cream);
}
.about-origin__carousel {
  position: relative;
  outline: none;
}
.about-origin__track {
  position: relative;
  width: 100%;
  height: clamp(320px, 46vw, 620px);
  background: var(--color-line); /* visible seam while an image loads */
}
.about-origin__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease;
}
.about-origin__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.about-origin__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-origin__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-5);
}
.about-origin__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-line);
  padding: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.about-origin__dot.is-active {
  background: var(--color-copper-temp);
  transform: scale(1.3);
}
.about-origin__dot:hover,
.about-origin__dot:focus-visible {
  background: var(--color-cherry-temp);
}

.about-origin__content {
  padding-block: var(--section-pad-y-lg);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: var(--space-9);
  row-gap: var(--space-8);
  align-items: start;
}
.about-origin__content .chapter__heading {
  font-size: clamp(2.25rem, 4vw, var(--fs-5));
  margin-bottom: 0;
}

/* ================= Shared: image-band chapter (02, 03, 05) ================= */
.about-chapter__band {
  height: clamp(280px, 42vw, 620px);
}
.about-chapter__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-chapter {
  background: var(--color-cream);
  padding-block-end: var(--section-pad-y-lg);
}
.about-chapter__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: var(--space-9);
  row-gap: var(--space-8);
  align-items: start;
  /* Deliberate breathing room between the image band above and the editorial
     text below — the approved PDF never lets these touch. */
  padding-block-start: var(--section-pad-y-lg);
}
.about-chapter__rule {
  width: 100%;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 1px solid var(--color-line);
  margin-block: var(--space-6);
}
.about-chapter__body-2 {
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--fs-1);
  line-height: 1.75;
  max-width: 34rem;
  margin: 0;
}

/* ================= 04 · Core Principles ================= */
.about-principles__columns {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1fr;
  column-gap: var(--space-9);
  row-gap: var(--space-8);
  align-items: start;
  padding-block-start: var(--section-pad-y-lg);
}
.about-principles__pillar-title {
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}
.about-principles__rule {
  width: 32px;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 2px solid var(--color-cherry-temp);
  margin-block-end: var(--space-3);
}
.about-principles__pillar-body {
  color: var(--color-ink-soft);
  font-size: var(--fs-00);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}
.about-principles__script {
  font-family: var(--font-script);
  font-size: var(--fs-3);
  color: var(--color-cherry-temp);
}

/* ================= Culinary Pillars ================= */
.about-pillars {
  background: var(--color-cream);
  padding-block: var(--section-pad-y-lg);
}
.about-pillars__header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.about-pillars__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cherry-temp);
  margin: 0 0 var(--space-4);
}
.about-pillars__heading {
  font-size: clamp(2rem, 4vw, var(--fs-5));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}
.about-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.about-pillars__tile-image {
  /* PDF p.17 uses a portrait crop, not a square one. */
  aspect-ratio: 7 / 8;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.about-pillars__tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}
.about-pillars__tile:hover .about-pillars__tile-image img,
.about-pillars__tile:focus-within .about-pillars__tile-image img {
  transform: scale(1.04);
}
.about-pillars__tile-title {
  font-size: var(--fs-2);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.about-pillars__tile-rule {
  width: 28px;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 2px solid var(--color-copper-temp);
  margin-block-end: var(--space-3);
}
.about-pillars__tile-body {
  color: var(--color-ink-soft);
  font-size: var(--fs-00);
  line-height: 1.65;
  margin: 0;
}

.about-pillars__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border-block-start: 1px solid var(--color-line);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
}
.about-pillars__footer-statement {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0;
}
.about-pillars__cta {
  display: inline-block;
  background: var(--color-cherry-temp);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  transition: background var(--transition-fast);
  flex: none;
}
.about-pillars__cta:hover,
.about-pillars__cta:focus-visible {
  background: color-mix(in srgb, var(--color-cherry-temp) 85%, black);
}

@media (max-width: 900px) {
  .about-origin__content,
  .about-chapter__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .about-principles__columns {
    grid-template-columns: 1fr;
    /* Still stacks 3 items even in single-column, so unlike the two grids
       above (which become simple 2-block stacks), row-gap still matters
       here — the desktop value (--space-8, 64px) is sized for a 3-column
       row gap, not a mobile vertical stack. */
    row-gap: var(--space-6);
  }
  .about-pillars__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-pillars__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  .about-pillars__grid {
    grid-template-columns: 1fr;
  }
}

/* Client feedback: mobile typography still slightly large — small further
   reduction, not a redesign. */
@media (max-width: 640px) {
  .about-header__title {
    font-size: clamp(2.2rem, 5.5vw, var(--fs-6));
  }
  .chapter__heading,
  .about-origin__content .chapter__heading {
    font-size: clamp(1.75rem, 3.6vw, var(--fs-5));
  }
  .about-pillars__heading {
    font-size: clamp(1.85rem, 4vw, var(--fs-5));
  }
}

/* Client feedback, round 2: still slightly large — one further ~5% pass on
   the same headings above, nothing else. Desktop (the var(--fs-X) ceiling)
   is untouched either way. */
@media (max-width: 640px) {
  .about-header__title {
    font-size: clamp(2.09rem, 5.5vw, var(--fs-6));
  }
  .chapter__heading,
  .about-origin__content .chapter__heading {
    font-size: clamp(1.66rem, 3.6vw, var(--fs-5));
  }
  .about-pillars__heading {
    font-size: clamp(1.76rem, 4vw, var(--fs-5));
  }
}