@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ---------- tokens ---------- */
:root{
    --bg:#191919;
    --bg-raised:#212121;
    --accent:#DFF124;
    --on-accent:#191919;
    --text:#F0F0F0;
    --muted:#F0F0F0A8;
    --line:rgba(240,240,240,.12);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in-out:cubic-bezier(.77,0,.18,1);
    --nav-h:76px;
    --gutter:clamp(16px,4vw,56px);
    --radius:22px;
    color-scheme:dark;
}
:root.lightmode{
    --bg:#F0F0F0;
    --bg-raised:#E5E5E5;
    --accent:#1f67f1;
    --on-accent:#F0F0F0;
    --text:#121212;
    --muted:#121212A8;
    --line:rgba(18,18,18,.14);
    color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"DM Sans",sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--on-accent); }
img{ max-width:100%; display:block; }

/* ---------- icons (sprite inlined in each page) ---------- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
    width:1em; height:1em; flex:none;
    fill:none; stroke:currentColor; stroke-width:1.75;
    stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- page transition curtain ---------- */
.curtain{
    position:fixed; inset:0; z-index:80;
    background:var(--accent);
    color:var(--on-accent);
    display:grid; place-items:center;
    pointer-events:none;
    transform:translateY(100%);
}
.curtain-label{
    font:900 clamp(56px,14vw,200px)/.9 "Big Shoulders",sans-serif;
    overflow:hidden;
}
.curtain-label span{ display:inline-block; transform:translateY(110%); }
.is-entering .curtain{ transform:translateY(0); animation:curtainOut .9s var(--ease-in-out) .15s forwards; }
.is-entering .curtain-label span{ transform:translateY(0); animation:labelOut .5s var(--ease-in-out) forwards; }
.is-leaving .curtain{ animation:curtainIn .6s var(--ease-in-out) forwards; pointer-events:all; }
.is-leaving .curtain-label span{ animation:labelIn .5s var(--ease-out) .3s forwards; }
@keyframes curtainOut{ to{ transform:translateY(-100%); } }
@keyframes curtainIn{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes labelOut{ to{ transform:translateY(-110%); } }
@keyframes labelIn{ to{ transform:translateY(0); } }

/* ---------- signature loader (home, first visit) ---------- */
.loader{
    position:fixed; inset:0; z-index:85;
    background:var(--bg);
    display:flex; justify-content:center; align-items:center;
    pointer-events:none;
    /* fallback exit only; normally the script flies the signature into the nav and removes this */
    animation:loaderExit .9s var(--ease-in-out) 5s forwards;
    transition:background-color .9s var(--ease-in-out);
}
.loader svg{ width:min(295px,60vw); height:auto; }
.loader.is-flying{ background-color:transparent; }
.loader.is-flying svg path{ fill:var(--accent); stroke-width:5; transition:fill .6s ease, stroke-width .6s ease; }
.intro-playing .brand{ visibility:hidden; }
.loader svg path{
    fill:none;
    stroke:var(--accent);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:3000;
    stroke-dashoffset:6000;
    animation:drawSignature 2s ease forwards;
}
@keyframes drawSignature{ to{ stroke-dashoffset:685; } }
@keyframes loaderExit{ to{ clip-path:inset(0 0 100% 0); } }
.intro-seen .loader{ display:none; }

/* ---------- nav ---------- */
.navbar{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--nav-h);
    padding:0 var(--gutter);
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    transition:transform .5s var(--ease-out), background .4s;
}
.navbar.is-scrolled{
    background:color-mix(in srgb,var(--bg) 80%,transparent);
    -webkit-backdrop-filter:blur(14px);
            backdrop-filter:blur(14px);
}
.navbar.is-hidden{ transform:translateY(-100%); }
.brand{ display:block; flex:none; height:calc(var(--nav-h) - 12px); aspect-ratio:295 / 338; }
.brand svg{ display:block; width:100%; height:100%; overflow:visible; }
/* a light stroke thickens the fine pen lines so they read at nav size */
.brand svg path{ fill:var(--accent); stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
/* hovering redraws the signature, like the intro loader */
.brand:hover svg path{
    fill:transparent;
    stroke-width:7;
    stroke-dasharray:3000;
    stroke-dashoffset:6000;
    animation:drawSignature 1.3s ease forwards, signatureFill .45s ease 1.1s forwards;
}
@keyframes signatureFill{ to{ fill:var(--accent); } }
.nav-links{ display:flex; gap:clamp(18px,3vw,40px); list-style:none; margin:0; padding:0; }
.nav-links a{
    position:relative;
    font-size:14px; font-weight:600; letter-spacing:.1em;
    color:var(--muted);
    padding:6px 0;
    transition:color .3s;
}
.nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
    background:var(--accent);
    transform:scaleX(0); transform-origin:right;
    transition:transform .45s var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.nav-actions{ display:flex; align-items:center; gap:12px; }
.theme-btn{
    font-size:12px; font-weight:700; letter-spacing:.14em;
    padding:9px 18px;
    border:1.5px solid var(--accent);
    border-radius:40px;
    color:var(--accent);
    position:relative; overflow:hidden; isolation:isolate;
    transition:color .35s var(--ease-out);
}
.theme-btn::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--accent);
    transform:translateY(101%);
    transition:transform .35s var(--ease-out);
}
.theme-btn:hover{ color:var(--on-accent); }
.theme-btn:hover::before{ transform:translateY(0); }

