/* base.css — shared skeleton + era-toggle machinery.
   Retro and modern looks live in retro.css / modern.css, scoped under
   html.theme-retro / html.theme-modern. Same DOM, two skins. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; display: block; }
a { text-decoration: none; }
h1,h2,h3,h4 { margin: 0 0 .4em; line-height: 1.15; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

/* show/hide by era */
.theme-modern .retro-only { display: none !important; }
.theme-retro  .modern-only { display: none !important; }

/* layout skeleton (both eras override spacing/skin) */
.panel { padding: 34px 20px; }
.two-col { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.two-col .col-video, .two-col .col-text { flex: 1 1 320px; min-width: 280px; }
.two-col.reverse { flex-direction: row-reverse; }
.cards, .dl-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.card { flex: 1 1 240px; min-width: 220px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.forge-flow { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* videos fill their column nicely */
.col-video video, .hero-video video, .film video { width: 100%; height: auto; }

/* ---- era switch button (fixed, both eras) ---- */
#era-switch { position: fixed; top: 12px; right: 12px; z-index: 60; }
#toggle-era { cursor: pointer; font-weight: bold; }
.theme-retro .lbl-modern, .theme-modern .lbl-retro { display: none; }

/* ---- warp transition overlay ---- */
#warp {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0; background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 2px, rgba(0,0,0,.35) 2px 4px);
  transition: opacity .18s ease;
}
body.warping #warp { opacity: 1; animation: warp-sweep .5s ease; }
@keyframes warp-sweep {
  0%   { transform: translateY(-100%); filter: hue-rotate(0); }
  100% { transform: translateY(100%);  filter: hue-rotate(180deg); }
}
/* the whole page reacts to the switch */
html { transition: background-color .35s ease, color .35s ease; }
body.warping #masthead, body.warping .panel { animation: rebuild .5s ease; }
@keyframes rebuild {
  0% { opacity: .15; transform: scale(.985) translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #warp, body.warping #masthead, body.warping .panel { animation: none !important; }
}