:root{
      --bg:#0e0f10;       /* near-black */
      --fg: white;       /* soft gray */
      --muted:#9aa3a9;    /* muted */
      --accent:#70ff70;   /* classic terminal green */
      --accent-2:#a7f3d0; /* softer mint for subtle elements */
      --max:72ch;         /* comfortable line length */
      --radius:10px;
    }
    html,body{height:100%}
    html{color-scheme: dark;}
    body{
      margin:0; background:var(--bg); color:var(--fg);
      font: 18px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, "Lucida Console", "Courier New", monospace;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    .wrap{max-width:var(--max); margin: 3.5rem auto; padding: 0 1rem;}
    .top{display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap}
    h1,h2,h3{font-weight:700; margin:.1rem 0 1rem; color: var(--accent)}
    h1{font-size: clamp(1.6rem, 2.4vw + 1rem, 2.2rem)}
    h2{font-size: 1.15rem; letter-spacing:.02em}
    p{margin:.5rem 0 1rem}
    .muted{color:var(--muted)}

    /* Links */
    a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent);}
    a:hover{filter:brightness(1.08)}
    a:focus-visible{ outline:2px dotted var(--accent); outline-offset:3px; border-bottom-color: transparent;}

    /* Skip link for a11y */
    .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip-link:focus{ left: 1rem; top:1rem; width:auto; height:auto; padding:.4rem .6rem; background:#0b0c0d; border:1px solid var(--accent)}

    /* Hero header */
    header{ margin-bottom:2.25rem; }
    nav{ display:flex; gap:1rem; flex-wrap:wrap; }
    nav a{ border-bottom:none }
    nav a .caret{ opacity:.85 }

    /* Buttons */
    .btns{ display:flex; gap:.75rem; flex-wrap:wrap; margin: 1.25rem 0 0}
    .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border:1px solid var(--accent); border-radius: var(--radius); }
    .btn:hover{ background: rgba(112,255,112,.06)}

    /* Sections */
    section{ padding: 1.25rem 0; border-top:1px solid #222627; }
    ul{ padding-left:1.1rem; margin:.25rem 0 0}
    li{ margin:.2rem 0 }

    /* Project list */
    .grid{ display:grid; grid-template-columns: 1fr; gap: .9rem; }
    @media (min-width: 720px){ .grid{ grid-template-columns: 1fr 1fr; } }
    .card{ padding: .9rem; border:1px solid #222627; border-radius: var(--radius); }
    .card h3{ margin:0 0 .25rem; color:var(--accent)}
    .card p{ margin:0.25rem 0 }

    /* Tiny ornament: terminal prompt + blinking caret */
    .prompt{ color: var(--accent-2); }
    .caret::after{ content:"_"; animation: blink 1.05s steps(2,end) infinite; }
    @keyframes blink{ 50%{opacity:0;} }

    /* Reduce motion for a11y */
    @media (prefers-reduced-motion: reduce){
      *{ animation: none !important; transition: none !important; }
    }

    footer{ padding: 2rem 0 3rem; border-top:1px solid #222627; color:var(--muted) }
    small{ color:var(--muted)}

    /* Hover‑swap photo */
    .hover-photo{ position: relative; display: block; width: 40vmin; height: 40vmin; border-radius: 25px; overflow: hidden; margin: auto;}
    .hover-photo img{  position: absolute;  top: 0;  left: 0; width: 100%; height: 100%;   object-fit: cover; border-radius: 25px;  transition: opacity 0.3s ease-in-out; }
    .hover-photo img.hover{  opacity: 0; }
    .hover-photo:hover img.hover,
    .hover-photo:focus-within img.hover{   opacity: 1;  }
    .hover-photo:hover img.base,
    .hover-photo:focus-within img.base{   opacity: 0; }

    /* Joke of the day */
    .joke-container { 
      max-width: 60ch; 
      margin: 0.5rem 0; 
    }
    .joke-setup { 
      font-style: italic; 
      margin-bottom: 1rem; 
      color: var(--fg);
      font-size: 1.05em;
    }
    .joke-punchline { 
      font-weight: 600; 
      color: var(--accent); 
      margin: 1rem 0; 
      padding: 0.75rem; 
      background: rgba(112,255,112,.08); 
      border-left: 3px solid var(--accent); 
      border-radius: var(--radius);
    }
    .joke-btn { 
      display: inline-block; 
      padding: 0.5rem 0.8rem; 
      background: transparent; 
      border: 1px solid var(--accent); 
      border-radius: var(--radius); 
      color: var(--accent); 
      font-family: inherit; 
      font-size: 0.9rem; 
      cursor: pointer; 
      transition: background 0.2s ease;
      margin-right: 0.5rem;
    }
    .joke-btn:hover { 
      background: rgba(112,255,112,.06); 
    }
    .joke-btn:focus-visible { 
      outline: 2px dotted var(--accent); 
      outline-offset: 2px; 
    }