/* ===========================================================
   大手町郵便局のあゆみ 100年（架空）— 縦スクロール年代記
   型: chronicle × high × no-hero × journalistic
        （ヒーロー無し・いきなり1924年から・縦スクロール＝時間の経過）

   核: 下へ進む＝時間が進む。左レールの「現在の年」がスクロールで 1924→2024 と
       数え上がり、時代帯ごとに配色・書体・写真の色が沙汰(セピア→現代)に転調する。
   仕上げ: 新聞の年代記＝罫線・余白・数字の揃えで密度を出す。明朝＋等幅。
   =========================================================== */

:root{
  --ink:#1d1811;
  --ink-2:#5a5040;
  --ink-3:#8a7d68;
  --paper-panel:rgba(255,252,244,.72);
  --rule:rgba(29,24,17,.16);
  --rule-2:rgba(29,24,17,.09);
  --red:#c0392b;               /* 現在の郵便赤に向かって時代帯で上書き */

  --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --mono:"Roboto Mono","SFMono-Regular",ui-monospace,monospace;

  --wrap:1080px;
  --mast-h:58px;
  --rail-w:236px;

  --ck-load-bg:#1d1811;
  --ck-load-fg:#efe4d0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:#eee5d2;                    /* JS未実行時のフォールバック基調 */
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.92;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
.cu{font-variant-numeric:tabular-nums}

/* 時代で色が転調する固定背景（JSが :root --field を毎スクロール補間） */
.chron-bg{
  position:fixed; inset:0; z-index:-2; background:var(--field,#eee5d2);
  transition:background-color .25s linear;
}

/* ===========================================================
   題字帯（新聞のネームプレート・ヒーローではない）
   =========================================================== */
.mast{
  position:fixed; inset:0 0 auto 0; z-index:600;
  background:rgba(244,238,226,.86); backdrop-filter:blur(9px) saturate(1.06);
  border-bottom:1px solid var(--rule);
}
.mast-in{
  max-width:1240px; margin:0 auto; padding:0 clamp(18px,3vw,36px);
  height:var(--mast-h); display:flex; align-items:center; gap:18px;
}
.mast-mark{
  font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:.09em;
  color:var(--ink); text-decoration:none; display:flex; flex-direction:column; line-height:1.15;
  white-space:nowrap; min-width:0;                 /* 狭幅で縮められるように */
}
.mast-mark span{
  font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:.06em;
  color:var(--ink-3); margin-top:2px;
}
.mast-nav{display:flex; gap:clamp(12px,1.6vw,24px); margin-left:auto}
.mast-nav a{
  font-family:var(--serif); font-size:14px; letter-spacing:.08em; color:var(--ink-2);
  text-decoration:none; padding:6px 0; position:relative;
}
.mast-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ck-ease,ease);
}
.mast-nav a:hover::after, .mast-nav a:focus-visible::after, .mast-nav a.is-active::after{transform:scaleX(1)}
.mast-nav a.is-active{color:var(--ink)}

.mast-chip{
  display:none; align-items:baseline; gap:7px; padding-left:16px; margin-left:4px;
  border-left:1px solid var(--rule);
}
.mast-chip b{font-family:var(--mono); font-weight:600; font-size:19px; color:var(--red); letter-spacing:.01em}
.mast-chip span{font-family:var(--serif); font-size:11.5px; color:var(--ink-2); white-space:nowrap}

.mast-prog{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent}
.mast-prog span{display:block; height:100%; width:0%; background:var(--red); transition:width .12s linear}

/* ===========================================================
   左の年インジケータ（背骨）
   ── getBoundingClientRect が固定要素で動かないため、craftkitの--pではなく
      JSが #track のスクロール進捗を --yp(0..1) として :root に書き込み駆動する。
   =========================================================== */
