/* Classical — design-system tokens and component classes, ported from the
   original static portfolio. Fonts are served locally from ../fonts/. */

/* ── Cormorant Garamond ── */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/cormorant-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/cormorant-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/cormorant-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/cormorant-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/cormorant-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Lora ── */
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/lora-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/lora-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/lora-math.woff2") format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/lora-symbols.woff2") format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/lora-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/lora-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/lora-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * 0.85) var(--space-3);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── site layer ── */
:root{ --edge:clamp(20px,5vw,80px); --lead:28px; --half:14px; --maxw:1240px; --measure:60ch; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; text-wrap:pretty; -webkit-font-smoothing:antialiased; }

html[data-theme="dark"]{
  --color-bg:#171614;
  --color-surface:#221f1d;
  --color-text:#f0eee9;
  --color-divider:color-mix(in srgb, #f0eee9 14%, transparent);
  --color-accent:#e1ad66;
  --color-accent-700:#f3cd93;
  --color-accent-100:color-mix(in srgb, #e1ad66 16%, transparent);
  --color-accent-800:#f3cd93;
  --color-neutral-100:color-mix(in srgb, #f0eee9 6%, transparent);
  --color-neutral-800:#e7e3dc;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 18px 48px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{ background:var(--color-bg); color:var(--color-text); }
html[data-theme="dark"] .plate{ filter:sepia(.14) saturate(.85) contrast(1.02) brightness(.92); border-color:var(--color-surface); }
html[data-theme="dark"] .site-nav{ background:color-mix(in srgb, #171614 82%, transparent); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
.rule{ height:1px; border:0; margin:0; background:var(--color-divider); }
.muted{ color:color-mix(in srgb, var(--color-text) 66%, transparent); }

/* nav */
.site-nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(10px);
  background:color-mix(in srgb, var(--color-bg) 80%, transparent);
  border-bottom:1px solid var(--color-divider); }
.site-nav .inner{ max-width:var(--maxw); margin:0 auto; padding:var(--half) var(--edge);
  display:flex; align-items:center; gap:var(--space-4); }
.brand{ font-family:var(--font-heading); font-weight:600; font-size:19px; letter-spacing:-.01em;
  margin-right:auto; display:flex; align-items:baseline; gap:9px; }
.brand .dot{ color:var(--color-accent); }
.navlinks{ display:flex; gap:26px; }
.navlinks a{ color:inherit; text-decoration:none; font-family:var(--font-body); font-size:14px;
  color:color-mix(in srgb, var(--color-text) 74%, transparent); transition:color .2s ease; }
.navlinks a:hover{ color:var(--color-accent); }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--color-divider); border-radius:var(--radius-md); background:transparent;
  color:var(--color-text); cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.iconbtn:hover{ border-color:var(--color-accent); background:color-mix(in srgb,var(--color-accent) 8%,transparent); }
@media (max-width:860px){ .navlinks{ display:none; } }

/* type helpers */
.kicker{ display:inline-block; font-family:var(--font-body); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent-700); font-feature-settings:"tnum" 1;
  margin:0 0 var(--half); }
.display{ font-family:var(--font-heading); font-weight:400; letter-spacing:-.012em;
  font-size:clamp(44px,6vw,84px); line-height:1.04; margin:0; }
.sec-head{ font-family:var(--font-heading); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(32px,3.8vw,46px); line-height:1.08; margin:0; }
.lead{ font-family:var(--font-body); font-size:clamp(17px,1.5vw,19px); line-height:1.62;
  color:color-mix(in srgb, var(--color-text) 82%, transparent); max-width:var(--measure); }

/* sections */
.section{ padding:calc(3.4*var(--lead)) 0; }
.section-lite{ padding:calc(2.6*var(--lead)) 0; }
.sec-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4);
  margin-bottom:calc(1.6*var(--lead)); flex-wrap:wrap; }

/* hero */
.hero{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  padding:calc(3*var(--lead)) 0 calc(2.6*var(--lead)); }
.hero .portrait{ width:100%; aspect-ratio:4/5; }
.hero-figure{ margin:0; width:min(380px,100%); justify-self:end; }
.badges{ display:flex; flex-wrap:wrap; gap:9px; margin-top:calc(1.4*var(--lead)); }
.cta-row{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:calc(1.5*var(--lead)); align-items:center; }
.location{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px;
  color:color-mix(in srgb,var(--color-text) 62%,transparent); margin-bottom:var(--half); letter-spacing:.02em; }
.location svg{ color:var(--color-accent); }
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; justify-self:start; width:min(300px,60%); }
}

/* image slots — placeholder boxes until a real image is uploaded */
.img-slot{ display:grid; place-items:center; background:var(--color-surface);
  color:color-mix(in srgb,var(--color-text) 45%,transparent);
  font-size:12.5px; letter-spacing:.04em; text-align:center; padding:var(--space-3); }
