/* ABOUT — the drive's vibe on a normally-scrolling page: violet ground, Ringold headlines, a WebGL field of
   coins and gems flying past behind the content, and headlines that assemble letter by letter as they arrive. */
html.about-page, html.about-page body { margin: 0; background: var(--violet); color: #fff; }
.ab-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ab { position: relative; z-index: 1; }
html.about-page .site-header { z-index: 9000; }

/* letters assemble from a scattered 3D pose (about.js sets --k per block, 0 → 1) */
.ab .scatter { perspective: 900px; }
.ab .scatter .L { display: inline-block; font-style: normal;
  --kk: clamp(0, calc((var(--k, 0) - var(--sd, 0)) / (1 - var(--sd, 0))), 1);
  transform: translate3d(calc(var(--sx) * (1 - var(--kk)) * 1em), calc(var(--sy) * (1 - var(--kk)) * 1em), calc(var(--sz) * (1 - var(--kk)) * 1px)) rotate(calc(var(--sr) * (1 - var(--kk)) * 1deg));
  opacity: var(--kk); will-change: transform, opacity; }
.ab .scatter .w { display: inline-block; white-space: nowrap; }

/* ── hero ── */
.ab-hero { min-height: 100vh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 18vh clamp(20px, 6vw, 80px) 12vh; }
.ab-hero__h { margin: 0; font-size: clamp(54px, 10vw, 180px); line-height: .92; text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 .05em 0 rgba(0,0,0,.14); }
.ab-hero__h span { display: block; }
.ab-hero__h .l2 { color: var(--amber); }
.ab-hero__sub { max-width: 46ch; margin: clamp(26px, 4vh, 48px) 0 0; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: clamp(17px, 1.35vw, 23px); line-height: 1.55; }
.ab-hero__cue { margin-top: clamp(30px, 6vh, 70px); width: 32px; height: 52px; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; position: relative; }
.ab-hero__cue span { position: absolute; left: 50%; top: 10px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; animation: ab-cue 1.7s ease-in-out infinite; }
@keyframes ab-cue { 0%, 100% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(22px); opacity: .15; } 71% { opacity: 0; } 72% { transform: translateY(0); opacity: 0; } }

/* ── the four rules: each is a full screen, the number ghosted huge behind it ── */
.ab-rules { padding: 0 clamp(20px, 6vw, 80px); }
.ab-rules__h { margin: 0 0 6vh; text-align: center; font-size: clamp(34px, 5vw, 86px); line-height: 1; text-transform: uppercase; }
.ab-rules__h em { font-style: normal; color: var(--amber); }
.rule { position: relative; min-height: 52vh; display: grid; align-content: center; max-width: 1180px; margin: 0 auto; padding: 4vh 0; }
.rule::before { content: attr(data-n); position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); font-family: var(--font-head); font-size: clamp(150px, 24vw, 400px); line-height: 1; color: rgba(255,255,255,.07); pointer-events: none; }
.rule__k { margin: 0 0 14px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(13px, 1vw, 17px); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.rule__h { margin: 0; font-size: clamp(42px, 7.6vw, 132px); line-height: .94; text-transform: uppercase; text-shadow: 0 .05em 0 rgba(0,0,0,.14); }
.rule__p { max-width: 36ch; margin: clamp(18px, 3vh, 32px) 0 0; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(17px, 1.3vw, 22px); line-height: 1.55; }

/* ── how we work ── */
.ab-work { padding: 14vh clamp(20px, 6vw, 80px); max-width: 1280px; margin: 0 auto; }
.ab-work__h { margin: 0 0 7vh; text-align: center; font-size: clamp(38px, 6vw, 110px); line-height: 1; text-transform: uppercase; }
.ab-work__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.wcard { background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.16); border-radius: 26px; padding: clamp(24px, 2.6vw, 38px); }
.wcard .k { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
.wcard h3 { margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 38px); line-height: 1.05; text-transform: uppercase; }
.wcard p { margin: 0; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; opacity: .92; }

/* ── join ── */
.ab-join { padding: 12vh clamp(20px, 6vw, 80px) 8vh; text-align: center; display: grid; justify-items: center; }
.ab-join__h { margin: 0; font-size: clamp(38px, 6.4vw, 116px); line-height: .96; text-transform: uppercase; }
.ab-join__p { max-width: 44ch; margin: clamp(20px, 3vh, 34px) 0 clamp(26px, 4vh, 44px); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(16px, 1.25vw, 21px); line-height: 1.55; }

@media (max-width: 767.98px) {
  .rule { min-height: 48vh; }
  .rule::before { right: -4vw; font-size: 46vw; }
  .ab-hero { padding-top: 16vh; }
}
@media (prefers-reduced-motion: reduce) { .ab .scatter .L { transform: none; opacity: 1; } .ab-hero__cue span { animation: none; } }

/* the shared .drive-end is content-height on the drive; on about it gets its own screen */
html.about-page .drive-end { min-height: 0; padding: 4vh 20px 12vh; }
.ab-work__grid > .wcard { align-self: stretch; }