/* ============================================================
   写真の座標 v5 — 4-up comparison overlay
   Loaded AFTER v4-base.css. Scopes overrides by body class.

   v50  · 基準 (基準案 / v4 + inked-red 写真 hilite)
   v51  · 明るい紙 + 蛍光ライム限定 3 色目
   v52  · 大胆タイポ (色は v4 同等)
   v53  · 統合 — 明るい紙 + 大胆タイポ (ライムなし)
   ============================================================ */

/* ---------- v5.1 — DISPLAY RED (cover / card decoration) ----------
   New token: a brighter 朱 (vermilion) for the top-page COVER and CARD
   decorations only. Body-page links keep the inked red (--accent-action).
   The two reds share the same hue family; --accent-display sits one step
   brighter (活版印刷の朱 / title-stamp red), never a pure red.            */
body {
  --accent-display: #d6402e;   /* cover / card decoration vermilion */
}

/* Remap the inked red → display red, but ONLY inside the top-page cover
   and card containers. The footer and the dark coordinate map are left on
   the original --accent-action so the inked "body" red stays referenced. */
.hero,
.tabs,
.toolbar,
.cards,
.archive-cta,
.era,
.bottom-links,
.coord__side {
  --accent-action: var(--accent-display);
}

/* 「写真」 / "Photo" — text-colour only (no beta / no fill).
   Neutralises the v4 negative-video ground entirely. */
body.v50 .hero__primary .hl,
body.v51 .hero__primary .hl,
body.v52 .hero__primary .hl,
body.v53 .hero__primary .hl {
  background: transparent;
  color: var(--accent-display);
  padding: 0;
  margin-right: 0;
  border-radius: 0;
  display: inline;
  line-height: inherit;
}

/* BEFORE/AFTER toggle: ?hl=beta restores the old filled treatment so the
   comparison artboard can show the previous v5 cover next to the new one. */
body.hl-beta .hero__primary .hl {
  background: var(--accent-display);
  color: var(--bg);
  padding: 0 0.04em;
  margin-right: 0.02em;
  border-radius: 2px;
  display: inline-block;
  line-height: 0.96;
}

/* Variant chip in the corner of every artboard */
.v5-tag {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--text-main);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 2px;
}
.v5-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-action); }
body.v51 .v5-tag i { background: #ccff00; }
body.v52 .v5-tag i { background: var(--accent-structure); }
body.v53 .v5-tag i { background: var(--accent-action); box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 2px var(--accent-structure); border-radius: 2px; }

/* ===========================================================
   v51 — BRIGHT PAPER + 3rd colour (LIME)
   =========================================================== */
body.v51 {
  --bg:        #fafaf5;
  --surface:   #ffffff;
  --surface-2: #f0ede5;
  --accent-highlight: #ccff00;
}

/* ---- 案1 採用: 「写真」/「Photo」 = display red のベタ + 白地 ----
   (案1だけは表紙を朱ベタ反転に戻す。明るい紙の上で朱の鮮度が際立つ) */
body.v51 .hero__primary .hl {
  background: var(--accent-display);
  color: #ffffff;
  padding: 0 0.05em;
  margin-right: 0.02em;
  border-radius: 2px;
  display: inline-block;
  line-height: 0.96;
}

/* ---- 案1 採用: カード No を案2/案3の約半分サイズで導入 ----
   案2/3 は 64px。案1 は約半分の 32px で、連番を一段持ち上げる。
   黒の大胆タイポ・navy メタ・装飾の赤(display)はそのまま。      */
body.v51 .pc-top {
  position: relative;
  padding-top: 48px;
}
body.v51 .pc-top__meta {
  position: static;
}
body.v51 .pc-top__meta .idx {
  position: absolute;
  top: 12px;
  left: 18px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent-structure);   /* navy = 構造 */
  z-index: 2;
}
body.v51 .pc-top--number .pc-top__meta .idx {
  color: var(--accent-action);       /* = display red (cards 内で remap 済) */
}
/* kind label (PHOTOGRAPHER …) を右上へ退避 */
body.v51 .pc-top__meta > span:nth-child(2) {
  position: absolute;
  top: 16px;
  right: 18px;
}

