:root{
    --bg:#0a0b1a;
    --bg-alt:#0d0f22;
    --surface:#141534;
    --surface-2:#191b40;
    --line:#2b2b5c;
    --copper:#9b6bff;
    --copper-soft:#c6aeff;
    --teal:#5b7fff;
    --text:#e9ebf7;
    --text-dim:#9ba0c8;
    --text-faint:#5c6191;
  }

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

  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(circle at 10% 8%, rgba(91,127,255,0.07), transparent 40%),
      radial-gradient(circle at 90% 85%, rgba(155,107,255,0.08), transparent 45%);
  }

  a{ color:inherit; text-decoration:none; }

  ::selection{ background:var(--copper); color:#0a0e14; }

  .mono{ font-family:'IBM Plex Mono', monospace; }

  /* ---------- layout shell ---------- */
  .sheet{
    max-width:920px;
    margin:0 auto;
    padding: 0 32px;
  }

  header.hero{
    padding: 96px 32px 88px;
    max-width:920px;
    margin:0 auto;
    position:relative;
    display:grid;
    grid-template-columns: 1fr auto;
    gap:56px;
    align-items:center;
  }

  .hero-text{ min-width:0; }

  .photo-unit{
    justify-self:end;
    opacity:0;
    transform:translateY(24px) scale(.94);
    animation:heroPhotoIn .9s cubic-bezier(.2,.7,.2,1) .35s forwards;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .photo-frame{
    position:relative;
    width:200px;
    height:200px;
    border-radius:50%;
    padding:5px;
    background:conic-gradient(from 220deg, var(--copper), var(--teal), var(--copper));
  }
  .photo-frame::after{
    content:'';
    position:absolute;
    inset:-9px;
    border-radius:50%;
    border:1px dashed var(--line);
  }
  .photo-frame img{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--bg);
    background:var(--bg);
  }

  .photo-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:.12em;
    color:var(--text-faint);
  }

  @media (max-width:700px){
    header.hero{
      grid-template-columns: 1fr;
      justify-items:center;
      text-align:center;
      gap:32px;
    }
    .photo-unit{ justify-self:center; order:-1; }
    .hero-sub{ margin-left:auto; margin-right:auto; }
    .hero-links{ justify-content:center; }
    h1.headline{ max-width:none; }
  }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    color:var(--teal);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:28px;
  }
  .eyebrow::before{
    content:'';
    width:7px; height:7px; border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 10px var(--teal);
    animation:pulse 2.2s ease-in-out infinite;
  }
  @keyframes heroPhotoIn{
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  .hero-text > *{
    opacity:0;
    transform:translateY(18px);
    animation:heroTextIn .7s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .hero-text .eyebrow{ animation-delay:.05s; }
  .hero-text .headline{ animation-delay:.16s; }
  .hero-text .hero-sub{ animation-delay:.28s; }
  .hero-text .hero-links{ animation-delay:.40s; }
  @keyframes heroTextIn{
    to{ opacity:1; transform:translateY(0); }
  }

  @keyframes pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.45; transform:scale(.72); }
  }

  h1.headline{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:clamp(38px, 6.4vw, 64px);
    line-height:1.05;
    letter-spacing:-0.01em;
    max-width:11ch;
  }
  h1.headline .accent{ color:var(--copper-soft); }

  .hero-sub{
    margin-top:26px;
    max-width:52ch;
    font-size:17px;
    color:var(--text-dim);
  }

  .hero-links{
    margin-top:40px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }
  .pin{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--text);
    border:1px solid var(--line);
    background:var(--surface);
    padding:10px 16px;
    border-radius:3px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .pin::before{ content:'●'; color:var(--copper); font-size:8px; }
  .pin:hover{ border-color:var(--copper); background:var(--surface-2); transform:translateY(-1px); }

  /* ---------- trace rail + sections ---------- */
  .board{
    max-width:920px;
    margin:0 auto;
    padding: 0 32px 40px;
    position:relative;
  }

  .board::before{
    content:'';
    position:absolute;
    left:32px;
    top:10px;
    bottom:10px;
    width:2px;
    background:linear-gradient(to bottom, transparent, var(--line) 4%, var(--line) 96%, transparent);
  }

  section.module{
    position:relative;
    padding: 56px 0 56px 46px;
    border-bottom:1px solid var(--line);
  }
  section.module:last-of-type{ border-bottom:none; }

  .node{
    position:absolute;
    left:-6px;
    top:60px;
    width:13px; height:13px;
    border-radius:50%;
    background:var(--bg);
    border:2px solid var(--copper);
    box-shadow:0 0 0 4px var(--bg), 0 0 14px rgba(201,129,77,0.35);
  }

  .designator{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:.1em;
    color:var(--copper-soft);
    margin-bottom:10px;
    display:block;
  }

  h2.module-title{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:27px;
    margin-bottom:22px;
    letter-spacing:-0.01em;
  }

  /* about */
  .about-text{ color:var(--text-dim); max-width:60ch; font-size:16px; }

  /* education */
  .edu-item{
    display:grid;
    grid-template-columns: 1fr;
    gap:4px;
    padding: 18px 0;
    border-top:1px solid var(--line);
  }
  .edu-item:first-of-type{ border-top:none; padding-top:0; }
  .edu-degree{ font-weight:600; font-size:16.5px; }
  .edu-school{ color:var(--text-dim); font-size:14.5px; }
  .edu-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    color:var(--teal);
    letter-spacing:.06em;
    margin-top:2px;
  }

  /* projects */
  .project-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    padding:26px 26px 24px;
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
  }
  .project-card::before{
    content:'';
    position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--copper);
  }
  .project-card:last-child{ margin-bottom:0; }

  .project-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:12px;
  }
  .project-name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:19px; }
  .project-ref{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--text-faint); }

  .project-card ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
  .project-card li{
    color:var(--text-dim);
    font-size:14.5px;
    padding-left:16px;
    position:relative;
  }
  .project-card li::before{
    content:'→';
    position:absolute; left:0; top:0;
    color:var(--teal);
    font-size:13px;
  }

  .stack-row{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .chip{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.03em;
    color:var(--copper-soft);
    border:1px solid var(--line);
    padding:4px 9px;
    border-radius:3px;
    background:var(--bg-alt);
  }

  /* skills - BOM table */
  .bom-note{ color:var(--text-dim); font-size:14px; margin-bottom:18px; }

  table.bom{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
  }
  table.bom th{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.08em;
    color:var(--text-faint);
    text-align:left;
    padding:0 12px 10px 0;
    border-bottom:1px solid var(--line);
    font-weight:500;
  }
  table.bom td{
    padding:13px 12px 13px 0;
    border-bottom:1px solid var(--line);
    vertical-align:top;
    color:var(--text-dim);
  }
  table.bom tr:last-child td{ border-bottom:none; }
  table.bom td.ref{
    font-family:'IBM Plex Mono', monospace;
    color:var(--teal);
    font-size:13px;
    white-space:nowrap;
  }
  table.bom td.item{ color:var(--text); font-weight:500; }

  /* contact */
  .contact-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
    margin-top:6px;
  }
  .contact-card{
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:6px;
    padding:18px 18px;
    transition:border-color .15s ease, background .15s ease;
  }
  .contact-card:hover{ border-color:var(--teal); background:var(--surface-2); }
  .contact-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:.1em;
    color:var(--text-faint);
    margin-bottom:6px;
  }
  .contact-value{ font-size:14.5px; font-weight:500; word-break:break-word; }

  footer{
    text-align:center;
    padding:44px 32px 56px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    color:var(--text-faint);
    letter-spacing:.05em;
  }

  /* reveal on scroll */
  .module{ opacity:0; transform:translateY(28px); animation:reveal .75s cubic-bezier(.2,.7,.2,1) forwards; animation-play-state:paused; }
  .module.in-view .project-card,
  .module.in-view .contact-card,
  .module.in-view .bom tr,
  .module.in-view .edu-item{
    animation:contentRise .6s cubic-bezier(.2,.7,.2,1) both;
  }
  .module.in-view .project-card:nth-child(2), .module.in-view .contact-card:nth-child(2){animation-delay:.08s}
  .module.in-view .project-card:nth-child(3), .module.in-view .contact-card:nth-child(3){animation-delay:.16s}
  .module.in-view .project-card:nth-child(4), .module.in-view .contact-card:nth-child(4){animation-delay:.24s}
  .module.in-view .bom tr:nth-child(2){animation-delay:.05s}
  .module.in-view .bom tr:nth-child(3){animation-delay:.10s}
  .module.in-view .bom tr:nth-child(4){animation-delay:.15s}
  .module.in-view .bom tr:nth-child(5){animation-delay:.20s}
  .module.in-view .bom tr:nth-child(6){animation-delay:.25s}
  @keyframes contentRise{
    from{opacity:0; transform:translateY(12px)}
    to{opacity:1; transform:translateY(0)}
  }
  .module.in-view{ animation-play-state:running; }
  @keyframes reveal{ to{ opacity:1; transform:translateY(0); } }

  @media (prefers-reduced-motion: reduce){
    .photo-unit, .hero-text > *, .module, .module.in-view .project-card, .module.in-view .contact-card, .module.in-view .bom tr, .module.in-view .edu-item{
      animation:none !important; opacity:1 !important; transform:none !important;
    }
    html{ scroll-behavior:auto; }
    .eyebrow::before{ animation:none; }
    .module{ opacity:1; transform:none; animation:none; }
  }

  @media (max-width:600px){
    header.hero{ padding:64px 20px 56px; }
    .board{ padding:0 20px 20px; }
    .board::before{ left:20px; }
    section.module{ padding-left:34px; }
    .node{ left:-6px; top:52px; }
    h1.headline{ max-width:none; }
  }

  a:focus-visible, .pin:focus-visible, .contact-card:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
  }

  .section-note{ color:var(--text-dim); max-width:68ch; font-size:14px; margin:-10px 0 22px; }
  .pin.primary{ border-color:var(--teal); background:rgba(91,127,255,.10); }
  .pin.primary:hover{ background:var(--surface-2); border-color:var(--teal); }
  .hero-links .pin::before{ content:'↗'; color:var(--teal); font-size:11px; }
  .hero-links .pin[href="#projects"]::before{ content:'↓'; }
  @media (max-width:600px){
    .hero-links{ gap:10px; }
    .hero-links .pin{ padding:9px 12px; font-size:12px; }
  }