@charset "utf-8";

/* ============================================================
   TTTT HAIR OIL
   世界観: 北欧の街角。冷たい青灰色の外気 × 窓からもれる琥珀色の灯り
   ============================================================ */

/* ---- 1. トークン（この4色は変更禁止 / CLAUDE.md §1-3）---- */
:root{
  --night: #241C14;   /* 深いブロンズ・暗い面の地色 */
  --frost: #AD9C88;   /* 温かいグレージュ・暗い面の本文 */
  --glass: #EDE4D9;   /* 暗い面の見出し */
  --amber: #E8A24A;   /* 窓からもれる琥珀色の灯り・アクセント */

  /* 紙のパレット。ヒーローから下（本文）で使う。
     クリームだと iki のサイトと被るので、中立の白に留めている。
     インクはブロンズ(--night)をそのまま流用して、上下の面を同じ色でつないでいる。 */
  --paper: #F7F7F6;   /* 中立の白 */
  --ink:   var(--night);

  /* 以下はすべて上記4色からの派生。生の16進数を増やさないこと */
  --night-up:  color-mix(in oklab, var(--night) 88%, var(--frost));
  --night-dn:  color-mix(in oklab, var(--night) 82%, black);
  --frost-dim: color-mix(in oklab, var(--frost) 80%, var(--night));
  --frost-fog: color-mix(in oklab, var(--frost) 24%, var(--night));
  --hair:      color-mix(in oklab, var(--frost) 22%, transparent);
  --amber-dim: color-mix(in oklab, var(--amber) 55%, var(--night));

  /* 比率は紙(--paper)の上で実測して決めている。下げるとWCAG AAを割る。
     --ink 15.66:1 / --ink-2 7.19:1 / --ink-3 5.61:1 / --amber-ink 6.40:1 */
  --ink-2:     color-mix(in oklab, var(--ink) 72%, var(--paper));
  --ink-3:     color-mix(in oklab, var(--ink) 64%, var(--paper));
  --rule:      color-mix(in oklab, var(--ink) 14%, transparent);
  /* 琥珀は白の上だとコントラストが出ないので、インクを混ぜて沈めた版を使う */
  --amber-ink: color-mix(in oklab, var(--amber) 45%, var(--ink));

  /* --- 面ごとの意味づけ。実際の指定はこの6つだけを見る --- */
  --bg:     var(--paper);
  --text:   var(--ink-2);
  --title:  var(--ink);
  --dim:    var(--ink-3);
  --line:   var(--rule);
  --accent: var(--amber-ink);

  --font-en: "Avenir Next", Avenir, "Nunito Sans", "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
  --font-ja: "Zen Kaku Gothic New", ui-sans-serif, system-ui, "Hiragino Sans", sans-serif;

  --dur:  1.5s;                              /* 動きは全部ゆっくり */
  --dur-s: 1.1s;
  --ease: cubic-bezier(.22,.61,.36,1);

  --pad: clamp(1.25rem, 5vw, 5rem);
  --gap: clamp(9rem, 18vh, 16rem);
}

/* ---- 2. リセット ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body,h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--amber); outline-offset:4px; border-radius:2px}

/* 夜の面（ヒーロー）。ここだけ暗いパレットに入れ替える */
#hero{
  --bg:     var(--night);
  --text:   var(--frost);
  --title:  var(--glass);
  --dim:    var(--frost-dim);
  --line:   var(--hair);
  --accent: var(--amber);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ja);
  font-weight:300;
  line-height:1.95;
  letter-spacing:.04em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.skip{
  position:fixed; top:0; left:0; z-index:100;
  padding:.75rem 1.25rem;
  background:var(--amber); color:var(--night);
  font-family:var(--font-en); font-size:.8rem; letter-spacing:.1em;
  transform:translateY(-120%);
}
.skip:focus{transform:none}

