@charset "utf-8";
/* ============================================================================
   制作例22 CINDERBEAN ROASTERY  site.css   2026-08-30 ブラッシュアップ(ゲイツ)

   ★前の版の実測(2026-08-29)
     節 5(制作例21本の中央値 9)/ SVGの図 0(中央値 6)/ 動きの種類 2(中央値 11)/
     無限ループ 2(中央値 8)/ CSS 6,470字(中央値 27,708字)。写真だけは10枚で足りていた。
     → 足したのは「節・図・動き」。写真は1枚も増やしていない。

   ★直した土台の欠陥(実測)
   1. `.reveal{opacity:0}` が定義されていたが、**HTML に .reveal が 1 つも付いていなかった**
      = 仕組みだけ在って出現演出は 0。しかも opacity は要素の箱を 0 にして品質検査を盲目にする。
      → 覆い = clip-path(.wipe)/ 持ち上げ = translate(.rise)へ作り直し、全節へ実際に配線した。
   2. 見出しが**作者の宣言していない位置で折り返していた**。
      実測: 「一粒ごとに/火の当て方を変える」(2行宣言)が幅1280で3行、
            「味を足す火ではなく/素材をひらく火」(2行宣言)が5行。
      真因は字ではなく**器**。半幅の柱に立つ見出しを画面幅(vw)に紐づけていた。
      → 見出しは全部「柱の幅」(cqw)に紐づけた。上限(px)を据えてあるので広い画面の見た目は不変。
      → 共有 shared-quality.css が後読みで `!important` を持つため、`#main` を足して詳細度で上回る。
      → 是正後、幅 1920/1440/1280/1024/820/768/520/390/320 の 9 通りで
        「宣言した行数 ≠ 実測の行数」は **0 件**(全見出し・全幅を数えた)。
   3. 画面の外に出ても動きが回り続けていた(炎のゆらぎ・写真の呼吸)。
      → 節ごとに .is-off を付け外しし、`.is-off *` の 1 本でまとめて止める。

   ★出現演出の規則(社内の実測でこうなっている。破ると静かに壊れる)
   - `opacity` と `transform:scale(0)` は使わない。どちらも要素の箱を 0 にして検査を潰す。
   - 隠す指定は全部 `:where(html.js)` の下(詳細度 0)。JS が落ちたら何も隠れない。
   - `clip-path` を持つ要素は IntersectionObserver から永久に見えない。
     だから site.js は scroll + requestAnimationFrame で発火させる。
   - ★ここで言う「使わない」は**出現演出**の話。SVG の中の飾りのループ(輪が広がって消える等)で
     `opacity` を使うのは別件で、制作例21 で採用済み。要素の箱は 0 にならない。

   ★破線を動かす図で `vector-effect:non-scaling-stroke` を使ってはいけない(2026-08-30 実測)
     この指定を付けると stroke-dasharray が**画面のピクセル**で解釈され、`pathLength` による
     正規化が効かなくなる。実測では距離の帯に破線が 2 本同時に出た(周期が器の幅とずれるため)。
     → 破線を動かす線(org-base / org-flow / bw-steam / nt-hand)からは外し、器を等倍で拡大する
       ★この行に `.org-*` と書くと、その直後の / と * でコメントがその場で閉じる。
         2026-08-30 に実際に閉じてしまい、次の *{box-sizing} が黙って死んでいた。
       (`preserveAspectRatio` を none にせず meet にする)ことで太さを保つ。
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}

.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);
  border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}
.demo a{text-decoration:underline;margin-left:10px}
.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}

/* ============================================================================
   色。暗い地の上の文字はすべて実測でコントラストを取ってある。
   --soft 8.5:1 / --amber 6.9:1 / --amber-lite 11.2:1 / --ember 5.4:1(対 --bg)
   ★--soft は当初 9.1 と書いていたが、別人格の測り直しで 8.5 だった(私の計算違い)。床は超えている。
   --cream-soft 6.4:1(対 --cream)。図の線も 3:1 を下回らせない。
   ========================================================================== */
:root{
  --bg:#110e0b;          /* 炭の地 */
  --panel:#191310;       /* 一段明るい地(節が続けて同じ色にならないように挟む) */
  --ink:#f0e6d5;
  --soft:#bda98c;        /* 暗い地の弱い文字 */
  --cream:#e9dfcd;       /* 明るい地 */
  --cream-ink:#17100a;
  --cream-soft:#5c4a37;  /* 明るい地の弱い文字 */
  --amber:#d78935;
  --amber-lite:#e8c07a;
  --ember:#c96f45;
  --rule:#f0e6d526;
  --rule-cream:#17100a26;
  --body:"IBM Plex Mono",monospace;
  --serif:"Cormorant Garamond",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0}
.lead{font-size:15px;line-height:2;color:var(--soft);max-width:40em;margin:26px 0 0}

/* ============================================================================
   出現の演出
   ========================================================================== */
:where(html.js) .wipe{clip-path:inset(0 0 100% 0)}
:where(html.js) .rise{transform:translateY(clamp(14px,2.2vw,28px))}
.wipe{transition:clip-path 1s var(--ease)}
.rise{transition:transform .75s var(--ease)}
.wipe.seen{clip-path:inset(-220px)}
.rise.seen{transform:translateY(0)}

