/* About page — scroll-driven storytelling. Every effect has a static fallback
   and switches off with prefers-reduced-motion. */

/* hero */
.ab-hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--gutter) clamp(40px, 6vw, 80px); }
.ab-title { font-size: clamp(3rem, 9vw, 8.4rem); line-height: .92; letter-spacing: -0.05em; font-weight: 800; max-width: 12ch; }
.ab-rotator { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em; margin-top: 22px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -0.02em; }
.ab-rot-words { position: relative; display: inline-grid; min-width: 8ch; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.ab-rot-words b {
  grid-area: 1 / 1; padding: 0 .25em; border-radius: .2em; background: var(--tomato); box-shadow: .06em .06em 0 var(--ink);
  /* slide only (no fade): the clipped box hides the others and contrast stays intact */
  transform: translateY(120%); transition: transform .6s var(--ease-spring); justify-self: start; white-space: nowrap;
}
.ab-rot-words b.is-on { transform: none; }
.ab-rot-words b.is-out { transform: translateY(-120%); }
.ab-rot-words b:nth-child(2) { background: var(--sun); } .ab-rot-words b:nth-child(3) { background: var(--mint); } .ab-rot-words b:nth-child(4) { background: var(--lilac); }
.no-js .ab-rot-words b:first-child { transform: none; }
.ab-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: center; margin-top: clamp(30px, 4vw, 50px); }
.ab-intro { font-size: clamp(1.1rem, .8vw + .9rem, 1.45rem); color: var(--ink-2); max-width: 46ch; }
.ab-stage { position: relative; aspect-ratio: 1.2 / 1; max-width: 520px; justify-self: center; width: 100%; }
.ab-yagi { position: absolute; left: 26%; top: 14%; width: 48%; transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px), 0); transition: transform .4s var(--ease-out); }
.ab-shape { position: absolute; display: block; border: 3px solid var(--ink); transform: translate3d(calc(var(--mx, 0) * var(--k) * 1px), calc(var(--my, 0) * var(--k) * 1px), 0); transition: transform .5s var(--ease-out); }
.ab-s1 { --k: -30; left: 0; top: 6%; width: 26%; aspect-ratio: 1; border-radius: 50%; border-width: 14px; border-color: var(--cobalt); }
.ab-s2 { --k: 24; right: 2%; top: 4%; width: 30%; height: 13%; border-radius: 999px; background: var(--sun); rotate: 18deg; }
.ab-s3 { --k: -18; right: 6%; bottom: 8%; width: 28%; height: 22%; border-radius: 16px; background: var(--lilac); rotate: -10deg; }
.ab-s4 { --k: 36; border: 0; left: 8%; bottom: 6%; font-size: clamp(30px, 4vw, 54px); color: var(--tomato); }
@media (prefers-reduced-motion: no-preference) {
  .ab-s1 { animation: drift 9s var(--ease-in-out) infinite; }
  .ab-s3 { animation: drift 8s var(--ease-in-out) -3s infinite reverse; }
  .ab-s4 { animation: spin 14s linear infinite; }
}

/* manifesto — words go from faint to ink as you scroll */
.ab-manifesto { max-width: 1100px; margin: 0 auto; padding: clamp(60px, 10vw, 140px) var(--gutter); }
.ab-manifesto-text { font-family: var(--font-display); font-weight: 750; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.08; letter-spacing: -0.035em; }
/* Unlit words stay readable (≥3:1 for large text); lighting them turns them ink. */
.js .ab-manifesto-text .sw { color: #8a8273; transition: color .3s linear; }
.js .ab-manifesto-text .sw.is-lit { color: var(--ink); }
.js .ab-manifesto-text .sw.is-accent.is-lit { color: #b8330f; }

/* story */
.ab-story { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.ab-story-side { position: sticky; top: calc(var(--header-h) + 30px); }
.ab-story-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 12vw, 10rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--ink); letter-spacing: -0.06em; }
.ab-story-body { display: grid; gap: 1.2em; font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); color: var(--ink-2); max-width: 62ch; }
.ab-story-body p:first-child::first-letter { float: left; font-family: var(--font-display); font-weight: 800; font-size: 3.6em; line-height: .8; margin: .06em .1em 0 0; color: var(--tomato); }

/* values — sticky stacked cards */
.ab-values .section-head { margin-bottom: 30px; }
.ab-stack { list-style: none; display: grid; gap: 22px; }
.ab-card {
  --c: var(--sun);
  position: sticky; top: calc(var(--header-h) + 30px + var(--i) * 18px);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 26px; align-items: center;
  min-height: 190px; padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--c); border: 2px solid var(--ink);
  box-shadow: 0 -10px 30px -18px rgba(21,19,15,.5); transform-origin: top center;
}
.ab-card-2 { --c: var(--lilac); } .ab-card-3 { --c: var(--mint); } .ab-card-4 { --c: var(--pink); } .ab-card-5 { --c: #9fc3ff; }
.ab-card-num { grid-row: span 2; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 7vw, 6rem); line-height: .9; letter-spacing: -0.05em; }
.ab-card h3 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -0.03em; align-self: end; }
.ab-card p { font-size: 1.08rem; color: var(--ink-2); align-self: start; max-width: 52ch; }

