/* ============================================================================
   en. LP — src/_lp/en-x/en-x.css
   ----------------------------------------------------------------------------
   読み込み順は tokens.css → shell.css → themes.css → **このファイル**。
   ★ themes.css には **en の項目が無い**（botch / pareidol / koborebi の3本だけ）。
     つまり en は tokens.css の :root をそのまま受けている。ここで
     html[data-app="en"] を書けば、上書きではなく «初めて与える» ことになる。

   【この案の決め】
   ① **差し色を持たせない。**本文の結び「増やさないことで残るものがある」と
      逆向きになるため。botch と同じく無彩のみ。
   ② 代わりに **丸み** が identity（Ryo さん「円をテーマにしているので
      丸みは持たせたい」）。効かせ方は3つ:
        ・面の角を大きく（--r-lg より更に大きい --en-r）
        ・節の番号を «丸» にする（数字を置かない）
   ③ 常時ループは **0本**（2026-08-09 に描いたレコード盤を落とした。
      実際に回っている映像が入ったら、動くものはそれ1本になる）。
   ========================================================================== */


/* ═══ §1  トークン ════════════════════════════════════════════════════════ */

html[data-app="en"]{
  color-scheme: light;

  --bg          : #F3F3F3;
  --surface     : #FFFFFF;
  --surface-2   : #E7E7E7;
  --fg-1        : #101010;
  --fg-2        : #4A4A4A;
  --fg-3        : #656565;
  --rule        : rgba(16,16,16,.12);
  --rule-2      : rgba(16,16,16,.07);
  --rule-hair   : rgba(0,0,0,.08);

  /* ★ 差し色は置かない。--accent は «無彩の強い側» を指す（下線や輪郭用）。 */
  --accent      : #101010;
  --accent-line : rgba(16,16,16,.22);
  --accent-soft : rgba(16,16,16,.05);
  --accent-ink  : #F3F3F3;

  --shadow-card : 0 4px 18px rgba(0,0,0,.07);

  --font-display: var(--font-body);
  --font-num    : var(--font-body);

  /* --- ★② 丸み ---------------------------------------------------------- */
  --en-r        : 22px;      /* 面の角。--r-lg（16px）より大きい */
  --btn-r       : var(--r-pill);

  /* --- 節の段（ポータルと同値）------------------------------------------ */
  --en-sec-gap  : clamp(56px,  7vw, 88px);
  --en-head-pad : clamp(12px, 1.4vw, 18px);
  --en-head-gap : clamp(28px, 3.4vw, 44px);
  --en-fs-h1    : clamp(26px, 1.10rem + 2.40vw, 42px);
}

@media (prefers-color-scheme: dark){
  html[data-app="en"]{
    color-scheme: dark;
    --bg          : #0F0F0F;
    --surface     : #191919;
    --surface-2   : #232323;
    --fg-1        : #F2F2F2;
    --fg-2        : #B9B9B9;
    --fg-3        : #949494;
    --rule        : rgba(242,242,242,.14);
    --rule-2      : rgba(242,242,242,.08);
    --rule-hair   : rgba(255,255,255,.10);
    --accent      : #F2F2F2;
    --accent-line : rgba(242,242,242,.24);
    --accent-soft : rgba(242,242,242,.06);
    --accent-ink  : #0F0F0F;
    --shadow-card : 0 4px 18px rgba(0,0,0,.5);
  }
}


/* ═══ §2  版面 ════════════════════════════════════════════════════════════
   ★ --shell-max-wide は «中身の幅» なので、padding を内側に取るなら
     上限は 1120 ＋ gutter×2（Pareidol 案で踏んだ罠。3案とも同じ書き方）。 */
.lpen{
  max-inline-size: calc(var(--shell-max-wide, 1120px) + var(--gutter, 40px) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 5vw, 40px));
  padding-block-end: clamp(64px, 9vw, 120px);
}
.lpen .en-act{ margin-block-start: var(--en-sec-gap); }


/* ═══ §3  節の見出し ══════════════════════════════════════════════════════
   ポータルの .dw-sec__head / .dw-sec__h を値ごと写した。
   ★② 番号は **丸**。数字を置かず、円ひとつを置く。
     「〇一・〇二…」のような順番の主張はしない（本文は手順ではなく、
     アプリの性質を並べたものなので、番号を振ると嘘の順番ができる）。 */