.menu-btn{
    display:none;
    width:44px; height:44px; border-radius:50%;
    border:1.5px solid var(--line);
    position:relative;
}
.menu-btn span{
    position:absolute; left:12px; right:12px; height:1.5px;
    background:var(--text);
    transition:transform .4s var(--ease-out), top .4s var(--ease-out);
}
.menu-btn span:first-child{ top:17px; }
.menu-btn span:last-child{ top:25px; }
.menu-open .menu-btn span:first-child{ top:21px; transform:rotate(45deg); }
.menu-open .menu-btn span:last-child{ top:21px; transform:rotate(-45deg); }

.mobile-menu{
    position:fixed; inset:0; z-index:45;
    background:var(--bg);
    padding:calc(var(--nav-h) + 24px) var(--gutter) 32px;
    clip-path:circle(0 at calc(100% - var(--gutter) - 22px) calc(var(--nav-h) / 2));
    transition:clip-path .7s var(--ease-in-out);
    visibility:hidden;
}
.menu-open .mobile-menu{
    clip-path:circle(150% at calc(100% - var(--gutter) - 22px) calc(var(--nav-h) / 2));
    visibility:visible;
}
.mobile-menu ul{ list-style:none; margin:0; padding:0; }
.mobile-menu li{ overflow:hidden; border-bottom:1px solid var(--line); }
.mobile-menu a{
    display:block;
    font:900 clamp(48px,14vw,84px)/1.05 "Big Shoulders",sans-serif;
    transform:translateY(100%);
    transition:transform .6s var(--ease-out);
}
.mobile-menu a[aria-current="page"]{ color:var(--accent); }
.menu-open .mobile-menu a{ transform:translateY(0); }
.menu-open .mobile-menu li:nth-child(2) a{ transition-delay:.05s; }
.menu-open .mobile-menu li:nth-child(3) a{ transition-delay:.1s; }
.menu-open .mobile-menu li:nth-child(4) a{ transition-delay:.15s; }
.menu-open .mobile-menu li:nth-child(5) a{ transition-delay:.2s; }

/* ---------- shared layout ---------- */
main{ padding:0 var(--gutter); }
.section{
    max-width:1240px;
    margin:0 auto;
    padding:clamp(64px,10vw,140px) 0;
}
.page-head{
    min-height:62vh;
    padding-top:var(--nav-h);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
}
.side-name{
    margin:0;
    font:900 clamp(72px,17vw,240px)/.86 "Big Shoulders",sans-serif;
    color:var(--accent);
}
.page-sub{
    margin:24px 0 0;
    max-width:520px;
    font-size:clamp(16px,1.6vw,19px);
    line-height:1.6;
    color:var(--muted);
}
.heading{
    margin:0 0 clamp(32px,5vw,56px);
    font:800 clamp(44px,7vw,96px)/.95 "Big Shoulders",sans-serif;
}
.heading em{ font-style:normal; color:var(--accent); }

/* split-letter heading reveal */
.split{ display:inline-block; overflow:hidden; vertical-align:top; padding:.08em .02em; margin:-.08em -.02em; }
.split .ch{
    display:inline-block;
    transform:translateY(105%) rotate(6deg);
    transition:transform 1s var(--ease-out);
    transition-delay:calc(var(--i) * 45ms);
}
.is-ready .split .ch{ transform:none; }

