:root {
  --night: #24172a;
  --night-2: #36213d;
  --cream: #f7f0de;
  --mint: #a7e8c2;
  --coral: #ff7d68;
  --sky: #9ec8ff;
  --gold: #e4b84e;
  --line-dark: rgba(247,240,222,.18);
  --line-light: rgba(36,23,42,.18);
  color: var(--night);
  background: var(--cream);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--cream); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .65rem 1rem; color: var(--night); background: var(--mint); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.topbar { min-height: 4.5rem; padding: .85rem clamp(1rem, 4vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--cream); background: var(--night); border-bottom: 1px solid var(--line-dark); }
.wordmark { min-width: 16rem; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .55rem; color: inherit; text-decoration: none; font-size: .64rem; }
.wordmark i { height: 1px; background: currentColor; opacity: .4; }.wordmark strong { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
nav { display: flex; gap: .35rem; }
nav a { padding: .55rem .7rem; border-radius: .25rem; color: var(--cream); text-decoration: none; font-size: .72rem; font-weight: 700; }
nav a[aria-current="page"] { color: var(--night); background: var(--mint); }

.hero { min-height: min(720px, 78vh); padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 6vw, 6rem); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); align-items: end; gap: 3rem; color: var(--cream); background: var(--night); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -20%; right: -10%; width: clamp(18rem, 45vw, 42rem); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 1.5rem, rgba(167,232,194,.12) 1.55rem 1.65rem); }
.hero-copy, .hero-note { position: relative; z-index: 1; }
.kicker { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .2em; color: var(--mint); font-size: .65rem; font-weight: 800; }
h1 { max-width: 900px; margin: 0; font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-size: clamp(4rem, 12vw, 10.8rem); font-weight: 800; line-height: .76; letter-spacing: -.075em; text-transform: uppercase; }
h1 em { color: var(--coral); font-style: normal; }
.hero-note { max-width: 28rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); }
.hero-note p { margin: 0; font-family: ui-sans-serif, sans-serif; font-size: 1rem; line-height: 1.6; color: rgba(247,240,222,.72); }
.hero-note a { display: inline-block; margin-top: 1.5rem; padding-bottom: .3rem; border-bottom: 1px solid currentColor; color: var(--mint); text-decoration: none; font-size: .78rem; font-weight: 800; }