.lpen .sec-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-block-end: var(--en-head-pad);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--en-head-gap);
}
.lpen .sec-index{
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  border: 1px solid var(--fg-1);
  /* baseline の行に丸を «字と同じ高さ» で置く。inline-block で
     baseline に乗せ、少しだけ持ち上げて字の中心に合わせる。 */
  display: inline-block;
  transform: translateY(-1px);
}
.lpen .sec-head__h{
  margin: 0;
  font-size: clamp(16px, .74rem + .66vw, 21px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--fg-1);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §4  名のり ══════════════════════════════════════════════════════════ */

.lpen .en-stage{
  padding-block: clamp(56px, 11vh, 108px) clamp(8px, 2vw, 20px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px){
  .lpen .en-stage{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.lpen .en-stage__in{ max-inline-size: 46em; min-inline-size: 0; }

.lpen .en-brand{
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
/* 枠の規則は icons.json の frame に合わせる（角丸 22.5%）。3案と同値。 */
.lpen .en-appicon{
  flex: 0 0 auto;
  inline-size: clamp(38px, 3.4vw, 48px);
  block-size: clamp(38px, 3.4vw, 48px);
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule-hair);
}
.lpen .en-appicon img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.lpen .wordmark{
  display: inline-block;
  font-size: clamp(19px, 1.1vw + 13px, 24px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--fg-1);
  text-decoration: none;
}
.lpen .tagline{
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--fg-3);
}
.lpen .en-h1{
  margin: clamp(22px, 3.4vw, 40px) 0 0;
  font-size: var(--en-fs-h1);
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: .01em;
  color: var(--fg-1);
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* ★ タイトル横のアイコン。器は **角の丸い正方形** のまま（icons.json の
   frame と同じ 22.5%）。回るのは **絵の中の白い輪郭の円だけ**。
   ★★ 位置は PIL で実測（en.png 512px／白い円は x 84–428・y 78–422）:
       left 84/512 = 16.41%   top 78/512 = 15.23%   幅 345/512 = 67.38%
     重ねる絵は同じアイコンからの切り出しなので、0度では下と完全に一致する。
   ★ 器に overflow: clip。回した正方形は外接矩形が √2 倍になるので、
     切らないと横スクロールが出る（390px で 17px 出たのを実測して直した）。 */
.lpen .en-mark{
  position: relative;
  inline-size: min(100%, 300px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 22.5%;
  overflow: clip;
  box-shadow: 0 0 0 1px var(--rule-hair), 0 6px 22px rgba(0,0,0,.08);
}
.lpen .en-mark__base{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.lpen .en-mark__ring{
  position: absolute;
  inset-inline-start: 16.41%;
  inset-block-start: 15.23%;
  inline-size: 67.38%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  will-change: transform;
}
html.js .lpen .en-mark__ring{
  animation: en-spin 48s linear infinite;
  animation-delay: -6s;
}

.lpen .lead{
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  max-inline-size: 34em;
  font-size: clamp(14px, .68rem + .5vw, 16.5px);
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §5  回る円 — **2026-08-09 に廃止** ═══════════════════════════════════
   描いた同心円のレコード盤（.en-disc / @keyframes en-spin）をここに置いていたが、
   Ryo さんが **実際に回っている様子を撮ってくる** ので落とした（668 バイト）。
   ★ これで **このページの常時ループは 0 本**。動画を入れたら、
     «ずっと動くもの» はそちらに1本だけ、という形になる。 */

/* ═══ §6  本文 ════════════════════════════════════════════════════════════ */

.lpen .en-body{ max-inline-size: 38em; }
.lpen .en-body p{
  margin: 0;
  font-size: clamp(14px, .66rem + .48vw, 16px);
  line-height: 2.05;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lpen .en-body p + p{ margin-block-start: 1.5em; }


/* ═══ §7  ★ 図版（アプリの実画面）════════════════════════════════════════
   ★ 出典は en/docs/store/screenshots の **01_clean**（審査に出した 03_submitted は
     説明の帯が焼き込まれていて、ページの見出しと文が二重になるので使わない）。
   ★ 実画面は 1170×2532（0.462 の縦長）。640px 幅の JPEG に落としてある。
   ★ 描いた円6つ（.en-row）はここに在ったが、05_collection に差し替えて削除した。
   ======================================================================== */
.lpen .en-shot{ margin: clamp(28px, 3.4vw, 44px) 0 0; min-inline-size: 0; }
/* ★ 器を画像と同じ幅にしておく。ブロックのまま（版面いっぱい）だと、
   下の % 指定の重ね位置が画像ではなく器を基準にしてずれる。 */
/* ★ 器も切る。重ねた円（border-radius:50%）を回すと外接矩形が √2 倍に
   なるので、切らないと横スクロールの種になる。実画面の角丸は
   画像自身が持っているので、四角で切っても見え方は変わらない。 */
.lpen .en-frame{ position: relative; inline-size: min(100%, 300px); overflow: clip; }
.lpen .en-shot img{
  display: block;
  inline-size: min(100%, 300px);
  block-size: auto;
  border-radius: var(--en-r);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--rule-hair), 0 6px 22px rgba(0,0,0,.10);
}

/* ═══ ★ 円の中だけを回す ═══════════════════════════════════════════════
   実画面から写真の円だけを切り出して、同じ位置へ重ねる。
   ★★ 大きさは **アプリのソースから出した確定値**（当てずっぽうではない）。
     lib/theme.dart:
       arcRing = 15.0 / photoViewportFraction = 0.86 / photoMax = 348.0
     hinomaru_screen.dart:
       side = min( (width - arcRing*2) * 0.86, photoMax, ... )
     390pt の端末なら (390 - 30) * 0.86 = 309.6pt ＝ 3倍で **928.8px**。
     画像幅 1170 に対して **79.38%**、左端は (1170-928.8)/2/1170 = **10.31%**。
     ★ 縦位置だけは画面ごとに違う（上のバーと下の帯の高さが違う）ので、
       半径を固定したうえで «内と外の差がいちばん大きい中心» を探して実測した:
         01_player 1023（36/36 一致）／02_calendar 1056／
         03_clock 1142（白いケーキで差が小さいので色距離で測り直した）／
         04_timer 1103
     ＝ --top をインラインで渡している。
   ★ 白い輪（r 484〜491）は **下の実画面のもの**なので回らない。
     アプリでも輪は止まっていて中の写真だけが回るので、見え方が一致する。
   ★★ 1周 48秒。本文「回る速さは変えられます。止めておくこともできます」の
     いちばん遅い側。
     ★ 4枚とも回すが、**位相をずらす**（--spin-delay）。同時に同じ角度で
       回っていると «同じ絵が4つ» に見えて、かえって作り物っぽくなる。
   ★ 動かすのは transform だけ（GPU に載る）。72KB の JPEG 1枚で、
     動画なら数MBになるところを置き換えている。 */
/* ★★ セレクタの詳細度に注意。下の `.lpen .en-shots .en-shot img`（0,3,1）が
   `inline-size: 100%` を持っているので、`.lpen .en-frame--spin .en-spin`（0,3,0）
   では **負けて円が枠いっぱいに広がる**（実測して踏んだ）。
   `.en-shot` を1つ挟んで (0,4,1) にして必ず勝たせる。 */
.lpen .en-shot .en-frame--spin img.en-spin{
  position: absolute;
  /* ★ 左と幅は **どの画面でも同じ**（円は横中央・大きさは固定）。
     縦だけ画面ごとに違うので、--top をインラインで渡す。 */
  inset-inline-start: 10.31%;
  inset-block-start: var(--top);
  inline-size: 79.38%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: none;
  background: none;
  will-change: transform;
}
html.js .lpen .en-shot .en-frame--spin img.en-spin{
  animation: en-spin 48s linear infinite;
  animation-delay: var(--spin-delay, 0s);
}
@keyframes en-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* パネルの3枚は横に並べる。«選べる» ことが並びで伝わる。
   ★ 390px でも3列（1枚 106px）。細かいところは拡大表示で見てもらう。 */
.lpen .en-shots{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 28px);
  margin-block-start: clamp(28px, 3.4vw, 44px);
}
.lpen .en-shots .en-shot{ margin: 0; }
/* ★ 器も列いっぱいに。300px のままだと、重ねた円の % の基準が
   画像ではなく器になってずれる。 */
.lpen .en-shots .en-frame{ inline-size: 100%; }
.lpen .en-shots .en-shot img{ inline-size: 100%; }

/* ═══ §8  並び（刷り／出しておけるもの）══════════════════════════════════
   ★ 一度落としたが戻した（Ryo さん「減りすぎです」）。とくに
     「眺めているあいだに」は **スクリーンショットでは伝わらない**
     （どの画面も «いま出ているパネル» しか写らないので、«選べる» ことと
       «何が選べるか» は文でしか言えない）。 */
.lpen .en-list{
  list-style: none;
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 0;
  max-inline-size: 44em;
  border-block-start: 1px solid var(--rule-2);
}
.lpen .en-list li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding-block: 14px;
  border-block-end: 1px solid var(--rule-2);
}
.lpen .en-list b{
  flex: 0 0 auto;
  min-inline-size: 5.5em;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-1);
}
.lpen .en-list span{
  min-inline-size: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--fg-2);
  word-break: auto-phrase;
}
.lpen .en-body + .en-list{ margin-block-start: clamp(18px, 2.4vw, 26px); }
.lpen .en-list + .en-body{ margin-block-start: clamp(22px, 3vw, 30px); }

/* ═══ §9  結び ════════════════════════════════════════════════════════════ */

.lpen .en-closing{
  margin-block-start: var(--en-sec-gap);
  padding-block-start: clamp(32px, 4vw, 52px);
  border-block-start: 1px solid var(--rule);
  max-inline-size: 38em;
}
.lpen .en-closing h2{
  margin: 0;
  font-size: clamp(20px, .9rem + 1.5vw, 30px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--fg-1);
}
.lpen .en-closing p{
  margin: 1.4em 0 0;
  font-size: clamp(14px, .66rem + .48vw, 16px);
  line-height: 2.05;
  color: var(--fg-2);
  word-break: auto-phrase;
}
.lpen .en-closing__last{ color: var(--fg-1); }


/* ═══ §10  扉 ═════════════════════════════════════════════════════════════
   ★ ストアのリンクは無い（未配信）。状態だけを言う。
   ★② 面の角は --en-r（22px）。3案の中でここだけ丸い。 */
.lpen .en-gate{
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--en-r);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule-hair), var(--shadow-card);
  max-inline-size: 40em;
}
.lpen .en-gate .tag{
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--accent-soft);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--fg-2);
}
.lpen .en-gate h2{
  margin: 16px 0 0;
  font-size: clamp(19px, .9rem + 1.1vw, 27px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-1);
}
.lpen .en-gate p{
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--fg-2);
}


