/* TOZ About page styles — page-specific (shared header/nav/footer/mobile-menu
   and :root tokens live in /css/shared.css) */


/* =============================================================================
   SHARED — Buttons / typography utilities
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 36px;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring),
              border-color 0.3s var(--ease-spring),
              color 0.3s var(--ease-spring);
}
.btn--ghost {
  background: rgba(28, 36, 75, 0.4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--toz-white);
  border-color: rgba(229, 228, 235, 0.6);
}
.btn--ghost:hover {
  color: var(--toz-teal-bright);
  border-color: var(--toz-teal-bright);
  transform: translateY(-1px);
}
/* On-light variant — same ghost treatment (transparent bg + bordered) but with
   indigo text/border for use on white section backgrounds. Hover previously
   used --toz-teal, documented here as passing WCAG AA Large (3:1) on white
   — that stopped being true once --toz-white (the section background this
   sits on) was changed from #F6F7FF to the darker #E5E4EB (2026-09-07):
   --toz-teal now measures only 2.58:1 there. --toz-teal-on-light passes
   (~4.98:1) and is what the same fix uses elsewhere (e.g. .prose a in
   shared.css). */
.btn--ghost--on-light {
  background: rgba(229, 228, 235, 0.50);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--toz-indigo);
  border-color: var(--toz-indigo);
}
.btn--ghost--on-light:hover {
  color: var(--toz-teal-on-light);
  border-color: var(--toz-teal-on-light);
  transform: translateY(-1px);
}
.btn:focus-visible {
  outline: 2px solid var(--toz-teal-bright);
  outline-offset: 4px;
}

/* Section heading shared — common typography across the 5 section H2s and the
   Person-Centred sub-block subtitle. Mirrors the homepage's .section-title
   shared rule pattern. Subtitle previously used Karla 0.06em; aligned to
   Poppins 0.04em here for consistency across H2s and subtitles. */
.about-intro__title,
.about-history__title,
.strategy__title,
.person-centred__title,
.principles__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* =============================================================================
   1. HERO
   ============================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 96px;
  --hero-bg: url('/images/EC_Diamonds.webp');
  background: var(--hero-bg) center / cover no-repeat;
  color: var(--toz-white);
  text-align: center;
}
@media (max-width: 768px) {
  .hero { --hero-bg: url('/images/EC_Diamonds-mobile.webp'); }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(28, 36, 75, 0.50) 0%,
    rgba(20, 20, 54, 0.30) 35%,
    rgba(9, 6, 18, 0.65) 100%);
}
.hero__inner { max-width: 960px; }
.hero__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  hyphens: none;
}

/* =============================================================================
   2. DEFINITION — standalone Gwich'in phrase (white bg, centred, generous space)
   ============================================================================= */

.about-intro {
  background: var(--toz-white);
  padding: 160px 24px;
  color: var(--toz-indigo);
}
.about-intro__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
/* The definition as a single elevated moment — larger, lighter Poppins so it
   reads as a quiet statement rather than body prose. */
.about-intro__definition {
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.6;
  color: var(--toz-indigo);
  margin: 0;
  text-wrap: balance;
}
/* Inline lead-in for the TOZ name — Karla mirrors the hero wordmark, marking
   this as a name being defined. */
.about-intro__name {
  font-family: 'Karla', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.25em;
  letter-spacing: 0.03em;
}
/* Inline translation/quote — Karla italic matches the homepage participant
   pull-quote treatment, signalling this phrase as a direct gift/quote. */
.about-intro__translation {
  display: block;
  margin-top: 32px;
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.25em;
  letter-spacing: 0.005em;
  /* --toz-teal (used elsewhere on dark backgrounds) measures only 2.58:1
     against this section's light background, short even of the large-text
     3:1 minimum — --toz-teal-on-light exists for exactly this on-light-bg
     case (see .prose a in shared.css) and measures ~4.98:1 here. */
  color: var(--toz-teal-on-light);
}

/* =============================================================================
   3. OUR STORY (History & Evolution) — indigo bg, 3 zigzag two-column blocks
   ============================================================================= */

.about-history {
  background: var(--toz-indigo-alt);
  padding: 140px 24px;
  color: var(--toz-white);
}
.about-history__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.about-history__head {
  text-align: center;
  margin: 0 0 80px;
}
.about-history__title {
  color: var(--toz-white);
  margin: 0;
  text-align: center;
}
.about-history__blocks {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.milestone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.milestone__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.milestone__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--toz-white);
  margin: 0;
  text-wrap: pretty;
}
.milestone__image {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(229, 228, 235, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.milestone__image::before {
  content: 'Image';
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--toz-white);
  opacity: 0.55;
}
.milestone__image:has(img)::before { content: none; }
.milestone__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================================================
   4. STRATEGIC DIRECTION — green-dark bg, 5 cards in 3-up flex
   ============================================================================= */

.strategy {
  background: var(--toz-green-dark);
  color: var(--toz-white);
  padding: 140px 24px;
}
.strategy__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.strategy__header {
  text-align: center;
  margin: 0 auto 88px;
  max-width: 720px;
}
.strategy__title {
  color: var(--toz-white);
  margin: 0;
}
.strategy__list {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}
/* 3-up desktop; trailing 2 items wrap to row 2 and centre via justify-content */
.strategy-card {
  flex: 0 0 calc((100% - 96px) / 3);
  min-width: 0;
  text-align: center;
  padding: 0 8px;
}
.strategy-card__icon {
  width: 64px; height: 64px;
  margin: 0 auto 28px;
  color: var(--toz-teal-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}
.strategy-card__icon svg { width: 100%; height: 100%; display: block; stroke-width: 1; }
.strategy-card__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0 0 16px;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}
.strategy-card__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--toz-white);
  opacity: 0.85;
  margin: 0;
}

/* =============================================================================
   5. PERSON-CENTRED FRAMEWORK — sculpture bg (85% white wash), indigo text,
      heading + 2 intro paragraphs + diagram
   ============================================================================= */

.person-centred {
  position: relative;
  isolation: isolate;
  --personcentred-bg: url('/images/PXL_20260114_PORTRAIT_ORIGINAL_background.webp');
  background: var(--personcentred-bg) center / cover no-repeat var(--toz-white);
  padding: 140px 24px;
  color: var(--toz-indigo);
}
@media (max-width: 768px) {
  .person-centred { --personcentred-bg: url('/images/PXL_20260114_PORTRAIT_ORIGINAL_background-mobile.webp'); }
}
/* Heavier white wash than V1 (85% vs 72%) — sculpture reads as a faint texture
   so the diagram and body copy stay dominant. */
.person-centred::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(229, 228, 235, 0.85);
  pointer-events: none;
}
.person-centred__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
/* +100 weight vs the shared section-title rule (100 -> 200) — compensates for
   the textured background reducing perceived weight. */
.person-centred__title {
  color: var(--toz-indigo);
  font-weight: 200;
  margin: 0 0 40px;
  text-align: center;
}
.person-centred__intro {
  max-width: 760px;
  margin: 0 auto 32px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--toz-indigo);
  text-align: center;
  text-wrap: pretty;
}
.person-centred__intro:last-of-type { margin-bottom: 64px; }
/* Diagram as a "sticker" — contained (not full-bleed), centred, with a faint
   top/right drop shadow following the PNG's alpha. */
.person-centred__diagram {
  margin: 0 auto;
  width: 100%;
  max-width: 1030px;
  text-align: center;
}
.person-centred__diagram img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  box-shadow: 1px -1px 0 rgba(9, 6, 18, 0.40);
}

/* Text equivalent for the diagram — a plain-language read-through of the
   same 8 framework areas, for anyone who can't make out (or load) the
   image. Collapsed by default so it doesn't compete with the diagram
   visually; the full-size link is a plain fallback for the diagram's own
   small print. */
