/* ==========================================================================
   Chapman Family Foundation — About page styles
   Builds on the tokens defined in style.css (--navy, --teal, --gold, --cream…)

   Desktop (>1100px) is a 1:1 translation of the "About" frame in Figma
   (CFF Site_Update_2026, 1728px wide). Every element sits at its Figma
   coordinates, expressed in --u (1/1728 of <main>'s width, scrollbar excluded),
   so the page scales as one piece and text wraps exactly as designed.
   Below 1100px it falls back to a stacked, fluid layout.
   ========================================================================== */

:root {
  --about-teal: #176278;     /* Mission/Vision panel + footer teal in Figma */
  --about-gold: rgba(241, 162, 59, 0.96);
}

.about-page {
  container-type: inline-size;
  --u: calc(100cqw / 1728);  /* 1 Figma px */
}

/* ---- Banner placeholder ------------------------------------------------------
   Empty block holding the banner's space (and a dark backdrop for the fixed
   header) until the banner is built. Hero image: images/about-hero.png
   (exported with its 30% fill opacity baked in). ----------------------------- */
.page-hero {
  background: var(--black);
  min-height: 26rem;
}

/* ---- Shared type ---------------------------------------------------------------
   Headings: Noto Serif JP Black 64 / 114.7% / -3%.  Body: Inter Regular 28. ---- */
.split__heading {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.147;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 2.25rem;
}

/* Underline rule (a pseudo-element so it can be placed exactly). */
.split__heading::after {
  content: "";
  display: block;
  height: 2px;
  background: currentColor;
  margin-top: 0.9rem;
}

.split__heading--gold {
  color: var(--about-gold);
}

.split__heading--cream {
  color: var(--cream);
}

.split__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 3.4vw, 1.3rem);
  line-height: normal;
  text-align: left;
  color: var(--navy);
}

/* ---- Sections (stacked / fluid base) ---------------------------------------------- */
.story,
.approach {
  background: var(--cream);
  color: var(--navy);
}

.story__copy,
.approach__copy {
  padding: 2.5rem var(--container-pad);
}

.story__photo img,
.approach__photo img {
  width: 100%;
  height: clamp(260px, 70vw, 420px);
  object-fit: cover;
}

/* Show the whole group photo when stacked so heads aren't cropped. */
.approach__photo img {
  height: auto;
  object-position: center top;
}

.story__photo {
  order: -1;
}

.story {
  display: flex;
  flex-direction: column;
}

/* The Stories page (vidya.css) also uses .story; undo its grid, indent,
   border and absolutely-positioned image so the About layout stays full width. */
.about-page .story {
  margin: 0;
  padding-block: 0;
  gap: 0;
  border-bottom: 0;
}

@media (max-width: 1100px) {
  .about-page .story__copy {
    padding-right: var(--container-pad);
  }

  .about-page .story__photo {
    position: static;
    min-height: 0;
    align-self: auto;
  }

  .about-page .story__photo img {
    position: static;
    inset: auto;
    display: block;
  }
}

.statement__panel {
  padding: 2.5rem var(--container-pad);
}

.statement__panel--navy {
  background: var(--navy);
}

.statement__panel--teal {
  background: var(--about-teal);
}

.statement__panel .split__text {
  color: var(--cream);
}

.founder {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  color: var(--navy);
}

.founder__copy {
  position: relative;
  z-index: 2;
  padding: 2.5rem var(--container-pad) 1.5rem;
}

.founder__quote {
  position: relative;
}

.founder__quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 5rem;
  line-height: 0.7;
  color: #17627b;
}

.founder__quote blockquote {
  margin: 0;
}

.founder__quote p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  line-height: normal;
  margin-bottom: 1rem;
}

.founder__quote footer {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  line-height: 1.147;
  letter-spacing: -0.03em;
}

.founder__shape {
  position: absolute;
  left: 50%;
  bottom: -15%;
  width: min(90vw, 30rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--about-gold);
  z-index: 0;
}

.founder__photo {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  margin: 0 auto;
}

.founder__photo img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Desktop — Figma coordinates (1 unit = 1 Figma px at 1728px wide)
   ========================================================================== */
