:root{
    color-scheme: dark;
    --mist:      #191d23;
    --card:      #20252e;
    --raised:    #262c37;
    --ink:       #dfe3ea;
    --ink-soft:  #949dab;
    --line:      #313846;
    --honey:     #d9a862;
    --honey-pale:#38321f;
    --sage:      #8fae9e;
    --rose:      #c08573;

    --display:"Outfit", system-ui, sans-serif;
    --body:"Figtree", system-ui, sans-serif;

    --r-lg:22px; --r-md:14px;
    --soft: 0 1px 0 rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.32);
    --gut: clamp(20px,5vw,56px);
  }

  *{ box-sizing:border-box; }
  body{
    margin:0;
    background:var(--mist);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px; line-height:1.68;
  }
  .wrap{ max-width:1080px; margin:0 auto; padding-inline:var(--gut); }
  a{ color:inherit; }
  a:focus-visible,button:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:6px; }
  h1,h2,h3{ font-family:var(--display); font-weight:500; letter-spacing:-.015em; }

  /* ---------- header ---------- */
  .top{ padding-block:1.5rem; }
  .top-in{ display:flex; align-items:center; gap:1rem 2rem; flex-wrap:wrap; }
  .wordmark{ font-family:var(--display); font-weight:600; font-size:1.1rem; }
  .top nav{ margin-left:auto; display:flex; gap:1.5rem; font-size:.93rem; }
  .top nav a{ text-decoration:none; color:var(--ink-soft); }
  .top nav a:hover{ color:var(--ink); }
  .status{
    display:inline-flex; align-items:center; gap:.5em;
    background:var(--raised); border:1px solid var(--line);
    border-radius:999px; padding:.3em .9em; font-size:.82rem; color:var(--ink-soft);
  }
  .status::before{ content:""; width:.5em; height:.5em; border-radius:50%; background:var(--sage); }

  /* ---------- hero ---------- */
  .hero{ padding-block: clamp(24px,4vw,48px) clamp(36px,5vw,64px); }
  .hero-in{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(26px,5vw,56px); align-items:center; }
  .portrait{
    width:clamp(150px,20vw,210px); aspect-ratio:1;
    border-radius:50%; overflow:hidden; flex:none;
    background:var(--honey-pale);
    box-shadow:0 0 0 10px var(--card), 0 18px 40px rgba(0,0,0,.38);
  }
  .portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero h1{ font-size:clamp(2.5rem,5.6vw,3.8rem); line-height:1.04; margin:0 0 1rem; font-weight:600; }
  .lead{ font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2.3vw,1.5rem); line-height:1.35; max-width:27ch; margin:0 0 1.1rem; }
  .hero p.body{ margin:0 0 .9rem; max-width:58ch; color:#b3bac5; }
  .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
  .chip{ background:var(--raised); border:1px solid var(--line); border-radius:999px; padding:.4em 1em; font-size:.85rem; color:var(--ink-soft); }
  .chip.now{ background:var(--honey-pale); border-color:transparent; color:#e6c48b; }

  /* ---------- sections ---------- */
  .sec{ padding-block: clamp(36px,5.5vw,64px); }
  .sec-label{ font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin:0 0 .5rem; }
  .sec h2{ font-size:clamp(1.75rem,3.4vw,2.4rem); margin:0 0 1.3rem; line-height:1.1; }

  /* ---------- soft panel tiles ---------- */
  .panel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:1.1rem; }
  .legend{ display:flex; gap:1.3rem; flex-wrap:wrap; font-size:.83rem; color:var(--ink-soft); }
  .legend i{ font-style:normal; width:.6em; height:.6em; border-radius:50%; display:inline-block; margin-right:.5em; }
  .legend .on{ background:var(--honey); }
  .legend .off{ background:#49515f; }

  .tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px; }
  .tile{
    min-height:58px; display:flex; align-items:center; justify-content:center; text-align:center;
    padding:.5rem; border-radius:var(--r-md);
    background:var(--raised); border:1px solid var(--line);
    font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--ink-soft);
    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  }
  .tile.lit{
    background:var(--honey-pale); border-color:#4c4430; color:#e8c88a;
  }
  /* ---------- project ---------- */
  .project{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,42px); box-shadow:var(--soft); }
  .project .meta{ font-size:.9rem; color:var(--ink-soft); margin:0 0 1.5rem; }
  .project-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:2rem 3rem; align-items:start; }
  .project p{ margin:0 0 1rem; max-width:58ch; }
  .project p.quiet{ color:var(--ink-soft); font-size:.94rem; }
  .gauge-cap{ font-size:.8rem; color:var(--ink-soft); margin:0 0 .7rem; }
  .gauge-bar{ position:relative; height:10px; border-radius:999px; background:linear-gradient(90deg,#333b47,var(--honey) 62%,var(--rose)); }
  .gauge-bar i{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--mist); opacity:.85; border-radius:2px; }
  .gauge-keys{ position:relative; height:2.6em; margin-top:.5rem; font-size:.76rem; color:var(--ink-soft); }
  .gauge-keys span{ position:absolute; top:0; transform:translateX(-50%); text-align:center; line-height:1.35; }
  .gauge-keys span:first-child{ left:0; transform:none; }
  .gauge-keys span:last-child{ right:0; left:auto; transform:none; }
  .facts{ margin:1.8rem 0 0; }
  .facts div{ display:flex; gap:1rem; align-items:baseline; padding:.6rem 0; border-top:1px solid var(--line); }
  .facts dt{ font-weight:600; font-size:1rem; min-width:4.6em; flex:none; font-variant-numeric:tabular-nums; }
  .facts dd{ margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
  .tech{ margin:1.4rem 0 0; font-size:.84rem; color:var(--ink-soft); line-height:1.8; }

  /* ---------- experience ---------- */
  .role{
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
    padding:clamp(20px,3vw,28px); margin-bottom:.9rem;
    display:grid; grid-template-columns:minmax(190px,250px) 1fr; gap:1rem 2.4rem;
  }
  .role-when{ font-size:.9rem; color:var(--ink-soft); }
  .role-when .co{ display:block; color:var(--ink); font-weight:600; margin-top:.25rem; }
  .badge{ display:inline-block; margin-top:.7rem; background:var(--raised); border:1px solid var(--line); border-radius:999px; padding:.22em .8em; font-size:.78rem; }
  .bar{ height:6px; border-radius:999px; background:#2a3140; margin-top:1rem; position:relative; }
  .bar b{ position:absolute; top:0; bottom:0; background:var(--honey); border-radius:999px; }
  .role h3{ font-size:1.22rem; margin:0 0 .8rem; }
  .role ul{ margin:0; padding:0; list-style:none; }
  .role li{ position:relative; padding-left:1.3rem; margin-bottom:.6rem; max-width:64ch; }
  .role li::before{ content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; border-radius:50%; background:var(--honey); }

  /* ---------- footer ---------- */
  .foot{ background:var(--card); border-top:1px solid var(--line); padding-block:clamp(40px,6vw,66px); margin-top:2rem; }
  .foot h2{ font-size:clamp(1.7rem,3.3vw,2.2rem); margin:0 0 1.5rem; }
  .foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.5rem 2.4rem; }
  .foot dt{ font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4rem; }
  .foot dd{ margin:0; }
  .foot dd a{ text-decoration:none; border-bottom:1px solid var(--line); }
  .foot dd a:hover{ border-bottom-color:var(--honey); }
  .fine{ margin-top:2rem; font-size:.82rem; color:var(--ink-soft); }

  @media (max-width:820px){
    .project-grid{ grid-template-columns:1fr; }
    .role{ grid-template-columns:1fr; gap:.8rem; }
  }
  @media (max-width:620px){ .hero-in{ grid-template-columns:1fr; justify-items:start; } }
  @media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }