@import url('https://cdnjs.cloudflare.com/ajax/libs/ibm-plex-mono/1.0.0/css/ibm-plex-mono.min.css') layer(fonts);

  :root{
    --bg:        #0a0a09;
    --bg-raise:  #101010;
    --line:      #232320;
    --line-dim:  #1a1a17;
    --ink:       #e9e6dc;
    --ink-dim:   #8a8778;
    --ink-faint: #52514a;
    --amber:     #f5ecc2;
    --amber-dim: #8a8262;
    --gap: clamp(20px, 4vw, 40px);
  }

  *{ box-sizing:border-box; }
  html{ background:var(--bg); }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size:14px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }

  /* faint scanline texture, static, not animated */
  body::before{
    content:'';
    position:fixed; inset:0;
    background-image:repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
    pointer-events:none;
    z-index:0;
  }

  .page{
    position:relative; z-index:1;
    max-width:680px;
    margin:0 auto;
    padding: clamp(48px,8vh,88px) var(--gap) 60px;
  }

  a{ color:var(--ink); text-decoration:none; }

  ::selection{ background:var(--amber-dim); color:#0a0a09; }

  /* ---------- hero ---------- */
  .hero{ margin-bottom:76px; }

  .greeting{
    color:var(--ink-faint);
    margin:0 0 22px;
  }
  .greeting .caret{
    display:inline-block;
    width:7px; height:1em;
    background:var(--amber);
    margin-left:2px;
    vertical-align:-2px;
    animation:blink 1.1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .name{
    font-size:clamp(30px, 5vw, 38px);
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0 0 28px;
    color:var(--ink);
  }
  .name .dim{ color:var(--ink-faint); font-weight:400; }

  .lede{
    max-width:52ch;
    color:var(--ink-dim);
    margin:0 0 16px;
  }
  .lede + .lede{ margin-bottom:0; }

  .hero-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:30px;
    color:var(--amber);
    border-bottom:1px solid var(--amber-dim);
    padding-bottom:2px;
  }
  .hero-link:hover{ border-color:var(--amber); }
  .hero-link::after{ content:'→'; transition:transform .15s ease; }
  .hero-link:hover::after{ transform:translateX(3px); }

  /* ---------- sections ---------- */
  section{ margin-bottom:64px; }

  .section-head{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:22px;
  }
  .section-head h2{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.14em;
    color:var(--ink-dim);
    margin:0;
    white-space:nowrap;
  }
  .section-head .rule{
    flex:1;
    height:1px;
    background:var(--line);
  }

  /* ---------- list rows (projects / writing) ---------- */
  .row-list{ display:flex; flex-direction:column; }

  .row{
    display:grid;
    grid-template-columns: minmax(120px,180px) 1fr auto;
    gap:18px;
    align-items:baseline;
    padding:13px 0;
    border-bottom:1px solid var(--line-dim);
    transition:border-color .15s ease;
  }
  .row:first-child{ padding-top:0; }
  .row:last-child{ border-bottom:none; }
  .row:hover{ border-bottom-color:var(--amber-dim); }
  .row:hover .row-title{ color:var(--amber); }

  .row-title{
    color:var(--ink);
    font-weight:600;
    transition:color .15s ease;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .row-desc{
    color:var(--ink-faint);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .row-meta{
    color:var(--ink-faint);
    font-size:12.5px;
    text-align:right;
    white-space:nowrap;
  }

  .view-all{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:20px;
    color:var(--ink-dim);
    font-size:13px;
  }
  .view-all::after{ content:'→'; transition:transform .15s ease; }
  .view-all:hover{ color:var(--amber); }
  .view-all:hover::after{ transform:translateX(3px); }

  @media (max-width:520px){
    .row{ grid-template-columns:1fr; gap:3px; padding:16px 0; }
    .row-meta{ text-align:left; }
  }

  /* ---------- experiment / game ---------- */
  .game-head{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:6px; flex-wrap:wrap; gap:8px;
  }
  .game-prompt{ color:var(--ink); }
  .game-prompt .sym{ color:var(--amber); }
  .game-hint{ color:var(--ink-faint); font-size:12.5px; margin:0 0 18px; }
  .game-hint kbd{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:20px;
    padding:0 7px;
    margin:0 2px;
    border:1px solid var(--line);
    border-bottom-color:var(--amber-dim);
    border-radius:4px;
    background:#0d0d0c;
    color:var(--amber);
    font:inherit;
    font-size:11.5px;
    line-height:1;
    box-shadow:inset 0 -1px 0 rgba(245,236,194,0.08);
  }
  .stars-count{ color:var(--ink-dim); font-size:12.5px; }
  .stars-count b{ color:var(--amber); font-weight:600; }

  .game-frame{
    position:relative;
    border:1px solid var(--line);
    background:var(--bg-raise);
    aspect-ratio: 21/9;
    overflow:hidden;
    outline:none;
  }
  .game-frame:focus{
    border-color:var(--amber-dim);
    box-shadow:0 0 0 1px rgba(245,236,194,0.08), 0 0 28px rgba(245,236,194,0.035);
  }
  .game-frame svg{ width:100%; height:100%; display:block; }
  .star{ transition:opacity .18s ease, transform .18s ease; }
  .star.collected{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; }
  .game-complete .game-frame{ border-color:var(--amber-dim); }
  .game-complete #moonglow stop:first-child{ stop-opacity:.62; }

  .game-caption{
    margin-top:14px;
    color:var(--ink-faint);
    font-size:12.5px;
  }

  @media (max-width:900px), (pointer:coarse){
    #experiment{ display:none; }
  }

  /* ---------- connect ---------- */
  .connect-text{ color:var(--ink-dim); max-width:50ch; margin:0 0 24px; }

  .contact-list{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; }
  .contact-row{
    display:flex; align-items:center; gap:10px;
    padding:10px 18px;
    color:var(--ink);
    border-right:1px solid var(--line);
    transition:color .15s ease;
  }
  .contact-list a:first-child{ padding-left:0; }
  .contact-list a:last-child{ border-right:none; padding-right:0; }
  .contact-row:hover{ color:var(--amber); }
  .contact-row svg{ flex:none; opacity:.75; transition:opacity .15s ease; }
  .contact-row:hover svg{ opacity:1; }

  @media (max-width:420px){
    .contact-row{ border-right:none; padding:8px 0; width:100%; }
  }

  /* ---------- footer ---------- */
  footer{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:80px;
    padding-top:20px;
    border-top:1px solid var(--line-dim);
    color:var(--ink-faint);
    font-size:12px;
  }
  footer .spark{ color:var(--ink-faint); }

  @media (max-width:480px){
    footer{ flex-direction:column; gap:8px; text-align:center; }
  }