.rail{
  display:none;                         /* 既定は非表示。広い/高い画面で有効化 */
  position:fixed; left:0; top:var(--mast-h); z-index:520;
  width:var(--rail-w); height:calc(100vh - var(--mast-h));
  padding:38px 26px 30px 34px;
  flex-direction:column; align-items:flex-start;
  border-right:1px solid var(--rule);
  /* 常に不透明のフィールド色サイドバー＝下部でフッター(暗)が透けても文字が暗地に沈まない */
  background:var(--field,#eee5d2);
  transition:background-color .25s linear;
}
.rail-cap{
  margin:0 0 6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-3);
}
.rail-year{
  margin:0; font-family:var(--mono); font-weight:600; font-size:52px; line-height:1;
  letter-spacing:.005em; color:var(--red); font-variant-numeric:tabular-nums;
}
.rail-wareki{
  margin:6px 0 0; font-family:var(--serif); font-weight:700; font-size:16px;
  letter-spacing:.06em; color:var(--ink);
}
.rail-track{
  position:relative; width:2px; margin:30px 0 0 6px; flex:1 1 auto;
  min-height:120px; background:var(--rule);
}
.rail-fill{
  position:absolute; left:0; top:0; width:100%;
  height:calc(var(--yp,0) * 100%); background:var(--red);
}
.rail-dot{
  position:absolute; left:50%; top:calc(var(--yp,0) * 100%);
  width:11px; height:11px; margin-left:-5.5px; margin-top:-5.5px; border-radius:50%;
  background:#fff; border:2px solid var(--red);
  box-shadow:0 0 0 4px rgba(192,57,43,.14);
}
.rail-ticks{list-style:none; margin:0; padding:0; position:absolute; inset:0}
.rail-ticks li{position:absolute; left:0; top:calc(var(--at) * 100%); transform:translateY(-50%)}
.rail-ticks li::before{
  content:""; position:absolute; left:-4px; top:50%; width:7px; height:1px;
  background:var(--rule); transform:translateY(-50%);
}
.rail-ticks i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-3);
  font-style:normal; white-space:nowrap;
}
.rail-elapsed{
  margin:26px 0 0; font-family:var(--serif); font-size:12.5px; color:var(--ink-2);
}
.rail-elapsed b{font-family:var(--mono); font-weight:600; font-size:15px; color:var(--ink); margin:0 2px}

/* ===========================================================
   本体レイアウト
   =========================================================== */
.chron{
  position:relative; z-index:1;
  padding-top:var(--mast-h);
}
.wrapcol{max-width:var(--wrap); margin:0 auto; padding:0 clamp(22px,4vw,40px)}

/* ---- 冒頭リード（ヒーロー無し・年表の頭） ---- */
.chron-open{
  max-width:760px; margin:0 auto; padding:clamp(56px,9vh,104px) clamp(22px,4vw,40px) clamp(40px,6vh,72px);
}
.open-kicker{
  margin:0 0 20px; font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--red);
}
.open-kicker::before{
  content:""; display:inline-block; width:34px; height:1px; background:var(--red);
  vertical-align:middle; margin-right:14px; margin-bottom:3px;
}
.open-h{
  margin:0 0 26px; font-family:var(--serif); font-weight:900; color:var(--ink);
  font-size:clamp(38px,6vw,66px); line-height:1.28; letter-spacing:.01em;
}
.open-lede{
  margin:0 0 30px; font-size:16.5px; line-height:2.05; color:var(--ink-2); max-width:60ch;
}
.open-lede b{color:var(--ink); font-weight:700}
.open-hint{
  margin:0; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--ink-3);
}
.open-hint span{
  display:inline-block; width:1px; height:34px; background:var(--ink-3); position:relative; overflow:hidden;
}
.open-hint span::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--red);
  animation:drip 2s ease-in-out infinite;
}
@keyframes drip{0%{top:-100%}55%{top:100%}100%{top:100%}}

/* ===========================================================
   時代帯（era）
   =========================================================== */
.era{
  max-width:var(--wrap); margin:0 auto; padding:clamp(40px,7vh,88px) clamp(22px,4vw,40px);
  position:relative;
  scroll-margin-top:calc(var(--mast-h) + 14px);   /* 固定題字帯にアンカー先が隠れない */
}
.era + .era{border-top:1px solid var(--rule-2)}

.era-head{
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(26px,4vw,58px);
  align-items:center; margin-bottom:clamp(30px,5vh,58px);
}
.era:nth-of-type(even) .era-head{grid-template-columns:.96fr 1.04fr}
.era:nth-of-type(even) .era-photo{order:2}

.era-photo{
  margin:0; position:relative; overflow:hidden;
  border:1px solid var(--rule); background:#0002;
  box-shadow:0 22px 48px -26px rgba(29,24,17,.5);
}
.era-photo img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  filter:var(--photo-filter, none);
}
.era-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 16px 10px; font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  color:#f4eee2; background:linear-gradient(0deg, rgba(20,16,10,.82), transparent);
}
.era-gengo{
  margin:0 0 12px; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);
}
.era-range{
  margin:0 0 14px; font-family:var(--mono); font-weight:500; font-size:15px;
  letter-spacing:.06em; color:var(--ink-3);
}
.era-title{
  margin:0 0 16px; font-family:var(--serif); font-weight:900; color:var(--ink);
  font-size:clamp(27px,3.5vw,40px); line-height:1.44; letter-spacing:.01em;
}
.era-lede{margin:0; font-size:15px; line-height:2; color:var(--ink-2); max-width:52ch}

