/* About page: global tokens, navigation, buttons and footer come from style.css. */
html:has(.about-page) { max-width: 100%; overflow-x: clip; }
.about-page { max-width: 100%; overflow-x: clip; background: var(--paper); color: var(--deep-teal); }
.about-page main { overflow: hidden; }
.about-shapes { position: absolute; pointer-events: none; }

/* Hero */
.about-hero {
  position: relative;
  min-height: clamp(560px, 43vw, 650px);
  overflow: hidden;
  background: var(--paper);
}
.about-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 76%;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(255 253 249 / .98) 0%, rgb(255 253 249 / .94) 42%, rgb(255 253 249 / .76) 60%, rgb(255 253 249 / .34) 80%, rgb(255 253 249 / 0) 100%);
  -webkit-backdrop-filter: blur(8px);
}
.about-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -15%;
  bottom: -130px;
  width: 65%;
  height: 182px;
  border-radius: 50% 55% 0 0 / 74% 68% 0 0;
  background: var(--paper);
  pointer-events: none;
  transform: rotate(-1.2deg);
  transform-origin: left bottom;
}
.about-hero-inner { position: relative; z-index: 3; min-height: inherit; display: flex; align-items: center; pointer-events: none; }
.about-hero-copy { position: relative; isolation: isolate; width: 46%; padding: 36px 3% 55px 0; pointer-events: auto; }
.about-hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -48px;
  right: -26%;
  bottom: -48px;
  left: -8vw;
  border-radius: 0 120px 145px 0 / 0 88px 108px 0;
  -webkit-backdrop-filter: blur(11px);
  pointer-events: none;
}
.about-hero-copy > * { position: relative; z-index: 1; }
.about-hero h1 {
  margin: 17px 0 12px;
  font-size: clamp(55px, 5.2vw, 76px);
  line-height: .95;
  letter-spacing: -.047em;
  white-space: nowrap;
}
.about-hero h1 em { font-weight: 400; }
.about-hero-copy > p:not(.eyebrow) {
  max-width: 510px;
  margin-bottom: 17px;
  font-size: clamp(14px, 1.12vw, 17px);
  line-height: 1.48;
}
.about-hero-copy > .about-intro {
  max-width: none;
  margin-bottom: 23px;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.3;
  letter-spacing: -.02em;
}
.about-hero-copy .button { min-width: 165px; margin-top: 10px; }
.about-hero-media {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 18%;
  overflow: hidden;
  background: var(--warm-cream);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .16) 8%, rgb(0 0 0 / .72) 20%, #000 31%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .16) 8%, rgb(0 0 0 / .72) 20%, #000 31%, #000 100%);
}
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 27%; transition: transform 350ms ease; }
.hero-note {
  position: absolute;
  right: 5%;
  bottom: 6%;
  color: var(--warm-cream);
  font-family: var(--font-script);
  font-size: clamp(27px, 2.5vw, 37px);
  line-height: 1.02;
  text-align: center;
  transform: rotate(-9deg);
}
.hero-note span { display: block; margin: 7px 0 0 45%; font-family: var(--font-serif); font-size: .55em; }

