/* =========================================================================
   館 — 空間に立つ板の版面
   -------------------------------------------------------------------------
   2026-08-10、躯体（壁・床・天井・扉・灯り）は WebGL へ移った。
   このファイルが決めているのは、いまも HTML のまま空間に立っている板
   ——吊り看板・立て看板・銘板・作品・経歴・道具・受付——の見た目だけ。

   板は CSS3DRenderer が3次元に置く。位置も向きも大きさも JS が
   transform で書き込む。**ここで決めるのは板の中の組版だけ**
   （文字・余白・線・色）。位置は書かない。

   ■ position を書かないこと
       CSS3DObject が style 属性へ absolute を直接書き込むので当たらない。

   ■ pointer-events も書かないこと
       同じ理由で当たらない。押せるかどうかは JS 側で決めている
       （stage3d.js の html({hit:true})）。

   ■ 裏面は必ず消すこと
       消さないと、回り込んだときに巨大な鏡文字が空中に出る。

   躯体の見た目を触りたいときの行き先は assets/js/world3d.js の MAT。
   ========================================================================= */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* ■ ここに perspective を書かないこと。
       CSS 3D 版では視野角をここで決めていた（窓の幅に比例させていた）。
       いまは画角を stage3d.js が持っている（横 56 度で固定し、縦はそこから
       逆算する）。ここに書くと、CSS3D の層に別の遠近が二重にかかって
       WebGL の層とずれる。視野を変えたいときは stage3d.js の HFOV。
     背景は WebGL が描くまでの下地。canvas が乗れば見えなくなる。 */
  background:
    radial-gradient(120% 80% at 50% 42%, #14171b 0%, #0a0b0d 55%, #060708 100%);
  cursor: grab;
}
#stage.is-dragging { cursor: grabbing; }
#stage.is-pointing { cursor: pointer; }

/* -------------------------------------------------------------------------
   描画の2枚
   -------------------------------------------------------------------------
   躯体は WebGL（canvas）、文字の乗る板は CSS3D（DOM）。stage3d.js が
   この2枚を作って #stage に入れ、同じカメラで重ねる。

   ■ 上に乗る CSS3D の層で当たり判定を塞がないこと。
     塞ぐと、その下にある扉が押せなくなる。層そのものは素通しにして、
     押してよい板にだけ stage3d.html({hit:true}) で戻す。 */
.lyr {
  position: absolute;
  inset: 0;
}
.lyr--css { pointer-events: none; }
.lyr--css > div { pointer-events: none; }

/* #rig（CSS 3D 版の入れ物）と .room / .pl は無くなった。
   部屋の出し入れは Three.js の Group の visible でやっている。 */

/* 押せる板。
   ■ pointer-events はここでは決まらない。
     CSS3DObject が style 属性へ直接書き込むので、CSS からは
     !important でしか届かない。押せるかどうかは JS 側で決めている
     （stage3d.html の {hit:true}）。ここに書いてよいのは cursor まで。 */
.dsign, .card[data-story], .card[data-resume], .tool[data-tool] { cursor: pointer; }

/* -------------------------------------------------------------------------
   指している板（is-hot）
   -------------------------------------------------------------------------
   付けるのは main.js。:hover ではない（板は3次元に置いてあるので、
   指しているかどうかは光線とカメラで決まる）。

   ■ 「線の色が少し変わる」で済ませないこと。
     館は暗いので、細い線の色の差はまず読めない。枠を太らせ、光を回し、
     見出しの色まで変えて、板ぜんぶが灯ったように見せる。
   ------------------------------------------------------------------------- */
.card, .tool, .desk {
  transition: border-color .3s var(--ease), background .3s var(--ease),
              box-shadow .3s var(--ease);
}
.card.is-hot, .tool.is-hot, .desk.is-hot {
  border-color: var(--amber-lit);
  background: rgba(38, 28, 15, .95);
  box-shadow:
    0 0 0 2px rgba(226,137,44,.7),
    0 34px 90px rgba(0,0,0,.8),
    0 0 110px rgba(226,137,44,.4);
}
/* 見出しも一緒に灯す。板が大きいので、枠だけでは目が端まで行かない。 */
.card.is-hot .card__h,
.tool.is-hot .tool__h,
.desk.is-hot .desk__v { color: var(--amber-lit); }

/* 文字が乗る面は必ず裏を消す。
   消さないと、回り込んだときに巨大な鏡文字が空中に出る。 */
.card, .tool, .work, .desk, .dsign, .plate, .wallhead {
  backface-visibility: hidden;
}

/* -------------------------------------------------------------------------
   躯体・灯り・扉の見た目は、ここには無い
   -------------------------------------------------------------------------
   2026-08-10、描画を WebGL へ移した。壁・床・天井・扉・灯り・光だまり・
   霞は、もう DOM ではないので CSS では塗れない。
   材質は assets/js/world3d.js の MAT（色・粗さ・金属感）と、灯りの
   PointLight が決めている。

   消したもの … .sfc / .sfc--wall / .sfc--floor / .sfc--ceil / .lamp /
                 .pool / .pool--door / .haze / .door 一式（__leaf __jamb
                 __spill __seen）/ .dvoid / .room / .pl / #rig
                 コンクリートの粒とムラ（--concrete-grain / --concrete-blot）も
                 一緒に消した。躯体でしか使っていない

   ここから下に残っているのは、いまも CSS3D の DOM として画面に出ている板
   ——看板・立て看板・銘板・作品・経歴・道具・受付——の版面だけ。
   ここを消すと文字が全部崩れる。
   ------------------------------------------------------------------------- */

/* 吊り看板。壁から直角に突き出して、歩いてくる人の方を向く。
   これが無いと廊下から扉の存在が読めない。 */
.dsign {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;                 /* 溢れたら切るのではなく、そもそも溢れさせない */
  background: linear-gradient(180deg, rgba(14,16,19,.94), rgba(10,11,13,.82));
  border: 1px solid rgba(236,233,227,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.7);
  pointer-events: auto;
  cursor: pointer;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.dsign__rod {
  background: linear-gradient(180deg, rgba(236,233,227,.3), rgba(236,233,227,.06));
}
.dsign__num {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--dim);
}
.dsign__en {
  font-family: var(--en);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: rgba(236, 233, 227, .72);
  margin: 6px 0 5px;
  transition: color .45s var(--ease), text-shadow .45s var(--ease);
}
.dsign__ja {
  font-family: var(--jp);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--ash);
  white-space: nowrap;
}
.dsign__sub {
  font-family: var(--jp);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--dim);
  margin-top: 7px;
  white-space: nowrap;
}

/* 近づいた（射程に入った） */
.dsign.is-near {
  border-color: var(--amber);
  background: linear-gradient(180deg, rgba(28,20,11,.95), rgba(14,11,8,.85));
  box-shadow: 0 18px 44px rgba(0,0,0,.7), 0 0 44px rgba(226,137,44,.22);
}
.dsign.is-near .dsign__en {
  color: var(--amber-lit);
  text-shadow: 0 0 30px var(--amber-glow);
}

/* いま指している。
   ■ 近づいたときとの差を、はっきり付けること。
     以前は同じ見た目にしていたので、狙いが合っているのか分からなかった。
     地の色を反転させて、板そのものが灯っているようにする。
     一段浮かせて、押せることを形でも示す。 */
.dsign.is-hot {
  border-color: var(--amber-lit);
  background: linear-gradient(180deg, rgba(226,137,44,.92), rgba(184,104,26,.86));
  box-shadow:
    0 0 0 2px rgba(255,214,150,.9),
    0 24px 60px rgba(0,0,0,.75),
    0 0 90px rgba(226,137,44,.65);
}
.dsign.is-hot .dsign__num,
.dsign.is-hot .dsign__en,
.dsign.is-hot .dsign__ja,
.dsign.is-hot .dsign__sub {
  color: #16110a;
  text-shadow: none;
}
.dsign.is-hot::after { color: #16110a; }   /* 訪問済みの印も地の色に合わせる */

/* 一度入った部屋の印。
   ■ CSS 3D 版では扉の子要素（.door__seen）に出していた。扉が WebGL の
     面になって子要素を持てなくなったので、看板の側へ移した。
     見取り図にも同じ印が出るが、廊下を歩いているときは図を開いていない。
     「そこはもう見た」がその場で分かることに意味がある。 */
/* position は書かない。CSS3DObject が style 属性へ absolute を直接
   書き込むので、こちらの relative は当たらない。当たらなくても、
   その absolute 自身が位置の基準になるので ::after は正しく載る。 */
.dsign.is-seen::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 15px;
  line-height: 1;
  color: var(--amber);
  opacity: .8;
}

/* 扉が灯る／訪問済みの印も、ここには無い。
   扉は WebGL の面なので、灯りは材質の emissive と扉の前の PointLight で
   出している（world3d.js の markDoor / hotDoor / 扉を塗る）。
   訪問済みは、扉の子要素が持てなくなったので看板の ::after へ移した（上）。
   扉の前だけ床が明るいのも、板を敷くのではなく、その PointLight が
   実際に床を照らして出ている。 */

/* -------------------------------------------------------------------------
   玄関の立て看板
   -------------------------------------------------------------------------
   等身大パネル（ボール紙の切り抜き）のつもり。
   コンクリートの館の中で、ここだけ紙の質感と暖色にして浮かせる。
   ------------------------------------------------------------------------- */
/* 板は敷かない。人の形に切り抜いたものだけが立っている。
   四角い台紙を残すと、暗い廊下の中でただの掲示板に見えてしまう。 */
.standee {
  background: none;
  /* 切り抜き自体の落ち影。板が無くても床から立っているように見せる。 */
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}
.standee__fig {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 31%;
  bottom: 2%;
}
.standee__fig svg { width: 100%; height: 100%; display: block; }

/* 吹き出し。板の上に貼った紙。
   ■ 字の大きさは --fit 倍。倍率は world3d.js の 立て位置() が入れる。
     板は細い窓で 420 → 275 まで縮むが、ここが px の決め打ちだと字だけが
     元の大きさで残り、紙からあふれる（375×812 の実測：紙の内側 237×108 に
     対して中身が 131。「いらっしゃいませ」は 40px×8字＝320 で 2行に折れ、
     画面では紙の上へ 10.9px・下へ 10.3px はみ出して壁に重なっていた）。
     板の幅が 420 のときは 1 なので、広い窓の見た目は変わらない。 */
.standee__bubble {
  position: absolute;
  left: 50%;
  top: 3.5%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 86%;
  height: 25%;
  display: grid;
  place-content: center;
  background: #fbf4e4;
  color: #241c14;
  font-family: var(--jp);
  font-weight: 700;
  font-size: calc(40px * var(--fit, 1));
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
/* 字の入れ物。見た目は持たない。収まったかどうかを測るためだけにある
   （紙そのものを測ると、尻尾のぶんだけ必ずはみ出して見える）。 */
.standee__say { display: block; }
.standee__bubble span {
  display: block;
  margin-top: calc(8px * var(--fit, 1));
  font-weight: 500;
  font-size: calc(20px * var(--fit, 1));
  letter-spacing: .06em;
  color: #6b5b45;
}
/* 吹き出しの尻尾。字と一緒に縮めないと、紙が小さいのに尻尾だけ太く残る。 */
.standee__bubble::after {
  content: '';
  position: absolute;
  left: 46%;
  top: 100%;
  border: calc(16px * var(--fit, 1)) solid transparent;
  border-top-color: #fbf4e4;
  border-bottom: 0;
}

/* 足元の影。板が床に立っていることを示すだけのもの。 */
.standee__shadow {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 46%, transparent 74%);
}

/* -------------------------------------------------------------------------
   掲げるもの — 展示室の実績パネル
   ------------------------------------------------------------------------- */
.work {
  cursor: pointer;
  background: #0c0e10;
  box-shadow: 0 30px 70px rgba(0,0,0,.7);
  transition: box-shadow .45s var(--ease);
}
.work__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(.55) brightness(.5) contrast(1.05);
  transition: filter .55s var(--ease);
}
.work__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,7,9,.28) 0%, rgba(6,7,9,.86) 62%, rgba(6,7,9,.96) 100%);
}
/* 立体の面に乗る文字は、画面上では必ず縮む。
   壁との距離（camZ）で決まる縮尺ぶん、あらかじめ大きく組んでおくこと。
   展示室は約 0.7 倍で見えるので、ここの級数はその想定。 */
/* 文字は板の中央に置く。
   下端に寄せると、斜めから見たときに床際へ沈んで読みにくく、
   板の下が切れている場面では文字ごと消える。中央なら、どの角度から
   見ても、多少はみ出しても、いちばん見せたい数字と見出しが残る。 */
.work__body {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  padding: 0 40px;
  text-align: center;
}
/* ただし「このほか担当したもの」は一覧なので、中央寄せにしない。
   項目が真ん中に集まって、箇条書きに見えなくなる。 */
/* ■ 中央寄せの指定（top:50% / translateY）を打ち消すこと。
     一覧は縦に伸びるので、中央に置くと上へせり上がって板の外へ出る。
     実際、見出しと最初の項目が板の上にはみ出していた。
     一覧は上端から始めて、下に余白が残るほうが自然。 */
.work--etc .work__body {
  text-align: left;
  top: 0;
  transform: none;
  padding: 34px 40px;
}
/* 一覧が板からはみ出さないようにする。
   実績カードは数字と見出しだけだが、こちらは項目数ぶん縦に伸びる。
   項目名も長さがまちまちなので、折り返しと字送りの両方で押さえる。 */
.work--etc .etc__list { margin: 0; padding: 0; list-style: none; }
.work--etc .etc__list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 15px; line-height: 1.45;
}
.work--etc .etc__name {
  flex: 1 1 auto; min-width: 0;
  overflow-wrap: anywhere;
}
.work--etc .etc__thumb { flex: 0 0 auto; }
.work__no {
  font-family: var(--en);
  font-size: 16px;
  letter-spacing: .34em;
  color: var(--ash);
}
.work__fig {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 10px 0 12px;
  /* 板を 620→440 に縮めたので、字も一緒に落とす。
     板だけ縮めると、見出しが「集客チャネ／ルに育てた」のように
     不自然な位置で折り返して読みにくくなる。 */
  font-size: 52px;
  color: var(--chalk);
}
.work__fig .before { color: var(--dim); font-size: .56em; }
.work__title {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--chalk);
}
/* 額の光。近づくと灯る。 */
.work__lit {
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(236,233,227,.14);
  box-shadow: inset 0 0 0 0 rgba(226,137,44,0);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
  pointer-events: none;
}
/* 指しているとき。
   ■ 押せるものだと一目で分かること。
     以前は写真がわずかに明るくなる程度で、指しているのかどうか
     分からなかった。額の線をはっきり橙にして、写真の色を戻し、
     覆いの黒を薄くして「灯がついた」ように見せる。
   ■ transform は使えない。板の位置と向きは CSS3DRenderer が毎フレーム
     transform に書き込むので、ここで浮かせても即座に上書きされる。
     浮きの代わりに、影と枠の光で前へ出て見せる。 */
/* 素は grayscale(.55) brightness(.5)。色と明るさを取り戻して「灯る」。
   ■ 覆い（.work__veil）は薄くしないこと。あれが文字の下地なので、
     薄くすると写真の上で本文が読めなくなる。明るくするのは写真だけ。 */
.work.is-hot .work__img {
  filter: grayscale(0) brightness(.95) contrast(1.08) saturate(1.1);
}
.work.is-hot .work__lit {
  border-color: var(--amber-lit);
  box-shadow:
    inset 0 0 0 2px rgba(226,137,44,.75),
    inset 0 0 90px rgba(226,137,44,.34);
}
.work.is-hot {
  box-shadow:
    0 0 0 3px rgba(226,137,44,.55),
    0 46px 110px rgba(0,0,0,.85),
    0 0 130px rgba(226,137,44,.42);
}
.work.is-hot .work__title { color: var(--amber-lit); }

/* 並びの終わりに置く「このほか担当したもの」。
   数字が無いので、実績パネルとは別物だと分かる見た目にする。 */
.work--etc {
  background: rgba(16, 19, 22, .96);
  border: 1px solid rgba(236, 233, 227, .16);
}
.work--etc .work__body { top: 0; display: flex; flex-direction: column; justify-content: center; padding: 44px 44px; }
.etc__h {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.4;
  margin: 14px 0 22px;
}
.etc__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ash);
  padding: 9px 0;
  border-top: 1px solid rgba(236, 233, 227, .1);
}
/* 画像が1枚も無いときは、これまでどおりダッシュ付きの箇条書きに戻す。 */
.work--etc:not(.work--etc-pic) .etc__name::before {
  content: '—';
  color: var(--dim);
  margin-right: 12px;
}
/* 画像がある一覧は、行を詰めて写真ぶんの高さを作る。 */
.work--etc-pic .etc__list li { padding: 7px 0; font-size: 18px; }
.etc__thumb {
  flex: 0 0 auto;
  width: 86px;
  height: 56px;
  background-color: #0a0c0e;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(236, 233, 227, .14);
  filter: grayscale(.35) brightness(.85);
}
.etc__thumb--none {
  background-color: transparent;
  border: 1px dashed rgba(236, 233, 227, .16);
  filter: none;
}

/* 押せる板に添える一言。 */
.card__cta, .desk__cta {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--jp);
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--amber);
  border-bottom: 1px solid rgba(226, 137, 44, .5);
  padding-bottom: 3px;
}
.desk__cta { font-size: 15px; margin-top: 10px; }

/* 星印。いちばん強い1件にだけ付ける。 */
.work__star {
  position: absolute;
  top: 26px; left: 40px;
  font-family: var(--en);
  font-size: 14px;
  letter-spacing: .26em;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 5px 12px;
}

/* 展示室の見出し（壁に直接） */
.wallhead {
  pointer-events: none;
  color: rgba(236,233,227,.12);
  font-family: var(--en);
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   書斎 — 経歴の板。縦に積み上がる。
   ------------------------------------------------------------------------- */
.card {
  background: rgba(18, 20, 23, .9);
  border: 1px solid rgba(236,233,227,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  padding: 42px 48px;
}
.card__year {
  font-family: var(--en);
  font-size: 18px;
  letter-spacing: .24em;
  color: var(--amber);
}
.card__place {
  font-family: var(--en);
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--dim);
  margin-top: 6px;
}
.card__h {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.45;
  margin: 18px 0 14px;
}
.card__d {
  font-size: 20px;
  line-height: 1.85;
  color: var(--ash);
}

/* -------------------------------------------------------------------------
   工房 — 道具の板。円周に並べる。
   ------------------------------------------------------------------------- */
.tool {
  background: rgba(20, 23, 26, .88);
  border: 1px solid rgba(236,233,227,.13);
  box-shadow: 0 24px 60px rgba(0,0,0,.65);
  padding: 42px 44px 40px;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
/* 正面に来ている棚。「指している」とは別のことなので、見た目も分ける。
   ■ ここを橙にしすぎないこと。指したときの色（is-hot）と同じになり、
     回して正面に置いただけなのか、押せる状態なのかが区別できなくなる。
     正面は「白っぽく起きる」、指したときは「橙に灯る」で分ける。 */
.tool.is-front {
  border-color: rgba(236, 233, 227, .42);
  background: rgba(30, 33, 37, .94);
}
/* ■ 指しているほうを必ず勝たせること。
     is-hot の指定はこのファイルの上のほうにあり、詳細度が同じなので
     後ろにある is-front に上書きされる。正面の棚を指したときだけ
     色が変わらない、という形で出た。詳細度を1つ上げて押し切る。 */
.tool.is-front.is-hot {
  border-color: var(--amber-lit);
  background: rgba(38, 28, 15, .95);
}
.tool__k {
  font-family: var(--jp);
  font-size: 17px;
  letter-spacing: .34em;
  color: var(--amber);
}
.tool__h {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 42px;
  margin: 16px 0 16px;
}
.tool__d { font-size: 24px; line-height: 1.8; color: var(--ash); }

/* -------------------------------------------------------------------------
   受付
   ------------------------------------------------------------------------- */
.desk {
  background: rgba(18, 20, 23, .92);
  border: 1px solid rgba(236,233,227,.14);
  padding: 24px 38px;
  box-shadow: 0 26px 70px rgba(0,0,0,.7);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
  cursor: pointer;
}
/* 触れたときの反応。
   ■ CSS 版では :hover を禁じていた。あちらは卓が CSS 3D の板で、
     実際のマウス位置と見えている位置がずれ、指していない卓まで光ったため。
     WebGL 版では卓は CSS3D の DOM として画面上の正しい位置にあるので、
     :hover がそのまま使える。押せることが分かるように、はっきり返す。 */
.desk:hover {
  border-color: var(--amber);
  transform: translateZ(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.78), 0 0 0 1px rgba(226,137,44,.35);
}
.desk:hover .desk__v { color: var(--amber-lit); }
.desk:hover .desk__note { color: var(--amber); }
.desk__k { font-family: var(--en); font-size: 15px; letter-spacing: .3em; color: var(--dim); }
.desk__v { font-family: var(--jp); font-weight: 700; font-size: 30px; margin-top: 8px; word-break: break-all; }
.desk__note { font-size: 16px; color: var(--ash); margin-top: 6px; }
.desk__hold {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--amber);
  border: 1px dashed rgba(226,137,44,.5);
  padding: 4px 11px;
}

/* -------------------------------------------------------------------------
   玄関の銘板
   ------------------------------------------------------------------------- */
.plate { pointer-events: none; text-align: center; }
.plate__en {
  font-family: var(--en);
  font-weight: 300;
  font-size: 82px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(236,233,227,.9);
  text-shadow: 0 0 70px rgba(0,0,0,.9);
}
.plate__ja {
  font-family: var(--jp);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .7em;
  color: var(--ash);
  margin-top: 16px;
}
.plate__rule {
  width: 120px; height: 1px;
  background: var(--amber);
  margin: 28px auto;
}
.plate__lead {
  font-family: var(--jp);
  font-size: 15px;
  line-height: 2.1;
  color: var(--ash);
  max-width: 520px;
  margin: 0 auto;
}