/* ---- Base (mobile-first) ---- */
:root{
  --space: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(2rem, 4vw, 4rem);
  --maxw: 70rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Arial, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --link: #000;
  --link-hover:#FF8000;
}

html{ font-size: 16px; }
body{
  margin:0;
  color:#111;
  background:#fff;
  font-family: var(--font);
  line-height:1.7;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.125rem);
}

a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); font-weight:600; }

/* ---- Layout ---- */
#welcome{
  margin-top: 7.5vh;
  display: grid;
  gap: calc(var(--space-lg) * 0.49);
  justify-content: center;
  align-items: start;
  padding-inline: var(--space);
}

/* ---- Lead Section ---- */
#lead{
  text-align: center;
  font-family: var(--font-serif);
  margin-bottom: 0;
}

img.logo{
  max-width: min(100%, 360px);
  height: auto;
}

.name-ja{ font-family: var(--font); font-weight:600; }
.name-en{ font-family: var(--font); font-size: .95em; opacity:.9; }

#lead p,
#lead ul li{
  font-family: var(--font-serif);
}

/* ---- Works Section ---- */
#works{
  margin: calc(var(--space-lg) / 2) var(--space); /* トップマージン半分 */
}

#works h2,
#works h3{
  text-align:center;
  margin-bottom: 1em;
  font-weight:700;
  font-family: var(--font-serif);
  line-height: 1.4;
}

#works h2{ font-size: 1.25rem; }
#works h3{ font-size: 1.1rem; }

@media (min-width: 48rem){
  #works h2{ font-size: 1.3rem; line-height: 1.3; }
  #works h3{ font-size: 1.1rem; line-height: 1.3; }
}

ul.works{
  list-style:none;
  padding:0;
  margin:0;
}

ul.works li{
  margin: 0.8em 0;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font-serif);
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.6em;
}

ul.works li:last-child{
  border-bottom: none;
}

/* ---- Twitter Section ---- */
#twitter{
  text-align: center;
  margin: calc(var(--space-lg) / 2) var(--space) calc(var(--space-lg) * 2.25); /* トップ半分、ボトムは1.5倍 */
  font-family: var(--font);
  font-size: 0.9rem;
  line-height: 1.5;
}

#twitter p{ margin-bottom: 1em; }
#twitter img{
  width:50px;
  height:auto;
  vertical-align:middle;
}

/* ---- Tablet (768px?) ---- */
@media (min-width: 48rem){
  body{ font-size: clamp(1.025rem, 0.8rem + 0.5vw, 1.15rem); }
  /* PCでもトップマージン半分を維持 */
  #works, #twitter{ margin-top: calc(var(--space-lg) / 2); }
  #works{ text-align: center; }

  ul.works{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0.5em;
  }
  ul.works li{
    display: block;
    max-width: 102ch;
    text-align: left;
    overflow-wrap: anywhere;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0.6em 0;
  }
}

/* ---- Desktop (1024px?) ---- */
@media (min-width: 64rem){
  :root{ --maxw: 78rem; }
  #welcome{ gap: calc(var(--space-lg) * 0.49); }
  img.logo{ max-width: 420px; }

  #works ul.works li{
    font-size: 0.95rem;
    line-height: 1.8;
  }

  #lead p,
  #lead ul li{
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}