/* ===== index-v3 トップページ ===== */
.index-wrap{--section-heading:#5F5F5C;line-height:1.7}
.intro{
  margin:96px 0 48px;
  max-width:100%;
  font-size:.9rem;color:var(--ink);
  line-height:1.7;
}

/* ---- toolbar ---- */
.toolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;
}
.toolbar button{
  appearance:none;border:none;background:none;cursor:pointer;
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.8rem;
  letter-spacing:.08em;color:var(--sub);padding:2px 0;
}
.toolbar button[aria-pressed="true"]{color:var(--ink);border-bottom:1px solid var(--ink)}
.filters{display:flex;gap:20px}
.views{display:flex;gap:16px}
.views button{display:inline-flex;align-items:center;gap:6px}
.views svg{display:block;width:11px;height:11px}

/* ---- list view ---- */
.view-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:4.5em 1fr 5em;align-items:baseline;
  padding:18px 8px;border-bottom:1px solid var(--line)
}
.row:hover{background:var(--hover)}
.row .year{font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.8rem;color:var(--sub);font-feature-settings:'tnum'}
.row .title{font-size:1.15rem;font-weight:400}
.row .label{font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.74rem;color:var(--sub);text-align:right;letter-spacing:.06em}

.preview{position:sticky;top:48px}
.preview .list-preview{display:none}
.preview .list-preview.show{display:block}
.preview .thumb{aspect-ratio:16/9}
.preview .thumb img{width:100%;height:100%;object-fit:cover}
.list-preview-summary{
  margin-top:24px;
  font-size:.9rem;line-height:1.8;color:var(--ink)
}
.list-preview-summary p + p{margin-top:1em}

/* ---- grid view ---- */
.view-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 40px}
.card .thumb{aspect-ratio:16/9}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb{background:var(--thumb);overflow:hidden}
.caption{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.caption .title{font-size:1rem;font-weight:400}
.caption .meta{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.72rem;color:var(--sub);
  letter-spacing:.06em;white-space:nowrap;margin-left:16px;
  font-feature-settings:'tnum'
}

/* ---- secondary sections ---- */
.index-wrap .secondary h2{color:var(--section-heading)}
.index-wrap .secondary li{color:var(--ink)}
.index-wrap .secondary li .works-links a{color:var(--ink)}

/* ---- profile / contact ---- */
.profile-content,.contact-content,.top-contact-links{border-top:1px solid var(--line)}
.profile-group,.contact-group{padding:16px 8px;border-bottom:1px solid var(--line)}
.profile-group h3,.contact-group h3{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.75rem;font-weight:500;
  color:var(--sub);letter-spacing:.08em;margin-bottom:10px
}
.profile-group-body--with-image{display:grid;gap:24px;grid-template-columns:fit-content(28%) minmax(0,1fr);align-items:start}
.profile-image img{display:block;height:auto;max-width:100%;width:auto}
.profile-prose,.contact-prose{max-width:100%;font-size:.9rem;color:var(--ink)}
.profile-prose p + p,.contact-prose p + p{margin-top:1.2em}
.top-contact-links{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:16px 8px
}
.top-contact-links a{font-size:.82rem;color:var(--sub)}
.top-contact-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.top-contact-links .x-profile-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:#0f1419;border:1px solid #0f1419;border-radius:999px;
  color:#fff;font-weight:500;line-height:1.2
}
.top-contact-links .x-profile-logo{display:block;width:12px;height:auto;flex:none}
.top-contact-links .x-profile-link:hover{
  background:#272c30;border-color:#272c30;color:#fff;text-decoration:none
}

@media (max-width:720px){
  .view-list{grid-template-columns:1fr}
  .preview{display:none}
  .row{grid-template-columns:4em 1fr;grid-template-rows:auto auto}
  .row .label{grid-column:2;text-align:left;margin-top:2px}
  .intro{margin:64px 0 40px}
  .toolbar{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:640px){
  .view-grid{grid-template-columns:1fr;gap:48px}
  .profile-group-body--with-image{grid-template-columns:1fr}
}