.page-head { background: var(--deep); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.page-head h1 { color: #fff; margin: 0 0 0.4em; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 500; letter-spacing: -0.03em; }
.page-head__lead { max-width: 38rem; color: #d6e8ee; font-size: 1.2rem; margin: 0 0 1.25rem; }
.page-head__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.page-head__links a { color: #fff; font-weight: 700; }
.page-head__links a:hover { color: var(--shallows); }

.era-nav { position: sticky; top: 4.25rem; z-index: 40; background: var(--foam); border-bottom: 1px solid var(--rule); }
.era-nav ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0.5rem 0; overflow-x: auto; }
.era-nav a { display: block; padding: 0.5rem 0.9rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--deep); white-space: nowrap; }
.era-nav a:hover, .era-nav a:focus-visible { background: var(--deep); color: #fff; }

.era { padding: clamp(3rem, 7vw, 5rem) 0 0; scroll-margin-top: 8.5rem; }
.era:last-of-type { padding-bottom: clamp(3rem, 7vw, 5rem); }
.era__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1.5rem; }
.era__title span { font: 500 1.1rem var(--font-body); color: var(--ink-soft); }

.tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.tl__item { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 15rem; gap: 1rem 2rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 8.5rem; }
.tl__when { font: 600 1.35rem/1.2 var(--font-display); color: var(--tide); }
.tl__body { max-width: 42rem; }
.tl__body h3 { margin-bottom: 0.5em; }
.tl__body > :last-child { margin-bottom: 0; }

.steps { list-style: none; margin: 0 0 1.1em; padding: 0; display: grid; gap: 0.6rem; }
.steps li { padding-left: 1rem; border-left: 3px solid var(--shallows); }
.steps strong { color: var(--deep); }

.pull { margin: 0 0 1.25rem; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 4px solid var(--buoy); font: 500 clamp(1.25rem, 2.4vw, 1.6rem)/1.4 var(--font-display); color: var(--deep); }
.pull cite { display: block; margin-top: 0.75rem; font: 500 0.95rem var(--font-body); color: var(--ink-soft); font-style: normal; }

.ph { margin: 0; }
.ph__box { aspect-ratio: 4 / 3; border: 2px dashed var(--shallows); border-radius: var(--radius); background: var(--foam); display: grid; place-items: center; align-content: center; gap: 0.35rem; color: var(--tide); font-size: 0.9rem; font-weight: 700; }
.ph__box svg { width: 2rem; height: 2rem; }
.ph figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; }

@media (max-width: 62rem) {
  .tl__item { grid-template-columns: 8rem minmax(0, 1fr); }
  .ph { grid-column: 2; max-width: 18rem; }
}
@media (max-width: 40rem) {
  .tl__item { grid-template-columns: 1fr; }
  .ph { grid-column: 1; }
}
.page-head--photo { position: relative; overflow: hidden; min-height: clamp(22rem, 44vw, 30rem); display: flex; align-items: center; background: var(--deep); }
.page-head__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.page-head--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7,38,58,.92) 0%, rgba(7,38,58,.8) 34%, rgba(7,38,58,.32) 62%, rgba(7,38,58,.1) 100%); }
.page-head--photo .wrap { position: relative; z-index: 2; }
@media (max-width: 44rem) {
  .page-head--photo { min-height: 0; }
  .page-head--photo::before { background: rgba(7,38,58,.78); }
}

.ph__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.ph__img--logo { object-fit: contain; background: var(--foam); padding: 0.75rem; box-sizing: border-box; }