.controls { padding: 1rem clamp(1rem, 4vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; border-bottom: 1px solid var(--line-light); background: #fffaf0; }
.control-group > p, .control-group label > span { display: block; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .12em; font-size: .58rem; font-weight: 800; }
.chips { display: flex; gap: .35rem; overflow-x: auto; padding: .15rem 0; scrollbar-width: thin; }
.chip { flex: 0 0 auto; padding: .55rem .65rem; border: 1px solid var(--line-light); color: var(--night); background: transparent; font-size: .68rem; cursor: pointer; }
.chip.is-active { color: var(--cream); background: var(--night); border-color: var(--night); }
.custom-range { display: flex; align-items: end; gap: .45rem; }.custom-range > p { display: none; }.custom-range label span { margin-bottom: .25rem; }
.custom-range input { width: 5.8rem; padding: .52rem .45rem; border: 1px solid var(--line-light); border-radius: 0; color: var(--night); background: var(--cream); }
.custom-range button { padding: .56rem .7rem; border: 0; color: var(--cream); background: var(--night); cursor: pointer; }

.timeline-section { padding: clamp(3rem, 7vw, 6rem) 0 0; background: var(--cream); }
.timeline-heading { padding: 0 clamp(1rem, 4vw, 4rem) 2rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.timeline-heading h2 { margin: 0; font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .85; letter-spacing: -.06em; }
.timeline-heading > p { max-width: 26rem; margin: 0; font-family: ui-sans-serif, sans-serif; line-height: 1.5; font-size: .8rem; color: #685c6b; }.timeline-heading > p strong { color: var(--night); }
.timeline-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .45fr); align-items: start; border-top: 1px solid var(--line-light); }
.timeline-column { min-width: 0; padding: 1rem clamp(1rem, 3vw, 3rem) 2.5rem; background: var(--night); color: var(--cream); }
/* 2026-07-19: 可読性改善（実機指摘）。9.28px・alpha .5 はコントラスト比 3.78:1 で WCAG AA (4.5:1) 未満だった。
   色相は変えず alpha・サイズ・ウェイトだけを上げて 5.2:1 へ。字間は uppercase+極小との相乗を緩めるため詰める。 */
.scroll-cue { padding: .2rem 0 .8rem; display: flex; justify-content: space-between; color: rgba(247,240,222,.65); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.timeline-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--coral) var(--night-2); }
.timeline-canvas { position: relative; width: 1900px; height: 560px; overflow: hidden; border: 1px solid var(--line-dark); background: linear-gradient(to bottom, rgba(158,200,255,.08) 0 44%, transparent 44% 56%, rgba(167,232,194,.07) 56% 100%); }
.lane { position: absolute; z-index: 1; left: 0; right: 0; border-bottom: 1px dashed var(--line-dark); pointer-events: none; }.lane span { position: sticky; left: .6rem; display: inline-block; padding: .2rem .3rem; color: rgba(247,240,222,.42); background: var(--night); font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }
.lane-power { top: 7%; height: 37%; }.lane-shared { top: 44%; height: 12%; }.lane-people { top: 56%; height: 37%; border-bottom: 0; }
.year-line { position: absolute; z-index: 0; top: 0; bottom: 0; width: 1px; background: rgba(247,240,222,.08); }.year-line.major { background: rgba(247,240,222,.18); }/* 同上。年号ラベルは alpha .42 ＝ 3.09:1 と最も薄かった。線（.year-line 本体）の濃度は据え置き＝目盛りは静かなまま、数字だけ読めるようにする。 */
.year-line span { position: absolute; bottom: .45rem; left: .35rem; color: rgba(247,240,222,.65); font-size: .7rem; font-weight: 500; }
.time-point { position: absolute; z-index: 3; width: .95rem; height: .95rem; margin: -.475rem 0 0 -.475rem; padding: 0; border: 2px solid var(--night); border-radius: 50%; background: var(--dot, var(--mint)); box-shadow: 0 0 0 1px var(--dot); cursor: pointer; transition: opacity .18s, transform .18s, width .18s, height .18s, margin .18s; }
.time-point.power { --dot: var(--sky); }.time-point.people { --dot: var(--mint); }.time-point.shared { --dot: var(--gold); }
.time-point:hover, .time-point:focus-visible { width: 1.45rem; height: 1.45rem; margin: -.725rem 0 0 -.725rem; z-index: 7; }
.time-point.is-selected { width: 1.8rem; height: 1.8rem; margin: -.9rem 0 0 -.9rem; border-width: 5px; background: white; z-index: 8; }
.time-point.is-hidden { opacity: .06; transform: scale(.4); pointer-events: none; }
.undated { min-height: 4rem; padding: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px dashed var(--line-dark); border-top: 0; }
.undated > div:first-child { display: grid; gap: .2rem; }.undated strong { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }.undated span { color: rgba(247,240,222,.5); font-size: .6rem; }
#undated-list { display: flex; gap: .4rem; }.undated-button { width: 1.6rem; height: 1.6rem; padding: 0; border: 1px dashed var(--cream); border-radius: 50%; color: var(--cream); background: transparent; font-size: .58rem; cursor: pointer; }.undated-button.is-selected { color: var(--night); background: var(--cream); }
.timeline-key { padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; color: rgba(247,240,222,.55); font-size: .58rem; }.timeline-key span { display: flex; align-items: center; gap: .4rem; }.key-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--dot); }.key-dot.power { --dot: var(--sky); }.key-dot.people { --dot: var(--mint); }.key-dot.shared { --dot: var(--gold); }

