/* ==========================================================================
   hkforge.dev v4  ·  creative developer portfolio
   Cool graphite ground, off-white ink, one electric blue. Hanken Grotesk.
   ========================================================================== */

@font-face{font-family:"Hanken";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken.woff2) format("woff2-variations")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-mono.woff2) format("woff2-variations")}

:root{
  color-scheme:dark;
  --bg:#131416;
  --bg-2:#1B1C1F;
  --bg-3:#232428;
  --light:#EDEDEA;
  --light-2:#E1E1DC;
  --text:#EDEDEA;
  --text-2:#9C9C98;
  --text-3:#6D6D69;
  --line:rgba(237,237,234,.12);
  --line-dark:rgba(19,20,22,.14);
  --blue:#2A56E8;
  --blue-2:#3F6BFF;
  --sans:"Hanken",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(20px,4.5vw,64px);
  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:400;background:var(--light);color:var(--bg);padding:10px 14px;border-radius:6px}
.skip:focus{left:8px}
.container{padding-inline:var(--gutter)}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.preloader{position:fixed;inset:0;z-index:300;background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--light);pointer-events:none}
.preloader .word{font-size:clamp(2rem,5vw,3.6rem);font-weight:500;letter-spacing:-.03em;display:flex;align-items:center;gap:.4em}
.preloader .word::before{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--light)}
.preloader.lift{transform:translateY(-100%);transition:transform .9s var(--ease)}
.preloader.done{display:none}
html.no-js .preloader{display:none}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter);mix-blend-mode:difference;color:#fff;transition:transform .55s var(--ease),opacity .4s}
.scrolled .nav{transform:translateY(-110%);opacity:0;pointer-events:none}
.nav .brand{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:1rem;letter-spacing:-.01em}
.nav .brand .mark{width:34px;height:auto}
.nav .brand .who{overflow:hidden;position:relative;height:1.2em;line-height:1.2em}
.nav .brand .who span{display:block;transition:transform .5s var(--ease)}
.nav .brand:hover .who span{transform:translateY(-100%)}
.nav-links{display:flex;gap:28px}
.nav-links a{position:relative;font-size:.98rem;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:-4px;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateX(-50%) scale(0);transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:translateX(-50%) scale(1)}
@media (max-width:900px){.nav-links{display:none}}
.menu-btn{position:fixed;top:18px;right:var(--gutter);z-index:260;width:60px;height:60px;border-radius:50%;background:var(--blue);color:#fff;display:none;align-items:center;justify-content:center;transform:scale(0);transition:transform .4s var(--ease)}
.menu-btn.show,.menu-open .menu-btn{display:inline-flex;transform:scale(1)}
@media (max-width:900px){.menu-btn{display:inline-flex;transform:scale(1)}}
.menu-btn span{display:block;width:22px;height:1.5px;background:#fff;position:relative;transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:#fff;transition:transform .3s,top .3s}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{top:0;transform:rotate(45deg)}
.menu-open .menu-btn span::after{top:0;transform:rotate(-45deg)}
.menu-open .menu-btn{background:var(--bg)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);z-index:250;background:var(--bg-3);color:var(--light);padding:100px var(--gutter) 40px;transform:translateX(100%);visibility:hidden;transition:transform .7s var(--ease),visibility 0s .7s;display:flex;flex-direction:column;justify-content:space-between}
.menu-open .drawer{transform:none;visibility:visible;transition:transform .7s var(--ease),visibility 0s}
.drawer .label{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:24px}
.drawer nav a{display:block;font-size:clamp(2.4rem,7vw,3.4rem);font-weight:400;letter-spacing:-.03em;line-height:1.15;padding:6px 0}
.drawer .socials{display:flex;flex-wrap:wrap;gap:18px;font-size:.9rem;color:var(--text-2)}
.drawer .socials a:hover{color:var(--light)}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--bg-2)}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{width:100%;height:120%;object-fit:cover;object-position:center 40%;will-change:transform}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,20,22,.15) 0%,rgba(19,20,22,.05) 40%,rgba(19,20,22,.7) 100%)}
.hero .side{position:absolute;right:var(--gutter);top:max(44%,150px);display:flex;flex-direction:column;gap:14px;max-width:320px;z-index:2}
.hero .side .arrow{width:26px;height:26px;stroke:currentColor;fill:none}
.hero .side p{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.25;font-weight:400;letter-spacing:-.01em}
.hero .badge{position:absolute;left:var(--gutter);bottom:31%;width:160px;height:160px;z-index:2}
.hero .badge svg{width:100%;height:100%;animation:spin 18s linear infinite}
.hero .badge text{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;fill:var(--light)}
.hero .badge .globe{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero .badge .globe svg{width:34px;height:34px;animation:none;stroke:var(--light);fill:none;stroke-width:1.4}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .name{position:absolute;left:0;right:0;bottom:calc(var(--gutter) * .6);z-index:2;overflow:hidden;white-space:nowrap;font-weight:400;font-size:clamp(4.2rem,14vw,13rem);line-height:1;letter-spacing:-.04em;color:var(--light)}
.hero .name .track{display:inline-flex;will-change:transform}
.hero .name span{padding-right:.35em}
@media (max-width:900px){.hero .side{top:auto;bottom:34%;right:var(--gutter);left:var(--gutter);max-width:none}.hero .badge{display:none}.hero .bg::after{background:linear-gradient(180deg,rgba(19,20,22,.25) 0%,rgba(19,20,22,.25) 35%,rgba(19,20,22,.82) 100%)}}
@media (prefers-reduced-motion:reduce){.hero .badge svg{animation:none}}

/* --------------------------------------------------------------------------
   Statement
   -------------------------------------------------------------------------- */
.statement{padding:clamp(100px,14vw,200px) var(--gutter);display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:960px){.statement{grid-template-columns:1.6fr 1fr;gap:80px;align-items:start}}
.statement h2{font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:400;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.statement .aside{display:grid;gap:34px;padding-top:12px}
.statement .aside p{color:var(--text-2);font-size:1.05rem;line-height:1.55;max-width:38ch}
.roundbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:170px;height:170px;border-radius:50%;background:var(--bg-3);color:var(--light);font-size:1.05rem;overflow:hidden;isolation:isolate;border:1px solid var(--line)}
.roundbtn::before{content:"";position:absolute;inset:0;background:var(--blue);border-radius:50%;transform:scale(0);transition:transform .5s var(--ease);z-index:-1}
.roundbtn:hover::before{transform:scale(1.1)}
.roundbtn.sm{width:120px;height:120px;font-size:.95rem}

/* --------------------------------------------------------------------------
   Work list (light section)
   -------------------------------------------------------------------------- */
.work{background:var(--light);color:var(--bg);padding:clamp(80px,10vw,150px) 0 clamp(80px,10vw,130px);position:relative}
.work .label{color:rgba(19,20,22,.5);padding:0 var(--gutter);margin-bottom:34px;display:flex;justify-content:space-between}
.list{border-top:1px solid var(--line-dark)}
.item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:24px;padding:clamp(28px,4vw,56px) var(--gutter);border-bottom:1px solid var(--line-dark);position:relative;transition:opacity .35s var(--ease);cursor:pointer;user-select:none}
.list:hover .item{opacity:.45}
.list .item:hover,.list .item.open{opacity:1}
.item .t{font-size:clamp(1.8rem,4.6vw,4.2rem);font-weight:400;letter-spacing:-.03em;line-height:1;transition:transform .5s var(--ease)}
.item:hover .t{transform:translateX(-10px)}
.item .m{font-size:1rem;color:rgba(19,20,22,.7);text-align:right;transition:transform .5s var(--ease)}
.item:hover .m{transform:translateX(10px)}
.item .m small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(19,20,22,.5);margin-top:6px}
.item .plus{width:34px;height:34px;border-radius:50%;border:1px solid rgba(19,20,22,.25);position:relative;transition:transform .5s var(--ease),background .3s,border-color .3s,color .3s}
.item .plus::before,.item .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.item .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.item.open .plus{transform:rotate(45deg);background:var(--bg);border-color:var(--bg);color:var(--light)}
.item:focus-visible{outline-offset:-4px}
/* the case: grid-row trick so the panel opens without measuring heights */
.case{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease);border-bottom:0 solid var(--line-dark)}
.case.open{grid-template-rows:1fr;border-bottom-width:1px}
.case-in{overflow:hidden;min-height:0}
.case-grid{display:grid;gap:32px;padding:clamp(28px,4vw,56px) var(--gutter) clamp(36px,5vw,72px);grid-template-columns:1fr;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out) .25s,transform .7s var(--ease-out) .25s}
.case.open .case-grid{opacity:1;transform:none}
@media (min-width:960px){.case-grid{grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}}
.frame{border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(19,20,22,.45),0 0 0 1px rgba(19,20,22,.08)}
.frame .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f2f2ef;border-bottom:1px solid rgba(19,20,22,.08)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:rgba(19,20,22,.16)}
.frame .bar span{margin-left:auto;margin-right:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:rgba(19,20,22,.5);background:#fff;padding:3px 12px;border-radius:20px;border:1px solid rgba(19,20,22,.08)}
.frame .screen{position:relative;overflow:hidden;aspect-ratio:16/11;container-type:size;background:#fff}
.frame.short .screen{aspect-ratio:16/10}
.frame .screen img{position:absolute;left:0;top:0;width:100%;height:auto;transition:transform 9s cubic-bezier(.35,0,.25,1)}
.frame.tall:hover .screen img{transform:translateY(calc(-100% + 100cqh))}
@media (hover:none){.case.open .frame.tall .screen img{animation:frame-scroll 14s ease-in-out infinite alternate}}
@keyframes frame-scroll{from{transform:none}to{transform:translateY(calc(-100% + 100cqh))}}
.case-text{display:grid;gap:18px;align-content:start}
.case-text .label{color:rgba(19,20,22,.5);padding:0;margin:0;display:block}
.case-text h3{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.case-text > p{color:rgba(19,20,22,.72);font-size:1.02rem;line-height:1.55;max-width:52ch}
.case-text .facts{margin:6px 0 0;display:grid;gap:0;border-top:1px solid var(--line-dark)}
.case-text .facts div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-dark)}
.case-text .facts dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(19,20,22,.5);padding-top:4px}
.case-text .facts dd{margin:0;font-size:.98rem;color:var(--bg)}
.pill.dark{border-color:rgba(19,20,22,.3);color:var(--bg);justify-self:start;gap:10px}
.pill.dark:hover{color:#fff;border-color:transparent}
/* hover card: moves with transforms, reveals with clip-path, never scales (scaling rasterizes soft) */
.preview{position:fixed;top:0;left:0;width:400px;height:300px;pointer-events:none;z-index:50;overflow:hidden;border-radius:6px;opacity:0;clip-path:inset(14% round 6px);transition:opacity .3s var(--ease),clip-path .55s var(--ease);background:var(--bg-3);will-change:transform,clip-path;box-shadow:0 30px 60px -25px rgba(19,20,22,.5)}
.preview.on{opacity:1;clip-path:inset(0 round 6px)}
.preview .stack{position:absolute;inset:0;display:block}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .3s}
.preview img.on{opacity:1}
.cursor-tag{position:fixed;top:0;left:0;width:84px;height:84px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.95rem;pointer-events:none;z-index:51;opacity:0;transform:scale(.4);transition:opacity .25s var(--ease),transform .35s var(--ease);will-change:transform}
.cursor-tag.on{opacity:1;transform:none}
@media (hover:none){.preview,.cursor-tag{display:none}}
@media (max-width:700px){.item{grid-template-columns:1fr auto;grid-template-areas:"t plus" "m m";gap:10px 16px}.item .t{grid-area:t}.item .m{grid-area:m;text-align:left}.item .plus{grid-area:plus;align-self:center}.item:hover .t,.item:hover .m{transform:none}}