/* steps — pinned horizontal scroll */
.ab-steps { position: relative; height: calc(var(--n, 5) * 70vh + 40vh); margin-top: clamp(40px, 6vw, 90px); }
.ab-steps-sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); }
.ab-steps-head { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.ab-steps-head .kicker { color: #cfc6b4; }
.ab-steps-head .section-title { color: var(--paper); }
.ab-steps-hint { margin-top: 8px; color: #cfc6b4; font-weight: 650; }
.ab-track-wrap { position: relative; margin-top: clamp(26px, 4vw, 50px); }
.ab-path { position: absolute; left: 0; top: 30px; width: calc(var(--n, 5) * 420px + 20vw); height: 40px; transform: translateX(calc(var(--hp, 0) * -1 * var(--hdist, 0px))); }
.ab-path path { fill: none; stroke: rgba(247,242,232,.25); stroke-width: 3; stroke-dasharray: .01 .02; vector-effect: non-scaling-stroke; }
.ab-walker { position: absolute; z-index: 2; left: 0; top: 0; width: 64px; transform-origin: 50% 100%; will-change: transform; }
.ab-track { list-style: none; display: flex; gap: 22px; padding: 70px var(--gutter) 10px; width: max-content; transform: translateX(calc(var(--hp, 0) * -1 * var(--hdist, 0px))); will-change: transform; }
.ab-step { width: min(380px, 78vw); padding: 26px; border-radius: var(--radius); background: var(--card); color: var(--ink); border: 2px solid var(--paper); flex: none; }
.ab-step:nth-child(odd) { rotate: -1.2deg; } .ab-step:nth-child(even) { rotate: 1.2deg; margin-top: 30px; }
.ab-step-num { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sun); font-family: var(--font-display); font-weight: 800; margin-bottom: 16px; }
.ab-step:nth-child(2) .ab-step-num { background: var(--lilac); } .ab-step:nth-child(3) .ab-step-num { background: var(--mint); }
.ab-step:nth-child(4) .ab-step-num { background: var(--pink); } .ab-step:nth-child(5) .ab-step-num { background: var(--tomato); }
.ab-step h3 { font-size: 1.6rem; letter-spacing: -0.02em; }
.ab-step p { margin-top: 8px; color: var(--ink-2); }

/* tools marquee */
.ab-tools { padding: clamp(60px, 8vw, 110px) 0 20px; overflow: hidden; }
.ab-tools-kicker { display: flex; justify-content: center; }
.ab-tools-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ab-tools-track { list-style: none; display: flex; gap: 14px; width: max-content; padding: 6px 0; }
.ab-tools-track li { padding: 14px 26px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.6rem); white-space: nowrap; }
.ab-tools-track li:nth-child(3n) { background: var(--sun); } .ab-tools-track li:nth-child(3n+1) { background: var(--mint); }
@media (prefers-reduced-motion: no-preference) {
  .ab-tools-track { animation: marquee 30s linear infinite; }
  .ab-tools-marquee:hover .ab-tools-track, .ab-tools-marquee.is-paused .ab-tools-track { animation-play-state: paused; }
}

/* Yagi */
.ab-yagi-card { display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 4vw, 50px); align-items: center; padding: clamp(24px, 4vw, 50px); border-radius: var(--radius-lg); background: var(--card); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--tomato); }
.ab-yagi-big { width: 220px; cursor: pointer; }
.ab-yagi-title { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; margin-bottom: 12px; }
.ab-yagi-card p { font-size: 1.12rem; color: var(--ink-2); max-width: 56ch; }

/* CTA */
.ab-cta { max-width: 1000px; margin: 0 auto; padding: clamp(60px, 9vw, 130px) var(--gutter); text-align: center; display: grid; justify-items: center; gap: 28px; }
.ab-cta-title { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.04em; line-height: 1.04; }

/* responsive + fallbacks */
@media (max-width: 900px) {
  .ab-hero-grid, .ab-story, .ab-yagi-card { grid-template-columns: 1fr; }
  .ab-story-side { position: static; }
  .ab-story-num { font-size: 5rem; }
  .ab-yagi-big { width: 150px; }
  .ab-card { grid-template-columns: 1fr; min-height: 0; }
  .ab-card-num { grid-row: auto; font-size: 3rem; }
}
/* Without JS or with reduced motion the steps become a normal list. */
.no-js .ab-steps, .ab-steps.is-static { height: auto; }
.no-js .ab-steps-sticky, .ab-steps.is-static .ab-steps-sticky { position: static; height: auto; padding: 50px 0; }
.no-js .ab-track, .ab-steps.is-static .ab-track { width: auto; flex-wrap: wrap; transform: none; }
.no-js .ab-walker, .no-js .ab-path, .ab-steps.is-static .ab-walker, .ab-steps.is-static .ab-path, .ab-steps.is-static .ab-steps-hint { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ab-card { position: relative; top: auto; }
  .ab-yagi, .ab-shape { transform: none !important; }
}