/* ---- 3. 共通タイポ ---- */
.label{
  font-family:var(--font-en);
  font-size:clamp(.66rem,1.4vw,.75rem);
  font-weight:400;
  letter-spacing:.16em;
  color:var(--dim);
  line-height:1;
}
.h2{
  font-family:var(--font-en);
  /* セクション見出しは大きいまま（2026-09-11 一度32px/500にしたが、ユーザー指示で元の70px/600に戻した） */
  font-size:clamp(1.9rem,5.6vw,4.4rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.005em;
  color:var(--title);
  text-wrap:balance;
}
/* 和文の見出しは欧文と同じ級数にしない。字面が密で、同じptだと2回り大きく見える */
.h2--ja{font-family:var(--ja); font-size:clamp(1.4rem,3.4vw,2.5rem); font-weight:700; letter-spacing:.02em; line-height:1.4}

/* ---- 4. ナビ ---- */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1rem,2.4vw,1.6rem) var(--pad);
  transition:background-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.nav{
  /* ヒーローの上にいるあいだは夜のパレット */
  --title:var(--glass); --dim:var(--frost-dim); --accent:var(--amber);
}
/* 本文（紙）に入ったら紙のパレットへ。main.js が is-stuck を付け外しする */
.nav.is-stuck{
  --title:var(--ink); --dim:var(--ink-3); --accent:var(--amber-ink);
  background:color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav__brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--title);
  transition:color var(--dur) var(--ease);
}
.nav__mark,.foot__mark{
  display:block;
  aspect-ratio:1405/303;
  background:currentColor;
  -webkit-mask:url("assets/tttt-mark.svg") no-repeat center/contain;
  mask:url("assets/tttt-mark.svg") no-repeat center/contain;
}
.nav__mark{width:clamp(64px,9vw,92px); color:var(--title); transition:color var(--dur) var(--ease)}
.nav__links{display:flex; gap:clamp(.9rem,2.2vw,2rem)}
.nav__links a{
  font-family:var(--font-en);
  font-size:clamp(.7rem,1.5vw,.8rem);
  letter-spacing:.06em;
  font-weight:500;
  color:var(--dim);
  text-decoration:none;
  transition:color var(--dur-s) var(--ease);
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--accent)}
@media (max-width:640px){
  /* 隠さずに横スクロールさせる。1ページものなので行き先を失わせない */
  .nav__links{
    flex:1; justify-content:flex-start; padding-left:.75rem;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    /* はみ出す側だけぼかして、スクロールできることを示す */
    mask-image:linear-gradient(to left, transparent, black 1.5rem);
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{white-space:nowrap; font-size:.68rem}
  }

/* ============================================================
   5. ヒーロー（全画面）
   #scene = CSSで描いた北欧の街角
   #heroVideo の data-src に mp4 を入れると自動で動画へ切り替わる
   ============================================================ */
#hero{
  position:relative;
  min-height:100svh;
  background:var(--night);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(3.5rem,9vh,6rem);
  overflow:hidden;
  isolation:isolate;
}

#scene,#heroVideo{position:absolute; inset:0; z-index:-1}
#scene{transition:opacity var(--dur) var(--ease); overflow:hidden}

/* --- フィルムのコマ。街角(.street)が0コマ目、写真(.shot)が1コマ目以降 --- */
/* つなぎは合計1.5s。出るコマが先に引き、入るコマが少し遅れて立ち上がる。
   0.3秒だけ重なるので、切り替わる瞬間に二重露光のにじみが残る。 */
.street,.shot{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition:opacity .9s var(--ease) 0s;
}
.street.is-on,.shot.is-on{
  opacity:1;
  transition:opacity .9s var(--ease) .6s;
}
/* 1コマ目は街角の下に敷いてあるので、最初から出しておく。
   街角が引いた瞬間にちょうど見える。main.js が通常のコマに戻す。 */
.shot--base{opacity:1}
.shot img{width:100%; height:100%; object-fit:cover}
/* コマの間だけごくゆっくり寄る */
.shot img{transform:scale(1.06); transition:transform 9s linear}
.shot.is-on img{transform:scale(1)}
/* 写真の上にも夜の空気をかぶせて、街角と地続きに見せる */
/* 見出しは左下に置いてあるので、そこを一番深く沈める。
   写真がどのコマでも h1 のコントラストが落ちないようにするための層。 */