/* fade-up reveal */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
    transition-delay:calc(var(--stagger,0) * 100ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* green wipe reveal: block grows in, then the accent panel slides off */
.wipe{
    --wd:calc(var(--stagger,0) * 70ms);
    position:relative;
    clip-path:inset(0 100% 0 0 round var(--radius));
    transition:clip-path .45s var(--ease-in-out) var(--wd);
}
.wipe::after{
    content:""; position:absolute; inset:0; z-index:5;
    background:var(--accent);
    transform-origin:right;
    transition:transform .45s var(--ease-in-out) calc(var(--wd) + .32s);
    pointer-events:none;
}
.wipe.is-in{ clip-path:inset(0 0 0 0 round var(--radius)); }
.wipe.is-in::after{ transform:scaleX(0); }

/* ---------- buttons ---------- */
.btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px;
    border-radius:60px;
    font-size:13px; font-weight:700; letter-spacing:.14em;
    border:1.5px solid var(--accent);
    color:var(--accent);
    position:relative; overflow:hidden; isolation:isolate;
    transition:color .4s var(--ease-out);
}
.btn::before{
    content:""; position:absolute; z-index:-1;
    left:50%; top:100%;
    width:140%; aspect-ratio:1;
    border-radius:50%;
    background:var(--accent);
    transform:translate(-50%,0) scale(0);
    transition:transform .6s var(--ease-out);
}
.btn:hover{ color:var(--on-accent); }
.btn:hover::before{ transform:translate(-50%,-55%) scale(1); }
.btn.solid{ background:var(--accent); color:var(--on-accent); }
.btn.solid::before{ background:var(--text); }
.btn svg{ width:14px; height:14px; transition:transform .4s var(--ease-out); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn .ico{ width:17px; height:17px; }
.btn:hover .ico{ transform:none; }

/* ---------- home hero ---------- */
.hero{
    min-height:100svh;
    padding-top:var(--nav-h);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
}
.quote{
    margin:0 0 22px;
    font-size:clamp(13px,1.3vw,15px);
    font-weight:600;
    letter-spacing:.22em;
    color:var(--muted);
}
/* flip-clock year: hovering the tagline flips it forward to the current year */
.flip-year{ display:inline-flex; gap:2px; margin-left:.3em; letter-spacing:0; vertical-align:-.15em; }
.flip-digit{
    position:relative;
    display:inline-grid; place-items:center;
    min-width:1.25em; height:1.55em;
    padding:0 .12em;
    border-radius:4px;
    background:var(--bg-raised);
    color:var(--text);
    font-variant-numeric:tabular-nums;
    perspective:120px;
}
/* the split line across the middle of each flap */
.flip-digit::after{
    content:""; position:absolute; left:0; right:0; top:50%; height:1px;
    background:var(--bg);
    z-index:0;
}
/* the digit sits above the split line so it stays crisp at small sizes */
.flip-digit span{ position:relative; z-index:1; display:block; backface-visibility:hidden; transform-origin:50% 50%; }
.quote.is-near .flip-digit{ color:var(--accent); }
.flip-digit{ transition:color .3s; }

.name{
    margin:0;
    font-family:"Big Shoulders",sans-serif;
    font-weight:900;
    font-size:clamp(84px,19vw,260px);
    line-height:.84;
    color:var(--accent);
    white-space:nowrap;
    user-select:none;
}
.name .line{ display:block; overflow:hidden; padding:.06em .04em; margin:-.06em 0; }
.name .ch{
    display:inline-block;
    color:transparent;
    background:
        linear-gradient(var(--accent),var(--accent)) no-repeat 0 100% / 100% 0%,
        linear-gradient(color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 16%,transparent));
    -webkit-background-clip:text;
            background-clip:text;
    transform:translateY(110%);
    transition:
        transform 1.2s var(--ease-out) calc(var(--i) * 60ms),
        background-size 1.1s var(--ease-in-out) calc(650ms + var(--i) * 60ms);
    will-change:transform;
}
.is-ready .name .ch{ transform:none; background-size:100% 100%, auto; }
.brief{
    max-width:560px;
    margin:36px auto 0;
    font-size:clamp(16px,1.6vw,19px);
    line-height:1.6;
}
.brief em{ font-style:normal; color:var(--accent); }
.hero-cta{ margin-top:36px; display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }

/* ---------- intro / about block ---------- */
.intro-grid{
    display:grid;
    grid-template-columns:minmax(260px,440px) 1fr;
    gap:clamp(32px,6vw,96px);
    align-items:center;
}
.portrait{
    position:relative;
    margin:0;
    aspect-ratio:4/5;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--bg-raised);
}
.portrait > img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.portrait.has-strips > img{ display:none; }
/* photo split into vertical strips, each wiped in by a green bar; hover zooms toward the cursor */
.strips{
    position:absolute; inset:-8% 0;
    transform:translate3d(0,var(--par,0px),0);
    transform-origin:var(--ox,50%) var(--oy,40%);
    transition:scale 1s var(--ease-out);
}
.portrait:hover .strips{ scale:1.07; }
.strip{ position:absolute; inset:0; clip-path:inset(0 var(--r) 0 var(--l)); }
.strip img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:50% 30%;
    opacity:0;
}
.strip::after{
    content:""; position:absolute; inset:0;
    background:var(--accent);
    transform:scaleY(0);
}
.portrait.is-in .strip::after{ animation:stripPanel .95s var(--ease-in-out) calc(var(--i) * 85ms) both; }
.portrait.is-in .strip img{ animation:stripImg 1.3s var(--ease-out) calc(var(--i) * 85ms + .45s) both; }
@keyframes stripPanel{
    0%{ transform:scaleY(0); transform-origin:50% 100%; }
    45%{ transform:scaleY(1); transform-origin:50% 100%; }
    55%{ transform:scaleY(1); transform-origin:50% 0%; }
    100%{ transform:scaleY(0); transform-origin:50% 0%; }
}
@keyframes stripImg{
    from{ opacity:0; transform:translateY(22%) scale(1.15); }
    20%{ opacity:1; }
    to{ opacity:1; transform:none; }
}
.lead{
    font:500 clamp(24px,3vw,40px)/1.3 "DM Sans",sans-serif;
    letter-spacing:-.015em;
    margin:0 0 36px;
}
.lead .w{ opacity:.15; transition:opacity .25s linear; }
.lead .w.on{ opacity:1; }
.para{
    font-size:clamp(16px,1.4vw,18px);
    line-height:1.75;
    color:var(--muted);
    margin:0 0 28px;
    max-width:62ch;
}
.para strong{ color:var(--text); font-weight:600; }

/* ---------- cards ---------- */
.card{
    position:relative;
    display:flex; flex-direction:column;
    padding:clamp(24px,2.6vw,36px);
    border-radius:var(--radius);
    background:var(--bg-raised);
    overflow:hidden; isolation:isolate;
    transition:transform .6s var(--ease-out);
}
.card::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--accent);
    transform:scaleY(0); transform-origin:bottom;
    transition:transform .6s var(--ease-out);
}
a.card:hover{ transform:translateY(-8px); }
a.card:hover::before{ transform:scaleY(1); }
.card h3{
    margin:0 0 10px;
    font:800 clamp(32px,3vw,44px)/1.02 "Big Shoulders",sans-serif;
    text-transform:uppercase;
    letter-spacing:.01em;
    transition:color .4s;
}
.card .kicker{
    margin:0 0 12px;
    font-size:15px; font-weight:600; letter-spacing:.01em;
    color:var(--accent);
    transition:color .4s;
}
.card p{ margin:0; font-size:16px; line-height:1.6; color:var(--muted); transition:color .4s; }
.card .big-num{
    font:900 clamp(56px,6vw,88px)/1 "Big Shoulders",sans-serif;
    color:var(--accent);
    margin-bottom:auto; padding-bottom:28px;
    transition:color .4s;
}
.card .arrow{
    position:absolute; top:clamp(24px,2.6vw,36px); right:clamp(24px,2.6vw,36px);
    width:48px; height:48px; border-radius:50%;
    border:1.5px solid var(--line);
    display:grid; place-items:center;
    transition:transform .6s var(--ease-out), border-color .4s, color .4s;
}
.card .arrow svg{ width:16px; height:16px; }
.card .arrow .ico{ width:19px; height:19px; }
a.card:hover .arrow.is-icon{ transform:scale(1.08); }
a.card:hover h3, a.card:hover p, a.card:hover .kicker, a.card:hover .big-num{ color:var(--on-accent); }
a.card:hover .arrow{ border-color:var(--on-accent); color:var(--on-accent); transform:rotate(45deg); }

