/* Preserve the supplied desktop design; adapt only narrow screens and focus. */
html { scrollbar-gutter: stable; }
/* Keep the inert DC template hidden before deferred JavaScript is ready. */
x-dc { display: none !important; }
a:focus-visible { outline: 2px solid #1f5fd0; outline-offset: -2px; }
.header-actions { display: flex; gap: 20px; align-items: center; justify-self: end; }
.header-toggle { appearance: none; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: 1.4; min-height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #0b0d10; cursor: pointer; white-space: nowrap; }
a.header-toggle { display: inline-flex; align-items: center; }
.header-toggle:hover { color: oklch(0.52 0.13 250); }
.header-toggle:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 3px; }
.group-heading { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 18px 14px 12px; border-bottom: 1px solid #cdd0d4; font: 500 11px/1.5 'Roboto Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.group-count { font-size: 10px; font-weight: 400; color: #71767d; }
.work-group + .work-group { margin-top: 24px; }
.work-group:focus { outline: none; }
.work-group .work-list { padding-bottom: 0 !important; }
.work-list > a > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 14px; border-bottom: 1px solid #e1e3e5; color: #0b0d10; transition: background-color .16s, color .16s; }
.list-row:hover { background: #e4e6e8; color: #0b0d10; }
.list-row[aria-current="true"] { background: #202326; color: #fff; }
.list-year { font: 10px/1.6 'Roboto Mono', monospace; opacity: .6; }
.list-copy { font-size: 12.5px; line-height: 1.6; letter-spacing: -.01em; }
.list-sub { margin-left: 4px; font-size: 10.5px; opacity: .58; }
.detail-pane { min-width: 0; }
.detail-pane:empty { display: none; }
.detail-pane:focus { outline: none; }
.detail-metadata dd { min-width: 0; overflow-wrap: anywhere; }
.detail-metadata-link { display: block; width: fit-content; text-decoration: underline; text-underline-offset: .2em; }
.detail-metadata-link + .detail-metadata-link { margin-top: 6px; }
.detail-product-info { max-width: 900px; margin: 0 14px 32px; padding: 20px 24px; border-top: 1px solid #cdd0d4; }
.detail-product-info h2 { margin: 0 0 16px; font-size: 15px; font-weight: 500; }
.detail-product-info dl { margin: 0; }
.detail-product-info dl > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 3fr); gap: 16px; padding: 8px 0; font-size: 12px; line-height: 1.7; }
.detail-product-info dd { margin: 0; }
.article-credit { font-size: 11px; line-height: 1.7; color: #71767d; margin: 8px 0 0; }
.list-shell { height: 100dvh; min-height: 0 !important; overflow: hidden; }
.list-shell > .site-header { flex-shrink: 0; }
.list-shell > footer { display: none !important; }
.split-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
.split-view > .work-sections { grid-column: 1; grid-row: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; min-height: 0; overscroll-behavior: contain; border-right: 1px solid #0b0d10; scrollbar-gutter: stable; scroll-padding-top: 46px; }
.split-view > .detail-pane { grid-column: 2; grid-row: 1; overflow: auto; min-height: 0; overscroll-behavior: contain; container-type: inline-size; }
.split-view .group-heading { position: sticky; top: 0; z-index: 2; padding: 18px 14px 10px; background: var(--page-background); }
.split-view .work-group + .work-group { margin-top: 0; }
.list-empty { display: grid; place-items: center; min-height: 100%; padding: 32px; color: #71767d; font-size: 13px; }
.external-preview { padding: 36px 28px; }
.external-preview-meta { font: 10.5px/1.6 'Roboto Mono', monospace; color: #71767d; }
.external-preview h1 { margin: 16px 0 28px; font-size: clamp(26px, 4.4cqw, 44px); line-height: 1.4; font-weight: 500; letter-spacing: -.025em; }
.external-preview-image { display: block; width: 100%; max-height: 60vh; object-fit: contain; margin: 28px 0; background: #fff; }
.external-preview-note { font-size: 13px; line-height: 1.8; color: #62666b; }
.external-preview-link { display: inline-block; padding: 12px 0; border-bottom: 1px solid; font-size: 13px; }
@container (max-width: 850px) {
  .detail-pane .editorial-section { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  .detail-pane .detail-page > div:first-child { gap: 20px !important; }
  .detail-pane .detail-page > div:first-child > div { grid-column: 1 / span 8 !important; }
  .detail-pane .detail-page > div:first-child > dl { grid-column: 9 / span 4 !important; }
  .detail-pane .detail-page h1 { font-size: 34px !important; overflow-wrap: anywhere; }
}
@container (max-width: 540px) {
  .detail-pane .detail-page > div:first-child > div, .detail-pane .detail-page > div:first-child > dl,
  .detail-pane .detail-page > div > div, .detail-pane .detail-page > div > dl, .detail-pane .detail-page > div > a,
  .detail-pane .about-page > div > div { grid-column: 1 / -1 !important; min-width: 0; }
  .detail-pane .detail-page h1, .detail-pane .about-page h1 { font-size: 28px !important; }
  .detail-pane .editorial-section { padding: 24px 18px; }
}
@media (max-width: 760px) {
  .split-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 1fr) minmax(0, 2fr); }
  .split-view > .work-sections { grid-column: 1; grid-row: 1; border-right: 0; border-bottom: 1px solid #aeb3b8; }
  .split-view > .detail-pane { grid-column: 1; grid-row: 2; }
}
.work-group:last-child { padding-bottom: 56px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; align-items: start; }
.grid-block { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); aspect-ratio: 1; min-width: 0; min-height: 0; }
.grid-block-small { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; }
.grid-block > a { min-width: 0; min-height: 0; }
.grid-block > a:focus-visible > div:last-child { opacity: 1 !important; }
/* Careers and social accounts fill the two rows beside the profile portrait. */
#category-SELF .work-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
#category-SELF .grid-block-large { grid-column:span 2; grid-row:span 2; }
#category-SELF .grid-block-small { display:contents; }
#category-SELF .grid-block-small > a { aspect-ratio:1; }
.press-card { container-type: inline-size; }
.press-card-body { height: 100%; }
.press-card-content { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 4cqw, 16px); padding: clamp(10px, 8cqw, 32px); background: #fff; color: #0b0d10; transition: background-color .2s ease, color .2s ease; }
.press-card-outlet { font-size: clamp(9px, 4.3cqw, 12px); line-height: 1.4; color: #62666b; overflow-wrap: anywhere; }
.press-card-title { font-size: clamp(11px, 6cqw, 24px); font-weight: 500; line-height: 1.5; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.book-card-cover { display: block; width: 100%; height: 100%; object-fit: contain; }
.press-card-date { font-family: 'Roboto Mono', monospace; font-size: clamp(9px, 3.7cqw, 11px); line-height: 1.3; color: #62666b; }
.press-card-outlet, .press-card-date { transition: color .2s ease; }
.press-card:hover .press-card-content, .press-card:focus-visible .press-card-content { background: #333; color: #f2f2f2; }
.press-card:hover .press-card-outlet, .press-card:hover .press-card-date, .press-card:focus-visible .press-card-outlet, .press-card:focus-visible .press-card-date { color: #d7d7d7; }
.press-card:hover .press-card-title, .press-card:focus-visible .press-card-title { text-decoration: underline; text-underline-offset: 0.2em; }
@container (max-width: 180px) {
  .press-card-content { padding: 10px; gap: 6px; }
  .press-card-title { font-size: 11px; line-height: 1.4; }
}
@container (max-width: 150px) {
  .press-card-content { padding: 8px; gap: 4px; }
  .press-card-title { font-size: 9px; }
  .press-card-outlet, .press-card-date { font-size: 8px; }
}
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto !important; gap: 8px !important; }
  .site-header > a { white-space: normal !important; line-height: 1.6; }
  .header-actions { gap: 10px; }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  #category-SELF .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #category-SELF .grid-block-large { grid-row:auto; }
  #category-SELF .social-card-first { grid-column:1; }
  .detail-page > div, .about-page > div { gap: 20px !important; }
  .detail-page > div > div, .detail-page > div > dl, .detail-page > div > a,
  .about-page > div > h1, .about-page > div > div { grid-column: 1 / -1 !important; min-width: 0; }
  .detail-page h1, .about-page h1 { font-size: 30px !important; overflow-wrap: anywhere; }
  .detail-page figure { grid-column: 1 / -1 !important; }
  .detail-page > div:last-child { gap: 8px !important; font-size: 9px !important; }
  .detail-page > div:last-child > a { text-align: center; }
}
@media (hover: none) {
  .grid-block > a > div:last-child { opacity: 1 !important; }
}

/* Signed articles layer their text over full-card imagery and a uniform 60% black overlay. */
.has-article-image .press-card-body { position: relative; }
.authored-card-image-wrap { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.authored-card-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.press-card.has-article-image .press-card-content { position: absolute; inset: 0; height: 100%; justify-content: center; padding: clamp(16px, 8cqw, 32px); gap: clamp(6px, 4cqw, 16px); background: rgba(0, 0, 0, .6); color: #fff; }
.press-card.has-article-image:hover .press-card-content,
.press-card.has-article-image:focus-visible .press-card-content { background: rgba(0, 0, 0, .7); }
.has-article-image .press-card-title { font-size: clamp(14px, 6cqw, 24px); line-height: 1.5; }
.has-article-image .press-card-content .press-card-outlet { font-size: clamp(9px, 3.5cqw, 12px); color: #f2f2f2; }
.has-article-image .press-card-content .press-card-date { font-size: clamp(9px, 3cqw, 11px); color: #f2f2f2; }

/* Career cards keep company names and tenure readable at the small grid size. */
.career-card .press-card-title { font-size: clamp(13px, 9cqw, 24px); line-height: 1.4; text-wrap: wrap; }
.career-card .press-card-date { white-space: nowrap; }

/* Source-linked Japanese features, with terms explained alongside the text. */
.editorial-section { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(230px, 1fr); gap: clamp(32px, 5vw, 76px); max-width: 1120px; margin: 0 auto; padding: 40px 28px 48px; }
.editorial-copy { min-width: 0; }
.profile-main { min-width: 0; }
.profile-career-lists { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; }
.detail-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 28px; align-self: start; }
.detail-sidebar .editorial-glossary { align-self: stretch; }
.detail-sources { min-width: 0; padding: 20px 22px 0; border-top: 1px solid #cdd0d4; }
.detail-sources h2 { margin: 0 0 14px; font-size: 12px; font-weight: 500; line-height: 1.6; color: #545d65; }
.detail-sources a { display: block; width: fit-content; max-width: 100%; margin: 12px 0; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; text-underline-offset: .2em; text-decoration-color: #9da5aa; }
.detail-sources a:last-child { margin-bottom: 0; }
.detail-sidebar .related-work { padding: 20px 22px 0; }
.detail-sidebar .related-work h2 { margin-bottom: 8px; font-size: 12px; line-height: 1.6; color: #545d65; }
.detail-sidebar .related-work ul { display: block; }
.detail-sidebar .related-work a { font-size: 12px; line-height: 1.8; gap: 10px; }
.editorial-copy p { margin: 0 0 1.15em; font-size: 15px; line-height: 1.95; letter-spacing: .025em; color: #191c20; overflow-wrap: anywhere; }
.editorial-copy p:last-child { margin-bottom: 0; }
.editorial-copy a { color: inherit; text-decoration: underline; text-decoration-color: #9da5aa; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.editorial-copy a:hover { color: #365b77; text-decoration-color: currentColor; }
.editorial-glossary { align-self: start; padding: 20px 22px 22px; background: #fafafa; border-top: 2px solid #20252b; }
.editorial-glossary dl { margin: 0; }
.editorial-term + .editorial-term { margin-top: 20px; padding-top: 18px; border-top: 1px solid #dddfe1; }
.editorial-term dt { margin: 0 0 7px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.editorial-term dd { margin: 0; font-size: 12px; line-height: 1.8; color: #545d65; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .editorial-section { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 18px 36px; }
  .editorial-copy p { font-size: 14px; line-height: 1.95; }
  .editorial-glossary { padding: 18px 20px; }
}

.detail-legacy-intro { max-width:1120px; margin:0 auto; padding:28px 28px 0; }
/* Keep the purchase destination prominent beside the game's official accounts. */
.project-official-links { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:8px; }
.project-shop-link { display:flex; flex-direction:column; gap:5px; padding:14px 20px; min-width:220px; box-sizing:border-box; background:#0b0d10; color:#fff; text-decoration:none; transition:background-color .2s ease; }
.project-shop-link:hover { background:#30343a; }
.project-shop-label { font-size:11px; line-height:1.5; letter-spacing:.025em; }
.project-shop-action { display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:16px; font-weight:500; line-height:1.5; }
.project-social-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.project-social-label { flex-basis:100%; font-size:10px; line-height:1.5; color:#71767d; }
.project-social-links a { display:inline-flex; align-items:center; gap:10px; min-height:32px; color:#0b0d10; font-size:12px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#b8bec4; }
.project-social-links a:hover { text-decoration-color:currentColor; }
@media (max-width:480px) { .project-shop-link { width:100%; } }
@media (max-width:760px) { .detail-legacy-intro { padding:24px 18px 0; } }

/* Records without a verified destination remain readable, without a false link. */
.work-sections a[aria-disabled="true"] { pointer-events: none; cursor: default; }
.related-work { padding: 24px 14px 36px; border-top: 1px solid #d3d8de; }
.related-work h2 { margin: 0 0 16px; font-size: 13px; font-weight: 500; }
.related-work ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.related-work li { min-width: 0; border-bottom: 1px solid #d3d8de; }
.related-work a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 13px; line-height: 1.6; text-decoration: none; overflow-wrap: anywhere; }
.related-work a:hover { color: #4b6f84; }
.related-work a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.related-work a > span:last-child { flex: 0 0 auto; }
.related-work .related-work-label { min-width: 0; flex: 1 1 auto; white-space: normal; overflow-wrap: anywhere; }