.shot::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right,
      color-mix(in oklab, var(--night) 93%, transparent) 0%,
      color-mix(in oklab, var(--night) 74%, transparent) 30%,
      color-mix(in oklab, var(--night) 34%, transparent) 58%,
      color-mix(in oklab, var(--night) 8%, transparent) 84%),
    linear-gradient(to top,
      color-mix(in oklab, var(--night) 92%, transparent) 0%,
      color-mix(in oklab, var(--night) 52%, transparent) 26%,
      transparent 60%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--night) 62%, transparent) 0%,
      transparent 18%),
    color-mix(in oklab, var(--night) 26%, transparent);
}
/* 画面が狭いと横方向のグラデーションが効かないので、下半分をしっかり沈める */
@media (max-width:760px){
  .shot::after{
    background:
      linear-gradient(to top,
        color-mix(in oklab, var(--night) 95%, transparent) 0%,
        color-mix(in oklab, var(--night) 78%, transparent) 34%,
        color-mix(in oklab, var(--night) 34%, transparent) 62%,
        transparent 88%),
      linear-gradient(to bottom,
        color-mix(in oklab, var(--night) 70%, transparent) 0%, transparent 16%),
      color-mix(in oklab, var(--night) 34%, transparent);
  }
  #hero.video-ready::before,
  #hero.hero--cinematic::before{
    background:
      linear-gradient(to top,
        color-mix(in oklab, var(--night) 92%, transparent) 0%,
        color-mix(in oklab, var(--night) 72%, transparent) 34%,
        color-mix(in oklab, var(--night) 30%, transparent) 62%,
        transparent 88%),
      linear-gradient(to bottom,
        color-mix(in oklab, var(--night) 66%, transparent) 0%, transparent 16%);
  }
}
#heroVideo{
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
/* main.js が動画を読み込めたときだけ付く。ここは仕様なので消さない */
#hero.video-ready #scene{opacity:0}
#hero.video-ready #heroVideo{opacity:1}
/* どんな映像を差されても見出しが読めるように、動画のときだけ夜をかぶせる。
   CSSで描いた街角(#scene)は自前で .scene__haze を持っているので対象外。 */
#hero.video-ready::before,
#hero.hero--cinematic::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to right,
      color-mix(in oklab, var(--night) 88%, transparent) 0%,
      color-mix(in oklab, var(--night) 66%, transparent) 32%,
      color-mix(in oklab, var(--night) 26%, transparent) 62%,
      transparent 86%),
    linear-gradient(to top,
      color-mix(in oklab, var(--night) 88%, transparent) 0%,
      color-mix(in oklab, var(--night) 44%, transparent) 26%,
      transparent 58%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--night) 58%, transparent) 0%, transparent 18%);
  animation:fade var(--dur) var(--ease) both;
}

/* --- 5-1. 空と大気 --- */
/* 上は深い夜、地平に向かって冷たい青灰がわずかに明るむ */
.scene__sky{
  position:absolute; inset:0;
  background:
    radial-gradient(140% 62% at 50% 100%, var(--frost-fog) 0%, transparent 58%),
    linear-gradient(to bottom, var(--night-dn) 0%, var(--night) 46%, var(--night-up) 100%);
}
.scene__stars{
  position:absolute; inset:0 0 45%;
  background-image:
    radial-gradient(1px 1px at 18% 22%, var(--glass) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 12%, var(--glass) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 31%, var(--glass) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 16%, var(--glass) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 38%, var(--glass) 50%, transparent 51%);
  background-size:34rem 20rem;
  opacity:.22;
}

/* --- 5-2. 遠景 — 北欧の切妻屋根の連なり --- */
.scene__ridge{
  position:absolute; inset:auto 0 0; height:44%;
  background:linear-gradient(to bottom,
    color-mix(in oklab, var(--night-dn) 52%, var(--frost)) 0%,
    color-mix(in oklab, var(--night-dn) 88%, var(--frost)) 55%,
    var(--night-dn) 100%);
  clip-path:polygon(
    0% 100%,  0% 58%,  5% 58%,  5% 40%,  9% 26%, 13% 40%, 13% 58%,
    18% 58%, 18% 32%, 24% 32%, 24% 64%, 30% 64%, 30% 46%, 34% 32%, 38% 46%, 38% 64%,
    44% 64%, 44% 27%, 50% 27%, 50% 52%, 56% 52%, 56% 38%, 60% 24%, 64% 38%, 64% 52%,
    70% 52%, 70% 60%, 76% 60%, 76% 36%, 82% 36%, 82% 57%, 88% 57%, 88% 42%,
    92% 30%, 96% 42%, 96% 57%, 100% 57%, 100% 100%
  );
}

