/* ==========================================================================
   About Us Page — La Habra Historical Museum
   Source of truth: Design/about-us.html. Nav + footer live in site-chrome.css
   (shared with Contact/Legal); this file is the hero/mission/then-now/
   timeline/archive-teaser sections unique to About. Scoped under
   .about-page so it can't collide with tokens.css/base.css's own globals.
   Enqueued only on template-about.php.
   ========================================================================== */

.about-page {
  --display: var(--font-display);
  --heritage: var(--font-heritage);
  --text: var(--font-text);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

.about-page ::selection { background: var(--sage); color: var(--cream); }
.about-page section { position: relative; }

/* ---------- placeholder photo utility ---------- */
.about-page .ph-photo { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--sage-tint), var(--harbor-tint)); display: flex; align-items: center; justify-content: center; }
.about-page .ph-photo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(30, 36, 32, .05) 0 10px, transparent 10px 20px); }
.about-page .ph-photo span { position: relative; z-index: 1; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--deep-sage); text-align: center; padding: 0 16px; max-width: 85%; }
.about-page .ph-photo .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 16px 12px; background: linear-gradient(180deg, transparent, rgba(30, 36, 32, .72) 60%); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-align: left; }
.about-page .ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: relative; z-index: 1; }
.about-page .ph-r1 { border-radius: 40px 12px 12px 12px; }
.about-page .ph-r2 { border-radius: 12px 40px 12px 12px; }
.about-page .ph-r3 { border-radius: 12px 12px 12px 40px; }
.about-page .ph-r4 { border-radius: 12px 12px 40px 12px; }

/* ---------- wave dividers ---------- */
.about-page .wave { display: block; width: 100%; height: 44px; margin-bottom: -2px; }

/* ---------- section shared ---------- */
.about-page .pad { padding: clamp(56px, 7.5vw, 100px) clamp(22px, 6vw, 72px); }
.about-page .bg-cream { background: var(--cream); }
.about-page .bg-tint { background: var(--sage-tint); }
.about-page .bg-deep { background: var(--deep-sage); color: var(--cream); }
.about-page .label { font-family: var(--text); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; display: block; color: var(--deep-sage); }
.about-page .bg-deep .label { color: #C9DDB4; }
.about-page h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -.02em; margin-bottom: 16px; }
.about-page h1 em { font-family: var(--heritage); font-style: italic; font-weight: 400; color: var(--meadow); letter-spacing: 0; }
.about-page h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -.015em; margin-bottom: 16px; }
.about-page h2 em { font-family: var(--heritage); font-style: italic; font-weight: 400; }
.about-page .eyebrow { font-family: var(--heritage); font-style: italic; font-size: clamp(17px, 1.8vw, 20px); color: var(--harbor); margin-bottom: 12px; }
.about-page .bg-deep .eyebrow { color: #C9DDB4; }
.about-page .section-inner { max-width: 1150px; margin: 0 auto; }
.about-page .copy { font-size: 17.5px; line-height: 1.7; color: #3E4740; margin-bottom: 16px; }
.about-page .bg-deep .copy { color: #DCE8DC; }

/* ---------- pill buttons ---------- */
.about-page .pill { display: inline-block; font-family: var(--text); font-weight: 700; font-size: 15.5px; padding: 13px 26px; border-radius: 999px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.about-page .pill.p { background: var(--deep-sage); color: var(--cream); box-shadow: 0 14px 28px -14px rgba(79, 107, 61, .6); }
.about-page .pill.p:hover { background: #3F5730; transform: translateY(-2px); }

/* ---------- about hero (duotone full-bleed photo) ---------- */
.about-page .about-hero { position: relative; min-height: 52vh; min-height: min(520px, 60svh); display: flex; align-items: flex-end; overflow: hidden; }
.about-page .about-hero .duotone { position: absolute; inset: 0; }
/* Client feedback, staging review: default center-crop cut off the top of
   the leftmost woman's head. Every subject in this photo is in the top
   third of the frame (walnut trays fill the bottom), so anchoring the
   crop to the top keeps everyone's head intact and only trims trays. */
.about-page .about-hero .duotone img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.05); display: block; }
.about-page .about-hero .duotone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--harbor) 0%, var(--deep-sage) 100%); mix-blend-mode: color; opacity: .92; }
.about-page .about-hero .duotone::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 20, 14, .8) 0%, rgba(15, 20, 14, .2) 60%, rgba(15, 20, 14, .05) 100%); z-index: 1; }
.about-page .about-hero-inner { position: relative; z-index: 2; padding: clamp(36px, 6vw, 64px) clamp(22px, 6vw, 72px) clamp(44px, 6.5vw, 72px); max-width: 900px; }
.about-page .about-hero .eyebrow { color: #D9E6CE; }
.about-page .about-hero h1 { color: #fff; margin-bottom: 0; }

/* ---------- mission & history ---------- */
.about-page .mission-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
@media (max-width: 760px) { .about-page .mission-grid { grid-template-columns: 1fr; } .about-page .mission-grid .founder-arch { order: -1; max-width: 320px; margin: 0 auto; position: static; } }
.about-page .founder-arch { border-radius: 999px 999px 34px 34px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 26px 54px -30px rgba(20, 26, 18, .4); position: sticky; top: 110px; }
.about-page .founder-arch img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- then & now ---------- */
.about-page .then-now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-page .then-now-grid .ph-photo { height: 260px; }
.about-page .then-now-grid .ph-photo span { font-size: 13px; }
@media (max-width: 640px) { .about-page .then-now-grid { grid-template-columns: 1fr; } }

/* ---------- heritage timeline ---------- */
.about-page .timeline { position: relative; display: flex; justify-content: center; gap: clamp(26px, 6vw, 72px); flex-wrap: wrap; margin-top: clamp(68px, 9vw, 92px); }
.about-page .timeline::before { content: ""; position: absolute; top: -30px; left: 6%; right: 6%; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0,7 C15,0 15,14 30,7 C45,0 45,14 60,7 C75,0 75,14 90,7 C105,0 105,14 120,7' fill='none' stroke='%236B8C53' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 110px 14px; opacity: .6; }
@media (max-width: 640px) { .about-page .timeline::before { display: none; } }
.about-page .dot { position: relative; max-width: 200px; }
.about-page .dot::before { content: ""; position: absolute; top: -38px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--sage); border: 4px solid var(--cream); box-shadow: 0 4px 10px -2px rgba(30, 36, 32, .35); z-index: 2; }
.about-page .dot:nth-child(2)::before { background: var(--harbor); }
.about-page .dot .yr { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); color: var(--sage); }
.about-page .dot .yr.blue { color: var(--harbor); }
.about-page .dot p { font-size: 16.5px; line-height: 1.55; color: #3E4740; margin-top: 4px; }

/* ---------- gentle float (mosaic tiles) ---------- */
.about-page .floaty { animation: about-floatbob 6.5s ease-in-out infinite; }
.about-page .floaty:nth-child(2) { animation-delay: .3s; }
.about-page .floaty:nth-child(3) { animation-delay: .9s; }
.about-page .floaty:nth-child(4) { animation-delay: 1.4s; }
.about-page .floaty:nth-child(5) { animation-delay: .6s; }
@keyframes about-floatbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- explore the archive (mosaic wall, matching the homepage pattern) ---------- */
.about-page .mosaic { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 16px; margin-top: 28px; }
.about-page .mosaic a { display: block; text-decoration: none; color: inherit; }
.about-page .mosaic .tile-video { grid-row: 1/3; position: relative; }
.about-page .mosaic .tile-video .cap { font-size: 13.5px; padding: 26px 16px 12px; }
.about-page .mosaic .ph-photo { height: 100%; }
@media (max-width: 760px) { .about-page .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); } .about-page .mosaic .tile-video { grid-column: 1/3; grid-row: auto; height: 260px; } }

