/* HeroからContactまで、9セクション固有の文字組みと余白を担当する。
 * 共通部品は components.css、端末差分は media.css に置く。 */

.hero,
.section {
  --spine-left: calc(max(clamp(1.25rem, 4vw, 3rem), calc((100% - 1120px) / 2 + 3rem)) - .75rem);
}

.hero-dust,
.hero-gesture {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Hero全面の装飾canvas/SVGを表示面へ合わせる内在サイズ制御。 */
  width: 100%;
  height: 100%;
}

.hero-gesture {
  z-index: 0;
  left: var(--spine-left);
  /* Heroの一筆をROOM柱の起点へ合わせる装飾SVGの内在サイズ制御。 */
  width: auto;
  color: var(--vermilion);
  opacity: .82;
}

.hero-gesture-path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.room-stroke {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spine-left);
  z-index: 1;
  /* セクション全高へ通す装飾SVGの内在サイズ制御。 */
  width: 2px;
  height: 100%;
  pointer-events: none;
}

.room-stroke-path {
  fill: none;
  stroke: var(--vermilion);
  stroke-linecap: round;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.section > .inner {
  position: relative;
  z-index: 2;
}

.section-heading > .eyebrow,
.section-heading > div > .eyebrow,
.darkroom-head .eyebrow {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--type-section);
  font-weight: 400;
  letter-spacing: .07em;
  line-height: 1.12;
}

.hero-label {
  color: var(--vermilion);
}

.hero-title {
  margin-top: 2rem;
  font-size: var(--type-hero);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.35;
}

.hero-copy {
  margin-top: 2.5rem;
  font-size: var(--type-body);
  letter-spacing: .03em;
  text-wrap: balance;
}

.hero-room {
  margin-top: clamp(5rem, 11vw, 9rem);
  color: var(--muted-text);
  font-family: Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: .6875rem;
  letter-spacing: .18em;
}

.statement-section,
.works-section,
.darkroom-section,
.process-section,
.numbers-section,
.commission-section,
.contact-section {
  border-top: 1px solid var(--line);
}

.statement-section {
  padding-block: clamp(9rem, 16vw, 14rem);
}

.statement-section .section-heading {
  margin-bottom: 0;
}

.statement-section .room-number {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.statement-title {
  font-size: var(--type-section);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
}

.statement-copy p {
  margin-top: 2.5rem;
  line-height: 2.1;
  text-wrap: balance;
}

.work-card:nth-child(4n + 2) {
  margin-top: clamp(3rem, 7vw, 7rem);
}

.featured-work {
  position: relative;
  margin-top: clamp(9rem, 18vw, 15rem);
  padding-top: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--vermilion);
}

.featured-work::before {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--vermilion);
  font-family: Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: .16em;
  content: attr(data-featured-label);
}

.featured-work .work-caption {
  padding-top: 1.5rem;
  font-size: var(--type-card);
}

.featured-work .work-note {
  display: block;
  margin-top: .8rem;
  color: var(--muted-text);
}

.featured-work .work-plate {
  padding-inline: clamp(1.25rem, 8vw, 6rem);
}

.darkroom-section::after {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--theme-curtain, var(--ink));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .46s var(--ease-gallery);
}

.darkroom-section {
  overflow: clip;
}

.darkroom-flashlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  /* 暗室内だけを照らす装飾スプライト。ビューポート全面へ広げない。 */
  width: clamp(18rem, 30vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 253, 251, .2) 0, rgba(253, 253, 251, .08) 32%, rgba(253, 253, 251, .025) 54%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity var(--duration-ui) var(--ease-gallery);
}

body.theme-dark .darkroom-section.is-flashlight-active .darkroom-flashlight {
  opacity: .78;
}

.darkroom-section.is-theme-covering::after {
  opacity: 1;
  transition-duration: .26s;
}

.darkroom-copy {
  margin-top: 3rem;
  margin-left: 21%;
  line-height: 2.1;
}

.darkroom-grid {
  margin-top: clamp(5rem, 10vw, 9rem);
}

.dark-work:nth-child(even) {
  margin-top: clamp(3rem, 8vw, 8rem);
}