/* 窓からもれる灯りが霧に滲む */
.scene__glow{
  position:absolute; inset:auto 0 0; height:70%;
  background:
    radial-gradient(34% 58% at 82% 52%, color-mix(in oklab, var(--amber) 30%, transparent) 0%, transparent 70%),
    radial-gradient(22% 44% at 9% 62%,  color-mix(in oklab, var(--amber) 22%, transparent) 0%, transparent 72%);
  filter:blur(18px);
  animation:breathe 14s var(--ease) infinite alternate;
}
@keyframes breathe{from{opacity:.7} to{opacity:1}}

/* --- 5-3. 近景のファサードと窓 --- */
.fac{
  position:absolute; right:0; bottom:0;
  width:clamp(15rem, 30%, 34rem); height:100%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-content:start;
  gap:clamp(1.6rem, 4.5%, 3.2rem);
  padding:clamp(3.5rem, 9%, 6rem) clamp(1.6rem, 6%, 3.4rem);
  background:linear-gradient(to bottom,
    color-mix(in oklab, var(--night-dn) 88%, black) 0%,
    color-mix(in oklab, var(--night-dn) 62%, black) 100%);
  transform:perspective(70rem) rotateY(-11deg);
  transform-origin:right center;
  box-shadow:-3rem 0 6rem color-mix(in oklab, var(--night-dn) 70%, transparent);
}
.fac i{
  aspect-ratio:2/3;
  background:color-mix(in oklab, var(--frost) 9%, transparent);
  box-shadow:inset 0 0 0 1px var(--hair);
}
/* 灯りがともっている窓 */
.fac i:nth-child(2),
.fac i:nth-child(6),
.fac i:nth-child(7),
.fac i:nth-child(12),
.fac i:nth-child(14){
  background:linear-gradient(to bottom,
    color-mix(in oklab, var(--amber) 82%, var(--night)),
    color-mix(in oklab, var(--amber) 52%, var(--night)));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--amber) 45%, transparent),
    0 0 3rem .5rem color-mix(in oklab, var(--amber) 26%, transparent);
  animation:flicker 9s var(--ease) infinite alternate;
}
.fac i:nth-child(7){animation-duration:13s; animation-delay:-4s}
.fac i:nth-child(12){animation-duration:11s; animation-delay:-7s}
@keyframes flicker{from{opacity:.76} to{opacity:1}}

/* --- 5-4. 街灯 --- */
.lamp{
  position:absolute; left:clamp(1.5rem, 8%, 9rem); bottom:0;
  width:2px; height:62%;
  background:color-mix(in oklab, var(--night-dn) 58%, var(--frost));
}
.lamp__arm{
  position:absolute; top:0; left:0;
  width:3.6rem; height:2px;
  background:inherit;
  border-radius:0 999px 999px 0;
}
.lamp__head{
  position:absolute; top:.1rem; left:3.45rem;
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--amber);
  box-shadow:
    0 0 1.2rem .3rem color-mix(in oklab, var(--amber) 60%, transparent),
    0 0 6rem 2rem   color-mix(in oklab, var(--amber) 16%, transparent);
  animation:flicker 7s var(--ease) infinite alternate;
}

/* --- 5-5. 雪と、手前の霧 --- */
.scene__snow{
  position:absolute; inset:-25% 0 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, var(--glass) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 43% 62%, var(--glass) 50%, transparent 51%),
    radial-gradient(1px 1px     at 71% 31%, var(--glass) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 88% 76%, var(--glass) 50%, transparent 51%),
    radial-gradient(1px 1px     at 27% 87%, var(--glass) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 61% 8%,  var(--glass) 50%, transparent 51%);
  background-size:24rem 24rem;
  opacity:.3;
  animation:fall 34s linear infinite;
}
@keyframes fall{from{background-position:0 0} to{background-position:-5rem 24rem}}

.scene__haze{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--night) 2%, color-mix(in oklab, var(--night) 42%, transparent) 18%, transparent 44%),
    linear-gradient(to right, color-mix(in oklab, var(--night) 72%, transparent) 0%, color-mix(in oklab, var(--night) 22%, transparent) 30%, transparent 58%),
    radial-gradient(100% 80% at 45% 45%, transparent 42%, var(--night-dn) 100%);
}

/* --- 5-6. ヒーローのコピー --- */
.hero__grid{position:absolute; inset:0; display:flex; justify-content:space-evenly; pointer-events:none}
.hero__grid span{width:1px; background:linear-gradient(to bottom, transparent, var(--hair) 30%, var(--hair) 70%, transparent); opacity:.32}

