:root {
  --media-content-max: 1440px;
  --media-detail-max-height: 900px;
  --media-list-ratio: 3 / 4;
  --media-detail-gap-y: clamp(28px, 4vh, 58px);
  --media-detail-gap-y-total: clamp(56px, 8vh, 116px);
  --media-detail-gap-x: clamp(14px, 2vh, 29px);
  /* ここから下は移行用の別名層。--rs-* が正本で、これはその言い換え。
     新しく書くコードは --rs-* を直接参照すること。
     どちらが正本か分からなくなるため、最終的にはこの層ごと消す。
     （2026-09-13 Codex の検品指摘） */
  --font-display-en: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-ja: "a-otf-ryumin-pr6n", "A-OTF Ryumin Pr6N", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body-ja: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --type-display-en-pc: var(--rs-display-en);
  --type-display-en-line: .79;
  --type-display-en-tracking: -.068em;
  --type-section-heading-pc: var(--rs-heading-ja);
  --type-heading-ja-line: var(--rs-heading-line);
  --type-heading-ja-tracking: var(--rs-heading-tracking);
  --type-body-ja-pc: var(--rs-body-ja);
  --type-body-ja-line: var(--rs-body-line);
  --type-body-ja-tracking: var(--rs-body-tracking);
  --about-copy-max: var(--rs-copy-col);
  --about-copy-measure: 21em;
  --about-block-space: var(--rs-space-block);
  /* One photographic column. The three former tablet/compact widths are gone:
     they made the photo shrink as the viewport grew (899->900 was -80px). */
  --about-photo-column: var(--rs-photo-col);
  --about-photo-ratio: 3 / 4;
  --space-label-to-heading: var(--rs-space-label-heading);
  --space-heading-to-body: var(--rs-space-heading-body);
  --layout-gutter-sp: var(--rs-gutter-sp);
  --layout-gutter-tablet: var(--rs-edge-page);
}

/* About editorial alignment and continuity sequence — authoritative overrides. */
@media (min-width: 719px) {
  .about-page .process-head {
    width: min(calc(100% - (2 * var(--rs-edge-editorial))), var(--media-content-max));
  }
}

/* Top editorial authority: preserve the 1440 composition down to 719px. */
body#top .intro > .label {
  /* 紙の上に載る小さな文字なので、明るいアクセントでは 3.14:1 しか出ない（AAは4.5:1）。
     地が紙のページだけ --accent-paper（#b84f3e・4.62:1）を定義してある。 */
  color: var(--accent-paper, var(--accent));
}

/* 試作：PC幅でも原稿の改行位置で折る（現状はスマホだけ） */
@media (min-width: 719px) {
  body#top .intro-bottom .intro-copy-line {
    display: block;
  }
}

@media (max-width: 718px) {
  body#top .intro-bottom .intro-copy-line {
    display: block;
  }

  body#top .hero-stage > .hero-image {
    width: min(calc(100% - 32px), calc((100svh - 176px) * .75));
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 3 / 4;
    justify-self: center;
    align-self: center;
  }
}

body#top .intro-bottom > .text-link {
  position: relative;
  /* 矢印（::after）を文字と同じ行に並べる。inline-block だと矢印が次の行に落ちる */
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 0;
  padding-bottom: 5px;
}
  /* 罫線は背景で描く。::after は header-system.css が矢印（SVGマスク）に使っているため、
     ここで ::after を使うと矢印が潰れ、479px×1px の箱にマスクが掛かって罫線まで消える。
     実際にそうなっていた（2026-09-13 本人指摘）。 */
  body#top .intro-bottom > .text-link {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 18% 1px;
    transition: background-size .7s cubic-bezier(.23,1,.32,1);
  }
  body#top .intro-bottom > .text-link:hover,
  body#top .intro-bottom > .text-link:focus-visible {
    background-size: 100% 1px;
  }

