/* ===========================================================
   滔々／TOU-TOU 漆工房（架空）— 塗りの層
   型: process(工程が主役) × pinned-sequence(sticky写真送り) × 実写マクロ × 明基調

   方針:
   ・写真は額装のように大きく静かに置く。UIは主張しない。
   ・工程パネルは黒漆のガラスパネル(半透明+ぼかし)で、写真を殺さず文字を立たせる。
   ・数字は等幅寄りのGroteskで、記録として読める密度を保つ。
   =========================================================== */

:root{
  --paper:#efe9dd;
  --paper-2:#e6ddcb;
  --paper-3:#ddd2ba;
  --ink:#161310;
  --ink-2:#5b5245;
  --ink-3:#8f8471;
  --shu:#9e3b2e;
  --shu-2:#c24a38;
  --gold:#b8945a;
  --line:rgba(22,19,16,.14);
  --line-2:rgba(239,233,221,.22);

  --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --grot:"Work Sans","Zen Kaku Gothic New",sans-serif;

  --wrap:1120px;
  --hd-h:64px;

  --ck-load-bg:#161310;
  --ck-load-fg:#efe9dd;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px}
.only-narrow{display:none}
.cu{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:500;
  background:rgba(239,233,221,.86); backdrop-filter:blur(10px) saturate(1.1);
}
.hd-in{
  max-width:var(--wrap); margin:0 auto; padding:0 40px;
  height:var(--hd-h); display:flex; align-items:center; justify-content:space-between;
}
.hd-mark{
  font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:.06em; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:baseline; gap:9px;
}
.hd-mark span{font-family:var(--grot); font-weight:500; font-size:11px; letter-spacing:.05em; color:var(--ink-3)}
.hd-nav{display:flex; gap:26px}
.hd-nav a{
  font-family:var(--grot); font-size:13px; letter-spacing:.02em; color:var(--ink-2);
  text-decoration:none; padding:4px 0; border-bottom:1px solid transparent;
}
.hd-nav a:hover, .hd-nav a:focus-visible{color:var(--shu); border-bottom-color:var(--shu)}
.hd-prog{height:2px; background:var(--line)}
.hd-prog span{display:block; height:100%; width:0%; background:var(--shu); transition:width .12s linear}

/* ---------- 1. hero ---------- */
.hero{
  position:relative; height:100svh; min-height:640px; overflow:hidden;
  background:var(--ink); color:var(--paper);
}
.hero-img{position:absolute; inset:-4% -2%; margin:0}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:32% 42%}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(12,10,8,.86) 0%, rgba(12,10,8,.42) 38%, rgba(12,10,8,.05) 62%),
    linear-gradient(100deg, rgba(12,10,8,.62) 0%, rgba(12,10,8,.06) 46%);
}
.hero-in{
  position:relative; z-index:2; height:100%; max-width:var(--wrap); margin:0 auto;
  padding:0 40px 108px; display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-kick{
  margin:0 0 18px; font-family:var(--grot); font-size:13px; font-weight:500;
  letter-spacing:.12em; color:var(--gold); text-transform:uppercase;
}
.hero-h{
  margin:0 0 22px; font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(34px,5.4vw,60px); line-height:1.42; letter-spacing:.01em;
}
.hero-lead{margin:0; max-width:46ch; font-size:15.5px; color:rgba(239,233,221,.86)}
.hero-br{display:none}

.hero-scroll{
  position:absolute; left:40px; bottom:34px; z-index:2;
  display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--paper);
  font-family:var(--grot); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.hero-scroll i{
  width:1px; height:30px; background:rgba(239,233,221,.5); position:relative; overflow:hidden;
}
.hero-scroll i::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold);
  animation:hero-drip 1.8s ease-in-out infinite;
}
@keyframes hero-drip{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} }

/* ---------- section shell ---------- */
.eyebrow{
  margin:0 0 12px; font-family:var(--grot); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; color:var(--shu); text-transform:uppercase;
}
h2{
  margin:0 0 16px; font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:clamp(26px,3.3vw,36px); line-height:1.5;
}
.lead{margin:0 0 0; font-size:15px; color:var(--ink-2); max-width:58ch}

/* ===========================================================
   2. 工程 — pinned sequence
   =========================================================== */
.proc{background:var(--paper); padding-top:calc(var(--hd-h) + 84px)}
.proc-head{margin-bottom:46px}
.proc-head .lead{margin-top:16px}

.proc-pin{position:relative; height:400vh}
.proc-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; background:var(--ink);
}

.proc-frames{position:absolute; inset:0}
.proc-frame{
  /* frame自体はopacityを持たない（可視/不可視のゲートのみ、JSがvisibilityで制御）。
     実際の溶暗は子の写真とテキストがそれぞれ独立のopacityで受け持つ（下記参照）。
     is-onはJS未実行/失敗時の初期表示（工程01のみ可視）としてのみ残す。 */
  position:absolute; inset:0; visibility:hidden;
}
.proc-frame.is-on{visibility:visible}

.proc-frame-photo{
  position:absolute; inset:0; margin:0; opacity:1; will-change:opacity;
  /* JSがスクロール位置から毎フレーム直接opacityを代入する（広い窓での連続クロスフェード）。
     CSS transitionで遅延させると、テキスト・レールが乗る同じ進捗曲線からズレるため付けない。 */
}
.proc-frame-photo img{width:100%; height:100%; object-fit:cover; will-change:transform}
.proc-frame-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(12,10,8,.82) 0%, rgba(12,10,8,.48) 34%, rgba(12,10,8,.08) 58%);
}

.proc-frame-text{
  position:relative; z-index:2; max-width:460px; color:var(--paper); opacity:1;
  margin:0 0 0 clamp(40px, 6vw, 96px); padding:32px 34px; will-change:transform, opacity;
  /* 写真より狭い窓で速く（ただし連続的に）入れ替える。写真と同じ広い窓にすると、
     境界付近で前後の段落が両方半透明で重なり読めなくなるため（実機検証で確認）。 */
}
.proc-num{
  margin:0 0 8px; font-family:var(--grot); font-weight:600; font-size:15px; color:var(--gold);
  letter-spacing:.04em;
}
.proc-num span{color:rgba(239,233,221,.5); font-weight:400; margin-left:3px}
.proc-frame-text h3{
  margin:0 0 10px; font-family:var(--serif); font-weight:600; font-size:clamp(28px,3vw,36px);
  color:#fff; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.proc-en{font-family:var(--grot); font-weight:500; font-size:12.5px; letter-spacing:.04em; color:rgba(239,233,221,.62)}
.proc-days{
  margin:0 0 16px; font-family:var(--grot); font-size:12.5px; letter-spacing:.03em;
  color:var(--gold); padding-bottom:14px; border-bottom:1px solid rgba(239,233,221,.2);
}
.proc-body{margin:0 0 16px; font-size:14.5px; line-height:1.95; color:rgba(239,233,221,.92)}
.proc-steps{
  list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:7px 10px;
}
.proc-steps li{
  font-family:var(--grot); font-size:11px; letter-spacing:.02em; color:rgba(239,233,221,.78);
  border:1px solid rgba(239,233,221,.28); border-radius:999px; padding:4px 11px;
}
.proc-quote{
  margin:0; font-family:var(--serif); font-size:15.5px; font-style:italic; color:#fff;
  padding-left:16px; border-left:2px solid var(--shu-2);
}
.proc-quote span{display:block; margin-top:6px; font-family:var(--grot); font-style:normal; font-size:11px; color:rgba(239,233,221,.55)}

.proc-rail{
  position:absolute; right:clamp(20px,3.4vw,52px); top:50%; transform:translateY(-50%); z-index:3;
  display:flex; align-items:center; gap:16px;
}
.proc-rail-line{position:relative; width:1px; height:150px; background:rgba(239,233,221,.22)}
.proc-rail-fill{
  position:absolute; left:0; top:0; width:100%; height:100%; background:var(--gold);
  transform:scaleY(var(--lp, 0)); transform-origin:top; display:block;
}
/* 現在位置マーカー：--lp(sticky区間の連続進捗)をtop%で直接反映。写真・レール塗りと同一の値。 */
.proc-rail-pos{
  position:absolute; left:50%; top:calc(var(--lp, 0) * 100%); width:9px; height:9px;
  margin-left:-4.5px; margin-top:-4.5px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px rgba(184,148,90,.38), 0 0 10px 2px rgba(184,148,90,.55);
  pointer-events:none;
}
.proc-rail-dots{list-style:none; margin:0; padding:0; position:absolute; top:0; left:-9px; height:150px; display:flex; flex-direction:column; justify-content:space-between}
.proc-rail-dots li{
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--grot); font-size:9px; position:relative;
  /* --w(0..1)はframeのopacityと同じ関数から算出（同一の進捗曲線）。段階スナップではなく連続補間。
     color-mix()未対応ブラウザ向けに、先に静的な既定色を宣言しておく（無効な宣言は無視され
     この既定値が残る＝レールが消えたり崩れたりせず、非アニメーションの静的表示に留まる）。 */
  background:var(--ink); border:1px solid rgba(239,233,221,.3); color:rgba(239,233,221,.55);
  background:color-mix(in srgb, var(--gold) calc(var(--w, 0) * 100%), var(--ink));
  border-color:color-mix(in srgb, var(--gold) calc(var(--w, 0) * 100%), rgba(239,233,221,.3));
  color:color-mix(in srgb, var(--ink) calc(var(--w, 0) * 100%), rgba(239,233,221,.55));
}
.proc-rail-dots li b{
  position:absolute; right:26px; top:50%; transform:translateY(-50%);
  font-family:var(--grot); font-weight:500; font-size:11px; letter-spacing:.02em;
  white-space:nowrap; opacity:var(--w, 0);
  color:rgba(239,233,221,.7);
  color:color-mix(in srgb, #fff calc(var(--w, 0) * 100%), rgba(239,233,221,.7));
}

/* ===========================================================
   3. 素材（漆が乾く条件）
   =========================================================== */
.mat{background:var(--paper-2); padding:104px 0 96px}
.mat .lead{margin-bottom:44px}

.mat-diagram{
  display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-bottom:26px;
  background:var(--paper); border:1px solid var(--line); padding:36px 40px;
}
.mat-gauge{display:flex; flex-direction:column; gap:14px}
.mat-label{
  margin:0; font-family:var(--grot); font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ink);
}
.mat-label span{font-weight:400; color:var(--ink-3); margin-left:6px; text-transform:uppercase; font-size:10.5px}
.mat-bar{position:relative; height:8px; border-radius:999px; background:var(--paper-3); overflow:hidden}
.mat-band{
  position:absolute; left:70%; width:15%; top:0; bottom:0; background:var(--shu);
  border-radius:999px;
}
.mat-bar-temp{background:linear-gradient(90deg, #c9d8d2, var(--paper-3) 45%, var(--gold) 100%)}
.mat-marker{
  position:absolute; left:25%; top:50%; width:14px; height:14px; margin-left:-7px; margin-top:-7px;
  border-radius:50%; background:var(--ink); border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--ink);
}
.mat-nums{margin:0; font-family:var(--grot); font-weight:600; font-size:27px; color:var(--ink)}
.mat-nums span{font-size:14px; font-weight:400; color:var(--ink-3); margin-left:3px}

.mat-note{margin:0 0 46px; font-size:13.5px; color:var(--ink-2); max-width:60ch}

.mat-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.mat-stats div{background:var(--paper-2); padding:22px 6px; text-align:center}
.mat-stats b{display:block; font-family:var(--grot); font-weight:600; font-size:34px; color:var(--shu)}
.mat-stats span{font-size:12px; color:var(--ink-2); letter-spacing:.02em}

/* ===========================================================
   4. 色（朱と黒）
   =========================================================== */
.col{background:var(--paper); padding:104px 0 100px}
.col .wrap{margin-bottom:40px}
.col-grid{max-width:var(--wrap); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1.28fr 1fr; gap:28px; align-items:stretch}
.col-card{margin:0; display:flex; flex-direction:column; background:var(--ink)}
.col-img{margin:0; overflow:hidden; aspect-ratio:4/3}
.col-grid .col-card:nth-child(2) .col-img{aspect-ratio:3/4}
.col-img img{width:100%; height:100%; object-fit:cover}
.col-card figcaption{padding:26px 30px 30px}
.col-name{
  margin:0 0 10px; font-family:var(--serif); font-weight:600; font-size:30px; color:#fff;
  display:flex; align-items:baseline; gap:12px;
}
.col-name span{font-family:var(--grot); font-weight:500; font-size:12px; color:var(--gold); letter-spacing:.02em}
.col-desc{margin:0; font-size:13.8px; line-height:1.95; color:rgba(239,233,221,.82); max-width:44ch}

/* ===========================================================
   5. 一椀の履歴書
   =========================================================== */
.hist{background:var(--paper-2); padding:104px 0 100px}
.hist .lead{margin-bottom:40px}
.hist-photo{
  margin:0 0 48px; max-width:340px; margin-left:auto; margin-right:auto;
  border:8px solid var(--paper); box-shadow:0 18px 40px -18px rgba(22,19,16,.4);
}
.hist-photo img{width:100%; aspect-ratio:3/4; object-fit:cover}

.hist-list{
  list-style:none; margin:0; padding:0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; column-gap:40px;
}
.hist-list li{
  display:grid; grid-template-columns:34px 1fr auto; align-items:baseline; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.hist-n{margin:0; font-family:var(--grot); font-weight:600; font-size:12.5px; color:var(--ink-3)}
.hist-t{margin:0; font-size:14.5px; color:var(--ink)}
.hist-d{margin:0; font-family:var(--grot); font-size:12.5px; color:var(--shu); font-variant-numeric:tabular-nums; white-space:nowrap}
.hist-total{grid-column:1 / -1; border-bottom:none; border-top:2px solid var(--ink); margin-top:6px; padding-top:16px}
.hist-total .hist-n, .hist-total .hist-t{font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink)}
.hist-total .hist-d{font-size:16px; font-weight:600}

/* ===========================================================
   6. フッター
   =========================================================== */
.ft{background:var(--ink); color:rgba(239,233,221,.86); padding:56px 0 40px}
.ft-mark{
  margin:0 0 26px; font-family:var(--serif); font-weight:600; font-size:22px; color:#fff;
  display:flex; align-items:baseline; gap:10px;
}
.ft-mark span{font-family:var(--grot); font-weight:400; font-size:12px; color:var(--gold)}
.ft-t{width:100%; max-width:640px; border-collapse:collapse; font-size:13.5px; margin-bottom:30px}
.ft-t th{
  width:96px; text-align:left; font-family:var(--grot); font-size:11px; font-weight:500;
  color:rgba(239,233,221,.5); padding:8px 12px 8px 0; border-bottom:1px solid rgba(239,233,221,.14);
  vertical-align:top; white-space:nowrap;
}
.ft-t td{padding:8px 0; border-bottom:1px solid rgba(239,233,221,.14)}
.ft-disc{
  margin:0 0 10px; font-size:11.5px; line-height:1.9; color:rgba(239,233,221,.52);
  border-top:1px solid rgba(239,233,221,.14); padding-top:16px; max-width:78ch;
}
.ft-disc b{color:rgba(239,233,221,.85)}
.ft-c{margin:0; font-size:11px; color:rgba(239,233,221,.34)}

/* ===========================================================
   背の低いviewport向けの引き締め（sticky継続域）
   縦積みフォールバックに落ちない中間の高さ（例 701–820px）でも、
   工程パネルの文字量が1画面に収まるよう font/余白/pin区間長を縮める。
   =========================================================== */
@media (max-height:820px){
  .proc-frame-text{padding:22px 26px; max-width:400px}
  .proc-frame-text h3{font-size:clamp(22px,3vw,28px); margin-bottom:8px}
  .proc-days{margin-bottom:12px; padding-bottom:10px}
  .proc-body{margin-bottom:12px; font-size:13.5px; line-height:1.8}
  .proc-steps{margin-bottom:12px}
  .proc-quote{font-size:14px}
  .proc-rail-line, .proc-rail-dots{height:112px}
  .proc-pin{height:320vh}
}

/* ===========================================================
   coarse pointer / reduced-motion / 低い高さ のフォールバック
   pinned sequence を「順に並ぶ縦積み」へ（工程=写真＋テキストのカードが縦に並ぶ）
   短い画面（例 高さ600–700px）では sticky のまま縮めても収まらないため、
   sticky 自体を解いて縦積みへ落とす。coarse pointer と併用。
   =========================================================== */
@media (pointer:coarse), (prefers-reduced-motion:reduce), (max-height:700px){
  .proc-pin{height:auto}
  .proc-stage{position:static; height:auto; display:block; background:none}
  .proc-frames{position:static}
  .proc-frame{
    position:static; opacity:1 !important; visibility:visible !important;
    display:block; margin-bottom:14px; background:var(--ink); will-change:auto;
  }
  .proc-frame-photo{
    position:relative; aspect-ratio:4/3; opacity:1 !important; will-change:auto;
  }
  /* JSがsticky時にopacity/visibilityを直接書き込むため、この幅(700px)を跨いでリサイズされた
     場合に古いinline値が残っていても、ここで強制的に全表示へ戻す（JS側もmqShortの変化を
     監視して自らinline styleを消すが、CSS側でも二重に担保する）。 */
  .proc-frame-photo img{transform:none !important}
  .proc-frame-text{
    max-width:none; margin:0; padding:26px clamp(20px,5vw,40px) 30px;
    opacity:1 !important; visibility:visible !important; transform:none !important; will-change:auto;
  }
  .proc-rail{display:none}
}

/* ---------- reduced-motion: 全モーション静止 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .hero-scroll i::after{animation:none; top:0}
}

/* ===========================================================
   レスポンシブ（1280pxを基準に、それ以下でも破綻しない程度に）
   =========================================================== */
@media (max-width:980px){
  .hd-nav{gap:16px}
  .hero-h{font-size:clamp(30px,7vw,44px)}
  .hero-br{display:block}
  .mat-diagram{grid-template-columns:1fr; gap:26px; padding:26px}
  .mat-stats{grid-template-columns:1fr}
  .col-grid{grid-template-columns:1fr}
  .col-grid .col-card:nth-child(2) .col-img{aspect-ratio:4/3}
  .hist-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .only-narrow{display:inline}
  .wrap, .hd-in, .col-grid{padding-left:22px; padding-right:22px}
  .hero-in{padding:0 22px 92px}
  .hero-scroll{left:22px}
  .hd-nav a:nth-child(3), .hd-nav a:nth-child(4){display:none}
  .proc-frame-text{padding:22px 20px 26px}
}