.hero__copy{position:relative; max-width:min(58rem, 92%)}
.hero__title{
  font-family:var(--font-en);
  font-size:clamp(2rem,6.6vw,5.8rem);          /* 2026-09-11 元115px／小70px／中間92pxを見比べて、中間（PC約92px）に決定 */
  font-weight:600;                 /* ボトルのデミボールドに合わせる */
  line-height:1.06;
  letter-spacing:.005em;
  text-transform:uppercase;        /* ボトルの表記そのまま */
  color:var(--glass);
}
/* ヒーローのコピーはCSSアニメーションで立ち上げる。
   JSに待たされないので初期表示が速く、JS無効でも裏タブでも必ず出る。 */
.ln{display:block; overflow:hidden; padding-bottom:.06em}
.ln__i{display:block; animation:rise var(--dur) var(--ease) both}
.ln:nth-child(2) .ln__i{animation-delay:.16s}
@keyframes rise{from{transform:translateY(108%)} to{transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}

/* 森の動画ヒーロー（.hero--cinematic）。開いてしばらくは森だけを全面で見せ、
   見出しは2.4秒後に霧の中から浮かぶ。遅らせるのはCSSの animation-delay だけで、
   JSには待たせない（§1-5）。動きを減らす設定では animation:none なので即表示。 */
.hero--cinematic .ln__i{animation-delay:2.4s}
.hero--cinematic .ln:nth-child(2) .ln__i{animation-delay:2.56s}
.hero--cinematic .hero__sub{animation-delay:2.9s}
.hero--cinematic .hud{animation-delay:3.3s}
/* 静止画の時点から、最初は薄く→見出しのころに本来の濃さへ。
   #hero.video-ready::before の fade より後ろに書いてあるので、こちらが勝つ */
#hero.hero--cinematic::before{animation:scrim 2.4s var(--ease) .4s both}
/* 動画の1コマ目の静止画を最初から敷いておく。街角(#scene)は出さない。
   動画は同じ絵から始まるので、再生できた瞬間の切り替わりが見えない。
   動画を読めなかった／動きを減らす設定のときは、この静止画のまま。
   枠と位置は #heroVideo（cover・中央）と同じにしてある。 */
#hero.hero--cinematic{
  background:var(--night) url("assets/hero-poster.jpg") center/cover no-repeat;
  background-image:image-set(url("assets/hero-poster.avif") type("image/avif"), url("assets/hero-poster.webp") type("image/webp"), url("assets/hero-poster.jpg") type("image/jpeg"));
}
@media (max-aspect-ratio:1/1){
  #hero.hero--cinematic{
    background-image:url("assets/hero-poster-portrait.jpg");
    background-image:image-set(url("assets/hero-poster-portrait.avif") type("image/avif"), url("assets/hero-poster-portrait.webp") type("image/webp"), url("assets/hero-poster-portrait.jpg") type("image/jpeg"));
  }
}
#hero.hero--cinematic #scene{display:none}
@keyframes scrim{from{opacity:.35} to{opacity:1}}

.hero__sub{
  margin-top:clamp(1.25rem,3vh,2rem);
  font-family:var(--font-en);
  font-size:clamp(.8rem,1.9vw,1rem);
  font-weight:300;
  letter-spacing:.03em;
  line-height:1.85;
  color:var(--frost-dim);
  animation:fade var(--dur) var(--ease) .25s both;
}

