/* theme: plate — 机の上の図版集。
 * Claude Design で作った案（生成画像投稿サイトのレイアウト案）を実装したもの。
 * 焦茶の机地の上にクリームの紙を一枚置き、その紙の中に図版を組む。
 * 構成は editorial と同じ（先頭1点をヒーローに、以降をグリッドへ）。
 *
 * 元案は desk.jpg / paper-v2.jpg のテクスチャ画像を使っているが、ここでは
 * SVG の feTurbulence をデータURIで埋めて代用している。外部ファイルが増えず、
 * どのホスティングでも欠けないため。 */

:root {
  /* 机と紙 */
  --desk: #57503f;
  --paper: #f6f2e8;
  --paper-edge: rgba(112, 90, 58, .28);

  /* 墨 */
  --bg: var(--desk);
  --bg-elev: #e6e0d0;
  --fg: #33291b;
  --fg-dim: #96876a;
  --ink-strong: #241d14;
  --ink-body: #5d4e39;
  --line: #d8cfb6;
  --rule-hi: #cfc4a6;
  --rule-lo: #fbf8f0;
  --accent: #7a6242;

  --page-max: 1180px;
  --page-pad: 60px;
  --page-pad-top: 52px;

  --col: 240px;
  --col-mobile: 140px;
  --gap: 22px;
  --row: 8px;
  --radius: 0px;

  --font-ui: "Zen Kaku Gothic New", "Yu Gothic UI", system-ui, sans-serif;
  --font-mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-latin: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-cap: var(--font-latin);
  --fs-cap: 10px;

  --tile-hover-scale: 1;
  --tile-hover-bright: 1;

  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23d)' opacity='0.11'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 机 */
html { background: var(--desk); scrollbar-color: #6b6350 var(--desk); }

body {
  padding: 56px 24px 40px;
  background-color: var(--desk);
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 244, 214, .14) 0%, rgba(0, 0, 0, .28) 100%),
    var(--desk-grain);
  background-repeat: no-repeat, repeat;
  color: var(--fg);
}