@media (min-width: 719px) {
  body#top .intro h2 .thought-break--medium,
  body#top .intro h2 .thought-break--narrow {
    display: none;
  }

  /* 92px at 1440 — the thought headline is deliberately below the section scale. */
  body#top .intro h2 {
    font-size: var(--rs-thought-ja) !important;
  }

  body#top .intro-bottom > p {
    font-size: var(--rs-body-ja);
  }
}

/* Deleted: the 719-800 padding override (identical to the gutter token in that
   range) and the 719-720 two-pixel-wide bespoke layout that existed only to
   bridge the old 718/720 boundary mismatch. */

@media (max-width: 718px) {
  body#top .hero-title {
    padding-top: 34px;
    padding-bottom: 40px;
  }

  body#top .intro {
    padding: 45px var(--layout-gutter-sp) 70px;
  }

  body#top .intro > .label {
    display: block;
    margin-bottom: 26px;
    font-size: 11px;
    letter-spacing: -.01em;
    text-transform: none;
  }

  body#top .intro h2 {
    margin-top: 0;
  }

  body#top .intro-bottom {
    margin-top: 27px;
    padding-top: 0;
  }

  body#top .intro-bottom > p {
    width: 100%;
    max-width: none;
    text-wrap: pretty;
    line-break: strict;
  }

  body#top .intro-bottom > .text-link {
    margin-top: 28px;
    min-height: 44px;
  }
}


.about-page figure.afterword-photo--sequence {
  position: relative;
  display: block;
  width: var(--about-photo-column);
  height: auto;
  aspect-ratio: var(--about-photo-ratio);
  margin-left: auto;
  overflow: hidden;
}

.about-page figure.afterword-photo--sequence img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: continuity-sequence 16s ease-in-out infinite;
}

.about-page figure.afterword-photo--sequence img:nth-child(1) { animation-delay: 0s; }
.about-page figure.afterword-photo--sequence img:nth-child(2) { animation-delay: -12s; }
.about-page figure.afterword-photo--sequence img:nth-child(3) { animation-delay: -8s; }
.about-page figure.afterword-photo--sequence img:nth-child(4) { animation-delay: -4s; }

@keyframes continuity-sequence {
  0%, 21% { opacity: 1; }
  25%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

/* The 900-1100 / 1101-1279 / 721-899 width bands are gone. They made the photo
   column non-monotonic (420 -> 340 -> 420 -> 500 as the viewport grew).
   --about-photo-column is now one continuous scale of the 1440 master. */

@media (max-width: 718px) {
  .about-page figure.afterword-photo--sequence {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page figure.afterword-photo--sequence img {
    animation: none;
  }

  .about-page figure.afterword-photo--sequence img:first-child {
    opacity: 1;
  }
}

/* About footer / Works reveal: distinct from the contact marquee. */
.about-page .about-entry .works-preview{position:absolute;z-index:1;inset:18% 5vw 12%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;pointer-events:none}
.about-page .about-entry .works-preview span{overflow:hidden;opacity:0;clip-path:inset(0 50%);transform:translateY(18px);transition:clip-path .9s cubic-bezier(.23,1,.32,1),opacity .45s ease,transform .9s cubic-bezier(.23,1,.32,1)}
.about-page .about-entry .works-preview span:nth-child(2){transition-delay:.07s}.about-page .about-entry .works-preview span:nth-child(3){transition-delay:.14s}
.about-page .about-entry .works-preview img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.9) brightness(.56)}
.about-page .about-entry:has(.about-thought:hover) .works-preview span,.about-page .about-entry:has(.about-thought:focus-visible) .works-preview span{opacity:.64;clip-path:inset(0);transform:translateY(0)}
.about-page .about-entry .about-message{z-index:2}.about-page .about-entry .about-thought{z-index:3}
@media(max-width:718px){.about-page .about-entry .works-preview{inset:22% 12px 15%;gap:4px}}
@media(prefers-reduced-motion:reduce){.about-page .about-entry .works-preview{display:none}}