/* --- 5-7. 下部のHUD（タイムコード＝いまのコマを示す） --- */
.hud{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(1.1rem,3vh,1.9rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  font-family:var(--font-en); font-size:.66rem; letter-spacing:.18em;
  color:var(--frost-dim);
  animation:fade var(--dur) var(--ease) .55s both;
}
.hud p{margin:0}
.hud__c{display:flex; flex-direction:column; align-items:center; gap:.6rem}
.hud__cue{
  width:1px; height:2.2rem;
  background:linear-gradient(to bottom, transparent, var(--frost-dim));
  animation:drip 3.4s var(--ease) infinite;
}
@keyframes drip{0%,100%{transform:scaleY(.35);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top}}
.hud__ticks{display:flex; gap:.4rem}
.hud__ticks i{
  width:1.15rem; height:1px;
  background:color-mix(in oklab, var(--frost-dim) 55%, transparent);
  transition:background-color var(--dur) var(--ease);
}
.hud__ticks i.is-on{background:var(--amber)}
.hud__time{font-variant-numeric:tabular-nums; letter-spacing:.14em}
/* 森の動画ヒーローでは、目盛りとタイムコードを出さない。
   これは街角モンタージュの「いま何コマ目か」を示すもので、動画とは連動しない（2026-09-11 ユーザー指摘）。
   座標（.hud__l）・容量（.hud__r）・スクロールの合図（.hud__cue）は残す。 */
.hero--cinematic .hud__ticks,
.hero--cinematic .hud__time{display:none}
@media (max-width:760px){
  .hud__l{display:none}
  .hud{justify-content:space-between}
  .hud__cue{display:none}
}

/* ============================================================
   6. セクション共通
   ============================================================ */
.sec{
  position:relative; padding:var(--gap) var(--pad);
  background:var(--bg); color:var(--text);
  /* 紙の上では Light(300) だと和文も痩せて読みにくい。本文は Regular にする */
  font-weight:400;
}

/* 紙の上では細いラテン文字が飛んで読めなくなる。
   小さい英字だけ太さを上げる（暗いヒーロー側は細いままでよいので触らない）。 */
.sec .label,
.cap, .spec dt, .spec dd,
.note-card__n, .note-card__e,
.ing__n, .ing__b,
.disclaimer, .steps__e,
.lead__en, .centered--en,
.kw,
.foot__name, .foot__meta, .foot__copy{
  font-weight:500;
}
.spec dt{letter-spacing:.12em}
.sec--lit::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%, color-mix(in oklab, var(--amber) 9%, transparent), transparent 72%);
}
.sec__head{
  display:flex; flex-direction:column; gap:clamp(1.5rem,4vh,2.75rem);
  padding-bottom:clamp(3rem,8vh,6rem);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(3rem,8vh,6rem);
}

/* reveal — 1.5s, ゆっくり。
   隠すのは main.js が動きだしたとき(.js-reveal)だけ。
   JSが無効でも、main.js の読み込みに失敗しても、本文はそのまま読める。 */
.rv{transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.js-reveal .rv{opacity:0; transform:translateY(1.4rem)}
.js-reveal .rv.is-in{opacity:1; transform:none}

/* ---- 6-1. Product ---- */
.product{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,7vw,7rem); align-items:center}
@media (max-width:860px){ .product{grid-template-columns:1fr} }
.product__fig{margin:0; position:relative}
.product__fig img{
  width:100%; height:auto;
  filter:contrast(1.03) saturate(.97);
}
.cap{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:1.25rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-family:var(--font-en); font-size:.68rem; letter-spacing:.16em; color:var(--dim);
}
.lead{font-size:clamp(.92rem,1.3vw,1.06rem); line-height:2.1; color:var(--title)}
.lead__en{margin-top:1.5rem; font-family:var(--font-en); font-size:.78rem; line-height:1.9; color:var(--dim); transition-delay:.12s}
.note{margin-top:1.5rem; font-size:.86rem; color:var(--text); transition-delay:.2s}
.spec{margin-top:clamp(2.5rem,6vh,3.5rem); border-top:1px solid var(--line); transition-delay:.28s}
.spec div{display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--font-en); font-size:.7rem; letter-spacing:.18em; color:var(--dim)}
.spec dd{font-family:var(--font-en); font-size:.85rem; letter-spacing:.04em; color:var(--title)}

/* ---- 6-2. Fragrance ---- */
/* 香りの9ノートの標本プレート。列が下のノートカード(Top/Heart/Base)と対応している。
   幅は .centered と同じ 44rem に揃えて、紙の面の中央にプレートとして置く。 */
.plate{margin:0 auto clamp(3rem,8vh,5rem); max-width:44rem}
.plate img{width:100%; height:auto; filter:contrast(1.02) saturate(.98)}
/* Ritualの動画。縦長(3:4)なので Fragrance のプレートより細くして、1画面に収める。 */
.plate--film{max-width:32rem}
.plate video{display:block; width:100%; height:auto}

.notes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:760px){ .notes{grid-template-columns:1fr; gap:2.5rem} }
.notes li:nth-child(2){transition-delay:.18s}
.notes li:nth-child(3){transition-delay:.36s}
.note-card{padding-top:1.5rem; border-top:1px solid var(--line)}
.note-card__n{font-family:var(--font-en); font-size:.68rem; letter-spacing:.2em; color:var(--accent)}
.note-card__t{
  margin:.9rem 0 1.5rem;
  font-family:var(--font-en); font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:500; letter-spacing:.04em; color:var(--title);
}
.note-card__b{font-size:.9rem; line-height:2.2; color:var(--text)}
.note-card__e{margin-top:1rem; font-family:var(--font-en); font-size:.72rem; letter-spacing:.05em; color:var(--dim)}

