/* History page only: the era timeline, the ledger, the legends box. */

/* --- era timeline --- */
.eras{position:relative;margin-top:8px}
.eras::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;
  background:linear-gradient(to bottom,var(--copper),var(--patina) 55%,var(--steel));
  opacity:.5;
}
@media (max-width:760px){ .eras::before{left:0} }

.era{position:relative;padding-left:clamp(22px,4vw,44px);padding-block:0 clamp(34px,4vw,52px)}
.era:last-child{padding-bottom:0}
.era::before{
  content:"";position:absolute;left:-5px;top:12px;width:12px;height:12px;
  border-radius:50%;background:var(--paper);border:2px solid var(--copper);
}
.era.turn::before{background:var(--copper)}

.era .years{
  font-family:var(--f-display);font-size:.85rem;font-weight:600;letter-spacing:.12em;
  color:var(--copper);font-variant-numeric:tabular-nums;
}
.era h3{font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:700;margin-top:6px;letter-spacing:-.02em}
.era .body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);margin-top:16px;align-items:start}
@media (max-width:820px){ .era .body{grid-template-columns:1fr;gap:18px} }
.era .body p{font-size:1.03rem;line-height:1.62;color:var(--ink-2)}
.era .body p + p{margin-top:.85em}
.era .body p b{color:var(--ink);font-weight:600}

/* the fact panel beside each era */
.facts{background:var(--surface);border:1px solid var(--rule);padding:22px 20px;display:flex;flex-direction:column;gap:13px}
.facts .row{display:flex;flex-direction:column;gap:3px}
.facts .n{font-family:var(--f-display);font-weight:800;font-size:1.42rem;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.facts .l{font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.facts .cite{margin-top:5px;font-family:var(--f-display);font-size:.76rem;font-weight:500;letter-spacing:.01em;color:var(--ink-3)}
.facts a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.facts a:hover{color:var(--copper);border-color:var(--copper)}

/* pull quote inside an era */
.pull{
  border-left:3px solid var(--copper);padding:4px 0 4px 16px;margin-top:16px;
  font-family:var(--f-body);font-style:italic;font-size:1.02rem;line-height:1.5;color:var(--ink);
}
.pull cite{display:block;margin-top:7px;font-style:normal;font-family:var(--f-display);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}

/* --- the ledger (human and environmental cost) --- */
/* Six figures: two rows of three, so no half-empty row shows as a void. */
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
@media (max-width:900px){ .ledger{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ledger{grid-template-columns:1fr} }
.ledger div{background:var(--surface);padding:24px 22px}
.ledger .n{font-family:var(--f-display);font-weight:800;font-size:1.45rem;line-height:1;letter-spacing:-.025em;color:var(--steel);font-variant-numeric:tabular-nums}
.ledger .l{margin-top:9px;font-size:.93rem;line-height:1.45;color:var(--ink-2)}
.ledger .c{margin-top:8px;font-family:var(--f-display);font-size:.75rem;font-weight:600;letter-spacing:.03em;color:var(--ink-3)}

/* --- legends / folklore box --- */
.legends{background:var(--surface-2);border-left:3px solid var(--steel);padding:26px 26px 24px;margin-top:6px}
.legends h3{font-size:1.05rem;margin-top:8px}
.legends ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.legends li{font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.legends li b{color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:.97rem;display:block;margin-bottom:2px}

/* --- the closing argument --- */
.turns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:24px}
.turns div{background:var(--surface);padding:24px 22px}
.turns .k{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--copper)}
.turns h3{margin-top:8px;font-size:1rem}
.turns p{margin-top:8px;font-size:.93rem;color:var(--ink-2);line-height:1.5}