:root{
    --bg: #0a0a09;
    --bg-soft: #111110;
    --fg: #ede9e3;
    --fg-dim: #8c8a84;
    --line: #26251f;
    --accent: #ede9e3;
  }

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

  html{ background:var(--bg); }

  html, body{ width:100%; max-width:100%; }

  body{
    background:var(--bg);
    color:var(--fg);
    font-family:'JetBrains Mono', monospace;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8vh 6vw;
    overflow-x:hidden;
    position:relative;
  }

  /* faint grain texture */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:0.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .frame{
    width:100%;
    max-width:640px;
  }

  .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--fg-dim);
    opacity:0;
    animation:rise 0.7s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:0.05s;
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-optical-sizing:auto;
    font-size:clamp(2.6rem, 8vw, 5rem);
    line-height:0.98;
    letter-spacing:-0.01em;
    margin-top:0.9rem;
    opacity:0;
    animation:rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:0.18s;
  }

  h1 em{
    font-style:italic;
    font-weight:300;
    color:var(--fg-dim);
  }

  .tagline{
    margin-top:1.1rem;
    font-size:0.92rem;
    line-height:1.6;
    color:var(--fg-dim);
    opacity:0;
    animation:rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:0.3s;
  }

  .links{
    margin-top:3.4rem;
    padding-top:2.2rem;
    border-top:1px solid var(--line);
    opacity:0;
    animation:rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:0.42s;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:clamp(1.4rem, 6vw, 2.8rem);
    flex-wrap:wrap;
  }

  .link-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.85rem;
    text-decoration:none;
    color:var(--fg);
  }

  .icon-ring{
    width:clamp(52px, 12vw, 64px);
    height:clamp(52px, 12vw, 64px);
    border-radius:50%;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 0.45s cubic-bezier(.16,1,.3,1), border-color 0.4s ease, background 0.4s ease;
  }

  .icon-ring svg{
    width:44%;
    height:44%;
    fill:var(--fg);
    transition:fill 0.4s ease;
  }

  .link-item .label{
    font-size:0.68rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--fg-dim);
    transition:color 0.4s ease, opacity 0.4s ease;
  }

  .label_bottom{
    font-size:0.55rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--fg-dim);
    transition:color 0.4s ease, opacity 0.4s ease;
  }

  .link-item:hover .icon-ring,
  .link-item:focus-visible .icon-ring{
    transform:translateY(-6px);
    border-color:var(--fg);
    background:var(--fg);
  }

  .link-item:hover .icon-ring svg,
  .link-item:focus-visible .icon-ring svg{
    fill:var(--bg);
  }

  .link-item:hover .label,
  .link-item:focus-visible .label{
    color:var(--fg);
  }

  .link-item:focus-visible{ outline:none; }
  .link-item:focus-visible .icon-ring{ outline:1px solid var(--fg); outline-offset:4px; }

  footer{
    margin-top:2.4rem;
    font-size:0.68rem;
    color:var(--fg-dim);
    letter-spacing:0.05em;
    opacity:0;
    animation:rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:0.54s;
    display:flex;
    align-items:center;
    gap:0.5rem;
  }

  footer .dot{
    width:5px; height:5px;
    border-radius:50%;
    background:var(--fg-dim);
    display:inline-block;
  }

  @keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-delay:0s !important; transition-duration:0.01ms !important; }
  }

  @media (max-width:480px){
    body{ padding:7vh 7vw; }
    .links{ gap:1.4rem; }
    .link-item .label{ font-size:0.6rem; letter-spacing:0.1em; }
  }

  @media (max-width:340px){
    .links{ gap:1.1rem; }
  }