/* ============================================================
   Asa Aida Website — shared styles (v12)
   ============================================================ */
:root { color-scheme: light only; }
html {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

:root {
  --bg: #ffffff;
  --ink: #1a1a1a;
  --ink-mid: #3a3a3a;
  --ink-soft: #6a6a6a;
  --ink-faint: #a8a8a8;
  --line: rgba(0,0,0,0.10);
  --line-soft: rgba(0,0,0,0.06);
  --accent: #5CB2BF;  /* ice blue — used for hover and current/selected */
  /* Defaults: Manrope (Latin) + Noto Sans JP (JP body) + Spectral italic
     + Noto Sans JP for the brand. Body weight default 370. */
  --font-latin: 'Manrope', 'Helvetica Neue', Helvetica, Arial;
  --font-jp-body: 'Noto Sans JP', sans-serif;
  --font: var(--font-latin), var(--font-jp-body);
  --font-italic: 'Spectral', 'Noto Serif JP', Georgia, "Times New Roman", serif;
  --font-jp-header: 'Noto Sans JP', sans-serif;
}

body {
  position: relative;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.6;
  font-weight: var(--body-weight, 370);
  font-variation-settings: "wght" var(--body-weight, 370);
  letter-spacing: 0;
  margin: 0 auto;
  padding: 135px 32px 60px;
  /* Balance Latin vs JP x-height so JP characters don't look larger.
     Latin fonts (Inter/SF) have x-height ~0.51; JP fonts are taller. */
  font-size-adjust: 0.52;
}

/* JP-language spans (visible only in JA mode) get their own weight so the
   Latin (Manrope) and JP (Noto Sans JP) can be tuned independently. */
.i18n[data-lang="ja"],
.i18n-block[data-lang="ja"] {
  font-weight: var(--jp-body-weight, 340);
  font-variation-settings: "wght" var(--jp-body-weight, 340);
}

/* Display titles use Newsreader italic (lower x-height); opt them out of
   font-size-adjust so the carefully tuned px sizing isn't distorted. */
.page-title,
.entry-cap .title em,
.works-item-title,
.work-detail-info .wd-title,
.exh-info .exh-title,
.rc-news .title em,
.prose em,
em, i, .italic {
  font-size-adjust: none;
}

/* ============================================================
   PAGE LAYOUT: main + right news column
   ============================================================ */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 150px;
  align-items: start;
}
.page-layout > main { min-width: 0; }

.right-col {
  position: sticky;
  top: 135px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink);
  max-height: calc(100vh - 155px);
  overflow-y: auto;
  scrollbar-width: none;
  padding-right: 4px;
  /* compensate for the line-height leading above the first text glyph,
     so the first label aligns visually with the image top */
  transform: translateY(-6px);
}
.right-col::-webkit-scrollbar { display: none; }

.rc-stage {
  margin-bottom: 28px;
}
.rc-stage-label {
  font-size: 10px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  font-weight: 400;
  padding-bottom: 3px;
  border-bottom: 0.75px solid var(--ink);
}
.rc-news {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  a.rc-news:hover { opacity: 0.6; }
}
.rc-news .date {
  color: var(--ink-soft);
  font-size: 10px;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.rc-news .title {
  color: var(--ink);
}
.rc-news .title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.rc-news .venue {
  color: var(--ink-mid);
  font-size: 10px;
  line-height: 1.5;
  margin-top: 1px;
}

.rc-bottom {
  padding-top: 14px;
  border-top: 0.75px solid var(--ink);
  font-size: 10px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 8px;
}
.rc-bottom a {
  display: block;
  color: var(--ink);
  padding: 2px 0;
}

a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
/* Only apply hover effects on devices that actually hover (mouse).
   Touch devices keep links at full opacity — no sticky "stuck hover". */
@media (hover: hover) {
  a:hover { opacity: 0.55; }
}

/* Card-style links (entry on index, works-item on works.html)
   override the global a:hover opacity and instead fade text color.
   .entry-link is constrained to the content width so the right-side
   empty space doesn't trigger hover. */
.entry-link, .works-item { color: inherit; display: block; }
.entry-link {
  width: 100%;
  /* Cap at the image size that viewport ~1600px would produce
     (1600 − 32 − 32 − 150 gap − 260 right col = 1126). Beyond 1600px
     the image stops growing and the gap to the right column widens. */
  max-width: 1126px;
}
.entry-link .entry-image {
  width: 100%;
  max-width: none;
}
.entry-link .entry-cap {
  width: 100%;
  /* keep max-width: 720px from .entry-cap for caption readability */
}
.entry-link:hover, .works-item:hover { opacity: 1; }

.entry-cap .title,
.entry-cap .meta,
.entry-cap .context,
.works-item-title,
.works-item-meta { transition: color 0.3s ease; }
.entry-link:hover .entry-cap .title,
.entry-link:hover .entry-cap .meta,
.entry-link:hover .entry-cap .context,
.works-item:hover .works-item-title,
.works-item:hover .works-item-meta { color: var(--ink-soft); }
img { display: block; max-width: 100%; height: auto; }

em, i, .italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 28px 32px 0;
  background: transparent;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #ffffff;
}
.top * { color: #ffffff !important; }
.top a { pointer-events: auto; }

/* Header top row — just the name. */
.top-row {
  margin-bottom: 25px;
}

.top .name { font-size: 12px; font-weight: 400; }
.top .name .jp {
  margin-left: 10px;
  font-family: var(--font-jp-header);
  font-weight: 400;
  letter-spacing: 0.03em;
}
.top .name a { color: inherit; }

/* Lang switch lives at the top-right of the page (body), absolutely
   positioned so it stays anchored to the page (NOT scroll-following).
   Top is nudged so the visual center aligns with the header name. */
.page-lang {
  position: absolute;
  top: 30px;
  right: 32px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.page-lang button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--font);
  color: var(--ink-faint);
  transition: color 0.2s ease;
}
.page-lang button:hover { color: var(--ink); }
.page-lang button.active { color: var(--ink); }

