/* Subpages share the homepage's palette, live Termina type and 60px gutters. */
html.subpage-root { background: var(--paper); }
.subpage { background: var(--paper); color: var(--bg); }
.archive-sidebar h2, .category-filters button, .page-badge, .outbound-label,
.profile-intro h1, .artist-news-heading h2, .related-news > h2, .breadcrumb, .related-artist strong, .profile-kicker {
  font-family: "termina", "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.subpage a { color: inherit; text-decoration: none; }
.subpage .site-footer { color: var(--ink); }
.subpage a:focus-visible, .subpage button:focus-visible { outline-color: currentColor; }
.subpage .site-footer a:focus-visible, .subpage .site-menu a:focus-visible { outline-color: var(--accent); }
.subpage .home-link, .subpage .menu-brand { left: 4.166667vw; top: 45px; width: 141.278px; height: 24px; }
.subpage .home-link img, .subpage .menu-brand img { transform: none; }
.subpage .menu-button, .subpage .menu-close { right: 4.166667vw; top: 40px; transform: none; }
.subpage .site-menu { padding-inline: 4.166667vw; }
.subpage .site-footer { padding-inline: 4.166667vw; }
.skip-link { position: fixed; z-index: 10; left: 20px; top: 12px; padding: 12px 20px; background: var(--accent); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.page-main:focus { outline: none; }
.page-wrap { padding: 136px 4.166667vw 140px; }
.works-result-count { margin-top: 48px; color: #595959; font-size: 12px; }
.works-archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 72px 24px; margin-top: 24px; }
.breadcrumb { display: flex; justify-content: flex-end; margin-bottom: 30px; font-size: 11px; line-height: 1.6; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: '/'; display: inline-block; margin-right: 10px; color: #666; }
.breadcrumb a { color: #595959; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid; padding-bottom: 14px; }
.page-heading .section-title { flex: 1; min-width: 0; }
.page-heading p { padding-bottom: 10px; font-size: 12px; white-space: nowrap; }
.archive-layout { display: grid; grid-template-columns: 335fr 985fr; gap: 0; margin-top: 64px; }
.archive-sidebar h2 { margin: 0; font-size: 18px; line-height: 23px; }
.category-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 32px; }
.category-filters[hidden] { display: none; }
.category-filters button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 96px; padding: 10px 20px; border: 1px solid transparent; border-radius: 999px; background: transparent; }
.category-filters button { font-size: 14px; line-height: 18px; }
.category-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--bg); }
.archive-results { min-width: 0; }
.archive-list { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #8d8d8d; }
.archive-item { border-top: 1px solid #8d8d8d; }
.archive-results .archive-item:nth-child(1 of :not([hidden])) { border-top: 0; }
.archive-item[hidden] { display: none; }
.archive-link { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 24px; align-items: start; padding: 36px 0 40px; transition: background-color .3s cubic-bezier(.2,.7,.3,1); }
.page-badge { display: inline-flex; justify-content: center; align-items: center; width: fit-content; height: 28px; padding: 4px 15px; border: 1px solid; border-radius: 999px; font-size: 14px; line-height: 18px; }
.archive-copy { min-width: 0; }
.archive-copy time, .article-meta time { display: block; padding-top: 4px; font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.archive-copy h3 { margin: 20px 0 0; font-size: 16px; font-weight: 500; line-height: 1.9; overflow-wrap: anywhere; }
.archive-copy h3, .article-heading h1 { font-family: "Noto Sans JP", sans-serif; }

.archive-link:focus-visible { outline-offset: -2px; }

.article-layout { display: grid; grid-template-columns: 335fr 985fr; margin-top: 64px; align-items: start; }
.article-content { grid-column: 2; min-width: 0; }
.article-meta { display: flex; align-items: center; gap: 32px; }
.article-meta time { padding: 0; }
.article-heading h1 { margin: 32px 0 0; font-size: clamp(24px,2.5vw,38px); font-weight: 500; line-height: 1.7; letter-spacing: .01em; text-wrap: pretty; }
.article-heading { padding-bottom: 36px; border-bottom: 1px solid #8d8d8d; }
.article-body { margin: 40px 0 56px; font-size: 15px; line-height: 2.2; }
.article-body p + p { margin-top: 24px; }
.outbound-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 320px); min-height: 64px; border-bottom: 1px solid; line-height: 1; }
.outbound-text { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.article-body .outbound-link { margin-top: 36px; }
.related-artist { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 28px; padding: 28px; background: #d6d6d6; transition: background-color .3s cubic-bezier(.2,.7,.3,1); }
.related-artist:focus-visible { background-color: var(--accent); }
.related-artist > img { width: 72px; height: 100px; object-fit: cover; object-position: top; }
.related-caption { display: block; margin-bottom: 8px; font-size: 10px; letter-spacing: .08em; }
.related-artist strong { display: block; font-size: 20px; font-weight: 500; }
.related-description { display: block; margin-top: 8px; font-size: 11px; }
.article-brand { display: grid; place-items: center; padding: 80px 48px; background: var(--bg); }
.article-brand img { width: 100%; height: auto; }
.related-news { display: grid; grid-template-columns: 335fr 985fr; margin-top: 120px; }
.related-news > h2 { margin: 0; font-size: 24px; font-weight: 500; }
.artist-profile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: stretch; gap: 24px; margin-top: 56px; }
.profile-visual { align-self: start; min-width: 0; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #d6d6d6; }
.profile-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-summary { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 2.5vw, 40px); background: var(--bg); color: var(--ink); }
.profile-intro { min-width: 0; container-type: inline-size; }
.profile-kicker { margin: 0 0 24px; color: #aaa; font-size: 11px; line-height: 1.5; letter-spacing: .12em; }
.profile-intro h1 { margin: 0 0 8px; font-size: clamp(20px, 10.6cqw, 51.3px); line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.profile-lead { margin: 0; font-size: 17px; line-height: 1.8; text-wrap: pretty; }
.profile-description { margin: 16px 0 0; color: #b8b8b8; font-size: 14px; line-height: 2; text-wrap: pretty; }
.profile-phrase { display: inline-block; max-width: 100%; }
.profile-links { margin-top: auto; padding-top: 32px; }
.profile-links .outbound-link { width: 100%; min-height: 56px; border-color: #666; color: var(--ink); }
.outbound-label { flex: 1; min-width: 0; font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.profile-links .outbound-link:focus-visible { color: var(--accent); }
.artist-biography { margin-top: 24px; }
.profile-prose { min-width: 0; }
.profile-prose .profile-description:first-child { margin-top: 0; }
.artist-news { display: grid; grid-template-columns: 335fr 985fr; margin-top: 104px; }
.artist-news-heading h2 { margin: 0; font-size: 28px; line-height: 1.3; }
@media (max-width: 1100px) {
  .works-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-layout, .related-news, .artist-news { grid-template-columns: 240px minmax(0,1fr); }
  .archive-link { grid-template-columns: 115px minmax(0,1fr); gap: 20px; }
  .artist-profile { grid-template-columns: minmax(0, 1fr); }
  .profile-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .65fr); align-items: end; gap: 40px; }
  .profile-links { margin: 0; padding: 0; }
}
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .works-result-count { margin-top: 28px; }
  .works-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 36px 12px; margin-top: 20px; }
  .works-archive .work-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .works-archive .work-title { font-size: 14px; line-height: 1.75; }
  .works-archive .work-artist { font-size: 11px; }
  .works-archive .work-tags li { font-size: 9px; padding-inline: 7px; }
  .subpage .home-link, .subpage .menu-brand { left: 20px; top: 16px; width: 132px; height: 44px; }
  .subpage .menu-button, .subpage .menu-close { right: 20px; top: 16px; }
  .subpage .site-menu { padding-inline: 20px; }
  .subpage .site-footer { padding-inline: 20px; }
  .page-wrap { padding: 100px 20px 72px; }
  .breadcrumb { font-size: 11px; margin-bottom: 24px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
  .breadcrumb ol { gap: 7px; }
  .breadcrumb li + li::before { margin-right: 7px; }
  .page-heading { gap: 10px; padding-bottom: 12px; }
  .page-heading > p { display: none; }
  .archive-layout, .article-layout, .related-news, .artist-news { display: block; margin-top: 32px; }
  .archive-sidebar h2 { font-size: 12px; line-height: 1.5; }
  .category-filters { flex-direction: row; flex-wrap: wrap; gap: 8px 4px; margin-top: 16px; }
  .category-filters button { position: relative; min-width: 50px; padding-inline: 10px; border: 0; }
  .category-filters button { font-size: 11px; line-height: 16px; }
  .category-filters button[aria-pressed="true"], .category-filters button:hover { background: transparent; border-color: transparent; }
  .category-filters button::before { content: ''; position: absolute; inset: 7px 0; border: 1px solid transparent; border-radius: 999px; }
  .category-filters button[aria-pressed="true"]::before { background: var(--accent); border-color: var(--bg); }
  .category-filters .type-label { position: relative; }
  .archive-results { margin-top: 24px; }
  .archive-list { border-bottom: 0; }
  .archive-link { grid-template-columns: auto minmax(0,1fr); gap: 16px 20px; padding: 24px 0 28px; }
  .archive-link .page-badge { grid-column: 1; grid-row: 1; align-self: center; }
  .page-badge { height: 25px; padding: 3px 12px; font-size: 11px; line-height: 1.4; }
  .archive-copy { display: contents; }
  .archive-copy time { grid-column: 2; align-self: center; padding: 0; font-size: 12px; line-height: 1.5; }
  .archive-copy h3 { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.85; }
  .article-heading h1 { font-size: clamp(20px, 5.6vw, 24px); margin-top: 24px; line-height: 1.65; }
  .article-heading { padding-bottom: 28px; }
  .article-meta { gap: 24px; }
  .article-meta time { font-size: 12px; }
  .article-body { margin: 28px 0 40px; font-size: 15px; line-height: 2; }
  .outbound-link { width: 100%; min-height: 60px; }
  .outbound-label { font-size: 18px; }
  .related-artist { grid-template-columns: 52px minmax(0,1fr); padding: 20px 16px; gap: 16px; }
  .related-artist > img { width: 52px; height: 80px; }
  .related-artist strong { font-size: 16px; }
  .related-description { font-size: 12px; }
  .article-brand { padding: 48px 24px; }
  .related-news { margin-top: 64px; }
  .related-news > h2 { padding: 0; margin-bottom: 24px; font-size: 22px; }
  .artist-profile { margin-top: 28px; gap: 0; }
  .profile-summary { display: flex; align-items: stretch; gap: 0; padding: 28px 20px; }
  .profile-kicker { margin-bottom: 16px; }
  .profile-lead { font-size: 16px; }
  .profile-description { font-size: 15px; line-height: 1.95; }
  .profile-links { margin-top: 24px; padding: 0; }
  .profile-links .outbound-link { min-height: 60px; }
  .artist-news { margin-top: 64px; }
  .artist-news-heading { margin-bottom: 24px; }
  .artist-news-heading h2 { font-size: 24px; }
  .archive-link:active, .related-artist:active { opacity: .65; }
  .outbound-link:active { color: var(--accent); }
  .breadcrumb a:active { color: var(--bg); }
}
@media (max-width: 359px) {
  .page-heading { display: block; }
  .page-heading p { text-align: right; margin-top: 8px; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .subpage *, .subpage *::before, .subpage *::after { transition: none !important; }
}