/* Catppuccin palette. :root = Latte (light, default). [data-theme="mocha"] = Mocha (dark). */
:root{
  color-scheme:light;
  --ctp-mauve:#8839ef;--ctp-lavender:#7287fd;--ctp-text:#4c4f69;--ctp-subtext0:#6c6f85;
  --ctp-overlay1:#8c8fa1;--ctp-overlay0:#9ca0b0;--ctp-surface1:#bcc0cc;--ctp-surface0:#ccd0da;
  --ctp-base:#eff1f5;--ctp-mantle:#e6e9ef;--ctp-crust:#dce0e8;

  --bg:var(--ctp-base);
  --surface-card:var(--ctp-mantle);
  --surface-raised:var(--ctp-surface0);
  --surface-hover:var(--ctp-surface0);
  --text-body:var(--ctp-text);
  --text-strong:var(--ctp-text);
  --text-muted:var(--ctp-subtext0);
  --text-subtle:var(--ctp-overlay1);
  --border:var(--ctp-surface0);
  --accent:var(--ctp-mauve);
  --accent-hover:color-mix(in oklab,var(--ctp-mauve) 85%,var(--ctp-text));
  --accent-fg:var(--ctp-base);
  --focus-ring:var(--ctp-lavender);
  --selection:color-mix(in oklab,var(--ctp-mauve) 28%,transparent);

  --font-sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  --space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --space-7:40px;--space-8:48px;--space-9:64px;--space-10:96px;
  --section-gap:clamp(96px,12vw,160px);
  --content-max:1200px;
  --prose-max:68ch;
  --gutter:clamp(24px,5vw,64px);
  --nav-height:80px;

  --radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:999px;
  --shadow-sm:0 1px 2px color-mix(in oklab,var(--ctp-crust) 60%,transparent);
  --ring:0 0 0 3px color-mix(in oklab,var(--focus-ring) 45%,transparent);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --duration-fast:140ms;--duration-base:220ms;--duration-slow:420ms;
}
[data-theme="mocha"]{
  color-scheme:dark;
  --ctp-mauve:#cba6f7;--ctp-lavender:#b4befe;--ctp-text:#cdd6f4;--ctp-subtext0:#a6adc8;
  --ctp-overlay1:#7f849c;--ctp-overlay0:#6c7086;--ctp-surface1:#45475a;--ctp-surface0:#313244;
  --ctp-base:#1e1e2e;--ctp-mantle:#181825;--ctp-crust:#11111b;
  --accent-fg:var(--ctp-crust);
}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text-body);font-family:var(--font-sans);font-size:20px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out)}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-weight:700;text-wrap:balance}
p{margin:0;text-wrap:pretty}
::selection{background:var(--selection)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
img{display:block;max-width:100%}
section{scroll-margin-top:var(--nav-height)}

/* nav */
.ds-nav{position:sticky;top:0;z-index:50;height:var(--nav-height);background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--duration-base) var(--ease-out)}
.ds-nav--scrolled{border-bottom-color:var(--border)}
.ds-nav__inner{max-width:var(--content-max);height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.ds-nav__brand{font-family:var(--font-mono);font-size:18px;font-weight:600;color:var(--text-strong);text-decoration:none}
.ds-nav__brand span{color:var(--accent)}
.ds-nav__links{display:flex;align-items:center;gap:var(--space-2)}
.ds-nav__link{padding:10px 16px;border-radius:var(--radius-full);font-size:17px;font-weight:500;line-height:normal;color:var(--text-muted);text-decoration:none;transition:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}
.ds-nav__link:hover{color:var(--text-strong);background:var(--surface-hover)}
.ds-nav__link--active{color:var(--text-strong)}
.ds-nav__link--active::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle;transform:translateY(-2px)}
.ds-nav__menu{display:none;order:1;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface-raised);color:var(--text-strong);font-size:17px;cursor:pointer}
.ds-nav__right{display:flex;align-items:center;gap:var(--space-3)}

.ds-toggle{position:relative;display:inline-flex;align-items:center;width:84px;height:44px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface-raised);cursor:pointer;flex:none}
.ds-toggle__thumb{position:absolute;top:4px;left:4px;width:34px;height:34px;border-radius:50%;background:var(--bg);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-out)}
.ds-toggle__icon{position:relative;z-index:1;width:34px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text-subtle);transition:color var(--duration-base) var(--ease-out)}
.ds-toggle__icon + .ds-toggle__icon{margin-left:6px}
.ds-toggle__icon--sun{color:var(--accent)}
[data-theme="mocha"] .ds-toggle__thumb{transform:translateX(40px)}
[data-theme="mocha"] .ds-toggle__icon--sun{color:var(--text-subtle)}
[data-theme="mocha"] .ds-toggle__icon--moon{color:var(--accent)}

