/* About page — composes on top of styles.css. Editorial, slow-rhythm, image-led. */

/* ============ HERO ============ */
.ab-hero {
  position: relative; min-height: 75vh; width: 100%; overflow: hidden;
  background: var(--mf-ink); color: var(--mf-paper);
  display: flex; align-items: flex-end;
  padding-top: 72px;
}
.ab-hero-img {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.ab-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.35) contrast(0.92) brightness(0.7) saturate(0.85);
}
.ab-hero-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.15), transparent 60%);
  mix-blend-mode: overlay;
  opacity: 0.85;
}
.ab-hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(20, 33, 61, 0.55) 100%),
    linear-gradient(180deg, rgba(20, 33, 61, 0.35) 0%, transparent 30%, rgba(20, 33, 61, 0.7) 100%);
}
.ab-hero-pending {
  position: absolute; bottom: var(--s-4); right: var(--s-5); z-index: 2;
  font-family: var(--font-body); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(250,250,247,0.6);
  background: rgba(20,33,61,0.6); padding: 6px 12px;
  border: 1px solid rgba(250,250,247,0.15);
}
.ab-hero-content {
  position: relative; z-index: 2;
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad) var(--s-10);
  width: 100%;
}
.ab-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 400; line-height: 1.0; letter-spacing: -0.02em;
  color: var(--mf-paper);
  margin: var(--s-5) 0 var(--s-6); max-width: 16ch;
}
.ab-hero-h1 em { font-style: italic; font-weight: 300; }
.ab-hero-lead {
  font-family: var(--font-body); font-size: 19px; line-height: 1.5;
  color: rgba(250,250,247,0.85); max-width: 50ch;
  margin: 0;
}

/* ============ FOUNDER QUOTE ============ */
.ab-quote {
  background: var(--mf-paper-warm);
  padding: var(--s-12) 0;
}
.ab-quote-inner {
  max-width: 900px; margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
}
.ab-quote-mark {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 120px; line-height: 0.5;
  color: var(--mf-accent); opacity: 0.4;
  margin-bottom: var(--s-5);
}
.ab-quote blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.25; letter-spacing: -0.015em;
  color: var(--mf-ink);
  font-weight: 300;
  margin: 0 auto var(--s-7);
  max-width: 28ch;
  text-wrap: balance;
}
.ab-quote-attr {
  font-family: var(--font-body); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--mf-ink-60);
}

/* ============ NARRATIVE ============ */
.ab-narr {
  padding: var(--s-11) 0 var(--s-10);
  border-top: 1px solid var(--mf-ink-10);
}
.ab-narr:first-of-type { border-top: 0; }
.ab-narr-grid {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid; grid-template-columns: 6fr 5fr; gap: var(--s-9); align-items: start;
}
.ab-narr.flip .ab-narr-grid { grid-template-columns: 5fr 6fr; }
.ab-narr.flip .ab-narr-img { order: -1; }
.ab-narr-text {
  position: sticky; top: 100px;
}
.ab-narr-h {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-7); max-width: 14ch;
}
.ab-narr-h em { font-style: italic; font-weight: 300; }
.ab-narr-p {
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  color: var(--mf-ink-80); max-width: 42ch;
  margin: 0 0 var(--s-5);
}
.ab-narr-p a {
  color: var(--mf-ink); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%; background-repeat: no-repeat;
  background-size: 100% 1px; padding-bottom: 1px;
  transition: background-size 200ms ease;
}
.ab-narr-p a:hover { background-size: 100% 2px; }
.ab-narr-links {
  margin-top: var(--s-5) !important;
  padding-top: var(--s-4);
  border-top: 1px solid var(--mf-ink-10);
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--mf-ink-60) !important;
  letter-spacing: 0.01em;
  position: relative;
}
.ab-narr-links::before {
  content: 'In context';
  display: block;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--mf-ink-40);
  margin-bottom: 8px;
}
.ab-narr-links a {
  color: var(--mf-ink) !important;
  font-weight: 500;
}
.ab-narr-img {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--mf-paper-warm);
}
/* Landscape variant — used when the section image is a horizontal photo
   that needs more room and less vertical crop than the default 4:5 portrait. */
