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

    :root {
      --ink: #0e0e0e;
      --paper: #f7f4ef;
      --accent: #c8522a;
      --muted: #7a7060;
      --card: #ffffff;
      --border: rgba(14,14,14,0.08);
      --serif: 'Playfair Display', Georgia, serif;
      --sans: 'DM Sans', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-weight: 400;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Layout ── */
    .wrapper {
      max-width: 480px;
      margin: 0 auto;
      padding: 0 20px 60px;
    }

    /* ── Hero ── */
    .hero {
      padding: 56px 0 44px;
      text-align: center;
      position: relative;
    }

    @keyframes heroGradient {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0; left: -20px; right: -20px; bottom: 0;
      background: linear-gradient(
        135deg,
        #1a1714 0%,
        #2c1f0e 20%,
        #3a2a1a 40%,
        #1e1a28 60%,
        #2c1810 80%,
        #1a1714 100%
      );
      background-size: 300% 300%;
      animation: heroGradient 10s ease infinite;
      z-index: 0;
      border-radius: 0 0 36px 36px;
    }

    .avatar-ring {
      position: relative;
      z-index: 1;
      display: inline-block;
      margin-bottom: 20px;
    }

    .avatar-ring::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      opacity: 0.8;
    }

    .avatar-ring img {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      filter: grayscale(20%);
      background: #555;
    }

    .avatar-placeholder {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: linear-gradient(135deg, #555 0%, #333 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 36px;
      color: #f7f4ef;
      font-weight: 700;
      letter-spacing: -1px;
    }

    .hero-name {
      position: relative;
      z-index: 1;
      font-family: var(--serif);
      font-size: clamp(28px, 7vw, 36px);
      font-weight: 900;
      color: #f7f4ef;
      letter-spacing: -0.5px;
      line-height: 1.1;
      margin-bottom: 10px;
    }

    .hero-bio {
      position: relative;
      z-index: 1;
      font-size: 14px;
      color: rgba(247,244,239,0.72);
      line-height: 1.65;
      max-width: 300px;
      margin: 0 auto 20px;
      font-weight: 300;
    }

    .hero-bio strong {
      color: rgba(247,244,239,0.95);
      font-weight: 500;
    }

    /* Social icons */
    .socials {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
    }

    .socials a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(247,244,239,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      background: rgba(255,255,255,0.06);
      transition: border-color 0.2s, transform 0.15s, background 0.2s;
      flex-shrink: 0;
    }

    .socials a:hover {
      border-color: var(--accent);
      background: rgba(200,82,42,0.15);
      transform: translateY(-2px);
    }

    .socials svg { width: 17px; height: 17px; display: block; }

    /* ── Work badge ── */
    .work-badge {
      margin-top: 14px;
    }

    .work-badge-inner {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--card);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 12px;
      padding: 12px 16px;
    }

    .work-badge-icon {
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 1px;
    }

    .work-badge-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .work-badge-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .work-badge-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.3;
    }

    .work-badge-meta {
      font-size: 12px;
      color: var(--muted);
      font-weight: 400;
    }

    .work-badge-meta a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
    }

    .work-badge-meta a:hover { text-decoration: underline; }

    /* ── Tags ── */
    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin: 28px 0 0;
    }

    .tag {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
      color: var(--muted);
      background: var(--card);
    }

    /* ── Section heading ── */
    .section-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 36px 0 14px;
    }

    /* ── Link buttons ── */
    .links {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .link-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      text-decoration: none;
      color: var(--ink);
      font-size: 15px;
      font-weight: 500;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      position: relative;
      overflow: hidden;
    }

    .link-btn::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--accent);
      transform: scaleY(0);
      transition: transform 0.2s;
      transform-origin: bottom;
    }

    .link-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(14,14,14,0.08);
      border-color: rgba(14,14,14,0.14);
    }

    .link-btn:hover::before {
      transform: scaleY(1);
    }

    .link-btn-inner {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .link-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--paper);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .link-icon svg { width: 16px; height: 16px; }

    .link-arrow {
      color: var(--muted);
      opacity: 0.5;
      transition: opacity 0.2s, transform 0.2s;
    }

    .link-btn:hover .link-arrow {
      opacity: 1;
      transform: translateX(2px);
    }

    /* ── About ── */
    .about-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      margin-top: 10px;
    }

    .about-card p {
      font-size: 14.5px;
      line-height: 1.75;
      color: #3a3530;
      font-weight: 300;
    }

    .about-card a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
    }

    /* ── Divider ── */
    .divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 36px 0;
    }

    /* ── Footer ── */
    footer {
      text-align: center;
      font-size: 12px;
      color: var(--muted);
      padding-top: 8px;
    }

    /* ── Entry animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .hero        { animation: fadeUp 0.5s ease both; }
    .tags        { animation: fadeUp 0.5s 0.1s ease both; }
    .links       { animation: fadeUp 0.5s 0.18s ease both; }
    .about-card  { animation: fadeUp 0.5s 0.24s ease both; }

    footer { text-align: center; font-size: 12px; color: var(--muted); padding-top: 8px; }
    .footer-address { font-style: normal; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
    .footer-copy { font-size: 12px; color: var(--muted); }

    /* ── Mobile refinements ── */
    @media (max-width: 400px) {
      .hero-name { font-size: 26px; }
    }