.card.wipe, .contact-row.wipe{ transition:clip-path .45s var(--ease-in-out) var(--wd), transform .6s var(--ease-out); }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); }
.card-grid.two{ grid-template-columns:repeat(2,1fr); }
.card-grid .card{ min-height:300px; }
.projects .card{ min-height:340px; }
.projects .card.featured{ grid-column:span 2; }
.projects .card.featured h3{ font-size:clamp(44px,5vw,72px); }
.projects .card.featured .card-logo{ height:84px; }

/* "periodic table" of skills: each tool is an element tile */
.elements{
    list-style:none; margin:auto 0 0; padding:26px 0 0;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;
}
.element{
    aspect-ratio:1;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--bg);
    transition:background .35s, border-color .35s, transform .5s var(--ease-out);
}
.element .num{ font-size:12px; font-weight:700; color:var(--muted); transition:color .35s; }
.element .sym{ font:900 34px/1 "Big Shoulders",sans-serif; color:var(--accent); transition:color .35s; }
.element .nm{ font-size:12.5px; line-height:1.15; transition:color .35s; }
.element:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-4px); }
.element:hover .num, .element:hover .sym, .element:hover .nm{ color:var(--on-accent); }

.card-logo{
    box-sizing:content-box;
    height:56px; width:auto; max-width:180px;
    object-fit:contain; object-position:left center;
    align-self:flex-start;
    margin-bottom:auto; padding-bottom:28px;
}

/* ---------- horizontal work showcase (home) ---------- */
.showcase{ height:var(--showcase-h,300vh); position:relative; margin:0 calc(var(--gutter) * -1); }
.showcase-pin{
    position:sticky; top:0;
    height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    overflow:hidden;
}
.showcase-head{
    max-width:calc(1240px + var(--gutter) * 2); width:100%; margin:0 auto;
    padding:0 var(--gutter);
}
.showcase-head .heading{ margin-bottom:clamp(24px,4vw,40px); }
.showcase-track{
    display:flex; gap:clamp(14px,1.8vw,24px);
    width:max-content;
    padding:0 max(var(--gutter), calc((100vw - 1240px) / 2));
    will-change:transform;
}
.showcase-track .card{ width:clamp(300px,34vw,460px); min-height:clamp(320px,50vh,460px); }
.showcase-track .card.end{
    background:transparent; border:1.5px solid var(--line);
    justify-content:center; align-items:center; text-align:center;
}

/* ---------- big CTA ---------- */
.cta{ text-align:center; }
.cta-link{
    display:inline-block;
    font:900 clamp(64px,13vw,190px)/.9 "Big Shoulders",sans-serif;
    color:var(--accent);
    position:relative;
}
.cta-link span{ display:block; transition:transform .7s var(--ease-out); }
.cta-link::after{
    content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.06em;
    background:currentColor;
    transform:scaleX(0); transform-origin:right;
    transition:transform .7s var(--ease-out);
}
.cta-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.cta-link:hover span{ transform:skewX(-6deg); }