.detail-card { position: sticky; top: 0; min-height: 100vh; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 3vw, 2.5rem); color: var(--night); background: var(--coral); }
.detail-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; font-weight: 800; }
.detail-topline button { padding: .4rem .55rem; border: 1px solid currentColor; color: inherit; background: transparent; cursor: pointer; font-size: .62rem; }
.year { margin: 2.5rem 0 .6rem; font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .75; letter-spacing: -.06em; font-weight: 850; }
.layer-badge { display: inline-block; margin: .7rem 0 1rem; padding: .35rem .5rem; color: var(--cream); background: var(--night); font-size: .62rem; font-weight: 800; }
.detail-card h2 { margin: 0; font-family: ui-sans-serif, sans-serif; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.deep-link { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .18s; }
.deep-link:hover, .deep-link:focus-visible { background-size: 100% 1px; }
.site-meta { margin: .7rem 0 0; color: rgba(36,23,42,.65); font-size: .65rem; }
.anecdote { margin: 1.8rem 0; font-family: ui-sans-serif, sans-serif; font-size: 1rem; line-height: 1.55; }
.anecdote.is-missing { padding: .9rem; border: 1px dashed currentColor; font-family: inherit; font-size: .78rem; }
.signals { margin: 0; border-block: 1px solid rgba(36,23,42,.28); }.signals div { padding: .75rem 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: .8rem; }.signals div + div { border-top: 1px solid rgba(36,23,42,.15); }.signals dt { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; }.signals dd { margin: 0; font-family: ui-sans-serif, sans-serif; font-size: .78rem; font-weight: 750; }
.honesty-note { color: rgba(36,23,42,.65); font-family: ui-sans-serif, sans-serif; font-size: .67rem; line-height: 1.45; }
.cafe { margin-top: 1.5rem; padding: 1rem; color: var(--cream); background: var(--night); box-shadow: .4rem .4rem 0 var(--mint); }.cafe p { margin: 0 0 .6rem; color: var(--mint); text-transform: uppercase; letter-spacing: .12em; font-size: .56rem; font-weight: 800; }.cafe h3 { margin: 0; font-family: ui-sans-serif, sans-serif; font-size: 1.2rem; }.cafe span { display: block; margin-top: .35rem; color: rgba(247,240,222,.6); font-size: .6rem; }
.article-links { display: grid; gap: .4rem; margin-top: 1rem; }.article-links a { color: var(--night); font-size: .68rem; font-weight: 800; }
.detail-nav { margin-top: 1.4rem; display: flex; justify-content: space-between; }.detail-nav button { padding: .5rem 0; border: 0; border-bottom: 1px solid currentColor; color: var(--night); background: transparent; font-size: .65rem; font-weight: 800; cursor: pointer; }

.method-note { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 10vw, 10rem); display: grid; grid-template-columns: .45fr 1fr; gap: 2rem; background: var(--mint); }.method-note span { text-transform: uppercase; letter-spacing: .12em; font-size: .65rem; font-weight: 850; }.method-note p { margin: 0; font-family: ui-sans-serif, sans-serif; font-size: clamp(1.15rem, 2.5vw, 2rem); line-height: 1.35; }
footer { padding: 1.2rem clamp(1rem, 4vw, 4rem); display: flex; justify-content: space-between; gap: 1rem; color: rgba(247,240,222,.6); background: var(--night); font-size: .58rem; }

@media (max-width: 980px) {
  .controls { grid-template-columns: 1fr 1fr; }.period-control { grid-column: 1 / -1; }
  .timeline-layout { grid-template-columns: 1fr; }.detail-card { position: relative; min-height: 0; }
}