/* ═══ §11  入場（一度きり）════════════════════════════════════════════════ */

html.js .lpen [data-in]{ opacity: 0; }
html.js .lpen [data-in].is-in{
  opacity: 1;
  animation: dw-fade-up var(--dur-in, .5s) var(--ease-inout) backwards;
}
html.js .lpen .en-stage .tagline.is-in{ animation-delay: calc(var(--dur-step, .06s) * 1); }
html.js .lpen .en-stage .en-h1.is-in  { animation-delay: calc(var(--dur-step, .06s) * 2); }
html.js .lpen .en-stage .lead.is-in   { animation-delay: calc(var(--dur-step, .06s) * 3); }

@media print{
  html.js .lpen [data-in],
  html.js .lpen [data-in].is-in{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* ★ 打ち込みの1文字も同じ理由で立てる（紙に «打たれる» は無い）。 */
  html.js .lpen .en-cap__c{ animation: none !important; opacity: 1 !important; }
}


/* ═══ §12  ★ prefers-reduced-motion: reduce ═══════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  html .lpen,
  html .lpen *{ transition: none; }
  html .lpen *::before,
  html .lpen *::after{ transition: none; }
  html .lpen,
  html .lpen *{ animation-delay: 0s !important; }

  html.js .lpen [data-in],
  html.js .lpen [data-in].is-in{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* ★★★ 打ち込みは **やらずに、最初から全部出す。**
     §7b は1文字ずつ opacity を 0 → 1 にする作りなので、animation を
     止めるだけだと **素の opacity: 0 が残って説明文がまるごと消える。**
     shell.css §6 が reduce のとき duration を .01ms にするので «一瞬で
     終わるから同じ» に見えるが、**描かれていないタブではその .01ms が
     永久に終わらない**（ポータル §11 が記録している罠。実際にここで踏んだ）。
     だから opacity を !important で立てる。 */
  html.js .lpen .en-cap__c{ animation: none !important; opacity: 1 !important; }

  /* ★★ 円は **止めるが、消さない。**回転を切っても素の姿（0度）がそのまま
     «円の写真» なので、絵としては1pxも欠けない。下の実画面と同じ絵が
     重なっているだけの状態になる。 */
  html.js .lpen .en-shot .en-frame--spin img.en-spin{ animation: none !important; }
  html.js .lpen .en-mark__ring{ animation: none !important; }
}