/* ---------- stacked journey cards ---------- */
/* each card sticks a little lower than the last, so they pile up like a deck as you scroll */
.stack{ display:grid; gap:clamp(24px,5vh,48px); padding-bottom:6vh; }
.stack-card{
    position:sticky;
    top:calc(var(--nav-h) + 12px + var(--i) * 20px);
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:clamp(24px,4vw,64px);
    min-height:clamp(340px,60vh,560px);
    padding:clamp(28px,4vw,56px);
    border-radius:var(--radius);
    background:var(--bg-raised);
    border:1px solid var(--line);
    transform-origin:50% 0;
    transform:scale(calc(1 - var(--p,0) * .06));
    will-change:transform;
}
.stack-card > *{ opacity:calc(1 - var(--p,0) * .7); }
.stack-left{ display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-width:0; }
.stack-ico{
    width:64px; height:64px; border-radius:50%;
    border:1.5px solid var(--accent);
    color:var(--accent);
    display:grid; place-items:center;
    margin-bottom:22px;
}
.stack-ico .ico{ width:28px; height:28px; stroke-width:1.6; }
.stack-type{ margin:0; font-size:15px; font-weight:600; color:var(--accent); }
.stack-title{
    margin:0;
    font:900 clamp(52px,7.4vw,124px)/.9 "Big Shoulders",sans-serif;
    text-transform:uppercase;
    overflow-wrap:anywhere;
    padding:.04em 0;
    color:transparent;
    background:
        linear-gradient(var(--accent),var(--accent)) no-repeat 0 100% / 100% 0%,
        linear-gradient(color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 16%,transparent));
    -webkit-background-clip:text;
            background-clip:text;
    transition:background-size 1.2s var(--ease-in-out) .15s;
}
.stack-card.is-in .stack-title{ background-size:100% 100%, auto; }
.stack-count{ font:800 clamp(18px,1.6vw,22px)/1 "Big Shoulders",sans-serif; color:var(--muted); letter-spacing:.04em; }
.stack-right{ display:flex; flex-direction:column; justify-content:flex-end; gap:14px; min-width:0; }
.stack-logo{ display:block; height:64px; width:auto; max-width:180px; object-fit:contain; margin-bottom:22px; border-radius:14px; }

/* period: a progress bar for year ranges, plain text otherwise */
.period-range{ width:min(100%,340px); }
.period-ends{ display:flex; justify-content:space-between; margin-bottom:10px; font:800 24px/1 "Big Shoulders",sans-serif; }
.period-track{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.period-track span{
    display:block; height:100%;
    background:var(--accent);
    transform-origin:left;
    transform:scaleX(0);
    transition:transform 1.4s var(--ease-out) .3s;
}
.stack-card.is-in .period-track span{ transform:scaleX(var(--done,0)); }
.period-note{ margin:10px 0 0; font-size:14px; font-weight:600; color:var(--muted); }
.period-text{
    display:flex; align-items:center; gap:12px;
    margin:0;
    font:800 24px/1 "Big Shoulders",sans-serif;
    text-transform:uppercase; letter-spacing:.03em;
}
.period-text::before{ content:""; width:24px; height:2px; background:var(--accent); flex:none; }
.stack-role{ margin:0; font:800 clamp(26px,2.6vw,38px)/1.05 "Big Shoulders",sans-serif; }
.stack-place{ margin:0; font-size:16px; color:var(--accent); }
.stack-desc{ margin:0; font-size:17px; line-height:1.65; color:var(--muted); max-width:52ch; }
.stack-link{ align-self:flex-start; margin-top:8px; }

/* ---------- GitHub feed ---------- */
.repo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); }
.repo-grid .card{ min-height:230px; }
.repo-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:14px; font-weight:600; color:var(--muted); transition:color .4s; }
.repo-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); transition:background .4s; }
.repo-grid .card h3{ font-size:clamp(26px,2.2vw,32px); text-transform:none; overflow-wrap:anywhere; padding-right:56px; }
.repo-meta{ margin-top:auto; padding-top:20px; font-size:14px; color:var(--muted); transition:color .4s; }
a.card:hover .repo-top, a.card:hover .repo-meta{ color:var(--on-accent); }
a.card:hover .repo-dot{ background:var(--on-accent); }
.feed-note{ margin:20px 0 0; font-size:15px; color:var(--muted); }
.feed-note a{ color:var(--accent); }

/* ---------- LinkedIn posts ---------- */
.post-media{ margin:0 0 22px; border-radius:calc(var(--radius) - 8px); overflow:hidden; aspect-ratio:16/9; background:var(--bg); }
.post-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
a.card:hover .post-media img{ transform:scale(1.05); }
.post-text{
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
    white-space:pre-line;
}
.post-more{ margin-top:auto; padding-top:20px; font-size:14px; font-weight:700; letter-spacing:.1em; color:var(--accent); transition:color .4s; }
a.card:hover .post-more{ color:var(--on-accent); }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,5vw,56px); }
.section-head .heading{ margin:0; }