@media (min-width: 1101px) {
  .page-hero {
    min-height: calc(754 * var(--u));
  }

  /* Heading rule: absolutely placed, 100px below the heading's top. */
  .split__heading {
    font-size: calc(64 * var(--u));
    white-space: nowrap;
    margin: 0;
  }

  .split__heading::after {
    position: absolute;
    top: calc(100 * var(--u));
    left: 0;
    width: calc(624 * var(--u));
    height: calc(2 * var(--u));
    margin: 0;
  }

  .split__text {
    position: absolute;
    font-size: calc(28 * var(--u));
  }

  /* The copy wrappers drop out of layout so their children can be positioned
     against the section itself. */
  .story__copy,
  .approach__copy,
  .founder__copy,
  .founder__quote,
  .founder__quote blockquote {
    display: contents;
  }

  .story,
  .approach,
  .statement__panel,
  .founder {
    position: relative;
  }

  /* -- Our Story: 551 tall; photo 698x551 at x1034 (4px clipped by the frame) -- */
  .story {
    display: block;
    height: calc(551 * var(--u));
  }

  .story .split__heading {
    position: absolute;
    left: calc(141 * var(--u));
    top: calc(84 * var(--u));
  }

  .story .split__text {
    left: calc(141 * var(--u));
    top: calc(213 * var(--u));
    width: calc(719 * var(--u));
    text-align: justify;
  }

  .story__photo {
    position: absolute;
    left: calc(1034 * var(--u));
    top: 0;
    width: calc(694 * var(--u));
    height: 100%;
    overflow: hidden;
  }

  .story__photo img {
    width: calc(698 * var(--u));
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  /* -- Our Mission / Our Vision: 474 tall, split at x877 -- */
  .statement {
    display: grid;
    grid-template-columns: calc(877 * var(--u)) calc(851 * var(--u));
    height: calc(474 * var(--u));
  }

  .statement__panel {
    padding: 0;
  }

  .statement__panel .split__heading {
    position: absolute;
    left: calc(93 * var(--u));
    top: calc(115 * var(--u));
  }

  .statement__panel .split__heading::after {
    left: calc(10 * var(--u));
  }

  .statement__panel--navy .split__heading::after {
    width: calc(706 * var(--u));
  }

  .statement__panel .split__text {
    left: calc(93 * var(--u));
    top: calc(244 * var(--u));
  }

  .statement__panel--navy .split__text {
    width: calc(729 * var(--u));
  }

  .statement__panel--teal .split__text {
    width: calc(653 * var(--u));
  }

  /* -- Our Approach: 567 tall; photo 698x567 at x0 -- */
  .approach {
    display: block;
    height: calc(567 * var(--u));
  }

  .approach__photo {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(698 * var(--u));
    height: 100%;
    overflow: hidden;
  }

  .approach__photo img {
    height: 100%;
  }

  .approach .split__heading {
    position: absolute;
    left: calc(850 * var(--u));
    top: calc(115 * var(--u));
  }

  .approach .split__text {
    left: calc(850 * var(--u));
    top: calc(244 * var(--u));
    width: calc(737 * var(--u));
    text-align: justify;
  }

  /* -- A Note From The Founder: 935 tall. The portrait starts 119px above the
        section (over Our Approach), so only the top edge is left unclipped. -- */
  .founder {
    display: block;
    height: calc(935 * var(--u));
    overflow: visible;
    clip-path: inset(calc(-119 * var(--u)) 0 0 0);
  }

  .founder .split__heading {
    position: absolute;
    left: calc(171 * var(--u));
    top: calc(174 * var(--u));
    z-index: 2;
  }

  .founder .split__heading::after {
    top: calc(113 * var(--u));
    left: calc(5 * var(--u));
    width: calc(801 * var(--u));
    height: calc(1 * var(--u));
  }

  .founder__quote-mark {
    position: absolute;
    left: calc(171 * var(--u));
    top: calc(312 * var(--u));
    z-index: 2;
    font-size: calc(128 * var(--u));
    line-height: 1.147;
    letter-spacing: -0.03em;
  }

  .founder__quote p {
    position: absolute;
    left: calc(255 * var(--u));
    top: calc(334 * var(--u));
    width: calc(692 * var(--u));
    z-index: 2;
    margin: 0;
    font-size: calc(32 * var(--u));
    text-align: justify;
  }

  .founder__quote footer {
    position: absolute;
    left: calc(231 * var(--u));
    top: calc(697 * var(--u));
    z-index: 2;
    font-size: calc(32 * var(--u));
    white-space: nowrap;
  }

  .founder__shape {
    left: calc(1040 * var(--u));
    top: calc(115 * var(--u));
    bottom: auto;
    width: calc(868 * var(--u));
    transform: none;
  }

  .founder__photo {
    position: absolute;
    left: calc(943 * var(--u));
    top: calc(-119 * var(--u));
    width: calc(785 * var(--u));
    margin: 0;
  }
}

/* ==========================================================================
   Gallery page — album cards
   Desktop (>1100px) is a 1:1 translation of the "Gallery" frame in Figma
   (1728px wide): 1 --u = 1 Figma px, with Y measured from the bottom of the
   banner (frame y754). Below 1100px the cards stack and scale fluidly.
   ========================================================================== */
.gallery-page {
  container-type: inline-size;
  --u: calc(100cqw / 1728);
  background: var(--white);
  padding: 2.5rem var(--container-pad) 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 16rem;
  padding: 2rem 1rem;
  overflow: hidden;
  background: var(--white);
  text-align: center;
}

.gallery-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--about-teal);
  opacity: 0.8;
}

