/* ===== HOME PAGE ===== */

/* -- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--panel-dark);
  color:var(--panel-dark-text);
  padding-block:clamp(4rem,10vw,7rem);
  isolation:isolate;
}
.hero-glow{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(700px 500px at 15% 30%, rgba(201,122,43,0.22), transparent 60%),
    radial-gradient(500px 400px at 90% 80%, rgba(78,107,88,0.18), transparent 60%);
}
.hero-dial{
  position:absolute; right:-14%; top:50%; transform:translateY(-50%);
  width:min(60vw, 780px); height:auto; z-index:-1; opacity:0.9;
  animation:dial-drift 14s ease-in-out infinite;
}
@keyframes dial-drift{
  0%,100%{ transform:translateY(-50%) rotate(0deg); }
  50%{ transform:translateY(-52%) rotate(1.2deg); }
}
.hero-inner{ position:relative; }
.hero-copy{ max-width:640px; }
.hero-copy h1{ margin-top:.6rem; color:var(--parchment-100); }
.hero-copy .lede{ color:var(--parchment-300); }
.hero-ctas{ margin-top:2rem; }
.hero-stats{
  display:flex; gap:clamp(1.5rem,4vw,3rem); flex-wrap:wrap;
  margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(242,233,216,0.16);
}
.hero-stats dt{ font-family:var(--font-display); font-size:1.5rem; color:var(--accent-glow); }
.hero-stats dd{ font-size:.82rem; color:var(--parchment-400); max-width:16ch; margin-top:.25rem; }

@media (max-width:760px){
  .hero-dial{ opacity:0.35; right:-30%; }
}

/* -- Vault cards ----------------------------------------------------------*/
.vault-card{ display:block; }

/* -- Timeline -------------------------------------------------------------*/
.timeline-section{
  background:var(--walnut-950); color:var(--parchment-200);
}
.timeline{
  display:flex; align-items:flex-start; gap:0;
  position:relative; margin-top:1rem;
  overflow-x:auto; padding-bottom:1rem;
  scrollbar-width:thin;
}
.timeline::before{
  content:""; position:absolute; left:0; right:0; top:7px; height:2px;
  background:linear-gradient(90deg, var(--accent-glow), var(--copper-500));
  opacity:.5;
}
.timeline-node{
  flex:1; min-width:150px; text-align:left; padding-top:0; position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:.75rem;
  color:var(--parchment-400);
}
.node-dot{
  width:15px; height:15px; border-radius:50%; background:var(--walnut-800);
  border:2px solid var(--parchment-400); position:relative; z-index:1;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.node-label{ font-size:.85rem; line-height:1.35; font-weight:600; }
.timeline-node[aria-selected="true"]{ color:var(--parchment-100); }
.timeline-node[aria-selected="true"] .node-dot{
  background:var(--accent-glow); border-color:var(--accent-glow);
  box-shadow:0 0 16px 2px var(--accent-glow);
}
.timeline-node:hover .node-dot{ border-color:var(--accent-glow); }

.timeline-panels{ margin-top:2rem; }
.timeline-panel{ display:none; max-width:60ch; }
.timeline-panel.is-active{ display:block; animation:panel-in .35s var(--ease); }
@keyframes panel-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.tp-tag{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--accent-glow); text-transform:uppercase; margin-bottom:.6rem;
}
.timeline-panel h3{ color:var(--parchment-100); margin-bottom:.75rem; }
.timeline-panel p{ color:var(--parchment-400); }

/* -- Community hub ---------------------------------------------------------*/
.community-grid{ grid-template-columns:1.5fr 1fr; align-items:start; }
@media (max-width:820px){ .community-grid{ grid-template-columns:1fr; } }

.thread-list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.thread{
  display:flex; align-items:center; gap:1rem;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:1rem 1.25rem;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.thread:hover{ border-color:var(--accent); transform:translateX(3px); }
.avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--copper-600); color:var(--parchment-100);
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
}
.thread-body{ flex:1; min-width:0; }
.thread-title{ font-weight:700; display:block; }
.thread-title:hover{ color:var(--accent-strong); }
.thread-count{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); white-space:nowrap; }

.event-list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.event-card{
  display:flex; align-items:center; gap:1rem;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:1rem 1.25rem;
}
.date-badge{
  flex-shrink:0; width:52px; text-align:center;
  font-family:var(--font-mono); background:var(--bg-sunken); border-radius:var(--radius-s);
  padding:.4rem 0; line-height:1.1;
}
.date-badge span{ display:block; font-size:1.2rem; font-weight:700; color:var(--accent-strong); }
.event-name{ font-weight:700; font-size:.92rem; }
.event-card .btn{ margin-left:auto; }
@media (max-width:520px){
  .event-card{ flex-wrap:wrap; }
  .event-card .btn{ margin-left:0; width:100%; }
}