.centered{margin:clamp(4rem,10vh,7rem) auto 0; max-width:44rem; text-align:center; font-size:clamp(.86rem,1.2vw,.95rem); line-height:2.25; color:var(--title)}
.centered--en{margin-top:1.5rem; font-family:var(--font-en); font-size:.75rem; line-height:1.9; color:var(--dim); transition-delay:.16s}

/* ---- 6-3. Ingredients ---- */
.ing{border-top:1px solid var(--line)}
.ing li{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr) auto;
  gap:clamp(.75rem,2.5vw,2rem); align-items:baseline;
  padding:clamp(.8rem,1.9vh,1.1rem) 0;
  border-bottom:1px solid var(--line);
  transition-property:opacity,transform,background-color;
}
.ing li:hover{background:color-mix(in oklab, var(--ink) 5%, transparent)}
.ing__n{font-family:var(--font-en); font-size:.68rem; letter-spacing:.16em; color:var(--dim)}
.ing__a{font-size:clamp(.88rem,1.15vw,.98rem); color:var(--title); line-height:1.6}
.ing__b{font-family:var(--font-ja); font-size:.72rem; letter-spacing:.1em; color:var(--dim); text-align:right; white-space:nowrap}
@media (max-width:620px){
  .ing li{grid-template-columns:2.5rem minmax(0,1fr)}
  .ing__b{grid-column:2; text-align:left; white-space:normal}
}
.disclaimer{margin-top:1.75rem; font-size:.72rem; letter-spacing:.06em; color:var(--dim)}

/* ---- 6-4. Ritual ---- */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,4rem)}
.steps li:nth-child(2){transition-delay:.18s}
.steps li:nth-child(3){transition-delay:.36s}
.steps li{padding-top:1.5rem; border-top:1px solid var(--line)}
/* 番号は見出しではなくラベル。大きくすると手順ではなく数字を読む画面になる */
.steps__n{
  display:block;
  font-family:var(--font-en); font-size:.78rem;
  font-weight:500;
  line-height:1; letter-spacing:.22em;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
}
.steps__b{margin-top:1.1rem; font-size:.9rem; line-height:2.1; color:var(--title)}
.steps__e{margin-top:.9rem; font-family:var(--font-en); font-size:.72rem; color:var(--dim)}
/* 基本ルールより後に置く（前に置くと同じ強さのセレクタに上書きされて効かない） */
@media (max-width:760px){
  .steps{grid-template-columns:1fr; gap:2rem}
  .steps__b{margin-top:.9rem}
}

/* ---- 6-5. Story ---- */
.story{max-width:52rem}
.story__jp{font-size:clamp(.92rem,1.35vw,1.08rem); line-height:2.3; color:var(--title)}
.story__en{margin-top:2rem; font-family:var(--font-en); font-size:.78rem; line-height:1.9; color:var(--dim); transition-delay:.16s}
.kw{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem;
  margin-top:clamp(4rem,10vh,7rem); padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--font-en); font-size:.72rem; letter-spacing:.18em; color:var(--dim);
  transition-delay:.3s;
}


/* ---- 6-6. Archive — 紙面とスチルを並べた壁（参照: 4wide.jp の Showcase） ---- */
/* セクションの左右パディングを抜けて全幅に出す */
.wall{
  margin-inline:calc(var(--pad) * -1);
  display:flex; flex-direction:column; gap:clamp(1rem,2.5vw,2rem);
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.wall__row{
  display:flex; gap:clamp(1rem,2.5vw,2rem);
  width:max-content;
  /* とてもゆっくり流す */
  animation:drift 110s linear infinite;
}
.wall__row--b{animation-duration:150s; animation-direction:reverse}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.wall:hover .wall__row{animation-play-state:paused}

.wall__t{
  flex:0 0 auto;
  position:relative;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--ink) 8%, var(--paper));
  box-shadow:0 1px 2px color-mix(in oklab, var(--ink) 10%, transparent);
  overflow:hidden;
}
.wall__t img{width:100%; height:100%; object-fit:cover; display:block}
.wall__t--p{width:clamp(8.5rem,15vw,13rem); aspect-ratio:520/1206}
.wall__t--l{width:clamp(14rem,26vw,24rem); aspect-ratio:1200/750}