/* ---------- stay connected / social row ---------- */
.about-page .notify-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.about-page .social-row { text-align: center; padding: 36px 16px 40px; }
.about-page .social-row .share { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.about-page .social-row .share a { width: 44px; height: 44px; border-radius: 50%; background: var(--sage-tint); display: flex; align-items: center; justify-content: center; color: var(--deep-sage); transition: background .22s ease, color .22s ease, transform .22s ease; box-shadow: 0 8px 18px -12px rgba(30, 36, 32, .35); }
.about-page .social-row .share a:hover { background: var(--sage); color: var(--cream); transform: translateY(-3px); }
.about-page .social-row .share svg { width: 19px; height: 19px; }

/* ---------- mosaic lightbox (mirrors home-page.css / gallery-page.css;
   duplicated since each page loads its own scoped stylesheet) ---------- */
.about-page .mosaic button[data-idx] { border: 0; margin: 0; padding: 0; background: none; font: inherit; text-align: inherit; color: inherit; cursor: pointer; display: block; width: 100%; }
.about-page .lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); }
.about-page .lightbox.is-open { display: flex; }
.about-page .lightbox-scrim { position: absolute; inset: 0; background: rgba(20, 26, 18, .88); opacity: 0; transition: opacity .3s ease; }
.about-page .lightbox.is-open .lightbox-scrim { opacity: 1; }
.about-page .lightbox-body { position: relative; z-index: 2; max-width: min(1000px, 92vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--cream); border-radius: 6px; overflow: hidden; transform: scale(.94); opacity: 0; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .32s ease; }
.about-page .lightbox.is-open .lightbox-body { transform: scale(1); opacity: 1; }
.about-page .lightbox-frame { position: relative; background: #0f130f; display: flex; align-items: center; justify-content: center; max-height: 66vh; }
.about-page .lightbox-frame img { max-width: 100%; max-height: 66vh; width: auto; height: auto; object-fit: contain; display: block; }
.about-page .lightbox-caption { padding: 18px 26px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.about-page .lightbox-caption h3 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0; }
.about-page .lightbox-caption p { font-size: 15px; color: #4a5650; line-height: 1.55; margin-top: 8px; }
.about-page .lightbox-close, .about-page .lightbox-nav { position: absolute; background: rgba(241, 236, 221, .94); border: none; border-radius: 999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); transition: background .2s, transform .2s; }
.about-page .lightbox-close:hover, .about-page .lightbox-nav:hover { background: #fff; transform: scale(1.06); }
.about-page .lightbox-close { top: 14px; right: 14px; z-index: 3; }
.about-page .lightbox-nav { top: 50%; transform: translateY(-50%); z-index: 3; }
.about-page .lightbox-nav.prev { left: 14px; }
.about-page .lightbox-nav.next { right: 14px; }
.about-page .lightbox-nav svg, .about-page .lightbox-close svg { width: 20px; height: 20px; }
.about-page .lightbox-count { position: absolute; left: 14px; bottom: 14px; z-index: 3; background: rgba(30, 36, 32, .55); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .about-page .lightbox-body, .about-page .lightbox-scrim { transition: none; } }
@media (max-width: 640px) { .about-page .lightbox-nav { width: 38px; height: 38px; } .about-page .lightbox-close { width: 38px; height: 38px; } }