.gallery-card__title {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  line-height: 1.147;
  letter-spacing: -0.03em;
  color: #fff;
}

.gallery-card__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.75rem;
  height: 4.25rem;
  border: 4px solid var(--navy);
  border-radius: 10px;
  background: var(--about-teal);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

@media (min-width: 1101px) {
  .gallery-page {
    display: block;
    position: relative;
    /* cqw would resolve against the viewport on the container itself, so the
       height comes from the aspect ratio of the Figma frame (1728 x 3695). */
    aspect-ratio: 1728 / 3695;
    padding: 0;
    overflow: hidden;
  }

  .gallery-card {
    display: contents;
  }

  .gallery-card__img,
  .gallery-card__overlay,
  .gallery-card__title,
  .gallery-card__btn {
    position: absolute;
  }

  .gallery-card__img {
    inset: auto;
    left: calc(var(--ix) * var(--u));
    top: calc(var(--iy) * var(--u));
    width: calc(var(--iw) * var(--u));
    height: calc(var(--ih) * var(--u));
    object-fit: fill;
  }

  .gallery-card__overlay {
    inset: auto;
    left: calc(var(--ox) * var(--u));
    top: calc(var(--oy) * var(--u));
    width: calc(1492 * var(--u));
    height: calc(740 * var(--u));
  }

  .gallery-card__title {
    left: calc(var(--tx) * var(--u));
    top: calc(var(--ty) * var(--u));
    width: calc(1231 * var(--u));
    font-size: calc(64 * var(--u));
    white-space: nowrap;
  }

  .gallery-card__btn {
    left: calc(var(--bx) * var(--u));
    top: calc(var(--by) * var(--u));
    width: calc(188 * var(--u));
    height: calc(68 * var(--u));
    border-width: calc(4 * var(--u));
    border-radius: calc(10 * var(--u));
    font-size: calc(20 * var(--u));
  }

  /* Per-card Figma coordinates (x as in the frame, y minus 754). */
  .gallery-card--santa {
    --ix: 55;  --iy: 153;  --iw: 1618; --ih: 751;
    --ox: 125; --oy: 164;
    --tx: 256; --ty: 474;
    --bx: 778; --by: 579;
  }

  .gallery-card--ai {
    --ix: 0;   --iy: 1003; --iw: 1728; --ih: 740;
    --ox: 119; --oy: 1003;
    --tx: 250; --ty: 1313;
    --bx: 772; --by: 1418;
  }

  .gallery-card--msu {
    --ix: 125; --iy: 1841; --iw: 1485; --ih: 740;
    --ox: 118; --oy: 1841;
    --tx: 249; --ty: 2151;
    --bx: 771; --by: 2256;
  }

  .gallery-card--community {
    --ix: 108; --iy: 2658; --iw: 1481; --ih: 740;
    --ox: 107; --oy: 2658;
    --tx: 249; --ty: 2993;
    --bx: 771; --by: 3098;
  }
}

/* ==========================================================================
   Individual gallery page (Breakfast with Santa)
   Desktop (>1100px) is a 1:1 translation of the "Individual Gallery Page"
   frame in Figma (1728px wide): 1 --u = 1 Figma px, with Y measured from the
   bottom of the banner (frame y754). Photos get their x/y/w/h from inline
   custom properties (--x --y --w --h). Below 1100px everything stacks.
   ========================================================================== */
.ig-page {
  container-type: inline-size;
  --u: calc(100cqw / 1728);
  background: var(--white);
  padding: 3rem var(--container-pad) 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ig-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.147;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--about-teal);
}

