/* ============================================================
   Lo KOMORE — 読み物（/journal）の記事テンプレート

   ねらい: 記事を1本ごとにレイアウトから考え直さずに済むよう、
   「見出し・段落・写真・引用・締め・導線」の決まった部品の並びだけで組めるようにする。
   記事側のHTMLはこのファイルを読み込み、部品のクラスを並べるだけでよい。

   正本は検討用キャンバスのアートボード tools/design-kit/artboards/Journal.dc.html。
   寸法と決めごとの根拠は PR #155 と tools/design-kit/README.md にある。
   見た目を変えるときは、アートボードとこのファイルの両方を直す。

   本文の寸法は、日本語のロングリードで実測した2誌に合わせている。
     CHAGOCORO（伊藤園）      … 本文700px / 16px / 行間2.2  / 1行44字 / 段落間30px
     中川政七商店の読みもの   … 本文640px / 16px / 行間2.25 / 1行40字 / 段落間20px
   どちらも「画面が広くても本文は40字前後で止める」「章見出しの上だけ大きく空ける」。
   Lo KOMORE の本文は17pxなので、40em = 680px を本文カラムにしている。

   原稿の扱い（tools/design-kit/README.md より）
     ・原稿はそのまま置く。要約も段落の間引きもしない
     ・写真の説明は、原稿に書かれているものだけを載せる。こちらで文を作らない
     ・もくじは既定で出さない
   ============================================================ */

.rd{
  --rd-fs:17px;          /* 本文 */
  --rd-col:40em;         /* 本文カラム。17px×40em = 680px ≒ 1行40字 */
  --rd-wide:52em;        /* 横位置の写真。本文より少し広く出して、写真だけ息を通す */
  --rd-portrait:32em;    /* 縦位置の写真。同じ幅だと高さが1.8倍になり本文が分断される */
  --rd-gap:1.7em;        /* 段落間 */
  background:var(--washi);
}

/* 本文と図版で幅を2種類だけ持つ。ガターは content-box で外側に付ける。 */
.rd-col{ max-width:var(--rd-col); margin-inline:auto; padding-inline:var(--gut); box-sizing:content-box; }
.rd-wide{ max-width:var(--rd-wide); margin-inline:auto; padding-inline:var(--gut); box-sizing:content-box; }

.rd p{ font-size:var(--rd-fs); line-height:2.05; letter-spacing:.03em; color:var(--ink);
  margin:0 0 var(--rd-gap); text-wrap:pretty; }
.rd p:last-child{ margin-bottom:0; }

/* ---------- 記事の頭 ----------
   写真は置かない。タイトルから始める（2026-09-03 決定）。

   以前は原稿の1枚目をヒーロー写真として頭へ置いていたが、原稿の写真はスマホ撮影で
   縦位置が多く、記事によっては開いた瞬間の1画面がほぼ写真で埋まった。写真の向き次第で
   入口の見え方が変わるため、記事ごとに「この写真をどう出すか」を考え直すことになる。
   テンプレートの目的は1本あたりの手間を減らすことなので、その判断ごと無くした。

   写真は原稿にある位置へ、本文と一緒に並べる。頭へ持ち上げると原稿の並びも崩れる。

   .site-head は position:fixed なので、記事側で上端を空けてヘッダーぶんを逃がす。
   写真が無くなったぶん、以前より深く取っている。 */
