:root{
  --bg: #f5f0e6;
  --fg: #1f2226;
  --hero-h: min(40vh, 480px);
  --maxw: 1200px;
  --card: #ffffff;
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.16);
  --line: #111;
  --label-bg: #6e5222;   /* gold/brown */
  --label-fg: #fff9ec;
}
* { box-sizing: border-box; }
body { margin:0; background: var(--bg); color: var(--fg); font:20px/1.6 ui-sans-serif,system-ui; }
body.modal-open { overflow:hidden; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #000;
  color: #fff;
  z-index: 10000;
}

/* HERO */
.hero { position: relative; width:100%; height:var(--hero-h); background:#ddd center/cover no-repeat; background-position: center 30%; display:grid; place-items:end start; border-bottom: 2px solid #000; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.40) 55%,rgba(0,0,0,0.60) 100%); }
.hero-inner { position:relative; width:100%; max-width:var(--maxw); padding:clamp(14px,3vw,28px); }
.title { margin:0; padding:0; font-weight:800; font-size:clamp(36px,7.5vw,75px); line-height:1.05; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,0.35);}
.subtitle { margin:2px 0 0 0; padding:0; font-size:clamp(22px,4vw,38px); line-height:1.15; color: #fff; text-shadow:0 2px 14px rgba(0,0,0,0.3); }

/* LEFT MENU */
.hamburger {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 1000; width: 27px; height: 46px;
  border-radius: 0 14px 14px 0;
  border: 1px solid rgba(0,0,0,0.35); border-left: none;
  background: var(--label-bg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-left: 2px; line-height: 0; cursor: pointer;
}
.hamburger .bar { display:block; width:19px; height:2px; background:#fff; border-radius:1px; margin:4px 0; }

.menu-panel {
  position: fixed; left: 41px; top: 50%;
  transform: translate(-8px, -50%) scale(0.98);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 1100; background: var(--card);
  border: 1px solid #000; border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 10px;
  width: min(90vw, 420px);
}
.menu-panel.open { opacity:1; pointer-events:auto; transform: translate(0, -50%) scale(1); }

.menu-list { display:grid; gap:0; margin:0; padding:8px; border-radius:14px; background:#faf8f2; list-style:none; }
.menu-link { display:block; text-decoration:none; color:var(--fg); padding:0px 12px; border-radius:12px; white-space:nowrap; font-size:16px; line-height:1.15; }
.menu-link:hover { background:#f3efe6; }
.menu-link.current { background:#ece8df; font-weight:600; }
.menu-link.branch::before { content: "├─ "; }
.menu-link.branch-last::before { content: "╰─ "; }

/* CONTENT */
.sections { max-width:var(--maxw); margin:32px auto; padding:0 24px; }
.section { position:relative; margin-bottom:80px; }
.section-heading { text-align:center; font-size:clamp(28px,5.5vw,46px); font-weight:750; margin:64px 0 8px; scroll-margin-top:0; }

.section-block { position:relative; z-index:1; background:none; border:2px solid #000; border-radius:6px; padding:0; display:flex; flex-direction:column; gap:0; overflow:hidden; }
.section-image { max-width:100%; height:auto; display:block; border:none; border-bottom:2px solid #000; border-radius:6px 6px 0 0; align-self:stretch; cursor:zoom-in; }
.section-caption { min-height:25px; background:#ddd; padding:4px 15px 25px 15px; text-align:right; font-size:14px; font-style:italic; }
.section-description { min-height:25px; background:#ddd; padding:4px 15px 15px 25px; text-align:left; font-size:20px; }
.section-caption a, .section-description a { color: inherit; text-decoration: underline; word-break: break-word; }

/* TIMELINE */
.timeline { position: relative; z-index: 0; margin: 0 auto; padding: 0 0 64px; }
.timeline-line { position:absolute; left:50%; top:0; bottom:0; width:4px; background:var(--line); transform:translateX(-50%); z-index:0; }
.timeline-line::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:8px;
  border-style:solid; border-width:10px 8px 0 8px; border-color: var(--line) transparent transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}

.timeline-entry { position:absolute; width:min(520px,42%); scroll-margin-top:0; }
.timeline-entry.left  { left: 0; padding-right: 28px; }
.timeline-entry.right { right:0; padding-left: 28px; }

.timeline-label{
  position:absolute; left:50%; transform: translate(-50%, -50%);
  background: var(--label-bg); color: var(--label-fg);
  font-size: 14px; line-height: 1; padding: 6px 12px;
  border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  white-space: nowrap; z-index: 2; pointer-events: none;
}
.timeline-label.left{  padding-left:20px;  clip-path: polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%); }
.timeline-label.right{ padding-right:20px; clip-path: polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%); }

.entry-card { background:none; border:2px solid #000; border-radius:6px; overflow:hidden; }
.entry-image { display:block; width:100%; height:auto; border-bottom:2px solid #000; cursor:zoom-in; }
.entry-caption { min-height:25px; background:#ddd; padding:4px 15px 25px 15px; text-align:right; font-size:14px; font-style:italic; }
.entry-description { min-height:25px; background:#ddd; padding:4px 15px 15px 25px; font-size:20px; }
.entry-caption a, .entry-description a { color:inherit; text-decoration:underline; }

/* FALLBACK */
.fallback { max-width:var(--maxw); margin:24px auto; padding:12px 24px; color:#814; background:#fff7f0; border:1px solid #f2d6c8; border-radius:10px; display:none; }
.fallback.visible { display:block; }
.fallback code { background:#ffe; padding:2px 6px; border-radius:6px; }

/* LIGHTBOX */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 3000; }
.lightbox.open { display:flex; }
.lightbox-img { max-width: 92vw; max-height: 92vh; display:block; border-radius: 8px; box-shadow: 0 30px 120px rgba(0,0,0,0.6); }
.lightbox-close { position: absolute; top: 14px; left: 14px; width:52px; height:52px; border:none; border-radius:0; background:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:42px; line-height:1; padding:0; outline:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -webkit-tap-highlight-color:transparent; }
.lightbox-close:hover { background:none; color:#ccc; }
.lightbox-hit { position:absolute; inset:0; }

/* FOOTER */
footer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 40px 20px 50px; background-color: #222; position: relative;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; border-top: 3px solid #f5e7d4; width: 100%;
}
.footer-headline {
  color: #f5e7d4; font-size: 2rem; font-weight: bold; letter-spacing: 0.8px;
  margin-bottom: 24px; text-shadow: 2px 2px 4px #000; font-style: italic;
}
.footer-links { font-size: 1rem; margin: 4px 0; }
.footer-links:first-of-type { margin-top: 0; }
.footer-links:last-of-type  { margin-bottom: 0; }
.footer-links a { margin: 0 12px; text-decoration: none; color: #fff; }
.footer-links a:hover { text-decoration: underline; }
.footer-links .divider { color: #fff; margin: 0 6px; }
.footer-sheet-link { font-size: 0.85rem; position: absolute; right: 20px; bottom: 10px; }
.footer-sheet-link a { color: #fff; text-decoration: none; }
.footer-sheet-link a:hover { text-decoration: underline; }