/* Era hub pages (/eras/, /pl/epoki/). Built by scripts/site/build_eras.py. */
body.era-page { background: var(--bg); overflow-x: hidden; }
.era-page main { display: block; }
.era-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.era-wrap-wide { max-width: 1180px; }

/* hero */
.era-hero { position: relative; min-height: clamp(540px, 88vh, 900px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #0b0a08; isolation: isolate; }
.era-hero-media { position: absolute; inset: 0; z-index: -2; }
.era-hero-media img, .era-hero-media video, .era-hero-media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.era-hero-media .art-hero { margin: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.era-hero-film .era-hero-media img, .era-hero-film .era-hero-media video { filter: contrast(1.06) brightness(.92); }
.era-hero-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.05) 28%, rgba(8,8,8,.25) 52%, rgba(8,8,8,.92) 86%, var(--bg) 100%),
              radial-gradient(120% 80% at 0% 100%, rgba(8,8,8,.6), transparent 60%); }
.era-hero-body { width: 100%; max-width: 1180px; margin: 0 auto; padding: 6rem 16px 2.4rem; }
.era-crumb { padding-top: 0; margin-bottom: 1.4rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: #cfc3a6; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.era-crumb a { color: #cfc3a6; text-decoration: none; }
.era-crumb a:hover { color: var(--gold); }
.era-kicker { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--gold-bright); margin-bottom: .6rem; }
.era-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 7.2vw, 4.8rem); line-height: 1.04; color: var(--text); margin: 0 0 1rem; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.era-summary { max-width: 42rem; font-size: clamp(1.08rem, 2.2vw, 1.28rem); line-height: 1.6; color: #e9dfc6; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.era-stats { margin-top: 1.1rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--gold); }
.era-credit { position: relative; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 16px 1rem; font-size: .78rem; line-height: 1.4; color: var(--ash); }

/* era strip */
.era-strip { border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); background: linear-gradient(180deg, var(--card-2), var(--card)); }
.era-strip-in { max-width: 1180px; margin: 0 auto; display: flex; gap: .4rem; overflow-x: auto; padding: .7rem 16px; scrollbar-width: none; }
.era-strip-in::-webkit-scrollbar { display: none; }
.era-strip a { flex: 0 0 auto; display: flex; align-items: baseline; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid transparent; color: var(--muted); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.era-strip a:hover { color: var(--text); border-color: var(--gold-line); }
.era-strip a[aria-current="page"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.era-strip .es-n { font-family: var(--font-display); font-size: .78rem; opacity: .8; }

/* sections */
.era-sec { padding: 3.4rem 0 1rem; }
.era-sec-tight { padding-top: 1.6rem; }
.era-sec h2 { font-family: var(--font-display); font-size: clamp(1.45rem, 3.6vw, 1.9rem); color: var(--text); margin-bottom: .6rem; line-height: 1.2; }
.era-p { color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin-bottom: 1.3rem; }
.era-note { color: var(--muted); font-size: .98rem; line-height: 1.6; margin-top: 1rem; }
.era-note a { color: var(--gold); }
.era-src { color: var(--ash); font-size: .8rem; margin-top: .7rem; }

/* maps */
.era-maps { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
.era-map { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--gold-line); background: #101c25; box-shadow: 0 18px 48px rgba(0,0,0,.45); overflow: hidden; }
.era-map-cap { font-family: var(--font-mono); font-size: .72rem; color: var(--gold); margin: 0 0 .4rem; }
.era-map-side { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: .6rem; }
.era-map-inset .dot { r: 8px; } .era-map-inset .glow { r: 15px; } .era-map-inset .hit { r: 24px; }
.era-dots a { cursor: pointer; outline: none; }
.era-dots .hit { fill: transparent; }
.era-dots .glow { fill: rgba(240,210,140,.22); transition: fill .2s; }
.era-dots .dot { fill: #f0d28c; stroke: #0a0806; stroke-width: 1.6; transition: fill .2s; }
.era-dots a:hover .dot, .era-dots a:focus-visible .dot { fill: #fff; }
.era-dots a:hover .glow, .era-dots a:focus-visible .glow { fill: rgba(240,210,140,.5); }
@media (max-width: 700px) {
  .era-map .dot { r: 13px; stroke-width: 3; }
  .era-map .glow { r: 22px; }
  .era-map .hit { r: 36px; }
  .era-map.era-map-inset .dot { r: 12px; }
  .era-map.era-map-inset .glow { r: 20px; }
}
.era-tip { position: fixed; z-index: 120; pointer-events: none; max-width: 260px; padding: .4rem .65rem; border-radius: 8px; background: rgba(12,10,6,.94); border: 1px solid var(--gold-line); color: var(--text); font-size: .9rem; line-height: 1.3; box-shadow: 0 8px 24px rgba(0,0,0,.5); transform: translate(-50%, calc(-100% - 12px)); }

/* timeline */
.era-tl { list-style: none; margin: 1.2rem 0 0; padding: 0; border-left: 1px solid var(--gold-line); }
.era-tl li { position: relative; display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .2rem 1rem; padding: .85rem 0 .85rem 1.1rem; border-bottom: 1px solid rgba(201,168,76,.08); }
.era-tl li::before { content: ""; position: absolute; left: -5px; top: 1.25rem; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); }
.era-tl .tl-y { font-family: var(--font-mono); font-size: .82rem; color: var(--gold); padding-top: .25rem; }
.era-tl a { font-family: var(--font-display); font-size: 1.08rem; color: var(--text); text-decoration: none; line-height: 1.3; }
.era-tl a:hover { color: var(--gold-bright); }
.era-tl .tl-b { min-width: 0; overflow-wrap: anywhere; display: flex; gap: 1rem; align-items: flex-start; }
.era-tl .tl-t { flex: 1 1 auto; min-width: 0; }
.era-tl .tl-img { flex: 0 0 auto; width: 112px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold-line); margin-top: .2rem; }
@media (max-width: 560px) { .era-tl .tl-img { width: 84px; height: 52px; } }
.era-tl p { color: var(--muted); font-size: .98rem; line-height: 1.55; margin-top: .25rem; }
@media (max-width: 560px) { .era-tl li { grid-template-columns: minmax(0, 1fr); } .era-tl .tl-y { padding-top: 0; } }

/* commanders and guides */
.era-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding: 0; }
.era-chips a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--gold-line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 1rem; background: var(--card); }
.era-chips a:hover { border-color: var(--gold); color: var(--gold-bright); }
.era-links { list-style: none; margin-top: .6rem; padding: 0; }
.era-links a { display: block; padding: .6rem 0; border-bottom: 1px solid var(--gold-line); color: var(--text); text-decoration: none; font-size: 1.05rem; }
.era-links a::after { content: " \203A"; color: var(--gold); }
.era-links a:hover { color: var(--gold-bright); }

/* film archive */
#film .era-wrap { max-width: 1180px; }
#film .era-p { max-width: 720px; }
.film-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.film-card { margin: 0; border: 1px solid var(--gold-line); border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--card-2), var(--card)); }
.film-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.film-card figcaption { padding: .9rem 1rem 1.1rem; }
.film-card h3 { font-family: var(--font-display); font-size: 1.02rem; color: var(--text); line-height: 1.3; margin-bottom: .6rem; }
.film-card dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; font-size: .88rem; line-height: 1.45; }
.film-card dt { color: var(--ash); font-family: var(--font-mono); font-size: .72rem; padding-top: .15rem; }
.film-card dd { color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.film-card dd a { color: var(--gold); }

/* play + app */
.play-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 620px) { .play-grid { grid-template-columns: 1fr 1fr; } }
.play-card { display: block; padding: 1rem 1.1rem; border: 1px solid var(--gold-line); border-radius: 14px; background: var(--card); text-decoration: none; }
.play-card strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); margin-bottom: .25rem; }
.play-card span { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.play-card:hover { border-color: var(--gold); }
.play-card.play-main { border-color: var(--gold); background: linear-gradient(180deg, rgba(201,168,76,.12), var(--card)); }
.era-cta { margin: 2.4rem 0 1rem; padding: 1.8rem 1.2rem; border: 1px solid var(--gold-line); border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); text-align: center; }
.era-cta h3, .era-sec .era-cta h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); margin-bottom: .5rem; }
.era-cta p { color: var(--muted); margin-bottom: 1.1rem; }
.era-foot { max-width: 760px; padding-top: 2rem; }

/* index */
.ei-head { padding: 7rem 0 1rem; background: radial-gradient(90% 70% at 50% 0%, rgba(201,168,76,.12), transparent 70%); }
.ei-head .era-title { font-size: clamp(2.2rem, 6.4vw, 4rem); }
.ei-head .era-summary { text-shadow: none; color: var(--muted); }
.ei-sec { padding-top: 1.6rem; }
.ei-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ei-card { position: relative; display: flex; flex-direction: column; min-height: 360px; border-radius: 16px; overflow: hidden; border: 1px solid var(--gold-line); text-decoration: none; background: #0b0a08; isolation: isolate; }
.ei-img { position: absolute; inset: 0; z-index: -1; }
.ei-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ei-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,.1) 20%, rgba(8,8,8,.92) 78%); }
.ei-card:hover .ei-img img { transform: scale(1.04); }
.ei-card:hover { border-color: var(--gold); }
.ei-body { margin-top: auto; padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.ei-k { font-family: var(--font-mono); font-size: .72rem; color: var(--gold-bright); }
.ei-h { font-family: var(--font-display); font-size: 1.6rem; color: var(--text); line-height: 1.15; }
.ei-p { color: #ddd2b8; font-size: .98rem; line-height: 1.5; }
.ei-n { font-family: var(--font-mono); font-size: .74rem; color: var(--gold); }
.ei-badge { position: absolute; top: .8rem; right: .8rem; font-family: var(--font-mono); font-size: .68rem; color: var(--bg); background: var(--gold); padding: .25rem .55rem; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .era-hero-video { display: none !important; }
  .ei-img img { transition: none; }
}
@media (max-width: 560px) {
  .era-hero { min-height: 600px; }
  .era-hero-body { padding-top: 5rem; padding-bottom: 1.6rem; }
}