/* ---- 6-7. Contact ---- */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(2rem,6vw,5rem); align-items:start}
@media (max-width:820px){ .contact{grid-template-columns:1fr} }
.contact__lead .note{margin-top:1.25rem}

.form{display:flex; flex-direction:column; gap:clamp(.9rem,2.2vh,1.4rem)}
.form__row{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); gap:clamp(.9rem,2.2vw,1.4rem)}
.form__pot{position:absolute; left:-9999px}
.field{display:flex; flex-direction:column; gap:.45rem}
.field__l{font-family:var(--en); font-weight:500; font-size:.7rem; letter-spacing:.14em; color:var(--dim)}
.field__l i{font-style:normal; font-family:var(--ja); font-size:.66rem; letter-spacing:.08em;
  color:var(--accent); margin-left:.6em}
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; color:var(--title);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.5rem 0; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color var(--dur-s) var(--ease);
}
.field textarea{resize:vertical; min-height:6rem; line-height:1.9}
.field select{background:transparent}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--accent)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.btn{
  align-self:flex-start; margin-top:.6rem;
  font-family:var(--en); font-weight:600; font-size:.8rem; letter-spacing:.16em;
  color:var(--bg); background:var(--title);
  border:0; padding:.95rem 2.6rem; cursor:pointer;
  transition:background-color var(--dur-s) var(--ease);
}
.btn:hover{background:var(--accent)}

/* ============================================================
   7. フッター
   ============================================================ */
.foot{
  color:var(--text);
  font-weight:400;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:clamp(5rem,12vh,9rem) var(--pad) clamp(3rem,7vh,5rem);
  border-top:1px solid var(--line);
  text-align:center;
  background:var(--bg);
}
.foot__mark{width:clamp(140px,26vw,220px); color:var(--title); margin-bottom:.5rem}
.foot__name{font-family:var(--font-en); font-size:.8rem; letter-spacing:.34em; color:var(--title)}
.foot__name span{color:var(--dim)}
.foot__meta{font-family:var(--font-en); font-size:.7rem; letter-spacing:.16em; color:var(--dim)}
.foot__copy{margin-top:1.5rem; font-family:var(--font-en); font-size:.66rem; letter-spacing:.14em; color:var(--dim)}

/* ---- 送信完了ページ（thanks.html）。CSPでインラインstyleが禁止なのでここに置く ---- */
  .thanks{min-height:100svh; display:flex; flex-direction:column; justify-content:center;
    gap:clamp(1.4rem,4vh,2.4rem); padding:var(--gap) var(--pad); background:var(--bg); color:var(--text)}
  .thanks__mark{width:clamp(120px,20vw,180px); aspect-ratio:1405/303; background:currentColor;
    color:var(--title);
    -webkit-mask:url("assets/tttt-mark.svg") no-repeat center/contain;
    mask:url("assets/tttt-mark.svg") no-repeat center/contain}
  .thanks .h2{max-width:20ch}
  .back{align-self:flex-start; font-family:var(--en); font-weight:500; font-size:.8rem;
    letter-spacing:.14em; color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line);
    padding-bottom:.3rem; transition:color var(--dur-s) var(--ease)}
  .back:hover,.back:focus-visible{color:var(--accent)}
  .thanks__lede{max-width:38ch}

/* ============================================================
   8. prefers-reduced-motion — 必ず尊重する（CLAUDE.md §1-5）
   要素は「最終状態で即表示」にする。消えたままにしない。
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .rv{opacity:1; transform:none}
  /* アニメーションを切ると both が効かなくなり、素の状態＝完成形で出る */
  .ln__i,.hero__sub,.hud{animation:none}
  .hud__cue{animation:none; transform:scaleY(1)}
  .scene__snow,.scene__glow,.fac i,.lamp__head{animation:none}
  /* モンタージュは回さない。街角(.street)だけを出す */
  .shot img{transform:none}
  /* 壁は流さず、指でスクロールできる列にする */
  .wall{overflow-x:auto; scrollbar-width:none}
  .wall::-webkit-scrollbar{display:none}
  .wall__row{animation:none}
  .wall__t.is-dup{display:none}
}