.ab-narr--wide .ab-narr-grid { grid-template-columns: 4fr 7fr; align-items: center; }
.ab-narr--wide.flip .ab-narr-grid { grid-template-columns: 7fr 4fr; }
.ab-narr--wide .ab-narr-img { aspect-ratio: 3/2; }
.ab-narr--wide .ab-narr-text { position: static; }
.ab-narr-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.18) contrast(0.95) saturate(0.9);
}
.ab-narr-pending {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--s-3) var(--s-4);
  background: rgba(20, 33, 61, 0.88); color: var(--mf-paper);
  font-family: var(--font-body); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em; text-align: center;
}

/* ============ TIMELINE ============ */
.ab-timeline {
  padding: var(--s-11) 0;
  background: var(--mf-paper);
  border-top: 1px solid var(--mf-ink-10);
}
.ab-timeline-h {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.02em;
  max-width: 14ch; margin: 0;
}
.ab-timeline-h em { font-style: italic; font-weight: 300; }
.ab-timeline-track {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
  position: relative;
}
.ab-timeline-line {
  position: absolute;
  left: calc(var(--container-pad) + 200px);
  top: 0; bottom: 0; width: 1px;
  background: var(--mf-accent); opacity: 0.4;
}
.ab-timeline-row {
  display: grid; grid-template-columns: 200px 60px 1fr;
  align-items: baseline; gap: 0;
  padding: var(--s-5) 0;
  position: relative;
}
.ab-timeline-row:first-child { padding-top: var(--s-2); }
.ab-timeline-year {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 400; letter-spacing: -0.01em;
  color: var(--mf-ink);
}
.ab-timeline-dot {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding-top: 14px;
}
.ab-timeline-dot::before {
  content: ''; position: absolute;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--mf-accent);
  top: 18px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--mf-paper);
  z-index: 1;
}
.ab-timeline-branch {
  position: absolute; top: 23px; left: 50%; right: -6px;
  height: 1px; background: var(--mf-accent); opacity: 0.4;
}
.ab-timeline-info {
  padding-left: var(--s-5); padding-top: 14px;
  border-bottom: 1px solid var(--mf-ink-10);
  padding-bottom: var(--s-5);
  margin-bottom: calc(var(--s-5) * -1);
}
.ab-timeline-row:last-child .ab-timeline-info { border-bottom: 0; }
.ab-timeline-loc {
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  letter-spacing: -0.005em; color: var(--mf-ink); margin-bottom: 6px;
}
.ab-timeline-desc {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--mf-ink-60);
}

/* Hero lockup at the top of the About hero */
.ab-hero-lockup { margin-bottom: var(--s-7); }
.ab-hero-lockup .mf-lockup-mark { width: 80px; height: 80px; }
.ab-hero-lockup .mf-wordmark { color: var(--mf-paper); font-size: 24px; }

/* Footer lockup spacing */
.mf-footer-lockup { margin-bottom: var(--s-3); }

.ab-pillars {
  padding: var(--s-11) 0;
  border-top: 1px solid var(--mf-ink-10);
  background: var(--mf-paper);
}
.ab-pillars-stage {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid; grid-template-columns: 280px 1fr; gap: var(--s-8);
  align-items: start;
}
.ab-pillars-tabs {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--mf-ink-20);
}
.ab-pillar-tab {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-4) 0;
  border: 0; border-bottom: 1px solid var(--mf-ink-10);
  background: transparent; cursor: pointer; text-align: left;
  color: var(--mf-ink-60);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
  position: relative;
}
.ab-pillar-tab::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px; background: var(--mf-accent);
  transition: width var(--dur-base) var(--ease-out);
}
.ab-pillar-tab:hover { color: var(--mf-ink); }
.ab-pillar-tab.active {
  color: var(--mf-ink); padding-left: 28px;
}
.ab-pillar-tab.active::before { width: 18px; }
.ab-pillar-tab-num {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--mf-ink-40);
  width: 28px; flex-shrink: 0;
}
.ab-pillar-tab.active .ab-pillar-tab-num { color: var(--mf-accent); }
.ab-pillar-tab-name {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.1;
}
.ab-pillar-panel {
  border-top: 1px solid var(--mf-ink-20);
  padding: var(--s-5) 0 var(--s-7);
  animation: pillarFade var(--dur-slow) var(--ease-out);
}
@keyframes pillarFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ab-pillar-panel-num {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--mf-ink-40); margin-bottom: var(--s-5);
}
.ab-pillar-panel-t {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--mf-ink); margin: 0 0 var(--s-5);
}
.ab-pillar-panel-lede {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.35;
  color: var(--mf-ink-80); max-width: 38ch;
  margin: 0 0 var(--s-6);
}
.ab-pillar-panel-d {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--mf-ink-60); max-width: 56ch; margin: 0;
}
@media (max-width: 900px) {
  .ab-pillars-stage { grid-template-columns: 1fr; gap: var(--s-5); }
  .ab-pillar-tab.active { padding-left: 0; }
  .ab-pillar-tab.active::before { width: 0; }
}


