/* ============================================================
   Universal structure
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  transition: background-color .6s ease, color .6s ease;
}
.app{
  max-width:1200px;
  margin:0 auto;
  padding: 0 32px 80px;
}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
img{max-width:100%;display:block}

/* Top bar — always present, restyled per era */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 32px;
  max-width:1200px;margin:0 auto;
}
.topbar .brand{font-weight:700;font-size:18px}
.topbar .main-nav{display:flex;gap:18px;font-size:14px}
.period-selector{display:flex;gap:0;border:1px solid currentColor;border-radius:999px;overflow:hidden}
.period-selector :is(button,a){
  padding:8px 16px;font-size:13px;letter-spacing:.04em;
  transition: background .25s ease, color .25s ease;
}
.period-selector a{text-decoration:none;display:inline-flex;align-items:center;opacity:.75}
.period-selector a:hover{opacity:1}
.period-selector :is(button,a).active{background:currentColor}
.period-selector :is(button,a).active span{mix-blend-mode:difference;color:#fff}

/* Sections */
.hero{padding: 80px 0 64px;text-align:center}
.hero h1{margin:0 0 16px;font-size:64px;line-height:1.05}
.hero p.tagline{margin:0 auto 32px;max-width:640px;font-size:18px;line-height:1.55}
.hero .cta{padding:16px 32px;font-size:15px;letter-spacing:.05em}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:48px 0}
.feature{padding:32px;text-align:center}
.feature .icon{width:64px;height:64px;margin:0 auto 20px;display:grid;place-items:center}
.feature h3{margin:0 0 12px;font-size:22px}
.feature p{margin:0;font-size:15px;line-height:1.55}

.quote{padding:64px 0;text-align:center;max-width:780px;margin:0 auto}
.quote blockquote{margin:0 0 16px;font-size:28px;line-height:1.35;font-style:italic}
.quote cite{font-size:14px;font-style:normal;letter-spacing:.05em}

.signup{padding:64px 0;text-align:center}
.signup h2{margin:0 0 24px;font-size:36px}
.signup form{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}
.signup input{padding:14px 18px;font:inherit;border:1px solid currentColor;background:transparent;color:inherit;min-width:280px;border-radius:0}
.signup button{padding:14px 24px;font:inherit;letter-spacing:.05em}

.foot{padding:48px 0 0;text-align:center;font-size:12px;letter-spacing:.08em;opacity:.7}
.foot .counter-label{color:#fff;font-size:10px;align-self:center;margin-right:6px}
.foot-home{margin-top:14px}
.foot-home a{opacity:.85}

/* Rule line */
.rule{height:1px;background:currentColor;opacity:.3;margin:0}

/* ============================================================
   Generic Press + Sponsors layout (era styles override below)
   ============================================================ */
.press, .sponsors{padding:48px 0}
.section-label{margin:0 0 28px;text-align:center;font-size:13px;font-weight:normal}
.press-grid, .sponsors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.press-item{padding:20px}
.press-item blockquote{margin:0 0 12px;font-size:18px;line-height:1.35}
.press-item cite{font-size:12px;font-style:normal;letter-spacing:.05em}
.sponsor{padding:20px;display:flex;flex-direction:column;gap:6px}
.sponsor-art{opacity:1 !important}
.sponsor-art{height:64px;margin-bottom:8px;background:currentColor;opacity:.08}
.sponsor h5{margin:0;font-size:18px}
.sponsor-tagline{margin:0;font-size:13px;line-height:1.4;flex:1}
.sponsor-price{font-size:24px;font-weight:700;margin-top:6px}

/* ============================================================
   Per-era visibility of extra decorative bits */
.era-only{display:none}
body[data-era="1924"] .era-1924{display:block}
body[data-era="1955"] .era-1955{display:block}
body[data-era="1996"] .era-1996{display:block}
body[data-era="2029"] .era-2029{display:block}

/* Floating period selector pinned to top right always-visible */
.period-bar{
  position:sticky;top:0;z-index:60;
  background:inherit;
}

/* ============================================================
   Baseline responsiveness (era files add their own tweaks)
   ============================================================ */
@media (max-width:900px){
  .app{padding-left:20px;padding-right:20px}
  .topbar{flex-wrap:wrap;justify-content:center;gap:12px;padding:12px 20px}
  .topbar .main-nav{flex-wrap:wrap;justify-content:center}
  .features{grid-template-columns:1fr;gap:24px}
  .press-grid,.sponsors-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .press-grid,.sponsors-grid{grid-template-columns:1fr}
  .signup input{min-width:0;width:100%}
  .signup form{width:100%}
}

/* ============================================================
   Motion sensitivity — the eras are heavy on flicker and blink
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}