/* Record: the shared vocabulary for real work — windows, credits, figures, indexes.
   Brightness order: body text > window > generated background. No cards, no frames. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
:is(.works-page,.company-page,.notfound-page) :is(h1,h2,h3),
:is(.rw-work,.mk-case,.home-works) :is(h2,h3) {
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
:is(.rw-num,.rw-work-year,.rw-index-range,.rw-chapter-range,.rw-mini-year) { font-variant-numeric: tabular-nums lining-nums; }

/* Window: a measured, credited opening. Size class comes from the media measurement. */
.rw-window { width: 100%; margin: 0; }
.rw-window--l { max-width: 700px; }
.rw-window--m { max-width: 420px; }
.rw-window--s { max-width: 280px; }
.rw-media {
  position: relative;
  overflow: hidden;
  background: #0a0d13;
  clip-path: inset(calc((1 - var(--media-progress, 1)) * 6%));
}
.rw-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + (1 - var(--media-progress, 1)) * .03));
  transform-origin: 50% 50%;
}
.rw-caption {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  color: var(--dawn-dim);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .02em;
}
/* Keep short units whole when a line breaks (「第3位」, the scene after 「｜」 in a caption). */
.rw-nw { white-space: nowrap; }
.rw-caption-tail { display: inline-block; }

/* Credits: role on the left, name on the right, as in closing titles. */
.rw-credits { margin: 0; }
.rw-credits > div { display: grid; grid-template-columns: 6.5em minmax(0,1fr); column-gap: 1.2em; align-items: baseline; line-height: 1.9; }
.rw-credits dt { text-align: right; color: var(--dawn-dim); font-size: 11px; }
.rw-credits dd { margin: 0; color: var(--sub); font-size: 13px; }