/* --------------------------------------------------------------------------
   Systems + repos (dark)
   -------------------------------------------------------------------------- */
.section{padding:clamp(90px,12vw,170px) var(--gutter)}
.head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.head h2{font-size:clamp(2rem,5vw,4.4rem);font-weight:400;letter-spacing:-.035em;line-height:1;max-width:18ch;text-wrap:balance}
.head p{color:var(--text-2);max-width:56ch;font-size:1.05rem}
@media (min-width:960px){.head{grid-template-columns:1.4fr 1fr;align-items:end;gap:48px}}
.sys{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.sys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.sys{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sys>div{background:var(--bg);padding:28px 24px 30px;display:grid;gap:12px;align-content:start;transition:background .3s;min-width:0}
.sys>div:hover{background:var(--bg-2)}
.sys .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--text-3)}
.sys h3{font-size:1.25rem;font-weight:500;letter-spacing:-.015em}
.sys p{color:var(--text-2);font-size:.95rem}
.sys .k{display:flex;flex-wrap:wrap;gap:12px 22px;padding-top:14px;border-top:1px solid var(--line);margin-top:auto}
.sys .k b{display:block;font-size:1.35rem;font-weight:500;letter-spacing:-.02em;line-height:1}
.sys .k span{display:block;margin-top:5px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

.repos{display:grid;gap:0;border-top:1px solid var(--line)}
.repo{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
@media (min-width:860px){.repo{grid-template-columns:260px 1fr 150px 110px;gap:24px;align-items:baseline}}
@media (max-width:859px){.repo{grid-template-columns:1fr auto;grid-template-areas:"name tag" "d d" "lang lang";align-items:baseline;column-gap:16px}.repo .name{grid-area:name}.repo .t{grid-area:tag}.repo .d{grid-area:d}.repo .lang{grid-area:lang}}
.repo:hover{padding-left:12px}
.repo .name{font-family:var(--mono);font-size:1rem;color:var(--light)}
.repo .d{color:var(--text-2);font-size:.95rem}
.repo .lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.lang i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--text-3)}
.lang.py i{background:#3B82C4}.lang.go i{background:#00ADD8}.lang.cpp i{background:#E06C9F}.lang.ts i{background:#3178C6}.lang.js i{background:#E8C547}.lang.c i{background:#8D8D8D}.lang.pl i{background:#A9D18E}.lang.html i{background:#E85D2C}
.repo .t{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2)}
.repo-group{padding:34px 0 8px;font-size:.8rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* full-bleed image strip with a slow parallax */
.strip{position:relative;height:70vh;min-height:400px;max-height:820px;overflow:hidden;background:var(--bg-2)}
.strip img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform}