.ig-intro,
.ig-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 3.4vw, 1.3rem);
  line-height: normal;
  color: var(--navy);
}

.ig-intro {
  text-align: center;
}

.ig-intro strong {
  font-weight: 700;
}

.ig-caption {
  color: var(--about-teal);
}

.ig-photo {
  display: block;
  width: 100%;
  height: auto;
}

.ig-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem calc(-1 * var(--container-pad)) 0;
  padding: 2.5rem var(--container-pad) 0;
  background: var(--cream);
  overflow: hidden;
}

.ig-cta__rule {
  display: none;
}

.ig-cta__heading {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.147;
  letter-spacing: -0.03em;
  color: var(--about-teal);
}

.ig-cta__text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.3rem);
  line-height: normal;
  color: var(--navy);
}

.ig-cta__img {
  display: block;
  width: min(100%, 26rem);
  height: auto;
  align-self: center;
}

.ig-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.625rem;
  max-width: 100%;
  height: 4.25rem;
  border: 4px solid var(--navy);
  border-radius: 10px;
  background: var(--about-teal);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

@media (min-width: 1101px) {
  .ig-page {
    display: block;
    position: relative;
    /* cqw would resolve against the viewport on the container itself, so the
       height comes from the aspect ratio of the Figma frame (1728 x 5364). */
    aspect-ratio: 1728 / 5364;
    padding: 0;
    overflow: hidden;
  }

  .ig-title,
  .ig-intro,
  .ig-caption,
  .ig-photo,
  .ig-cta,
  .ig-cta__rule,
  .ig-cta__heading,
  .ig-cta__text,
  .ig-cta__img,
  .ig-btn {
    position: absolute;
  }

  .ig-title {
    left: calc(248 * var(--u));
    top: calc(185 * var(--u));
    width: calc(1231 * var(--u));
    font-size: calc(64 * var(--u));
    white-space: nowrap;
  }

  .ig-intro {
    left: calc(393 * var(--u));
    top: calc(323 * var(--u));
    width: calc(951 * var(--u));
    font-size: calc(28 * var(--u));
  }

  .ig-caption {
    left: calc(118 * var(--u));
    top: calc(1951 * var(--u));
    width: calc(1209 * var(--u));
    font-size: calc(28 * var(--u));
  }

  .ig-photo {
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
  }

  /* Cream band: 504 tall, runs to the footer. The cutout photo rises above it. */
  .ig-cta {
    display: block;
    left: 0;
    top: calc(4860 * var(--u));
    width: 100%;
    height: calc(504 * var(--u));
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .ig-cta__rule {
    display: block;
    /* A 1px hairline in Figma: keep it exactly one device-independent pixel wide
       and snapped to the pixel grid so it never smears into a 2px line. */
    left: calc(122 * var(--u));
    left: round(down, calc(122 * var(--u)), 1px);
    top: calc(128 * var(--u));      /* 4988 - 4860 */
    height: calc(282 * var(--u));
    width: 1px;
    background: var(--about-teal);
  }

  .ig-cta__heading {
    left: calc(160 * var(--u));
    top: calc(165 * var(--u));      /* 5025 - 4860 */
    width: calc(713 * var(--u));
    font-size: calc(64 * var(--u));
    white-space: nowrap;
  }

  .ig-cta__text {
    left: calc(160 * var(--u));
    top: calc(252 * var(--u));      /* 5112 - 4860 */
    width: calc(1083 * var(--u));
    font-size: calc(28 * var(--u));
  }

  .ig-cta .ig-btn {
    left: calc(160 * var(--u));
    top: calc(324 * var(--u));      /* 5184 - 4860 */
    width: calc(314 * var(--u));
    height: calc(68 * var(--u));
    border-width: calc(4 * var(--u));
    border-radius: calc(10 * var(--u));
    font-size: calc(20 * var(--u));
  }

  .ig-cta__img {
    left: calc(671 * var(--u));
    top: calc(-220 * var(--u));     /* 4640 - 4860 */
    width: calc(1057 * var(--u));
    height: calc(724 * var(--u));
    max-width: none;
  }
}

/* ---- 404 page ---- */
.not-found {
  display: flex;
  justify-content: center;
  padding: clamp(4rem, 9vw, 8rem) var(--container-pad);
  background: var(--cream);
  text-align: center;
}

.not-found__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 44rem;
}

.not-found__code {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
}

.not-found__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2rem, 3.7vw, 3.5rem);
  line-height: 1.147;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.not-found__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--navy);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}