/* ============ PRINCIPLES ============ */
.ab-principles { padding-top: var(--s-11); padding-bottom: var(--s-11); }
.ab-principle-list {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
}
.ab-principle {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--s-7);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--mf-ink-10);
  align-items: baseline;
}
.ab-principle:first-child { border-top: 1px solid var(--mf-ink-20); }
.ab-principle:last-child { border-bottom: 1px solid var(--mf-ink-20); }
.ab-principle-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5rem); font-weight: 400;
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--mf-accent); opacity: 0.85;
}
.ab-principle-t {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 400; letter-spacing: -0.015em; line-height: 1.1;
  color: var(--mf-ink); margin: 0 0 var(--s-3);
}
.ab-principle-d {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--mf-ink-80); max-width: 56ch; margin: 0;
}

/* ============ CLOSING CTA ============ */
.ab-cta {
  padding: var(--s-12) 0;
  text-align: center;
  background: var(--mf-paper);
  border-top: 1px solid var(--mf-ink-10);
}
.ab-cta-inner {
  max-width: 720px; margin: 0 auto;
  padding: 0 var(--container-pad);
}
.ab-cta-h {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.02em;
  margin: var(--s-3) auto var(--s-5);
  max-width: 16ch;
}
.ab-cta-h em { font-style: italic; font-weight: 300; }
.ab-cta-sub {
  font-family: var(--font-body); font-size: 18px; line-height: 1.5;
  color: var(--mf-ink-60);
  max-width: 42ch; margin: 0 auto var(--s-7);
}
.ab-cta-actions {
  display: flex; gap: var(--s-5); align-items: center; justify-content: center;
  flex-wrap: wrap;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .ab-narr-grid, .ab-narr.flip .ab-narr-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .ab-narr.flip .ab-narr-img { order: 0; }
  .ab-narr-text { position: static; }
  .ab-timeline-line { left: calc(var(--container-pad) + 90px); }
  .ab-timeline-row { grid-template-columns: 90px 40px 1fr; }
  .ab-timeline-year { font-size: 1.5rem; }
}
@media (max-width: 720px) {
  .ab-principle { grid-template-columns: 1fr; gap: var(--s-3); }
  .ab-principle-num { font-size: 3rem; }
  .ab-quote blockquote { font-size: 1.5rem; }
  .ab-hero-h1 { font-size: clamp(2.5rem, 10vw, 4.5rem); }
  .ab-timeline-line { left: calc(var(--container-pad) + 70px); }
  .ab-timeline-row { grid-template-columns: 70px 30px 1fr; padding: var(--s-4) 0; }
  .ab-timeline-year { font-size: 1.25rem; }
  .ab-timeline-loc { font-size: 18px; }
}

/* ============ MOBILE POLISH (about page) ============ */
@media (max-width: 720px) {
  .ab-narr { padding: var(--s-8) 0; }
  .ab-narr-h { font-size: clamp(2rem, 8vw, 3rem); }
  .ab-narr-p { font-size: 16px; }
  /* Landscape variant: drop the bespoke columns and aspect on phone — the
     1fr stack from the 1024px rule already handles layout, but the image
     should not be forced to 3:2 when the wide column collapses. */
  .ab-narr--wide .ab-narr-img { aspect-ratio: 5/4; }
  .ab-hero-h1 { line-height: 1.05; }
  .ab-hero-lead { font-size: 16px; max-width: none; }
  .ab-quote { padding: var(--s-8) 0; }
}
@media (max-width: 480px) {
  .ab-narr { padding: var(--s-7) 0; }
  .ab-narr-h { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .ab-hero-h1 { font-size: clamp(2rem, 10vw, 3.5rem); }
}