/* About: one stable photographic column, derived from a desktop Works column. */
.about-page .essay-photo,
.about-page .process-anchor,
.about-page .afterword-photo {
  width: var(--about-photo-column);
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: var(--about-photo-ratio);
  flex: none;
  overflow: hidden;
}

.about-page .essay-photo img,
.about-page .process-anchor img,
.about-page .afterword-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* About hero: use the same centered viewport-stage logic as the Home hero.
   The width term is what makes it grade. Height alone kept the photo at its
   1440 size all the way down to 719, so it swallowed the narrow composition.
   675 = the widest this photo can ever be at 1440 (900px height cap x 3/4),
   so the cap is inert at the master and only bites below it. */
@media (min-width: 719px) {
  .about-page .opening-photo {
    width: auto;
    height: min(
      calc(100% - 132px),
      var(--media-detail-max-height),
      calc(712 * var(--rs-u))
    );
    max-width: none;
    max-height: none;
    aspect-ratio: var(--about-photo-ratio);
    margin: 0 auto;
    overflow: hidden;
  }

  .about-page .opening-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 42% !important;
  }
}

/* About: every editorial body is the same left-aligned text block. */
.about-page .essay-copy,
.about-page .process-lead,
.about-page .afterword-copy p {
  width: min(100%, var(--about-copy-measure));
  max-width: var(--about-copy-max);
  margin-right: 0;
  margin-left: 0;
  font-family: var(--font-body-ja);
  font-weight: 300;
  line-height: var(--type-body-ja-line);
  letter-spacing: var(--type-body-ja-tracking);
  text-align: justify;
  text-justify: inter-character;
}

.about-page .editorial-heading-lines > span {
  display: block;
  white-space: nowrap;
}

/* Locked typography hierarchy: Home is the source, About reuses it verbatim. */
@media (min-width: 719px) {
  .hero-statement,
  .about-page .opening h1 {
    font-family: var(--font-display-en);
    font-size: var(--type-display-en-pc);
    line-height: var(--type-display-en-line);
    letter-spacing: var(--type-display-en-tracking);
  }

  .intro h2,
  .about-page .essay h2,
  .about-page .process h2,
  .about-page .afterword h2 {
    font-family: var(--font-heading-ja);
    font-size: var(--type-section-heading-pc) !important;
    font-weight: 400;
    line-height: var(--type-heading-ja-line);
    letter-spacing: var(--type-heading-ja-tracking);
  }

  .intro-bottom p,
  .about-page .essay-copy,
  .about-page .process-lead,
  .about-page .afterword-copy p {
    font-family: var(--font-body-ja);
    font-size: var(--type-body-ja-pc);
    font-weight: 300;
    line-height: var(--type-body-ja-line);
    letter-spacing: var(--type-body-ja-tracking);
  }
}

/* One editorial spread for the whole 719-1439 band — a straight scale of 1440.
   This replaces the former 1280+ / 1100-1279 / 900-1099 / 721-899 bands, which
   redefined the grid four times and recomposed the page inside the fluid range. */
@media (min-width: 719px) {
  .about-page .essay,
  .about-page .afterword {
    padding-right: var(--rs-edge-editorial);
    padding-left: var(--rs-edge-editorial);
  }

  .about-page .process-sticky > .eyebrow,
  .about-page .process-head {
    margin-right: var(--rs-edge-editorial);
    margin-left: var(--rs-edge-editorial);
  }

  .about-page .essay-grid,
  .about-page .process-head,
  .about-page .afterword-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--rs-copy-col)) var(--rs-photo-col);
    column-gap: var(--rs-spread-gap);
    justify-content: space-between;
  }

  .about-page :is(.essay-grid,.process-head,.afterword-grid,.world-layout) > * {
    min-width: 0;
    grid-row: 1;
  }
  .about-page :is(.essay-grid,.process-head,.afterword-grid,.world-layout) > :first-child {
    grid-column: 1;
  }
  .about-page :is(.essay-grid,.process-head,.afterword-grid,.world-layout) > :last-child {
    grid-column: 2;
  }
}

