/* Hallmark · genre: editorial · macrostructure: Personal travel essay · theme: Linen · enrichment: founder photography · nav: N9 · footer: Ft2
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * truthful: verified founder facts only · crop: full-frame face-safe · responsive: 320–1440 px
 */
@import url("/tokens.css");

.about-main {
  max-width: 1240px;
  padding-top: clamp(48px, 7vw, 96px);
}
.about-main em {
  color: var(--gold);
  font-style: italic;
}
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: end;
}
.about-hero-copy {
  padding-bottom: clamp(24px, 5vw, 64px);
}
.about-hero h1 {
  max-width: 9.5ch;
}
.about-lede {
  max-width: 56ch;
  margin: clamp(28px, 4vw, 48px) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  line-height: 1.65;
}
.about-portrait,
.about-landscape {
  margin: 0;
}
.about-portrait img,
.about-landscape img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-deep);
}
.about-portrait figcaption,
.about-landscape figcaption,
.travel-ribbon figcaption {
  display: grid;
  gap: 3px;
  padding-top: 12px;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.about-portrait figcaption strong,
.about-landscape figcaption strong,
.travel-ribbon figcaption strong {
  color: var(--ink);
  font-weight: 700;
}
.about-chapter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 8vw, 120px);
  margin-top: clamp(88px, 12vw, 176px);
  padding-top: clamp(28px, 4vw, 52px);
  border-top: var(--rule-hairline) solid var(--ink);
}
.about-chapter-heading h2,
.about-close h2 {
  margin: 0;
  font-size: clamp(2.65rem, 6vw, 5.8rem);
}
.chapter-number {
  margin: 0 0 20px;
  color: var(--gold);
  font: 600 0.62rem/1.4 var(--font-body);
  letter-spacing: 0.11em;
}
.about-chapter-copy {
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.45vw, 1.16rem);
}
.about-chapter-copy p {
  margin: 0;
}
.about-chapter-copy p + p {
  margin-top: 24px;
}
.about-text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 28px;
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 3px;
}
.about-landscape {
  width: min(100%, 960px);
  margin: clamp(80px, 12vw, 164px) 0 0 auto;
}
.travel-ribbon {
  margin-top: clamp(88px, 12vw, 176px);
  padding-top: clamp(28px, 4vw, 52px);
  border-top: var(--rule-hairline) solid var(--ink);
}
.travel-ribbon-heading {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.travel-ribbon-heading h2 {
  margin: 0;
  font-size: clamp(2.65rem, 5vw, 4.7rem);
}
.travel-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 84px) clamp(20px, 3vw, 40px);
  margin-top: clamp(48px, 7vw, 88px);
}
.travel-ribbon figure {
  margin: 0;
}
.travel-ribbon img {
  display: block;
  width: 100%;
  height: auto;
}
.about-close {
  margin-top: clamp(88px, 12vw, 176px);
}
.about-close h2 {
  max-width: 12ch;
}
.about-close > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 36px;
}
.about-close a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 600;
  text-underline-offset: 3px;
}
.about-disclosure {
  max-width: 76ch;
  margin: clamp(72px, 9vw, 120px) 0 0;
  padding-top: 24px;
  border-top: var(--rule-hairline) solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-xs);
}

@media (max-width: 760px) {
  .about-hero,
  .about-chapter,
  .travel-ribbon-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-hero-copy {
    padding-bottom: 0;
  }
  .about-portrait {
    width: min(100%, 540px);
  }
  .about-chapter {
    gap: 28px;
  }
  .about-principles ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 400px) {
  .travel-ribbon-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (pointer: coarse) {
  .about-text-link,
  .about-close a {
    min-height: 48px;
  }
}