/* =============================================
   伊藤雄吉相談所 — 年譜
   トップページ（../style.css）のブランドトークンに合わせた独立スタイル
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark:   #1e4020;
  --green-mid:    #2d5a27;
  --green-light:  #dff0d8;
  --green-pale:   #f2f8f0;
  --black:        #111111;
  --gray-dark:    #333333;
  --gray-mid:     #666666;
  --gray-border:  #d8d8d8;
  --white:        #ffffff;

  --dark-bg:      #0f1a0f;
  --dark-text:    #f0ede8;
  --dark-muted:   #a8b0a6;
  --dark-accent:  #7ec87a;

  /* 出典の種類 */
  --src-public:   #1e4020;
  --src-press:    #6b5a2e;
  --src-self:     #2f5d73;
  --src-claim:    #7a4a5a;
  --note-bg:      #fbf4e6;
  --note-ink:     #6b4a12;

  --max-w:        860px;
  --header-h:     60px;
  --font-head:    'Noto Serif JP', Georgia, serif;
  --font-body:    'Noto Sans JP', sans-serif;
  --font-num:     'Noto Sans JP', ui-monospace, monospace;
}

html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  line-height: 1.85;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.45; color: var(--black); text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 4.6vw, 2.6rem); letter-spacing: .02em; }
h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.02rem; }

a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--green-mid); }
:focus-visible { outline: 3px solid var(--green-mid); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green-dark); color: #fff; padding: .7rem 1.2rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-border);
}
.brand {
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--black); text-decoration: none; letter-spacing: .04em;
}
.header-cta {
  font-size: .85rem; font-weight: 500;
  padding: .45rem 1.1rem; border-radius: 999px;
  background: var(--green-dark); color: #fff; text-decoration: none;
  white-space: nowrap;
}
.header-cta:hover { background: var(--green-mid); color: #fff; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 3.5rem clamp(1rem, 5vw, 2rem) 4.5rem; }
.eyebrow { font-size: .78rem; font-weight: 500; letter-spacing: .14em; color: var(--green-mid); margin-bottom: .6rem; }
.lead { max-width: 62ch; color: var(--gray-dark); margin-top: 1rem; }
section { margin-top: 3.5rem; }

/* ---------- Legend & tags ---------- */
.legend {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  padding: .9rem 1rem; background: var(--green-pale); border-radius: 6px;
}
.legend div { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--gray-mid); }
.tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  padding: 0 .55rem; border-radius: 3px; border: 1px solid currentColor;
  white-space: nowrap; line-height: 1.8;
}
.t-public { color: var(--src-public); }
.t-press { color: var(--src-press); }
.t-self { color: var(--src-self); }
.t-claim { color: var(--src-claim); }

/* ---------- Timeline ---------- */
ol.timeline { list-style: none; position: relative; }
ol.timeline::before { content: ""; position: absolute; left: 112px; top: 6px; bottom: 6px; width: 2px; background: var(--green-light); }
.era {
  font-family: var(--font-head); font-weight: 500; font-size: .9rem; color: var(--green-mid);
  padding: 1.8rem 0 .6rem 136px;
}
.ev { display: grid; grid-template-columns: 100px 1fr; gap: 0 36px; padding: .75rem 0; position: relative; }
.ev::before {
  content: ""; position: absolute; left: 107px; top: 1.3rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--white); border: 2px solid var(--green-dark);
}
.when { font-weight: 500; font-size: .92rem; text-align: right; padding-top: .1rem; font-variant-numeric: tabular-nums; }
.what { min-width: 0; display: grid; gap: .4rem; }
.what p { max-width: 64ch; color: var(--gray-dark); font-size: .95rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; font-size: .82rem; color: var(--gray-mid); }
.meta a { color: var(--gray-mid); }
.meta a:hover { color: var(--green-dark); }
.note { background: var(--note-bg); color: var(--note-ink); font-size: .82rem; padding: .5rem .8rem; border-radius: 4px; max-width: 64ch; }

/* ---------- Lineage ---------- */
.lineage { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.stage { border: 1px solid var(--gray-border); border-top: 3px solid var(--green-dark); border-radius: 4px; padding: 1rem; display: grid; gap: .4rem; align-content: start; }
.stage .yrs { font-size: .78rem; font-weight: 500; color: var(--green-mid); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.stage h3 { font-size: 1.05rem; }
.stage p { font-size: .88rem; color: var(--gray-mid); }

/* ---------- Sources ---------- */
.sources { list-style: none; display: grid; gap: .5rem; font-size: .88rem; }
.sources li { display: grid; grid-template-columns: 76px 1fr; gap: .8rem; align-items: baseline; }
.sources .d { color: var(--gray-mid); font-size: .8rem; }
.sources a { color: var(--black); word-break: break-all; }
.closing { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--gray-border); font-size: .82rem; color: var(--gray-mid); display: grid; gap: .4rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark-bg); color: var(--dark-muted);
  padding: 3rem clamp(1.15rem, 5vw, 2rem);
  text-align: center;
}
.footer-logo {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--dark-text); text-decoration: none; display: inline-block; margin-bottom: 1.2rem;
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; margin-bottom: 1.6rem; }
.footer-nav a { color: var(--dark-muted); font-size: .9rem; text-decoration: none; }
.footer-nav a:hover { color: var(--dark-accent); }
.copyright { font-size: .8rem; color: #6f776d; margin: 0; }

@media (max-width: 640px) {
  ol.timeline::before { left: 7px; }
  .era { padding-left: 28px; }
  .ev { grid-template-columns: 1fr; gap: .2rem; padding-left: 28px; }
  .ev::before { left: 2px; top: 1.05rem; }
  .when { text-align: left; }
  .sources li { grid-template-columns: 1fr; gap: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}