/* Compact editorial spreads retain two columns. Prose may grow vertically,
   but cannot push a photograph down within its row or into a new row. */
@media (min-width: 719px) and (max-width: 1439px) {
  .about-page :is(.essay-grid,.process-head,.afterword-grid) { align-items: start; }
  .about-page :is(.essay-photo,.process-anchor,.afterword-photo) { align-self: start; margin-top: 0; }
  .about-page .world-heading { font-size: var(--rs-world-heading); }
  .about-page .world-gallery { gap: calc(12 * var(--rs-u)); }
  .about-page .afterword-copy { padding-bottom: calc(27 * var(--rs-u)); }
  .about-page .opening-thesis { padding-top: calc(117 * var(--rs-u)); }
  .about-page .opening-thesis p { font-size: calc(46.08 * var(--rs-u)); }
  body#top .intro { padding-top: calc(44.55 * var(--rs-u)); padding-bottom: calc(62.1 * var(--rs-u)); }
  body#top .intro > .label { margin-bottom: calc(13.5 * var(--rs-u)); }
  body#top .intro-bottom { margin-top: var(--rs-space-heading-body); }
  body#top .intro-bottom > .text-link { margin-top: calc(45 * var(--rs-u)); }
  body#top .hero-title { padding-top: calc(54 * var(--rs-u)); padding-bottom: calc(31.05 * var(--rs-u)); }
  body#top .works { padding-bottom: calc(162 * var(--rs-u)); }
  body#top .works-head { padding-bottom: calc(54 * var(--rs-u)); }
  body:not(#top) .page { padding-top: calc(56px + 108 * var(--rs-u)); padding-bottom: calc(144 * var(--rs-u)); }
  body:not(#top) .page > h1 { margin-bottom: calc(64 * var(--rs-u)); }
}

/* 1440x900 master: the process heading renders at 67.5px.
   Grade by width, not by the device height. */
@media (min-width: 719px) and (max-width: 1439px),
       (min-width: 1440px) and (max-height: 900px) {
  .about-page .process h2 {
    font-size: calc(67.5 * var(--rs-u)) !important;
  }

}

@media (max-width: 718px) {
  :root {
    --about-block-space: 80px;
  }

  .about-page .essay-copy,
  .about-page .process-lead,
  .about-page .afterword-copy p {
    font-size: 18px;
    line-height: 1.75;
  }

  .about-page .afterword {
    padding-top: var(--about-block-space);
  }

  .about-page .essay-photo,
  .about-page .process-anchor,
  .about-page .afterword-photo {
    width: min(82vw, 420px);
    margin-left: auto;
  }

  .about-page .opening-photo {
    width: min(calc(100vw - 40px), calc((100svh - 152px) * .75), 420px);
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: var(--about-photo-ratio);
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
  }

  .about-page .opening-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 42% !important;
  }
}

@media (min-width: 719px) {
  .about-page .afterword h2 {
    font-size: var(--rs-afterword-ja) !important;
  }
}

/* About / Creative direction: reuse the same copy and photo columns at every breakpoint. */
.about-page .world-copy {
  width: min(100%, var(--about-copy-measure));
  max-width: var(--about-copy-max);
  margin-right: 0;
  margin-left: 0;
  font-family: var(--font-body-ja);
  font-weight: 300;
  line-height: var(--type-body-ja-line);
  letter-spacing: var(--type-body-ja-tracking);
  text-align: justify;
  text-justify: inter-character;
}

.about-page .world-gallery {
  width: var(--about-photo-column);
  margin-left: auto;
}

.about-page .world-layout {
  width: min(100%, var(--media-content-max));
  margin-right: auto;
  margin-left: auto;
}

/* Final creative set: one strict 3:4 column with one continuous reading rhythm. */
.about-page .world-gallery {
  gap: 12px;
}

.about-page .world-shot,
.about-page .world-shot:nth-child(3) {
  width: 100%;
  aspect-ratio: var(--about-photo-ratio);
  margin: 0;
}

.about-page .world-shot img,
.about-page .world-shot:hover img {
  transform: none;
}

/* Color narrative: the opening expands from monochrome into color; the final chapter stays in color. */
.about-page .opening-fill img {
  filter: grayscale(calc(1 - var(--opening-expand-progress, 0)));
}

.about-page .world-shot img,
.about-page .world-shot:hover img {
  filter: none;
}

/* Creative direction spread: same single scale as the essay/afterword spreads. */
@media (min-width: 719px) {
  .about-page .world-section {
    padding-right: var(--rs-edge-editorial);
    padding-left: var(--rs-edge-editorial);
  }

  .about-page .world-layout {
    grid-template-columns: minmax(0, var(--rs-copy-col)) var(--rs-photo-col);
    column-gap: var(--rs-spread-gap);
    justify-content: space-between;
  }

  .about-page .world-copy {
    font-size: var(--type-body-ja-pc);
  }
}

@media (max-width: 718px) {
  .about-page .world-copy {
    font-size: var(--rs-body-ja);
    line-height: var(--rs-body-line);
  }

  .about-page .world-gallery {
    width: min(82vw, 420px);
    margin-left: auto;
    gap: 8px;
  }

  .about-page .world-shot:nth-child(3) {
    width: 100%;
    margin-left: 0;
  }
}

/* Top page: native-ratio hero with a hard large-screen ceiling.
   The height cap now carries the master ramp too. Before, the hero was bound by
   height alone, so at 719 it still rendered at its full 1440 size (67% of the
   viewport instead of 33%) and the composition read as a different design.
   At 1440x900 the effective height is 628px, not the 900px media ceiling. */
@media (min-width: 719px) {
  .hero-image {
    max-width: min(calc(100% - var(--rs-edge-page)), var(--media-content-max));
    max-height: min(
      calc(100% - 132px),
      var(--media-detail-max-height),
      calc(628 * var(--rs-u))
    );
  }

  .page {
    width: min(100%, var(--rs-frame-max));
    margin-inline: auto;
  }

  /* Keep the Works heading on the same left axis as the thought block. */
  .works {
    width: 100%;
    margin-inline: 0;
  }
}

/* Shared editorial quotation: one optical rhythm across Home and Works. */
.editorial-quote {
  display: flex !important;
  width: max-content !important;
  max-width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
}

.editorial-quote::before,
.editorial-quote::after {
  content: none !important;
}

.editorial-quote-mark {
  display: block;
  flex: 0 0 auto;
  width: .54em;
  margin: 0;
  color: var(--accent);
  font: 400 2em/1 "eb-garamond", Garamond, Georgia, serif;
  text-align: center;
  transform: translateY(-.03em);
}

.editorial-quote-mark--open {
  margin-right: .02em !important;
}

.editorial-quote-mark--close {
  margin-left: .03em !important;
}

html[lang="en"] .editorial-quote-copy,
html[lang="es"] .editorial-quote-copy {
  font-family: "eb-garamond", Garamond, Georgia, serif !important;
  font-weight: 400;
  letter-spacing: -.018em !important;
}

html[lang="zh"] .intro h2,
html[lang="zh"] .intro-bottom p,
html[lang="zh"] .editorial-quote-copy,
html[lang="zh"] .text-link,
html[lang="zh"] .opening-thesis,
html[lang="zh"] .essay h2,
html[lang="zh"] .essay-copy,
html[lang="zh"] .process h2,
html[lang="zh"] .process-lead,
html[lang="zh"] .afterword h2,
html[lang="zh"] .afterword-copy,
html[lang="zh"] .world-statement,
html[lang="zh"] .world-copy,
html[lang="zh"] .works-contact-copy,
html[lang="zh"] .works-contact-thought {
  font-family: "Noto Serif SC", "Songti SC", STSong, serif !important;
  letter-spacing: 0 !important;
}

/* The three per-page language controls are now one rule set in header-system.css
   (.site-lang-switch), so Top, Works, About and Contact share one position,
   one scale and one 44px hit area. */

html[lang="en"] .page > h1,
html[lang="en"] .works-contact p,
html[lang="en"] .works-contact-thought,
html[lang="es"] .page > h1,
html[lang="es"] .works-contact p,
html[lang="es"] .works-contact-thought {
  font-family: "eb-garamond", Garamond, Georgia, serif !important;
  letter-spacing: -.045em !important;
}

/* Thought headline: controlled phrase breaks, never accidental wrapping. */
.intro h2 .thought-part {
  white-space: nowrap;
}

.intro h2 .thought-break--medium,
.intro h2 .thought-break--narrow {
  display: none;
}

@media (max-width: 718px) {
  .intro h2 .thought-break--medium,
  .intro h2 .thought-break--narrow {
    display: initial;
  }
}

@media (min-width: 719px) {
  /* 「均一に向かっている世界に、もう一度、人の手触りを。」と「制作事例」（トップ・Works両方）を
     同じ大きさで置く。ここは元々3つを揃える意図で書かれていたが、指す先が
     --type-section-heading-pc（105.84）のままだったため、思考ブロックだけが後から
     --rs-thought-ja（92）に移り、Works側の2つが15%大きいまま取り残されていた。
     実寸を決めているのは body#top .intro h2 の --rs-thought-ja なので、そちらに合わせる。 */
  .intro h2,
  #works .works-head h2,
  .page > h1 {
    font-size: var(--rs-thought-ja);
  }
}

@media (max-width: 718px) {
  /* 狭い幅では .intro h2 が各ページの clamp(38px,5vw,72px)（＝実質38px）で座る。
     --rs-thought-ja は狭い幅だと clamp(40px,11.2vw,46px) で思考ブロックが使っていないため、
     トークンでは揃わない。同じ式を書いて合わせる。 */
  #works .works-head h2,
  .page > h1 {
    font-size: clamp(38px, 5vw, 72px);
  }
}

/* Smooth the pointer-driven mask coordinates instead of snapping per event. */
@property --spot-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --spot-y { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --y { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* Prevent the browser's ordinary image drag/long-press save affordances. */
img,
picture {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Top and Works index: one stable 3:4 cover system. */
.project-media,
.media {
  aspect-ratio: var(--media-list-ratio);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: --spot-x .16s cubic-bezier(.22,1,.36,1), --spot-y .16s cubic-bezier(.22,1,.36,1), --x .16s cubic-bezier(.22,1,.36,1), --y .16s cubic-bezier(.22,1,.36,1);
}

.project-media > img:first-child,
.project-media .color-layer,
.media > img:first-child,
.media .color,
.project-media.hotel-cover img,
.project-media.nora-wedding-cover img {
  width: 100%;
  height: 100% !important;
  max-width: none;
  max-height: none;
  object-fit: cover !important;
}

.project-media.hotel-cover img { object-position: 52% 50%; }
.project-media.nora-wedding-cover img { object-position: 50% 50%; }

/* Top Works: fluid editorial grid. The cards recompose instead of scaling freely. */
#works .grid {
  --works-grid-gap: var(--rs-grid-gap);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--works-grid-gap) !important;
  width: 100%;
  /* ヒーローは3:4の縦位置を1画面に収める設計なので、大きさは画面の「高さ」で決まる。
     グリッドを幅だけで決めると、横長の画面では作品1枚がヒーローより大きくなる
     （1920x1080 で ヒーロー469px に対し カード708px だった。2026-09-14）。
     ヒーローが常に主役でいられるよう、グリッドの上限にも同じ高さを効かせる。
     1.30 は「カード1枚 ≒ ヒーロー幅の 0.9」に落ちる係数。--rs-u は1440pxで止まるので使えない。 */
  max-width: min(var(--media-content-max), calc((100svh - 201px) * 1.30));
  margin-inline: auto;
  justify-content: stretch;
  align-items: start;
}

@media (min-width: 1200px) {
  #works .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: min(var(--media-content-max), calc((100svh - 201px) * 1.90));
  }
}

#works .work-column {
  display: contents;
}

