/* =====================================================================
   ひより写真室 — works.css （作品と季節：ページ固有の設計）
   共有 tokens.css の変数のみを使用。新しい色・書体は導入しない。
   large-screen 戦略：designed max-width shell（--shell-max 1780px）に収め、
   外側の余白は淡藍のうっすらした地＋欄外の縦キャプションで意図を持たせる。
   ===================================================================== */

/* ---------- ヘッダー ---------- */
.site-header{ position: fixed; inset: 0 0 auto 0; z-index: 100; }
.site-header__bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-block: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
  mix-blend-mode: difference; color: var(--kinari);
}
.site-header__brand{
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em;
  font-size: var(--step-0); display: inline-flex; align-items: baseline; gap: 0.5em;
}
.site-header__brand-en{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  letter-spacing: 0.02em; opacity: 0.72; font-size: var(--step--1);
}
.site-nav{
  display: flex; align-items: center;
  gap: clamp(1.2rem, 0.5rem + 2vw, 3rem);
  font-size: var(--step--1); letter-spacing: 0.04em;
}
.site-nav a{ padding-bottom: 0.15em; }
.site-nav a[aria-current='page']{ background-size: 100% 1px; }
.nav-toggle{ display: none; }

/* ---------- shell 外の欄外マルジナリア（ワイド用） ---------- */
.page-marginalia{
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 30; pointer-events: none;
  color: var(--color-muted); font-size: var(--step--1); letter-spacing: 0.24em;
}
.page-marginalia--left{ left: clamp(0.6rem, 1.4vw, 1.6rem); }
.page-marginalia--right{ right: clamp(0.6rem, 1.4vw, 1.6rem); }
@media (max-width: 1499px){ .page-marginalia{ display: none; } }

/* ---------- HERO ---------- */
.hero{ position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero__canvas{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__grid{ position: relative; z-index: 2; width: 100%; align-items: center; padding-block: clamp(6rem, 12vh, 12rem) var(--space-5); }
.hero__side{ grid-column: 1 / 3; align-self: flex-start; padding-top: var(--space-3); }
.hero__vertical{
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  color: var(--color-accent); letter-spacing: 0.3em;
}
.hero__main{ grid-column: 3 / 13; display: flex; flex-direction: column; }
.hero__title{
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(2.6rem, 1.4rem + 6.2vw, 7rem);
  line-height: 1.08; letter-spacing: 0.01em; font-feature-settings: 'palt' 1;
}
.hero__en{
  font-size: clamp(3rem, 1rem + 9vw, 11rem);
  color: color-mix(in oklab, var(--color-muted) 70%, transparent);
  line-height: 0.9; margin-top: var(--space-2); margin-left: -0.03em;
}
.hero__body{
  margin-top: var(--space-4); max-width: 40ch; margin-left: auto;
  color: color-mix(in oklab, var(--color-fg) 88%, transparent);
  font-size: var(--step-0);
}
.hero__scroll{
  position: absolute; z-index: 2; left: var(--page-inline); bottom: clamp(1.4rem, 4vh, 3rem);
  display: flex; align-items: center; gap: 0.8rem;
  color: var(--color-muted); font-size: var(--step--1); letter-spacing: 0.2em;
}
.hero__scroll .line{
  display: block; width: 1px; height: clamp(40px, 8vh, 76px);
  background: linear-gradient(var(--color-muted), transparent);
  transform-origin: top; animation: scrollpulse 2.6s var(--ease-in-out-quart) infinite;
}
@keyframes scrollpulse{ 0%,100%{ transform: scaleY(0.4); opacity: 0.35; } 50%{ transform: scaleY(1); opacity: 1; } }

/* ---------- STORY（四季） ---------- */
.story{ position: relative; align-items: center; padding-block: clamp(3rem, 6vh, 7rem); }
.story__side{ display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.story__kanji{
  font-family: var(--font-body); font-weight: 700;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: clamp(3rem, 2rem + 5vw, 6.5rem); line-height: 1; letter-spacing: 0.1em;
  color: var(--k, var(--color-accent));
}
.story__date{ writing-mode: vertical-rl; letter-spacing: 0.26em; color: var(--color-muted); font-size: var(--step--1); font-family: var(--font-display); }
.story__text{ display: flex; flex-direction: column; gap: var(--space-3); }
.story__label{ display: flex; align-items: baseline; gap: 0.8em; }
.story__num{ font-size: var(--step-2); }
.story__title{ font-family: var(--font-body); font-weight: 700; font-feature-settings: 'palt' 1; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.2; }
.story__body{ max-width: 46ch; color: color-mix(in oklab, var(--color-fg) 90%, transparent); }
.story__meta{
  display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; align-items: baseline;
  color: var(--color-muted); font-size: var(--step--1);
  border-top: 1px solid var(--color-hairline); padding-top: var(--space-2); max-width: 46ch;
}
.story__place{ letter-spacing: 0.04em; }

/* パネル */
.story__panel{ position: relative; aspect-ratio: 4 / 5; }
.panel__inner{ position: absolute; inset: 0; }
.panel__art{ position: absolute; inset: -6%; color: var(--k, var(--color-accent)); }
.panel__art svg{ width: 100%; height: 100%; }
.panel__art--aki{ filter: blur(0.3px); }
.panel__art--fuyu{ opacity: 0.9; }
.panel__caption{ position: absolute; left: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.2em; z-index: 2; }
.panel__caption .hand{ font-size: var(--step-1); color: var(--color-fg); }
.panel__caption .label{ color: color-mix(in oklab, var(--color-fg) 60%, transparent); }

/* 季節ごとの色面 */
.panel--haru{
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--wakaba) 34%, var(--kinari)) 0%, var(--kinari) 72%),
    radial-gradient(120% 90% at 24% 8%, color-mix(in oklab, var(--wakaba) 22%, var(--kinari)), transparent 55%);
}
.panel--natsu{
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--awaai) 50%, var(--kinari)) 0%, var(--kinari) 74%),
    radial-gradient(120% 100% at 78% 12%, color-mix(in oklab, var(--kinari) 85%, white), transparent 52%);
}
.panel--aki{
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--wakaba) 26%, var(--kinari)) 0%, color-mix(in oklab, var(--kasumi) 18%, var(--kinari)) 74%),
    radial-gradient(120% 90% at 22% 12%, color-mix(in oklab, var(--wakaba) 20%, var(--kinari)), transparent 58%);
}
.panel--fuyu{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--awaai) 62%, var(--kinari)) 0%, color-mix(in oklab, var(--awaai) 30%, var(--kinari)) 100%),
    linear-gradient(90deg, transparent 38%, color-mix(in oklab, var(--kinari) 80%, white) 50%, transparent 62%);
}
#haru{ --k: var(--wakaba); }
#natsu{ --k: color-mix(in oklab, var(--awaai) 65%, var(--wakaba)); }
#aki{ --k: color-mix(in oklab, var(--wakaba) 55%, var(--kasumi)); }
#fuyu{ --k: color-mix(in oklab, var(--awaai) 40%, var(--kokezumi)); }

