*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── Core backgrounds ── */
      --bg:            #F0F2F2;   /* main page background */
      --bg-subtle:     #F7F9F9;   /* whisper tint — alternating sections */
      --bg-muted:      #E4EAEA;   /* quiet sections, hover fills on bg */
      --bg-teal:       #DCF5F3;   /* mint-washed — callout bands, highlights */
      --bg-dark:       #1C2A2A;   /* dark charcoal-teal — footer, dark sections */
      --bg-darker:     #0F1A1A;   /* deepest dark — overlays, modals */

      /* ── Surfaces ── */
      --surface:       #FFFFFF;   /* card / panel background */
      --surface-teal:  #EAF8F7;   /* teal-washed card — active / selected */

      /* ── Text / Ink ── */
      --ink:           #2D3636;   /* primary text */
      --ink-muted:     #596363;   /* secondary text */
      --ink-faint:     #8C9D9D;   /* placeholders, disabled — decorative only, WCAG 1.4.3 exempt */
      --ink-inverse:   #F0F2F2;   /* text on dark backgrounds */

      /* ── Accent scale ── */
      --accent-soft:   #D4F2F0;   /* pale mint — chip bgs, soft hover fills */
      --accent:        #72DCD6;   /* brand mint — decorative, backgrounds */
      --accent-mid:    #3BB5AE;   /* mid teal — interactive states */
      --accent-dark:   #187A74;   /* dark teal — text uses (WCAG AA 4.59:1) */
      --accent-deep:   #0D4F4B;   /* deepest teal — pressed, high emphasis */

      /* ── Borders ── */
      --border-subtle: #E2ECEC;   /* hairline dividers */
      --border:        #C8DEDD;   /* standard borders */
      --border-strong: #93BEBB;   /* prominent borders */

      /* ── Overlay ── */
      --overlay:       rgba(15, 26, 26, 0.6);  /* scrim / modal backdrop */

      /* ── Spacing & motion ── */
      --radius:        16px;
      --radius-sm:     8px;
      --transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         TYPOGRAPHY — Inter
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

      /* ── Font family ── */
      --font-sans:     'Inter', system-ui, sans-serif;
      --font-mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

      /* ── Font weights ── */
      --weight-thin:       100;   /* Thin */
      --weight-xlight:     200;   /* Extra Light */
      --weight-light:      300;   /* Light */
      --weight-regular:    400;   /* Regular */
      --weight-medium:     500;   /* Medium */
      --weight-semibold:   600;   /* Semi Bold */
      --weight-bold:       700;   /* Bold */
      --weight-extrabold:  800;   /* Extra Bold ← primary heading weight */
      --weight-black:      900;   /* Black ← display / hero */

      /* ── Size scale ── */
      --text-xs:    0.6875rem;    /* 11px — labels, eyebrows */
      --text-sm:    0.8125rem;    /* 13px — captions, tags */
      --text-base:  1rem;         /* 16px — body copy */
      --text-md:    1.125rem;     /* 18px — body large */
      --text-lg:    1.25rem;      /* 20px — lead paragraph */
      --text-xl:    1.5rem;       /* 24px — h4 */
      --text-2xl:   1.875rem;     /* 30px — h3 */
      --text-3xl:   2.25rem;      /* 36px — h2 */
      --text-4xl:   3rem;         /* 48px — h1 */
      --text-5xl:   3.75rem;      /* 60px — display */

      /* ── Line heights ── */
      --leading-none:     1;
      --leading-tight:    1.1;
      --leading-snug:     1.25;
      --leading-normal:   1.5;
      --leading-relaxed:  1.7;
      --leading-loose:    1.85;

      /* ── Letter spacing ── */
      --tracking-tighter: -0.04em;
      --tracking-tight:   -0.02em;
      --tracking-normal:   0em;
      --tracking-wide:     0.05em;
      --tracking-wider:    0.08em;
      --tracking-widest:   0.12em;

      /* ── Semantic role tokens ── */
      /* Usage: font-size + font-weight + line-height + letter-spacing */
      /* display  */ --role-display-size: var(--text-5xl);   --role-display-weight: var(--weight-black);     --role-display-leading: var(--leading-tight);  --role-display-tracking: var(--tracking-tighter);
      /* h1       */ --role-h1-size: var(--text-4xl);        --role-h1-weight: var(--weight-extrabold);      --role-h1-leading: var(--leading-tight);       --role-h1-tracking: var(--tracking-tight);
      /* h2       */ --role-h2-size: var(--text-3xl);        --role-h2-weight: var(--weight-bold);           --role-h2-leading: var(--leading-snug);        --role-h2-tracking: var(--tracking-tight);
      /* h3       */ --role-h3-size: var(--text-2xl);        --role-h3-weight: var(--weight-semibold);       --role-h3-leading: var(--leading-snug);        --role-h3-tracking: -0.01em;
      /* h4       */ --role-h4-size: var(--text-xl);         --role-h4-weight: var(--weight-semibold);       --role-h4-leading: var(--leading-normal);      --role-h4-tracking: var(--tracking-normal);
      /* body-lg  */ --role-body-lg-size: var(--text-lg);    --role-body-lg-weight: var(--weight-regular);   --role-body-lg-leading: var(--leading-relaxed);
      /* body     */ --role-body-size: var(--text-base);     --role-body-weight: var(--weight-regular);      --role-body-leading: var(--leading-relaxed);
      /* body-sm  */ --role-body-sm-size: var(--text-sm);    --role-body-sm-weight: var(--weight-regular);   --role-body-sm-leading: var(--leading-relaxed);
      /* label    */ --role-label-size: var(--text-xs);      --role-label-weight: var(--weight-medium);      --role-label-leading: var(--leading-normal);   --role-label-tracking: var(--tracking-wider);
      /* caption  */ --role-caption-size: var(--text-sm);    --role-caption-weight: var(--weight-light);     --role-caption-leading: var(--leading-normal);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--ink);
      line-height: var(--leading-relaxed);
      -webkit-font-smoothing: antialiased;
    }

    /* ─── NAV ─── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 102;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 48px;
      background: rgba(240, 242, 242, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid transparent;
      transition: border-color var(--transition);
    }
    nav.scrolled { border-color: var(--border); }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
    }
    .nav-logo-img {
      height: 56px;
      width: auto;
      display: block;
    }
    .nav-logo-name {
      font-family: var(--font-sans);
      font-weight: var(--weight-semibold);
      font-size: var(--text-base);
      letter-spacing: var(--tracking-tight);
      color: var(--ink);
      margin-left: 10px;
      opacity: 1;
      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
      transition: opacity 0.25s ease, max-width 0.3s ease, margin-left 0.3s ease;
    }
    nav.scrolled .nav-logo-name {
      opacity: 0;
      max-width: 0;
      margin-left: 0;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 40px;
      list-style: none;
    }

    .nav-links a {
      font-size: var(--text-sm);
      font-weight: var(--weight-regular);
      color: var(--ink-muted);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: color var(--transition);
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: var(--accent);
      transition: width var(--transition);
    }
    .nav-links a:hover { color: var(--ink); }
    .nav-links a:hover::after { width: 100%; }

    .nav-cta {
      font-size: var(--text-sm) !important;
      font-weight: var(--weight-medium) !important;
      color: #fff !important;
      background: var(--ink);
      padding: 10px 22px;
      border-radius: 100px;
      transition: background var(--transition), transform var(--transition) !important;
    }
    .nav-cta::after { display: none !important; }
    .nav-cta:hover {
      background: #0E5C57 !important;
      color: #fff !important;
      transform: translateY(-1px);
    }

    /* ─── NAV CONTROLS WRAPPER ─── */
    .nav-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* ─── BURGER BUTTON ─── */
    .burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 36px; height: 36px;
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      transition: border-color var(--transition), background var(--transition);
    }
    .burger span {
      display: block;
      width: 16px; height: 1.5px;
      background: var(--ink-muted);
      border-radius: 2px;
      transition: transform var(--transition), opacity var(--transition), background var(--transition);
      transform-origin: center;
    }
    .burger:hover { border-color: var(--ink); background: var(--bg-muted); }
    .burger:hover span { background: var(--ink); }

    /* Burger → X animation when open */
    .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* ─── MOBILE MENU PANEL ─── */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 101;
      background: var(--bg);
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 0;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: none;
    }
    .mobile-menu.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .mobile-menu nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      width: 100%;
      padding: 120px 40px 0;
    }
    .mobile-menu-link {
      font-family: var(--font-sans);
      font-size: var(--text-2xl);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-tight);
      color: var(--ink);
      text-decoration: none;
      padding: 20px 0;
      width: 100%;
      text-align: center;
      border-bottom: 2px solid var(--border);
      transition: color var(--transition);
    }
    .mobile-menu-link:first-child { border-top: 2px solid var(--border); }
    .mobile-menu-link:hover { color: var(--accent-dark); }

    /* ─── FOOTER ─── */
    footer {
      background: var(--bg-muted);
      border-top: 1px solid var(--border-subtle);
      padding: 32px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-copy {
      font-size: var(--text-sm);
      color: var(--ink-muted);
    }

    .footer-links {
      display: flex;
      gap: 24px;
      list-style: none;
    }

    .footer-links a {
      font-size: var(--text-sm);
      color: var(--ink-muted);
      text-decoration: none;
      transition: color var(--transition);
    }
    .footer-links a:hover { color: var(--ink); }

    /* ─── SCREEN READER ONLY ─── */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* ─── KEYBOARD ACCESSIBILITY ─── */

    /* Skip to content link — hidden until focused */
    .skip-link {
      position: fixed;
      top: 16px;
      left: 16px;
      z-index: 9999;
      padding: 12px 20px;
      background: var(--ink);
      color: #fff;
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      border-radius: var(--radius-sm);
      text-decoration: none;
      transform: translateY(-120px);
      transition: transform 0.2s ease;
    }
    .skip-link:focus { transform: translateY(0); outline: 3px solid var(--accent); outline-offset: 3px; }

    /* Global focus ring — only shown on keyboard nav */
    :focus { outline: none; }
    :focus-visible {
      outline: 3px solid var(--accent-dark);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* Specific overrides for rounded elements */
    .nav-cta:focus-visible,
    .btn-primary:focus-visible,
    .btn-ghost:focus-visible,
    .btn-cv:focus-visible,
    .social-link:focus-visible { border-radius: 100px; }

    .project-card:focus-visible {
      outline-offset: 0;
      border-radius: var(--radius);
      /* Ensure cards are visible even if animation hasn't fired */
      opacity: 1 !important;
      transform: none !important;
    }

    .nav-logo:focus-visible { border-radius: 4px; }

    /* ══════════════════════════════════════════════════════
       DARK MODE — system preference
    ══════════════════════════════════════════════════════ */
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg:            #111A1A;
      --bg-subtle:     #0D1717;
      --bg-muted:      #182424;
      --bg-teal:       #1A3030;
      --bg-dark:       #080F0F;
      --bg-darker:     #030808;
      --surface:       #1C2D2D;
      --surface-teal:  #1A3030;
      --ink:           #E0EDED;
      --ink-muted:     #7AADAD;
      --ink-faint:     #3D5E5E;
      --ink-inverse:   #1C2D2D;
      --accent-soft:   #0F2B2A;
      --accent:        #72DCD6;
      --accent-mid:    #4CC9C2;
      --accent-dark:   #5DD4CE;
      --accent-deep:   #72DCD6;
      --border-subtle: #1A2E2E;
      --border:        #234040;
      --border-strong: #2D5252;
      --overlay:       rgba(3, 8, 8, 0.75);
      }
      :root:not([data-theme="light"]) nav {
        background: rgba(11, 20, 20, 0.88);
      }
      :root:not([data-theme="light"])  {
    /* ── Dark mode button fixes ── */
    /* Fix 1: .nav-cta — --ink flips to near-white in dark; use mint bg + dark text */
    .nav-cta                       { background: var(--accent-mid) !important; color: var(--ink-inverse) !important; }
    .nav-cta:hover                 { background: var(--accent-dark) !important; color: var(--ink-inverse) !important; }
    /* Fix 2: .btn-primary — --ink and --accent are both light; swap to dark text */
    .btn-primary                   { color: var(--ink-inverse); }
    /* Fix 3: .btn-cv hover — --bg-dark becomes near-black; use ink-muted instead */
    .btn-cv:hover                  { background: var(--ink-muted); }
    /* Fix 4: .theme-toggle border — all border tokens too dark; use #4D7C7C (3.78:1) */
    .theme-toggle                  { border-color: #4D7C7C; }
      }
    }

    /* DARK MODE — manual toggle overrides auto preference */
    [data-theme="dark"] {
      color-scheme: dark;
      --bg:            #111A1A;
      --bg-subtle:     #0D1717;
      --bg-muted:      #182424;
      --bg-teal:       #1A3030;
      --bg-dark:       #080F0F;
      --bg-darker:     #030808;
      --surface:       #1C2D2D;
      --surface-teal:  #1A3030;
      --ink:           #E0EDED;
      --ink-muted:     #7AADAD;
      --ink-faint:     #3D5E5E;
      --ink-inverse:   #1C2D2D;
      --accent-soft:   #0F2B2A;
      --accent:        #72DCD6;
      --accent-mid:    #4CC9C2;
      --accent-dark:   #5DD4CE;
      --accent-deep:   #72DCD6;
      --border-subtle: #1A2E2E;
      --border:        #234040;
      --border-strong: #2D5252;
      --overlay:       rgba(3, 8, 8, 0.75);
    }
    [data-theme="dark"] nav {
      background: rgba(11, 20, 20, 0.88);
    }
    [data-theme="dark"] {
    /* ── Dark mode button fixes ── */
    /* Fix 1: .nav-cta — --ink flips to near-white in dark; use mint bg + dark text */
    .nav-cta                       { background: var(--accent-mid) !important; color: var(--ink-inverse) !important; }
    .nav-cta:hover                 { background: var(--accent-dark) !important; color: var(--ink-inverse) !important; }
    /* Fix 2: .btn-primary — --ink and --accent are both light; swap to dark text */
    .btn-primary                   { color: var(--ink-inverse); }
    /* Fix 3: .btn-cv hover — --bg-dark becomes near-black; use ink-muted instead */
    .btn-cv:hover                  { background: var(--ink-muted); }
    /* Fix 4: .theme-toggle border — all border tokens too dark; use #4D7C7C (3.78:1) */
    .theme-toggle                  { border-color: #4D7C7C; }
    }

    /* LIGHT MODE — manual toggle re-asserts light when system is dark */
    [data-theme="light"] {
      color-scheme: light;
      --bg:            #F0F2F2;
      --bg-subtle:     #F7F9F9;
      --bg-muted:      #E4EAEA;
      --bg-teal:       #DCF5F3;
      --bg-dark:       #1C2A2A;
      --bg-darker:     #0F1A1A;
      --surface:       #FFFFFF;
      --surface-teal:  #EAF8F7;
      --ink:           #2D3636;
      --ink-muted:     #596363;
      --ink-faint:     #8C9D9D;
      --ink-inverse:   #F0F2F2;
      --accent-soft:   #D4F2F0;
      --accent:        #72DCD6;
      --accent-mid:    #3BB5AE;
      --accent-dark:   #187A74;
      --accent-deep:   #0D4F4B;
      --border-subtle: #E2ECEC;
      --border:        #C8DEDD;
      --border-strong: #93BEBB;
      --overlay:       rgba(15, 26, 26, 0.6);
    }
    [data-theme="light"] nav {
      background: rgba(240, 242, 242, 0.85);
    }

    /* ── Theme toggle button ── */
    .theme-toggle {
      background: none;
      border: 1px solid var(--border);
      border-radius: 100px;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: var(--ink-muted);
      transition: color var(--transition), border-color var(--transition), background var(--transition);
      flex-shrink: 0;
      padding: 0;
    }
    .theme-toggle:hover {
      color: var(--ink);
      border-color: var(--ink);
      background: var(--bg-muted);
    }
    .theme-toggle svg { width: 16px; height: 16px; }
    .theme-toggle .icon-moon { display: block; }
    .theme-toggle .icon-sun  { display: none; }
    [data-theme="dark"]  .theme-toggle .icon-moon,
    [data-theme="light"] .theme-toggle .icon-sun { display: none; }
    [data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
      :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
    }

    /* ─── MOBILE NAV ─── */
    @media (max-width: 600px) {
      .nav-links { display: none; }
      .burger    { display: flex; }
      .mobile-menu { display: flex; }
    }

    /* Dark mode hero gradient — matches dark --bg (#111A1A) */
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .hero-bg::after {
        background:
          linear-gradient(to bottom, rgba(17,26,26,0.2) 0%, rgba(17,26,26,0.75) 55%, rgba(17,26,26,1) 100%),
          linear-gradient(to right,  rgba(17,26,26,1)   0%, rgba(17,26,26,0.5) 50%, rgba(17,26,26,0)   100%);
      }
    }
    [data-theme="dark"] .hero-bg::after {
      background:
        linear-gradient(to bottom, rgba(17,26,26,0.2) 0%, rgba(17,26,26,0.75) 55%, rgba(17,26,26,1) 100%),
        linear-gradient(to right,  rgba(17,26,26,1)   0%, rgba(17,26,26,0.5) 50%, rgba(17,26,26,0)   100%);
    }
    [data-theme="light"] .hero-bg::after {
      background:
        linear-gradient(to bottom, rgba(240,242,242,0.15) 0%, rgba(240,242,242,0.55) 55%, rgba(240,242,242,1) 100%),
        linear-gradient(to right,  rgba(240,242,242,1)    0%, rgba(240,242,242,0.4) 50%, rgba(240,242,242,0)   100%);
    }