/* Story */
.about-story { position: relative; z-index: 2; background: var(--paper); }
.story-inner {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: 46% 1fr;
  gap: clamp(44px, 5vw, 78px);
  align-items: center;
}
.story-media {
  height: clamp(590px, 49vw, 730px);
  margin-top: -18px;
  overflow: hidden;
  clip-path: url(#about-cafe-shape);
  background: var(--warm-cream);
}
.story-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 350ms ease; }
.story-copy { max-width: 555px; padding: 42px 42px 25px 0; }
.story-copy h2 { margin-bottom: 24px; font-size: clamp(45px, 4.2vw, 61px); line-height: .96; letter-spacing: -.035em; }
.story-copy p { margin-bottom: 18px; font-size: clamp(14px, 1.12vw, 17px); line-height: 1.48; letter-spacing: -.012em; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy strong { font-weight: 600; }

/* Personal details */
.facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 22px;
  padding-bottom: 58px;
}
.fact { position: relative; min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.fact + .fact::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: rgb(33 75 83 / .1); }
.fact svg { width: 39px; height: 39px; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fact p { color: var(--teal); font-size: 12px; line-height: 1.2; }

/* Final reminder */
.about-reminder {
  position: relative;
  z-index: 3;
  isolation: isolate;
  background: var(--mist-blue);
}
.about-reminder::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  top: -70px;
  height: 71px;
  background: var(--mist-blue);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M0 34C112 43 225 53 334 50C455 47 548 30 653 25C773 20 889 27 1000 34V72H0Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) center / 100% 100% no-repeat;
  mask: var(--wave) center / 100% 100% no-repeat;
  pointer-events: none;
}
.reminder-inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: 48% 1fr;
  gap: clamp(45px, 5vw, 78px);
  align-items: center;
}
.reminder-media { height: clamp(390px, 34vw, 505px); overflow: hidden; clip-path: url(#about-flowers-shape); background: var(--warm-cream); transform: translateY(78px); }
.reminder-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; transition: transform 350ms ease; }
.reminder-copy { max-width: 535px; padding: 20px 42px 35px 0; }
.reminder-copy h2 { margin: 16px 0 19px; font-size: clamp(45px, 4.25vw, 62px); line-height: .96; letter-spacing: -.04em; }
.reminder-copy > p:not(.eyebrow) { margin-bottom: 24px; font-size: clamp(14px, 1.12vw, 17px); line-height: 1.48; }
.reminder-button { min-width: 160px; color: var(--deep-teal); border-color: var(--deep-teal); background: transparent; }

/* The complete shared footer sits above the final image and its wave. */
.about-footer { z-index: 3; }

@media (hover: hover) {
  .about-hero-media:hover img, .story-media:hover img, .reminder-media:hover img { transform: scale(1.015); }
  .reminder-button:hover { color: var(--soft-white); background: var(--deep-teal); }
}

@media (min-width: 768px) and (max-width: 1050px) {
  .about-hero { min-height: 540px; }
  .about-hero-copy { width: 46%; padding-right: 2%; }
  .about-hero-copy::before { right: -22%; border-radius: 0 90px 115px 0 / 0 72px 90px 0; }
  .about-hero-media { right: 0; left: 20%; border-top-left-radius: 30% 23%; }
  .about-hero::after { bottom: -103px; height: 166px; }
  .about-hero h1 { font-size: clamp(48px, 6vw, 61px); }
  .about-hero-copy > .about-intro { font-size: 17px; }
  .about-hero-copy > p:not(.eyebrow), .story-copy p, .reminder-copy > p:not(.eyebrow) { font-size: 14px; }
  .story-inner, .reminder-inner { gap: 38px; }
  .story-media { height: 590px; }
  .story-copy { padding-right: 30px; }
  .story-copy h2, .reminder-copy h2 { font-size: 45px; }
}

@media (max-width: 767px) {
  .about-hero::before, .about-hero::after, .about-hero-copy::before { display: none; }
  .about-hero { display: flex; min-height: 0; flex-direction: column; }
  .about-hero-inner { min-height: 0; padding-block: 40px 35px; }
  .about-hero-copy { width: 100%; padding: 0; }
  .about-hero h1 { margin-block: 17px 14px; font-size: clamp(44px, 12.5vw, 66px); }
  .about-hero-copy > p:not(.eyebrow) { max-width: 500px; font-size: 15px; }
  .about-hero-copy > .about-intro { font-size: 18px; }
  .about-hero-media { position: relative; inset: auto; width: calc(100% - 18px); aspect-ratio: 1; align-self: flex-end; border-radius: 120px 0 0 0; -webkit-mask-image: none; mask-image: none; }
  .about-hero-media img { position: absolute; inset: 0; object-position: 50% 27%; }
  .hero-note { font-size: 28px; }

  .story-inner { display: flex; width: 100%; flex-direction: column; gap: 32px; }
  .story-media { width: 93%; height: auto; aspect-ratio: .78; margin-top: -12px; }
  .story-copy { width: calc(100% - 40px); max-width: none; padding: 0; }
  .story-copy h2 { font-size: clamp(42px, 11vw, 57px); }
  .story-copy p { font-size: 15px; }

  .facts { width: calc(100% - 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; padding-bottom: 55px; }
  .fact { min-height: 108px; border-bottom: 1px solid rgb(33 75 83 / .09); }
  .fact:nth-child(odd)::before { display: none; }
  .fact:last-child { grid-column: 1 / -1; }

  .about-reminder { padding: 18px 0 70px; }
  .about-reminder::before { top: -39px; height: 40px; }
  .reminder-inner { display: flex; width: 100%; flex-direction: column; gap: 34px; }
  .reminder-media { width: 93%; height: auto; aspect-ratio: 1.15; align-self: flex-start; transform: none; }
  .reminder-copy { width: calc(100% - 40px); max-width: none; padding: 0; }
  .reminder-copy h2 { font-size: clamp(42px, 11vw, 58px); }
  .reminder-copy > p:not(.eyebrow) { font-size: 15px; }

}

@media (max-width: 390px) {
  .about-hero h1 { font-size: 43px; }
  .story-copy, .facts, .reminder-copy { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-media img, .story-media img, .reminder-media img { transition: none; }
}

/* Preserve the mockup proportions when browser zoom-out produces an
   ultra-wide viewport; viewport-sized photos no longer outgrow the copy. */
@media (min-width: 1921px) {
  html:has(.about-page) { background: var(--paper); }
  .about-page { width: 1920px; margin-inline: auto; }
}