@charset "utf-8";
/* =============================================================================
   MISSIONMAN v5 — 質感レイヤー（patina）
   ---------------------------------------------------------------------------
   目的: v5 の構成・導線・レイアウトを一切変えずに、質感だけを
         「古い映画フィルム」「エイジングした映画ポスター」「使い込まれた印刷物」へ寄せる。

   なぜ必要だったか（原因）:
     aging.css は html[data-motion="lite"] のとき **エイジングをほぼ全部切っていた**。
     lite は「pointer:coarse または max-width:720px」で立つので、**スマホは全機種**が
     対象になる。その結果スマホでは
        面のテクスチャ（紙・革・鋼）  … content:none
        セクションの粒子              … --ag-grain-layer:none
        写真の粒子オーバーレイ        … content:none
        見出しのインク擦れ・帯の摩耗  … mask-image:none
        写真の退色                    … saturate/sepia が外れて素の写真に戻る
        ボタンの材質                  … --ag-mat-a .18 → .10
     が全部落ち、**整った黒ベースのサイト**に見えていた。

   方針:
     - aging.css / style.css は**触らない**（Concept A とバイト同一を保つ）。
       復帰も追加もこのファイルの上書きだけで行う。
     - 落としていたのは「塗りつぶし帯域」への配慮だったが、対象はすべて
       **静的な背景画像とマスク**であり、初回描画のコストだけで毎フレームの負荷は無い。
       毎フレーム動くもの（オープニングの粒子アニメ）はモバイルで落としたままにする。
     - 役割ごとにレイヤーを分け、個別に強さを変えられるようにする。

   レイヤー（強さは :root の変数で調整できる）:
     L1 grain         粒子
     L2 scratches     縦傷・ホコリ（**一部の写真だけ**）
     L3 fade          退色・カットごとの個体差
     L4 print-wear    ボタン・ラベルの印刷の擦れ
     L5 edge-burn     画面端とコマ境界の焼け
     L6 poster-patina ベタ面のムラ（黒背景を平らにしない）

   守ること:
     - 可読性とコントラストを落とさない。文字が載る面は「柄」を足すだけで暗くしない
     - 写真の被写体を隠さない
     - 全面一律のノイズにしない（面ごとに粒の大きさと位置を変える）
     - 新しい色を足さない（--ag-* のみ）
     - canvas を使わない。アニメーションを足さない。スクロールを重くしない
   ============================================================================= */

:root{
  /* 各レイヤーの強さ。0 でそのレイヤーだけ消える */
  --pt-grain:1;
  --pt-scratch:1;
  --pt-fade:1;
  --pt-print:1;
  --pt-burn:1;
  --pt-patina:1;

  /* 粒子の基準。画面が小さいほど「粒を大きく」する。
     高DPR（iPhone は3倍前後）では、細かい粒はデバイス画素へ潰れて
     ただの均一なざらつきに見える＝質感として認識されない。 */
  --pt-grain-size:170px;
  --pt-grain-a:.5;
}

/* =============================================================== L1 grain */
/* --- 1-a. lite（＝スマホ全機種）で切られていたぶんを戻す -----------------
   静的な背景画像とマスクだけ。毎フレームの処理は増えない。 */
html[data-motion="lite"] .ag-print::before,
html[data-motion="lite"] .ag-leather::before,
html[data-motion="lite"] .ag-steel::before{content:""}
html[data-motion="lite"] .ag-grain{--ag-grain-layer:var(--ag-tex-grain-base)}
html[data-motion="lite"] .ag-grain--soft{--ag-grain-layer:var(--ag-tex-grain-soft)}
html[data-motion="lite"] .ag-grain--heavy{--ag-grain-layer:var(--ag-tex-grain-heavy)}
html[data-motion="lite"] .ag-grain-on::after{content:""}
/* マスクは aging.css 内に data: URI で焼き込まれた --ag-tex-* を指す。
   lite で mask-image:none にされていたぶんを、元と同じ指定で戻す。 */