/* shared components */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);font-weight:600;line-height:1;border:1px solid transparent;border-radius:var(--radius-full);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.ds-btn:active{transform:scale(.97)}
.ds-btn--lg{height:64px;padding:0 34px;font-size:20px}
.ds-btn--primary{background:var(--accent);color:var(--accent-fg)}
.ds-btn--primary:hover{background:var(--accent-hover)}
.ds-btn i{font-size:.95em}

.ds-card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-body);padding:var(--space-6)}
.ds-card h4,.skill__head h3{font-size:22px;letter-spacing:-.015em;line-height:1.25}

.ds-eyebrow{font-family:var(--font-mono);font-size:16px;font-weight:500;letter-spacing:.02em;color:var(--accent)}
.ds-section-heading{display:flex;flex-direction:column;gap:var(--space-4);max-width:760px}
.ds-section-heading h2{font-size:clamp(40px,4.6vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.05}

.ds-link{display:inline-flex;align-items:center;gap:10px;color:var(--text-strong);font-size:17px;font-weight:600;text-decoration:none}
.ds-link i{color:var(--accent);transition:transform var(--duration-base) var(--ease-out)}
.ds-link:hover{color:var(--accent)}
.ds-link:hover i{transform:translateX(4px)}

/* layout */
main{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter)}
main > section:not(.hero){padding-top:var(--section-gap)}
main > section:last-child{padding-bottom:var(--section-gap)}
.ds-section-heading + *{margin-top:var(--space-9)}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10);align-items:center;min-height:calc(100vh - var(--nav-height))}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.hero h1{font-size:clamp(64px,8.5vw,120px);font-weight:800;letter-spacing:-.05em;line-height:.92}
.hero p{margin-bottom:var(--space-4);font-size:24px;line-height:1.4;color:var(--text-muted)}
.hero__photo{justify-self:end;width:min(100%,460px,57.6vh);aspect-ratio:4/5;border-radius:var(--radius-xl);overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.prose{display:flex;flex-direction:column;gap:var(--space-5);line-height:1.7;color:var(--text-muted);max-width:var(--prose-max)}
.prose strong{color:var(--text-strong);font-weight:600}

.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--space-5)}
.skill{display:flex;flex-direction:column;gap:var(--space-4)}
.skill__head{display:flex;align-items:center;gap:var(--space-4)}
.skill__head h3{flex:1}
.skill__icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--accent) 16%,transparent);color:var(--accent);font-size:19px;flex:none}
.skill__count,.skill__note{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--text-subtle)}
.skill__note{display:inline-block;margin-left:10px}
.skill ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.skill li{display:flex;align-items:baseline;gap:var(--space-4);padding:12px 0;font-size:18px;line-height:1.6;color:var(--text-strong);transition:transform var(--duration-base) var(--ease-out)}
.skill li + li{border-top:1px solid var(--border)}
.skill li:hover{transform:translateX(4px)}
.skill__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-3px)}

.groups{display:flex;flex-direction:column;gap:var(--space-10)}
.group{display:flex;flex-direction:column;gap:var(--space-6)}
.group__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);flex-wrap:wrap;padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}
.group__head h3{font-size:28px;letter-spacing:-.02em;line-height:1.25}
.group__head p{font-size:18px;color:var(--text-muted)}
.group__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--space-5)}
.project{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.project p{font-size:18px;line-height:1.6;color:var(--text-muted);flex:1}
.project__links{display:flex;flex-wrap:wrap;gap:var(--space-5);padding-top:var(--space-3)}

.contacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--space-5)}
.contact{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--text-strong);transition:border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.contact:hover{border-color:var(--accent);transform:translateY(-3px)}
.contact__icon{font-size:26px;width:32px;color:var(--text-muted)}
.contact__text{display:flex;flex-direction:column;flex:1;min-width:0}
.contact__label{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--text-subtle)}
.contact__value{font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact__ext{color:var(--text-subtle);font-size:16px}

footer{max-width:var(--content-max);margin:0 auto;padding:var(--space-7) var(--gutter);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);flex-wrap:wrap;font-size:15px}
footer span{font-family:var(--font-mono);color:var(--text-muted)}
footer div{display:flex;flex-wrap:wrap;gap:var(--space-5)}
footer a{color:var(--text-muted);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
footer a:hover{color:var(--accent)}

@media (max-width:859px){
  .ds-nav__menu{display:inline-flex}
  .ds-nav__links{display:none;position:absolute;top:var(--nav-height);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:var(--space-2) calc(var(--gutter) - 16px) var(--space-5);background:var(--bg);border-bottom:1px solid var(--border)}
  .ds-nav--open{background:var(--bg);border-bottom-color:var(--border)}
  .ds-nav--open .ds-nav__links{display:flex}
  .ds-nav__link{padding:14px 16px;font-size:18px;border-radius:var(--radius-md)}
}
@media (max-width:759px){
  .hero{grid-template-columns:1fr;min-height:0;padding:var(--space-8) 0}
  .hero__photo{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important}
}