:root {
  --font-about-thai: "Anuphan", var(--font-thai);
  --font-about-script: "Caveat", cursive;
  --about-hero-ratio: 1.95;
  --about-photo-ratio: 0.92;
}

.about-shell {
  padding-top: var(--space-5);
  font-family: var(--font-about-thai);
}

.about-hero {
  position: relative;
  min-height: min(500px, 58vw);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-sunk);
  isolation: isolate;
}

.about-hero > img,
.about-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-hero > img {
  z-index: -2;
  object-fit: cover;
  object-position: center 48%;
}

.about-hero__shade {
  z-index: -1;
  background: linear-gradient(90deg, transparent 45%, rgb(20 27 18 / 0.08) 62%, rgb(16 24 16 / 0.58) 100%);
}

.about-hero__copy {
  position: absolute;
  right: clamp(var(--space-5), 7vw, var(--space-9));
  top: 50%;
  width: min(32%, 280px);
  transform: translateY(-44%);
  color: var(--on-sage);
  text-align: center;
  text-shadow: 0 2px 16px rgb(0 0 0 / 0.18);
}

.about-hero__copy h1 {
  margin: 0;
  font: 500 clamp(3.5rem, 7vw, 5.75rem)/0.78 var(--font-about-script);
  letter-spacing: 0;
}

.about-script-rule,
.about-name-rule {
  display: block;
  width: var(--space-8);
  margin: var(--space-4) auto;
  border-top: 2px solid currentColor;
  transform: rotate(-6deg);
}

.about-hero__copy p {
  margin: 0;
  font: 400 var(--text-lg)/var(--leading-normal) var(--font-about-thai);
}

.about-intro {
  width: min(760px, 100%);
  margin: var(--space-6) auto 0;
  text-align: center;
}

.about-intro h2 {
  margin: 0 0 var(--space-3);
  font: 500 clamp(2.5rem, 5vw, 3.6rem)/var(--leading-tight) var(--font-display);
  letter-spacing: -0.02em;
}

.about-intro p {
  margin: 0;
  color: var(--ink-muted);
  font: 400 var(--text-lg)/1.8 var(--font-about-thai);
}

.about-people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: var(--space-7);
  width: min(700px, 100%);
  margin: var(--space-6) auto var(--space-5);
}

.about-people article { min-width: 0; }
.about-people article:last-child { text-align: right; }

.about-people h2 {
  display: inline-block;
  margin: 0;
  color: var(--clay-ink);
  font: 500 clamp(2.6rem, 5vw, 3.5rem)/1 var(--font-about-script);
}

.about-name-rule {
  width: var(--space-8);
  margin: var(--space-1) 0 var(--space-3);
  color: var(--clay-ink);
}

.about-people article:last-child .about-name-rule { margin-left: auto; }

.about-people p {
  margin: 0;
  font: 400 var(--text-base)/1.7 var(--font-about-thai);
}

.about-people__divider { width: 1px; min-height: 100%; background: var(--line); }

.about-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.about-gallery figure {
  position: relative;
  aspect-ratio: var(--about-photo-ratio);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-sunk);
}

.about-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.about-gallery figure:first-child img { object-position: center 58%; }
.about-gallery figure:last-child img { object-position: center 40%; }
.about-gallery figure:hover img { transform: scale(1.018); }

.about-gallery figcaption {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  color: var(--on-sage);
  font: 500 clamp(1.75rem, 4vw, 2.5rem)/0.9 var(--font-about-script);
  text-align: right;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.45);
}

.about-gallery figure:first-child figcaption { text-align: left; }

.about-closing {
  width: min(740px, 100%);
  margin: var(--space-7) auto var(--space-9);
  text-align: center;
}

.about-closing__title {
  display: grid;
  grid-template-columns: minmax(var(--space-6), 1fr) auto minmax(var(--space-6), 1fr);
  gap: var(--space-5);
  align-items: center;
}

.about-closing__title span { border-top: 1px solid var(--tan); }

.about-closing h2 {
  margin: 0;
  color: var(--clay-ink);
  font: 500 clamp(2.25rem, 5vw, 3.35rem)/1 var(--font-about-script);
}

.about-closing p {
  margin: var(--space-3) 0 0;
  color: var(--ink-muted);
  font: 400 var(--text-base)/var(--leading-relaxed) var(--font-about-thai);
}

.about-heart {
  margin-top: var(--space-4);
  color: var(--clay-ink);
  font: 400 var(--text-2xl)/1 var(--font-sans);
}

@media (max-width: 767px) {
  .about-shell { padding-top: var(--space-4); }
  .about-hero { min-height: 128vw; }
  .about-hero > img { object-position: 42% center; }
  .about-hero__shade { background: linear-gradient(180deg, transparent 42%, rgb(14 20 14 / 0.62) 100%); }
  .about-hero__copy { right: var(--space-5); bottom: var(--space-6); top: auto; width: min(62%, 240px); transform: none; }
  .about-hero__copy h1 { font-size: clamp(3.4rem, 18vw, 5rem); }
  .about-intro { margin-top: var(--space-6); }
  .about-intro h2 { font-size: clamp(2.25rem, 12vw, 3.25rem); }
  .about-intro p { font-size: var(--text-base); }
  .about-desktop-break { display: none; }
  .about-people { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-6); text-align: center; }
  .about-people article:last-child { text-align: center; }
  .about-name-rule,
  .about-people article:last-child .about-name-rule { margin-right: auto; margin-left: auto; }
  .about-people__divider { width: var(--space-8); min-height: 1px; margin: 0 auto; }
  .about-gallery { grid-template-columns: 1fr; gap: var(--space-4); }
  .about-gallery figure { aspect-ratio: 0.88; }
  .about-closing { margin-bottom: var(--space-8); }
  .about-closing__title { grid-template-columns: var(--space-5) 1fr var(--space-5); gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .about-gallery img { transition: none; }
  .about-gallery figure:hover img { transform: none; }
}