/* Buzora: Meet the founders. Built on site.css; only what this page adds lives here. */

.nav-links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 0.5em; text-decoration-color: var(--signal); }
.founders-page .world-labels { display: none; }
.founders-page .world canvas { transition: none; }

/* ---------------------------------------------------------------- the title, over the live world */
.f-head { position: relative; min-height: 100svh; display: grid; align-items: end; padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-8); }
.f-head-copy { max-width: var(--max); margin: 0 auto; width: 100%; position: relative; }
/* a scrim only where the words sit, so the light behind them never costs legibility */
.f-head-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -20% 30% -25% -12%; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 35% 55%, rgba(5, 8, 23, 0.85) 30%, rgba(5, 8, 23, 0) 100%);
}
.f-title { font-size: clamp(3.2rem, 10vw, 10.5rem); line-height: 0.88; letter-spacing: -0.055em; font-weight: 400; max-width: 6.2em; }
.f-lead { max-width: 36rem; margin-top: var(--s-6); color: var(--on-night); }

/* ---------------------------------------------------------------- the founders: two co-founders side by side, in their own words */
.f-people { position: relative; background: var(--night); padding: var(--s-9) var(--gutter) var(--s-10); }
.founders-duo { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.founder { margin: 0; padding-top: var(--s-6); border-top: 1px solid var(--on-night-2); display: flex; flex-direction: column; }
.founder-name { font-size: clamp(2.8rem, 5.8vw, 6.2rem); line-height: 0.92; letter-spacing: -0.05em; font-weight: 400; }
.founder-aka { margin: var(--s-3) 0 0; color: var(--on-night-2); }
.founder-role { margin: var(--s-5) 0 0; font-size: var(--t-lead); color: var(--signal); }
.founder-bio { margin: var(--s-4) 0 0; max-width: 32rem; color: var(--on-night-2); }
.founder-quote { margin: auto 0 0; padding-top: var(--s-7); max-width: 34rem; }
.founder-quote p { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: 1.2; letter-spacing: -0.025em; color: var(--on-night); text-indent: -0.42em; }

/* ---------------------------------------------------------------- what the prototype left behind */
.f-story { background: var(--night); padding: var(--s-9) var(--gutter); border-top: 1px solid var(--night-rule); }
.f-story-head { max-width: var(--max); margin: 0 auto var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; }
.f-story-lead { color: var(--on-night-2); max-width: 30rem; margin: 0; }
.shifts { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); }
.shift {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7);
  padding: var(--s-6) 0; border-top: 1px solid var(--night-rule);
}
.shift:last-child { border-bottom: 1px solid var(--night-rule); }
.shift-before { margin: 0; color: var(--on-night-2); font-size: var(--t-lead); }
.shift-before span {
  background: linear-gradient(var(--on-night-2), var(--on-night-2)) no-repeat 0 58% / calc(var(--strike, 1) * 100%) 1px;
}
.shift-now {
  margin: 0; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--on-night);
  opacity: calc(0.12 + 0.88 * var(--now, 1)); translate: 0 calc((1 - var(--now, 1)) * 18px);
}
.f-source { max-width: var(--max); margin: var(--s-6) auto 0; color: var(--on-night-2); }
.f-source cite { font-style: normal; color: var(--on-night); }

/* ---------------------------------------------------------------- three ideas, on paper */
.f-ideas { border-radius: 28px 28px 0 0; }
.ideas { list-style: none; max-width: 64rem; margin: var(--s-8) auto 0; padding: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); border-top: 1px solid var(--ink); }
.idea-title { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; margin: 0 0 var(--s-4); color: var(--ink); }
.ideas p { color: var(--ink-2); }

/* ---------------------------------------------------------------- the close */
.f-built { background: var(--night); padding: var(--s-10) var(--gutter); }
.f-statement { max-width: 60rem; margin: 0 auto; font-size: clamp(1.9rem, 3.8vw, 3.6rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 400; color: var(--on-night); }

.f-ask { max-width: 60rem; margin: var(--s-7) auto 0; font-size: var(--t-lead); color: var(--on-night-2); }
.f-ask a { color: var(--on-night); }
.f-built .door-actions { max-width: 60rem; margin: var(--s-5) auto 0; }

/* reduced motion and no-JS: every final state at once */
.f-still .shift, html:not(.js) .shift { --strike: 1; --now: 1; }

@media (max-width: 960px) {
  .founders-duo { grid-template-columns: minmax(0, 1fr); gap: var(--s-9); }
  .f-story-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .shift { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .ideas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .f-head { min-height: 92svh; padding-bottom: var(--s-7); }
  .f-title { font-size: clamp(3rem, 15vw, 4.6rem); }
  .f-people { padding-top: var(--s-8); }
  .f-built { padding: var(--s-9) var(--gutter); }
}
/* the world sinks into the night above the founders instead of stopping at an edge */
.f-people::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26svh; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 8, 23, 0), var(--night)); }