/* ═══ §7b  ★ 打ち込まれる説明（DotGothic16）═════════════════════════════
   Ryo さん「Clean 使ってもいいけど、**同じフォントで実際に文字を打ち込んで
   いる演出**がほしい」。
   ★ 帯つき（03_submitted）は文字が画像に焼き込まれていて動かせないので、
     帯の無い 01_clean を使い、**同じ文言・同じ書体を HTML の文字として組む**。
     文言は tools/caption.py の CAPTIONS と1文字も違わない。

   ★★ 書体は DotGothic16（アプリと審査用の帯で使っているものと同一）。
     **SIL Open Font License 1.1**（Copyright 2020 The DotGothic16 Project
     Authors）。Web への埋め込みは OFL で認められている。
     ★ 使う74字だけに絞ってある（2021KB → 23.1KB）。文言を変えたら
       サブセットを作り直すこと。作り直しは fontTools の Subsetter。

   ★★★ 「打ち込む」の作り方
     ・1文字ずつ <span> に割って、順に opacity を 0 → 1 にする。
       **幅は最初から確定している**（span は常に版面を占める）ので、
       打っているあいだにレイアウトが動かない。
       width を steps() で伸ばす昔ながらの手だと、行が折り返した瞬間に
       破綻するし、毎フレーム reflow が走る。
     ・字と字の間は **60ms**。人が打つ速さより少し速い、機械の速さ。
     ・見出しを打ち終わってから副題が始まる（--nt × 60ms の遅延）。
     ・**カーソルは置かない。**縦棒を1本足すと «入力欄» に見えるが、
       ここは入力欄ではなく «刷り上がっていく» ところなので。

   ★ 読み上げには1文字ずつ渡さない。span に割ると「い・ち・ま・い」と
     読まれるので、包みに aria-label で通しの文を持たせ、中身は隠す。
   ======================================================================== */

