/* CMCF author/research gateway candidate — mcf.tsuchiyatakahiro.com
   A light editorial "research note", deliberately distinct from the navy product LP.
   Japanese-first. Self-contained: system fonts only; no JS; no external assets; no protected data. */

:root {
  /* light paper · warm ink · one restrained indigo accent */
  --paper:      #f7f4ec;
  --paper-2:    #f1ede2;
  --ink:        #22201b;
  --ink-soft:   #5c574c;
  --ink-faint:  #8a8477;
  --indigo:     #33415c;      /* scholarly accent — not the product LP's brass/vermilion */
  --indigo-2:   #46567a;
  --hair:       rgba(34, 32, 27, .14);
  --hair-2:     rgba(34, 32, 27, .08);

  --mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
            "Noto Serif JP", "MS PMincho", serif;
  --gothic: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
            "Meiryo", system-ui, sans-serif;
  --latin:  Georgia, "Times New Roman", serif;

  --measure: 640px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mincho);
  line-height: 1.95;
  letter-spacing: .01em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 clamp(22px, 6vw, 56px); }
a { color: inherit; text-decoration: none; }

/* ---------- top bar (quiet, personal-site style) ---------- */
.top { border-bottom: 1px solid var(--hair-2); background: var(--paper); }
.top-inner { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; height: 60px; }
.mark { font-family: var(--gothic); font-size: 13px; letter-spacing: .14em; color: var(--ink-soft); display: inline-flex; align-items: baseline; gap: 10px; }
.mark-en { font-family: var(--latin); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.top-meta { font-family: var(--latin); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 12vw, 104px) 0 clamp(30px, 6vw, 54px); max-width: var(--measure); }
.kicker { font-family: var(--gothic); font-size: 12px; letter-spacing: .2em; color: var(--indigo); display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.kicker-rule { width: 26px; height: 1px; background: var(--indigo); display: inline-block; opacity: .8; }
h1 {
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(28px, 5vw, 46px); line-height: 1.42; letter-spacing: .02em;
  margin: 0 0 18px; color: var(--ink);
}
.hero-en { font-family: var(--latin); font-style: italic; font-size: clamp(13px, 2vw, 16px); letter-spacing: .04em; color: var(--ink-faint); margin: 0 0 30px; }
.lede { font-size: clamp(15.5px, 2vw, 18px); line-height: 2.1; color: #37342c; margin: 0; max-width: 42ch; }

/* ---------- research-note sections ---------- */
.note { padding: clamp(34px, 6vw, 56px) 0; border-top: 1px solid var(--hair); max-width: var(--measure); }
h2 {
  font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 2.6vw, 23px);
  letter-spacing: .04em; line-height: 1.5; margin: 0 0 22px; color: var(--ink);
  display: flex; align-items: baseline; gap: 14px;
}
.h-idx { font-family: var(--latin); font-size: 13px; letter-spacing: .1em; color: var(--indigo); font-weight: 400; }
.prose p { font-size: clamp(14.5px, 1.7vw, 16.5px); line-height: 2.05; color: #38352d; margin: 0 0 15px; max-width: 58ch; }
.prose p:last-child { margin-bottom: 0; }
.prose-soft { color: var(--ink-soft) !important; font-style: normal; padding-top: 6px; border-top: 1px dashed var(--hair-2); margin-top: 20px !important; }

/* ---------- single CTA ---------- */
.cta {
  display: inline-flex; flex-direction: column; gap: 3px; margin-top: 30px;
  padding: 15px 26px; border: 1px solid var(--indigo); border-radius: 2px;
  transition: background .2s, color .2s, transform .2s;
}
.cta:hover { background: var(--indigo); transform: translateY(-1px); }
.cta-label { font-family: var(--gothic); font-size: 14.5px; letter-spacing: .06em; color: var(--indigo); }
.cta-host { font-family: var(--latin); font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); }
.cta:hover .cta-label { color: var(--paper); }
.cta:hover .cta-host { color: rgba(247,244,236,.7); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--hair); background: var(--paper-2); padding: 40px 0 52px; margin-top: clamp(24px, 5vw, 48px); }
.caveat { font-size: 12.5px; line-height: 1.95; color: var(--ink-soft); margin: 0 0 14px; max-width: 60ch; }
.colophon { font-family: var(--latin); font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); margin: 0; }

/* ---------- reveal (one quiet page-load) ---------- */
.reveal { opacity: 0; transform: translateY(12px); animation: rise .8s cubic-bezier(.2,.7,.15,1) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .top-meta, .mark-en { display: none; }
  .lede { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  html { scroll-behavior: auto; }
}