:root{
    --bg: #1b1f2a;
    --paper: #faf7f0;
    --ink: #232323;
    --ink-soft: #5b5647;
    --accent: #c9a227;
    --card-bg: #232838;
    --card-bg-hover: #2c3247;
    --card-text: #e7e4dc;
    --card-text-soft: #9aa0b4;
    --radius: 3px;
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    background:var(--bg);
    background-image:
      radial-gradient(circle at 15% 10%, rgba(201,162,39,0.05), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(201,162,39,0.04), transparent 40%);
    font-family:'Work Sans', sans-serif;
    color:var(--card-text);
    padding:48px 24px;
  }

  .layout{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
    align-items:start;
  }

  /* ---------- LEFT: A4 "paper" panel ---------- */
  .paper{
    background:var(--paper);
    color:var(--ink);
    padding:44px 36px;
    border-radius:var(--radius);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
    position:relative;
    aspect-ratio: 1 / 1.4142; /* true A4 proportions */
    overflow:hidden;
  }

  .seal{
    position:absolute;
    top:28px;
    right:28px;
    width:52px;
    height:52px;
    border-radius:50%;
    border:1.5px solid var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:0.05em;
    color:var(--accent);
  }

  .photo-slot{
    width:64px;
    height:64px;
    border-radius:50%;
    background:repeating-linear-gradient(45deg, #ece7da, #ece7da 4px, #e2ddce 4px, #e2ddce 8px);
    margin-bottom:18px;
  }

  .paper h1{
    font-family:'Newsreader', serif;
    font-size:26px;
    font-weight:600;
    margin:0 0 4px;
    line-height:1.15;
    padding-right:60px;
  }

  .role{
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.02em;
    color:var(--ink-soft);
    margin:0 0 22px;
  }

  .paper h2{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent);
    margin:26px 0 10px;
    border-bottom:1px solid #e3ddc9;
    padding-bottom:6px;
  }

  .paper ul{
    margin:0;
    padding-left:16px;
    font-size:13px;
    line-height:1.55;
  }
  .paper li{ margin-bottom:6px; }
  .paper li strong{ font-weight:600; }

  .contact{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    line-height:1.8;
    color:var(--ink-soft);
  }
  .contact a{ color:var(--ink-soft); }

  .todo{
    font-size:11px;
    color:#a44;
    font-style:italic;
  }

  /* ---------- RIGHT: floating project cards ---------- */
  .work-intro{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent);
    margin:6px 0 20px;
  }

  .cards{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:18px;
  }

  .card{
    display:block;
    background:var(--card-bg);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--radius);
    padding:22px 20px;
    text-decoration:none;
    color:inherit;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .card:hover{
    transform:translateY(-3px);
    background:var(--card-bg-hover);
    border-color:rgba(201,162,39,0.4);
  }
  .card:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  .card .tag{
    font-family:'JetBrains Mono', monospace;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--accent);
    display:block;
    margin-bottom:10px;
  }

  .card h3{
    font-family:'Newsreader', serif;
    font-size:18px;
    font-weight:600;
    margin:0 0 8px;
    color:#fff;
  }

  .card p{
    font-size:13px;
    line-height:1.5;
    color:var(--card-text-soft);
    margin:0;
  }

  .card .link-out{
    display:inline-block;
    margin-top:14px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--accent);
  }

  .cert-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cert-link:hover,
.cert-link:focus-visible {
  color: var(--accent);
}

  @media (max-width: 820px){
    .layout{ grid-template-columns: 1fr; }
    .paper{ aspect-ratio:auto; }
  }