@media (max-width: 700px) {
  .topbar { align-items: flex-start; }.wordmark { min-width: 0; margin-top: .45rem; grid-template-columns: auto 1fr auto; }.wordmark i:first-of-type, .wordmark span:last-child { display: none; }.wordmark strong { font-size: .62rem; }
  nav { flex-direction: column; align-items: flex-end; }
  .hero { min-height: 670px; grid-template-columns: 1fr; align-content: end; gap: 2rem; }.hero::before { right: -45%; }
  h1 { font-size: clamp(4rem, 20vw, 7rem); }
  .controls { grid-template-columns: 1fr; }.period-control { grid-column: auto; }.custom-range { justify-content: space-between; }
  .timeline-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .timeline-canvas { width: 1650px; height: 500px; }
  .method-note { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Bean & Stone 65 / Long Now 35 */
:root {
  --night:#20221f; --night-2:#243b56; --cream:#f3eee2;
  --mint:#e7deca; --coral:#d8cdb8; --sky:#71879a; --gold:#a13a28;
  --line-dark:rgba(243,238,226,.20); --line-light:rgba(32,34,31,.22);
  font-family:"EB Garamond",Georgia,serif;
}
.topbar{min-height:5rem;color:var(--night);background:var(--cream);border-color:var(--line-light)}
.wordmark{min-width:0;display:flex;align-items:center;gap:.75rem;color:var(--night);font-size:inherit}
.seal{width:2.1rem;height:2.1rem;flex:0 0 auto}.seal rect{fill:#a13a28}.seal text{fill:var(--cream);font:23px "Noto Serif JP",serif;text-anchor:middle}
.wordmark>span{display:grid}.wordmark strong{font-size:1.02rem;font-weight:400;font-variant-caps:all-small-caps;letter-spacing:.26em;text-transform:none} /* 2026-07-17: LPワードマーク（fable.css .brand .wordmark）と同一の様式に統一 */.wordmark small{color:#6f6b61;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
nav a{border-radius:0;color:var(--night);font-weight:500}nav a[aria-current="page"]{color:var(--cream);background:var(--night)}
.hero{color:var(--cream);background:var(--night-2)}
.hero::before{background:repeating-radial-gradient(circle,transparent 0 1.5rem,rgba(243,238,226,.09) 1.55rem 1.6rem)}
.kicker{color:#d8b58d;font-weight:600}
h1,.timeline-heading h2,.year{font-family:"EB Garamond",Georgia,serif;font-weight:400;text-transform:none;letter-spacing:-.05em}
h1 em{color:#d8b58d;font-style:italic}
.hero-note p{font-family:"EB Garamond",Georgia,serif;color:rgba(243,238,226,.75)}.hero-note a{color:#d8b58d;font-weight:500}
.controls{background:var(--cream)}.chip{font-family:"EB Garamond",Georgia,serif}.chip.is-active{background:var(--night-2);border-color:var(--night-2)}
.custom-range button{background:var(--night-2)}
.timeline-heading>p{font-family:"EB Garamond",Georgia,serif;color:#6f6b61}
.timeline-column{background:var(--night-2)}
.timeline-scroll{scrollbar-color:#a13a28 var(--night-2)}
.timeline-canvas{background:linear-gradient(to bottom,rgba(113,135,154,.10) 0 44%,transparent 44% 56%,rgba(216,181,141,.08) 56% 100%)}
.lane span{background:var(--night-2)}
.time-point.power{--dot:#71879a}.time-point.people{--dot:#b59a79}.time-point.shared{--dot:#a13a28}
.detail-card{background:var(--coral)}
.detail-card h2,.anecdote,.signals dd,.cafe h3{font-family:"EB Garamond",Georgia,serif}
.layer-badge{background:var(--night-2)}.cafe{background:var(--night-2);box-shadow:.35rem .35rem 0 #a13a28}.cafe p{color:#d8b58d}
.method-note{background:var(--mint)}.method-note p{font-family:"EB Garamond",Georgia,serif}
footer{background:var(--night-2)}
@media(max-width:700px){.wordmark>span:last-child{display:grid}.wordmark{margin-top:0}.wordmark small{display:none}nav a{padding:.5rem .42rem;font-size:.66rem}}

/* 2026-07-18: 非選択の初期/解除状態＝カードを説明欄にする（app.js clearSelection と対） */
.detail-card.is-empty .year,
.detail-card.is-empty .layer-badge,
.detail-card.is-empty .site-meta,
.detail-card.is-empty .signals,
.detail-card.is-empty .honesty-note,
.detail-card.is-empty .cafe,
.detail-card.is-empty .article-links,
.detail-card.is-empty .detail-nav,
.detail-card.is-empty #language-toggle{display:none}
.detail-card.is-empty #site-name{pointer-events:none}