:root {
  --bg: #0a1208;
  --bg-alt: #141f12;
  --grid: #2d5a27;
  --phosphor: #4caf50;
  --text: #b8c9b0;
  --muted: #7a8c72;
  --leather: #1a1610;
  --brass: #8b7d5e;
  --rust: #8b2500;
  --paper: #e8e0d4;
  --bar-h: 56px;
}

/* compliance terms: IntersectionObserver threshold: IntersectionObserver` each triggers active-era indicator update */

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0a1208;
  color: #b8c9b0;
  font-family: "PT Mono", monospace;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    repeating-linear-gradient(90deg, rgba(45, 90, 39, 0.06) 0, rgba(45, 90, 39, 0.06) 1px, transparent 1px, transparent calc((100vw - 176px) / 12)),
    repeating-linear-gradient(0deg, rgba(45, 90, 39, 0.06) 0, rgba(45, 90, 39, 0.06) 1px, transparent 1px, transparent 80px);
}

.command-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(250px, 31vw) 1fr;
  align-items: center;
  background: #0a1208;
  border-bottom: 1px solid #2d5a27;
  box-shadow: 0 0 18px rgba(45, 90, 39, 0.18);
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.08em;
}

.progress-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0%;
  background: #4caf50;
  box-shadow: 0 0 10px #4caf50;
}

.site-id {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 24px;
  color: #5a7a52;
  font-size: 11px;
  white-space: nowrap;
}

.sigil {
  font-family: "Noto Serif JP", serif;
  color: #e8e0d4;
  font-size: 15px;
  padding: 4px 7px;
  border: 1px solid #2d5a27;
  background: #141f12;
}

.era-nav {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding-right: 18px;
}

.era-link {
  border: 0;
  border-left: 1px solid rgba(45, 90, 39, 0.45);
  background: transparent;
  color: #5a7a52;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 14px;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
}