.diagram-link {
  text-align: center;
  margin: 20px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}
.diagram-link a {
  /* --toz-teal is tuned for dark backgrounds — on this section's near-white
     wash it was too light to read comfortably. --toz-teal-on-light is the
     same darker teal already used for links elsewhere on light sections
     (prose pages, the Contact form's helper links). */
  color: var(--toz-teal-on-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.diagram-link a:hover { color: var(--toz-indigo); }

.framework-details {
  max-width: 780px;
  margin: 32px auto 0;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid rgba(28, 36, 75, 0.16);
  border-radius: 4px;
  color: var(--toz-indigo);
  text-align: left;
}
.framework-details summary {
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding-block: 4px;
}
.framework-details summary:focus-visible {
  outline: 2px solid var(--toz-teal);
  outline-offset: 4px;
}
.framework-details p {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  margin: 16px 0 8px;
}
.framework-details ol {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
}
.framework-details li {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 14px 0;
}

/* Full-size diagram lightbox — keeps visitors on the page instead of
   navigating straight to a bare image file (no site chrome, no way back
   except the browser's own Back button). Works without JS too: the link
   underneath is a real href to the image, this just intercepts the click
   when JS is available. */
.diagram-lightbox[hidden] { display: none; }
.diagram-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 24px;
}
.diagram-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 6, 18, 0.85);
}
.diagram-lightbox__dialog {
  position: relative;
  max-width: min(1200px, 100%);
  max-height: 100%;
}
.diagram-lightbox__dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  object-fit: contain;
}
.diagram-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(229, 228, 235, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.diagram-lightbox__close:hover { background: rgba(229, 228, 235, 0.3); }
.diagram-lightbox__close:focus-visible {
  outline: 2px solid var(--toz-teal-bright);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .diagram-lightbox { padding: 48px 16px 16px; }
}

/* =============================================================================
   6. GUIDING PRINCIPLES — indigo-alt navy bg (v1 styling), teal icons, 5-up flex grid
   ============================================================================= */

.principles {
  background: var(--toz-indigo-alt);
  color: var(--toz-white);
  padding: 160px 24px;
}
.principles__header {
  max-width: var(--max-content);
  margin: 0 auto 88px;
  text-align: center;
}
.principles__header::before {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: var(--toz-teal-bright);
  margin: 0 auto 32px;
}
.principles__title {
  color: var(--toz-white);
}
.principles__list {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}
.principle {
  flex: 0 0 calc((100% - 96px) / 3);
  min-width: 0;
  text-align: center;
  padding: 0 8px;
}
.principle__icon {
  width: 64px; height: 64px;
  margin: 0 auto 28px;
  color: var(--toz-teal-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}
.principle__icon svg { width: 100%; height: 100%; display: block; stroke-width: 1; }
.principle__name {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0 0 18px;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}
.principle__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--toz-white);
  opacity: 0.85;
  margin: 0;
}

/* =============================================================================
   6B. DIGNITY, CITIZENSHIP & VALUED ROLES — off-white bg, dark text,
       centred single-column essay. Sits between Guiding Principles and the
       closing parallax band.
   ============================================================================= */

.dignity {
  background: var(--toz-white);
  color: var(--toz-indigo);
  padding: 160px 24px;
}
.dignity__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.dignity__header {
  text-align: center;
  margin: 0 0 56px;
}
.dignity__header::before {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: var(--toz-teal-bright);
  margin: 0 auto 32px;
}
/* Title — Karla light uppercase, scales with the page's H2 clamp. Karla rather
   than Poppins to give this single editorial moment its own voice, echoing
   the hero wordmark. */
.dignity__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-indigo);
  margin: 0;
  text-wrap: balance;
}
.dignity__text-col {
  max-width: 820px;
  margin: 0 auto;
}
.dignity__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--toz-indigo);
  margin: 0 0 32px;
  text-wrap: pretty;
}
.dignity__body:last-child { margin-bottom: 0; }