/* 左右の重心振り分け（非対称グリッド） */
.story--right .story__side{ grid-column: 1 / 3; grid-row: 1; }
.story--right .story__text{ grid-column: 3 / 8; }
.story--right .story__panel{ grid-column: 8 / 13; }
.story--left .story__panel{ grid-column: 1 / 6; }
.story--left .story__side{ grid-column: 6 / 8; }
.story--left .story__text{ grid-column: 8 / 13; }

/* 冬：静けさを広くとる薄い淡藍の地 */
.story--fuyu{ background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--awaai) 18%, transparent) 55%, transparent); }

/* ---------- FOOTER ---------- */
.site-footer{ position: relative; padding-top: var(--space-6); padding-bottom: var(--space-4); overflow: hidden; }
.footer-cta{ text-align: center; padding-block: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.footer-cta__title{
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.6rem, 1rem + 9vw, 9rem); line-height: 1.02; letter-spacing: 0.01em;
  font-feature-settings: 'palt' 1;
}
.footer-cta__title .accent{ color: var(--color-accent); font-style: italic; }
.footer-cta__lead{ max-width: 52ch; margin-top: var(--space-2); color: color-mix(in oklab, var(--color-fg) 82%, transparent); }
.footer-marquee{ margin-block: var(--space-4); font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); color: color-mix(in oklab, var(--color-muted) 80%, transparent); }
.footer-marquee .marquee-track > span:nth-child(odd){ font-family: var(--font-body); font-style: normal; font-weight: 500; color: var(--color-fg); }
.footer-grid{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gutter); align-items: start; margin-top: var(--space-4); }
.footer-contact{ grid-column: 1 / 7; display: flex; flex-direction: column; gap: 0.4em; }
.footer-nav{ grid-column: 9 / 13; display: flex; flex-direction: column; gap: 0.4em; align-items: flex-start; }
.footer-hand{ font-family: var(--font-hand); color: var(--color-muted); margin-top: var(--space-2); }
.footer-legal{ grid-column: 1 / 13; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6em; margin-top: var(--space-4); color: var(--color-muted); font-size: var(--step--1); }