.img-slot img{ width:100%; height:100%; object-fit:cover; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(1.4*var(--lead)) var(--space-6); }
.stat-num{ font-family:var(--font-heading); font-weight:400; font-size:clamp(38px,4.4vw,58px);
  line-height:1; font-feature-settings:"tnum" 1; margin:0; }
.stat-num.gilt{ color:var(--color-accent); }
.stat-label{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:var(--half) 0 0;
  color:color-mix(in srgb,var(--color-text) 66%,transparent); line-height:1.4; }
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* about columns */
.cols3{ position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  --cg:calc(2*var(--lead)); gap:calc(1.5*var(--lead)) var(--cg); }
.cols3::before,.cols3::after{ content:""; position:absolute; top:4px; bottom:4px; width:1px; background:var(--color-divider); }
.cols3::before{ left:calc((100% - 2*var(--cg))/3 + var(--cg)/2 - .5px); }
.cols3::after{ left:calc(2*(100% - 2*var(--cg))/3 + 1.5*var(--cg) - .5px); }
.col h3{ font-family:var(--font-heading); font-weight:600; font-size:22px; line-height:1.2; margin:0 0 var(--half); letter-spacing:-.005em; }
.col p{ font-size:15.5px; line-height:1.62; margin:0; color:color-mix(in srgb,var(--color-text) 80%,transparent);
  text-align:justify; hyphens:auto; hyphenate-limit-chars:6 3 3; }
@media (max-width:840px){ .cols3{ grid-template-columns:1fr; } .cols3::before,.cols3::after{ content:none; } .col{ max-width:60ch; } }

/* experience timeline */
.xp{ display:grid; gap:0; }
.xp-row{ display:grid; grid-template-columns:150px 1fr auto; gap:var(--space-4);
  padding:calc(1.1*var(--lead)) 0; border-top:1px solid var(--color-divider); align-items:start; }
.xp-row:last-child{ border-bottom:1px solid var(--color-divider); }
.xp-year{ font-family:var(--font-heading); font-size:16px; color:var(--color-accent-700);
  font-feature-settings:"tnum" 1; letter-spacing:.02em; padding-top:2px; }
.xp-role{ font-family:var(--font-heading); font-weight:600; font-size:20px; margin:0 0 4px; letter-spacing:-.005em; }
.xp-co{ font-size:14px; color:color-mix(in srgb,var(--color-text) 62%,transparent); margin:0 0 9px; }
.xp-desc{ font-size:14.5px; line-height:1.6; margin:0; max-width:56ch; color:color-mix(in srgb,var(--color-text) 82%,transparent); }
.xp-stack{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:220px; }
@media (max-width:760px){ .xp-row{ grid-template-columns:1fr; gap:var(--space-2); } .xp-stack{ justify-content:flex-start; max-width:none; margin-top:6px; } }

/* skills */
.skillgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.skill-card{ display:flex; flex-direction:column; gap:var(--half); padding:var(--space-4);
  border:1px solid var(--color-divider); border-radius:var(--radius-md); background:transparent;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.skill-card:hover{ border-color:color-mix(in srgb,var(--color-accent) 55%,var(--color-divider));
  transform:translateY(-3px); box-shadow:var(--shadow-md); }
.skill-cat{ font-family:var(--font-body); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-700); }
.skill-title{ font-family:var(--font-heading); font-weight:600; font-size:19px; margin:0; letter-spacing:-.005em; }
.skill-list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
@media (max-width:860px){ .skillgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .skillgrid{ grid-template-columns:1fr; } }

/* projects */
.project{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px);
  align-items:center; padding:calc(2*var(--lead)) 0; border-top:1px solid var(--color-divider); }
.project:nth-child(even) .proj-figure{ order:2; }
.proj-figure{ margin:0; width:100%; }
.proj-figure .cover{ width:100%; aspect-ratio:16/11; }
.proj-index{ font-family:var(--font-heading); font-size:15px; color:var(--color-accent); font-feature-settings:"tnum" 1; letter-spacing:.05em; }
.proj-title{ font-family:var(--font-heading); font-weight:400; font-size:clamp(28px,2.8vw,38px); line-height:1.08; margin:6px 0 var(--half); letter-spacing:-.01em; }
.proj-desc{ font-size:15.5px; line-height:1.62; color:color-mix(in srgb,var(--color-text) 82%,transparent); margin:0 0 var(--lead); max-width:52ch; }
.proj-meta{ display:grid; grid-template-columns:auto 1fr; gap:8px var(--space-4); font-size:14px; margin-bottom:var(--lead); }
.proj-meta dt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 55%,transparent); padding-top:2px; }
.proj-meta dd{ margin:0; color:color-mix(in srgb,var(--color-text) 84%,transparent); line-height:1.5; }
.proj-metrics{ display:flex; gap:var(--space-6); flex-wrap:wrap; padding-top:var(--lead); border-top:1px solid var(--color-divider); }
.pm-num{ font-family:var(--font-heading); font-weight:400; font-size:30px; line-height:1; font-feature-settings:"tnum" 1; margin:0; }
.pm-num.gilt{ color:var(--color-accent); }
.pm-label{ font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 60%,transparent); margin:7px 0 0; }
.stack{ display:flex; flex-wrap:wrap; gap:7px; }
@media (max-width:820px){ .project{ grid-template-columns:1fr; gap:var(--lead); padding:calc(1.6*var(--lead)) 0; } .project:nth-child(even) .proj-figure{ order:0; } }