/* Inline nav — items spaced apart by gap, no separator glyph. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 28px;
  row-gap: 4px;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 400;
}
/* PC (>720px): current item gets an underline. No ghost / bold needed. */
.nav a {
  white-space: nowrap;
  will-change: opacity;
  transition: opacity 0.12s ease;
}
.nav-ghost { display: none; }
.nav-label { font-weight: inherit; }
.nav a.current {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
/* JP spans inherit weight inside nav so SP bold also works on JP. */
.nav a .i18n[data-lang="ja"] {
  font-weight: inherit;
  font-variation-settings: inherit;
}
/* Hover: gray-out via global a:hover { opacity: 0.55 } */

/* ============================================================
   COMMON CONTENT BLOCKS
   ============================================================ */
.page-title {
  font-family: var(--font);
  font-style: normal;
  font-size: 27px;
  font-weight: 400;
  color: var(--ink);
  margin-top: -6px;
  margin-bottom: 42px;
  letter-spacing: 0;
  line-height: 1;
  width: 80%;
  max-width: 720px;
}

.section {
  margin-bottom: 64px;
}

.section-label {
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.prose {
  width: 80%;
  max-width: 640px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink);
}
.prose p { margin-bottom: 18px; }
.prose em { font-family: var(--font-italic); font-style: italic; }

/* ============================================================
   FEED (used on index)
   ============================================================ */
.feed {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.entry { width: 100%; }
.entry-image {
  width: 100%;
  max-width: 1126px;
  margin-bottom: 14px;
}
.entry-image img { width: 100%; height: auto; display: block; }
.entry-cap {
  width: 100%;
  max-width: 720px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink);
}
.entry-cap .title {
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
  font-size: 13px;
}
.entry-cap .title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.entry-cap .meta { color: var(--ink-mid); font-size: 11px; margin-top: 1px; }
.entry-cap .context { color: var(--ink-soft); font-size: 10px; margin-top: 4px; }

.section-head {
  width: 80%;
  max-width: 720px;
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: -36px;
  margin-bottom: -36px;
  padding: 0;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   WORKS LIST (works.html)
   ============================================================ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.works-grid.is-filtering {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .works-grid,
  .works-grid.is-filtering { transition: none; opacity: 1; transform: none; }
}
.works-item {
  display: block;
  width: 100%;
}
.works-item-image {
  width: 100%;
  margin-bottom: 12px;
  overflow: hidden;
}
.works-item-image img {
  width: 100%;
  height: auto;
  display: block;
}
.works-item-title {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  font-weight: 400;
}
.works-item-meta {
  font-size: 10px;
  color: var(--ink-mid);
  margin-top: 2px;
}

.year-filter {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
  font-size: 12px;
  color: var(--ink-soft);
}
.year-filter button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.year-filter button.active { color: var(--ink); font-weight: 500; }
.year-filter button:hover { color: var(--ink); }
.year-filter .sep { color: var(--ink-faint); }

/* ============================================================
   WORK DETAIL (works-*.html)
   ============================================================ */
.work-detail {
  display: grid;
  grid-template-columns: auto 320px;
  justify-content: start;
  gap: 48px;
  align-items: start;
}
.work-detail-image { width: auto; max-width: 100%; min-width: 0; }
.work-detail-image img { width: auto; max-width: 100%; height: auto; }
.work-detail-info {
  position: sticky;
  top: 175px;
  font-size: 12px;
  line-height: 1.7;
}
.work-detail-info .wd-title {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 16px;
  font-weight: 400;
  line-height: 1.3;
}
.work-detail-info .wd-meta {
  color: var(--ink-mid);
  font-size: 12px;
  margin-bottom: 20px;
}
.work-detail-info .wd-meta div { padding: 2px 0; }
.work-detail-info .wd-section {
  margin-top: 24px;
}
.work-detail-info .wd-label {
  font-size: 10px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.work-detail-info .wd-text {
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink);
}
.work-detail-info .wd-text a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
@media (hover: hover) {
  .work-detail-info .wd-text a:hover { opacity: 0.55; }
}
.work-detail-nav {
  margin-top: 64px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-soft);
}
.work-detail-nav a { color: var(--ink); }

/* ============================================================
   CV (cv.html)
   ============================================================ */
.cv-section {
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}
.cv-section .cv-label {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  padding-top: 4px;
}
.cv-section .cv-body { font-size: 12px; line-height: 1.7; }
.cv-section .cv-entry {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.cv-section .cv-year { color: var(--ink-soft); }
.cv-section .cv-value { color: var(--ink); }
.cv-section .cv-value em { font-family: var(--font-italic); font-style: italic; }
.cv-section .cv-value .sub {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
}

/* ============================================================
   EXHIBITIONS (exhibitions.html)
   ============================================================ */
.exh-entry {
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.exh-image {
  display: block;
  width: 100%;
}
.exh-image img { width: 100%; height: auto; display: block; }
.exh-image.placeholder {
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
a.exh-image { color: inherit; }
.exh-info {
  font-size: 12px;
  line-height: 1.7;
}
.exh-info .exh-title {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 8px;
  line-height: 1.3;
}
.exh-info .exh-venue { color: var(--ink-mid); margin-bottom: 4px; }
.exh-info .exh-date { color: var(--ink-soft); font-size: 11px; }
.exh-info .exh-text {
  margin-top: 14px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.65;
}
.exh-info .exh-type {
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* ============================================================
   CONTACT (contact.html)
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
.contact-form {
  max-width: 560px;
}
.contact-form .field {
  margin-bottom: 22px;
}
.contact-form label {
  display: block;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--ink);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form select { cursor: pointer; }
.contact-form .submit-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 32px;
  background: var(--ink);
  color: #ffffff;
  border: none;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}
.contact-form .submit-btn:hover { opacity: 0.7; }

.contact-aside {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
}
.contact-aside .ca-block {
  margin-bottom: 28px;
}
.contact-aside .ca-label {
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.contact-aside em {
  font-family: var(--font-italic);
  font-style: italic;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  margin-top: 96px;
  padding-top: 18px;
  border-top: 0.75px solid var(--line);
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.foot p { margin: 0; }
.foot em {
  font-family: var(--font-jp-header);
  font-style: normal;
  font-weight: var(--jp-body-weight, 340);
  margin: 0 3px;
}
.foot .sep {
  color: var(--ink-faint);
  margin: 0 7px;
}
.foot a {
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .foot a:hover { color: var(--ink); }
}

/* ============================================================
   i18n
   ============================================================ */
.i18n { display: none; }
html[lang="ja"] .i18n[data-lang="ja"],
html[lang="en"] .i18n[data-lang="en"],
html[lang="de"] .i18n[data-lang="de"] { display: inline; }
html[lang="de"] .i18n[data-lang="en"].fallback-de { display: inline; }

.i18n-block { display: none; }
html[lang="ja"] .i18n-block[data-lang="ja"],
html[lang="en"] .i18n-block[data-lang="en"],
html[lang="de"] .i18n-block[data-lang="de"] { display: block; }
html[lang="de"] .i18n-block[data-lang="en"].fallback-de { display: block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .page-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .right-col {
    position: static;
    max-height: none;
    overflow: visible;
    padding-top: 28px;
    border-top: 0.75px solid var(--ink);
  }
  /* All wrappers fill the body content width; text-only containers keep
     their own max-width for readability. */
  .entry-link, .entry-image, .entry-cap, .section-head, .prose, .page-title {
    width: 100%;
  }
  /* Mobile: drop the grid, push lang/IG to the right edge of the row */
  .top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
}

@media (max-width: 720px) {
  body { padding: 140px 16px 40px; font-size: 13px; line-height: 1.65; }
  .entry-link, .entry-image, .entry-cap, .section-head, .prose, .page-title {
    width: 100%;
    max-width: none;
  }
  .top { padding: 18px 16px 0; max-width: 100%; }
  .top-row { margin-bottom: 14px; }
  .top .name { font-size: 14px; }
  .top .name .jp { margin-left: 8px; }
  /* Mobile: still absolute at page top-right, slightly tighter */
  .page-lang {
    top: 18px;
    right: 16px;
    gap: 12px;
    font-size: 11px;
  }

  /* SP nav: 2 rows × 3 columns. HTML order is Works/Exhibitions/Statement/CV/Contact/[instagram];
     swap Exhibitions and [instagram] so Exhibitions lands in the bottom-right cell. */
  .nav {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 6vw;
    row-gap: 2px;
    justify-content: start;
    font-size: 13px;
    line-height: 1.55;
  }
  /* SP: current item is BOLD (no underline). Use inline-grid + invisible
     bold ghost so the cell width is reserved → no layout shift. */
  .nav a {
    display: inline-grid;
    align-items: baseline;
  }
  .nav a > * {
    grid-row: 1;
    grid-column: 1;
  }
  .nav-ghost {
    display: inline-block;
    visibility: hidden;
    font-weight: 600;
    font-variation-settings: "wght" 600;
    pointer-events: none;
  }
  .nav a.current {
    text-decoration: none;
  }
  .nav a.current .nav-label {
    font-weight: 600;
    font-variation-settings: "wght" 600;
  }
  /* SP footer: break after "Asa Aida 間朝", hide the first separator */
  .foot .foot-artist { display: block; }
  .foot .foot-artist + .sep { display: none; }

  .feed { gap: 48px; }
  .entry-cap { font-size: 13px; }
  .entry-cap .title { font-size: 15px; }
  .entry-cap .meta { font-size: 12px; }
  .entry-cap .context { font-size: 11px; }
  .section-head { font-size: 12px; }

  .page-title { font-size: 26px; margin-bottom: 32px; }
  .prose { font-size: 14px; line-height: 1.75; }

  .works-grid { grid-template-columns: 1fr; gap: 36px; }
  .works-item-title { font-size: 15px; }
  .works-item-meta { font-size: 12px; }
  .work-detail { grid-template-columns: 1fr; gap: 24px; }
  .work-detail-info { position: static; }
  .work-detail-info .wd-title { font-size: 21px; }
  .work-detail-info .wd-meta { font-size: 13px; }
  .work-detail-info .wd-text { font-size: 13px; }

  .cv-section { grid-template-columns: 1fr; gap: 8px; }
  .cv-section .cv-entry { grid-template-columns: 50px 1fr; gap: 12px; }
  .cv-section .cv-body { font-size: 13px; }
  .cv-section .cv-label { font-size: 11px; }

  .exh-entry { grid-template-columns: 1fr; gap: 16px; }
  .exh-info { font-size: 13px; }
  .exh-info .exh-title { font-size: 17px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: 14px; }
  .contact-aside { font-size: 13px; }
  .foot { font-size: 12px; }
}

@media (max-width: 380px) {
  .nav { font-size: 12px; column-gap: 4vw; }
}

/* ============================================================
   WORK DETAIL OVERLAY (modal-style fullscreen)
   ============================================================ */
.work-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.work-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.work-overlay-close {
  position: fixed;
  top: 30px;
  right: 32px;
  z-index: 2100;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .work-overlay-close:hover { opacity: 0.55; }
}
.work-overlay-content {
  padding: 135px 32px 60px;
  margin: 0 auto;
  /* 通常ページと同じ画像サイズになるよう上限を揃える
     (画像858 + gap48 + 情報欄320 + 左右padding64 = 1290) */
  max-width: 1290px;
}
.work-overlay-content .work-detail {
  display: grid;
  grid-template-columns: auto 320px;
  justify-content: start;
  gap: 48px;
  align-items: start;
}
body.overlay-open { overflow: hidden; }
body.overlay-open .top,
body.overlay-open .page-lang { visibility: hidden; }
@media (max-width: 720px) {
  .work-overlay-close { top: 20px; right: 16px; font-size: 11px; }
  .work-overlay-content { padding: 90px 16px 40px; }
  .work-overlay-content .work-detail { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   PAGE TRANSITIONS
   Fade + small upward slide. Old content fades while sliding down
   slightly, new content rises from below as it fades in. The
   continuous vertical motion masks the DOM swap moment.
   Header (.top) and page-lang stay anchored.
   ============================================================ */
html.no-vt .page-layout,
html.no-vt .foot {
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.no-vt body.is-leaving .page-layout,
html.no-vt body.is-leaving .foot {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.no-vt .page-layout,
  html.no-vt .foot,
  html.no-vt body.is-leaving .page-layout,
  html.no-vt body.is-leaving .foot {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   FONT DEBUG PANEL (dev only — toggle via × button)
   ============================================================ */
#font-debug {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  background: #fff;
  border: 1px solid #1a1a1a;
  padding: 14px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 10px;
  color: #333;
  width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  /* hard reset against any inherited transforms */
  transform: none;
  opacity: 1;
  visibility: visible;
}
#font-debug .fd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: #666;
}
#font-debug .fd-close {
  background: none;
  border: none;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: #999;
  padding: 0 4px;
  font-family: inherit;
}
#font-debug .fd-close:hover { color: #000; }
#font-debug .fd-row { margin-bottom: 8px; }
#font-debug .fd-row label {
  display: block;
  font-size: 10px;
  color: #888;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#font-debug .fd-row select {
  width: 100%;
  padding: 4px 6px;
  font-size: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  font-family: inherit;
  color: #333;
  cursor: pointer;
}
#font-debug .fd-reset {
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 10px;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  font-family: inherit;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#font-debug .fd-reset:hover { background: #eee; }

#font-debug-show {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  cursor: pointer;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 15px;
  color: #333;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 0;
}
#font-debug-show:hover { background: #fff; color: #000; }

/* ============================================================
   ULTRAWIDE: above 1700px, cap the layout width so side margins
   grow as the viewport widens. The right column stops hugging the
   right edge and joins the centered content block.
   ============================================================ */
@media (min-width: 1700px) {
  body {
    max-width: 1700px;
  }
  /* .top is position:fixed and spans the full viewport by default.
     Re-anchor it to the centered body so the header content stays
     aligned with the column grid below. */
  .top {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1700px;
  }
}

/* ============================================================
   DETAIL IMAGE SLIDER (works / exhibitions, manual)
   ============================================================ */
.wd-slider { width: auto; max-width: 100%; }
.wd-slider-viewport {
  position: relative;
  overflow: hidden;
}
.wd-slider-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.wd-slide { flex: 0 0 100%; width: 100%; }
.wd-slide img { width: auto; max-width: 100%; height: auto; display: block; }

.wd-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.72);
  color: #1a1a1a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.wd-slider-viewport:hover .wd-slider-btn { opacity: 1; }
.wd-slider-btn:hover { background: rgba(255, 255, 255, 0.95); }
.wd-slider-prev { left: 10px; }
.wd-slider-next { right: 10px; }

.wd-slider-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 11px;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.72);
  padding: 2px 8px;
  border-radius: 2px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.wd-slider-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.wd-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.wd-dot:hover { background: var(--ink-soft); }
.wd-dot.is-active { background: var(--ink); transform: scale(1.15); }

/* Touch devices: keep arrows visible since there's no hover */
@media (hover: none) {
  .wd-slider-btn { opacity: 1; background: rgba(255, 255, 255, 0.85); }
}

/* ============================================================
   SLIDER: 複数画像は高さを揃えて中央寄せ(拡大はしない)
   .wd-multi は JS が複数画像スライダーに付与する
   ============================================================ */
.work-detail.wd-multi,
.work-overlay-content .work-detail.wd-multi { grid-template-columns: minmax(0, 1fr) 320px; }
.wd-multi .work-detail-image { width: 100%; }
.wd-multi .wd-slider,
.wd-multi .wd-slider-viewport { width: 100%; }
.wd-multi .wd-slide { display: flex; align-items: center; justify-content: center; }
.wd-multi .wd-slide img { height: var(--wd-slider-h, auto); width: auto; max-width: 100%; }
@media (max-width: 720px) {
  .work-detail.wd-multi,
  .work-overlay-content .work-detail.wd-multi { grid-template-columns: 1fr; }
}