:root{
    --ink:#14120F;
    --paper:#E7E3D9;
    --dim:#8B8477;
    --brass:#A8874B;
    --gut:6vw;
    --mono:"IBM Plex Mono",monospace;
    --mincho:"Shippori Mincho",serif;
    --gothic:"Zen Kaku Gothic New",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{background:#0d0d0c}
  body{background:#0d0d0c;color:var(--paper);font-family:var(--gothic);font-weight:300;-webkit-font-smoothing:antialiased}
  ::selection{background:var(--brass);color:var(--ink)}
  img{display:block}

  /* 数字・ラテン・小さなラベルは等幅。マークアップ側で .mono を付けた要素が
     全部これを待っていたが、規則が無いまま素通りしてゴシックで出ていた。
     個別の規則（.eyebrow・.side-lab など）でも同じ指定をしている箇所があるが、
     あちらはクラスの付かない要素のために残す */
  .mono{font-family:var(--mono)}

  /* 地色と同じ不透明にしている。差の合成（mix-blend-mode）のままだと、
     文字の節がヘッダーの下を通ったときに本文と混ざって両方読めなくなる。
     二段組にしてから素材の上端が下がったので、不透明でも台紙は隠れない */
  .hdr{
    position:fixed;inset:0 0 auto 0;z-index:30;background:#0d0d0c;
    display:flex;align-items:baseline;justify-content:space-between;
    padding:2.2rem var(--gut);
  }
  .mark{display:flex;align-items:baseline;gap:.6rem}
  .mark b{font-family:var(--mincho);font-weight:600;font-size:1.05rem;letter-spacing:.2em}
  .mark span{font-family:var(--mono);font-size:.58rem;letter-spacing:.34em;opacity:.7}
  .nav{display:flex;gap:2rem}
  .nav a{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--paper);text-decoration:none;opacity:.62;transition:opacity .3s}
  .nav a:hover,.nav a:focus-visible{opacity:1}
  /* 2 本だけなので狭い画面でも畳まない。3 本以上になったら畳むこと */
  @media(max-width:760px){.nav{gap:1.4rem}}

  /* ============================================================
     二段組 — 左が文字、右が素材
     素材は 1280 幅。画面いっぱいに広げると Retina で 2.5 倍に伸びる。
     幅を絞ると引き伸ばしが減り、同時に文字を素材の上へ置かなくて済むので、
     可読性のための暗がりが丸ごと不要になる。写真は素のまま出せる。
     --plate を広げるほど迫力は出るが、そのぶんぼやける。
     ============================================================ */
  :root{
    --plate: min(58vw, 1000px);
    --seam-inset: 1.9rem;   /* 継ぎ目と台紙のすきま */
    --seam-gap: 2.6rem;     /* 継ぎ目と文字のすきま */
  }

  .sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#0d0d0c;
    display:grid;grid-template-columns:minmax(0,1fr) var(--plate);align-items:center}

  /* 継ぎ目。鯖江の眼鏡は分業で、一本が工房から工房へ渡って形になる。
     この線は、工程と工程のあいだ・手と手のあいだにある継ぎ目。
     文字と素材が出会う線を引き、そこへ寄せている。装飾ではなく、題材が
     実際に持っている構造から採っている */
  .sticky::after{
    content:"";position:absolute;top:0;bottom:0;z-index:6;width:1px;
    left:calc(100% - var(--plate) - var(--seam-inset));
    background:linear-gradient(transparent,rgba(168,135,75,.5) 16%,
               rgba(168,135,75,.5) 84%,transparent);
  }

  /* 素材の器。16:9 に固定しているので cover でも切り取りが起きない。
     マークアップ上は先に置いているので、列は明示して右へ回す */
  /* ヒーローだけ右端まで裁ち落とす。他の節（色見本・寸法・工程）は記録なので
     余白を持つが、ここは掛ける瞬間そのもので、画面の端まで届くことで
     「見る」から「体験する」に変わる。差があること自体が意味になる。
     1600px 画面で 1.45 倍。アンシャープと AVIF を入れたあとなので画質は持つ */
  .frame{grid-column:2;position:relative;width:100%;
    aspect-ratio:16/9;overflow:hidden;background:#0d0d0c}

  /* 文字カラム。工程カウンターを上段、タイトル／コピー／カードを下段に重ねる。
     この 3 つは同時に画面へ出ないので、同じマス目に置いてよい */
  .col{grid-column:1;grid-row:1;position:relative;height:100%;
    padding:0 calc(var(--seam-inset) + var(--seam-gap)) 0 var(--gut);
    display:grid;grid-template-rows:auto auto;align-content:center;justify-items:end;gap:2.6rem}
  .title,.counter,.c2copy{text-align:right}
  .col .eyebrow{flex-direction:row-reverse}
  .eyebrow{
    font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
    color:var(--dim);display:flex;align-items:center;gap:.9rem;
  }
  .eyebrow::after{content:"";width:3.2rem;height:1px;background:rgba(231,227,217,.28)}
  .rev{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
  .rev.on{opacity:1;transform:none}
  /* 素材は 1280 幅で、Retina では約 2.5 倍に伸びる。粒を足すと、拡大でぼやけた
     エッジが目立たなくなる。黒を被せて隠す手より効率がいい（実測で、明るさを
     落とさずに解像感が 20% 上がる。黒18%は明るさを16%落として11%しか上がらない）。
     粒が立ちすぎると感じたら .12 まで下げる。 */
  .grain{
    position:absolute;inset:-50%;pointer-events:none;opacity:.15;z-index:3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:gr 1.1s steps(3) infinite;
  }
  @keyframes gr{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
  /* 二段組にしてから、文字が素材の上に乗らなくなった。可読性のための暗がりは
     すべて外してある。残っているのは器の縁を落とすぶんだけで、これは演出。
     強めると写真が平板になるので触らないこと */
  .vig{position:absolute;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(122% 96% at 50% 44%,transparent 56%,rgba(0,0,0,.42) 100%)}
  .veil{position:absolute;inset:0;background:#0d0d0c;opacity:0;pointer-events:none;z-index:6}

  /* ---------- title overlay on the sequence ---------- */
  .title{grid-row:2;grid-column:1;z-index:5;pointer-events:none}
  .title .kanji{font-family:var(--mincho);font-weight:500;
    font-size:clamp(3.4rem,10vw,7.5rem);line-height:1;letter-spacing:.1em}
  .title .romaji{font-family:var(--mono);font-size:.6rem;letter-spacing:.6em;
    color:var(--dim);margin-top:1.3rem;text-transform:uppercase}
  .title .lede{font-family:var(--mincho);font-size:clamp(.82rem,1.4vw,1rem);
    line-height:2.4;opacity:.82;margin-top:2.6rem}
  .cue{position:absolute;bottom:3rem;left:var(--gut);z-index:5;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.34em;color:var(--dim);pointer-events:none}
  .cue i{display:block;width:1px;height:44px;margin:.9rem auto 0 0;background:linear-gradient(var(--brass),transparent)}

  /* ---------- 02 seated ---------- */
    /* ---------- scrub ---------- */
  .s-c2{height:760vh;position:relative}
  #cv{display:block;width:100%;height:100%}
  .counter{grid-row:1;grid-column:1;z-index:4}
  .counter .lab{font-family:var(--mono);font-size:.54rem;letter-spacing:.32em;color:var(--dim);text-transform:uppercase}
  .counter .num{font-family:var(--mono);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1;
    color:var(--brass);font-variant-numeric:tabular-nums;margin-top:.5rem}
  /* 進捗バーを継ぎ目まで伸ばして交差させる。仕事が手から手へ渡っていく線で、
     工程が 148 に届いたとき渡りきる。負の margin を外すとただの下線に戻る */
  .counter .rule{height:1px;background:rgba(168,135,75,.32);position:relative;
    width:clamp(7rem,15vw,13rem);
    margin:.85rem calc(-1 * (var(--seam-gap) + .9rem)) 0 auto}
  .counter .rule i{position:absolute;inset:0 auto 0 0;background:var(--brass);width:0}
  /* 見出しの箱。ch は .c2copy の 16px 基準で解決されるので、ここに 32ch と書くと
     46px の見出しには 5 文字ぶんしか与えられず「最後のひと／つは、」と語中で割れる。
     rem で置き、狭い画面では画面幅から余白を引いた値のほうを採る */
  .c2copy{grid-row:2;grid-column:1;z-index:4;max-width:100%}
  .c2copy h2{font-family:var(--mincho);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.62;margin-top:1.5rem}
  .c2copy h2 em{font-style:normal;color:var(--brass);display:block}

  /* product card */
  /* カードは文字カラムの位置に置く。コピーが消えるのは 0.70、カードが出るのは
     0.80 で、この 2 つは同時に画面へ出ない。素材の上に重ねる必要がない。
     基準は .sticky。.col の中に入れると、工程カウンターと同じマス目で重なる */
  .card{
    position:absolute;right:calc(var(--plate) + var(--seam-inset) + var(--seam-gap));
    bottom:11vh;z-index:8;
    width:min(340px,calc(100% - var(--plate) - 2 * var(--gut)));
    background:rgba(13,13,12,.72);border:1px solid rgba(231,227,217,.13);padding:1.6rem;
    opacity:0;transform:translateX(-28px);pointer-events:none;
  }
  .card img{width:100%;height:auto;background:#E7E3D9}
  .card .nm{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;margin-top:1.3rem}
  .card .jp{font-size:.72rem;line-height:2;color:var(--dim);margin-top:.7rem}
  .card dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin-top:1.3rem;
    padding-top:1.2rem;border-top:1px solid rgba(231,227,217,.12);
    font-family:var(--mono);font-size:.58rem;letter-spacing:.16em}
  .card dt{color:var(--dim)}
  .card dd{text-align:right}
  .card .buy{display:block;margin-top:1.5rem;padding:.9rem;text-align:center;text-decoration:none;
    border:1px solid rgba(168,135,75,.55);color:var(--paper);
    font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
    transition:background .4s}
  .card .buy:hover{background:rgba(168,135,75,.16)}
  /* 二段組が成立しなくなる幅で、素材を上・文字を下に積む。
     素材は全幅のレターボックス。375px なら 1280 列を 750px に「縮小」して出すので、
     切り取っていた頃（1280 列のうち 332 列しか使えていなかった）より鮮明になる */
  @media(max-width:1000px){
    /* 素材と文字をひとかたまりとして縦に中央寄せする。行を 1fr で押し合うと、
       上の余白が潰れてヘッダーが映像に重なる */
    .sticky{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;
      align-content:center;gap:clamp(1.8rem,5vw,3rem)}
    /* 狭い画面は全幅のレターボックスのまま。ここで余白を空けると、
       ただでさえ小さい素材がさらに小さくなる */
    .frame{grid-column:1;grid-row:1;width:100%}
    /* 継ぎ目は横向きになる。素材と文字が出会う辺そのもの */
    .sticky::after{display:none}
    .col{grid-column:1;grid-row:2;height:auto;align-content:start;justify-items:start;
      padding:2.4rem var(--gut) 0;gap:1.9rem;
      border-top:1px solid rgba(168,135,75,.45)}
    .title,.counter,.c2copy{text-align:left}
    .col .eyebrow{flex-direction:row}
    .counter .rule{margin:.85rem auto 0 0}
    /* 狭い画面では下端に置く。文字カラムに入れると、出ていない間も高さを予約して
       文字の下に空白が残り、上に重ねると工程カウンターを隠す */
    .card{left:var(--gut);right:var(--gut);bottom:5vh;width:auto}
    .card img{display:none}
    /* 字間が広いままだと 375px で箱をはみ出す */
    .title .romaji{letter-spacing:.4em;font-size:.55rem}
  }

  /* ============================================================
     職人 — 惣兵衛
     ブランド名の裏付け。工程の節の手前に置き、「誰が」を先に示す。
     数字は工程番号ではなく年数と工程数で語る（金子眼鏡の職人ページの語り方）。
     ============================================================ */
  .maker{position:relative;padding:13rem 0 11rem;background:#0d0d0c;
    display:grid;grid-template-columns:minmax(0,1fr) var(--plate);align-items:center}
  .maker::after{
    content:"";position:absolute;top:0;bottom:0;z-index:6;width:1px;
    left:calc(100% - var(--plate) - var(--seam-inset));
    background:linear-gradient(transparent,rgba(168,135,75,.32) 8%,
               rgba(168,135,75,.32) 92%,transparent);
  }
  .maker-col{grid-column:1;justify-self:end;text-align:right;
    padding:0 calc(var(--seam-inset) + var(--seam-gap)) 0 var(--gut)}
  .maker-col .eyebrow{/* row-reverse では flex-start が右端になる。end だと左へ寄る */
    justify-content:flex-start;flex-direction:row-reverse}
  .maker-nm{font-family:var(--mincho);font-weight:500;
    font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:.1em;margin-top:1.6rem}
  .maker-kana{font-family:var(--mono);font-size:.58rem;letter-spacing:.34em;
    color:var(--dim);margin-top:1rem}
  .maker-bio{font-size:.8rem;line-height:2.4;color:var(--dim);margin-top:2.4rem}

  /* 年数と工程数。工程番号とは別の種類の数字を、ここで一度だけ出す */
  .maker-fig{display:grid;grid-template-columns:auto auto;gap:.7rem 1.6rem;
    justify-content:end;margin-top:2.8rem;padding-top:1.8rem;
    border-top:1px solid rgba(231,227,217,.12);
    font-family:var(--mono);font-size:.58rem;letter-spacing:.16em}
  .maker-fig dt{color:var(--dim);text-align:right}
  .maker-fig dd{color:var(--brass);text-align:right}

  .maker-fig-img{grid-column:2;width:calc(100% - var(--gut));margin:0}
  .maker-fig-img img{width:100%;height:auto;display:block;background:#141310}

  @media(max-width:1000px){
    .maker{padding:8rem 0 6rem;grid-template-columns:minmax(0,1fr);gap:2.2rem}
    .maker::after{display:none}
    .maker-fig-img{grid-column:1;grid-row:1;width:100%}
    .maker-col{grid-column:1;grid-row:2;/* start だと内容幅になり、横向きの継ぎ目が途中で切れる */
      justify-self:stretch;text-align:left;
      padding:2rem var(--gut) 0;border-top:1px solid rgba(168,135,75,.4)}
    .maker-col .eyebrow{justify-content:flex-start;flex-direction:row}
    .maker-fig{justify-content:start}
    .maker-fig dt,.maker-fig dd{text-align:left}
  }

  /* ============================================================
     工程 — 147 のうちの四つ
     各工程が「文字 + 図版」の一段。ヒーローと同じ二段組の文法をそのまま延ばし、
     継ぎ目の線も通している。全部を並べても図鑑にしかならないので四つに絞った。
     ============================================================ */
  .steps{position:relative;padding:14rem 0 12rem;background:#0d0d0c}
  /* 継ぎ目をこの節にも通す。ページ全体が一つの仕組みに見える */
  .steps::after{
    content:"";position:absolute;top:0;bottom:0;z-index:6;width:1px;
    left:calc(100% - var(--plate) - var(--seam-inset));
    background:linear-gradient(transparent,rgba(168,135,75,.32) 6%,
               rgba(168,135,75,.32) 94%,transparent);
  }

  .steps-head{max-width:calc(100% - var(--plate));
    margin:0 0 10rem;padding-left:var(--gut);text-align:right;
    padding-right:calc(var(--seam-inset) + var(--seam-gap))}
  .steps-head .eyebrow{/* row-reverse では flex-start が右端になる。end だと左へ寄る */
    justify-content:flex-start;flex-direction:row-reverse}
  .steps-head h2{font-family:var(--mincho);font-weight:500;
    font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.85;margin-top:1.6rem}
  .steps-lede{font-size:.8rem;line-height:2.3;color:var(--dim);margin-top:1.8rem;
    max-width:34rem;margin-left:auto}
  .steps-lede-2{margin-top:1.1rem}

  /* 一段ぶん。グリッドはヒーローの .sticky と同じ */
  .steps-flow{list-style:none}
  .step{display:grid;grid-template-columns:minmax(0,1fr) var(--plate);
    align-items:center;margin-bottom:9rem}
  .step-col{grid-column:1;justify-self:end;text-align:right;
    padding:0 calc(var(--seam-inset) + var(--seam-gap)) 0 var(--gut)}
  .step-fig{grid-column:2;width:calc(100% - var(--gut));margin:0}
  .step-fig img{width:100%;height:auto;display:block;background:#141310}

  .step-n{display:block;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1;
    color:var(--brass);font-variant-numeric:tabular-nums;letter-spacing:.06em}
  .step-nm{font-family:var(--mincho);font-weight:500;
    font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.08em;margin-top:1.1rem}
  .step-d{font-size:.78rem;line-height:2.2;color:var(--dim);margin-top:1.4rem}
  .step-by{display:block;font-size:.56rem;letter-spacing:.28em;color:var(--dim);
    margin-top:1.8rem;text-transform:uppercase}
  /* 惣兵衛が受け取る工程だけ担当を真鍮に。四つのうち二つしか触っていないことが、
     色の並びだけで分かる。最終行の「あなた」も真鍮 */
  .is-own .step-by{color:var(--brass)}

  /* 最後の一つ。工房では行われないので、見せる図版がない。
     図版の欄が空くこと自体が「ここにはない」を言う */
  .steps-last{display:grid;grid-template-columns:minmax(0,1fr) var(--plate);
    align-items:center;margin-top:2rem}
  .steps-last .step-col{grid-column:1}
  .steps-last .step-n,.steps-last .step-nm,.steps-last .step-by{color:var(--brass)}
  .steps-last .step-d{color:var(--paper);font-family:var(--mincho);font-size:.95rem}

  @media(max-width:1000px){
    .steps{padding:9rem 0 7rem}
    .steps::after{display:none}
    .steps-head{max-width:none;margin-bottom:5rem;padding:0 var(--gut);text-align:left}
    .steps-head .eyebrow{justify-content:flex-start;flex-direction:row}
    .steps-lede{margin-left:0}
    .step,.steps-last{grid-template-columns:minmax(0,1fr);gap:2rem;margin-bottom:5.5rem}
    .step-fig{grid-column:1;grid-row:1;width:100%}
    .step-col{grid-column:1;grid-row:2;/* start だと内容幅になり、横向きの継ぎ目が途中で切れる */
      justify-self:stretch;text-align:left;
      padding:0 var(--gut);border-top:1px solid rgba(168,135,75,.4);padding-top:2rem}
    .steps-last .step-col{border-top:1px solid rgba(168,135,75,.4);padding-top:2rem}
  }

  /* ============================================================
     節の見出し（色・型で共通）
     ブランドの節と同じく、継ぎ目に右揃えで寄せる
     ============================================================ */
  /* 見出しはグリッドの第1列。縦中央で素材と向かい合う。
     グリッドの外に置くと左カラムの下半分が丸ごと空く */
  .sec-head{grid-column:1;
    padding:0 calc(var(--seam-inset) + var(--seam-gap)) 0 var(--gut);
    text-align:right}
  .sec-head .eyebrow{justify-content:flex-start;flex-direction:row-reverse}
  .sec-head h2{font-family:var(--mincho);font-weight:500;
    font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.85;margin-top:1.6rem}
  .sec-lede{font-size:.8rem;line-height:2.3;color:var(--dim);margin-top:1.8rem;
    max-width:34rem;margin-left:auto}

  /* ============================================================
     色 — 板の色
     比べるための節なので、ここだけ並置で組む。他の節は縦の連なりだが、
     色は隣り合っていないと比較にならない。
     ============================================================ */
  .colours{position:relative;padding:13rem 0 11rem;background:#0d0d0c}
  .colours::after{
    content:"";position:absolute;top:0;bottom:0;z-index:6;width:1px;
    left:calc(100% - var(--plate) - var(--seam-inset));
    background:linear-gradient(transparent,rgba(168,135,75,.32) 8%,
               rgba(168,135,75,.32) 92%,transparent);
  }
  .colour-wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--plate);
    align-items:center}
  .colour-list{grid-column:2;list-style:none;width:calc(100% - var(--gut));
    display:grid;grid-template-columns:1fr 1fr;gap:3.4rem 2.6rem}
  .colour-fig{margin:0}
  .colour-fig img{width:100%;height:auto;display:block;background:#141310}
  .colour-cap{margin-top:1.2rem}
  .colour-n{font-size:.56rem;letter-spacing:.24em;color:var(--brass)}
  .colour-nm{font-family:var(--mincho);font-weight:500;font-size:1.05rem;
    letter-spacing:.1em;margin-top:.6rem;display:flex;align-items:baseline;gap:.9rem}
  .colour-kana{font-family:var(--mono);font-size:.52rem;letter-spacing:.24em;
    color:var(--dim)}
  .colour-d{font-size:.72rem;line-height:2;color:var(--dim);margin-top:.7rem}

  /* ============================================================
     型 — 46□22-145 を解く
     ============================================================ */
  .shape{position:relative;padding:11rem 0 12rem;background:#0d0d0c}
  .shape::after{
    content:"";position:absolute;top:0;bottom:0;z-index:6;width:1px;
    left:calc(100% - var(--plate) - var(--seam-inset));
    background:linear-gradient(transparent,rgba(168,135,75,.32) 8%,
               rgba(168,135,75,.32) 92%,transparent);
  }
  .shape-wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--plate);
    align-items:center}
  .shape-col{grid-column:1}
  /* 数字は継ぎ目の右。文字カラムの見出しと向かい合う */
  .size{grid-column:2;width:calc(100% - var(--gut))}
  .size > div{display:grid;grid-template-columns:5.5rem 1fr;gap:0;
    padding:1.6rem 0;border-top:1px solid rgba(231,227,217,.14)}
  .size dt{font-size:clamp(1.3rem,2.6vw,2rem);line-height:1;color:var(--brass);
    font-variant-numeric:tabular-nums;padding-right:1.6rem}
  .size dd{font-size:.76rem;line-height:2.1;color:var(--dim)}
  .size dd b{display:block;font-weight:400;color:var(--paper);
    font-family:var(--mincho);font-size:.9rem;margin-bottom:.5rem;letter-spacing:.06em}

  /* 見出し・リードと同じ字幅に揃える。制限を外すと、この行だけ左へ張り出す */
  .shape-link{margin:4rem 0 0 auto;max-width:34rem;
    padding-right:calc(var(--seam-inset) + var(--seam-gap));
    text-align:right;font-size:.76rem;line-height:2.2;color:var(--dim)}
  /* inline-block だと文の続きに並ぶ。行を分ける */
  .shape-link a{display:block;width:fit-content;margin:1.1rem 0 0 auto;color:var(--brass);
    text-decoration:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
    border-bottom:1px solid rgba(168,135,75,.4);padding-bottom:.35rem}
  .shape-link a:hover{border-bottom-color:var(--brass)}

  @media(max-width:1000px){
    .colours,.shape{padding:8rem 0 7rem}
    .colours::after,.shape::after{display:none}
    .sec-head{padding:0 var(--gut);text-align:left;margin-bottom:4rem}
    .sec-head .eyebrow{justify-content:flex-start;flex-direction:row}
    .sec-lede{margin-left:0}
    .colour-wrap,.shape-wrap{grid-template-columns:minmax(0,1fr)}
    .shape-col{grid-column:1}
    .colour-list{grid-column:1;width:100%;padding:0 var(--gut);gap:2.8rem 1.4rem}
    .size{grid-column:1;width:100%;padding:0 var(--gut)}
    .size > div{grid-template-columns:4rem 1fr}
    .shape-link{padding:0 var(--gut);text-align:left;margin-top:2.4rem}
  }

  /* ---------- 05 closing ----------
     ページを分けてきた縦の継ぎ目が、ここで横に寝る。
     中央揃えなのは、分けるものが無くなったから。他の節と違うのは意図。 */
  .close{padding:13rem var(--gut) 11rem;background:#0d0d0c;
    display:grid;justify-items:center;text-align:center;gap:0}

  /* 寝た継ぎ目。縦の線と同じ真鍮、同じ細さ */
  .close-head{position:relative;padding-top:5rem}
  .close-head::before{
    content:"";position:absolute;top:0;left:50%;translate:-50% 0;
    width:clamp(7rem,15vw,13rem);height:1px;
    background:linear-gradient(90deg,transparent,rgba(168,135,75,.55) 22%,
               rgba(168,135,75,.55) 78%,transparent);
  }
  .close h2{font-family:var(--mincho);font-weight:500;
    font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.9}

  /* 縦位置の肖像なので台紙は細く。横長のままだと顔が小さく、壁ばかり写る */
  .plate{width:min(30rem,84vw);margin-top:6rem}
  .plate-frame{position:relative;line-height:0}
  .plate img{width:100%;height:auto;display:block}

  /* トンボ */
  .tomb{position:absolute;width:11px;height:11px;pointer-events:none;
    --c:rgba(168,135,75,.55)}
  .tomb-tl{top:-8px;left:-8px;border-top:1px solid var(--c);border-left:1px solid var(--c)}
  .tomb-tr{top:-8px;right:-8px;border-top:1px solid var(--c);border-right:1px solid var(--c)}
  .tomb-bl{bottom:-8px;left:-8px;border-bottom:1px solid var(--c);border-left:1px solid var(--c)}
  .tomb-br{bottom:-8px;right:-8px;border-bottom:1px solid var(--c);border-right:1px solid var(--c)}

  /* 寸法線。型の節の数字を、顔の上で具体にする。
     トンボは暗い地に乗るので真鍮でよく読めるが、寸法線は写真の中に入る。
     壁は明るく頬は暗いので、真鍮だと明部で消える。紙色に落として影を敷き、
     どちらの明るさの上でも一定の太さに見えるようにしている */
  .mez{position:absolute;display:flex;flex-direction:column;pointer-events:none;
    filter:drop-shadow(0 1px 1.6px rgba(0,0,0,.72))}
  .mez i{display:block;height:1px;background:rgba(231,227,217,.88);position:relative}
  /* 端の引出線は測る先（レンズ／ブリッジ）へ向けて伸ばす。
     左右対称に出すと何を測っているのか読めない */
  .mez i::before,.mez i::after{content:"";position:absolute;width:1px;height:11px;
    background:rgba(231,227,217,.88)}
  .mez i::before{left:0}
  .mez i::after{right:0}
  .mez b{display:block;text-align:center;font-family:var(--mono);font-weight:400;font-size:.64rem;
    letter-spacing:.12em;color:var(--paper);line-height:1;margin-top:.5rem}
  /* 位置は写真の眼鏡に合わせた実測値。
     レンズ外縁 36.0% / 内縁 60.3%、レンズ下端 52%、ブリッジ 60.3–68% で上端 38.5%。
     写真を差し替えたら、この % は全部測り直すこと */
  .mez-46{left:36%;width:24.3%;top:55.2%}
  .mez-46 i::before,.mez-46 i::after{top:-9px}      /* 引出線は上（レンズ下端）へ */
  .mez-22{left:60.3%;width:7.7%;top:35.2%;flex-direction:column-reverse}
  .mez-22 i::before,.mez-22 i::after{top:-1px}      /* 引出線は下（ブリッジ上端）へ */
  .mez-22 b{margin:0 0 .5rem}
  .plate figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;
    color:var(--dim);margin-top:1.6rem;text-align:center}

  /* 仕様書らしく、罫で組む。中央に置いた塊の中では左右揃え */
  /* 列の間隔を gap で取ると、dt と dd の罫が途中で切れる。
     間隔は dt の padding で取り、罫を繋げる */
  .spec{display:grid;grid-template-columns:auto 1fr;gap:0;
    width:min(22rem,100%);margin-top:5rem;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.16em}
  .spec dt{color:var(--dim);text-align:left;padding:.9rem 3.2rem .9rem 0;
    border-top:1px solid rgba(231,227,217,.12)}
  .spec dd{color:var(--paper);text-align:right;padding:.9rem 0;
    border-top:1px solid rgba(231,227,217,.12)}
  .spec dt:first-of-type,.spec dd:first-of-type{border-top:0}

  .cta{display:inline-block;margin-top:5rem;padding:1.15rem 3.4rem;
    border:1px solid rgba(168,135,75,.5);color:var(--paper);
    text-decoration:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;
    text-transform:uppercase;transition:background .4s}
  .cta:hover{background:rgba(168,135,75,.14)}

  @media(max-width:760px){
    .close{padding:8rem var(--gut) 6rem}
    .close-head{padding-top:3.4rem}
    /* --plate は狭い画面だと 58vw ＝ 200px 程度にしかならない。ここは全幅で出す */
    .plate{width:100%;margin-top:3.4rem}
    /* gap を戻すと dt と dd の罫がまた切れる。間隔は dt の padding で取る */
    .spec{width:100%;margin-top:3.4rem}
    .spec dt{padding-right:2rem}
    .cta{margin-top:3.4rem;padding:1.05rem 2.4rem}
  }

  .foot{padding:3rem var(--gut);border-top:1px solid rgba(231,227,217,.09);
    display:grid;grid-template-columns:1fr auto;gap:1.6rem 2rem;
    font-family:var(--mono);font-size:.54rem;letter-spacing:.24em;color:var(--dim)}
  .foot .note{grid-column:1 / -1;font-family:var(--gothic);font-size:.66rem;
    letter-spacing:.02em;line-height:1.9;color:rgba(139,132,119,.75)}

  .boot{position:fixed;inset:0;background:#0d0d0c;z-index:50;display:grid;place-items:center;transition:opacity .7s}
  .boot span{font-family:var(--mono);font-size:.56rem;letter-spacing:.4em;color:var(--dim)}
  .boot.done{opacity:0;pointer-events:none}


  /* ============================================================
     予約・控え（reserve.html / thanks.html）
     トップと同じ地色・同じ書体で、演出だけ持たない画面
     ============================================================ */
  .page{background:#0d0d0c}
  .hdr-solid{position:static;mix-blend-mode:normal;
    border-bottom:1px solid rgba(231,227,217,.09)}
  .hdr-solid .mark{text-decoration:none;color:var(--paper)}

  .sheet{max-width:1180px;margin:0 auto;padding:clamp(3rem,7vw,6rem) var(--gut) 6rem}
  .sheet-narrow{max-width:760px}
  .sheet-head{margin:2.6rem 0 3.4rem}
  .sheet-head h1{font-family:var(--mincho);font-weight:500;
    font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.6;margin-top:1.2rem}
  .sheet-head .lede{font-size:.82rem;line-height:2.3;color:var(--dim);margin-top:1.5rem}

  /* 架空であることは、読み飛ばされない位置に置く */
  .fake{border:1px solid rgba(168,135,75,.34);padding:1rem 1.2rem;
    font-size:.62rem;letter-spacing:.06em;line-height:2;color:var(--dim)}

  /* ブランドの節は継ぎ目に右揃えで寄せるが、ここは入力する画面なので左揃えのまま。
     通すのは継ぎ目と罫の作法だけ。線はサイト全体を貫いている */
  .form{position:relative;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,320px);
    gap:clamp(2.4rem,5vw,5rem);align-items:start}
  .form::after{
    content:"";position:absolute;top:0;bottom:0;width:1px;
    right:calc(320px + clamp(2.4rem,5vw,5rem) / 2);
    background:linear-gradient(transparent,rgba(168,135,75,.4) 8%,
               rgba(168,135,75,.4) 92%,transparent);
  }
  .fs{border:0;padding:0;margin-bottom:3.2rem}
  .lg{font-size:.56rem;letter-spacing:.3em;color:var(--brass);text-transform:uppercase;
    padding-bottom:.9rem;margin-bottom:1.5rem;border-bottom:1px solid rgba(231,227,217,.12);width:100%}

  .picks{display:grid;gap:.8rem}
  .picks-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .pick{display:block;position:relative;cursor:pointer}
  .pick input{position:absolute;opacity:0;width:0;height:0}
  .pick-body{display:block;border:1px solid rgba(231,227,217,.14);padding:1.1rem 1.2rem;
    transition:border-color .3s,background .3s}
  .pick:hover .pick-body{border-color:rgba(231,227,217,.3)}
  .pick input:checked + .pick-body{border-color:var(--brass);background:rgba(168,135,75,.09)}
  .pick input:focus-visible + .pick-body{outline:1px solid var(--paper);outline-offset:2px}
  .pick-slim .pick-body{text-align:center;padding:.95rem .6rem}
  .pick-nm{display:block;font-size:.8rem;letter-spacing:.08em}
  .pick-sub{display:block;font-size:.56rem;letter-spacing:.2em;color:var(--dim);margin-top:.5rem}
  .pick-note{display:block;font-size:.66rem;line-height:1.9;color:var(--dim);margin-top:.7rem}

  .fld{display:block;margin-bottom:1.6rem}
  .fld-lab{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;
    color:var(--dim);margin-bottom:.7rem;text-transform:uppercase}
  .fld input,.fld textarea{width:100%;background:transparent;color:var(--paper);
    border:0;border-bottom:1px solid rgba(231,227,217,.2);padding:.7rem 0;
    font-family:var(--gothic);font-weight:300;font-size:.9rem;line-height:1.9;
    transition:border-color .3s}
  .fld textarea{resize:vertical}
  .fld input:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--brass)}
  .fld input::placeholder,.fld textarea::placeholder{color:rgba(139,132,119,.6)}
  /* 日付だけはブラウザの部品なので、暗い地に合わせて色を戻す */
  .fld input[type=date]{color-scheme:dark}

  .hint{font-size:.66rem;line-height:1.9;color:var(--dim);margin-top:.9rem}
  .err{font-size:.7rem;line-height:1.9;color:#D9A05B;margin-top:.8rem}
  .err-form{margin:0 0 1.4rem}

  .submit{display:block;width:100%;padding:1.15rem;cursor:pointer;
    background:transparent;border:1px solid rgba(168,135,75,.55);color:var(--paper);
    font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;transition:background .4s}
  .submit:hover{background:rgba(168,135,75,.16)}

  .form-side{position:sticky;top:2rem}
  .side-box{border:1px solid rgba(231,227,217,.12);padding:1.5rem}
  .side-lab{font-family:var(--mono);font-size:.54rem;letter-spacing:.3em;color:var(--dim)}
  .side-model{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;margin-top:.6rem}
  .side-box img{width:100%;height:auto;margin-top:1.2rem;background:var(--paper)}
  /* クロージングの .spec と同じ組み方。間隔は dt の padding で取る（gap だと罫が切れる） */
  .side-dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin-top:1.5rem;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.16em}
  .side-dl dt{color:var(--dim);padding:.7rem 1.6rem .7rem 0;
    border-top:1px solid rgba(231,227,217,.12)}
  .side-dl dd{text-align:right;padding:.7rem 0;
    border-top:1px solid rgba(231,227,217,.12)}
  .side-note{font-size:.66rem;line-height:2;color:var(--dim);margin-top:1.3rem}

  /* ---------- 控え ---------- */
  .recap{border-top:1px solid rgba(231,227,217,.12);margin-top:2.6rem}
  .recap-row{display:grid;grid-template-columns:7.5rem 1fr;gap:0;
    padding:1.3rem 0;border-bottom:1px solid rgba(231,227,217,.12)}
  .recap-row dt{padding-right:1.4rem}
  .recap-row dt{font-size:.56rem;letter-spacing:.24em;color:var(--dim);padding-top:.3rem}
  .recap-row dd{font-size:.88rem;line-height:1.9}
  .recap-sub{display:block;font-size:.56rem;letter-spacing:.2em;color:var(--dim);margin-top:.5rem}
  .recap-note{font-size:.8rem;line-height:2.1;color:var(--dim);margin-top:2.6rem}
  .sheet-foot{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:3.4rem}
  .plain{color:var(--dim);text-decoration:none;font-size:.58rem;letter-spacing:.24em;
    text-transform:uppercase;border-bottom:1px solid rgba(139,132,119,.4);padding-bottom:.3rem}
  .plain:hover{color:var(--paper)}

  @media(max-width:860px){
    .form{grid-template-columns:minmax(0,1fr)}
    .form::after{display:none}
    .form-side{position:static;order:-1}
    .side-box img{display:none}
    .recap-row{grid-template-columns:1fr;gap:.6rem}
  }

  @media (prefers-reduced-motion:reduce){.grain{animation:none}.rev{transition:none}}