/* small card rows (open source, blog) */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.mini{ display:flex; flex-direction:column; gap:9px; padding:var(--space-4); border:1px solid var(--color-divider);
  border-radius:var(--radius-md); text-decoration:none; color:inherit; background:transparent;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.mini:hover{ border-color:color-mix(in srgb,var(--color-accent) 55%,var(--color-divider)); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.mini .top{ display:flex; align-items:center; gap:8px; font-size:12px; color:color-mix(in srgb,var(--color-text) 60%,transparent); font-feature-settings:"tnum" 1; }
.mini .top svg{ color:var(--color-accent); }
.mini h4{ font-family:var(--font-heading); font-weight:600; font-size:18px; margin:0; letter-spacing:-.005em; }
.mini p{ font-size:14px; line-height:1.55; margin:0; color:color-mix(in srgb,var(--color-text) 76%,transparent); flex:1; }
.mini .meta{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:color-mix(in srgb,var(--color-text) 58%,transparent); font-feature-settings:"tnum" 1; }
@media (max-width:860px){ .trio{ grid-template-columns:1fr; } }

/* current focus */
.focus-panel{ border:1px solid var(--color-divider); border-radius:var(--radius-md); overflow:hidden; }
.focus-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-4);
  padding:calc(.9*var(--lead)) var(--space-4); border-bottom:1px solid var(--color-divider); }
.focus-row:last-child{ border-bottom:0; }
.focus-row .fdot{ width:8px; height:8px; border-radius:50%; background:var(--color-accent); }
.focus-title{ font-family:var(--font-heading); font-weight:600; font-size:18px; letter-spacing:-.005em; }
.focus-note{ font-size:13.5px; color:color-mix(in srgb,var(--color-text) 60%,transparent); }
.focus-stat{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-700); }
@media (max-width:640px){ .focus-row{ grid-template-columns:auto 1fr; } .focus-stat{ display:none; } }

/* contact */
.contact{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,80px); align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap:var(--space-3); max-width:460px; }
.form-status{ font-size:13.5px; margin:0; }
.form-status.ok{ color:var(--color-accent-700); }
.form-status.err{ color:#b3423a; }
.chan{ display:flex; align-items:center; gap:13px; padding:var(--half) 0; border-bottom:1px solid var(--color-divider); text-decoration:none; color:inherit; transition:color .2s ease; }
.chan:hover{ color:var(--color-accent); }
.chan svg{ color:var(--color-accent); flex:none; }
.chan .ct{ display:flex; flex-direction:column; }
.chan .ct b{ font-family:var(--font-heading); font-weight:600; font-size:16px; }
.chan .ct span{ font-size:13px; color:color-mix(in srgb,var(--color-text) 60%,transparent); }
@media (max-width:760px){ .contact{ grid-template-columns:1fr; } }

/* footer */
.foot{ border-top:1px solid var(--color-divider); padding:calc(1.8*var(--lead)) 0; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  font-size:13px; color:color-mix(in srgb,var(--color-text) 62%,transparent); }
.foot-links{ display:flex; gap:20px; }
.foot-links a{ color:inherit; text-decoration:none; }
.foot-links a:hover{ color:var(--color-accent); }

/* reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* language switcher — additive, matches the .iconbtn scale */
.lang-switch{ display:inline-flex; height:38px; border:1px solid var(--color-divider);
  border-radius:var(--radius-md); overflow:hidden; }
.lang-switch button{ font-family:var(--font-body); font-size:11.5px; letter-spacing:.06em;
  padding:0 10px; background:transparent; border:0; cursor:pointer;
  color:color-mix(in srgb, var(--color-text) 70%, transparent);
  transition:color .2s ease, background .2s ease; }
.lang-switch button + button{ border-left:1px solid var(--color-divider); }
.lang-switch button:hover{ color:var(--color-accent); }
.lang-switch button.active{ color:var(--color-accent);
  background:color-mix(in srgb, var(--color-accent) 10%, transparent); }