@font-face{
  font-family: "DotGothic16 subset";
  src: url("/assets/fonts/dotgothic16-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.lpen .en-cap{
  display: block;
  margin-block-start: clamp(14px, 1.8vw, 20px);
  font-family: "DotGothic16 subset", var(--font-body);
  /* ドット書体は字面が小さいので、本文より少し大きめに置く */
  line-height: 1.5;
  max-inline-size: 22em;
}
.lpen .en-cap__t{
  display: block;
  font-size: clamp(17px, .78rem + .72vw, 23px);
  letter-spacing: .02em;
  color: var(--fg-1);
}
.lpen .en-cap__s{
  display: block;
  margin-block-start: 6px;
  font-size: clamp(12px, .56rem + .38vw, 14px);
  letter-spacing: .02em;
  color: var(--fg-3);
}
/* ★ 1文字ずつ。素は «まだ打たれていない» ＝ 透明。
   ★★ ただし **JS が動かない環境では最初から見えている**こと。
     html.js が付いたときだけ透明にする。 */
.lpen .en-cap__c{ display: inline-block; white-space: pre; }
html.js .lpen .en-cap__c{ opacity: 0; }

/* 画面に入ったら打ち始める（.is-in は JS §A が付ける）。 */
html.js .lpen .en-cap.is-in .en-cap__c{
  animation: en-type .001s steps(1, end) forwards;
}
html.js .lpen .en-cap.is-in .en-cap__t .en-cap__c{
  animation-delay: calc(var(--i) * 60ms);
}
/* 副題は見出しを打ち終わってから。--nt は見出しの字数。 */
html.js .lpen .en-cap.is-in .en-cap__s .en-cap__c{
  animation-delay: calc((var(--nt) + 2 + var(--i)) * 60ms);
}
@keyframes en-type{ to{ opacity: 1; } }

/* 読み上げ用。包みが aria-label を持ち、中の1文字は読ませない。 */
.lpen .en-cap__t,
.lpen .en-cap__s{ }


/* ═══ §8b  ★ 「刷り」の行を、その刷りの見た目にする ══════════════════════
   Ryo さん「それぞれの行の背景をその刷りのスタイルに変えてほしい。
   そしたらパッと見で分かりやすいかなと。」

   ★★ **この案の «無彩だけ» の例外はここだけ。**紙と色あせは温かみが
     無いと «紙» にも «日に焼けた» にも見えないので、彩度を持たせている。
     ただし字は載せない側で持つ ―― 地だけを染めて、字は --fg-1 のまま。
   ★ 4行とも字のコントラストを実測して 4.5:1 を超えることを確かめてある
     （§8b の下に実測値）。
   ★ 画像は使わない。全部 CSS のグラデーションなので、増える重さは 0。
   ======================================================================== */

.lpen .en-list li.ink{
  position: relative;
  padding-inline: 14px;
  border-radius: 10px;
  border-block-end-color: transparent;
  margin-block-end: 6px;
}
/* 紙 …… 温かい紙。ごく細かい «斑» を2枚のグラデーションで作る。 */
.lpen .ink--paper{
  background-color: #EFE9DC;
  background-image:
    radial-gradient(rgba(150,130,95,.10) .6px, transparent .7px),
    radial-gradient(rgba(150,130,95,.07) .6px, transparent .7px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}
/* 色あせ …… 日に焼けた写真。上から下へ抜けていく。 */
.lpen .ink--faded{
  background-color: #EDE6DA;   /* ★ 測れるように地の色も持たせる */
  background-image: linear-gradient(160deg, #EFE6D8 0%, #EDE7DE 45%, #E9E4DE 100%);
}
/* モノクロ …… 黒インク一色。均一な灰。 */
.lpen .ink--mono{ background-color: #E4E4E4; }
/* 網点 …… 新聞の点々。**点そのものを出す**（説明ではなく見本）。 */
.lpen .ink--halftone{
  background-color: #EDEDED;
  background-image: radial-gradient(rgba(16,16,16,.30) 1.1px, transparent 1.3px);
  background-size: 5px 5px;
}

@media (prefers-color-scheme: dark){
  .lpen .ink--paper{
    background-color: #221F1A;
    background-image:
      radial-gradient(rgba(220,200,165,.10) .6px, transparent .7px),
      radial-gradient(rgba(220,200,165,.07) .6px, transparent .7px);
  }
  .lpen .ink--faded{ background-color: #211E19; background-image: linear-gradient(160deg, #241F19 0%, #201E1B 45%, #1C1B1A 100%); }
  .lpen .ink--mono{ background-color: #222222; }
  .lpen .ink--halftone{
    background-color: #1B1B1B;
    background-image: radial-gradient(rgba(242,242,242,.26) 1.1px, transparent 1.3px);
  }
}


/* ═══ §8c  ★ 3枚並びのキャプションを詰める ═══════════════════════════════
   Ryo さん「下の3枚は改行が変になってる」。
   1枚あたり 356px（1280px のとき）しかないところへ、1枚もの用の級数
   （見出し 23px・副題 14px）を当てていたので、2〜3行に折り返して
   行の切れ目がばらばらになっていた。
   ★ 並びの中だけ級数を落とし、**折り返す位置を語の切れ目に寄せる**
     （word-break: auto-phrase）。器の幅にも合わせる。 */
.lpen .en-shots .en-cap{ max-inline-size: none; }
.lpen .en-shots .en-cap__t{
  font-size: clamp(13px, .58rem + .42vw, 16px);
  line-height: 1.45;
  word-break: auto-phrase;
  text-wrap: balance;
}
.lpen .en-shots .en-cap__s{
  font-size: clamp(10.5px, .5rem + .24vw, 12px);
  line-height: 1.6;
  word-break: auto-phrase;
  text-wrap: pretty;
}