/* lime dot on chapter markers § II — BY CARDS, § IV — BY ERA */
body.v51 .cards-head__section,
body.v51 .era__section {
  position: relative;
  padding-left: 18px;
}
body.v51 .cards-head__section::before,
body.v51 .era__section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: var(--accent-highlight);
  border-radius: 50%;
}

/* UPDATED date highlight in the crumbs */
body.v51 .updated-date {
  background: var(--accent-highlight);
  color: var(--text-main);
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.16em;
}

/* "you are here" lime marker dropped into the map island */
body.v51 .coord__here {
  position: absolute;
  top: 38%; left: 44%;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--map-text);
  pointer-events: none;
}
body.v51 .coord__here::before {
  content: '';
  width: 10px; height: 10px;
  background: var(--accent-highlight);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(204, 255, 0, 0.18);
}

/* search field focus ring */
body.v51 .toolbar__search:focus-within {
  background: var(--accent-highlight);
}
body.v51 .toolbar__search:focus-within::before { color: var(--text-main); }

/* one "hot" tag uses lime background */
body.v51 .pc-body__tag[data-hot] {
  background: var(--accent-highlight);
  color: var(--text-main);
  padding: 2px 7px;
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
body.v51 .pc-body__tag[data-hot]::before { content: ''; }

/* lime dot before VOL. 01 in hero eyebrow */
body.v51 .hero__eyebrow .vol {
  position: relative;
  padding-left: 16px;
}
body.v51 .hero__eyebrow .vol::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--accent-highlight);
  border-radius: 50%;
}

/* ===========================================================
   v52 — TYPOGRAPHY ON ATTACK (colour = v4)
   v53 — same typo rules
   =========================================================== */

/* HERO — bigger, slightly bleeds the top rule */
body.v52 .hero,
body.v53 .hero {
  padding-top: 80px;
  padding-bottom: 96px;
}
body.v52 .hero__primary,
body.v53 .hero__primary {
  font-size: clamp(140px, 19vw, 286px);
  line-height: 0.84;
  margin-top: -16px;       /* bleed slightly above the header rule */
  letter-spacing: -0.005em;
}
body.v52 .hero__primary .hl,
body.v53 .hero__primary .hl {
  /* the red ベタ stays */
}
body.v52 .hero__subtitle,
body.v53 .hero__subtitle {
  font-size: clamp(28px, 2.6vw, 44px);
  margin-top: 36px;
}
body.v52 .hero__eyebrow,
body.v53 .hero__eyebrow {
  margin-bottom: 38px;
}

/* SECTION TITLES — 1.5–2× */
body.v52 .cards-head__title,
body.v53 .cards-head__title {
  font-size: clamp(80px, 10vw, 160px);
  letter-spacing: 0.02em;
  line-height: 0.94;
}
body.v52 .era__title,
body.v53 .era__title {
  font-size: clamp(72px, 8vw, 124px);
  line-height: 0.95;
}
body.v52 .bl__title,
body.v53 .bl__title {
  font-size: 56px;
  line-height: 1.02;
}
body.v52 .archive-cta__main,
body.v53 .archive-cta__main {
  font-size: clamp(34px, 3.6vw, 56px);
  letter-spacing: 0.02em;
  line-height: 1.18;
}

/* § II — BY CARDS bleeds off the left edge */
body.v52 .cards-head__section,
body.v53 .cards-head__section {
  font-size: 18px;
  letter-spacing: 0.22em;
  margin-left: -44px;
  margin-bottom: 22px;
}
body.v52 .era__section,
body.v53 .era__section {
  font-size: 18px;
  letter-spacing: 0.22em;
  margin-left: -44px;
  margin-bottom: 22px;
}

