:root{
    /*--bg:        #faf9f7;*/
    --bg:       rgba(255, 255, 255, 0.75);
    --bg-raise:  #ffffff;
    --ink:       #16181a;
    --ink-soft:  #5a6068;
    --line:      #e4e1db;
    /*--accent:    #0f7b6c;       */
    --accent:    #ff0000;
    /*--accent-ink:#0f7b6c;*/
    --accent-ink: #ff0000;
    --shadow:    0 1px 2px rgba(20,22,24,.05), 0 12px 32px -16px rgba(20,22,24,.14);
    --radius:    18px;
    --nav-h:     64px;
  }
  html[data-theme="dark"]{
    --bg:        #101214;
    --bg-raise:  #181b1e;
    --ink:       #ecedee;
    --ink-soft:  #9aa1a8;
    --line:      #272b2f;
    --accent:    #35c4ae;
    --accent-ink:#35c4ae;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.6);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation:none!important; transition:none!important; }
  }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Inter",system-ui,sans-serif;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    transition:background .3s ease, color .3s ease;
  }

  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  ::selection{ background:var(--accent); color:#fff; }

  .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    height:var(--nav-h);
    display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .brand{
    font-family: "IBM Plex Mono",monospace;
    font-weight: 700;
    font-size: 19px;
    text-decoration: none;
    letter-spacing: .02em;
  }
  .brand .tld{ color:var(--accent-ink); }
  nav ul{ display:flex; gap:28px; list-style:none; align-items:center; }
  nav a{
    text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-soft);
    transition:color .2s ease;
  }
  nav a:hover{ color:var(--ink); }
  .theme-btn{
    border:1px solid var(--line); background:var(--bg-raise); color:var(--ink);
    font:500 13px "IBM Plex Mono",monospace;
    padding:7px 14px; border-radius:999px; cursor:pointer;
    transition:border-color .2s ease;
  }
  .theme-btn:hover{ border-color:var(--accent); }
  .menu-btn{ display:none; }

  .active{font-weight: 800; color: #ff0000;}

  /* ---------- Shared section bits ---------- */
  section{ padding:96px 0; }
  .eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent-ink); margin-bottom:18px;
  }
  h2{
    font-family:"Archivo",sans-serif;
    font-variation-settings:"wdth" 110;
    font-weight:650; font-size:clamp(30px,4.5vw,44px);
    line-height:1.1; letter-spacing:-.015em; margin-bottom:20px;
  }
  .lede{ color:var(--ink-soft); max-width:62ch; }

  /* signal divider */
  .signal{ display:block; width:100%; height:28px; color:var(--line); }
  .signal path{ stroke:currentColor; stroke-width:1.5; fill:none; }
  .signal .pulse{ stroke:var(--accent); opacity:.65; }

  /* ---------- Hero ---------- */
  .hero{ padding:110px 0 90px; }
  .hero-grid{
    display:grid; grid-template-columns:1.4fr .9fr; gap:64px; align-items:center;
  }

  .hello{
    font-family:"IBM Plex Mono",monospace;
    font-weight: 700;
    font-size: 26px;
    color:var(--accent-ink);
    margin-bottom: 22px;
    display:inline-block;
  }

  .hello::after{
    content:"▌";
    animation:blink 1.1s steps(1) infinite;
    margin-left:2px;
  }

  @keyframes blink{ 50%{ opacity:0; } }
  h1{
    font-family:"Archivo",sans-serif;
    font-variation-settings:"wdth" 115;
    font-weight:720; font-size:clamp(44px,7.5vw,82px);
    line-height:1.0; letter-spacing:-.025em; margin-bottom:24px;
  }
  .tagline{
    font-size:clamp(19px,2.4vw,23px); font-weight:500; margin-bottom:18px;
  }
  .tagline em{ font-style:normal; color:var(--accent-ink); }
  .hero p.lede{ font-size:20px; margin-bottom: 1.1em;}
  
  /*.portrait{
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid var(--line);
    background:var(--bg-raise);
  }*/

  .portrait{
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:0px solid var(--line);
    background:var(--bg-raise);
  }

  /* ---------- Path cards ---------- */
  .paths{ border-top:1px solid var(--line); }
  .cards{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;
  }
  .card{
    background:var(--bg-raise);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:34px 30px 30px;
    display:flex; flex-direction:column;
    box-shadow:var(--shadow);
    transition:transform .25s ease, border-color .25s ease;
  }
  .card:hover{ transform:translateY(-4px); border-color:var(--accent); }
  .card .tag{
    font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px;
  }
  .card h3{
    font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 110;
    font-weight:650; font-size:25px; line-height:1.2; letter-spacing:-.01em;
    margin-bottom:14px;
  }
  .card p{ color:var(--ink-soft); font-size:15.5px; flex:1; margin-bottom:24px; }
  .card .go{
    text-decoration:none; font-weight:600; font-size:15px; color:var(--ink);
  }
  .card .go::after{ content:" →"; color:var(--accent-ink); transition:margin .2s ease; }
  .card .go:hover::after{ margin-left:4px; }

  /* ---------- About ---------- */
  .about-grid{ display:grid; grid-template-columns:1fr; gap:36px; max-width:760px; }
  .about p + p{ margin-top:16px; }
  .facts{
    display:flex; gap:48px; flex-wrap:wrap; margin-top:42px;
    border-top:1px solid var(--line); padding-top:32px;
  }
  .fact strong{
    display:block; font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 110;
    font-weight:680; font-size:28px; letter-spacing:-.01em;
  }
  .fact span{
    font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-soft);
  }

  /* ---------- Contact ---------- */
  .contact{ border-top:0px solid var(--line); }
  .contact .cards{ margin-top:44px; }
  .card a.mail{
    font-family:"IBM Plex Mono",monospace; font-size:14px; word-break:break-all;
    color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent);
  }
  .socials{ display:flex; gap:22px; flex-wrap:wrap; margin-top:48px; }
  .socials a{
    text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-soft);
  }
  .socials a:hover{ color:var(--accent-ink); }

  /* ---------- Footer ---------- */
  footer {
    border-top:1px solid var(--line);
    padding:0px 0 60px;
    font-size:14px; color:var(--ink-soft);
  }
  .foot-grid{
    display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:40px;
  }
  .foot-grid h4{
    font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink); margin-bottom:14px; font-weight:500;
  }
  .foot-grid ul{ list-style:none; }
  .foot-grid li + li{ margin-top:8px; }
  .foot-grid a{ text-decoration:none; }
  .foot-grid a:hover{ color:var(--accent-ink); }
  .foot-bottom{
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    border-top:1px solid var(--line); padding-top:24px;
  }
  .foot-bottom nav{ display:flex; gap:20px; }

  /* keyboard focus */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns:1fr; gap:40px; }
    .portrait{ max-width:340px; }
    .cards{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 640px){
    nav ul{ gap:18px; }
    nav ul li.hide-sm{ display:none; }
    section{ padding:72px 0; }
    .hero{ padding:72px 0 64px; }
  }