/* 並んでいるものは少しずつ遅らせる(箱は動かさない) */
.bean-grid .wipe:nth-child(2),.gallery .wipe:nth-child(2),
.rc-legend .rise:nth-child(2),.org-list .rise:nth-child(2),
.tm-legend .rise:nth-child(2),.brew-steps .rise:nth-child(2),
.wk-grid .rise:nth-child(2),.num-grid .rise:nth-child(2){transition-delay:.07s}
.bean-grid .wipe:nth-child(3),.gallery .wipe:nth-child(3),
.rc-legend .rise:nth-child(3),.org-list .rise:nth-child(3),
.tm-legend .rise:nth-child(3),.brew-steps .rise:nth-child(3),
.wk-grid .rise:nth-child(3),.num-grid .rise:nth-child(3){transition-delay:.14s}
.bean-grid .wipe:nth-child(4),.gallery .wipe:nth-child(4),
.org-list .rise:nth-child(4),.tm-legend .rise:nth-child(4),
.brew-steps .rise:nth-child(4),.wk-grid .rise:nth-child(4),
.num-grid .rise:nth-child(4){transition-delay:.21s}
.brew-steps .rise:nth-child(5),.wk-grid .rise:nth-child(5){transition-delay:.28s}
.wk-grid .rise:nth-child(6){transition-delay:.35s}
.wk-grid .rise:nth-child(7){transition-delay:.42s}

/* ============================================================================
   1. 火(ヒーロー)
   ========================================================================== */
/* ★固定ヘッダーには地が無かった。暗い写真の上では読めるが、明るい節(焙煎室・いれ方)へ
   スクロールすると、生成り色のロゴが生成り色の地に重なって読めなくなる。
   実測(10項目プローブ bleed)= 帯を通して本文が濃さ 223/255 で透けていた(床 12)。
   上端に薄い暗幕を敷いて、どの節の上でも読めるようにする。幕は当たり判定を持たない。 */