/* ---- 年エントリ（縦の時間軸に沿う） ---- */
.entries{
  list-style:none; margin:0; padding:0; position:relative;
}
/* 時間軸の縦線（年カラムと本文カラムのあいだ） */
.entries::before{
  content:""; position:absolute; left:112px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, transparent, var(--rule) 6%, var(--rule) 94%, transparent);
}
.entry{
  position:relative;
  display:grid; grid-template-columns:98px 1fr; column-gap:44px;
  padding:20px 0 26px;
}
.entry + .entry{border-top:1px solid var(--rule-2)}
/* 軸上の節点 */
.entry::before{
  content:""; position:absolute; left:112px; top:30px; width:10px; height:10px;
  margin-left:-5px; border-radius:50%; background:var(--tone-bg,#eee5d2);
  border:2px solid var(--red); box-shadow:0 0 0 3px var(--tone-bg,#eee5d2);
}
.entry-year{
  margin:0; text-align:right; font-family:var(--serif); font-weight:900;
  font-size:clamp(28px,3vw,38px); line-height:1; letter-spacing:.01em;
  color:var(--ink); font-variant-numeric:tabular-nums; padding-top:4px;
}
.entry-body{max-width:60ch}
.entry-gengo{
  margin:0 0 7px; font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; color:var(--red);
}
.entry-head{
  margin:0 0 10px; font-family:var(--serif); font-weight:700; color:var(--ink);
  font-size:clamp(19px,2vw,23px); line-height:1.5;
}
.entry-text{margin:0; font-size:14.5px; line-height:1.95; color:var(--ink-2)}
.entry-fig{
  margin:14px 0 0; display:inline-flex; align-items:baseline; gap:9px;
  padding:7px 14px; background:var(--paper-panel); border:1px solid var(--rule);
}
.entry-fig b{font-family:var(--mono); font-weight:600; font-size:22px; color:var(--red); font-variant-numeric:tabular-nums}
.entry-fig span{font-family:var(--sans); font-size:12px; color:var(--ink-2)}

/* ===========================================================
   時代ごとの転調（配色・書体の重み・写真の色）
   ── セピア(木造) → 復興(灰) → 成長(くすんだ色) → 現代(郵便赤・冷たい紙)
   =========================================================== */
.era[data-era="taisho"]{
  --red:#7c2f22; --ink:#241b12; --ink-2:#5c4c39; --ink-3:#93805f;
  --rule:rgba(36,27,18,.18); --rule-2:rgba(36,27,18,.09);
  --tone-bg:#e9dcc2; --photo-filter:sepia(.34) contrast(1.02);
}
.era[data-era="postwar"]{
  --red:#8f2f24; --ink:#221c15; --ink-2:#564c3e; --ink-3:#8a7d68;
  --rule:rgba(34,28,21,.17); --rule-2:rgba(34,28,21,.085);
  --tone-bg:#e8e0d0; --photo-filter:grayscale(.2) sepia(.06) contrast(1.02);
}
.era[data-era="growth"]{
  --red:#a8362a; --ink:#1e1a15; --ink-2:#524a3e; --ink-3:#867b69;
  --rule:rgba(30,26,21,.15); --rule-2:rgba(30,26,21,.08);
  --tone-bg:#ebe7db; --photo-filter:saturate(.86) contrast(1.01);
}
.era[data-era="modern"]{
  --red:#d02417; --ink:#181b1e; --ink-2:#4d545a; --ink-3:#828a91;
  --rule:rgba(24,27,30,.15); --rule-2:rgba(24,27,30,.08);
  --tone-bg:#eef1f4; --photo-filter:none;
}
/* 現代帯では年数字を等幅(モダン)に切り替える＝書体の転調 */
.era[data-era="modern"] .entry-year{
  font-family:var(--mono); font-weight:600; letter-spacing:0;
  font-size:clamp(25px,2.6vw,33px);
}

/* ===========================================================
   締め（現在→これから＋総括）
   =========================================================== */
.closing{
  --red:#d02417; --ink:#181b1e; --ink-2:#4d545a; --ink-3:#828a91;
  --rule:rgba(24,27,30,.15);
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(56px,9vh,104px) clamp(22px,4vw,40px) clamp(40px,6vh,80px);
  border-top:2px solid var(--ink);
  scroll-margin-top:calc(var(--mast-h) + 14px);
}
.closing-year{
  margin:0; font-family:var(--mono); font-weight:600; font-size:clamp(56px,9vw,104px);
  line-height:.95; letter-spacing:.01em; color:var(--red); font-variant-numeric:tabular-nums;
}
.closing-gengo{
  margin:8px 0 30px; font-family:var(--serif); font-weight:700; font-size:16px;
  letter-spacing:.08em; color:var(--ink-2);
}
.closing-h{
  margin:0 0 20px; font-family:var(--serif); font-weight:900; color:var(--ink);
  font-size:clamp(28px,4vw,44px); line-height:1.4;
}
.closing-lede{
  margin:0 0 clamp(38px,6vh,60px); font-size:16px; line-height:2.05; color:var(--ink-2); max-width:62ch;
}
.closing-lede b{color:var(--ink); font-weight:700}

.summary{
  margin:0 0 clamp(30px,5vh,50px); padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.summary > div{background:var(--tone-bg,#eef1f4); padding:26px 18px 24px}
.summary dt{
  margin:0 0 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.summary dd{
  margin:0; font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink-2);
  line-height:1.3;
}
.summary dd b{
  display:inline-block; font-family:var(--mono); font-weight:600; font-size:34px;
  color:var(--red); font-variant-numeric:tabular-nums; margin:0 3px; line-height:1;
}
.summary dd span{font-family:var(--sans); font-size:12.5px; color:var(--ink-2); margin-left:1px}
.closing-foot{
  margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(17px,2vw,21px);
  letter-spacing:.04em; color:var(--ink); text-align:right;
}

/* ===========================================================
   フッター（奥付）
   =========================================================== */
.ft{position:relative; z-index:1; background:#1b1811; color:rgba(238,229,210,.82); padding:56px 0 42px}
.ft-in{max-width:var(--wrap); margin:0 auto; padding:0 clamp(22px,4vw,40px)}
.ft-mark{
  margin:0 0 26px; font-family:var(--serif); font-weight:700; font-size:21px; color:#fff;
  display:flex; align-items:baseline; gap:11px;
}
.ft-mark span{font-family:var(--mono); font-weight:400; font-size:12px; color:#d9a; color:rgba(238,229,210,.5)}
.ft-t{width:100%; max-width:640px; border-collapse:collapse; font-size:13.5px; margin-bottom:30px}
.ft-t th{
  width:88px; text-align:left; font-family:var(--mono); font-size:11px; font-weight:400;
  color:rgba(238,229,210,.5); padding:9px 12px 9px 0; border-bottom:1px solid rgba(238,229,210,.13);
  vertical-align:top; white-space:nowrap; letter-spacing:.04em;
}
.ft-t td{padding:9px 0; border-bottom:1px solid rgba(238,229,210,.13)}
.ft-disc{
  margin:0 0 12px; font-size:11.5px; line-height:1.95; color:rgba(238,229,210,.5);
  border-top:1px solid rgba(238,229,210,.13); padding-top:16px; max-width:80ch;
}
.ft-disc b{color:rgba(238,229,210,.82)}
.ft-c{margin:0; font-family:var(--mono); font-size:11px; color:rgba(238,229,210,.34); letter-spacing:.02em}

/* ===========================================================
   広い＆高い画面：左レールを有効化し本文を右へ寄せる
   =========================================================== */
@media (min-width:1120px) and (min-height:720px){
  .rail{display:flex}
  .chron, .ft{padding-left:var(--rail-w)}
  .chron-open, .era, .closing{margin-left:0}
  .mast-mark span{font-size:10px}
}

/* 狭い/低い画面：レールの代わりに題字帯へ年チップを出す */
@media (max-width:1119px), (max-height:719px){
  .mast-chip{display:flex}
}

/* ===========================================================
   レスポンシブ（1280基準・下でも破綻しない）
   =========================================================== */
@media (max-width:900px){
  .era-head{grid-template-columns:1fr; gap:22px}
  .era:nth-of-type(even) .era-head{grid-template-columns:1fr}
  .era:nth-of-type(even) .era-photo{order:0}
  .summary{grid-template-columns:repeat(2,1fr)}
  .mast-nav a:nth-child(4), .mast-nav a:nth-child(5){display:none}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .mast-mark{font-size:15px}
  .mast-mark span{display:none}            /* 英字副題を畳む（横はみ出し防止） */
  .mast-nav{gap:14px}
  .mast-nav a:nth-child(3){display:none}   /* 開局・戦後 ＋ 年チップ のみ残す */
  .open-h{font-size:clamp(30px,8vw,40px)}
  /* 年カラムを本文の上に畳む＝軸線は隠す */
  .entries::before{display:none}
  .entry{grid-template-columns:1fr; column-gap:0; row-gap:6px}
  .entry::before{left:0; top:8px}
  .entry-year{text-align:left; padding-left:22px}
  .entry-fig{margin-left:0}
  .summary{grid-template-columns:1fr}
  .closing-foot{text-align:left}
}
/* 極狭幅：ナビを畳み、題字＋年チップだけ残す（切れ防止） */
@media (max-width:470px){
  .mast-nav{display:none}
  .mast-chip{padding-left:0; margin-left:auto; border-left:none}
}

/* ===========================================================
   reduced-motion：ドリップ等の自律アニメを止める
   （craftkit側で reveal/parallax/背景の進行はすでに静止・最終状態表示）
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .open-hint span::after{animation:none; top:0}
  .mast-prog span, .chron-bg, .rail{transition:none}
}