/* Figures belong to their project only. */
.rw-figures { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.rw-figures > div { display: flex; flex-direction: column-reverse; gap: 10px; }
.rw-figures dt { color: var(--dawn-dim); font-size: 11px; line-height: 1.6; }
.rw-figures dd { display: flex; align-items: baseline; gap: 4px; margin: 0; color: var(--text); }
.rw-num { font-size: clamp(40px,4vw,64px); font-weight: 250; line-height: 1; letter-spacing: -.04em; }
.rw-unit { font-size: 15px; font-weight: 300; letter-spacing: .02em; }
.rw-footnote { margin-top: 12px; color: var(--dawn-dim); font-size: 11px; line-height: 1.7; }
.rw-note, .rw-trademark { color: var(--dawn-dim); font-size: 11px; line-height: 1.8; }
.rw-ongoing { color: var(--dawn-warm); font-size: 11px; letter-spacing: .04em; }

/* Chapter header shares the entry grid so the columns line up. */
.rw-chapter {
  display: grid;
  grid-template-columns: minmax(120px,.24fr) minmax(0,.9fr) minmax(0,1fr);
  column-gap: 40px;
  padding-bottom: 56px;
}
.rw-chapter-label { padding-top: 12px; }
.rw-chapter-copy { grid-column: 2 / -1; }
.rw-chapter-name { color: var(--dawn-warm); font: 10px/1.6 Arial,sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.rw-chapter-range { margin-top: 6px; color: var(--dawn-dim); font: 11px/1.6 Arial,sans-serif; letter-spacing: .04em; }
.site-page .rw-chapter h2 { font-size: clamp(28px,2.6vw,40px); font-weight: 260; line-height: 1.45; letter-spacing: -.03em; }
.rw-chapter-copy > p { max-width: 36em; margin-top: 18px; color: var(--sub); font-size: 14px; line-height: 2.05; }
body.site-page .rw-chapter-copy .text-link { margin-top: 14px; font-size: 12px; gap: 30px; }

/* Entry: meta | heading + text | window. Text-only entries let the text run wider. */
.rw-work {
  display: grid;
  grid-template-columns: minmax(120px,.24fr) minmax(0,.9fr) minmax(0,1fr);
  grid-template-areas: "meta head fig" "meta body fig";
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  padding: 40px 0 72px;
  border-top: 1px solid var(--line);
}
.rw-work[data-media="text"] { grid-template-areas: "meta head head" "meta body body"; }
.rw-work[data-media="text"] :is(.rw-work-head,.rw-work-body) { max-width: 38em; }
.rw-work-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rw-work-head { grid-area: head; }
.rw-work-body { grid-area: body; margin-top: 22px; }
.rw-work > .rw-window { grid-area: fig; justify-self: end; }
.rw-work-no { color: var(--dawn-warm); font: 10px/1.6 Arial,sans-serif; letter-spacing: .08em; }
.rw-work-field { margin-top: 8px; color: var(--sub); font: 10px/1.6 Arial,sans-serif; letter-spacing: .15em; }
.rw-work-genre { color: var(--dawn-dim); font-size: 11px; line-height: 1.7; }
.rw-work-year { color: var(--text); font-size: 12px; line-height: 1.7; letter-spacing: .02em; }
.site-page .rw-work h3 {
  margin: 0;
  font-size: clamp(22px,1.9vw,28px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.rw-work-body > .rw-credits + .rw-work-text { margin-top: 20px; }
.rw-work-text { color: var(--sub); font-size: 14px; line-height: 2.05; }
.rw-work-links { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 16px; }
body.site-page .rw-work-links .text-link { font-size: 12px; gap: 26px; }

/* Index of the three businesses. */
.rw-index ol { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.rw-index li { border-top: 1px solid var(--line); }
.rw-index a { display: grid; grid-template-columns: 8em minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; }
.rw-index-name { color: var(--dawn-dim); font: 10px/1.6 Arial,sans-serif; letter-spacing: .15em; }
.rw-index-text { color: var(--text); font-size: 15px; font-weight: 300; line-height: 1.6; transition: color .25s; }
.rw-index-range { color: var(--dawn-warm); font: 11px/1.6 Arial,sans-serif; letter-spacing: .04em; }
.rw-index a:hover .rw-index-text { color: #ead7bb; }

@media (max-width: 1100px) {
  .rw-chapter { grid-template-columns: 140px minmax(0,1fr); column-gap: 28px; }
  .rw-chapter-copy { grid-column: 2; }
  .rw-work {
    grid-template-columns: 140px minmax(0,1fr);
    grid-template-areas: "meta head" "meta body" "meta fig";
    grid-template-rows: auto auto auto;
    column-gap: 28px;
  }
  .rw-work[data-media="text"] { grid-template-areas: "meta head" "meta body"; }
  .rw-work > .rw-window { justify-self: start; margin-top: 32px; }
  .rw-window--l { max-width: 560px; }
}
@media (max-width: 760px) {
  .rw-chapter { grid-template-columns: 1fr; row-gap: 18px; padding-bottom: 40px; }
  .rw-chapter-label { display: flex; gap: 14px; align-items: baseline; padding-top: 0; }
  .rw-chapter-range { margin-top: 0; }
  .rw-chapter-copy { grid-column: 1; }
  .site-page .rw-chapter h2 { font-size: 26px; }
  .rw-chapter-copy > p { font-size: 13px; line-height: 2; }
  .rw-work { grid-template-columns: minmax(0,1fr); grid-template-areas: "meta" "head" "fig" "body"; padding: 29px 0 40px; }
  .rw-work[data-media="text"] { grid-template-areas: "meta" "head" "body"; }
  .rw-work-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .rw-work-field { margin-top: 0; }
  .site-page .rw-work h3 { margin-top: 14px; font-size: 24px; }
  .rw-work > .rw-window { margin-top: 24px; }
  .rw-work-body { margin-top: 24px; }
  .rw-work-text { font-size: 13px; line-height: 2; }
  .rw-window--l { max-width: none; }
  /* Only the picture narrows; the caption keeps the whole column (no stray 「｜」 or split katakana). */
  .rw-window--m, .rw-window--s { width: 100%; max-width: none; }
  .rw-window--m .rw-media { width: 80%; max-width: 420px; }
  .rw-window--s .rw-media { width: 62%; max-width: 280px; max-height: 62svh; }
  .rw-credits > div { grid-template-columns: minmax(0,1fr); }
  .rw-credits > div + div { margin-top: 6px; }
  .rw-credits dt { text-align: left; line-height: 1.7; }
  .rw-figures { gap: 18px 36px; }
  .rw-num { font-size: 38px; }
  .rw-index a { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name range" "text text"; gap: 4px 12px; padding: 14px 0 16px; }
  .rw-index-name { grid-area: name; }
  .rw-index-range { grid-area: range; }
  .rw-index-text { grid-area: text; }
}
@media (max-width: 360px) {
  .site-page .rw-work h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce), print {
  .rw-media { clip-path: none; }
  .rw-media > img { transform: none; }
}