::selection { background: #cbb98c; color: var(--ink-strong); }

/* ---------------------------------------------------------------- 紙 */
.sheet {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-bottom: 4px;
  background-color: var(--paper);
  background-image: var(--paper-grain);
  box-shadow: 0 0 0 1px var(--paper-edge), 0 40px 90px -50px rgba(30, 22, 12, .9);
}

/* 柱 — 紙の上端に入る小さな欧文 */
.folio {
  display: flex;
  justify-content: space-between;
  padding: 18px var(--page-pad) 0;
  color: var(--fg-dim);
  font: 11px var(--font-latin);
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- 扉 */
.masthead {
  display: block;
  padding: 40px var(--page-pad) 0;
  text-align: center;
}

.masthead .kicker {
  color: #8e7f61;
  font: 12px var(--font-latin);
  letter-spacing: .42em;
  text-transform: uppercase;
}

/* 題字はゴシック（Zen Kaku Gothic New）。本文の明朝と対比させる */
.masthead h1 {
  margin: 20px 0 0;
  color: var(--ink-strong);
  font: 500 52px/1.2 var(--font-ui);
  letter-spacing: .28em;
  text-indent: .28em;
}

.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 26px auto 0;
}

.lozenge {
  width: 5px;
  height: 5px;
  background: #c0b393;
  transform: rotate(45deg);
}

.masthead .tagline {
  margin: 26px auto 0;
  max-width: 30em;
  color: var(--ink-body);
  font: 14px/2.2 var(--font-mincho);
  text-wrap: pretty;
}

.mast-meta {
  margin-top: 24px;
  color: var(--fg-dim);
  font: 11px var(--font-latin);
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- 目次（ナビ） */
/* 紙の上に浮く帯は「机に置かれた一枚」の見立てを壊すので固定しない */
.bar {
  position: static;
  justify-content: center;
  gap: 0;
  padding: 30px var(--page-pad) 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}

.bar .brand { display: none; }

/* 行き先が1つだけならタブ列は出ない＝帯が空になるので畳む */
.bar.no-nav { display: none; }

.bar nav {
  gap: 26px;
  padding-bottom: 4px;
}

.bar nav a {
  padding: 3px 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  color: var(--fg-dim);
  font: 12px var(--font-latin);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.bar nav a:hover { background: transparent; color: var(--ink-strong); }

.bar nav a.on {
  background: transparent;
  color: var(--ink-strong);
  border-bottom-color: #c0b393;
}

.bar nav a .n {
  margin-left: 7px;
  font-size: 10px;
  opacity: .7;
}

.bar nav a.x { color: #9c6a52; }
.r18tag { border-color: #a8705c; color: #9c5a42; }

/* ---------------------------------------------------------------- 目次の下の操作列 */
.toolbar {
  justify-content: flex-end;
  margin-bottom: 30px;
  color: var(--fg-dim);
  font: 11px var(--font-latin);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.toolbar select {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: #6f5c40;
  font: 12px var(--font-mincho);
  letter-spacing: .1em;
  text-transform: none;
}

.tb-liked {
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 3px 0;
  color: var(--fg-dim);
  font: 11px var(--font-latin);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tb-liked:hover { color: var(--ink-strong); }

.tb-liked.on {
  background: transparent;
  color: #b4413a;
  border-bottom-color: #b4413a;
}

#likecount { margin-left: 0; }

/* ---------------------------------------------------------------- 葉 */
main { padding: 52px var(--page-pad) 0; }

.leaf { margin-bottom: 62px; }

/* 葉が一つでも見出しは出す。月の表示が誌面の骨格になっているテーマなので */
.leaf-head, .leaf:only-child .leaf-head { display: flex; }
.leaf-head { gap: 18px; margin-bottom: 26px; }

.leaf-label {
  color: #6f5c40;
  font: 13px var(--font-mincho);
  letter-spacing: .34em;
}

.leaf-note {
  color: var(--fg-dim);
  font: italic 12px var(--font-latin);
  letter-spacing: .1em;
}

/* ---------------------------------------------------------------- 図版 */
.frame { background: var(--bg-elev); }

/* 大ゴマは2列ぶち抜き（構成は editorial と同じ） */
.tile.hero { grid-column: span 2; }

/* 1列しか取れない幅では span 2 が暗黙の2列目を作って横スクロールが出る。
   375px では2列取れているが、これより狭い端末向けの保険。 */
@media (max-width: 320px) {
  .tile.hero { grid-column: auto; }
}

.tile { animation: rise 420ms ease-out both; }
.tile:hover { opacity: .92; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 図版番号と loop 印。元案どおり絵の下に欧文で組む */
figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0 0;
  color: #94856a;
  font: 10px var(--font-latin);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.plate { display: inline; }

.loop {
  display: inline;
  font-style: italic;
  letter-spacing: .12em;
  text-transform: none;
}

.cap-text {
  flex: 1;
  color: var(--ink-body);
  font: 12px/1.7 var(--font-mincho);
  letter-spacing: 0;
  text-transform: none;
  -webkit-line-clamp: 1;
}

/* 絵の上には何も重ねない */
.scrim, .badge { display: none; }

/* イイネは紙の上の朱印のあつかい。角丸をやめて墨と朱で描く */
.like {
  top: auto;
  right: -3px;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #a89876;
  opacity: 1;
}

.like svg { width: 14px; height: 14px; stroke-width: 1.5; }
.like:hover { background: transparent; color: #8a5b4a; }
.like.on { color: #b4413a; }

/* キャプション行は高さ20px しかないので、当たり判定を絵の側（上）へ広げる。
   22px の見た目のまま 44px 角を確保する。 */
.like::after { inset: -22px -4px -2px -22px; }

/* 件数は欧文の小さな数字で。図版番号と同じ調子に揃える */
.like:has(.like-n) { padding: 0 2px; gap: 3px; }

.like-n {
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--fg-dim);
}

.like.on .like-n { color: #b4413a; }

/* 図版番号と重ならないように、キャプション行の右端をボタン分だけ空ける */
figcaption { padding-right: 26px; }

.like.big {
  position: static;
  width: auto;
  height: 26px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .07);
  color: #cbbfa0;
}

.like.big.on { color: #e07a70; }

/* ---------------------------------------------------------------- colophon
   元案どおり「Colophon」を左に立てて本文を右に流す2段組。
   罫は border-top と inset の影を重ねて彫り込みに見せる。 */
/* 扉が中央揃えなので、その下のこの節も中央に寄せる。
   紙面の幅いっぱいに左寄せすると右側だけが大きく空いて重心が狂う。 */
.colophon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 30px var(--page-pad) 0;
  padding: 0 0 30px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -1px 0 var(--rule-lo);
}

.colophon .col-body { align-items: center; text-align: center; }
.colophon .col-body p { max-width: 26em; }
.colophon .col-links { justify-content: center; }

/* 見出しがあった左の列にアイコンを置く。紙面なので角丸にしない */
.colophon .col-aside { width: 150px; align-items: center; }

.colophon .col-icon {
  width: 150px;
  height: 150px;
  border-radius: 0;
  box-shadow: none;
}

.colophon .col-label {
  width: auto;
  flex: none;
  margin: 0;
  color: var(--fg-dim);
  font: 11px var(--font-latin);
  letter-spacing: .32em;
}

.colophon .col-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.colophon .col-body p {
  max-width: 36em;
  color: #4b3f2e;
  font: 14px/2.2 var(--font-mincho);
  text-wrap: pretty;
}

.col-links { font: 12px var(--font-latin); letter-spacing: .16em; }

/* 下線は文字幅のままにしたいので、余白は擬似要素で当たり判定として足す */
.col-links a {
  position: relative;
  padding: 0;
  margin: 0;
  color: var(--accent);
  border-bottom: 1px solid rgba(122, 98, 66, .35);
}

.col-links a::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
}
.col-links a:hover { color: var(--ink-strong); border-bottom-color: var(--ink-strong); text-decoration: none; }

/* ---------------------------------------------------------------- 机の下の署名 */
.deskfoot {
  max-width: var(--page-max);
  padding: 22px var(--page-pad) 0;
  color: #b8ab8d;
  font: 11px var(--font-latin);
  letter-spacing: .28em;
}

/* ---------------------------------------------------------------- lightbox / gate */
.lb { background: rgba(28, 22, 14, .96); backdrop-filter: none; }
.lb-stage > * { border-radius: 0; box-shadow: 0 50px 120px -50px #000; }

.lb-info {
  color: var(--fg-dim);
  font: 11px var(--font-latin);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.lb-info .cap { color: #e8ddc4; font: 14px/1.6 var(--font-mincho); letter-spacing: 0; text-transform: none; }
.lb-info .meta { color: #cbbfa0; letter-spacing: 0; }
.lb button { background: rgba(255, 255, 255, .08); color: #e8ddc4; border-radius: 0; }
.lb button:hover { background: rgba(255, 255, 255, .18); }

.gate { background: #2a2419; }

.gate-box {
  border: 1px solid var(--paper-edge);
  border-radius: 0;
  background-color: var(--paper);
  background-image: var(--paper-grain);
}

.gate-box h1 { color: var(--ink-strong); font: 500 20px var(--font-mincho); letter-spacing: .2em; }
.gate-box p { color: var(--ink-body); font: 13px/2 var(--font-mincho); }

#gate-yes {
  border-radius: 0;
  background: var(--ink-strong);
  color: var(--paper);
  font: 13px var(--font-ui);
  letter-spacing: .1em;
}

.gate-no { color: var(--fg-dim); }
.gate-no:hover { color: var(--ink-strong); }

html:not(.gate-passed) body[data-rating="r18"] .sheet { filter: blur(22px); }

/* ---------------------------------------------------------------- 狭い画面 */
@media (max-width: 700px) {
  :root { --page-pad: 20px; --gap: 12px; }
  body { padding: 14px 10px 24px; }
  .masthead h1 { font-size: 30px; letter-spacing: .2em; text-indent: .2em; }
  .masthead .kicker { font-size: 10px; letter-spacing: .3em; }
  .bar { padding-top: 22px; }
  .bar nav { gap: 16px; }
  main { padding-top: 34px; }
  /* 150px の見出し列を残すと本文が潰れるので縦に積む */
  .colophon { margin: 0 var(--page-pad); flex-direction: column; gap: 16px; padding-bottom: 48px; }
  .colophon .col-label { width: auto; }
  .colophon .col-body p { font-size: 13px; line-height: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .tile { animation: none; }
}