/* =============================================================================
   7. PARALLAX IMAGE BANDS — full-bleed bands sharing visual treatment:
      mid (between Our Story and Strategic Plan), shelter (between
      Person-Centred Framework and Guiding Principles), closing (above footer)
   ============================================================================= */

/* Each variant supplies its own background image:
     .partners-band--mid     — between Our Story and TOZ Strategic Plan
     .partners-band--shelter — between Person-Centred Framework and Guiding
                                Principles (the divider previously between
                                Guiding Principles and Dignity was removed
                                entirely per the director's request — Dignity
                                now follows Guiding Principles directly)
     .partners-band--closing — between Dignity of Risk and the footer */
.partners-band {
  position: relative;
  height: 420px;
  /* Fallback for bands with no image assigned yet — keeps the divider a
     deliberate visual block rather than blank space. */
  background-color: var(--toz-indigo-alt);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
.partners-band--mid {
  background-image: url('/images/TOZ_Improv_YAC_2024.webp');
}
@media (max-width: 768px) {
  .partners-band--mid { background-image: url('/images/TOZ_Improv_YAC_2024-mobile.webp'); }
}
.partners-band--shelter {
  background-image: url('/images/A_Conrad_Campground_Tagish_2026.webp');
}
@media (max-width: 768px) {
  .partners-band--shelter { background-image: url('/images/A_Conrad_Campground_Tagish_2026-mobile.webp'); }
}
.partners-band--closing {
  background-image: url('/images/A_ZL_Harvesting_2026.webp');
}
@media (max-width: 768px) {
  .partners-band--closing { background-image: url('/images/A_ZL_Harvesting_2026-mobile.webp'); }
}
.partners-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 36, 75, 0.50) 0%,
    rgba(20, 20, 54, 0.30) 35%,
    rgba(9, 6, 18, 0.65) 100%);
}

/* =============================================================================
   FOOTER
   ============================================================================= */


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {

  /* Strategic Direction cards drop to 2-up at tablet */
  .strategy-card { flex: 0 0 calc((100% - 48px) / 2); }

  .milestone { gap: 40px; }

  /* Principles drop to 2-up at tablet */
  .principle { flex: 0 0 calc((100% - 48px) / 2); }

  /* iOS Safari + most Android browsers handle background-attachment: fixed
     unreliably; fall back to scroll. Same pattern as the homepage Who We Are. */
  .partners-band { background-attachment: scroll; }
}

@media (max-width: 768px) {

  .hero { padding: 96px 24px 64px; min-height: 70vh; }

  .partners-band { height: 280px; }

  .about-intro { padding: 96px 24px; }

  .about-history { padding: 80px 24px; }
  .about-history__head { margin-bottom: 56px; }
  .about-history__blocks { gap: 56px; }
  .milestone {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .strategy { padding: 96px 24px; }
  .strategy__header { margin-bottom: 64px; }
  .strategy__list { gap: 56px; }
  .strategy-card { flex: 0 0 100%; padding: 0; }

  .person-centred { padding: 80px 24px; }
  .person-centred__title { margin-bottom: 32px; }
  .person-centred__intro:last-of-type { margin-bottom: 48px; }

  .principles { padding: 96px 24px; }
  .principles__header { margin-bottom: 64px; }
  .principles__list { gap: 56px; }
  .principle { flex: 0 0 100%; padding: 0; }

  .dignity { padding: 96px 24px; }
  .dignity__header { margin-bottom: 40px; }
  .dignity__header::before { margin-bottom: 24px; }
  .dignity__body { margin-bottom: 26px; }

  .toz-footer { padding: 56px 24px 32px; }
  .toz-footer__nav ul { flex-direction: column; gap: 16px; }
  .toz-footer__land { margin-top: 32px; font-size: 13px; }
}

@media (max-width: 480px) {
  .hero__title { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}