:root {
  /* 黒地に白。縦書きの名前を左に残し、作品は一列に一作、画像を大きく、文字は小さく余白を広く */
  --paper: #0b0c0d;
  --ink: #f1f1ef;
  --sub: #969ba0;
  --hair: #24272a;
  --mark: #b9cfe2;
  color-scheme: dark;
  --f-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --f-num: "IBM Plex Mono", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --t-label: 0.6875rem;
  --t-small: 0.78125rem;
  --t-text: 0.84375rem;
  --t-base: 0.9375rem;
  --t-title: clamp(1.5rem, 1.15rem + 0.9vw, 2.125rem);
  --t-name: clamp(2.125rem, 1.4rem + 2.4vw, 3.75rem);
  --pad: clamp(16px, 4vw, 80px);
  --gap: clamp(1.5rem, 3vw, 3.5rem);
  --spine-w: calc(var(--t-name) * 1.15);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
  padding-block: clamp(2.5rem, 6vw, 5rem) 2.5rem;
}

.frame {
  max-width: 112rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--spine-w) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 4vw, 4.5rem);
}

/* 名前（縦書き） */
.spine { grid-row: 1 / span 2; grid-column: 1; }
.hero, main { grid-column: 2; min-width: 0; }
.spine-inner {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 2.5rem);
}
.name {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-name);
  line-height: 1;
  letter-spacing: 0.22em;
}

/* リンク：下線なし。カーソルを当てると色が変わる */
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--mark); }
a:focus-visible { color: var(--mark); outline: 1px solid var(--mark); outline-offset: 4px; border-radius: 2px; }
.ext::after {
  content: "\2197";
  margin-left: 0.35em;
  font-size: 0.85em;
  color: var(--sub);
  transition: color .2s ease;
}
.ext:hover::after, .ext:focus-visible::after { color: var(--mark); }

img { display: block; width: 100%; max-width: 100%; height: auto; background: var(--hair); }
figure { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

/* 写真と肩書き */
.hero { display: grid; gap: 1.75rem; }
.ident { display: grid; gap: 0.2rem; align-content: end; }
.roman { font-size: var(--t-small); letter-spacing: 0.18em; color: var(--sub); }
.role {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
}
.affil { margin-top: 1rem; font-size: var(--t-small); line-height: 1.9; }
.statement { margin-top: 1.25rem; font-size: var(--t-text); line-height: 2.05; max-width: 30em; }
.links {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
}

/* 各欄 */
.block { margin-top: clamp(4.5rem, 10vw, 9rem); min-width: 0; }
.block > h2 {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hair);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--sub);
}

/* 現在進行中 */
.news { display: grid; gap: 1.1rem; }
.news li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: 1.5rem;
  font-size: var(--t-text);
  line-height: 2;
}
.news p { max-width: 36em; }
.when {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  color: var(--sub);
  padding-top: 0.25em;
}

/* 作品：一列に一作 */
.works { display: grid; gap: clamp(4rem, 9vw, 8rem); }
.work { display: grid; gap: 1.5rem; }
.info { display: grid; align-content: start; min-width: 0; }
.work h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.3;
  letter-spacing: 0.06em;
}
.spec {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  font-family: var(--f-num);
  font-size: var(--t-small);
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.roles { margin-top: 0.25rem; font-size: var(--t-small); color: var(--sub); letter-spacing: 0.04em; }
.synopsis { margin-top: 1.5rem; font-size: var(--t-text); line-height: 2.05; max-width: 32em; }
.record { margin: 1.75rem 0 0; display: grid; gap: 1.25rem; }
.record dt {
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  color: var(--sub);
  margin-bottom: 0.35rem;
}
.record dd { margin: 0; }
.record li { font-size: var(--t-small); line-height: 1.85; }
.record .at { color: var(--sub); }
.more { margin-top: 1.1rem; }
.more a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--sub);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  transition: color .2s ease, border-color .2s ease;
}
.more a:hover, .more a:focus-visible { border-color: var(--mark); }
.note { margin-top: 1.5rem; font-size: var(--t-small); line-height: 1.85; color: var(--sub); max-width: 34em; }