/* CARD INDEX — 2–3× larger, taking the typo top */
body.v52 .pc-top__meta .idx,
body.v53 .pc-top__meta .idx {
  position: absolute;
  top: 10px; left: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent-structure);
  z-index: 2;
}
body.v52 .pc-top--number .pc-top__meta .idx,
body.v53 .pc-top--number .pc-top__meta .idx {
  color: var(--accent-action);
}
body.v52 .pc-top,
body.v53 .pc-top {
  min-height: 260px;
  padding-top: 80px;
}
body.v52 .pc-top__meta,
body.v53 .pc-top__meta {
  position: static;
}
/* shift the kind label that lived next to .idx up out of the way */
body.v52 .pc-top__meta > span:nth-child(2),
body.v53 .pc-top__meta > span:nth-child(2) {
  position: absolute;
  top: 24px; right: 14px;
}

/* push card top art bigger; let it bleed a touch */
body.v52 .pc-top--initials .pc-top__art,
body.v53 .pc-top--initials .pc-top__art {
  font-size: 220px;
  letter-spacing: -0.075em;
  margin: 0 -8px;
}
body.v52 .pc-top--kanji .pc-top__art,
body.v53 .pc-top--kanji .pc-top__art {
  font-size: 200px;
  margin: 0 -6px;
}
body.v52 .pc-top--year .pc-top__art,
body.v53 .pc-top--year .pc-top__art {
  font-size: 72px;
}
body.v52 .pc-top--number .pc-top__art,
body.v53 .pc-top--number .pc-top__art {
  font-size: 232px;
  letter-spacing: -0.06em;
}
body.v52 .pc-top--title .pc-top__art,
body.v53 .pc-top--title .pc-top__art {
  font-size: 76px;
}
body.v52 .pc-top--slash .pc-top__art,
body.v53 .pc-top--slash .pc-top__art {
  font-size: 48px;
}
body.v52 .pc-top--stacked .pc-top__art,
body.v53 .pc-top--stacked .pc-top__art {
  font-size: 40px;
}

/* limited masonry irregularity — 2-4 px offsets on a few cards */
body.v52 .cards .pc-card:nth-child(3),
body.v53 .cards .pc-card:nth-child(3) {
  transform: translateY(4px);
}
body.v52 .cards .pc-card:nth-child(7),
body.v53 .cards .pc-card:nth-child(7) {
  transform: translateY(-3px);
}
body.v52 .cards .pc-card:nth-child(10),
body.v53 .cards .pc-card:nth-child(10) {
  transform: translateX(3px);
}