html[data-motion="lite"] .ag-handprint{
  -webkit-mask-image:var(--ag-tex-print);
          mask-image:var(--ag-tex-print);
}
html[data-motion="lite"] .ag-edge{
  -webkit-mask-image:var(--ag-tex-edge-top),linear-gradient(#000 0 0),var(--ag-tex-edge-bottom);
          mask-image:var(--ag-tex-edge-top),linear-gradient(#000 0 0),var(--ag-tex-edge-bottom);
}
html[data-motion="lite"] .ag-cta{--ag-mat-a:.20}
/* 写真の退色を戻す。スマホのほうが画面が明るい場所で見られるので、
   PC とまったく同じ値ではなく、ほんの少しだけ濃く残す */
html[data-motion="lite"] .ag-photo{
  --ag-photo-filter:saturate(.90) contrast(.91) brightness(1.035) sepia(.08);
}

/* --- 1-b. スマホでは粒を大きくする ---------------------------------------
   小さい画面＋高DPR で「粒子がある」と分かる大きさにする。 */
@media (max-width:720px){
  :root{--pt-grain-size:210px;--pt-grain-a:.62}
  html[data-motion="lite"] .ag-grain{--ag-grain-size:210px 210px}
  html[data-motion="lite"] .ag-grain--heavy{--ag-grain-size:240px 240px}
  html[data-motion="lite"] .ag-grain-on::after{background-size:200px 200px}
}

/* =========================================================== L6 poster-patina */
/* ベタ面を平らにしない。**背景画像として**足す。
   .reel::before は .ag-print が、::after は継ぎ目のヘイズが使っているため、
   面のムラは要素自身の background-image に重ねる。

   3層構成:
     1) 粒子（タイル）
     2) 大きなムラ（インクの乗りの不均一。楕円のごく薄いグラデーション2枚）
     3) 地の色（background-color は元のまま。ここでは触らない）
   位置と角度をトーンごとに変えてあるので、**面ごとに個体差が出る**。 */
.reel,
.band{
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:var(--pt-grain-size) var(--pt-grain-size),
                  140% 90%, 120% 70%;
  background-position:var(--pt-bg-pos,0 0), var(--pt-mottle-a,12% 0%), var(--pt-mottle-b,88% 100%);
}

/* 暗い巻: 黒を一色にしない。ごく薄い明部を2箇所に置いて深みを出す */
.reel[data-tone="film"],
.band[data-tone="film"]{
  background-image:
    var(--ag-tex-grain-base),
    radial-gradient(ellipse at 22% 8%, rgba(242,239,233,calc(.030 * var(--pt-patina))) 0%, rgba(242,239,233,0) 62%),
    radial-gradient(ellipse at 86% 96%, rgba(218,156,23,calc(.024 * var(--pt-patina))) 0%, rgba(218,156,23,0) 58%);
}
.reel[data-tone="panel"],
.band[data-tone="panel"]{
  background-image:
    var(--ag-tex-grain-base),
    radial-gradient(ellipse at 74% 10%, rgba(242,239,233,calc(.026 * var(--pt-patina))) 0%, rgba(242,239,233,0) 60%),
    radial-gradient(ellipse at 14% 92%, rgba(15,16,19,calc(.30 * var(--pt-patina))) 0%, rgba(15,16,19,0) 64%);
}
/* 明るい巻: 紙の日焼け。暗くせず、黄ばみと薄い染みだけを足す */
.reel[data-tone="paper"],
.band[data-tone="paper"]{
  background-image:
    var(--ag-tex-grain-soft),
    radial-gradient(ellipse at 18% 4%, rgba(197,171,141,calc(.34 * var(--pt-patina))) 0%, rgba(197,171,141,0) 66%),
    radial-gradient(ellipse at 92% 98%, rgba(105,94,89,calc(.16 * var(--pt-patina))) 0%, rgba(105,94,89,0) 60%);
}
.reel[data-tone="tan"],
.band[data-tone="tan"]{
  background-image:
    var(--ag-tex-grain-soft),
    radial-gradient(ellipse at 80% 6%, rgba(224,220,212,calc(.30 * var(--pt-patina))) 0%, rgba(224,220,212,0) 64%),
    radial-gradient(ellipse at 8% 94%, rgba(105,94,89,calc(.20 * var(--pt-patina))) 0%, rgba(105,94,89,0) 62%);
}
.reel[data-tone="cloud"],
.band[data-tone="cloud"]{
  background-image:
    var(--ag-tex-grain-soft),
    radial-gradient(ellipse at 30% 2%, rgba(224,220,212,calc(.26 * var(--pt-patina))) 0%, rgba(224,220,212,0) 62%),
    radial-gradient(ellipse at 90% 100%, rgba(15,16,19,calc(.12 * var(--pt-patina))) 0%, rgba(15,16,19,0) 58%);
}
.reel[data-tone="warm"],
.band[data-tone="warm"]{
  background-image:
    var(--ag-tex-grain-base),
    radial-gradient(ellipse at 66% 4%, rgba(224,220,212,calc(.16 * var(--pt-patina))) 0%, rgba(224,220,212,0) 60%),
    radial-gradient(ellipse at 12% 98%, rgba(15,16,19,calc(.22 * var(--pt-patina))) 0%, rgba(15,16,19,0) 62%);
}

/* 面ごとの個体差。同じトーンでも位置をずらして「同じ紙が2枚無い」状態にする */
.about   {--pt-bg-pos:0 0;      --pt-mottle-a:10% 0%;  --pt-mottle-b:90% 100%}
.film    {--pt-bg-pos:40px 20px;--pt-mottle-a:70% 4%;  --pt-mottle-b:20% 96%}
.yt      {--pt-bg-pos:15px 60px;--pt-mottle-a:30% 6%;  --pt-mottle-b:76% 92%}
.shop    {--pt-bg-pos:70px 10px;--pt-mottle-a:86% 2%;  --pt-mottle-b:12% 98%}
.news    {--pt-bg-pos:25px 45px;--pt-mottle-a:22% 8%;  --pt-mottle-b:80% 94%}
.contact {--pt-bg-pos:55px 30px;--pt-mottle-a:60% 0%;  --pt-mottle-b:30% 100%}
.end     {--pt-bg-pos:10px 75px;--pt-mottle-a:44% 10%; --pt-mottle-b:66% 90%}

/* 文字が載る面は「柄」だけ足して暗くしない。
   .ag-shield は本文の可読性を担保している部品なので、
   コントラストを動かさない範囲（soft-light の極薄）に留める。

   ここは擬似要素ではなく **background-image** で入れること。
   .ag-shield に position:relative を足すと、`.hero-burn`（写真の上の
   キャプション）が持っている position:absolute を後勝ちで打ち消し、
   キャプションが写真の下端から先頭へ飛ぶ（2026-08-06 に実測して差し戻した）。
   背景なら位置指定に一切触れないので、この事故が起きない。 */
.ag-shield{
  background-image:var(--ag-tex-paper);
  background-size:260px 260px;
  background-repeat:repeat;
  background-blend-mode:soft-light;
}
/* 半透明の帯（写真の上のキャプション）は、紙の柄を乗せると
   下の写真と喧嘩して読みにくくなる。柄は乗せず、粒だけにする。 */
.ag-shield--veil{
  background-image:var(--ag-tex-grain-soft);
  background-size:150px 150px;
}

/* =============================================================== L5 edge-burn */
/* --- 5-a. 画面端の焼け。映写された画の四隅が落ちる感じ ------------------
   1枚だけ。固定。アニメーションしない。中央は完全に素通し。 */
body::after{
  content:"";
  position:fixed;inset:0;z-index:40;
  pointer-events:none;
  opacity:var(--pt-burn);
  background:
    radial-gradient(120% 92% at 50% 46%,
      rgba(15,16,19,0) 58%,
      rgba(15,16,19,.10) 82%,
      rgba(15,16,19,.26) 100%),
    linear-gradient(to bottom,
      rgba(218,156,23,.030) 0%,
      rgba(218,156,23,0) 12%);
}
/* 明るい巻では黒く落とすと汚れて見えるので、焼け側（褐色）へ振る */
html[data-tone="paper"] body::after,
html[data-tone="tan"] body::after,
html[data-tone="cloud"] body::after{
  background:
    radial-gradient(120% 92% at 50% 46%,
      rgba(105,94,89,0) 60%,
      rgba(105,94,89,.10) 84%,
      rgba(105,94,89,.22) 100%);
}

/* --- 5-b. コマの境目。巻と巻のつなぎ目に摩耗を出す ----------------------
   .reel::after は継ぎ目のヘイズ。元の gradient を保ったまま、
   その上に摩耗のテクスチャを1枚足す（順序: 摩耗 → ヘイズ）。 */
/* --ag-tex-wear-coarse は aging.css に data: URI で入っている。再定義しない。

   重要: 摩耗は「暗さを足す」のではなく「継ぎ目のヘイズを削る」形で入れる。
   暗い層を重ねると、境界に黒い帯が乗って **ただ汚れているだけ**に見える
   （2026-08-06 に実測して差し戻した）。
   マスクで削ると、ヘイズの輪郭が不規則になるだけなので、
   コントラストも明度も動かさずに「コマの継ぎ目の擦れ」になる。

   マスクは 2 枚の和（重なった側が濃い）。下敷きの一様な層を必ず入れて、
   テクスチャが薄い場所でもヘイズが消え切らないようにしてある。 */
.reel::after,
.band::after{
  -webkit-mask-image:var(--ag-tex-wear-coarse),linear-gradient(rgba(0,0,0,.62) 0 0);
          mask-image:var(--ag-tex-wear-coarse),linear-gradient(rgba(0,0,0,.62) 0 0);
  -webkit-mask-size:300px 100%,100% 100%;
          mask-size:300px 100%,100% 100%;
  -webkit-mask-repeat:repeat-x,no-repeat;
          mask-repeat:repeat-x,no-repeat;
  -webkit-mask-position:var(--pt-bg-pos,0 0),0 0;
          mask-position:var(--pt-bg-pos,0 0),0 0;
}

/* =============================================================== L3 fade */
/* 写真の退色とカットごとの個体差。
   filter を上書きすると .hv:hover の「褪せが一瞬戻る」演出（M11）を壊すので、
   **オーバーレイ側**で個体差を作る。filter は aging.css のものを触らない。 */
.scope,
.hero-frame,
.yt-still{position:relative}
.scope::after,
.hero-frame::after,
.yt-still::after{
  content:"";
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  opacity:var(--pt-fade);
  background-image:
    /* 粒子 */
    var(--ag-tex-grain-base),
    /* 端のわずかな暗がり（古いプリントの周辺光量落ち） */
    radial-gradient(116% 108% at 50% 46%,
      rgba(15,16,19,0) 62%, rgba(15,16,19,.16) 88%, rgba(15,16,19,.30) 100%),
    /* カットごとに向きの違う、ごく薄い焼け */
    linear-gradient(var(--pt-cut-ang,168deg),
      rgba(218,156,23,var(--pt-cut-warm,.045)) 0%,
      rgba(218,156,23,0) 46%,
      rgba(138,172,182,var(--pt-cut-cool,.030)) 100%);
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:var(--pt-grain-size) var(--pt-grain-size),100% 100%,100% 100%;
  background-position:var(--pt-cut-pos,0 0),center,center;
  mix-blend-mode:soft-light;
}
/* 周辺光量落ちだけは soft-light だと効かないので、暗がり専用にもう1枚。
   ここは blend せず、ごく薄く普通に重ねる。 */
.scope::before,
.hero-frame::before{
  content:"";
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  opacity:calc(.55 * var(--pt-fade));
  background:radial-gradient(122% 112% at 50% 48%,
    rgba(15,16,19,0) 64%, rgba(15,16,19,.14) 90%, rgba(15,16,19,.24) 100%);
}
/* カットごとの個体差。同じ写真が2枚無いようにする */
.about-fig:nth-of-type(1) .scope{--pt-cut-ang:158deg;--pt-cut-warm:.055;--pt-cut-cool:.020;--pt-cut-pos:0 0}
.about-fig:nth-of-type(2) .scope{--pt-cut-ang:196deg;--pt-cut-warm:.032;--pt-cut-cool:.040;--pt-cut-pos:40px 25px}
.about-fig:nth-of-type(3) .scope{--pt-cut-ang:142deg;--pt-cut-warm:.060;--pt-cut-cool:.014;--pt-cut-pos:18px 60px}
.yt-card:nth-of-type(1) .scope{--pt-cut-ang:174deg;--pt-cut-warm:.040;--pt-cut-cool:.034;--pt-cut-pos:55px 12px}
.yt-card:nth-of-type(2) .scope{--pt-cut-ang:150deg;--pt-cut-warm:.052;--pt-cut-cool:.018;--pt-cut-pos:22px 48px}
.yt-card:nth-of-type(3) .scope{--pt-cut-ang:202deg;--pt-cut-warm:.028;--pt-cut-cool:.044;--pt-cut-pos:70px 30px}
.film-still .scope{--pt-cut-ang:164deg;--pt-cut-warm:.058;--pt-cut-cool:.016;--pt-cut-pos:12px 70px}
.shop-band .scope{--pt-cut-ang:188deg;--pt-cut-warm:.036;--pt-cut-cool:.030;--pt-cut-pos:64px 8px}
.shop-wear .scope{--pt-cut-ang:146deg;--pt-cut-warm:.050;--pt-cut-cool:.022;--pt-cut-pos:30px 52px}
.dawn-fig .scope{--pt-cut-ang:178deg;--pt-cut-warm:.044;--pt-cut-cool:.026;--pt-cut-pos:8px 34px}

/* =============================================================== L2 scratches */
/* 縦傷とホコリ。**全部の写真には入れない。** 数枚だけに、数本だけ。
   全面に入れるとホラーの傷だらけ表現になり、映画ではなく「壊れた画」に見える。 */
.about-fig:nth-of-type(2) .scope::after,
.yt-card:nth-of-type(1) .scope::after,
.film-still .scope::after,
.shop-wear .scope::after{
  /* 既存のオーバーレイに、縦線を足す（他の写真には無い） */
  background-image:
    linear-gradient(to right,rgba(242,239,233,calc(.16 * var(--pt-scratch))) 0 1px,transparent 1px),
    linear-gradient(to right,rgba(15,16,19,calc(.22 * var(--pt-scratch))) 0 1px,transparent 1px),
    var(--ag-tex-grain-base),
    radial-gradient(116% 108% at 50% 46%,
      rgba(15,16,19,0) 62%, rgba(15,16,19,.16) 88%, rgba(15,16,19,.30) 100%),
    linear-gradient(var(--pt-cut-ang,168deg),
      rgba(218,156,23,var(--pt-cut-warm,.045)) 0%,
      rgba(218,156,23,0) 46%,
      rgba(138,172,182,var(--pt-cut-cool,.030)) 100%);
  background-repeat:no-repeat,no-repeat,repeat,no-repeat,no-repeat;
  background-size:1px 100%,1px 100%,
                  var(--pt-grain-size) var(--pt-grain-size),100% 100%,100% 100%;
  background-position:var(--pt-scr-a,27% 0),var(--pt-scr-b,71% 0),
                      var(--pt-cut-pos,0 0),center,center;
}
.about-fig:nth-of-type(2) .scope{--pt-scr-a:31% 0;--pt-scr-b:64% 0}
.yt-card:nth-of-type(1) .scope{--pt-scr-a:18% 0;--pt-scr-b:83% 0}
.film-still .scope{--pt-scr-a:47% 0;--pt-scr-b:12% 0}
.shop-wear .scope{--pt-scr-a:75% 0;--pt-scr-b:38% 0}

/* =============================================================== L4 print-wear */
/* --- 4-a. ボタン。新品の UI ではなく、刷られた帯・看板に見せる ----------
   .ag-cta::before は aging.css が材質に使っているので ::after を使う。
   やること: ベタ塗りのムラ、輪郭のわずかな掠れ、角の使用感。
   やらないこと: 形を崩す、当たり判定を変える、コントラストを落とす。 */
.ag-cta{position:relative;isolation:isolate}
.ag-cta::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  opacity:calc(.55 * var(--pt-print));
  /* インクの乗りムラ＋刷り面の粒 */
  background-image:
    radial-gradient(80% 140% at 18% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(70% 130% at 92% 100%, rgba(15,16,19,.20) 0%, rgba(15,16,19,0) 62%),
    var(--ag-tex-print);
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,180px 180px;
  mix-blend-mode:soft-light;
}
.ag-cta > *{position:relative;z-index:2}
/* 輪郭をシャープすぎなく見せる。
   マスクで縁を削ると「壊れたボタン」に見えてしまうので、塗りは削らず
   縁の内側にごく薄い沈みを入れて、刷り面のエッジのように見せる。
   当たり判定も文字の可読性も一切変わらない。 */
.ag-cta{
  box-shadow:
    inset 0 1px 0 rgba(242,239,233,.16),
    inset 0 -2px 0 rgba(15,16,19,.30),
    inset 0 0 0 1px rgba(15,16,19,.14),
    0 2px 0 rgba(15,16,19,.55);
}
/* 押したときも世界観を保つ。艶を増やさず、沈むだけ */
.ag-cta:active::after{opacity:calc(.75 * var(--pt-print))}

/* --- 4-b. ラベル・スレート・タイムコード ---------------------------------
   古い印刷の「版ズレ」をごく僅かに出す。0.5px 以下。読みは一切崩さない。 */
.slate-reel,
.op-slate-reel,
.tc-hud-r{
  position:relative;
  text-shadow:.4px 0 0 rgba(152,0,0,.16), -.3px .3px 0 rgba(15,16,19,.10);
}
/* 琥珀のベタ面にインクムラ。.slate::before は縞が使っているので ::after */
.slate-reel::after,
.op-slate-reel::after,
.tc-hud-r::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:calc(.42 * var(--pt-print));
  background-image:
    linear-gradient(104deg, rgba(15,16,19,.16) 0%, rgba(15,16,19,0) 38%, rgba(255,255,255,.14) 100%),
    var(--ag-tex-grain-soft);
  background-repeat:no-repeat,repeat;
  background-size:100% 100%,120px 120px;
  mix-blend-mode:multiply;
}
/* 章名・タイムコードは、刷りが薄くなった側として少しだけ退色させる */
.slate-name,.op-slate-name{opacity:calc(1 - .12 * var(--pt-print))}
.slate-take,.op-tc{opacity:calc(.62 - .06 * var(--pt-print))}

/* カチンコの縞。均一なのが不自然なので、端を1本だけ掠れさせる */
.slate::before,
.op-slate::before{
  -webkit-mask-image:linear-gradient(to right,#000 0 62%,rgba(0,0,0,.55) 78%,#000 100%);
          mask-image:linear-gradient(to right,#000 0 62%,rgba(0,0,0,.55) 78%,#000 100%);
}

/* 見出しのインクムラ。**一部だけ**に付ける。
   .hero-title / .film-title / .end-mark には既に .ag-handprint が
   付いているので、ここでは二重掛けしない（濃度が落ちすぎる）。
   まだ何も付いていない .h-jp にだけ、薄い刷りムラを与える。 */
.h-jp{
  -webkit-mask-image:var(--ag-tex-print);
          mask-image:var(--ag-tex-print);
  -webkit-mask-size:360px 360px;
          mask-size:360px 360px;
  -webkit-mask-repeat:repeat;
          mask-repeat:repeat;
}

/* 台帳・クレジットの罫線を、均一な線に見せない */
.cr-row,.roll-row,.ledger-row,.sched-row{
  border-image:linear-gradient(to right,
    rgba(242,239,233,.05) 0%, rgba(242,239,233,.20) 14%,
    rgba(242,239,233,.09) 52%, rgba(242,239,233,.22) 78%,
    rgba(242,239,233,.06) 100%) 1;
}
.reel[data-tone="paper"] .cr-row,
.reel[data-tone="paper"] .roll-row,
.reel[data-tone="tan"] .ledger-row,
.reel[data-tone="tan"] .cr-row{
  border-image:linear-gradient(to right,
    rgba(20,22,26,.08) 0%, rgba(20,22,26,.30) 14%,
    rgba(20,22,26,.14) 52%, rgba(20,22,26,.32) 78%,
    rgba(20,22,26,.09) 100%) 1;
}

/* ============================================================ スマホ強化 */
/* 小さい画面では質感が埋もれる。面積あたりの情報が減るので、
   粒とムラをほんの少しだけ強める。可読性に関わる値は変えない。 */
@media (max-width:720px){
  :root{
    --pt-patina:1.25;
    --pt-print:1.15;
    --pt-fade:1.1;
    --pt-burn:1.1;
  }
  /* 写真の枠にフィルムの縁を1本入れる。スマホでは写真が主役になるため */
  .scope,.hero-frame{
    box-shadow:
      inset 0 0 0 1px rgba(242,239,233,.07),
      inset 0 1px 0 rgba(15,16,19,.34);
  }
  /* ボタンの面をもう少しだけ使い込む */
  .ag-cta::after{background-size:100% 100%,100% 100%,140px 140px}
  /* 画面端の焼けを、縦長の画面に合わせて上下へ寄せる */
  body::after{
    background:
      radial-gradient(140% 78% at 50% 44%,
        rgba(15,16,19,0) 56%,
        rgba(15,16,19,.12) 80%,
        rgba(15,16,19,.30) 100%),
      linear-gradient(to bottom,
        rgba(218,156,23,.038) 0%,
        rgba(218,156,23,0) 10%);
  }
}

/* ======================================================== 低減・省データ */
/* 動きではないので prefers-reduced-motion では消さない（質感は静止画）。
   通信量の削減が要求されている環境だけ、タイル画像の層を落とす。
   グラデーション由来のムラは残るので、面が真っ平らには戻らない。 */
@media (prefers-reduced-data:reduce){
  .reel,.band{background-image:none}
  .scope::after,.hero-frame::after,.yt-still::after,
  .ag-shield::after,.ag-cta::after{background-image:none}
  .reel::after,.band::after{
    background-image:linear-gradient(to bottom,var(--haze,transparent),rgba(0,0,0,0));
  }
}

/* 印刷時は質感を全部外す（インクの無駄＋紙の上では意味が無い） */
@media print{
  body::after,
  .scope::after,.scope::before,.hero-frame::after,.hero-frame::before,
  .yt-still::after,.ag-shield::after,.ag-cta::after{display:none}
  .reel,.band{background-image:none}
}