/* About page. Full-bleed bands that alternate dark and light, one visual idea per band.
   Tokens come from tiles.css. Accent is var(--t-link), on dark bands var(--t-ink-link). */
.ab-page{--ab-ink-link:var(--t-ink-link,#2ee6b8);background:var(--t-page);color:var(--fg);font:400 1.0625rem/1.55 var(--disp);overflow-x:clip}
.ab-wrap{max-width:1160px;margin:0 auto;position:relative}
.ab-band{position:relative;padding:clamp(4.5rem,10vw,8.5rem) 1.25rem}
.ab-h{margin:0 0 clamp(2rem,4vw,3.5rem);font:650 clamp(2.2rem,5.4vw,4rem)/1.04 var(--disp);letter-spacing:-.035em;text-wrap:balance}
.ab-cta{display:flex;flex-wrap:wrap;gap:12px;margin:2rem 0 0}
.ab-btn{display:inline-block;padding:.8rem 1.6rem;border-radius:999px;background:var(--t-link);border:1px solid var(--t-link);color:#fff;font:600 1.05rem/1.2 var(--disp);text-decoration:none;transition:filter .2s,transform .2s}
[data-theme=neon] .ab-btn{color:#06100d}
.ab-btn.alt{background:transparent;color:var(--t-link)}
.ab-btn:hover{filter:brightness(1.1);transform:translateY(-1px);text-decoration:none}
.ab-page a:focus-visible{outline:2px solid var(--t-link);outline-offset:3px;border-radius:4px}
.ab-hero a:focus-visible,.ab-ai a:focus-visible,.ab-journey a:focus-visible,.ab-hobby a:focus-visible{outline-color:var(--ab-ink-link)}

/* 1 hero: dark, grid glow, one real picture that drifts */
.ab-hero{position:relative;background:var(--t-ink);color:var(--t-ink-fg,#f2f4f8);padding:clamp(2rem,3.8vw,3.25rem) 1.25rem;overflow:hidden;isolation:isolate;display:flex;align-items:center;min-height:clamp(28rem,68vh,42rem)}
.ab-hero-bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.ab-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--t-ink) 0%,color-mix(in srgb,var(--t-ink) 94%,transparent) 8%,color-mix(in srgb,var(--t-ink) 88%,transparent) 40%,color-mix(in srgb,var(--t-ink) 46%,transparent) 64%,color-mix(in srgb,var(--t-ink) 8%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--t-ink) 50%,transparent) 0%,transparent 24%,transparent 52%,var(--t-ink) 100%)}
.ab-hero::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(60% 50% at 78% 42%,color-mix(in srgb,var(--ab-ink-link) 22%,transparent),transparent 70%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px;animation:ab-grid 40s linear infinite}
@keyframes ab-grid{to{transform:translate(48px,48px)}}
.ab-hero-in{width:100%;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr)}
.ab-title{margin:0;max-width:15ch;font:700 clamp(2.2rem,4.2vw,3.8rem)/1.02 var(--disp);letter-spacing:-.05em;text-wrap:balance}
.ab-lede{margin:1rem 0 0;max-width:34ch;font:400 clamp(1.08rem,1.5vw,1.28rem)/1.42 var(--disp);color:var(--t-ink-muted,#949bb0)}
.ab-hero .ab-title,.ab-hero .ab-lede{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.65)}
.ab-hero .ab-lede{color:#e9ecf4}
.ab-hero .ab-cta{margin-top:1.35rem}
.ab-hero .ab-btn{background:var(--ab-ink-link);border-color:var(--ab-ink-link);color:#06100d}
.ab-hero .ab-btn.alt{background:transparent;color:var(--t-ink-fg,#f2f4f8);border-color:rgba(255,255,255,.4)}

/* 2 statement: huge type, the last word before the contact band */
.ab-say{background:var(--t-page);padding-block:clamp(5rem,12vw,9rem);border-top:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.ab-big{margin:0;max-width:19ch;font:700 clamp(2.4rem,7vw,6rem)/1.03 var(--disp);letter-spacing:-.045em;text-wrap:balance}

/* 3 AI revolution: dark scene over a real, dim terminal capture */
.ab-ai{background:#0a0d14;color:#f2f4f8;overflow:hidden;isolation:isolate;padding-block:clamp(5rem,12vw,10rem)}
[data-theme=neon] .ab-ai{background:#050609}
@keyframes ab-roll{to{transform:translateY(-50%)}}
.ab-ai .ab-h{color:var(--ab-ink-link);font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:.02em;font-weight:600;margin-bottom:1.5rem}
.ab-ai-in{max-width:1160px}
.ab-ai-big{margin:0 0 2rem;font:700 clamp(2.4rem,6.4vw,5.2rem)/1.03 var(--disp);letter-spacing:-.045em;text-wrap:balance}
.ab-ai-body{margin:0;max-width:36em;font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.65;color:#d5dae6}
.ab-steps{list-style:none;counter-reset:step;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
.ab-steps li{counter-increment:step;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2)}
.ab-steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:.75rem;font:600 .95rem/1 var(--mono);letter-spacing:.08em;color:var(--ab-ink-link)}
.ab-steps h3{margin:0 0 .5rem;font:650 clamp(1.15rem,1.7vw,1.4rem)/1.2 var(--disp);letter-spacing:-.02em;color:#f2f4f8}
.ab-steps p{margin:0;font-size:1.02rem;line-height:1.55;color:#c3cadb}
.ab-steps a{color:var(--ab-ink-link);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ab-ai-end{margin:2.5rem 0 0;font:650 clamp(1.3rem,2.2vw,1.8rem)/1.25 var(--disp);letter-spacing:-.025em;color:#f2f4f8}
@media (max-width:1100px){.ab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ab-steps{grid-template-columns:1fr}}
.ab-proof{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.22)}
.ab-proof li{padding:1.1rem 0 1.1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.14);position:relative;font-size:1.1rem;line-height:1.5;color:#e6e9f1}
.ab-proof li::before{content:"";position:absolute;left:0;top:1.65rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--ab-ink-link)}
.ab-proof a{color:var(--ab-ink-link);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.ab-proof a:hover{text-decoration-thickness:2px}

/* 4 track record: who references the work, one row each */
.ab-track{background:var(--t-page);padding-block:clamp(4rem,8vw,6.5rem)}
.ab-refs{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,var(--fg) 26%,transparent)}
.ab-refs a{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr) auto;gap:.3rem 2rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 16%,transparent);color:inherit;text-decoration:none}
.ab-refs a:hover{text-decoration:none}
.ab-refs strong{font:700 clamp(1.5rem,2.8vw,2.2rem)/1.1 var(--disp);letter-spacing:-.035em;transition:color .2s}
.ab-refs span{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.45;color:var(--muted)}
.ab-refs i{font:500 1.4rem/1 var(--disp);color:var(--t-link);transition:transform .2s var(--ease,ease)}
.ab-refs a:hover strong{color:var(--t-link)}
.ab-refs a:hover i{transform:translate(3px,-3px)}
@media (max-width:760px){.ab-refs a{grid-template-columns:minmax(0,1fr) auto}.ab-refs span{grid-column:1}.ab-refs i{grid-column:2;grid-row:1 / span 2;align-self:center}}
@media (prefers-reduced-motion:reduce){.ab-refs strong,.ab-refs i{transition:none}}

/* 5 journey: dark, a line that draws itself */
.ab-journey{background:var(--t-ink);color:var(--t-ink-fg,#f2f4f8)}
.ab-tl{list-style:none;margin:0;padding:0 0 0 1.6rem;position:relative}
.ab-tl::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(var(--ab-ink-link),rgba(255,255,255,.12))}
.ab-tl li{position:relative;display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1.5rem;align-items:baseline;padding:1.5rem 0}
.ab-tl li::before{content:"";position:absolute;left:calc(-1.6rem - 5px);top:2.15rem;width:12px;height:12px;border-radius:50%;background:var(--t-ink);border:2px solid var(--ab-ink-link)}
.ab-tl time{font:700 clamp(1.8rem,3.4vw,2.8rem)/1.1 var(--disp);letter-spacing:-.04em;color:var(--ab-ink-link)}
.ab-tl span{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.45;max-width:30em}

/* 6 skills: six plain groups */
.ab-skills-band{background:var(--t-page)}
.ab-skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.5rem,3vw,3rem)}
.ab-skills article{padding:1.6rem 0 1.8rem;border-top:1px solid color-mix(in srgb,var(--fg) 26%,transparent)}
.ab-skills h3{margin:0;font:700 clamp(1.3rem,2vw,1.55rem)/1.15 var(--disp);letter-spacing:-.02em}
.ab-skills p{margin:.6rem 0 0;font-size:1.0625rem;line-height:1.45}
.ab-skills small{display:block;margin-top:.8rem;font-size:1rem;line-height:1.5;color:var(--muted)}
.ab-skills .ab-skill-proof{margin-top:.9rem;font-size:1rem;color:var(--muted)}
.ab-skill-proof a{color:var(--t-link);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* 7 hobbies: two big picture cards, calm */
.ab-hobby{background:var(--t-soft)}
.ab-cards{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}
.ab-card{position:relative;display:block;min-height:clamp(380px,46vw,560px);border-radius:0;overflow:hidden;color:#fff;text-decoration:none;background:#10131c;isolation:isolate}
.ab-card-pics{position:absolute;inset:0;display:grid;grid-template-rows:repeat(3,1fr)}
.ab-card.demo .ab-card-pics{display:block}
.ab-card-pics img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ab-card:hover .ab-card-pics img,.ab-card:focus-visible .ab-card-pics img{transform:scale(1.05)}
.ab-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,13,.1) 30%,rgba(8,9,13,.88))}
.ab-card-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.4rem}
.ab-card-txt strong{font:700 clamp(1.8rem,3vw,2.5rem)/1.1 var(--disp);letter-spacing:-.03em}
.ab-card-txt span{max-width:26em;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.45;color:#e8ebf2}
.ab-credit{margin:1.2rem 0 0;font-size:1rem;color:var(--muted)}

/* 8 contact: solid accent */
.ab-contact{background:var(--t-link);color:#fff}
[data-theme=neon] .ab-contact{color:#06100d}
.ab-contact h2{margin:0;font:700 clamp(2.8rem,8vw,6rem)/1.02 var(--disp);letter-spacing:-.05em}
.ab-contact-line{margin:1rem 0 0;font-size:clamp(1.15rem,2vw,1.5rem)}
.ab-contact .ab-btn{background:#fff;border-color:#fff;color:#0b1210}
.ab-contact .ab-btn.alt{background:transparent;border-color:currentColor;color:inherit}
[data-theme=neon] .ab-contact .ab-btn{background:#06100d;border-color:#06100d;color:#fff}
[data-theme=neon] .ab-contact .ab-btn.alt{background:transparent;border-color:#06100d;color:#06100d}
.ab-contact a:focus-visible{outline-color:currentColor}

/* reveals, only when about.js ran */
.ab-js [data-rise]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease,ease),transform .6s var(--ease,ease)}
.ab-js [data-rise].is-in{opacity:1;transform:none}

@media (max-width:980px){
  .ab-hero-in,.ab-cards{grid-template-columns:1fr}
  .ab-title{max-width:16ch}
  .ab-skills{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ab-skills{grid-template-columns:1fr}
  .ab-tl li{grid-template-columns:1fr;gap:.2rem}
  .ab-tl li::before{top:1.95rem}
  .ab-card{min-height:360px}
}
@media (prefers-reduced-motion:reduce){
  .ab-js [data-rise],.ab-card-pics img{transition:none;opacity:1;transform:none}
}

/* hobbies: games and AI side by side */
.ab-card.games{grid-column:1;grid-row:1;min-height:clamp(320px,34vw,420px)}
.ab-card.ai{grid-column:2;grid-row:1;min-height:clamp(320px,34vw,420px)}
.ab-card.ai .ab-card-pics{display:block}
.ab-card.ai .ab-card-pics img{opacity:.88;object-position:center 38%}
@media (max-width:860px){.ab-cards{grid-template-columns:1fr;grid-template-rows:none}.ab-card.games,.ab-card.demo,.ab-card.ai{grid-column:auto;grid-row:auto}.ab-card.games{min-height:320px}.ab-card.demo,.ab-card.ai{min-height:260px}}
.ab-card.ai::after{background:linear-gradient(180deg,rgba(8,9,13,0) 0%,rgba(8,9,13,.2) 45%,rgba(8,9,13,.9) 100%)}
.ab-hero-credit{position:absolute;right:1.25rem;bottom:.75rem;z-index:1;margin:0;font:400 .78rem/1.4 var(--mono);color:rgba(242,244,248,.78);text-align:right}
.ab-hero-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){
  .ab-hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--t-ink) 88%,transparent) 0%,color-mix(in srgb,var(--t-ink) 74%,transparent) 55%,var(--t-ink) 100%)}
  .ab-hero-credit{left:1rem;right:1rem;text-align:left}
}