#works .project {
  min-width: 0;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .42s ease var(--grid-delay, 0ms),
    transform .64s cubic-bezier(.16, 1, .3, 1) var(--grid-delay, 0ms);
  will-change: transform, opacity;
}

#works .grid.is-grid-ready .project {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#works .story-title {
  font-size: var(--rs-story-title);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.025em;
}

/* Works index mirrors the top-page editorial grid. */
.page > .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rs-grid-gap) !important;
  width: 100%;
  max-width: var(--media-content-max);
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .page > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page .name {
  font-size: var(--rs-story-title);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.025em;
}

/* Story pages: equal visual height, native aspect ratio, never cropped. */
@media (min-width: 719px) {
  .rail .image-panel:not(.same-face-frame) {
    width: auto;
    min-width: calc(
      min(calc(100svh - 56px - var(--media-detail-gap-y-total)), var(--media-detail-max-height)) * .75
      + var(--media-detail-gap-x) * 2
    );
    padding: var(--media-detail-gap-y) var(--media-detail-gap-x);
  }

  .rail .image-panel:not(.same-face-frame) img {
    width: auto;
    height: min(
      calc(100svh - 56px - var(--media-detail-gap-y-total)),
      var(--media-detail-max-height)
    );
    max-width: none;
    max-height: var(--media-detail-max-height);
    object-fit: contain;
  }

  .rail .same-face-frame {
    align-self: center;
    height: min(100%, calc(var(--media-detail-max-height) + var(--media-detail-gap-y-total)));
    width: auto;
    min-width: 0;
    aspect-ratio: 3 / 4;
  }
}

