/* トップに足した部分と、第2回の仕立て直し：ヒーローの上のヘッダー、SCHEDULE の章（受付状況＋次の出演）、 */
/* BLOG 3件、PROFILE・MENU・FLOW の余白、CONTACT とシャッターのボタンの見た目、時間帯で変わる一枚目の基調色。 */
/* 既存の CONCEPT・PORTFOLIO・DARKROOM・シャッター・CONTACT の演出と作りには触れない。メディアクエリは site-media.css。 */

/* ---- 時間帯で変わる一枚目の基調色（JSが無いときは既存のまま） ---- */

html[data-daypart="morning"] .hero-scrim {
  background: rgba(250, 246, 239, 0.4);
}

html[data-daypart="daylight"] .hero-scrim {
  background: rgba(232, 240, 226, 0.46);
}

html[data-daypart="night"] .hero {
  background: var(--theme-night);
}

html[data-daypart="night"] .hero-scrim {
  background: rgba(17, 23, 34, 0.5);
}

html[data-daypart="night"] .hero-content,
html[data-daypart="night"] .hero-lead {
  color: var(--night-paper);
}

html[data-daypart="night"] .hero-media img {
  object-position: center 34%;
}

html[data-daypart="night"] .hero-bokeh {
  display: none;
}

html[data-daypart="night"] .hero-light-parallax {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
  mask-image: linear-gradient(to right, transparent, #000 30%);
}

/* ---- ヒーローの上のヘッダー：紙色の文字（スクロール後は site.css の紙色の帯へ） ---- */

html:not(.nav-open) body:not(.subpage) .site-header:not(.is-scrolled) {
  color: var(--paper);
}

/* 明るい一枚目の上でも紙色の文字が読めるよう、ヘッダーの後ろだけ --ink の薄いかげりを置く（スクロール後は消える）。 */
body:not(.subpage) .site-header::before {
  background: linear-gradient(to bottom, rgba(59, 44, 34, 0.34), rgba(59, 44, 34, 0));
  content: "";
  height: 180%;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.4s var(--ease-light);
  z-index: -1;
}

body:not(.subpage) .site-header.is-scrolled::before,
html.nav-open body:not(.subpage) .site-header::before {
  opacity: 0;
}

html[data-daypart="night"]:not(.nav-open) body:not(.subpage) .site-header:not(.is-scrolled) .header-cta {
  background: var(--night-paper);
  border-color: var(--night-paper);
  color: var(--ink);
}

/* ---- PORTFOLIO の写真からギャラリーへ ---- */

.photo-link {
  inset: 0;
  position: absolute;
  z-index: 9;
}

.portfolio-cta {
  background: var(--theme-night);
  padding-block: clamp(3.5rem, 7vw, 5rem);
  position: relative;
  z-index: 1;
}

.portfolio-cta .cta-row {
  margin-top: 0;
}

/* ---- CONTACT のボタン（ページの最後の導線＝主ボタン）。動きは既存のまま、見た目だけ主ボタンにそろえる ---- */

a.contact-button {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  justify-content: center;
  letter-spacing: 0.14em;
  line-height: 1.5;
  min-height: 3.4rem;
  min-width: var(--button-min);
  padding: 0.5rem 2.75rem;
  text-align: center;
}

/* ---- シャッターのボタン（導線ではないので副ボタンの見た目）。動きは既存のまま ---- */

.shutter-button {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  min-height: 3.4rem;
  min-width: var(--button-min);
  padding: 0.5rem 2.75rem;
}

/* ---- PROFILE・MENU・FLOW：セクションの余白と、章タイトルから中身までをトークンにそろえる ---- */

.profile,
.menu,
.flow {
  padding-block: var(--space-section);
}

.profile-copy h2 {
  margin-bottom: var(--space-title);
}

.menu-grid,
.flow-grid {
  margin-top: var(--space-title);
}

/* ---- SCHEDULE（受付状況と次の出演を1つの章に） ---- */

.schedule,
.home-blog {
  background-color: var(--paper);
  background-image: url("../images/paper-washi.webp");
  background-repeat: repeat;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.schedule-grid {
  align-items: start;
  display: grid;
  gap: var(--space-title);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.schedule-grid .label-en {
  margin-bottom: 1.25rem;
}

.booking-text {
  align-items: baseline;
  display: flex;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  gap: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
  text-wrap: pretty;
}

.schedule-booking .cta-row {
  margin-top: var(--space-block);
}

/* 次の出演：上下の細線だけの行（左に日付、右に撮影会名・会場と部・受付状況と副ボタン） */

.event-card {
  border-block: 1px solid var(--hairline);
  display: grid;
  gap: 0 2.25rem;
  grid-template-areas:
    "date body"
    "date side";
  grid-template-columns: auto minmax(0, 1fr);
  padding-block: var(--space-card);
}

.event-card .event-date {
  grid-area: date;
}

.event-card .event-body {
  grid-area: body;
}

.event-card .event-side {
  grid-area: side;
}

.event-date {
  font-family: var(--font-latin);
  line-height: 1.1;
  margin: 0;
}

.event-date-year {
  color: var(--ink-soft);
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}

.event-date-day {
  display: block;
  font-size: 3rem;
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
}

.event-date-week {
  color: var(--ink-soft);
  display: block;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  margin-top: 0.4rem;
}

.event-body h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.event-facts {
  color: var(--ink-soft);
  display: grid;
  font-size: 0.875rem;
  gap: 0.15rem;
  line-height: 1.8;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.event-side {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: 1.25rem;
}

/* ---- BLOG 3件 ---- */

.home-blog .card-grid {
  margin-top: 0;
}

/* ---- English の一枚目の見出し：単語の途中で折り返さない ---- */

.hero-word {
  display: inline-block;
  white-space: nowrap;
}

/* ---- 次の出演：イベントの役割（出展・登壇・在廊）を題の上に小さく ---- */

.event-role {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  line-height: 1.6;
  margin-bottom: 0.35rem;
}

/* ---- NUMBERS（数字で見る自己紹介）：細線で区切った3列。数字は Georgia、単位と名前は明朝 ---- */

.numbers {
  background-color: #fffdf9;
  isolation: isolate;
  position: relative;
}

.numbers-grid {
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 0 3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.numbers-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.number-item {
  border-top: 1px solid var(--hairline);
  padding-block: 2rem 2.25rem;
}

.number-value {
  align-items: baseline;
  display: flex;
  gap: 0.4rem;
  line-height: 1;
}

.number-figure {
  font-family: var(--font-latin);
  font-size: clamp(2.5rem, 4.2vw, 3.25rem);
  letter-spacing: 0.02em;
}

.number-unit {
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.number-name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-top: 1.1rem;
}

.number-note {
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.8;
  margin-top: 0.3rem;
}

.numbers-note {
  color: var(--ink-soft);
  font-size: 0.8rem;
  margin-top: 1rem;
}

/* ---- 最近の8枚（PORTFOLIO の夜の面の上の card-slider）。写真は細い金線1本の枠、文字は紙色 ---- */

.portfolio-cta {
  padding-top: clamp(4.5rem, 8vw, 6.5rem);
}

.portfolio-recent {
  margin-bottom: var(--space-title);
}

.portfolio-recent-title {
  color: var(--night-paper);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-bottom: var(--space-block);
}

.recent-card {
  color: var(--night-paper);
  display: block;
}

.recent-card-image {
  aspect-ratio: 4 / 5;
  display: block;
  margin: 0.55rem;
  outline: 1px solid rgba(216, 188, 114, 0.6);
  outline-offset: 0.45rem;
  overflow: hidden;
}

.recent-card-image img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-light);
  width: 100%;
}

.recent-card-body {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.5rem;
}

.recent-card-title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.recent-card-meta {
  color: var(--soft-on-dark);
  font-size: 0.8rem;
  line-height: 1.75;
}

.recent-card:focus-visible {
  outline: 1px solid var(--champagne-gold);
  outline-offset: 4px;
}