/* rekosk.dev styles, split by part of the page into css/*.css. index.html links them in a fixed order, which
   matters where two rules set the same thing: keep the order when adding a file.
   base.css: colours, resets and fonts, the reveal helpers, sections (bands, torn edges, titles) and their backgrounds */
html{scroll-behavior:smooth}
html.intro-lock,html.intro-lock body{overflow:hidden;overscroll-behavior:none} /* no scrolling until the intro ends or is skipped */
body{margin:0;background:#0b0b0b}
a{color:#fe7700}a:hover{color:#ffa04d}
.rk,.rk *,.rk *::before,.rk *::after{box-sizing:border-box}
.rk{--or:#fe7700;--or2:#ff9a3d;--ink:#0b0b0b;--coal:#121212;--card:#161616;--gray:#8f8f8f;--mid:#bdb8b1;--fog:#dcd8d2;--white:#f6f3ee;--H:clamp(640px,100vh,1040px);--S:min(calc(var(--H) * .74),94vw,760px);--dy:0px;--is:.5;--gut:clamp(16px,4vw,64px);--sec:clamp(72px,9vw,128px);position:relative;min-height:100vh;background:var(--ink);color:var(--fog);font-family:'Poppins',system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
.rk ::selection{background:var(--or);color:#0b0b0b}
.mk{font-family:'Permanent Marker',cursive;font-weight:400}
.mono{font-family:'Montserrat',ui-monospace,monospace}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* reveal helpers */
.rv-item{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter .9s ease var(--d,0s)}
.rk.rv .rv-item{opacity:1;transform:none;filter:none}
.d1{--d:.05s}.d2{--d:.18s}.d3{--d:.32s}.d4{--d:.46s}
.rv-fade{opacity:0;transition:opacity 1.2s ease .5s}
.rk.rv .rv-fade{opacity:1}

@supports (height:100svh){.rk{--H:clamp(640px,100svh,1040px)}}

/* sections */
.band{position:relative;padding:var(--sec) var(--gut)}
.band-coal{background:var(--coal)}
.band-or{background:var(--or);color:#0b0b0b;overflow:hidden}
.wrap{position:relative;max-width:1280px;margin:0 auto}
.rip{position:absolute;left:0;right:0;bottom:-1px;height:30px;pointer-events:none;clip-path:polygon(0 100%,0 46%,3% 66%,7% 34%,11% 58%,15% 26%,20% 62%,24% 38%,29% 72%,33% 30%,38% 60%,42% 22%,47% 56%,52% 34%,56% 68%,61% 28%,65% 58%,70% 36%,74% 64%,79% 24%,83% 54%,88% 32%,92% 62%,96% 38%,100% 56%,100% 100%)}
.hero-rip{z-index:44}
.rip-coal{background:var(--coal)}.rip-ink{background:var(--ink)}.rip-or{background:var(--or)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 22px;margin-bottom:clamp(36px,5vw,64px)}
.sec-title{position:relative;isolation:isolate;margin:0;padding:.14em .3em .06em;font-weight:900;font-size:clamp(42px,6.4vw,96px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;color:#0b0b0b;cursor:default}
.sec-brush{position:absolute;inset:0;z-index:-1;background:var(--or);clip-path:polygon(0% 16%,4% 6%,11% 11%,19% 3%,28% 9%,37% 2%,47% 8%,56% 1%,66% 7%,75% 2%,84% 9%,92% 3%,100% 10%,98% 52%,100% 89%,93% 97%,85% 91%,76% 99%,66% 93%,57% 100%,47% 94%,37% 99%,27% 92%,18% 98%,9% 93%,1% 97%,2% 55%);transform-origin:left center;transition:clip-path .5s cubic-bezier(.34,1.56,.64,1),transform .5s cubic-bezier(.34,1.56,.64,1)}
.sec-title:hover .sec-brush{clip-path:polygon(1% 10%,5% 2%,12% 8%,20% 1%,29% 6%,38% 0%,48% 5%,57% 0%,67% 4%,76% 0%,85% 6%,93% 1%,99% 6%,100% 50%,99% 93%,92% 100%,84% 95%,75% 100%,65% 96%,56% 100%,46% 96%,36% 100%,26% 95%,17% 100%,8% 96%,0% 100%,0% 52%);transform:skewX(-5deg) scaleY(1.06);transition-duration:var(--fd,.5s)}
.band-or .sec-brush{background:#0b0b0b}
.band-or .sec-title{color:var(--or)}
@supports (animation-timeline: view()){
.sec-brush{animation:brushIn linear both;animation-timeline:view();animation-range:entry 30% entry 100%}
@keyframes brushIn{from{scale:0 1}}
.sr{animation:srIn linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
@keyframes srIn{from{opacity:0;translate:0 70px;filter:blur(6px)}}
.tl::after{animation:tlLine linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
@keyframes tlLine{from{transform:scaleY(0)}}
}

.band-first{padding-top:clamp(40px,5vw,64px)}

/* per-section backgrounds: every band has its own tint + texture so sections feel distinct.
   Each band's torn edge (.rip) takes the colour of the band below it. */
.rk{--bg-about:#121212;--bg-offline:#0b120d;--bg-social:#130d12;--bg-projects:#0a0e15;--bg-school:#14181f}
#about{background:var(--bg-about)}
#offline{background:linear-gradient(180deg,#0d1610 0%,var(--bg-offline) 55%,#0a0f0b 100%)}
#social{background:linear-gradient(180deg,#170f15 0%,var(--bg-social) 60%,#100b0f 100%)}
#projects{background:linear-gradient(180deg,#0c111a 0%,var(--bg-projects) 60%,#090c12 100%)}
#school{background:var(--bg-school)}
#about>.rip{background:#0d1610}
#offline>.rip{background:#170f15}
#social>.rip{background:#0c111a}
#projects>.rip{background:#14181f}
#about::before,#offline::before,#social::before,#projects::before,#school::before{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent)}
/* About: dot grid + warm orange glow */
#about::before{background:radial-gradient(60% 50% at 88% 18%,rgba(254,119,0,.07),transparent 70%),radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.6px) 0 0/16px 16px}
/* the falling 0s and 1s behind About me: three layers of the same tile, scrolling down
   at different speeds (taller tile = faster), like matrix rain. Pure CSS, no JS. */
#about::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='576' height='396'><g fill='%23f6f3ee' font-family='JetBrains Mono,monospace' font-size='13' font-weight='700' text-anchor='middle'><text x='156' y='16' fill-opacity='0.10'>1</text><text x='228' y='16' fill-opacity='0.075'>0</text><text x='252' y='16' fill-opacity='0.10'>0</text><text x='444' y='16' fill-opacity='0.05'>0</text><text x='12' y='38' fill-opacity='0.05'>1</text><text x='300' y='38' fill-opacity='0.05'>1</text><text x='324' y='38' fill-opacity='0.075'>1</text><text x='348' y='38' fill-opacity='0.05'>0</text><text x='372' y='38' fill-opacity='0.05'>1</text><text x='492' y='38' fill-opacity='0.10'>1</text><text x='564' y='38' fill-opacity='0.075'>0</text><text x='12' y='60' fill-opacity='0.10'>0</text><text x='36' y='60' fill-opacity='0.075'>1</text><text x='60' y='60' fill-opacity='0.10'>0</text><text x='108' y='60' fill-opacity='0.10'>0</text><text x='228' y='60' fill-opacity='0.10'>1</text><text x='276' y='60' fill-opacity='0.05'>1</text><text x='372' y='60' fill-opacity='0.05'>0</text><text x='420' y='60' fill-opacity='0.10'>1</text><text x='492' y='60' fill-opacity='0.05'>0</text><text x='516' y='60' fill-opacity='0.075'>1</text><text x='564' y='60' fill-opacity='0.10'>1</text><text x='36' y='82' fill-opacity='0.075'>0</text><text x='180' y='82' fill-opacity='0.10'>0</text><text x='276' y='82' fill-opacity='0.05'>0</text><text x='300' y='82' fill-opacity='0.10'>1</text><text x='468' y='82' fill-opacity='0.10'>0</text><text x='492' y='82' fill-opacity='0.075'>0</text><text x='564' y='82' fill-opacity='0.05'>0</text><text x='60' y='104' fill-opacity='0.05'>1</text><text x='132' y='104' fill-opacity='0.075'>0</text><text x='276' y='104' fill-opacity='0.05'>0</text><text x='372' y='104' fill-opacity='0.10'>0</text><text x='492' y='104' fill-opacity='0.10'>1</text><text x='372' y='126' fill-opacity='0.10'>0</text><text x='12' y='148' fill-opacity='0.10'>0</text><text x='60' y='148' fill-opacity='0.05'>0</text><text x='108' y='148' fill-opacity='0.10'>1</text><text x='156' y='148' fill-opacity='0.075'>0</text><text x='204' y='148' fill-opacity='0.05'>1</text><text x='348' y='148' fill-opacity='0.075'>0</text><text x='468' y='148' fill-opacity='0.075'>1</text><text x='36' y='170' fill-opacity='0.075'>1</text><text x='84' y='170' fill-opacity='0.075'>1</text><text x='252' y='170' fill-opacity='0.05'>1</text><text x='300' y='170' fill-opacity='0.10'>1</text><text x='396' y='170' fill-opacity='0.05'>1</text><text x='444' y='170' fill-opacity='0.075'>0</text><text x='540' y='170' fill-opacity='0.05'>1</text><text x='36' y='192' fill-opacity='0.075'>1</text><text x='60' y='192' fill-opacity='0.05'>1</text><text x='108' y='192' fill-opacity='0.05'>1</text><text x='252' y='192' fill-opacity='0.10'>0</text><text x='276' y='192' fill-opacity='0.10'>1</text><text x='300' y='192' fill-opacity='0.075'>0</text><text x='540' y='192' fill-opacity='0.10'>0</text><text x='564' y='192' fill-opacity='0.075'>0</text><text x='180' y='214' fill-opacity='0.075'>1</text><text x='276' y='214' fill-opacity='0.05'>1</text><text x='324' y='214' fill-opacity='0.075'>0</text><text x='108' y='236' fill-opacity='0.10'>1</text><text x='228' y='236' fill-opacity='0.05'>1</text><text x='276' y='236' fill-opacity='0.10'>0</text><text x='348' y='236' fill-opacity='0.05'>1</text><text x='420' y='236' fill-opacity='0.05'>0</text><text x='444' y='236' fill-opacity='0.10'>1</text><text x='12' y='258' fill-opacity='0.075'>1</text><text x='60' y='258' fill-opacity='0.075'>0</text><text x='108' y='258' fill-opacity='0.05'>0</text><text x='132' y='258' fill-opacity='0.05'>0</text><text x='252' y='258' fill-opacity='0.10'>0</text><text x='396' y='258' fill-opacity='0.10'>1</text><text x='540' y='258' fill-opacity='0.05'>0</text><text x='156' y='280' fill-opacity='0.05'>0</text><text x='180' y='280' fill-opacity='0.05'>0</text><text x='252' y='280' fill-opacity='0.075'>0</text><text x='276' y='280' fill-opacity='0.10'>0</text><text x='300' y='280' fill-opacity='0.10'>1</text><text x='372' y='280' fill-opacity='0.10'>1</text><text x='444' y='280' fill-opacity='0.05'>1</text><text x='468' y='280' fill-opacity='0.05'>1</text><text x='492' y='280' fill-opacity='0.05'>0</text><text x='516' y='280' fill-opacity='0.05'>1</text><text x='564' y='280' fill-opacity='0.05'>0</text><text x='204' y='302' fill-opacity='0.10'>0</text><text x='252' y='302' fill-opacity='0.075'>1</text><text x='324' y='302' fill-opacity='0.05'>0</text><text x='372' y='302' fill-opacity='0.05'>1</text><text x='420' y='302' fill-opacity='0.10'>1</text><text x='204' y='324' fill-opacity='0.075'>1</text><text x='252' y='324' fill-opacity='0.075'>0</text><text x='12' y='346' fill-opacity='0.10'>0</text><text x='108' y='346' fill-opacity='0.05'>1</text><text x='132' y='346' fill-opacity='0.075'>1</text><text x='300' y='346' fill-opacity='0.075'>0</text><text x='252' y='368' fill-opacity='0.05'>0</text><text x='348' y='368' fill-opacity='0.075'>1</text><text x='372' y='368' fill-opacity='0.10'>1</text><text x='396' y='368' fill-opacity='0.05'>1</text><text x='492' y='368' fill-opacity='0.05'>1</text><text x='516' y='368' fill-opacity='0.05'>0</text><text x='540' y='368' fill-opacity='0.075'>1</text><text x='564' y='368' fill-opacity='0.05'>1</text><text x='36' y='390' fill-opacity='0.075'>0</text><text x='324' y='390' fill-opacity='0.075'>1</text><text x='444' y='390' fill-opacity='0.075'>0</text><text x='468' y='390' fill-opacity='0.05'>0</text><text x='516' y='390' fill-opacity='0.05'>0</text></g></svg>") 0 0/576px 396px,url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='576' height='396'><g fill='%23f6f3ee' font-family='JetBrains Mono,monospace' font-size='13' font-weight='700' text-anchor='middle'><text x='156' y='16' fill-opacity='0.10'>1</text><text x='228' y='16' fill-opacity='0.075'>0</text><text x='252' y='16' fill-opacity='0.10'>0</text><text x='444' y='16' fill-opacity='0.05'>0</text><text x='12' y='38' fill-opacity='0.05'>1</text><text x='300' y='38' fill-opacity='0.05'>1</text><text x='324' y='38' fill-opacity='0.075'>1</text><text x='348' y='38' fill-opacity='0.05'>0</text><text x='372' y='38' fill-opacity='0.05'>1</text><text x='492' y='38' fill-opacity='0.10'>1</text><text x='564' y='38' fill-opacity='0.075'>0</text><text x='12' y='60' fill-opacity='0.10'>0</text><text x='36' y='60' fill-opacity='0.075'>1</text><text x='60' y='60' fill-opacity='0.10'>0</text><text x='108' y='60' fill-opacity='0.10'>0</text><text x='228' y='60' fill-opacity='0.10'>1</text><text x='276' y='60' fill-opacity='0.05'>1</text><text x='372' y='60' fill-opacity='0.05'>0</text><text x='420' y='60' fill-opacity='0.10'>1</text><text x='492' y='60' fill-opacity='0.05'>0</text><text x='516' y='60' fill-opacity='0.075'>1</text><text x='564' y='60' fill-opacity='0.10'>1</text><text x='36' y='82' fill-opacity='0.075'>0</text><text x='180' y='82' fill-opacity='0.10'>0</text><text x='276' y='82' fill-opacity='0.05'>0</text><text x='300' y='82' fill-opacity='0.10'>1</text><text x='468' y='82' fill-opacity='0.10'>0</text><text x='492' y='82' fill-opacity='0.075'>0</text><text x='564' y='82' fill-opacity='0.05'>0</text><text x='60' y='104' fill-opacity='0.05'>1</text><text x='132' y='104' fill-opacity='0.075'>0</text><text x='276' y='104' fill-opacity='0.05'>0</text><text x='372' y='104' fill-opacity='0.10'>0</text><text x='492' y='104' fill-opacity='0.10'>1</text><text x='372' y='126' fill-opacity='0.10'>0</text><text x='12' y='148' fill-opacity='0.10'>0</text><text x='60' y='148' fill-opacity='0.05'>0</text><text x='108' y='148' fill-opacity='0.10'>1</text><text x='156' y='148' fill-opacity='0.075'>0</text><text x='204' y='148' fill-opacity='0.05'>1</text><text x='348' y='148' fill-opacity='0.075'>0</text><text x='468' y='148' fill-opacity='0.075'>1</text><text x='36' y='170' fill-opacity='0.075'>1</text><text x='84' y='170' fill-opacity='0.075'>1</text><text x='252' y='170' fill-opacity='0.05'>1</text><text x='300' y='170' fill-opacity='0.10'>1</text><text x='396' y='170' fill-opacity='0.05'>1</text><text x='444' y='170' fill-opacity='0.075'>0</text><text x='540' y='170' fill-opacity='0.05'>1</text><text x='36' y='192' fill-opacity='0.075'>1</text><text x='60' y='192' fill-opacity='0.05'>1</text><text x='108' y='192' fill-opacity='0.05'>1</text><text x='252' y='192' fill-opacity='0.10'>0</text><text x='276' y='192' fill-opacity='0.10'>1</text><text x='300' y='192' fill-opacity='0.075'>0</text><text x='540' y='192' fill-opacity='0.10'>0</text><text x='564' y='192' fill-opacity='0.075'>0</text><text x='180' y='214' fill-opacity='0.075'>1</text><text x='276' y='214' fill-opacity='0.05'>1</text><text x='324' y='214' fill-opacity='0.075'>0</text><text x='108' y='236' fill-opacity='0.10'>1</text><text x='228' y='236' fill-opacity='0.05'>1</text><text x='276' y='236' fill-opacity='0.10'>0</text><text x='348' y='236' fill-opacity='0.05'>1</text><text x='420' y='236' fill-opacity='0.05'>0</text><text x='444' y='236' fill-opacity='0.10'>1</text><text x='12' y='258' fill-opacity='0.075'>1</text><text x='60' y='258' fill-opacity='0.075'>0</text><text x='108' y='258' fill-opacity='0.05'>0</text><text x='132' y='258' fill-opacity='0.05'>0</text><text x='252' y='258' fill-opacity='0.10'>0</text><text x='396' y='258' fill-opacity='0.10'>1</text><text x='540' y='258' fill-opacity='0.05'>0</text><text x='156' y='280' fill-opacity='0.05'>0</text><text x='180' y='280' fill-opacity='0.05'>0</text><text x='252' y='280' fill-opacity='0.075'>0</text><text x='276' y='280' fill-opacity='0.10'>0</text><text x='300' y='280' fill-opacity='0.10'>1</text><text x='372' y='280' fill-opacity='0.10'>1</text><text x='444' y='280' fill-opacity='0.05'>1</text><text x='468' y='280' fill-opacity='0.05'>1</text><text x='492' y='280' fill-opacity='0.05'>0</text><text x='516' y='280' fill-opacity='0.05'>1</text><text x='564' y='280' fill-opacity='0.05'>0</text><text x='204' y='302' fill-opacity='0.10'>0</text><text x='252' y='302' fill-opacity='0.075'>1</text><text x='324' y='302' fill-opacity='0.05'>0</text><text x='372' y='302' fill-opacity='0.05'>1</text><text x='420' y='302' fill-opacity='0.10'>1</text><text x='204' y='324' fill-opacity='0.075'>1</text><text x='252' y='324' fill-opacity='0.075'>0</text><text x='12' y='346' fill-opacity='0.10'>0</text><text x='108' y='346' fill-opacity='0.05'>1</text><text x='132' y='346' fill-opacity='0.075'>1</text><text x='300' y='346' fill-opacity='0.075'>0</text><text x='252' y='368' fill-opacity='0.05'>0</text><text x='348' y='368' fill-opacity='0.075'>1</text><text x='372' y='368' fill-opacity='0.10'>1</text><text x='396' y='368' fill-opacity='0.05'>1</text><text x='492' y='368' fill-opacity='0.05'>1</text><text x='516' y='368' fill-opacity='0.05'>0</text><text x='540' y='368' fill-opacity='0.075'>1</text><text x='564' y='368' fill-opacity='0.05'>1</text><text x='36' y='390' fill-opacity='0.075'>0</text><text x='324' y='390' fill-opacity='0.075'>1</text><text x='444' y='390' fill-opacity='0.075'>0</text><text x='468' y='390' fill-opacity='0.05'>0</text><text x='516' y='390' fill-opacity='0.05'>0</text></g></svg>") 190px 0/432px 297px,url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='576' height='396'><g fill='%23f6f3ee' font-family='JetBrains Mono,monospace' font-size='13' font-weight='700' text-anchor='middle'><text x='156' y='16' fill-opacity='0.10'>1</text><text x='228' y='16' fill-opacity='0.075'>0</text><text x='252' y='16' fill-opacity='0.10'>0</text><text x='444' y='16' fill-opacity='0.05'>0</text><text x='12' y='38' fill-opacity='0.05'>1</text><text x='300' y='38' fill-opacity='0.05'>1</text><text x='324' y='38' fill-opacity='0.075'>1</text><text x='348' y='38' fill-opacity='0.05'>0</text><text x='372' y='38' fill-opacity='0.05'>1</text><text x='492' y='38' fill-opacity='0.10'>1</text><text x='564' y='38' fill-opacity='0.075'>0</text><text x='12' y='60' fill-opacity='0.10'>0</text><text x='36' y='60' fill-opacity='0.075'>1</text><text x='60' y='60' fill-opacity='0.10'>0</text><text x='108' y='60' fill-opacity='0.10'>0</text><text x='228' y='60' fill-opacity='0.10'>1</text><text x='276' y='60' fill-opacity='0.05'>1</text><text x='372' y='60' fill-opacity='0.05'>0</text><text x='420' y='60' fill-opacity='0.10'>1</text><text x='492' y='60' fill-opacity='0.05'>0</text><text x='516' y='60' fill-opacity='0.075'>1</text><text x='564' y='60' fill-opacity='0.10'>1</text><text x='36' y='82' fill-opacity='0.075'>0</text><text x='180' y='82' fill-opacity='0.10'>0</text><text x='276' y='82' fill-opacity='0.05'>0</text><text x='300' y='82' fill-opacity='0.10'>1</text><text x='468' y='82' fill-opacity='0.10'>0</text><text x='492' y='82' fill-opacity='0.075'>0</text><text x='564' y='82' fill-opacity='0.05'>0</text><text x='60' y='104' fill-opacity='0.05'>1</text><text x='132' y='104' fill-opacity='0.075'>0</text><text x='276' y='104' fill-opacity='0.05'>0</text><text x='372' y='104' fill-opacity='0.10'>0</text><text x='492' y='104' fill-opacity='0.10'>1</text><text x='372' y='126' fill-opacity='0.10'>0</text><text x='12' y='148' fill-opacity='0.10'>0</text><text x='60' y='148' fill-opacity='0.05'>0</text><text x='108' y='148' fill-opacity='0.10'>1</text><text x='156' y='148' fill-opacity='0.075'>0</text><text x='204' y='148' fill-opacity='0.05'>1</text><text x='348' y='148' fill-opacity='0.075'>0</text><text x='468' y='148' fill-opacity='0.075'>1</text><text x='36' y='170' fill-opacity='0.075'>1</text><text x='84' y='170' fill-opacity='0.075'>1</text><text x='252' y='170' fill-opacity='0.05'>1</text><text x='300' y='170' fill-opacity='0.10'>1</text><text x='396' y='170' fill-opacity='0.05'>1</text><text x='444' y='170' fill-opacity='0.075'>0</text><text x='540' y='170' fill-opacity='0.05'>1</text><text x='36' y='192' fill-opacity='0.075'>1</text><text x='60' y='192' fill-opacity='0.05'>1</text><text x='108' y='192' fill-opacity='0.05'>1</text><text x='252' y='192' fill-opacity='0.10'>0</text><text x='276' y='192' fill-opacity='0.10'>1</text><text x='300' y='192' fill-opacity='0.075'>0</text><text x='540' y='192' fill-opacity='0.10'>0</text><text x='564' y='192' fill-opacity='0.075'>0</text><text x='180' y='214' fill-opacity='0.075'>1</text><text x='276' y='214' fill-opacity='0.05'>1</text><text x='324' y='214' fill-opacity='0.075'>0</text><text x='108' y='236' fill-opacity='0.10'>1</text><text x='228' y='236' fill-opacity='0.05'>1</text><text x='276' y='236' fill-opacity='0.10'>0</text><text x='348' y='236' fill-opacity='0.05'>1</text><text x='420' y='236' fill-opacity='0.05'>0</text><text x='444' y='236' fill-opacity='0.10'>1</text><text x='12' y='258' fill-opacity='0.075'>1</text><text x='60' y='258' fill-opacity='0.075'>0</text><text x='108' y='258' fill-opacity='0.05'>0</text><text x='132' y='258' fill-opacity='0.05'>0</text><text x='252' y='258' fill-opacity='0.10'>0</text><text x='396' y='258' fill-opacity='0.10'>1</text><text x='540' y='258' fill-opacity='0.05'>0</text><text x='156' y='280' fill-opacity='0.05'>0</text><text x='180' y='280' fill-opacity='0.05'>0</text><text x='252' y='280' fill-opacity='0.075'>0</text><text x='276' y='280' fill-opacity='0.10'>0</text><text x='300' y='280' fill-opacity='0.10'>1</text><text x='372' y='280' fill-opacity='0.10'>1</text><text x='444' y='280' fill-opacity='0.05'>1</text><text x='468' y='280' fill-opacity='0.05'>1</text><text x='492' y='280' fill-opacity='0.05'>0</text><text x='516' y='280' fill-opacity='0.05'>1</text><text x='564' y='280' fill-opacity='0.05'>0</text><text x='204' y='302' fill-opacity='0.10'>0</text><text x='252' y='302' fill-opacity='0.075'>1</text><text x='324' y='302' fill-opacity='0.05'>0</text><text x='372' y='302' fill-opacity='0.05'>1</text><text x='420' y='302' fill-opacity='0.10'>1</text><text x='204' y='324' fill-opacity='0.075'>1</text><text x='252' y='324' fill-opacity='0.075'>0</text><text x='12' y='346' fill-opacity='0.10'>0</text><text x='108' y='346' fill-opacity='0.05'>1</text><text x='132' y='346' fill-opacity='0.075'>1</text><text x='300' y='346' fill-opacity='0.075'>0</text><text x='252' y='368' fill-opacity='0.05'>0</text><text x='348' y='368' fill-opacity='0.075'>1</text><text x='372' y='368' fill-opacity='0.10'>1</text><text x='396' y='368' fill-opacity='0.05'>1</text><text x='492' y='368' fill-opacity='0.05'>1</text><text x='516' y='368' fill-opacity='0.05'>0</text><text x='540' y='368' fill-opacity='0.075'>1</text><text x='564' y='368' fill-opacity='0.05'>1</text><text x='36' y='390' fill-opacity='0.075'>0</text><text x='324' y='390' fill-opacity='0.075'>1</text><text x='444' y='390' fill-opacity='0.075'>0</text><text x='468' y='390' fill-opacity='0.05'>0</text><text x='516' y='390' fill-opacity='0.05'>0</text></g></svg>") 70px 0/720px 495px;animation:aboutRain 34s linear infinite}
@keyframes aboutRain{from{background-position:0 0,190px 0,70px 0}to{background-position:0 396px,190px 297px,70px 495px}}
@media (prefers-reduced-motion:reduce){#about::after{animation:none}}
/* keep the rain behind the content and behind the torn edge */
#about>.wrap{z-index:1}
#about>.rip{z-index:2}
/* When I'm offline: topographic contour lines, like a hiking map */
#offline::before{background:radial-gradient(55% 40% at 12% 30%,rgba(120,190,110,.07),transparent 70%),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><g fill='none' stroke='%23b9dcb4' stroke-opacity='.075' stroke-width='1.2'><path d='M261 240 260 244 257 246 254 249 251 251 249 253 245 254 242 254 238 254 234 254 230 255 226 253 223 250 223 246 224 243 225 240 225 237 224 234 225 231 227 228 231 226 234 224 238 223 242 224 246 225 248 228 250 231 252 232 256 234 259 237Z'/><path d='M288 240 285 248 279 255 273 260 267 265 260 269 252 271 244 272 236 274 226 275 216 275 207 271 203 263 203 254 204 246 204 240 202 233 202 226 205 218 211 212 218 207 226 203 235 201 245 203 252 208 258 214 263 218 271 221 280 225 287 232Z'/><path d='M314 240 307 252 299 262 291 272 282 280 271 285 258 288 246 291 233 295 218 299 201 297 189 288 185 274 185 261 185 250 182 240 178 229 179 217 185 206 194 196 205 188 218 181 232 179 247 184 258 192 267 200 278 204 292 208 306 215 314 227Z'/><path d='M337 240 329 256 320 270 310 283 297 294 281 300 265 305 249 312 230 320 208 324 187 318 174 302 170 283 169 267 164 254 157 240 153 224 156 208 165 193 176 180 191 168 209 160 230 160 249 168 264 178 277 185 295 188 316 193 333 205 340 222Z'/><path d='M359 240 351 260 342 278 329 295 311 307 291 315 272 323 252 336 227 347 199 348 175 336 162 314 156 292 151 274 140 258 131 240 128 220 133 200 144 181 158 163 177 147 201 139 228 143 251 154 269 164 289 168 314 170 341 178 359 195 363 218Z'/><path d='M380 240 373 264 363 286 345 305 323 318 301 330 280 345 255 363 223 375 190 371 165 350 152 324 143 300 130 282 115 263 104 240 103 215 111 191 122 167 138 144 163 127 195 122 226 130 252 142 275 148 303 147 336 149 366 162 382 186 385 214Z'/><path d='M402 240 396 268 383 294 360 314 335 330 313 347 290 370 259 393 220 401 183 389 157 361 142 333 126 310 107 290 88 267 78 240 80 211 87 182 98 152 119 125 151 109 190 109 225 119 254 128 283 127 319 123 358 128 388 148 403 178 405 210Z'/><path d='M18 0 17 3 16 6 14 8 11 10 8 12 5 14 2 16 -2 18 -7 17 -10 14 -12 11 -13 8 -14 5 -16 3 -18 0 -18 -3 -17 -6 -15 -9 -13 -13 -10 -15 -6 -15 -2 -14 2 -13 5 -12 8 -12 13 -12 16 -10 19 -7 19 -3Z'/><path transform='translate(480 0)' d='M18 0 17 3 16 6 14 8 11 10 8 12 5 14 2 16 -2 18 -7 17 -10 14 -12 11 -13 8 -14 5 -16 3 -18 0 -18 -3 -17 -6 -15 -9 -13 -13 -10 -15 -6 -15 -2 -14 2 -13 5 -12 8 -12 13 -12 16 -10 19 -7 19 -3Z'/><path transform='translate(0 480)' d='M18 0 17 3 16 6 14 8 11 10 8 12 5 14 2 16 -2 18 -7 17 -10 14 -12 11 -13 8 -14 5 -16 3 -18 0 -18 -3 -17 -6 -15 -9 -13 -13 -10 -15 -6 -15 -2 -14 2 -13 5 -12 8 -12 13 -12 16 -10 19 -7 19 -3Z'/><path transform='translate(480 480)' d='M18 0 17 3 16 6 14 8 11 10 8 12 5 14 2 16 -2 18 -7 17 -10 14 -12 11 -13 8 -14 5 -16 3 -18 0 -18 -3 -17 -6 -15 -9 -13 -13 -10 -15 -6 -15 -2 -14 2 -13 5 -12 8 -12 13 -12 16 -10 19 -7 19 -3Z'/><path d='M42 0 41 7 37 14 31 19 25 23 19 28 13 34 5 40 -5 42 -15 39 -21 31 -25 24 -29 18 -35 13 -39 7 -42 0 -42 -8 -40 -15 -37 -23 -31 -30 -23 -34 -13 -34 -4 -31 4 -29 11 -29 21 -30 31 -29 38 -24 42 -16 43 -8Z'/><path transform='translate(480 0)' d='M42 0 41 7 37 14 31 19 25 23 19 28 13 34 5 40 -5 42 -15 39 -21 31 -25 24 -29 18 -35 13 -39 7 -42 0 -42 -8 -40 -15 -37 -23 -31 -30 -23 -34 -13 -34 -4 -31 4 -29 11 -29 21 -30 31 -29 38 -24 42 -16 43 -8Z'/><path transform='translate(0 480)' d='M42 0 41 7 37 14 31 19 25 23 19 28 13 34 5 40 -5 42 -15 39 -21 31 -25 24 -29 18 -35 13 -39 7 -42 0 -42 -8 -40 -15 -37 -23 -31 -30 -23 -34 -13 -34 -4 -31 4 -29 11 -29 21 -30 31 -29 38 -24 42 -16 43 -8Z'/><path transform='translate(480 480)' d='M42 0 41 7 37 14 31 19 25 23 19 28 13 34 5 40 -5 42 -15 39 -21 31 -25 24 -29 18 -35 13 -39 7 -42 0 -42 -8 -40 -15 -37 -23 -31 -30 -23 -34 -13 -34 -4 -31 4 -29 11 -29 21 -30 31 -29 38 -24 42 -16 43 -8Z'/><path d='M66 0 63 11 57 21 47 29 39 37 31 46 22 57 8 65 -8 65 -22 58 -32 46 -39 37 -47 29 -56 21 -63 11 -66 0 -66 -12 -64 -24 -59 -37 -50 -47 -35 -51 -19 -50 -6 -47 6 -46 19 -49 34 -51 49 -47 60 -37 64 -24 66 -12Z'/><path transform='translate(480 0)' d='M66 0 63 11 57 21 47 29 39 37 31 46 22 57 8 65 -8 65 -22 58 -32 46 -39 37 -47 29 -56 21 -63 11 -66 0 -66 -12 -64 -24 -59 -37 -50 -47 -35 -51 -19 -50 -6 -47 6 -46 19 -49 34 -51 49 -47 60 -37 64 -24 66 -12Z'/><path transform='translate(0 480)' d='M66 0 63 11 57 21 47 29 39 37 31 46 22 57 8 65 -8 65 -22 58 -32 46 -39 37 -47 29 -56 21 -63 11 -66 0 -66 -12 -64 -24 -59 -37 -50 -47 -35 -51 -19 -50 -6 -47 6 -46 19 -49 34 -51 49 -47 60 -37 64 -24 66 -12Z'/><path transform='translate(480 480)' d='M66 0 63 11 57 21 47 29 39 37 31 46 22 57 8 65 -8 65 -22 58 -32 46 -39 37 -47 29 -56 21 -63 11 -66 0 -66 -12 -64 -24 -59 -37 -50 -47 -35 -51 -19 -50 -6 -47 6 -46 19 -49 34 -51 49 -47 60 -37 64 -24 66 -12Z'/><path d='M90 0 85 15 75 28 63 39 54 51 45 66 31 82 11 90 -11 86 -28 74 -41 60 -53 50 -66 41 -79 30 -87 16 -90 0 -91 -16 -90 -34 -82 -51 -66 -63 -45 -66 -24 -64 -8 -62 8 -66 27 -72 49 -72 68 -64 79 -49 86 -32 89 -16Z'/><path transform='translate(480 0)' d='M90 0 85 15 75 28 63 39 54 51 45 66 31 82 11 90 -11 86 -28 74 -41 60 -53 50 -66 41 -79 30 -87 16 -90 0 -91 -16 -90 -34 -82 -51 -66 -63 -45 -66 -24 -64 -8 -62 8 -66 27 -72 49 -72 68 -64 79 -49 86 -32 89 -16Z'/><path transform='translate(0 480)' d='M90 0 85 15 75 28 63 39 54 51 45 66 31 82 11 90 -11 86 -28 74 -41 60 -53 50 -66 41 -79 30 -87 16 -90 0 -91 -16 -90 -34 -82 -51 -66 -63 -45 -66 -24 -64 -8 -62 8 -66 27 -72 49 -72 68 -64 79 -49 86 -32 89 -16Z'/><path transform='translate(480 480)' d='M90 0 85 15 75 28 63 39 54 51 45 66 31 82 11 90 -11 86 -28 74 -41 60 -53 50 -66 41 -79 30 -87 16 -90 0 -91 -16 -90 -34 -82 -51 -66 -63 -45 -66 -24 -64 -8 -62 8 -66 27 -72 49 -72 68 -64 79 -49 86 -32 89 -16Z'/><path d='M113 0 105 19 92 35 80 49 72 68 61 90 41 107 14 112 -13 103 -34 88 -51 74 -68 64 -86 53 -101 38 -110 20 -115 0 -118 -21 -117 -44 -104 -64 -81 -76 -53 -78 -29 -77 -10 -80 11 -89 37 -96 63 -93 84 -80 98 -61 107 -40 113 -20Z'/><path transform='translate(480 0)' d='M113 0 105 19 92 35 80 49 72 68 61 90 41 107 14 112 -13 103 -34 88 -51 74 -68 64 -86 53 -101 38 -110 20 -115 0 -118 -21 -117 -44 -104 -64 -81 -76 -53 -78 -29 -77 -10 -80 11 -89 37 -96 63 -93 84 -80 98 -61 107 -40 113 -20Z'/><path transform='translate(0 480)' d='M113 0 105 19 92 35 80 49 72 68 61 90 41 107 14 112 -13 103 -34 88 -51 74 -68 64 -86 53 -101 38 -110 20 -115 0 -118 -21 -117 -44 -104 -64 -81 -76 -53 -78 -29 -77 -10 -80 11 -89 37 -96 63 -93 84 -80 98 -61 107 -40 113 -20Z'/><path transform='translate(480 480)' d='M113 0 105 19 92 35 80 49 72 68 61 90 41 107 14 112 -13 103 -34 88 -51 74 -68 64 -86 53 -101 38 -110 20 -115 0 -118 -21 -117 -44 -104 -64 -81 -76 -53 -78 -29 -77 -10 -80 11 -89 37 -96 63 -93 84 -80 98 -61 107 -40 113 -20Z'/><path d='M134 0 122 22 108 41 100 62 93 88 78 115 50 132 16 131 -15 118 -39 102 -61 90 -85 80 -107 66 -123 47 -134 24 -142 0 -148 -27 -144 -54 -123 -76 -92 -87 -60 -89 -35 -92 -13 -102 14 -116 46 -121 77 -113 100 -94 116 -72 129 -49 136 -25Z'/><path transform='translate(480 0)' d='M134 0 122 22 108 41 100 62 93 88 78 115 50 132 16 131 -15 118 -39 102 -61 90 -85 80 -107 66 -123 47 -134 24 -142 0 -148 -27 -144 -54 -123 -76 -92 -87 -60 -89 -35 -92 -13 -102 14 -116 46 -121 77 -113 100 -94 116 -72 129 -49 136 -25Z'/><path transform='translate(0 480)' d='M134 0 122 22 108 41 100 62 93 88 78 115 50 132 16 131 -15 118 -39 102 -61 90 -85 80 -107 66 -123 47 -134 24 -142 0 -148 -27 -144 -54 -123 -76 -92 -87 -60 -89 -35 -92 -13 -102 14 -116 46 -121 77 -113 100 -94 116 -72 129 -49 136 -25Z'/><path transform='translate(480 480)' d='M134 0 122 22 108 41 100 62 93 88 78 115 50 132 16 131 -15 118 -39 102 -61 90 -85 80 -107 66 -123 47 -134 24 -142 0 -148 -27 -144 -54 -123 -76 -92 -87 -60 -89 -35 -92 -13 -102 14 -116 46 -121 77 -113 100 -94 116 -72 129 -49 136 -25Z'/></g></svg>") 0 0/480px 480px}
/* Social: diagonal halftone dots */
#social::before{background:radial-gradient(50% 45% at 80% 60%,rgba(255,80,160,.06),transparent 70%),radial-gradient(rgba(255,210,235,.06) 1.3px,transparent 2px) 0 0/12px 12px;-webkit-mask:linear-gradient(115deg,transparent 5%,#000 45%,transparent 95%);mask:linear-gradient(115deg,transparent 5%,#000 45%,transparent 95%)}
/* Projects: blueprint graph paper */
#projects::before{background:radial-gradient(55% 45% at 20% 25%,rgba(90,150,255,.08),transparent 70%),linear-gradient(rgba(140,180,255,.07) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(140,180,255,.07) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(rgba(140,180,255,.03) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(140,180,255,.03) 1px,transparent 1px) 0 0/24px 24px}
/* School: squared notebook paper (24px grid), like the paper in a maths exercise book */
#school::before{background:linear-gradient(#232a36 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#232a36 1px,transparent 1px) 0 0/24px 24px}