/* Mobile keeps the same roles: fixed cover indexes, fitted story images. */
@media (max-width: 718px) {
  /* SP uses one lens treatment for every work. Per-card desktop tuning must not
     make Same clothes, Nora, or A room, waiting bloom differently on touch. */
  .project-media .color-layer,
  .media .color {
    filter: saturate(1.08) contrast(1.03) brightness(1.01) !important;
    transform: none;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.94) 21%, rgba(0,0,0,.58) 43%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.94) 21%, rgba(0,0,0,.58) 43%, transparent 72%);
  }

  #works .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }


  #works .story-title {
    font-size: clamp(12px, 3.6vw, 15px);
  }

  .page .name {
    font-size: clamp(12px, 3.6vw, 15px);
  }

  /* SP stories are a vertical sequence of 3:4 covers, not a horizontal rail. */
  body:has(.rail) { overflow-y: auto; }
  .rail { position: relative; top: 0; display: flex; flex-direction: column; height: auto; padding: 80px 16px 32px; overflow: visible; scroll-snap-type: none; gap: 24px; }
  .rail::after { display: none; }
  .rail .title-panel { width: 100%; min-width: 0; height: auto; padding: 16px 0 24px; }
  .rail .image-panel,
  .rail .image-panel.same-face-frame,
  .rail .image-panel.wide-feature { width: 100%; min-width: 0; height: auto; aspect-ratio: 3 / 4; padding: 0; margin: 0; overflow: hidden; }
  .rail .image-panel.same-face-frame::after { display: none; }
  .rail .image-panel img,
  .rail .image-panel:not(.same-face-frame) img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
}