/* SECTION RULES — shorter / partial doubles in cards-head bottom */
body.v52 .cards-head,
body.v53 .cards-head {
  border-bottom: 0;
  background-image:
    linear-gradient(to right, var(--rule-strong) 0, var(--rule-strong) 70%, transparent 70%),
    linear-gradient(to right, var(--rule-strong) 78%, var(--rule-strong) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: 0 100%, 0 calc(100% - 4px);
  background-size: 100% 1.5px, 100% 1px;
  padding-bottom: 36px;
}
body.v52 .era,
body.v53 .era { padding-top: 124px; }

/* ===========================================================
   v53 — BRIGHT PAPER (no lime) + v52 typography
   =========================================================== */
body.v53 {
  --bg:        #fafaf5;
  --surface:   #ffffff;
  --surface-2: #f0ede5;
}

/* ===========================================================
   Captions / variant chips for the design canvas
   =========================================================== */
.v5-caption {
  padding: 18px 32px;
  background: var(--text-main);
  color: var(--reverse-text);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.v5-caption strong {
  color: var(--bg);
  font-weight: 700;
  letter-spacing: 0.22em;
}

/* ===========================================================
   カードスタイル全variant — archive.html / era / movement 共通
   =========================================================== */

/* 汎用上書き */
.pc-top__art { overflow: hidden; }
.pc-top__hint {
  position: relative;
  z-index: 2;
  background: linear-gradient(transparent, var(--surface-2) 65%);
  padding-top: 10px;
  margin-top: -10px;
}

/* --year (yr-birth / yr-dash / yr-death) */
.pc-top--year .pc-top__art { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.yr-birth { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 104px; line-height: 0.84; letter-spacing: -0.01em; color: var(--text-main); }
.yr-dash  { font-family: var(--font-sans-en); font-size: 28px; font-weight: 300; line-height: 1.1; letter-spacing: 0.18em; color: var(--accent-structure); display: block; }
.yr-death { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: 60px; line-height: 0.84; letter-spacing: -0.01em; color: var(--text-main); opacity: 0.72; }

/* --slash (fn / ln) */
.pc-top--slash .pc-top__art { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.pc-top--slash .fn { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--text-mute); display: block; }
.pc-top--slash .ln { font-family: var(--font-sans-en); font-weight: 900; font-size: 88px; line-height: 0.80; letter-spacing: -0.05em; color: var(--text-main); display: block; overflow: hidden; }

/* --cite (cty / cyr) */
.pc-top--cite .pc-top__art { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.cty { font-family: var(--font-sans-en); font-weight: 900; font-size: 58px; line-height: 0.82; letter-spacing: -0.04em; color: var(--text-main); display: block; overflow: hidden; }
.cyr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-structure); display: block; }

/* --title */
.pc-top--title .pc-top__art { font-family: var(--font-sans-en); font-weight: 900; font-size: 82px; line-height: 0.82; letter-spacing: -0.05em; color: var(--text-main); overflow: hidden; }

/* --serif */
.pc-top--serif .pc-top__art { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 76px; line-height: 0.87; color: var(--text-main); letter-spacing: -0.01em; overflow: hidden; }

/* --country */
.pc-top--country .pc-top__art { font-family: var(--font-mono); font-weight: 600; font-size: 118px; line-height: 0.82; letter-spacing: -0.07em; color: var(--text-main); }

/* --rotate */
.pc-top--rotate { overflow: hidden; }
.pc-top--rotate .pc-top__art { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: var(--font-sans-en); font-weight: 900; font-size: 100px; letter-spacing: -0.05em; line-height: 0.85; color: var(--text-main); max-height: 160px; overflow: hidden; align-self: flex-start; }

/* --outline */
.pc-top--outline { overflow: hidden; }
.pc-top--outline .pc-top__art { font-family: var(--font-sans-en); font-weight: 900; font-size: 112px; line-height: 0.80; letter-spacing: -0.06em; -webkit-text-stroke: 1.5px var(--text-main); color: transparent; overflow: hidden; }

/* --stacked (v5 override: single-weight) */
.pc-top--stacked .pc-top__art { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.pc-top--stacked .pc-top__art span { font-family: var(--font-sans-en); font-weight: 900; font-size: 72px; line-height: 0.84; letter-spacing: -0.04em; color: var(--text-main); display: block; }

/* --twosize (big / anno) */
.pc-top--twosize .pc-top__art { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.big  { font-family: var(--font-sans-en); font-weight: 900; font-size: 82px; line-height: 0.80; letter-spacing: -0.05em; color: var(--text-main); display: block; overflow: hidden; }
.anno { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-mute); display: block; }

/* --fragment */
.pc-top--fragment { overflow: hidden; }
.pc-top--fragment .pc-top__art { font-family: var(--font-sans-en); font-weight: 900; font-size: 280px; line-height: 0.72; letter-spacing: -0.05em; color: var(--text-main); opacity: 0.16; transform: translate(-16px, 14px); pointer-events: none; user-select: none; }

/* --kanji-foreign (kf-char / kf-gloss) */
.pc-top--kanji-foreign .pc-top__art { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.kf-char  { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; line-height: 0.88; letter-spacing: -0.02em; color: var(--text-main); display: block; }
.kf-gloss { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-structure); display: block; font-weight: 500; }

/* モバイル時のフォントサイズ縮小 */
@media (max-width: 720px) {
  .pc-top--title .pc-top__art  { font-size: 46px !important; }
  .pc-top--serif .pc-top__art  { font-size: 42px !important; }
  .pc-top--slash .ln           { font-size: 46px !important; }
  .pc-top--stacked .pc-top__art span { font-size: 40px !important; }
  .pc-top--cite .cty, .cty     { font-size: 34px !important; }
  .yr-birth                    { font-size: 58px !important; }
  .yr-dash                     { font-size: 18px !important; }
  .yr-death                    { font-size: 36px !important; }
}