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

    :root {
      --bg:      #f0eeea;
      --fg:      #111;
      --muted:   #555;
      --subtle:  #bbb;
      --border:  #d5d3cf;
      --card-bg: #e5e3df;
      --line:    #aaa;
    }
    [data-theme="dark"] {
      --bg:      #0e0e0e;
      --fg:      #e8e6e1;
      --muted:   #aaa;
      --subtle:  #555;
      --border:  #1e1e1e;
      --card-bg: #1a1a1a;
      --line:    #2a2a2a;
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--fg);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 300;
      transition: background 0.4s, color 0.4s;
      overflow-x: hidden;
    }

    /* ── HEADER ── */
    header {
      position: fixed;
      top: 0; left: 0; right: 0; height: 52px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 40px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      z-index: 100;
      transition: background 0.4s, border-color 0.4s;
      overflow: hidden;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    .header-left { display: flex; align-items: center; gap: 20px; }
    .back-link {
      font-size: 13px; letter-spacing: 0.08em;
      color: var(--muted); text-decoration: none;
      transition: color 0.2s;
    }
    .back-link:hover { color: var(--fg); }
    .breadcrumb {
      font-size: 13px; letter-spacing: 0.06em; color: var(--subtle);
    }
    .breadcrumb span { color: var(--fg); }
    .theme-toggle {
      background: none; border: none; cursor: pointer;
      display: flex; align-items: center; gap: 7px;
    }
    .toggle-track {
      width: 30px; height: 17px; border-radius: 9px;
      border: 1px solid var(--line); background: transparent;
      position: relative;
    }
    .toggle-dot {
      position: absolute; top: 3px; left: 3px;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--fg);
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s;
    }
    [data-theme="dark"] .toggle-dot { transform: translateX(13px); }
    .toggle-label {
      font-size: 12px; letter-spacing: 0.1em; color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
    }
    .header-right { display: flex; align-items: center; gap: 16px; }
    .lang-toggle {
      background: none; border: none; cursor: pointer;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px; letter-spacing: 0.1em;
      color: var(--muted); transition: color 0.2s; padding: 0;
    }
    .lang-toggle:hover { color: var(--fg); }

    /* ── LAYOUT ── */
    main { padding-top: 52px; }

    /* ── HERO ── */
    .about-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: calc(100vh - 52px);
      border-bottom: 1px solid var(--border);
    }
    .hero-left {
      padding: 80px 60px;
      display: flex; flex-direction: column; justify-content: space-between;
      border-right: 1px solid var(--border);
      opacity: 0; animation: fadeUp 0.7s ease 0.1s forwards;
    }
    .hero-left h1 {
      font-size: clamp(40px, 5vw, 72px);
      font-weight: 300; line-height: 1.05; letter-spacing: -0.02em;
    }
    .hero-left .subtitle {
      font-size: 11px; letter-spacing: 0.1em; color: var(--muted);
    }
    .hero-right {
      position: relative;
      background: var(--card-bg);
      transition: background 0.4s;
      opacity: 0; animation: fadeUp 0.7s ease 0.2s forwards;
      /* swap for photo: background-image: url(photo.jpg); background-size: cover; background-position: center; */
    }
    .hero-right-label {
      position: absolute; bottom: 32px; right: 32px;
      font-size: 9px; letter-spacing: 0.14em; color: var(--muted);
    }

    /* ── BIO SECTION ── */
    .bio-section {
      display: grid;
      grid-template-columns: 1fr 2fr;
      border-bottom: 1px solid var(--border);
      opacity: 0; animation: fadeUp 0.7s ease 0.3s forwards;
    }
    .bio-label {
      padding: 60px 40px;
      border-right: 1px solid var(--border);
      font-size: 9px; letter-spacing: 0.16em; color: var(--muted);
      text-transform: uppercase;
    }
    .bio-content {
      padding: 60px 60px;
    }
    .bio-content p {
      font-size: 17px; line-height: 1.9; color: var(--muted);
      margin-bottom: 20px; max-width: 560px;
    }
    .bio-content p strong {
      color: var(--fg); font-weight: 400;
    }
    .bio-content p:last-child { margin-bottom: 0; }

    /* ── SKILLS ── */
    .skills-section {
      display: grid;
      grid-template-columns: 1fr 2fr;
      border-bottom: 1px solid var(--border);
      opacity: 0; animation: fadeUp 0.7s ease 0.4s forwards;
    }
    .skills-label {
      padding: 60px 40px;
      border-right: 1px solid var(--border);
      font-size: 9px; letter-spacing: 0.16em; color: var(--muted);
      text-transform: uppercase;
    }
    .skills-grid {
      padding: 60px 60px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }
    .skill-item {
      padding: 24px 20px;
      background: var(--card-bg);
      transition: background 0.4s;
    }
    .skill-name {
      font-size: 13px; font-weight: 400;
      letter-spacing: 0.06em; margin-bottom: 6px;
    }
    .skill-desc {
      font-size: 11px; letter-spacing: 0.06em; color: var(--muted);
      line-height: 1.6;
    }

    /* ── EXPERIENCE ── */
    .exp-section {
      display: grid;
      grid-template-columns: 1fr 2fr;
      border-bottom: 1px solid var(--border);
      opacity: 0; animation: fadeUp 0.7s ease 0.45s forwards;
    }
    .exp-label {
      padding: 60px 40px;
      border-right: 1px solid var(--border);
      font-size: 9px; letter-spacing: 0.16em; color: var(--muted);
      text-transform: uppercase;
    }
    .exp-list { padding: 60px 60px; }
    .exp-item {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding: 28px 0;
      border-bottom: 1px solid var(--border);
    }
    .exp-item:first-child { padding-top: 0; }
    .exp-item:last-child { border-bottom: none; padding-bottom: 0; }
    .exp-role { font-size: 15px; font-weight: 400; margin-bottom: 4px; }
    .exp-company { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
    .exp-year { font-size: 9px; letter-spacing: 0.1em; color: var(--subtle); }

    /* ── BOTTOM CTA ── */
    .about-cta {
      display: flex; align-items: center; justify-content: space-between;
      padding: 48px 60px;
      text-decoration: none; color: var(--fg);
      transition: background 0.2s;
      opacity: 0; animation: fadeUp 0.5s ease 0.5s forwards;
    }
    .about-cta:hover { background: var(--card-bg); }
    .cta-label { font-size: 9px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 6px; }
    .cta-title { font-size: 20px; font-weight: 300; }
    .cta-arrow { font-size: 24px; color: var(--muted); }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── MOBILE ── */
    @media (max-width: 600px) {
      header { padding: 0 16px; height: 44px; }
      .breadcrumb { display: none; }

      .about-hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-left { padding: 40px 20px; gap: 32px; border-right: none; border-bottom: 1px solid var(--border); }
      .hero-left h1 { font-size: 40px; }
      .hero-right { height: 260px; border-right: none; }

      .bio-section, .skills-section, .exp-section { grid-template-columns: 1fr; }
      .bio-label, .skills-label, .exp-label {
        padding: 24px 20px 0; border-right: none; border-bottom: none;
      }
      .bio-content, .skills-grid, .exp-list { padding: 24px 20px 40px; }
      .bio-content p { font-size: 17px; }
      .skills-grid { grid-template-columns: 1fr 1fr; }
      .about-cta { padding: 32px 20px; }
    }
    .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; }
    /* ── READING PROGRESS ── */
    #reading-progress {
      position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
      background: var(--fg); pointer-events: none;
      transform: scaleX(0); transform-origin: left center;
      will-change: transform;
    }
    /* ── BACK TO TOP ── */


    /* ── PROCESS SECTION ── */
    .process-section {
      display: grid; grid-template-columns: 1fr 2fr;
      border-bottom: 1px solid var(--border);
    }
    .process-label {
      padding: 60px 40px; border-right: 1px solid var(--border);
      font-size: 9px; letter-spacing: 0.16em; color: var(--muted);
      text-transform: uppercase;
    }
    .process-grid {
      padding: 60px 60px; display: grid;
      grid-template-columns: repeat(2, 1fr); gap: 2px;
    }
    .process-item {
      padding: 32px 28px; background: var(--card-bg); transition: background 0.4s;
    }
    .process-num {
      font-size: 9px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 16px;
    }
    .process-title {
      font-size: 16px; font-weight: 400; margin-bottom: 10px;
    }
    .process-desc {
      font-size: 12px; letter-spacing: 0.04em; color: var(--muted); line-height: 1.8;
    }
    @media (max-width: 600px) {
      .process-section { grid-template-columns: 1fr; }
      .process-label { padding: 24px 20px 0; border-right: none; border-bottom: none; }
      .process-grid { padding: 24px 20px 40px; grid-template-columns: 1fr; }
    }
    /* ── SCROLL REVEAL ── */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.in-view { opacity: 1; transform: translateY(0); }
    /* ── TEXT SELECTION ── */
    ::selection { background: #111; color: #f0eeea; }
    [data-theme="dark"] ::selection { background: #e8e6e1; color: #0e0e0e; }