.rd-hero{ padding-top:clamp(7rem,13vh,9.5rem); }
.rd-hero .hmeta{ display:flex; align-items:baseline; gap:1.3rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.rd-hero .hmeta time{ font-family:var(--sans); font-size:.72rem; letter-spacing:.22em; color:var(--ink-mute); }
/* 罫は本文と同じ幅（.rd-col の内側）に出て、記事の入口を区切る。 */
.rd-hero h1{ font-family:var(--serif); font-weight:600;
  font-size:clamp(1.85rem,3vw,2.65rem); line-height:1.62; letter-spacing:.05em; color:var(--sumi);
  margin:0; padding-bottom:clamp(1.8rem,3vw,2.4rem); border-bottom:1px solid var(--line); }

/* リード。原稿の最初の段落を、章へ入る前の導入として一段強める。
   原稿にこの段落が無い記事では置かない（藤枝の原稿には無い）。
   本文と同じく .rd-body の中に置く。原稿での位置がそのまま記事での位置になる。 */
.rd-lede p{ font-family:var(--serif); font-weight:500;
  font-size:calc(var(--rd-fs) + 1px); line-height:2.1; letter-spacing:.04em; color:var(--tea); }

/* ---------- 本文の章 ---------- */
.rd-body{ padding-block:clamp(3.4rem,6vw,5rem) 0; }
/* 章見出しの上だけ、段落間の3倍ほど空ける。ここが記事の切れ目になる。 */
.rd-ch{ margin-top:clamp(4.2rem,8vw,6.4rem); }
/* 本文の1つめは、上に .rd-body の余白があるので自分では空けない。
   章とは限らない（原稿がタイトルの次に写真を置いている記事もある）ので、
   .rd-ch ではなく先頭の要素そのものを指す。 */
.rd-body > :first-child{ margin-top:0; }
.rd-ch-head{ margin-bottom:clamp(1.9rem,3vw,2.5rem); }
.rd-num{ display:block; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.45rem; line-height:1; letter-spacing:.1em; color:var(--brass); margin-bottom:1rem; }
.rd-h{ font-family:var(--serif); font-weight:600; font-size:clamp(1.35rem,2.2vw,1.9rem);
  line-height:1.72; letter-spacing:.05em; color:var(--sumi); margin:0; }

/* 副題。原稿に「―― …」のような一行がある記事だけ、章見出しの下へ足す。
   段落（<p>）で組むのは、原稿の1ブロックを記事の1ブロックとして残すため。
   見出しの中へ入れると、原稿と記事を突き合わせる extract-docx.mjs --verify から
   見出しと副題が1つの塊に見え、どちらが落ちても気づけなくなる。
   .rd p より詳細度を上げて、本文の寸法を引き継がないようにしている。 */
.rd p.rd-sub{ margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
  font-family:var(--serif); font-weight:500; font-size:1.02rem; line-height:1.9;
  letter-spacing:.08em; color:var(--tea); }

/* ---------- 写真 ----------
   説明は、原稿に書かれているものだけをそのまま載せる。原稿に無い写真には付けないし、
   原稿に無い言葉を足さない。飾りの罫や記号も入れない（guide 側の figure.ph は
   ブランドの短い罫を持つが、読み物では原稿にない要素になるので外している）。 */
.rd figure.ph{ margin:0; }
.rd figure.ph .frame{ position:relative; overflow:hidden; background:var(--washi-2); aspect-ratio:16/10; }
.rd figure.ph .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rd figure.ph figcaption{ font-size:.8rem; letter-spacing:.04em; line-height:1.9;
  color:var(--ink-mute); padding-top:.9rem; text-wrap:pretty; }

/* 単独の写真は原稿の比率のまま出す。枠に合わせて切ると、撮った人が
   決めた画角が変わってしまう。縦位置だけ幅を絞って、縦に伸びすぎないようにする。

   先頭の .rd は入れ子をたどるためではなく、上の切り抜き既定（.rd figure.ph .frame）より
   詳細度を1つ上げるために付けている。同じ詳細度だと、あとから書かれた指定に負ける。
   実際にメディアクエリ側の aspect-ratio:3/2 がこの auto を打ち消し、スマホで縦写真の
   下6割が overflow:hidden に切り落とされていた（Issue #167）。詳細度で勝たせておけば、
   切り抜き既定を画面幅ごとに書き換えても、単独写真の指定は巻き添えにならない。 */
.rd-fig{ margin-block:clamp(2.8rem,5vw,4rem); }
.rd .rd-fig figure.ph .frame{ aspect-ratio:auto; }
.rd .rd-fig figure.ph .frame img{ position:static; width:100%; height:auto; }
.rd-fig.portrait{ max-width:var(--rd-portrait); }

/* 2枚並びだけは高さを揃える。天地が不揃いだと、写真が2枚あることより
   そちらが先に目につくため。
   .rd-duo は .rd-fig の内側に置くので、上の単独写真の指定と同じ詳細度まで上げてから
   記述順で勝たせる。片方だけ .rd を外すと、どちらが効くかが入れ替わる。 */
.rd-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.rd .rd-duo figure.ph .frame{ aspect-ratio:3/4; }
.rd .rd-duo figure.ph .frame img{ position:absolute; width:100%; height:100%; }

/* ---------- 引用 ----------
   原稿の中で、地の文から切り離して置かれている発言に使う。
   段落の中に埋まっている「」は、そのまま本文として組む。
   罫は本文と同じ幅で引く。.rd-col の内側へ置くこと（.rd-col と同じ要素に付けると
   左右のガターぶんだけ罫が広がり、本文・図版・引用で幅が3種類になる）。 */
.rd-quote{ margin-block:clamp(2.8rem,5vw,3.8rem); padding-block:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rd-quote p{ font-family:var(--serif); font-weight:500;
  font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:2.05; letter-spacing:.05em; color:var(--tea); margin:0; }

/* ---------- 締め ----------
   原稿の最後の段落だけ明朝にして、本文から一段引く。 */
.rd-close{ margin-top:clamp(3rem,5vw,4rem); }
.rd-close p{ font-family:var(--serif); font-weight:500; font-size:calc(var(--rd-fs) + 1px);
  line-height:2.1; letter-spacing:.05em; color:var(--tea); }

/* ---------- 記事末の導線 ----------
   読み物は「もっと知りたい人」が読むので、出口は商品と読み物一覧の2本だけにする。 */
.rd-end{ margin-top:clamp(4rem,7vw,6rem); padding-top:clamp(2.4rem,4vw,3.2rem);
  padding-bottom:clamp(4rem,7vw,6rem); border-top:1px solid var(--line); }
.rd-end h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.8; letter-spacing:.06em; color:var(--sumi); margin:0 0 1.6rem; }
.rd-end .links{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem; }

@media(max-width:820px){
  .rd{ --rd-col:100%; --rd-wide:100%; }
  .rd-hero{ padding-top:6rem; }
  .rd-hero h1{ font-size:1.5rem; line-height:1.7; }
  /* 縦位置の写真は、スマホでは幅を絞らず本文と同じ幅まで使う。
     32em のままだと画面の中で写真だけが小さく取り残される。 */
  .rd-fig.portrait{ max-width:100%; }
  .rd-duo{ grid-template-columns:1fr; gap:1.6rem; }
  /* 切り抜いて出す写真だけの既定。16/10 では横に広すぎるので、スマホでは 3/2 にする。
     単独写真（.rd-fig）と2枚並び（.rd-duo）は詳細度で上回るため、ここには釣られない。 */
  .rd figure.ph .frame{ aspect-ratio:3/2; }
  /* 2枚並びを1列へ落としたら、高さを揃える必要がなくなる。原稿の比率で出す。 */
  .rd .rd-duo figure.ph .frame{ aspect-ratio:auto; }
  .rd .rd-duo figure.ph .frame img{ position:static; width:100%; height:auto; }
}