/* about strip */
.about{display:grid;gap:40px;grid-template-columns:1fr;padding:clamp(90px,12vw,170px) var(--gutter)}
@media (min-width:960px){.about{grid-template-columns:1fr 1fr;gap:80px;align-items:center}}
.about .img{border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.about .img img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(1.9rem,4vw,3.4rem);font-weight:400;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.about p{color:var(--text-2);margin-top:20px;max-width:52ch;font-size:1.05rem}
.about .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:34px;border:1px solid var(--line)}
.about .facts div{background:var(--bg);padding:16px}
.about .facts b{display:block;font-size:1.6rem;font-weight:500;letter-spacing:-.02em;line-height:1}
.about .facts span{display:block;margin-top:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

/* experience timeline */
.timeline{border-top:1px solid var(--line)}
.timeline .row{display:grid;grid-template-columns:1fr;gap:10px;padding:28px 0;border-bottom:1px solid var(--line)}
@media (min-width:860px){.timeline .row{grid-template-columns:220px 1fr;gap:40px}}
.timeline .when{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding-top:6px}
.timeline h3{font-size:1.25rem;font-weight:500;letter-spacing:-.015em}
.timeline .org{color:var(--light);opacity:.75;margin-top:4px;font-size:.98rem}
.timeline p:not(.org){color:var(--text-2);margin-top:10px;max-width:64ch;font-size:.98rem}

/* --------------------------------------------------------------------------
   Footer / contact
   -------------------------------------------------------------------------- */
.contact{background:var(--bg-2);color:var(--light);padding:clamp(100px,14vw,200px) var(--gutter) 40px;position:relative;overflow:hidden}
.contact .curve{position:absolute;top:-1px;left:0;right:0;height:80px;pointer-events:none}
.contact .curve svg{width:100%;height:100%;display:block}
.contact h2{font-size:clamp(3rem,9vw,8.5rem);font-weight:400;letter-spacing:-.045em;line-height:.95;max-width:12ch;text-wrap:balance}
.contact .line{display:flex;align-items:center;gap:24px;margin-top:40px;border-bottom:1px solid var(--line);padding-bottom:40px;flex-wrap:wrap}
.contact .line .roundbtn{background:var(--blue);border:0}
.contact .line .roundbtn::before{background:var(--light)}
.contact .line .roundbtn:hover{color:var(--bg)}
.contact .pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.pill{display:inline-flex;align-items:center;height:56px;padding:0 26px;border:1px solid var(--line);border-radius:40px;font-size:1rem;position:relative;overflow:hidden;isolation:isolate}
.pill::before{content:"";position:absolute;inset:0;background:var(--blue);transform:translateY(100%);transition:transform .45s var(--ease);z-index:-1;border-radius:40px}
.pill:hover::before{transform:none}
.pill:hover{color:#fff;border-color:transparent}
.contact .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;margin-top:clamp(60px,10vw,140px);font-size:.92rem}
.contact .meta .col{display:grid;gap:8px}
.contact .meta .label{color:var(--text-3)}
.contact .meta a:hover{color:var(--blue-2)}
.contact .meta .socials{display:flex;gap:22px}

/* --------------------------------------------------------------------------
   Reveal helpers
   -------------------------------------------------------------------------- */
.js .lines .line-in{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.js .lines .line-in > span{display:block;transform:translateY(110%)}
.js .fade{opacity:0;transform:translateY(24px)}
.js .fade.in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.js .lines .line-in > span{transform:none}.js .fade{opacity:1;transform:none}}
.js .hero .side,.js .hero .badge{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.js .hero .badge{transition-delay:.15s}
.js .hero.in .side,.js .hero.in .badge{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .hero .side,.js .hero .badge{opacity:1;transform:none;transition:none}}
/* frame watchdog fallback: everything visible, no scroll-driven reveals */
.js.still .lines .line-in > span{transform:none!important}
.js.still .fade{opacity:1;transform:none}
.js.still .hero .side,.js.still .hero .badge{opacity:1;transform:none}
.js.still .preloader{display:none}

.mt-2{margin-top:24px}.mt-3{margin-top:40px}

.head p a,.statement .aside p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--text-3)}
.head p a:hover{color:var(--light);text-decoration-color:var(--blue-2)}
.about .pill{color:var(--light)}

/* utility pages (404) */
.notfound{min-height:80svh;display:grid;align-content:center;gap:22px;padding-top:140px}
.h1{font-size:clamp(2.6rem,7vw,6rem);font-weight:400;letter-spacing:-.04em;line-height:1;max-width:14ch}
.lead{color:var(--text-2);font-size:1.15rem;max-width:52ch}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}