/* ---------- ワイド：designed shell の上端を意図的に構成する ---------- */
/* 2560px 等のワイドで hero 上半分が空くのを避ける：タイトルを引き上げ、
   上端にヘアラインを渡して、欄外キャプションと合わせて“場面”を作る。 */
@media (min-width: 1500px){
  .hero{ align-items: flex-start; }
  .hero__grid{ align-items: start; padding-block: clamp(7rem, 15vh, 11rem) var(--space-6); }
  .hero::before{
    content: ""; position: absolute; z-index: 2;
    top: clamp(4.5rem, 10vh, 7.5rem);
    left: var(--page-inline); right: var(--page-inline);
    height: 1px; background: var(--color-hairline);
  }
  .hero::after{
    content: "HIYORI PHOTO ATELIER · 2016";
    position: absolute; z-index: 2;
    top: clamp(5.4rem, 11vh, 8.6rem); right: var(--page-inline);
    font-family: var(--font-display); font-style: italic;
    letter-spacing: 0.2em; font-size: var(--step--1); color: var(--color-muted);
  }
}

/* ---------- レスポンシブ：設計された各段 ---------- */
@media (max-width: 1024px){
  .hero__side{ grid-column: 1 / 3; }
  .hero__main{ grid-column: 3 / 13; }
  .story--right .story__text{ grid-column: 3 / 8; }
  .story--left .story__text{ grid-column: 7 / 13; }
}

@media (max-width: 720px){
  .site-header__bar{ mix-blend-mode: difference; }
  .site-nav{
    position: fixed; inset: 0; z-index: 120;
    background: var(--color-fg); color: var(--color-bg);
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: var(--space-3); padding: var(--page-inline);
    font-size: var(--step-1); letter-spacing: 0.02em;
    transform: translateY(-100%); transition: transform var(--dur-2) var(--ease-in-out-quart);
    mix-blend-mode: normal;
  }
  body.nav-open .site-nav{ transform: translateY(0); }
  .site-nav a{ background-image: linear-gradient(var(--color-bg), var(--color-bg)); }
  .nav-toggle{
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; position: relative; z-index: 130; color: var(--kinari);
  }
  .nav-toggle__line{ display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--dur-1) var(--ease-out-quart), opacity var(--dur-1); }
  body.nav-open .nav-toggle{ color: var(--color-bg); }
  body.nav-open .nav-toggle .nav-toggle__line:first-child{ transform: translateY(3.25px) rotate(45deg); }
  body.nav-open .nav-toggle .nav-toggle__line:last-child{ transform: translateY(-3.25px) rotate(-45deg); }

  .hero__grid{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero__side{ padding-top: 0; }
  .hero__body{ margin-left: 0; max-width: 100%; }

  .story{ display: flex; flex-direction: column; gap: var(--space-3); }
  .story__side{ flex-direction: row; align-items: baseline; gap: var(--space-3); }
  .story__kanji{ writing-mode: horizontal-tb; text-orientation: mixed; font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .story__date{ writing-mode: horizontal-tb; letter-spacing: 0.14em; }
  .story__panel{ width: 100%; aspect-ratio: 5 / 4; order: 0; }
  .story__side{ order: 1; }
  .story__text{ order: 2; }
  .story__body{ max-width: 100%; }
  .story__meta{ max-width: 100%; }

  .footer-grid{ grid-template-columns: 1fr; }
  .footer-contact, .footer-nav, .footer-legal{ grid-column: 1 / -1; }
  .footer-nav{ margin-top: var(--space-3); }
  .footer-legal{ justify-content: flex-start; flex-direction: column; }
}

/* HERO 見出しが狭い幅で右端に切れる不具合の修正：
   下限を落とし、はみ出さないよう折り返しを許可する。 */
@media (max-width: 600px){
  .hero__title{ font-size: clamp(2rem, 8.5vw, 2.8rem); overflow-wrap: anywhere; }
  .hero__title .split-word{ white-space: normal; }
  .hero__en{ font-size: clamp(2.4rem, 14vw, 3.6rem); }
}

@media (max-width: 480px){
  .hero__title{ font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .hero__en{ font-size: clamp(2.3rem, 14vw, 3.4rem); }
}