.ember-head{position:fixed;z-index:30;inset:24px 28px auto;display:flex}
.ember-head:before{content:"";position:absolute;left:-28px;right:-28px;top:-56px;bottom:-58px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,#110e0bfc 0%,#110e0bfc 64%,#110e0b00 100%)}
.ember-head>a{font:600 27px var(--serif);letter-spacing:.15em}
.ember-head nav{margin-left:auto;display:flex;gap:25px;font-size:12px}
.ember-head nav a{padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.ember-head nav a:hover,.ember-head nav a:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}

/* ★min-height を素の 700px にすると、横向きのスマホ(高さ390px)で写真が画面の1.8倍の高さになり、
   パノラマ写真の半分近くを捨てていた(実測 46.4%)。画面より高くしない。 */
.fire-hero{height:100svh;min-height:min(700px,100svh);position:relative;overflow:hidden;contain:paint;max-width:100vw}
.fire-hero>img{filter:brightness(.45) sepia(.25);animation:breath 8s ease-in-out infinite}
@keyframes breath{50%{transform:scale(1.04);filter:brightness(.6) sepia(.4)}}
.fire-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,transparent,#080604cc)}
.flicker{position:absolute;z-index:2;inset:0;overflow:hidden;will-change:opacity;
  background:radial-gradient(circle at 55% 70%,#e2732228,transparent 35%);
  animation:flicker .22s infinite alternate}
@keyframes flicker{from{opacity:.32}to{opacity:.62}}

/* 火の粉。焙煎の火から立ちのぼる = 内容がループにふさわしい所。 */
.sparks{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none}
.sparks .sp{fill:#ffc470;transform-box:fill-box;transform-origin:50% 50%}
.spark-g .sp{animation:spRiseA 7.5s linear infinite}
.spark-g .sp2{animation:spRiseB 9.2s linear infinite;animation-delay:-3.1s}
.spark-g .sp3{animation:spRiseA 6.4s linear infinite;animation-delay:-1.8s}
.spark-g .sp4{animation:spRiseB 8.6s linear infinite;animation-delay:-5.2s}
.spark-g .sp5{animation:spRiseA 8.1s linear infinite;animation-delay:-2.6s}
.spark-g .sp6{animation:spRiseB 10s linear infinite;animation-delay:-6.4s}
@keyframes spRiseA{
  0%{transform:translate(0,0) scale(.3)}
  14%{transform:translate(6px,-80px) scale(1)}
  60%{transform:translate(-14px,-330px) scale(.8)}
  100%{transform:translate(18px,-580px) scale(.16)}
}
@keyframes spRiseB{
  0%{transform:translate(0,0) scale(.3)}
  14%{transform:translate(-8px,-74px) scale(1)}
  60%{transform:translate(16px,-320px) scale(.75)}
  100%{transform:translate(-22px,-570px) scale(.16)}
}

.crest{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:374px;max-width:80vw;height:200px;border:1px solid var(--amber);
  display:grid;place-items:center;text-align:center}
.crest:before,.crest:after{content:"";position:absolute;width:70px;height:70px;
  border:1px solid var(--amber);transform:rotate(45deg)}
.crest:before{left:-35px}
.crest:after{right:-35px}
/* ★C2(別人格レビュー): 店名が紋章の枠から飛び出していた。
   実測 = 幅720以下で 字幅260.8px vs 枠260px(+2.8)、幅320で 字幅260.8 vs 枠248(+14.8)。
   見出しは cqw へ紐づけたのに、ここだけ px 2 つ(枠260 と 字38)で持たれていた。
   見出しの折り返し検査は h1/h2/h3 しか見ないので、<b> のこの字は機械が一生見つけられない。 */
.crest{container-type:inline-size}
.crest b{font:600 min(52px,13.7cqw)/.9 var(--serif);letter-spacing:.06em}
.crest i{font:12px var(--body)}
.crest span,.crest small{position:absolute;font-size:12px}
.crest span{top:8px}
.crest small{bottom:8px}
.fire-hero>p{position:absolute;z-index:3;left:50%;bottom:8vh;transform:translateX(-50%);font-size:12px}
.map{position:absolute;z-index:4;right:24px;bottom:24px;width:60px;aspect-ratio:1;
  border:1px solid;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:12px;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.map:hover,.map:focus-visible{background:var(--amber);color:#160f0a}

/* ============================================================================
   2. ロット
   ========================================================================== */
.bean-cast{padding:clamp(76px,13vh,150px) 4vw;background:var(--bg)}
/* ★他の節は中身を 1180px で中央に寄せているのに、この 2 節だけ画面幅いっぱいに広がっていた。
   実測の左端(px) 幅1280: 豆51 / 他51 / 来店64  → 幅1920: 豆77 / 他370 / 来店96。
   広い画面ほど開き、1920 で 293px ずれていた。揃える。 */
.bean-cast header{container-type:inline-size;display:block;max-width:1180px;margin:0 auto}
.bean-cast h1{font:600 min(96px,15.6cqw)/1.25 var(--serif);margin:.28em 0 0}
.bean-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  max-width:1180px;margin:clamp(38px,5vw,70px) auto 0}
.bean-grid article{aspect-ratio:1;position:relative;overflow:hidden;container-type:inline-size}
.bean-grid img{filter:brightness(.55);transition:transform .8s var(--ease),filter .8s var(--ease)}
.bean-grid article:hover img,.bean-grid article:focus-within img{transform:scale(1.08);filter:brightness(.32)}
.bean-grid article:after{content:'';position:absolute;inset:auto 0 0;height:76%;
  background:linear-gradient(to bottom,#0d0b0900 0%,#0d0b0980 22%,#0d0b09f2 100%);pointer-events:none}
.bean-grid article>div{position:absolute;inset:auto clamp(8px,4.6cqw,15px) clamp(8px,4.6cqw,15px);z-index:2;font-size:12px}
.bean-grid h2{font:600 clamp(14px,7.7cqw,25px)/1.2 var(--serif);margin:.2em 0}
/* ★margin:0 にすると h2 との隙間が 5px になり、隙間の床(6px)を割る(2026-08-30 実測で
   spacing critical 20 件)。前の版はブラウザ既定の 1em に頼っていた。明示的に置き直す。 */
.bean-grid p{font-size:12px;line-height:1.4;margin:8px 0 0}
.bean-grid span{color:var(--soft);letter-spacing:.1em}
.bean-grid em{display:block;margin-top:9px;padding-top:9px;border-top:1px solid #f0e6d533;
  font-style:normal;font-size:12px;letter-spacing:.02em;color:var(--amber-lite);
  transform:translateY(4px);transition:transform .5s var(--ease)}
.bean-grid article:hover em,.bean-grid article:focus-within em{transform:translateY(0)}
.bean-tie{max-width:1180px;margin:16px auto 0;border:1px solid var(--amber);padding:16px 18px;color:var(--amber);
  font-size:13px;letter-spacing:.03em;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.bean-tie a{text-decoration:underline;text-underline-offset:4px}

/* ============================================================================
   3. 焙煎の曲線
   ========================================================================== */
.roastcurve{padding:clamp(76px,12vh,140px) 4vw;background:var(--panel);border-top:1px solid var(--rule)}
.roastcurve header{container-type:inline-size;max-width:1180px;margin:0 auto}
.roastcurve h2{font:600 min(88px,13.4cqw)/1.25 var(--serif);margin:.3em 0 0}
.rc-chart{max-width:1180px;margin:clamp(34px,4.6vw,60px) auto 0;padding:clamp(10px,1.6vw,22px);
  border:1px solid var(--rule);background:linear-gradient(160deg,#1d1511,#0e0b09)}
/* ★W6: 曲線の図に目盛りの数字が 1 つも無く、「実際の記録です」と言いながら値が読めなかった。
   社内の決まりどおり、図は SVG のまま・数字は HTML 側に置く。SVG は器と比が同じなので、
   目盛りは百分率でぴったり合う(縦 220/180/140/100度 = 10.7/33.2/55.6/78.1%、
   横 0/3/6/9/12分 = 9.6/28.3/47.1/65.8/84.6%)。 */
.rc-plot{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px}
.rc-plot svg{grid-column:2;grid-row:1;display:block;width:100%;height:auto;aspect-ratio:1000/560}
.rc-y{grid-column:1;grid-row:1;position:relative;width:2.7em}
.rc-x{grid-column:2;grid-row:2;position:relative;height:1.6em;margin-top:4px}
.rc-y span,.rc-x span{position:absolute;font-size:12px;letter-spacing:.02em;color:var(--soft);font-variant-numeric:tabular-nums}
.rc-y span{right:0;transform:translateY(-50%)}
.rc-x span{top:0;transform:translateX(-50%)}
.rc-y .y1{top:10.7%}
.rc-y .y2{top:33.2%}
.rc-y .y3{top:55.6%}
.rc-y .y4{top:78.1%}
.rc-x .x1{left:9.6%}
.rc-x .x2{left:28.3%}
.rc-x .x3{left:47.1%}
.rc-x .x4{left:65.8%}
.rc-x .x5{left:84.6%}
.rc-grid path{fill:none;stroke:#f0e6d51f;stroke-width:1;vector-effect:non-scaling-stroke}
.rc-grid .rc-vert{stroke:#f0e6d514}
.rc-grid .rc-axis{stroke:#f0e6d54d;stroke-width:1.4;vector-effect:non-scaling-stroke}
/* 196度 = 1ハゼの線。3本ともここではじける、を 1 本の線で言う。 */
.rc-grid .rc-guide{stroke:#e8c07a5c;stroke-width:1.2;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.rc-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* ★W2: 浅煎りと中煎りの色の差は 1.63:1 しか無く、どちらも実線だった。
   白と橙をどう選んでもこの 2 本の差は 2.79:1 が上限で、色だけでは 3:1 に届かない。
   だから形を分ける = 浅煎り実線 / 中煎り点線 / 深煎り破線。 */
.rc-light{stroke:var(--amber-lite)}
.rc-medium{stroke:var(--amber);stroke-dasharray:2 9}
.rc-dark{stroke:var(--ember);stroke-dasharray:12 8}
.rc-end{stroke:#0e0b09;stroke-width:2}
.rc-e-light{fill:var(--amber-lite)}
.rc-e-medium{fill:var(--amber)}
.rc-e-dark{fill:var(--ember)}
/* 曲線を走る火の粉。焙煎は「時間が進む」ことそのものなのでループがふさわしい。
   ★pathLength=1000 で正規化しているので non-scaling-stroke は付けない(付けると破線が
     画面ピクセル基準になり、正規化が壊れる)。 */
.rc-run{fill:none;stroke:#ffe9c6;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:24 976;stroke-dashoffset:1000}
.rc-chart.seen .rc-run{animation:rcRun 7s linear infinite}
@keyframes rcRun{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
/* 1ハゼ。豆がはじけた瞬間なので、輪が広がって消える。浅→中→深の順に鳴る。 */
.rc-dot{fill:#fff3e0}
.rc-ping{fill:none;stroke:#ffd9a0;stroke-width:2;transform-box:fill-box;transform-origin:50% 50%}
.rc-chart.seen .rc-ping{animation:rcPing 3.6s cubic-bezier(.22,.61,.31,1) infinite}
.rc-chart.seen .rc-c2{animation-delay:.5s}
.rc-chart.seen .rc-c3{animation-delay:1s}
@keyframes rcPing{
  0%{transform:scale(1);opacity:.85}
  70%{opacity:0}
  100%{transform:scale(3);opacity:0}
}
.rc-axis-note{max-width:1180px;margin:16px auto 0;font-size:12.5px;line-height:1.9;color:var(--soft)}
.rc-legend{list-style:none;margin:clamp(30px,4vw,52px) auto 0;padding:0;max-width:1180px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.rc-legend li{border-top:1px solid var(--rule);padding:20px 0 0;transition:border-color .4s var(--ease)}
.rc-legend li:hover{border-top-color:var(--amber)}
.rc-swatch{display:block;width:56px;height:0;border-top-width:4px;border-top-style:solid;border-radius:2px}
.rc-s-light{border-top-color:var(--amber-lite)}
.rc-s-medium{border-top-color:var(--amber);border-top-style:dotted}
.rc-s-dark{border-top-color:var(--ember);border-top-style:dashed}
.rc-legend b{display:block;margin-top:16px;font-size:14px;letter-spacing:.08em}
.rc-legend em{display:block;margin-top:8px;font-style:normal;font-size:12.5px;line-height:1.7;color:var(--amber)}
.rc-legend li>span:last-child{display:block;margin-top:12px;font-size:13px;line-height:1.95;color:var(--soft)}

/* ============================================================================
   4. 焙煎室
   ========================================================================== */
.roaster{display:grid;grid-template-columns:1fr 1.05fr;background:var(--cream);color:var(--cream-ink)}
/* ★写真は 1024×1536(縦長)。器の比が離れるほど写真を捨てる。
   実測(10項目プローブ crop、床40%)= 幅1920 で 41.6%、1列に落ちたときは 61% 捨てていた。
   広い画面では上限を上げ、1列のときは正方形にして、どの幅でも 40% を割らせない。 */
.roaster figure{height:clamp(460px,52vw,900px);margin:0}
.roaster>div{padding:clamp(34px,5vw,86px);align-self:center;container-type:inline-size}
.roaster .eyebrow{color:#835518}
.roaster h2{font:600 min(76px,10.4cqw)/1.25 var(--serif);margin:.3em 0 0}
.roaster p:not(.eyebrow){line-height:2;font-size:15px;color:var(--cream-soft);margin:26px 0 0;max-width:34em}
.roaster dl{display:grid;grid-template-columns:1fr 1fr;margin:36px 0 0;gap:10px}
.roaster dt{font-size:12px;letter-spacing:.12em;color:var(--cream-soft)}
.roaster dd{font:600 26px var(--serif);margin:8px 0 0}

/* ============================================================================
   5. 産地と距離
   ★帯は等倍で拡大する(preserveAspectRatio は meet)。none にして
     non-scaling-stroke で太さを保つ作りにすると、破線の周期が器の幅とずれて
     動く点が 2 個に見える(2026-08-30 実測)。
   ========================================================================== */
.origin{padding:clamp(76px,12vh,140px) 4vw;background:var(--bg);border-top:1px solid var(--rule)}
.origin header{container-type:inline-size;max-width:1180px;margin:0 auto}
.origin h2{font:600 min(88px,11.7cqw)/1.25 var(--serif);margin:.3em 0 0}
.org-list{list-style:none;margin:clamp(36px,5vw,64px) auto 0;padding:0;max-width:1180px}
.org-list li{border-top:1px solid var(--rule);padding:22px 0 26px}
.org-list b{display:block;font-size:15px;letter-spacing:.06em}
.org-meta{display:block;margin-top:8px;font-size:13px;color:var(--soft)}
.org-bar{display:block;width:100%;height:auto;aspect-ratio:1000/24;margin-top:14px}
.org-base{fill:none;stroke:#f0e6d52e;stroke-width:2.4;stroke-linecap:round}
/* 船が進んでいる = 内容がループにふさわしい。線の長さは距離の比そのもの。 */
.org-flow{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:70 930;stroke-dashoffset:1000}
.org-list li.seen .org-flow{animation:orgFlow 6s linear infinite}
.org-list li:nth-child(2).seen .org-flow{animation-duration:5.4s}
.org-list li:nth-child(3).seen .org-flow{animation-duration:4.8s}
.org-list li:nth-child(4).seen .org-flow{animation-duration:3.9s}
@keyframes orgFlow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.org-note{max-width:1180px;margin:26px auto 0;font-size:13px;line-height:1.95;color:var(--soft)}

/* ============================================================================
   6. 味の地図
   ========================================================================== */
.taste{padding:clamp(76px,12vh,140px) 4vw;background:var(--panel);border-top:1px solid var(--rule)}
.taste header{container-type:inline-size;max-width:1180px;margin:0 auto}
.taste h2{font:600 min(88px,13.4cqw)/1.25 var(--serif);margin:.3em 0 0}
.tmap{max-width:840px;margin:clamp(34px,4.6vw,58px) auto 0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;
  align-items:center;justify-items:center;gap:10px 12px}
.tmap svg{grid-column:2;grid-row:2;display:block;width:100%;height:auto;aspect-ratio:720/560;
  border:1px solid var(--rule);background:linear-gradient(160deg,#1d1511,#0e0b09)}
.tm-t,.tm-b,.tm-l,.tm-r{font-size:12px;letter-spacing:.1em;color:var(--amber)}
.tm-t{grid-column:2;grid-row:1}
.tm-b{grid-column:2;grid-row:3}
.tm-l{grid-column:1;grid-row:2}
.tm-r{grid-column:3;grid-row:2}
.tm-grid path{fill:none;stroke:#f0e6d514;stroke-width:1;vector-effect:non-scaling-stroke}
.tm-axis path{fill:none;stroke:#f0e6d54d;stroke-width:1.4;vector-effect:non-scaling-stroke}
.tm-p{fill:var(--amber-lite);stroke:#0e0b09;stroke-width:2}
.tm-star{fill:#fff3e0}
.tm-ring{fill:none;stroke:var(--amber);stroke-width:2;transform-box:fill-box;transform-origin:50% 50%}
.tmap.seen .tm-ring{animation:tmPing 4.2s cubic-bezier(.22,.61,.31,1) infinite}
.tmap.seen .tm-ring2{animation-delay:2.1s}
@keyframes tmPing{
  0%{transform:scale(1);opacity:.8}
  72%{opacity:0}
  100%{transform:scale(3.6);opacity:0}
}
.tm-legend{list-style:none;margin:clamp(30px,4vw,50px) auto 0;padding:0;max-width:1180px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.tm-legend li{border-top:1px solid var(--rule);padding:20px 0 0;display:grid;
  grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:start}
.tm-k{width:18px;height:18px;background:var(--amber-lite);display:block;margin-top:2px}
.tm-k-circle{border-radius:50%}
.tm-k-square{border-radius:2px}
.tm-k-diamond{transform:rotate(45deg) scale(.82);background:#fff3e0}
.tm-k-triangle{background:none;width:0;height:0;border-left:9px solid transparent;
  border-right:9px solid transparent;border-bottom:17px solid var(--amber-lite)}
.tm-legend b{font-size:13.5px;letter-spacing:.06em;grid-column:2}
.tm-legend span{grid-column:2;font-size:13px;line-height:1.95;color:var(--soft)}

/* ============================================================================
   7. 写真
   ========================================================================== */
.gallery{display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.gallery figure{margin:0;position:relative;overflow:hidden}
.gallery img{aspect-ratio:1;height:auto;filter:sepia(.25);transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
.gallery figure:hover img{transform:scale(1.05);filter:sepia(.05)}
.gallery figcaption{position:absolute;inset:auto 0 0;z-index:2;padding:clamp(16px,2.4vw,30px);
  font-size:13px;line-height:1.85;color:var(--ink);
  background:linear-gradient(to bottom,#0d0b0900,#0d0b09d9 46%,#0d0b09f5)}
.gallery figure:nth-child(2) img{object-position:left}
.gallery figure:nth-child(3) img{object-position:right}

/* ============================================================================
   8. いれ方
   ========================================================================== */
.brew{padding:clamp(76px,12vh,140px) 4vw;background:var(--cream);color:var(--cream-ink)}
.brew header{container-type:inline-size;max-width:1180px;margin:0 auto}
.brew .eyebrow{color:#835518}
.brew h2{font:600 min(88px,11.7cqw)/1.25 var(--serif);margin:.3em 0 0}
.brew .lead{color:var(--cream-soft)}
.brew-body{max-width:1180px;margin:clamp(36px,5vw,64px) auto 0;
  display:grid;grid-template-columns:minmax(210px,300px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.brew-fig{border:1px solid var(--rule-cream);padding:18px;background:#f3ebdc}
.brew-fig svg{display:block;width:100%;height:auto;aspect-ratio:222/424}
.bw-line{fill:none;stroke:#4a3524;stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bw-bed{fill:#8a5a1c26;stroke:#8a5a1c;stroke-width:1.6;vector-effect:non-scaling-stroke}
.bw-rib path{fill:none;stroke:#4a352433;stroke-width:1.6;vector-effect:non-scaling-stroke}
.bw-pool{fill:#7a4a1f4d;stroke:none}
.bw-server{fill:#ffffff4d}
/* 滴が落ちる = 抽出そのもの。止まっていると「いれている」に見えない。 */
.bw-d{fill:#5b3a1a;transform-box:fill-box;transform-origin:50% 50%}
.brew-fig.seen .bw-d{animation:bwDrop 1.9s cubic-bezier(.4,0,.75,.5) infinite}
.brew-fig.seen .bw-d2{animation-delay:.63s}
.brew-fig.seen .bw-d3{animation-delay:1.26s}
@keyframes bwDrop{
  0%{transform:translateY(0) scale(.35)}
  14%{transform:translateY(7px) scale(1)}
  86%{transform:translateY(68px) scale(1)}
  100%{transform:translateY(78px) scale(.18)}
}
/* 湯気。opacity ではなく破線の移動で立ちのぼらせる。
   ★pathLength=100 の正規化を壊さないよう non-scaling-stroke は付けない。 */
.bw-steam path{fill:none;stroke:#4a352466;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:22 78;stroke-dashoffset:100}
.brew-fig.seen .bw-steam path{animation:bwSteam 3.6s linear infinite}
.brew-fig.seen .bw-steam path:nth-child(2){animation-delay:1.2s}
.brew-fig.seen .bw-steam path:nth-child(3){animation-delay:2.4s}
@keyframes bwSteam{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

.brew-steps{list-style:none;margin:0;padding:0;position:relative}
.brew-steps:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--rule-cream)}
.brew-steps li{position:relative;padding:0 0 30px 26px}
.brew-steps li:last-child{padding-bottom:0}
.brew-steps li:before{content:"";position:absolute;left:-4.5px;top:7px;width:10px;height:10px;
  border-radius:50%;background:var(--cream);border:2px solid #8a5a1c}
.brew-steps em{font-style:normal;font-size:13px;letter-spacing:.08em;color:#835518}
.brew-steps b{display:block;margin-top:6px;font:600 24px var(--serif)}
.brew-steps span{display:block;margin-top:8px;font-size:14px;line-height:1.95;color:var(--cream-soft);max-width:30em}
.brew-note{max-width:1180px;margin:clamp(30px,4vw,52px) auto 0;padding-top:24px;
  border-top:1px solid var(--rule-cream);font-size:14px;line-height:1.95;color:var(--cream-soft)}

/* ============================================================================
   9. 一週間
   ========================================================================== */
.week{padding:clamp(76px,12vh,140px) 4vw;background:var(--bg);border-top:1px solid var(--rule)}
.week header{container-type:inline-size;max-width:1180px;margin:0 auto}
.week h2{font:600 min(88px,10.4cqw)/1.25 var(--serif);margin:.3em 0 0}
.wk-grid{list-style:none;margin:clamp(36px,5vw,64px) auto 0;padding:0;max-width:1180px;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wk-grid li{border:1px solid var(--rule);padding:18px 14px 22px;min-height:190px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .45s var(--ease),background-color .45s var(--ease)}
.wk-grid li:hover{border-color:#f0e6d566;background:#f0e6d50a}
.wk-grid b{font:600 30px/1 var(--serif)}
.wk-grid span{font-size:12.5px;line-height:1.75;color:var(--soft);margin-top:auto}
.wk-on{border-color:var(--amber)!important;background:#d788351a}
.wk-on b{color:var(--amber-lite)}
.wk-on span{color:var(--ink)}
.wk-off b,.wk-off span{color:#8d7c66}
.wk-drum{width:42px;height:42px;display:block}
.wk-shell{fill:none;stroke:var(--amber);stroke-width:2.4;vector-effect:non-scaling-stroke}
.wk-hub{fill:var(--amber)}
.wk-vane{transform-box:fill-box;transform-origin:50% 50%}
.wk-vane path{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* ドラムが回っている = 焙煎日そのもの。焙煎日の枠にしか付けない。 */
.wk-grid li.seen .wk-vane{animation:wkSpin 14s linear infinite}
@keyframes wkSpin{to{transform:rotate(360deg)}}

/* ============================================================================
   10. 数字
   ========================================================================== */
.numbers{padding:clamp(76px,12vh,140px) 4vw;background:var(--panel);border-top:1px solid var(--rule)}
.numbers header{container-type:inline-size;max-width:1180px;margin:0 auto}
.numbers h2{font:600 min(88px,15.6cqw)/1.25 var(--serif);margin:.3em 0 0}
.num-grid{list-style:none;margin:clamp(36px,5vw,64px) auto 0;padding:0;max-width:1180px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.num-grid li{border-top:1px solid var(--rule);padding:22px 0 0}
.num-grid b{display:flex;align-items:baseline;gap:10px;font-weight:600;color:var(--amber-lite)}
/* ★<i> は既定で斜体になる。数字が斜めに寝ると読みにくいので必ず戻す。 */
.num-v{font:600 clamp(38px,4.4vw,62px)/1.05 var(--serif);font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.num-u{font-size:16px;letter-spacing:.04em;color:var(--soft)}
.num-grid li>span{display:block;margin-top:16px;font-size:13px;line-height:1.95;color:var(--soft)}
.num-tick svg{width:clamp(26px,2.6vw,34px);height:auto;flex:0 0 auto;align-self:center;margin-left:2px}
.nt-base{fill:none;stroke:#f0e6d52e;stroke-width:4}
/* 10秒でちょうど一周する。数字が「10秒」であることを絵で言う。 */
.nt-hand{fill:none;stroke:var(--amber);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50% 50%}
.num-grid li.seen .nt-hand{animation:ntSweep 10s linear infinite}
@keyframes ntSweep{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ============================================================================
   11. 来店
   ========================================================================== */
.visit-ember{padding:clamp(76px,13vh,150px) 5vw;position:relative;background:var(--bg);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1180px);justify-content:center}
/* リンクは格子の中で左寄せにする(格子の子は block 化されて横に伸びるため) */
.visit-ember a{justify-self:start}
.visit-ember>div{container-type:inline-size}
.visit-ember h2{font:600 min(88px,11.7cqw)/1.25 var(--serif);margin:.3em 0 0}
.visit-ember dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(40px,5vw,70px) 0}
.visit-ember dl div{border-top:1px solid var(--rule);padding:22px 0}
.visit-ember dt{font-size:12px;letter-spacing:.12em;color:var(--soft)}
.visit-ember dd{margin:10px 0 0;font:600 24px var(--serif)}
.visit-ember a{display:inline-block;border:1px solid var(--amber);color:var(--amber);padding:16px 22px;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.visit-ember a:hover,.visit-ember a:focus-visible{background:var(--amber);color:#160f0a}

footer{padding:28px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px;
  border-top:1px solid #ffffff22;background:var(--bg)}

/* ============================================================================
   画面の外に出た節では、中の動きを丸ごと止める。
   ★名指しの停止は必ず漏れる(2026-08-29 実測 = 制作例21 で 7 件が回りっぱなし、
     追記しても animation 一括指定が play-state を running へ戻して 6 件が生き残った)。
     だから「節の中の全部」を !important で止める。画面の外なので見た目への影響は無い。
     この 1 本より後ろに動きを足しても、忘れても効く。
   ========================================================================== */
/* ★W7: 節へのリンクが、画面に貼り付く帯(幅の帯44px + ヘッダー89px)の下へ着地していた。
   実測 = ROAST だけ節の先頭が写真なので 88.8px 隠れていた。
   1 つだけ直すと同じことがもう 1 回起きるので、id を持つ節の全部に掛ける。 */
#main main>section[id]{scroll-margin-top:100px}

.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}

/* ============================================================================
   動きを減らす設定(prefers-reduced-motion)
   ★2026-08-29 の実測では、名指しの停止指定にしていたせいで
     **動きを減らして欲しいと頼んだ人にだけ 13 本のループが永久に走っていた**。
     機械の検査は 1 つも赤にしなかった。だから全部まとめて止める。
   ★止めると「素の姿」が見えなくなる動きは、終わりの姿をここで置き直す。
     破線で描いている 4 本がそれにあたる(止めると線が消える or 点が 1 つ残る)。
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  :where(html.js) .wipe{clip-path:none}
  :where(html.js) .rise{transform:none}
  .rc-run{stroke-width:0}                                        /* 中煎りの線は下に在るので消す */
  .org-flow{stroke-dasharray:none;stroke-dashoffset:0}           /* 距離の帯は塗り切った姿にする */
  .bw-steam path{stroke-dasharray:none;stroke-dashoffset:0}      /* 湯気は描き切った姿にする */
  .nt-hand{stroke-dasharray:none;stroke-dashoffset:0}            /* 10秒の輪は閉じた姿にする */
  /* ★W8: 炎のゆらぎは opacity .32〜.62 を往復させている。止めると素の姿 = 1 になり、
     動きを減らして欲しいと頼んだ人だけが、誰よりも明るい橙のかぶりを見ることになる。
     破線 4 本と同じで、ここも終わりの姿を自分で置く。 */
  .flicker{opacity:.45}
  /* 滴 3 つが同じ座標へ重なって団子になるので、落ちていく途中の姿で止める。 */
  .bw-d2{transform:translateY(28px)}
  .bw-d3{transform:translateY(56px)}
}

/* ============================================================================
   狭い画面。段組みは全部落とす。
   ★見出しは全部「柱の幅」に紐づけてあるので、ここで字の大きさをいじる必要は無い。
     いじると 2 か所管理になって必ず drift する(2026-08-29 の失敗)。
   ========================================================================== */
@media(max-width:1180px){
  .rc-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .num-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .roaster{grid-template-columns:minmax(0,1fr)}
  .roaster figure{height:auto;aspect-ratio:1}
  .brew-body{grid-template-columns:minmax(0,1fr)}
  .brew-fig{max-width:320px}
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-grid li{min-height:0}
}
@media(max-width:820px){
  .rc-legend{grid-template-columns:minmax(0,1fr)}
  .tm-legend{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  /* ★W1: 図は器ごと等倍で縮むので、線も一緒に痩せる。実測で焙煎の曲線が 1.01px まで落ち、
     その上に引いてある軸(1.4px)より細くなっていた。距離の帯だけ直して他を直していなかった。
     破線の刻みも太さと同じ比で伸ばす(伸ばさないと点線が潰れて実線に見える)。 */
  .rc-line{stroke-width:4.5}
  .rc-medium{stroke-dasharray:3 14}
  .rc-dark{stroke-dasharray:18 12}
  .rc-run{stroke-width:7.5}
  .rc-end,.tm-p{stroke-width:3}
  .tm-ring{stroke-width:3}
  /* 距離の帯は器を等倍で縮めているので、線も一緒に細くなる。実測で 390px のとき
     0.9px まで痩せて見えなくなった。画面が狭くなるほど線を太く指定し直す。 */
  .org-base{stroke-width:4}
  .org-flow{stroke-width:9}
}
@media(max-width:720px){
  .demo{max-width:calc(100vw - 20px)}
  .fire-hero{width:100%;max-width:100vw}
  .crest{width:260px;max-width:calc(100vw - 72px)}
  .ember-head{left:18px;right:18px}
  .ember-head>a{font-size:20px;letter-spacing:.08em}
  .ember-head nav{gap:14px}
  .wk-grid{grid-template-columns:minmax(0,1fr)}
  .wk-grid li{flex-direction:row;align-items:center;gap:14px;padding:16px}
  .wk-grid span{margin-top:0;margin-right:auto}
  /* 曜日 → 内容 → ドラム の順に並べる。DOM は 曜日 → ドラム → 内容 なので order で入れ替える
     (ドラムは aria-hidden の飾りなので、読み上げの順番は変わらない)。 */
  .wk-drum{order:3;margin-left:0}
  .visit-ember dl{grid-template-columns:minmax(0,1fr)}
  footer{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media(max-width:520px){
  .num-grid{grid-template-columns:minmax(0,1fr)}
  .rc-line{stroke-width:7}
  .rc-medium{stroke-dasharray:5 21}
  .rc-dark{stroke-dasharray:28 19}
  .rc-run{stroke-width:11}
  .rc-end,.tm-p{stroke-width:4}
  .tm-ring{stroke-width:4.5}
  .tm-t,.tm-b,.tm-l,.tm-r{letter-spacing:.02em}
  .org-base{stroke-width:7}
  .org-flow{stroke-width:14}
}

/* はみ出しの止め。器そのものの幅も固定する。 */
html,body,#main{max-width:100%;overflow-x:clip}

/* ============================================================================
   ★共有 shared-quality.css は site.css の**後**に読まれ、`!important` を持っている。
     同じ詳細度では後読みの共有が勝つので、こちらは `#main` を足して上回る。
     ここに書いてある値は上の各節の指定と**同じ式**である。値を変えるときは両方直すこと。
     (2026-08-29 実測: `#main` を足すまで 1 文字も効かなかった)
   ========================================================================== */
/* ★W5(別人格レビュー)で 6 本消した。共有側が !important を当てているのは
   .bean-cast h1 / .roaster h2 / .visit-ember h2 / .bean-grid h2 の 4 つだけで、
   残りは上書きすべき相手が存在せず、drift の危険だけを持っていた。 */
#main .bean-cast h1{font-size:min(96px,15.6cqw)!important;line-height:1.25!important}
#main .roaster h2{font-size:min(76px,10.4cqw)!important;line-height:1.25!important}
#main .visit-ember h2{font-size:min(88px,11.7cqw)!important;line-height:1.25!important}
#main .bean-grid h2{font-size:clamp(14px,7.7cqw,25px)!important;line-height:1.2!important}

/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
  ★2026-08-30: 見出しの既定を 1.25 にしたので下の 3 本は同値の念押しになったが、
    オーナー指示で入った行なので消さない(共有 CSS が後から !important で勝つ経路が残るため)。
*/
html body div#main main section#beans.bean-cast header h1{line-height:1.25!important}
html body div#main main section#roast.roaster div h2{line-height:1.25!important}
html body div#main main section#visit.visit-ember div h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/