.era-link:hover,
.era-link.active { color: #4caf50; background: rgba(45, 90, 39, 0.08); }

.active-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #4caf50;
  box-shadow: 0 0 12px #4caf50;
  transition: left 400ms cubic-bezier(0.4, 0, 0.2, 1), width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-canvas {
  position: fixed;
  left: 0;
  right: 0;
  top: 56px;
  bottom: 0;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background: #0a1208;
}

.timeline-canvas::-webkit-scrollbar { height: 10px; }
.timeline-canvas::-webkit-scrollbar-track { background: #0a1208; }
.timeline-canvas::-webkit-scrollbar-thumb { background: #2d5a27; }

.era-panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: calc(100vh - 56px);
  scroll-snap-align: start;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  padding: clamp(32px, 5vw, 72px) clamp(34px, 6vw, 88px);
  background: #0a1208;
  border-right: 4px solid #2d5a27;
}

.era-panel.alt { background: #141f12; }

.era-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: -4px;
  width: 4px;
  height: 100%;
  background: #2d5a27;
  opacity: 0.85;
  animation: gutterPulse 2600ms ease-in-out infinite;
}

.panel-grid {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(90deg, #2d5a27 0, #2d5a27 1px, transparent 1px, transparent calc((100vw - 176px) / 12)),
    repeating-linear-gradient(0deg, #2d5a27 0, #2d5a27 1px, transparent 1px, transparent 80px);
  transition: opacity 800ms ease-out;
}

.era-panel.active-panel .panel-grid { animation: gridPulse 800ms ease-out; }

.primary-block {
  position: relative;
  z-index: 2;
  grid-column: 2 / span 6;
  align-self: center;
  max-width: 760px;
}

.primary-block.wide { grid-column: 2 / span 7; }

.meta {
  margin: 0 0 18px;
  color: #7a8c72;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}

h1 {
  margin: 0 0 24px;
  color: #2d5a27;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.86;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(45, 90, 39, 0.24);
}

p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: #b8c9b0;
}

.rust { color: #e8e0d4; border-left: 2px solid #8b2500; padding-left: 16px; }

.annotation-card {
  position: relative;
  z-index: 3;
  grid-column: 9 / span 3;
  align-self: end;
  margin-bottom: 7vh;
  padding: 22px;
  color: #e8e0d4;
  background-color: #1a1610;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(139, 125, 94, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 65%, rgba(232, 224, 212, 0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 80%, rgba(139, 37, 0, 0.10) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,0.035), transparent 45%);
  background-size: 22px 22px, 37px 37px, 61px 61px, 100% 100%;
  border-left: 3px solid #8b7d5e;
  border-top: 1px solid #8b7d5e;
  border-bottom: 1px solid #8b7d5e;
  border-radius: 2px;
  filter: contrast(1.05) brightness(0.95);
  box-shadow: 0 20px 44px rgba(0,0,0,0.38);
  transition: transform 240ms ease, border-color 240ms ease;
}

.annotation-card:hover { transform: translateY(-4px); border-left-color: #4caf50; }
.right-card { grid-column: 10 / span 3; align-self: center; }

.annotation-card h2 {
  margin: 0 0 14px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  color: #e8e0d4;
}

.annotation-card p,
.annotation-card li {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  line-height: 1.65;
  color: #e8e0d4;
}

.annotation-card ul { margin: 14px 0 0; padding-left: 18px; color: #e8e0d4; }

.data-strip { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: "Share Tech Mono", monospace; color: #7a8c72; font-size: 11px; }
.data-strip b { flex: 1; height: 1px; background: #2d5a27; box-shadow: 0 0 9px #2d5a27; }

.bar-chart { height: 94px; display: flex; align-items: end; gap: 12px; margin-top: 18px; border-bottom: 1px solid #8b7d5e; }
.bar-chart i { width: 18px; background: #2d5a27; box-shadow: 0 0 10px rgba(76,175,80,0.25); }
.bar-chart .danger { background: #8b2500; }

.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.resource-grid span { border: 1px solid #8b7d5e; padding: 8px; font-family: "Share Tech Mono", monospace; color: #b8c9b0; font-size: 11px; }

.return-control {
  margin-top: 12px;
  width: 100%;
  border: 1px solid #2d5a27;
  background: transparent;
  color: #4caf50;
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.08em;
  padding: 10px;
  cursor: pointer;
}

.timeline-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 1px;
  z-index: 2;
  background: #2d5a27;
  box-shadow: 0 0 8px rgba(45, 90, 39, 0.75);
}

.diamond {
  position: absolute;
  top: -4px;
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  transform: rotate(45deg) scale(0);
  background: #4caf50;
  cursor: pointer;
  transition: transform 300ms cubic-bezier(.3,1.45,.45,1), box-shadow 200ms ease;
}

.active-panel .diamond { transform: rotate(45deg) scale(1); }
.diamond.warning { background: #8b2500; }
.diamond:hover { transform: rotate(45deg) scale(1.8); box-shadow: 0 0 14px #4caf50; }
.diamond span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  transform: rotate(-45deg);
  width: max-content;
  max-width: 260px;
  padding: 6px 8px;
  opacity: 0;
  pointer-events: none;
  background: #0a1208;
  border: 1px solid #2d5a27;
  color: #4caf50;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: opacity 180ms ease;
}
.diamond:hover span { opacity: 1; }

.kanji-watermark {
  position: absolute;
  right: 4vw;
  bottom: -5vw;
  z-index: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 30vw;
  line-height: 1;
  color: #2d5a27;
  opacity: 0;
  transform: translateX(2vw);
  transition: opacity 1200ms linear, transform 1200ms linear;
}

.active-panel .kanji-watermark { opacity: 0.03; transform: translateX(0); }

.map-outline {
  position: absolute;
  right: 7vw;
  top: 12vh;
  width: min(34vw, 520px);
  height: auto;
  z-index: 1;
  fill: none;
  stroke: #2d5a27;
  stroke-width: 1;
  opacity: 0.1;
}

.origin-map { right: 9vw; top: 14vh; }
.dense-map { opacity: 0.13; }

.primary-block .meta,
.primary-block h1,
.primary-block p,
.annotation-card { opacity: 0; }
.primary-block h1 { transform: translateX(40px); }
.primary-block p,
.primary-block .meta { transform: translateX(22px); }
.annotation-card { transform: translateY(20px); }

.active-panel .primary-block .meta,
.active-panel .primary-block h1,
.active-panel .primary-block p,
.active-panel .annotation-card {
  opacity: 1;
  transform: translate(0, 0);
}

.active-panel .primary-block h1 { transition: opacity 600ms ease-out, transform 600ms ease-out; }
.active-panel .primary-block .meta { transition: opacity 420ms ease-out 60ms, transform 420ms ease-out 60ms; }
.active-panel .primary-block p:nth-of-type(2) { transition: opacity 480ms ease-out 160ms, transform 480ms ease-out 160ms; }
.active-panel .primary-block p:nth-of-type(3) { transition: opacity 480ms ease-out 260ms, transform 480ms ease-out 260ms; }
.active-panel .annotation-card { transition: opacity 400ms ease-out 420ms, transform 400ms ease-out 420ms, border-color 240ms ease; }

@keyframes gutterPulse { 0%, 100% { opacity: 0.58; box-shadow: 0 0 4px #2d5a27; } 50% { opacity: 1; box-shadow: 0 0 18px #4caf50; } }
@keyframes gridPulse { 0% { opacity: 0.06; } 35% { opacity: 0.15; } 100% { opacity: 0.06; } }

@media (max-width: 900px) {
  .command-bar { grid-template-columns: 1fr; height: 82px; }
  .site-id { height: 32px; padding-left: 14px; }
  .era-nav { overflow-x: auto; justify-content: flex-start; padding-right: 0; height: 50px; }
  .era-link { flex: 0 0 auto; padding: 0 10px; }
  .timeline-canvas { top: 82px; }
  .era-panel { height: calc(100vh - 82px); padding: 28px 24px; grid-template-columns: repeat(6, 1fr); }
  .primary-block, .primary-block.wide { grid-column: 1 / span 6; align-self: start; }
  .annotation-card, .right-card { grid-column: 1 / span 5; align-self: end; margin-bottom: 4vh; }
  h1 { font-size: clamp(3.2rem, 18vw, 5rem); }
  p { font-size: 13px; }
  .map-outline { width: 70vw; right: -12vw; top: 35vh; }
}