/* ---------- contact ---------- */
.contact-hero{
    font:800 clamp(44px,7vw,100px)/1 "Big Shoulders",sans-serif;
    margin:0 0 clamp(40px,6vw,72px);
}
.contact-hero a{ color:var(--accent); }
.contact-info{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.contact-row{
    display:grid; grid-template-columns:1fr auto 52px;
    align-items:center; gap:16px;
    padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px);
    border-radius:var(--radius);
    background:var(--bg-raised);
    position:relative; overflow:hidden; isolation:isolate;
}
.contact-row::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform .6s var(--ease-in-out);
}
.contact-row:hover::before{ transform:scaleX(1); }
.contact-row .label{ display:flex; align-items:center; gap:.35em; font:800 clamp(30px,4.4vw,60px)/1 "Big Shoulders",sans-serif; transition:color .4s, transform .6s var(--ease-out); }
.contact-row .label .ico{ width:.72em; height:.72em; stroke-width:2; color:var(--accent); transition:color .4s; }
.contact-row:hover .label .ico{ color:var(--on-accent); }
.contact-row .value{ font-size:15px; color:var(--muted); transition:color .4s; }
.contact-row .go{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:all .6s var(--ease-out); }
.contact-row .go svg{ width:16px; height:16px; }
.contact-row:hover .label{ color:var(--on-accent); transform:translateX(10px); }
.contact-row:hover .value{ color:var(--on-accent); }
.contact-row:hover .go{ border-color:var(--on-accent); color:var(--on-accent); transform:rotate(45deg); }

/* ---------- footer marquees ---------- */
.site-foot{ margin-top:clamp(40px,8vw,100px); border-top:1px solid var(--line); overflow:hidden; }
.carousel-1{ overflow:hidden; padding:4px 0; }
.carousel-track, .carousel-track2{ display:flex; width:max-content; will-change:transform; }
.card-1{
    flex:0 0 auto;
    padding:0 clamp(14px,2.5vw,32px);
    font:900 clamp(56px,11vw,140px)/1.05 "Big Shoulders",sans-serif;
    color:var(--accent);
    display:flex; align-items:center; gap:clamp(14px,2.5vw,32px);
}
.card-1 a{ transition:color .3s; }
.card-1 a:hover{ color:var(--text); }
.card-1::after{ content:"✦"; font-size:.35em; color:var(--muted); }
.card-2{
    flex:0 0 auto;
    padding:0 clamp(12px,2vw,24px);
    font:800 clamp(28px,5vw,52px)/1.2 "Big Shoulders",sans-serif;
    color:color-mix(in srgb,var(--text) 26%,transparent);
    transition:color .3s;
}
.card-2:hover{ color:var(--text); }
.foot-bar{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding:22px var(--gutter);
    border-top:1px solid var(--line);
    font-size:13px; font-weight:600; letter-spacing:.12em; color:var(--muted);
}
.foot-bar{ align-items:center; }
.foot-bar a:hover{ color:var(--accent); }
.socials{ display:flex; gap:10px; }
.socials a{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line);
    display:grid; place-items:center;
    color:var(--text);
    transition:background .35s, color .35s, border-color .35s, transform .5s var(--ease-out);
}
.socials a:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:translateY(-3px); }
.socials .ico{ width:19px; height:19px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
    .card-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
    .nav-links{ display:none; }
    .menu-btn{ display:block; }
    .intro-grid{ grid-template-columns:1fr; }
    .portrait{ max-width:420px; }
    /* showcase falls back to a normal vertical list */
    .showcase{ height:auto !important; margin:0; }
    .showcase-head{ padding:0; }
    .showcase-pin{ position:static; height:auto; overflow:visible; padding:clamp(64px,10vw,140px) 0; }
    .showcase-track{ flex-direction:column; width:auto; padding:0; transform:none !important; }
    .showcase-track .card{ width:auto; height:auto; min-height:280px; }
    .showcase-track .card.end{ min-height:160px; }
    .stack-card{ grid-template-columns:1fr; min-height:0; top:calc(var(--nav-h) + 8px + var(--i) * 12px); }
    .repo-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
    :root{ --nav-h:64px; }
    .card-grid, .card-grid.two, .repo-grid{ grid-template-columns:1fr; }
    .projects .card.featured{ grid-column:auto; }
    .contact-row{ grid-template-columns:1fr 48px; }
    .contact-row .value{ display:none; }
    .theme-btn{ padding:8px 12px; }
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
}