/* 文章 */
.texts { display: grid; gap: 0.9rem; }
.texts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.25rem; }
.texts .t { font-family: var(--f-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.06em; }
.texts .spec { margin-top: 0; }

/* 遊びの帯：同じ写真を色違いで並べ、ドラッグやスワイプで送る */
.loop {
  margin-top: clamp(4.5rem, 10vw, 9rem);
  margin-left: calc(-1 * max(var(--pad), env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(var(--pad), env(safe-area-inset-right, 0px)));
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.loop.is-dragging { cursor: grabbing; }
.loop-track { display: flex; width: max-content; will-change: transform; }
.loop-set { display: flex; }
.tile {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: clamp(110px, 14vw, 240px);
  aspect-ratio: 1;
}
.tile img {
  height: 100%;
  object-fit: cover;
  background: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(var(--h) 90% 60%);
  mix-blend-mode: multiply;
}

.foot {
  max-width: 112rem;
  margin: 2.25rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  font-size: 0.75rem;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}

/* タブレット：画像の下に、題と紹介／記録を二列で */
@media (min-width: 40rem) {
  .info {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap);
  }
  .info > .lead { grid-column: 1; }
  .info > .facts { grid-column: 2; }
  .facts > .record:first-child { margin-top: 0; }
}

/* パソコン：画像を大きく左に、文字を右に */
@media (min-width: 64rem) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .portrait { grid-column: 1 / span 7; }
  .ident { grid-column: 8 / span 5; }

  .news li { grid-template-columns: 8rem minmax(0, 1fr); }

  .work {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .work .still { grid-column: 1 / span 8; }
  .work .info { grid-column: 9 / span 4; display: grid; grid-template-columns: minmax(0, 1fr); }
  .info > .lead, .info > .facts { grid-column: 1; }
  .facts > .record:first-child { margin-top: 1.75rem; }
}

@media (max-width: 30rem) {
  .news li { grid-template-columns: minmax(0, 1fr); row-gap: 0.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  a, .ext::after { transition: none; }
}

/* トップの作品一覧：画像と題名だけ。押すと作品ページへ */
.card { color: inherit; display: grid; gap: 1.25rem; }
.card .still { overflow: hidden; }
.card .still img { transition: transform .6s ease, opacity .3s ease; }
.card:hover .still img { transform: scale(1.015); opacity: 0.92; }
.card:hover h3 { color: var(--mark); }
.card h3 { transition: color .2s ease; }
.card .award { margin-top: 1rem; font-size: var(--t-small); line-height: 1.85; }
.card .go { margin-top: 1.25rem; font-size: var(--t-small); color: var(--sub); letter-spacing: 0.06em; }
.card:hover .go { color: var(--mark); }
@media (min-width: 64rem) {
  .card {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .card .still { grid-column: 1 / span 8; }
  .card .meta { grid-column: 9 / span 4; padding-bottom: 0.25rem; }
}

/* 作品ページ */
.name a { color: inherit; }
.backlink { font-size: var(--t-small); color: var(--sub); letter-spacing: 0.06em; }
.detail-head { display: grid; gap: 1.75rem; }
.detail-head h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  line-height: 1.25;
  letter-spacing: 0.06em;
}
.detail-body { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 2.5rem; }
.detail-body .synopsis { margin-top: 0; font-size: var(--t-base); }
.credits { margin: 1.75rem 0 0; display: grid; gap: 0.35rem; font-size: var(--t-small); }
.credits div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1rem; }
.credits dt { color: var(--sub); }
.credits dd { margin: 0; }
.detail-body .record:first-child { margin-top: 0; }
.buttons { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.buttons .more { margin-top: 0; }
.detail-foot { margin-top: clamp(4rem, 9vw, 7rem); padding-top: 1.25rem; border-top: 1px solid var(--hair); }
@media (min-width: 64rem) {
  .detail-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .detail-body .lead { grid-column: 1 / span 7; }
  .detail-body .facts { grid-column: 9 / span 4; }
}
.card h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.3;
  letter-spacing: 0.06em;
}
.work .still a.to { display: block; overflow: hidden; }
.work .still a.to img { transition: transform .6s ease, opacity .3s ease; }
.work .still a.to:hover img { transform: scale(1.015); opacity: 0.92; }
.work .go { margin-top: 1.4rem; font-size: var(--t-small); letter-spacing: 0.06em; }
.work .go a { color: var(--sub); }
.work .go a:hover { color: var(--mark); }