/* Tablet hero exception: stronger photographic presence than strict grading.
   Join the original 1440 master continuously; do not affect list cards. */
/* 1440px から上は、いままで 628 * --rs-u（＝628px）で完全に止まっていた。
   その結果、横長の画面ほどヒーローが小さく見え、下の作品サムネのほうが大きくなっていた。
   起点を 628px に合わせてあるので 1439→1440 に段差は出ない（実測 628.1 → 628）。
   伸びしろの上限は「1画面に収まる高さ」。見出しは画像の下端に付いて動く。 */
@media (min-width: 1440px) {
  body#top .hero-image {
    max-height: min(
      calc(100% - 75px),
      calc(628px + (100vw - 1440px) * .55),
      1200px
    );
  }
}

@media (min-width:719px) and (max-width:1439px) {
  :root { --hero-tablet-emphasis: min(calc((100vw - 719px) * 2), calc((1440px - 100vw) * .15)); }
  body#top .hero-image { max-height: min(calc(100% - 48px), calc(620px + (100vw - 719px) * .011096 + var(--hero-tablet-emphasis))) !important; }
  .about-page .opening-photo { height: min(calc(100% - 48px), calc(700px + (100vw - 719px) * .016644 + var(--hero-tablet-emphasis))); }
}

@media (prefers-reduced-motion: reduce) {
  #works .project {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Match the footer thought-link rule across the home and Works pages. */
.text-link,
.about-entry a.about-thought,
.works-contact a.works-contact-thought {
  border-bottom: 0;
  text-transform: none;
}

.about-entry a.about-thought,
.works-contact a.works-contact-thought {
  font-size: 16px !important;
}

@media (max-width: 718px) {
  .about-entry a.about-thought,
  .works-contact a.works-contact-thought {
    font-size: 14px !important;
  }
}

/* Keep the continuity pair authoritative after the generic About media rules. */
.about-page .essay-grid,
.about-page .process-head,
.about-page .afterword-grid {
  max-width: var(--media-content-max);
  margin-right: auto;
  margin-left: auto;
}

.about-page .essay > .eyebrow,
.about-page .afterword > .eyebrow {
  display: block;
  max-width: var(--media-content-max);
  margin-right: auto;
  margin-left: auto;
}

/* About footer: statement, nav, and credit row. */
.site-footer {
  margin: 0 12px 12px;
  padding: 54px 5vw 28px;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 70px;
  font-size: 10px;
  letter-spacing: .04em;
}

.site-footer-statement {
  max-width: 560px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: -.035em;
}

.site-footer-statement span {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .1em;
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: flex-end;
  gap: 18px 28px;
}

.site-footer-credit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 10px;
}

