/* ===== Design Tokens ===== */
:root {
    --bg: #262522;
    --line: #eaeaea;
    --card: #8db3c2;
    --card-hover: #9bc3d4;
    --text-main: #262522;
    --text-on-bg: #f7f7f7;
    --accent: #00ced1;
  
    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.45);
    --radius-pill: 999px;
  }
  
  /* ===== Reset / Base ===== */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
  }
  
  body {
    min-height: 100vh;
    font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP",
      sans-serif;
    background: var(--bg);
    color: var(--text-on-bg);
  }
  
  /* ===== Background (Vanta) ===== */
  #vanta {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  
  /* ===== Page Wrapper ===== */
  .page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 1.2rem; /* ベースは少しゆとり */
  }
  
  /* ===== Header ===== */
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }
  
  .logo-img {
    width: clamp(5rem, 11vw, 6.5rem);
    height: clamp(5rem, 11vw, 6.5rem);
    border-radius: 50%;
    border: 2px solid var(--line);
  }
  
  .project-title {
    margin: 0.35rem 0 0.5rem;
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    font-weight: 700;
    color: var(--line);
    text-align: center;
    letter-spacing: 0.04em;
  }
  
  /* ===== BIO Block ===== */
  .header-text {
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: clamp(0.70rem, 1.7vw, 0.88rem);
    line-height: 1.5;
    color: var(--line);
    text-align: center;
  }
  
  .header-text p {
    margin: 0;
  }
  
  .header-lead {
    font-weight: 500;
  }
  
  .bio-box {
    background: rgba(0, 0, 0, 0.28);
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    backdrop-filter: blur(3px);
  }
  
  /* ===== Main / Links ===== */
  main {
    margin-top: 0.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .links-section {
    width: 100%;
    max-width: 28rem;
  }
  
  .section-heading {
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 0.35rem;
  }
  
  /* Links list */
  ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
  }
  
  ul > li {
    margin: 0.85rem 0;
    background: var(--card);
    border-radius: var(--radius-pill);
    border: 2px solid var(--line);
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, background 0.18s ease;
  }
  
  ul > li:hover {
    background: var(--card-hover);
    transform: translateY(-1px);
  }
  
  ul > li > a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.3rem;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
  }
  
  ul > li > a img {
    width: 1.2rem;
    height: 1.2rem;
  }
  
  /* Focus */
  a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-pill);
  }
  
  /* ===== Smartphone / Narrow width ===== */
  @media (max-width: 600px) {
    .page {
      padding: 1rem 0.8rem;
    }
  
    .links-section {
      max-width: 24rem;
    }
  
    ul > li {
      margin: 0.45rem 0;
    }
  
    ul > li > a {
      padding: 0.65rem 1.1rem;
      font-size: 0.85rem;
    }
  }
  
  /* ===== 高さが本当に低い画面だけ圧縮（〜720px） ===== */
  @media (max-height: 720px) {
    .page {
      padding: 0.9rem 0.8rem;
    }
  
    header {
      gap: 0.6rem;
    }
  
    .logo-img {
      width: clamp(4.4rem, 8vh, 5.8rem);
      height: clamp(4.4rem, 8vh, 5.8rem);
    }
  
    .project-title {
      margin: 0.25rem 0 0.35rem;
      font-size: clamp(0.95rem, 2.2vw, 1.3rem);
    }
  
    .header-text {
      max-width: 25rem;
      font-size: clamp(0.72rem, 1.7vw, 0.9rem);
      gap: 0.45rem;
      line-height: 1.55;
    }
  
    .bio-box {
      padding: 0.7rem 1.05rem;
    }
  
    main {
      margin-top: 1.1rem;
    }
  
    ul > li {
      margin: 0.48rem 0;
    }
  
    ul > li > a {
      padding: 0.62rem 1.15rem;
      font-size: 0.86rem;
    }
  }