.dark-work {
  padding: clamp(.75rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
}

.dark-work img {
  border: 1px solid var(--soft-line);
}

.dark-work figcaption {
  padding-inline: clamp(.5rem, 1.5vw, 1rem);
}

.process-list li {
  padding: 2rem 1.25rem 2.5rem 0;
  border-top: 1px solid var(--line);
}

.process-list li + li {
  padding-left: 1.25rem;
  border-left: 1px solid var(--soft-line);
}

.process-list h3 {
  margin-top: 1.5rem;
  font-size: var(--type-card);
  font-weight: 500;
}

.process-list p {
  margin-top: 1rem;
  font-size: .9375rem;
  line-height: 1.8;
}

.process-note,
.commission-note,
.numbers-note {
  margin-top: 2.5rem;
  margin-left: 21%;
  color: var(--muted-text);
  font-size: .8125rem;
}

.comparison {
  margin-top: clamp(6rem, 13vw, 11rem);
  padding-top: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--line);
}

.comparison-copy h3 {
  margin-top: 1.25rem;
  font-size: var(--type-section);
  font-weight: 500;
  line-height: 1.5;
}

.comparison-copy > p:last-child {
  margin-top: 2rem;
  color: var(--muted-text);
}

.numbers-section {
  padding-block: clamp(8rem, 14vw, 12rem);
}

.number-item {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 2rem 1.5rem 2rem 0;
}

.number-item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  /* NUMBERSの罫線として必要な1px装飾。 */
  height: 1px;
  background: var(--line);
  content: "";
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .44s var(--ease-gallery), background-color var(--duration-ui) var(--ease-gallery);
}

.js .numbers-grid:not(.is-number-active) .number-item::before {
  transform: scaleX(0);
}

.numbers-grid.is-number-active .number-item:nth-child(2)::before {
  transition-delay: .06s, 0s;
}

.numbers-grid.is-number-active .number-item:nth-child(3)::before {
  transition-delay: .12s, 0s;
}

.number-item dt,
.number-item dd {
  position: relative;
  z-index: 1;
}

.number-item + .number-item {
  padding-left: 1.5rem;
  border-left: 1px solid var(--soft-line);
}

.number-item dt {
  color: var(--muted-text);
  font-size: .8125rem;
}

.number-item dd {
  margin-top: 2rem;
  color: var(--vermilion);
  font-family: Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(2.75rem, 7vw, 4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.number-item small {
  margin-left: .35rem;
  color: var(--text);
  font-size: .75rem;
}

.about-section {
  color: var(--surface);
  background: var(--text);
}

.about-section .eyebrow {
  color: var(--vermilion);
}

.about-section .section-heading {
  margin-bottom: 0;
}

.about-section .room-number {
  margin-bottom: 2.5rem;
  color: currentColor;
  opacity: .64;
}

.about-copy {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--vermilion);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 2.05;
}

.atelier-wide {
  position: relative;
  z-index: 2;
  margin-top: clamp(8rem, 14vw, 12rem);
  background: var(--text);
}

.atelier-image {
  position: relative;
}

.atelier-wide img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.atelier-wide figcaption {
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  color: currentColor;
  opacity: .64;
}

/* 大判画像の実測範囲だけ通し柱を隠し、前後3remで静かに接続する。 */
.about-section.spine-break-ready .room-stroke {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--spine-break-start) - 3rem), transparent var(--spine-break-start), transparent var(--spine-break-end), #000 calc(var(--spine-break-end) + 3rem), #000 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--spine-break-start) - 3rem), transparent var(--spine-break-start), transparent var(--spine-break-end), #000 calc(var(--spine-break-end) + 3rem), #000 100%);
}

.contact-section {
  padding-block: clamp(9rem, 16vw, 14rem);
}

.contact-section .section-heading {
  margin-bottom: 3rem;
}

.section-title-label {
  margin-top: .75rem;
  font-family: Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: var(--type-section);
  letter-spacing: .16em;
  line-height: 1.2;
}

.contact-copy {
  font-size: var(--type-body);
}

.contact-keep,
.line-keep {
  white-space: nowrap;
}

.contact-actions {
  margin-top: 3rem;
}

.sample-link-note {
  margin-top: 1.5rem;
  color: var(--muted-text);
  font-size: var(--type-small);
}

.stamp-station {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line);
}

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  font-family: Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: .6875rem;
  letter-spacing: .04em;
}