/* ============ tokens ============ */ :root{ --bg:#F5F0E8; --surface:#EDE8DC; --card:#FBF8F2; --accent:#4A7C59; --accent-deep:#3A6347; --accent-soft:rgba(74,124,89,.12); --ink:#1C1C1A; --sub:#5C5A54; --line:rgba(28,28,26,.14); --line-strong:rgba(28,28,26,.28); --nav-bg:rgba(245,240,232,.78); --shadow:rgba(28,28,26,.35); --btn-fg:#FFFFFF; /* on-accent text: white passes AA on sage in light mode */ --ease:cubic-bezier(.22,1,.36,1); /* terminal + canvas cards — constant across themes */ --t-bg:#171713; --t-fg:#D9D5C9; --t-dim:#33332C; --t-g:#8FBF9C; } html[data-theme="dark"]{ --bg:#1A1A14; --surface:#22221A; --card:#20201A; --accent:#7BAE8A; --accent-deep:#8FC09E; --accent-soft:rgba(123,174,138,.14); --ink:#F0EBE0; --sub:#A8A398; --line:rgba(240,235,224,.14); --line-strong:rgba(240,235,224,.30); --nav-bg:rgba(26,26,20,.78); --btn-fg:#1A1A14; --shadow:rgba(0,0,0,.55); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:'Archivo',Helvetica,sans-serif;font-weight:380; overflow-x:hidden;transition:background .35s linear,color .35s linear} .serif,h1,h2,h3{font-family:'Fraunces',Georgia,serif} h1,h2:not(.bigtitle),h3{text-wrap:balance} #hero .intro,#contact .sub2,#about .fine{text-wrap:pretty} ::selection{background:var(--accent);color:var(--bg)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .skip{position:fixed;top:-60px;left:16px;z-index:400;background:var(--ink);color:var(--bg); padding:10px 18px;border-radius:8px;text-decoration:none;font-size:13px;transition:top .2s} .skip:focus{top:14px} #grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:200;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} html[data-theme="dark"] #grain{display:none} /* ============ loader ============ */ #loader{position:fixed;inset:0;background:var(--bg);z-index:300;display:none;align-items:center;justify-content:center;color:var(--ink)} html.loading #loader{display:flex} /* pre-paint states, set by the inline script (GSAP inline styles override these once it runs) */ html.js #hero h1 .line>span{transform:translateY(110%)} html.js #hero .intro,html.js #hero .ctas,html.js .tiltcard{opacity:0} #loader .word{font-family:'Fraunces',serif;font-size:clamp(34px,5vw,58px);font-weight:340;display:flex;align-items:center;gap:18px} #loader .word::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none} /* ============ nav ============ */ header nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center; padding:18px 44px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--nav-bg);border-bottom:1px solid var(--line)} nav .logo{font-family:'Fraunces',serif;font-weight:500;font-size:19px;text-decoration:none;color:var(--ink)} nav .logo em{font-style:italic} .navlinks{display:flex;gap:28px;align-items:center} .navlinks a{color:var(--ink);text-decoration:none;font-size:14.5px;position:relative} .navlinks a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:0;background:var(--accent);transition:width .3s var(--ease)} .navlinks a:not(.btn):hover::after{width:100%} /* icon button + theme toggle (from the previous site) */ .icon-btn{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--ink); cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease} .icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .icon-btn svg{width:16px;height:16px} .navmenu{display:none;gap:10px;align-items:center} .menubtn{display:flex;gap:10px;align-items:center;background:var(--ink);color:var(--bg);border:none;font:inherit; font-size:13.5px;border-radius:999px;padding:11px 22px;cursor:pointer} .menubtn i{width:5px;height:5px;border-radius:50%;background:var(--accent)} /* menu overlay */ #overlay{position:fixed;inset:0;background:var(--surface);z-index:190;display:flex;flex-direction:column; justify-content:center;padding:0 10vw;clip-path:inset(0 0 100% 0);visibility:hidden} #overlay nav{display:flex;flex-direction:column;gap:2px} #overlay nav a{font-family:'Fraunces',serif;font-size:clamp(40px,7vw,84px);font-weight:400;color:var(--ink); text-decoration:none;line-height:1.22;width:fit-content;display:flex;align-items:baseline;opacity:0;transform:translateY(30px)} #overlay .oextra{margin-top:7vh;display:flex;flex-direction:column;gap:26px;align-items:flex-start;opacity:0;transform:translateY(24px)} #overlay .obtn{font-size:14.5px;font-weight:500;color:var(--btn-fg);background:var(--accent);border:1px solid var(--accent); border-radius:999px;padding:13px 26px;text-decoration:none} #overlay .osocials{display:flex;gap:26px;align-items:center} #overlay .osocials a{color:var(--accent-deep);display:inline-flex;font-size:19px;text-decoration:none;transition:transform .2s ease} #overlay .osocials a:hover{transform:translateY(-2px)} #overlay .osocials svg{width:20px;height:20px} #overlay a .dash{color:var(--accent-deep);max-width:0;overflow:hidden;opacity:0;margin-right:0; transition:max-width .3s var(--ease),opacity .25s linear,margin-right .3s var(--ease)} #overlay a .txt{position:relative;display:inline-block;transform:translateX(0);transition:transform .25s var(--ease)} #overlay a .txt .ital{position:absolute;left:0;top:0;font-style:italic;color:var(--accent-deep);opacity:0;transition:opacity .25s linear} #overlay a .txt .roman{transition:opacity .25s linear} #overlay a:hover .dash,#overlay a:focus-visible .dash{max-width:.9em;opacity:1;margin-right:18px} #overlay a:hover .txt,#overlay a:focus-visible .txt{transform:translateX(10px)} #overlay a:hover .roman,#overlay a:focus-visible .roman{opacity:0} #overlay a:hover .ital,#overlay a:focus-visible .ital{opacity:1} #overlay .x{position:absolute;top:26px;right:44px;background:none;border:1px solid var(--line-strong);border-radius:999px; padding:10px 20px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer} /* ---- nav variants (pick via html[data-nav]) — all centered, logo-less, no divider ---- */ html[data-nav] header nav .logo{display:none} html[data-nav] header nav{border-bottom:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} /* DEFAULT — split glass islands; fuse into one capsule on scroll down, split on scroll up / hover */ html[data-nav="islands"] header nav{top:14px;padding:0;justify-content:center;gap:10px;left:0;right:0; transition:transform .45s var(--ease),gap .45s var(--ease);transform-origin:top center;pointer-events:none} .island{display:flex;align-items:center;position:relative;border-radius:999px;pointer-events:auto; background:color-mix(in srgb,var(--card) 46%,transparent); backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7); border:1px solid color-mix(in srgb,var(--card) 62%,transparent); box-shadow:0 12px 30px -14px var(--shadow),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-radius .45s var(--ease)} html[data-theme="dark"] .island{box-shadow:0 12px 30px -14px var(--shadow),inset 0 1px 0 rgba(255,255,255,.09)} .island:hover{transform:translateY(-2px);box-shadow:0 16px 36px -14px var(--shadow),inset 0 1px 0 rgba(255,255,255,.45)} html[data-nav="islands"] .navlinks{gap:0;padding:5px 6px} html[data-nav="islands"] .navlinks a{padding:8px 14px;font-size:13.5px;border-radius:999px;z-index:2; transition:color .25s linear} html[data-nav="islands"] .navlinks a::after{display:none} /* underline retired — the pill is the highlight */ html[data-nav="islands"] .navlinks a.on{color:var(--btn-fg)} #apill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--accent); z-index:1;opacity:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);pointer-events:none} .island .rlink{color:var(--accent-deep);text-decoration:none;font-size:13.5px;font-weight:500; margin:5px 6px;padding:7px 14px;border-radius:999px;transition:background .25s var(--ease),color .25s linear} .island.i-resume:hover .rlink{background:var(--accent);color:var(--btn-fg)} .island.i-toggle{width:42px;height:42px;justify-content:center} .island.i-toggle .icon-btn{border:none;width:34px;height:34px;transition:background .25s var(--ease),color .25s linear} .island.i-toggle .icon-btn:hover{transform:none} .island.i-toggle:hover .icon-btn{background:var(--accent);color:var(--btn-fg)} /* fused capsule (scrolled state) */ html[data-nav="islands"] header nav.fused{gap:0;transform:scale(.93)} html[data-nav="islands"] nav.fused .navlinks{border-top-right-radius:0;border-bottom-right-radius:0} html[data-nav="islands"] nav.fused .i-resume{border-radius:0;margin-left:-1px} html[data-nav="islands"] nav.fused .i-toggle{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px} html[data-nav="islands"] nav.fused .island:hover{transform:none} /* sun ↔ moon morph */ .theme-toggle{position:relative} .theme-toggle svg{position:absolute;inset:0;margin:auto;transition:opacity .4s var(--ease),transform .5s var(--ease)} .theme-toggle .sun{opacity:1;transform:rotate(0deg) scale(1)} .theme-toggle .moon{display:inline;opacity:0;transform:rotate(90deg) scale(.5)} html[data-theme="dark"] .theme-toggle .sun{display:inline;opacity:0;transform:rotate(-90deg) scale(.5)} html[data-theme="dark"] .theme-toggle .moon{opacity:1;transform:rotate(0deg) scale(1)} /* theme switch — circle reveal via the View Transitions API */ html.vt-circle::view-transition-old(root){animation:none;mix-blend-mode:normal} html.vt-circle::view-transition-new(root){animation:none;mix-blend-mode:normal} html[data-nav="islands"] .navmenu{padding:2px;display:none} html[data-nav="islands"] .navmenu .icon-btn{border:none} html[data-nav="islands"] .menubtn{padding:10px 20px} /* A — liquid glass pill */ html[data-nav="glass"] header nav{top:14px;left:50%;right:auto;transform:translateX(-50%);width:max-content; padding:7px 8px 7px 24px;border-radius:999px;gap:6px; background:color-mix(in srgb,var(--card) 46%,transparent); backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7); border:1px solid color-mix(in srgb,var(--card) 60%,transparent); box-shadow:0 14px 38px -18px var(--shadow),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(28,28,26,.05)} html[data-theme="dark"][data-nav="glass"] header nav{ box-shadow:0 14px 38px -18px var(--shadow),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.3)} html[data-nav="glass"] .navlinks{gap:24px} html[data-nav="glass"] .navlinks .btn{margin-left:6px;padding:9px 18px;font-size:13.5px} html[data-nav="glass"] .icon-btn{width:36px;height:36px;border-color:transparent} /* B — mono lab: bare centered uppercase mono links */ html[data-nav="mono"] header nav{justify-content:center;padding:26px 44px} html[data-nav="mono"] .navlinks{gap:36px} html[data-nav="mono"] .navlinks a{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--sub)} html[data-nav="mono"] .navlinks a:hover{color:var(--ink)} html[data-nav="mono"] .navlinks a:not(.btn)::after{bottom:-6px;height:1px} html[data-nav="mono"] .navlinks .btn{background:transparent;border:none;color:var(--accent-deep); font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:4px 0;border-radius:0} html[data-nav="mono"] .navlinks .btn:hover{transform:none;color:var(--accent);background:transparent} html[data-nav="mono"] .icon-btn{position:fixed;top:20px;right:24px} /* C — editorial: centered Fraunces italic links */ html[data-nav="editorial"] header nav{justify-content:center;padding:24px 44px} html[data-nav="editorial"] .navlinks{gap:8px} html[data-nav="editorial"] .navlinks a{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:16.5px; color:var(--ink);padding:2px 14px} html[data-nav="editorial"] .navlinks a:not(.btn)::after{left:14px;right:14px;width:auto;transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease)} html[data-nav="editorial"] .navlinks a:not(.btn):hover::after{width:auto;transform:scaleX(1)} html[data-nav="editorial"] .navlinks a:hover{color:var(--accent-deep)} html[data-nav="editorial"] .navlinks .btn{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:15px; margin-left:14px;padding:8px 20px} html[data-nav="editorial"] .icon-btn{position:fixed;top:20px;right:24px} /* bottom dock (desktop variant behind NAV_VARIANT flag) */ #dock{position:fixed;bottom:22px;left:50%;transform:translate(-50%,140%);visibility:hidden;z-index:120;display:flex;gap:6px; background:rgba(28,28,26,.92);backdrop-filter:blur(8px);border-radius:999px;padding:7px; transition:transform .5s var(--ease),visibility 0s .5s} #dock.on{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--ease)} #dock a{color:#EDE8DC;text-decoration:none;font-size:13px;padding:9px 16px;border-radius:999px;transition:background .2s} #dock a:hover{background:var(--accent)} /* press feedback (tactile, from taste audit) */ .btn:active,#morebtn:active{transform:translateY(0) scale(.98)} .icon-btn:active,.menubtn:active,#overlay .x:active{transform:scale(.95)} /* ============ shared section chrome ============ */ main section{position:relative;padding:120px 44px;max-width:1200px;margin:0 auto} .label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px;display:block} .ghost{position:absolute;top:30px;right:0;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(120px,18vw,240px); line-height:1;color:var(--ink);opacity:.045;pointer-events:none;z-index:0;user-select:none} /* buttons (copied from the previous site: accent pill, lift on hover) */ .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500; cursor:pointer;border:1px solid var(--accent);text-decoration:none;background:transparent;color:var(--accent); white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease} .btn:hover{background:var(--accent);color:var(--btn-fg);transform:translateY(-1px)} .btn-primary{background:var(--accent);color:var(--btn-fg)} .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--btn-fg)} .btn-lg{padding:16px 28px;font-size:15px} /* ============ hero ============ */ #hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;gap:70px;padding-top:150px} #hero .left{flex:1.25} #hero h1{font-weight:440;font-size:clamp(64px,8.6vw,124px);line-height:.98;letter-spacing:-.025em} #hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} #hero h1 .line>span{display:block} #hero h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.01em} #hero .intro{margin-top:30px;font-size:17px;color:var(--sub);line-height:1.65;max-width:50ch} #hero .ctas{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap} .heroimg{flex:.85;max-width:360px;position:relative} .tiltcard{aspect-ratio:3/3.7;position:relative;transform-style:preserve-3d} .tiltcard .face{position:absolute;inset:0;border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden} .tiltcard img{width:100%;height:100%;object-fit:cover;display:block} /* ============ stats strip ============ */ #stats{padding-top:0;padding-bottom:0;max-width:none} #stats .stats{max-width:1200px;margin:0 auto;padding:44px 44px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px; border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)} .stat .n{font-family:'Fraunces',serif;font-variant-numeric:tabular-nums;font-weight:480;font-size:clamp(38px,4.6vw,58px);letter-spacing:-.02em} .stat .n i{font-style:normal;color:var(--accent)} .stat .d{font-size:13px;color:var(--sub);margin-top:6px} /* ============ about ============ */ #about .ink{font-family:'Fraunces',serif;font-weight:380;font-size:clamp(24px,3.2vw,40px);line-height:1.42;max-width:26em;position:relative;z-index:1} #about .ink .w{color:color-mix(in srgb,var(--ink) 16%,transparent);transition:color .3s linear} #about .ink .w.on{color:var(--ink)} #about .ink .w.hl.on{color:var(--accent-deep)} #about .fine{margin-top:34px;font-size:14px;color:var(--sub);position:relative;z-index:1} /* ============ skills deck ============ */ #skills{max-width:none;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;overflow:hidden} #skills .dhead{text-align:center;position:relative;z-index:2} #skills .dhead .label{margin-bottom:8px} #skills h2{font-weight:420;font-size:clamp(30px,3.6vw,46px)} .stage{position:relative;height:min(54vh,440px);perspective:1400px;margin-top:20px} .card3{position:absolute;left:50%;top:50%;width:min(238px,21vw);aspect-ratio:5/7; margin:calc(min(238px,21vw)*-.7) 0 0 calc(min(238px,21vw)*-.5); transform-style:preserve-3d;-webkit-transform-style:preserve-3d} /* no will-change here: Safari flattens preserve-3d children under will-change:transform, which breaks backface-visibility and mirrors the card fronts mid-flip */ .card3 .side{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden; border:1px solid var(--line-strong);box-shadow:0 24px 50px -28px var(--shadow);transition:box-shadow .35s var(--ease)} .card3.risen .side{box-shadow:0 40px 70px -30px var(--shadow)} .card3 .back{transform:rotateY(0deg); /* explicit 3D transform — Safari drops backface-visibility without it */ background:radial-gradient(circle at 50% 50%,var(--accent-soft) 0 24%,transparent 25%), repeating-linear-gradient(45deg,transparent 0 12px,rgba(74,124,89,.16) 12px 13px), repeating-linear-gradient(-45deg,transparent 0 12px,rgba(74,124,89,.16) 12px 13px),var(--card); display:flex;align-items:center;justify-content:center} .card3 .back .hk{font-family:'Fraunces',serif;font-style:italic;font-size:32px;color:var(--accent-deep); background:var(--card);padding:10px 16px;border:1px solid var(--line);border-radius:12px} .card3 .front{background:var(--card);transform:rotateY(180deg);padding:16px 0 4px;display:flex;flex-direction:column} .card3 .front .fhead{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px 11px} .card3 .front h3{font-weight:460;font-size:18.5px} .card3 .front .idx{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent-deep)} .card3 .front .rows{flex:1;display:flex;flex-direction:column} .card3 .front .row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:0 16px;border-top:1px solid var(--line)} .card3 .front .row span{font-size:12px;font-weight:430;color:var(--ink);white-space:nowrap} .card3 .front .row i{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.85;flex:none} .card3 .front .row em{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:9px;color:var(--sub)} /* ============ projects ============ */ #projects{max-width:none;padding-left:0;padding-right:0;overflow:hidden} #projects .inner{max-width:1200px;margin:0 auto;padding:0 44px} .bigtitle{font-weight:520;font-size:clamp(96px,19.5vw,420px);line-height:.85;white-space:nowrap; letter-spacing:-.03em;width:max-content;margin:0 auto;color:var(--ink);will-change:transform} .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px} .mcard{border-radius:22px;overflow:hidden;position:relative;background:var(--t-bg);border:1px solid var(--line-strong); aspect-ratio:4/3;display:block;text-decoration:none} a.mcard{cursor:pointer} div.mcard .meta .arr{display:none} /* no false click affordance on unlinked cards */ .mcard .pwrap{position:absolute;inset:0;height:120%;top:-10%;will-change:transform} .mcard canvas{width:100%;height:100%;display:block} .mcard .meta{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;display:flex;justify-content:space-between; align-items:flex-end;background:linear-gradient(transparent,rgba(20,20,18,.78));color:#F5F0E8} .mcard .meta h3{font-weight:440;font-size:22px} .mcard .meta p{font-size:12.5px;opacity:.78;margin-top:4px;font-family:'Archivo',sans-serif} .mcard .meta .arr{font-size:22px;transform:translateX(-8px);opacity:0;transition:.3s var(--ease)} .mcard:hover .arr,.mcard:focus-visible .arr{transform:none;opacity:1} .more-wrap{text-align:center;margin-top:44px} #morebtn{font:inherit;font-size:15px;font-weight:500;background:var(--accent);color:var(--btn-fg);border:1px solid var(--accent); border-radius:999px;padding:16px 28px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease} #morebtn:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-1px)} /* ============ experience ============ */ #experience .cols{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;margin-top:40px;position:relative;z-index:1} .steps{position:relative;padding-left:44px} .steps::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line)} .steps .prog{position:absolute;left:11px;top:0;width:2px;height:0;background:var(--accent)} .step{position:relative;padding-bottom:54px;opacity:.35;transition:opacity .45s var(--ease)} .step:last-child{padding-bottom:0} .step::before{content:"";position:absolute;left:-40px;top:6px;width:12px;height:12px;border-radius:50%; background:var(--bg);border:2px solid var(--line-strong);transition:.35s} .step.on{opacity:1} .step.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px var(--accent-soft)} .step .when{font-size:12.5px;color:var(--accent-deep);letter-spacing:.06em} .step h3{font-weight:440;font-size:23px;margin:8px 0 4px} .step .org{font-size:14px;color:var(--sub);margin-bottom:10px} .step p{font-size:14px;color:var(--sub);line-height:1.65;max-width:56ch} .sidecard{position:sticky;top:130px;background:var(--card);border:1px solid var(--line);border-radius:20px; padding:34px;height:fit-content;overflow:hidden} .sidecard .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-deep)} .sidecard .org2{font-family:'Fraunces',serif;font-weight:440;font-size:clamp(30px,3vw,42px);margin:14px 0 4px;line-height:1.05} .sidecard .role2{font-size:14px;color:var(--sub)} .sidecard .metric{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(44px,5vw,66px);color:var(--accent-deep); margin:30px 0 4px;letter-spacing:-.02em} .sidecard .md{font-size:13px;color:var(--sub)} .sidecard .stk{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub)} .sidecard canvas{position:absolute;right:-30px;top:-30px;width:150px;height:150px;opacity:.5;pointer-events:none} /* ============ contact + terminal ============ */ #contact{padding-bottom:80px} #contact .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:1} #contact h2{font-weight:420;font-size:clamp(38px,4.6vw,60px);line-height:1.05} #contact h2 em{font-style:italic;color:var(--accent)} #contact .sub2{margin-top:20px;color:var(--sub);font-size:16px;line-height:1.6;max-width:42ch} #contact .btn{margin-top:34px} .term{background:var(--t-bg);border-radius:16px;border:1px solid rgba(28,28,26,.5);padding:22px;color:var(--t-fg); box-shadow:0 30px 60px -30px var(--shadow);font-family:'JetBrains Mono',monospace} .term .bar{display:flex;gap:7px;margin-bottom:16px} .term .bar i{width:10px;height:10px;border-radius:50%;background:var(--t-dim)} .term .out{font-size:13px;line-height:1.8;min-height:180px;max-height:260px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word} .term .g{color:var(--t-g)} .term .in{display:flex;gap:8px;align-items:center;border-top:1px solid #2C2C26;margin-top:12px;padding-top:12px;font-size:13px} .term input{flex:1;background:none;border:none;outline:none;color:#F0EBE0;font:inherit;caret-color:var(--t-g)} .term .caret{width:8px;height:15px;background:var(--t-g);animation:blink 1.1s steps(1) infinite} .term input:focus~.caret{display:none} @keyframes blink{50%{opacity:0}} /* ============ footer (socials row, from the previous site + hugging face) ============ */ footer{border-top:1px solid var(--line);padding:52px 44px 34px;font-family:'JetBrains Mono',monospace; font-size:12px;color:var(--sub);letter-spacing:.02em} .footer-socials{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .footer-socials a{display:inline-flex;align-items:center;gap:10px;color:var(--sub);text-decoration:none; transition:color .2s ease,transform .2s ease} .footer-socials a:hover{color:var(--accent);transform:translateX(2px)} .footer-socials svg{width:15px;height:15px;flex:none;color:var(--accent)} /* ============ mobile ≤820px ============ */ @media(max-width:820px){ header nav{padding:14px 20px} html[data-nav="glass"] header nav{padding:6px 7px;gap:8px} html[data-nav="islands"] .navlinks,html[data-nav="islands"] .i-resume,html[data-nav="islands"] .i-toggle{display:none} .navlinks{display:none} .navmenu{display:flex} html[data-nav="islands"] .navmenu{display:flex} /* phone: the nav pill floats bottom-center (thumb reach); hides on scroll down, returns on scroll up */ html[data-nav="islands"] header nav{top:auto;bottom:calc(18px + env(safe-area-inset-bottom))} html[data-nav="islands"] header nav.fused{transform:translateY(calc(100% + 26px + env(safe-area-inset-bottom)))} #overlay .x{right:20px} main section{padding:90px 20px} #hero{flex-direction:column;align-items:flex-start;gap:44px;padding-top:120px;min-height:auto} /* photo rides next to the name (JS moves it inside .left after the h1) */ #hero .left{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;width:100%} #hero .left>*{grid-column:1/-1} #hero .left h1{grid-column:1;grid-row:2} #hero .left .heroimg{grid-column:2;grid-row:2;width:104px;max-width:104px;margin:0} #hero .left .intro{margin-top:26px} #stats .stats{grid-template-columns:1fr 1fr;padding:34px 20px;gap:26px 16px} #skills{min-height:auto} /* phone: the deck becomes a swipeable snap carousel — one card tall instead of five */ .stage{height:auto;display:flex;flex-direction:row;align-items:stretch;gap:14px;margin-top:26px; perspective:1000px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 22px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .stage::-webkit-scrollbar{display:none} .card3{position:relative;left:auto;top:auto;margin:0;flex:0 0 min(258px,72vw);width:min(258px,72vw); scroll-snap-align:center} .bigtitle{font-size:clamp(48px,17vw,86px)} .pgrid{grid-template-columns:1fr;margin-top:32px} #experience .cols{grid-template-columns:1fr;gap:44px} .sidecard{display:none} /* phone: timeline only — the live panel card is desktop's */ #contact .grid{grid-template-columns:1fr;gap:44px} footer{padding:36px 20px 28px} .footer-socials{justify-content:space-evenly;gap:8px} .footer-socials span{display:none} .footer-socials svg{width:20px;height:20px} } /* ============ reduced motion ============ */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} #loader{display:none!important} #about .ink .w{color:var(--ink)} #about .ink .w.hl{color:var(--accent-deep)} .step{opacity:1} .steps .prog{height:100%} .mcard .meta .arr{transform:none;opacity:1} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }