/* ============================================================
   潜読 ──「海禁」を勝手に読む
   設計: notes/海禁考察サイト_設計.md
   デザイン言語は withbt.com のエディトリアル版を継承する。
   ・角丸なし / 影なし / ヘアラインだけで面を割る
   ・Bodoni Moda（題字）＋ Jost（小ラベル）＋ Noto Sans JP 300
   ・色を使わない。階層は「地色の明暗」と「余白」だけで出す
   会社ブランド（WBTロゴ・社名）は持ち込まない。設計言語だけを借りる。

   このサイト固有の要件:
   ・縦軸＝深さ＝過去。地色が場面ごとに一段ずつ落ちる
   ・場面境界は JS ではなく静的な縦グラデーション帯（.band）で作る。
     JSが死んでも階調が残り、音のクロスフェード区間と同じ帯を共有できる
   ・JSが死んでも本文は全部読める（html.jsready で「隠す」側を制御）
   ============================================================ */

:root{
  --ink:#272727;
  --body:#43464a;
  --mute:#6c6f74;
  --line:#dcdee2;
  --line2:#898c91;

  /* 暗面用 */
  --ink-d:#eceef0;
  --body-d:#b8bcc0;
  --mute-d:#8e9195;
  --line-d:rgba(255,255,255,.16);
  --line2-d:rgba(255,255,255,.34);

  --ease:cubic-bezier(0.073,0.01,0,1);
  --pad:clamp(20px,5vw,88px);
  --measure:38em;
  --hd:66px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:0}
body{
  background:#131416;color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  font-weight:300;line-height:2.05;letter-spacing:.012em;
  font-size:clamp(.9rem,.4vw + .82rem,.98rem);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;

  /* 日本語の折り返し。既定は禁則しか見ないので文節の途中で平気で割れる。
     auto-phrase は文節境界で折り返す（Chrome/Edge 119+）。
     Safari は未対応なので、そこは JS（BudouX）を入れるまで従来どおりになる。 */
  line-break:strict;
  word-break:auto-phrase;
}
/* 短い行ほど割れ方が目立つ。見出しと引きは行長を揃える */
h1,h2,.pull,#s0 .sub,.label{text-wrap:balance}
/* 本文は最終行が一語だけ残るのを避ける */
p,li,dd,figcaption,.lead,.fine{text-wrap:pretty}
::selection{background:currentColor;color:#131416}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
strong,b{font-weight:500}

/* ---------- reveal（JS が動いたときだけ隠す） ---------- */
html.jsready .rv{opacity:0;transform:translateY(26px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
html.jsready .rv.in{opacity:1;transform:none}
html.jsready [data-d="1"]{transition-delay:.14s}
html.jsready [data-d="2"]{transition-delay:.28s}

/* ---------- 深度ラベル ---------- */
.label{
  display:block;font-family:"Jost","Noto Sans JP",sans-serif;
  font-size:10.5px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mute);line-height:2.1;
}
.label::before{content:"";display:inline-block;width:0;height:1px;background:currentColor;
  vertical-align:middle;margin-right:0;transform:translateY(-1px);
  transition:width 1.1s var(--ease) .15s,margin-right 1.1s var(--ease) .15s}
html:not(.jsready) .label::before,.label.in::before{width:28px;margin-right:14px}
/* 深度ラベルも深さに連れて崩れる。ラベルは chrome であって本文ではないので、
   読めなくなっても読みは失われない。 */
.label{filter:url(#tvnoise-s)}
@media(prefers-reduced-motion:reduce){.label{filter:none}}

/* ============================================================
   header ── 最小構成。題字と SOUND トグルだけ
   mix-blend-mode:difference なので、明面でも暗面でも自動で反転する。
   背景色は絶対に敷かないこと（敷くと反転が壊れる）。
   ============================================================ */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px var(--pad);mix-blend-mode:difference;color:#fff;
  pointer-events:none;transition:transform .7s var(--ease);
}
header a,header button{pointer-events:auto}
/* 題字は潜るほど読めなくなる。深さ（--dive）に連れてノイズが乗り、
   走査線が入り、最後に消える。浮上すると同じ道を戻ってくる。
   JS が動かないときは --dive が未定義なので、ずっと素のまま出ている（＝壊れない）。
   SOUND トグルは消さない。途中で音を切れなくなるため。

   演出の理由: このサイトは「深いほど読めない」という一本で組んである。
   題字が読めなくなるのは、その一本を chrome の側で言い直しているだけ。
   文字は DOM に残るので、読み上げと <title> には影響しない。 */
.brand{font-family:"Bodoni Moda",serif;font-size:19px;letter-spacing:.04em;line-height:1;
  opacity:calc(1 - var(--dive,0) * .5);will-change:opacity,filter}
.brand .bt{display:inline-block;position:relative;filter:url(#tvnoise)}
/* 走査線。深さに連れて濃くなる。文字の色は触らず、上に重ねるだけ */
.brand .bt::after{
  content:"";position:absolute;inset:-2px -3px;pointer-events:none;
  background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 3px);
  opacity:calc(var(--dive,0) * .7);
}
/* 動きを止める設定では、ノイズも走査線も出さない。素直に薄くなるだけにする */
@media(prefers-reduced-motion:reduce){
  .brand .bt{filter:none}
  .brand .bt::after{display:none}
}
.brand small{display:block;font-family:"Jost",sans-serif;font-size:8.5px;font-weight:300;
  letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-top:5px}

/* SOUND トグル。WBT の #langbtn の意匠を借りる */
#snd{
  font:inherit;font-family:"Jost","Noto Sans JP",sans-serif;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:inherit;
  background:transparent;border:1px solid currentColor;padding:9px 14px;cursor:pointer;
  display:none;align-items:center;gap:10px;
  /* 潜行中も薄くなるだけで消さない。途中で音を切れなくなるため */
  opacity:calc(1 - var(--dive,0) * .6)}
html.jsready #snd{display:inline-flex}
#snd:hover{opacity:1}
#snd .dot{width:5px;height:5px;background:currentColor;opacity:.3;transition:opacity .4s}
#snd[aria-pressed="true"] .dot{opacity:1}

.skip{position:fixed;top:-100px;left:14px;z-index:200;background:#131416;color:#f2f3f5;
  font-family:"Jost","Noto Sans JP",sans-serif;font-size:12px;letter-spacing:.12em;
  padding:14px 20px;transition:top .3s var(--ease)}
.skip:focus{top:14px}

/* ============================================================
   場面と、場面のあいだのグラデーション帯
   ============================================================ */
.sc{
  background:var(--bg,#f2f3f5);
  padding:clamp(78px,13vh,150px) var(--pad) clamp(78px,13vh,150px);
  position:relative;isolation:isolate;
}
.sc .in-w{max-width:var(--measure);margin:0 auto;position:relative;z-index:2}

/* ---------- 動いている間は読めない ----------
   場面2で「潜るとは読むことで、居合わせることではありません」と書いている。
   スクロール中（＝移動中）は本文が滲み、止まると収まる。
   潜ることと読むことが別の行為であることを、挙動の側で言う。
   ・水面付近（--dive が小さい）では効かせない。上では常に読める
   ・上限 2.2px。読めなくするのではなく「読みにくい」で止める
   ・止まれば必ず収まる。読みは一文字も失われない */
html.jsready .sc .in-w{
  /* 水面では効かせないが、深さ0でも完全にゼロだと段差が出るので下駄を履かせる */
  filter:blur(calc(var(--vel,0) * (0.12 + var(--dive,0) * 0.88) * 2.8px));
  /* transition は付けない。付けると滲みが遅れて追いかけ、
     「止まった直後にいちばんぼける」という逆位相になる。
     なめらかさは JS 側の減衰（--vel）が担う。 */
}
@media(prefers-reduced-motion:reduce){
  html.jsready .sc .in-w{filter:none!important}
}

/* ---------- 場面の背景画 ----------
   絵は「何かの絵」ではなく「深さの光」。前に出さない。
   地色を --scrim の濃さで上から被せて、本文のコントラストを守る。
   画像が落ちても地色だけが残るので、レイアウトも可読性も壊れない。 */
.sc .bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sc .bg img{width:100%;height:100%;object-fit:cover;display:block}
.sc .bg::after{content:"";position:absolute;inset:0;
  background:var(--bg);opacity:var(--scrim,.66)}
html.jsready .sc .bg img{transform:scale(1.12);transition:transform 2s var(--ease)}
html.jsready .sc.in .bg img{transform:none}
@media(prefers-reduced-motion:reduce){
  html.jsready .sc .bg img{transform:none!important;transition:none!important}
}
.sc p{margin:0 0 1.6em;color:var(--body)}
.sc p:last-child{margin-bottom:0}

/* 暗面。文字色を反転する。場面3→4 の境界で切り替わる */
.sc.dk{color:var(--ink-d)}
.sc.dk p{color:var(--body-d)}
.sc.dk .label{color:var(--mute-d)}
.sc.dk .pull{border-top-color:var(--line2-d);border-bottom-color:var(--line-d)}
.sc.dk .tick{border-top-color:var(--line-d)}

/* 遷移帯。ここには文字を置かない（文字色の反転境界を跨ぐため） */
.band{
  height:clamp(58vh,66vh,90vh);
  background:linear-gradient(180deg,var(--from),var(--to));
}
.band.short{height:clamp(34vh,40vh,52vh)}
/* 音を殺し切るための帯。ここだけ長くとる（場面6→7） */
.band.tall{height:clamp(80vh,95vh,120vh)}

h1{font-weight:400;letter-spacing:-.045em;margin:0}
h2{font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.34;letter-spacing:-.045em;
  font-weight:400;margin:0 0 clamp(22px,3vw,36px)}

/* 引き。左揃えで大きく落とす */
.pull{
  margin:clamp(34px,4.5vw,64px) 0;padding:clamp(22px,2.6vw,34px) 0;
  border-top:1px solid currentColor;border-bottom:1px solid var(--line);
  font-size:clamp(1.05rem,1.9vw,1.55rem);line-height:1.66;letter-spacing:-.04em;
  font-weight:300;max-width:22em;
}
.pull strong{font-weight:400}

/* ---------- 場面0（水面）ヒーロー ---------- */
#s0{min-height:100svh;display:flex;align-items:center;
  padding-top:clamp(120px,18vh,190px);color:var(--ink-d)}
#s0 .kicker{font-family:"Jost","Noto Sans JP",sans-serif;font-size:10.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--mute-d);
  margin-bottom:clamp(18px,2.6vw,34px)}
#s0 .ttl{display:block;font-family:"Bodoni Moda","Noto Sans JP",serif;font-weight:400;
  font-size:clamp(3.4rem,12vw,9rem);line-height:.9;letter-spacing:.06em}
#s0 .sub{display:block;margin-top:clamp(18px,2.4vw,32px);
  font-size:clamp(1.05rem,2vw,1.6rem);line-height:1.5;letter-spacing:-.03em;
  font-weight:300;color:var(--ink-d)}
#s0 .lead{margin-top:24px;max-width:32em;font-size:.84rem;line-height:2.1;color:var(--body-d)}
#s0 .in-w{max-width:none}

/* 冒頭の出典導線。読んでいない人を先に原文へ送る。
   このサイトを二次的な位置に自分から置くための一段なので、目立たせすぎない。 */
#s0 .src{margin-top:clamp(22px,3vw,36px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line-d);
  max-width:34em;font-size:.76rem;line-height:2.05;color:var(--mute-d)}
#s0 .src a{color:var(--ink-d);border-bottom:1px solid var(--line2-d)}
#s0 .src a:hover{border-bottom-color:#f2f3f5}

/* 音の同意ゲート */
.gate{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4.5vw,58px);
  padding-top:clamp(24px,3vw,38px);border-top:1px solid var(--line-d)}
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 28px;
  border:1px solid var(--line2-d);color:var(--ink-d);
  font-family:"Jost","Noto Sans JP",sans-serif;font-size:11px;letter-spacing:.22em;
  position:relative;overflow:hidden;transition:color .5s var(--ease);cursor:pointer;
  background:transparent;font-weight:300}
.btn::before{content:"";position:absolute;inset:0;background:#eceef0;
  transform:translateY(101%);transition:transform .6s var(--ease);z-index:0}
.btn:hover{color:#131416}
.btn:hover::before{transform:none}
.btn > *{position:relative;z-index:1}
.gate .note{flex-basis:100%;font-size:.72rem;color:var(--mute-d);line-height:1.9;margin:0}

/* ---------- 常保の長尺スパース区間 ----------
   記録の薄さを紙面の薄さで実装する。刻みに数字は絶対に振らない
   （目盛りに数字を入れた瞬間、深度ゲージは年表になる） */
.sparse{padding-block:clamp(90px,15vh,170px)}
.ticks{margin:clamp(40px,7vh,90px) 0;height:150vh;display:flex;flex-direction:column;
  justify-content:space-between}
/* 刻みは下へ行くほど薄く、不揃いになる。記録が薄くなっていくということ。
   数字は絶対に振らない（振った瞬間に年表になる） */
.tick{border-top:1px solid var(--line);width:clamp(40px,7vw,96px)}
.tick:nth-child(even){width:clamp(20px,3.5vw,48px)}
.ticks .tick:nth-child(1){opacity:1}
.ticks .tick:nth-child(2){opacity:.82}
.ticks .tick:nth-child(3){opacity:.7;width:clamp(30px,5vw,70px)}
.ticks .tick:nth-child(4){opacity:.58}
.ticks .tick:nth-child(5){opacity:.46;width:clamp(52px,8vw,110px)}
.ticks .tick:nth-child(6){opacity:.34}
.ticks .tick:nth-child(7){opacity:.24;width:clamp(16px,3vw,38px)}
.ticks .tick:nth-child(8){opacity:.15}
@media(max-width:820px){.ticks{height:90vh}}

/* ---------- 日付装置（場面9） ----------
   JS が死んだら日付だけ消えて、前後の文はそのまま成立する。 */
.today{display:block;margin:clamp(26px,3.4vw,42px) 0 0;
  font-family:"Jost","Noto Sans JP",sans-serif;font-size:10.5px;letter-spacing:.28em;
  color:var(--mute);min-height:1em}
.today:empty{margin:0}

/* ---------- 題字のルビ ---------- */
#s0 ruby{ruby-position:over}
#s0 rt{font-family:"Jost","Noto Sans JP",sans-serif;font-size:.1em;font-weight:300;
  letter-spacing:.4em;color:var(--mute-d);text-transform:uppercase}

/* ---------- 名乗りの段（場面9） ---------- */
#s9{border-top:1px solid var(--line)}
#s9 .in-w{padding-top:clamp(10px,2vw,26px)}

/* ---------- 深度ゲージ ---------- */
#gauge{position:fixed;right:calc(var(--pad) * .5);top:22vh;bottom:22vh;z-index:40;
  width:1px;background:currentColor;opacity:0;color:var(--mute);
  transition:opacity .6s var(--ease);pointer-events:none;mix-blend-mode:difference}
html.jsready #gauge{opacity:.34;color:#fff}
#gauge i{position:absolute;left:0;top:0;width:1px;height:0;background:currentColor;opacity:1}
#gauge b{position:absolute;right:14px;top:0;transform:translateY(-50%);
  font-family:"Jost","Noto Sans JP",sans-serif;font-size:9px;font-weight:300;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  writing-mode:vertical-rl}
@media(max-width:900px){
  #gauge{left:0;right:0;top:0;bottom:auto;height:1px;width:auto}
  #gauge i{width:0;height:1px}
  #gauge b{display:none}
}

/* ---------- 奥付 ---------- */
.colophon{background:#0f1012;color:var(--body-d);
  padding:clamp(60px,9vw,110px) var(--pad) 40px;
  border-top:1px solid rgba(255,255,255,.1)}
.colophon .in-w{max-width:var(--measure);margin:0 auto}
.colophon h2{color:var(--ink-d);font-size:clamp(1rem,1.5vw,1.2rem)}
.colophon dl{border-top:1px solid rgba(255,255,255,.12)}
.colophon dl > div{display:grid;grid-template-columns:minmax(96px,140px) 1fr;
  gap:clamp(14px,3vw,34px);padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.colophon dt{font-family:"Jost","Noto Sans JP",sans-serif;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d);padding-top:.4em}
.colophon dd{font-size:.8rem;line-height:2.05}
.colophon a{border-bottom:1px solid rgba(255,255,255,.3)}
.colophon a:hover{border-bottom-color:#f2f3f5}
.colophon .fine{margin-top:clamp(30px,4vw,52px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);font-size:.72rem;line-height:2;
  color:var(--mute-d)}

/* ---------- 開発中バッジ（M0。公開前に必ず外す） ---------- */
.wip{position:fixed;left:12px;bottom:12px;z-index:98;
  background:rgba(19,20,22,.92);color:#f2f3f5;border:1px solid rgba(255,255,255,.2);
  font-family:"Jost","Noto Sans JP",sans-serif;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 13px;line-height:1.8;max-width:min(340px,84vw)}
.wip b{display:block;color:#ffb454;font-weight:400;margin-bottom:4px}

/* ---------- a11y / motion / print ---------- */
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.jsready .rv{opacity:1!important;transform:none!important;transition:none!important}
  .label::before{width:28px;margin-right:14px;transition:none}
  *{transition-duration:.01ms!important}
}

@media print{
  header,#gauge,#snd,.gate,.wip,.skip{display:none!important}
  html.jsready .rv{opacity:1!important;transform:none!important}
  html,body{background:#fff;color:#000}
  .sc,.sc.dk{background:#fff!important;color:#000!important;padding:8mm 0}
  .sc p,.sc.dk p{color:#000!important}
  .band,.ticks{display:none!important}
  .colophon{background:#fff;color:#000}
  .colophon dt,.colophon dd,.colophon .fine{color:#000}
}

/* ---------- BudouX（Safari 等・auto-phrase 非対応環境） ----------
   本文を <budoux-ja> で包んで <wbr> を挿す。包んでも行組みは変えたくないので
   inline のまま。読み込まれなければ要素自体が生えないので、何も起きない。 */
budoux-ja{display:inline}