@media (max-width: 718px) {
  .site-footer {
    margin: 0 6px 6px;
    padding: 42px var(--rs-gutter-sp) 22px;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .site-footer-nav {
    justify-content: flex-start;
  }

  .site-footer-credit {
    grid-column: auto;
    display: grid;
    gap: 8px;
  }
}

@media (min-width: 719px) {
  .site-footer {
    padding-right: var(--rs-edge-editorial);
    padding-left: var(--rs-edge-editorial);
  }
}

/* Deleted: the 1280-1439 afterword grid and the 1440-only afterword grid.
   The second made 1440 its own one-pixel band — the photo jumped 500 -> 558.4
   at the master width itself. The afterword now uses the shared spread. */

/* Match the lower Japanese-copy rhythm across the home and Works footers. */
@media (min-width: 719px) {
  .works-contact p,
  .works-contact a.works-contact-thought {
    margin-top: 5.5vh;
  }

  /* The home quote has a taller line box; compensate without moving the copy. */
  .works-contact a.works-contact-thought {
    top: 20px;
  }

  /* Shared desktop header: logo left, navigation right on every page. */
  .nav {
    grid-template-columns: 1fr auto;
  }

  .nav-center {
    grid-column: 2;
    justify-self: end;
  }
}

/* グリッドの箱は 3:4 固定。カバーがそれ以外の比だと、下地（モノクロ）は height:auto で
   上端を基準に切られ、色レイヤーは object-fit:cover で中央を基準に切られる。
   結果、ホバーで絵が上下にずれる（2026-09-14、2:3のスケートで 80〜89px ずれた）。
   下地を色レイヤーと同じ切り方にそろえる。
   既存の .apparel-cover / .hotel-cover が同じことを画像ごとに個別にやっている。 */
.media.fill-cover > img:first-child,
.project-media.fill-cover > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
}

/* Keep the ad title and category together at the center of each cover. */
.story-title.has-category,
.name.has-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3em;
}

.has-category .work-category {
  display: block;
  font-size: .45em;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .02em;
}