/* About — 柿色 kaki, persimmon. Too light to read as text on the paper
   (2.5:1), so text uses the deeper --page-ink. */
:root { --page-color: #ff6b4a; --page-ink: #a8432a; }

/* --- Bio: prose on the paper, the portrait set lower, off the grid ------- */
.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 15rem);
  justify-content: start;
  gap: clamp(32px, 7vw, 120px);
  margin-left: clamp(0px, 9vw, 150px);
  align-items: start;
}
.bio-text p { margin-bottom: 1.1em; font-size: 15px; }
.bio-text p:last-child { margin-bottom: 0; }

.bio-portrait { margin: clamp(0px, 10vh, 120px) 0 0; }
.bio-portrait img { width: 100%; height: auto; filter: saturate(0.9); }

/* Subscriber count in Mincho, with a pulsing dot once the live number loads */
.live-count { white-space: nowrap; }
.live-dot {
  display: none;
  width: 7px;
  height: 7px;
  margin: 0 6px 0 2px;
  border-radius: 50%;
  background: var(--page-color);
  vertical-align: 0.12em;
}
.live-count.is-live .live-dot { display: inline-block; animation: live-pulse 2.4s ease-in-out infinite; }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--page-color) 45%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--page-color) 0%, transparent); }
}
.live-count-num { font-family: var(--font-mincho); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- 一 Currently: a ruled list --------------------------------------- */
.now-section { margin-top: clamp(96px, 16vh, 200px); }
.now-list { list-style: none; max-width: 44rem; border-top: 2px solid var(--page-color); }
.now-item {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 8px 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.now-item strong { font-family: var(--font-mincho); font-weight: 600; font-size: 1.02rem; color: var(--ink); line-height: 1.6; }
.now-item > span { font-size: 14px; color: var(--ink-soft); line-height: 1.8; }

/* --- 二 Tools & tech: rows of names, like an index, no logos ----------- */
.skills-grid { max-width: 50rem; border-top: 1px solid var(--ink); }
.skill-row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 8px 32px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.skill-row-title { font-size: 1rem; font-weight: 600; line-height: 1.7; }
.skill-row-items { display: flex; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.skill-pill { display: inline; white-space: nowrap; }
.skill-pill img { display: none; }
.skill-pill:not(:last-child)::after { content: "・"; color: var(--muted); margin: 0 0.3em; }

/* --- Closing ---------------------------------------------------------------- */
.find-me-section { margin-top: clamp(110px, 18vh, 220px); }
.find-me-links { margin-top: 20px; }

.head-portrait { display: none; }

/* Phones: the portrait leads the page, centred between the mark and the
   vertical title; the heading and intro run full width underneath */
@media (max-width: 899px) {
  .page-head { grid-template-areas: "photo v" "copy copy"; row-gap: 40px; }
  .page-head .page-v { grid-area: v; }
  .page-head .page-head-copy { grid-area: copy; padding-left: 0 !important; }
  .head-portrait {
    display: block;
    grid-area: photo;
    justify-self: center;
    width: min(58vw, 240px);
    margin: 0 0 0 40px;
  }
  .head-portrait img { width: 100%; height: auto; filter: saturate(0.9); }
  .bio-grid { grid-template-columns: 1fr; margin-left: 0; gap: 32px; }
  .bio-portrait { display: none; }
  .now-item, .skill-row { grid-template-columns: 1fr; gap: 2px; }
}