/* The Ultimate Chronological Star Trek Viewing Guide
   One stylesheet for every page. Desktop layout is designed at 1200px wide;
   headline sizes scale down with the viewport below that. */

/* ---------------------------------------------------------------- fonts */

@font-face { font-family: Horizon; src: url(../fonts/horizon.woff2) format('woff2'); font-weight: 400 700; font-display: block; }
@font-face { font-family: Oswald; src: url(../fonts/oswald-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Oswald; src: url(../fonts/oswald-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Lato; src: url(../fonts/lato-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Lato; src: url(../fonts/lato-700-italic.woff2) format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: Lato; src: url(../fonts/lato-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: Delius; src: url(../fonts/delius.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Lustria; src: url(../fonts/lustria.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'PT Sans'; src: url(../fonts/pt-sans-italic.woff2) format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: Anton; src: url(../fonts/anton.woff2) format('woff2'); font-display: swap; }

/* ---------------------------------------------------------------- tokens */

:root {
  --gold: #eec659;
  --blue: #467ac5;          /* section titles and prev/next */
  --navy: #044471;
  --sky: #ddedf7;
  --bright-blue: #0e71b7;
  --teal: #29a197;
  --grey: #ebebeb;
  --paper: #fefefe;
  --ink: #000;
  --page: 1200px;
  --gutter: 12px;
  --shadow-photo: 5px 5px 4px #808080;
  --font-title: Horizon, 'Arial Narrow', sans-serif;
  --font-body: Delius, 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  --font-link: Oswald, 'Arial Narrow', sans-serif;
  --font-label: Lato, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Lustria, Georgia, serif;
  --banner-gradient: linear-gradient(128deg, #6c71c4 0%, var(--teal) 100%);
  --sticky-offset: 0px;     /* set by site.js to the height of the sticky header */
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--font-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
:target, [id] { scroll-margin-top: calc(var(--sticky-offset) + 8px); }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--bright-blue); outline-offset: 2px; }

.rule { height: 12px; border: 0; margin: 0; background: linear-gradient(90deg, var(--navy) 0%, var(--sky) 100%); }

.band { padding-block: 24px; }
.band--disclaimer { background: linear-gradient(0deg, var(--paper) 0%, var(--sky) 100%); padding-block: 26px 34px; }
.band--disclaimer p, .band--notice p { max-width: 991px; font-size: clamp(17px, 2vw, 24px); line-height: 1.75; }
.lead { font-size: 1.083em; }

/* ---------------------------------------------------------------- Sidelark Labs bar */

.sl-bar { background: #112337; border-bottom: 2px solid #2ba2a1; font: 500 12.5px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.sl-bar-inner { max-width: var(--page); margin-inline: auto; padding: 6px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sl-bar-logo { display: block; border-radius: 4px; }
.sl-bar-logo img { height: 22px; width: auto; }
.sl-bar-note { color: #c9d2dd; letter-spacing: .02em; }

/* ---------------------------------------------------------------- era header (sticky) */

.page-era .site-header, .page-era .era-nav--sticky { position: sticky; z-index: 20; background: var(--grey); }
.page-era .site-header { top: 0; }
.page-era .era-nav--sticky { top: var(--header-h, 0px); }

.site-header-inner { position: relative; max-width: var(--page); margin-inline: auto; padding: 3px 0 13px; }
.site-header-bg {
  width: 100%; aspect-ratio: 1200 / 165; object-fit: cover;
  border-radius: clamp(10px, 2.1vw, 25px); box-shadow: var(--shadow-photo);
}
.site-title {
  position: absolute; inset: 3px 0 auto; height: calc(100% - 16px);
  display: flex; align-items: center; justify-content: center; padding-bottom: 2.5%;
  font: 700 clamp(16px, 6vw, 72px)/1.1 var(--font-title); text-align: center;
  text-shadow: 4px 4px 4px rgb(63 63 63 / .25);
}
.site-title a { color: var(--gold); text-decoration: none; }
.site-header-ship {
  position: absolute; right: 16.5%; bottom: 25px; width: 16.7%; pointer-events: none;
}
.site-header-coffee {
  position: absolute; right: 1.9%; bottom: 16px;
  font: 400 clamp(11px, 2.25vw, 27px)/1.4 var(--font-link);
  text-shadow: 3px 3px 2px rgb(63 63 63 / .25);
}
.site-header-coffee a { color: var(--gold); }

/* ---------------------------------------------------------------- prev / next */

.era-nav { background: var(--grey); overflow-x: clip; }
.era-nav-inner {
  max-width: var(--page); margin-inline: auto; padding: 4px 11px 8px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.era-title {
  font: 700 clamp(20px, 5.33vw, 64px)/1.1 var(--font-title); color: var(--blue); text-align: center;
  text-shadow: 4px 4px 4px rgb(63 63 63 / .25);
}
.era-nav a {
  display: flex; flex-direction: column; color: var(--blue); text-decoration: none;
  font: 700 clamp(14px, 3vw, 36px)/1.08 var(--font-title); text-shadow: 0 2px 2px rgb(63 63 63 / .25);
}
.era-nav-next { align-items: flex-end; text-align: right; }
.era-nav-line { display: inline-flex; align-items: center; }
.era-nav a svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
.era-nav a:hover .era-nav-line, .era-nav a:focus-visible .era-nav-line { text-decoration: underline; }

/* ---------------------------------------------------------------- year jump links */

.year-jump { background: linear-gradient(180deg, var(--grey) 0%, var(--sky) 100%); padding: 6px var(--gutter) 8px; text-align: center; }
.year-jump p { font: 700 clamp(18px, 3vw, 36px)/1.2 var(--font-title); color: var(--blue); text-shadow: 0 2px 2px rgb(63 63 63 / .25); }
.year-jump a { color: inherit; }

/* ---------------------------------------------------------------- year banners */

.year-banner { background: linear-gradient(180deg, var(--navy) 0%, var(--sky) 100%); }
.year-banner-inner {
  max-width: var(--page); margin-inline: auto; min-height: 139px; padding: 8px 0 8px 27px;
  display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap;
}
.year-banner-emblems { display: flex; align-items: center; gap: 19px; }
.year-banner-heading {
  font: 700 clamp(34px, 6vw, 72px)/1.1 var(--font-title); color: var(--navy);
  text-shadow: 4px 4px 4px rgb(63 63 63 / .25); min-width: 4.5ch;
}
.year-banner-aside { font: 400 clamp(17px, 2.2vw, 26px)/1.4 var(--font-body); text-shadow: none; color: var(--ink); vertical-align: middle; }
.year-banner-logos { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 16px; }
.year-banner-logos img { flex: none; }
.timeline { position: relative; margin-left: auto; flex: none; display: block; width: 200px; border-radius: 4px; overflow: hidden; }
.timeline img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.timeline-zoom { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)); }
.timeline:hover img { filter: brightness(1.08); }
.year-banner--sidenote .year-banner-heading { flex: 1; }

/* ---------------------------------------------------------------- episodes */

.episode {
  max-width: var(--page); margin-inline: auto; padding: 16px var(--gutter) 10px;
  display: grid; grid-template-columns: 400px 1fr; grid-template-areas: 'image text' 'watch text';
  column-gap: 14px; align-content: start; min-height: 268px;
}
.episode-image { grid-area: image; display: block; }
.episode-image img { width: 400px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 4px 4px 6px rgb(0 0 0 / .35); background: #ddd; }
.episode-text { grid-area: text; padding-top: 13px; }
.episode-label { font: 700 20px/1.45 var(--font-label); }
.episode-label .sep { white-space: pre; }
.episode-label .sep::before, .episode-label .sep::after { content: '\00a0\00a0\00a0'; }
.episode-body { margin: 16px 0 0 88px; font: 400 20px/1.3 var(--font-serif); }
.episode-body p + p { margin-top: 2px; }
.episode-airdate { font-size: 16px; line-height: 1.25; }
.episode-watch { grid-area: watch; padding: 4px 0 0 10px; font: 400 16px/1.75 var(--font-serif); }
.episode-watch a { color: var(--navy); }

/* ---------------------------------------------------------------- notes */

.note { max-width: 991px; padding-block: 22px 26px; font-size: clamp(17px, 2.2vw, 26px); line-height: 1.77; }
.note p + p { margin-top: 1.77em; }

/* ---------------------------------------------------------------- legacy year cards (parts 6 and 7) */

.band--notice { background: #9eafb9; padding-block: 6px; }
.band--notice .wrap { max-width: 624px; }
.era--legacy .rule--end { margin-top: 20px; }
.year-card {
  position: relative; isolation: isolate; max-width: var(--page); margin: 20px auto 28px;
  padding: 16px 20px 32px; border-radius: 35px; box-shadow: 15px 10px 4px #808080; overflow: hidden; background: var(--paper);
}
.year-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; z-index: -1; }
.year-card-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.year-card-heading { font: 700 clamp(40px, 6.25vw, 75px)/1.5 var(--font-title); color: var(--bright-blue); }
.year-card-emblems { display: flex; align-items: center; gap: 12px; }
.year-card-logos { margin-left: auto; align-self: flex-start; padding-top: 8px; }
.year-card-intro { max-width: 760px; margin: 0 auto 18px; font-size: clamp(17px, 2vw, 24px); line-height: 1.75; }
.year-card-lists { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 56px; padding-inline: 28px; }
.year-card-lists ul { flex: 1 1 360px; max-width: 540px; padding: 0 0 0 1.1em; list-style: circle; font: 700 20px/1.45 var(--font-label); }
.year-card-lists li { white-space: pre-wrap; }

/* ---------------------------------------------------------------- footer */

.era-nav:not(.era-nav--sticky) { padding-block: 6px 4px; }
.site-footer { background: #000; padding-block: 26px; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 8px 32px; max-width: 991px; font: 400 clamp(18px, 2.25vw, 27px)/1.5 var(--font-link); }
.site-footer a { color: var(--gold); }

/* ---------------------------------------------------------------- home */

.home-hero { position: relative; max-width: var(--page); margin-inline: auto; background: var(--grey); }
.home-hero-image { width: 100%; aspect-ratio: 1200 / 439; object-fit: cover; border-radius: clamp(10px, 2.1vw, 25px); box-shadow: var(--shadow-photo); }
.home-title {
  position: absolute; inset: 10.9% 0 auto; text-align: center;
  font: 700 clamp(24px, 11.4vw, 137px)/1.1 var(--font-title); color: var(--gold); text-shadow: 4px 4px 0 #808080;
}
.home-counter, .home-coffee { position: absolute; bottom: 7%; text-shadow: 3px 3px 2px rgb(63 63 63 / .25); color: var(--gold); }
.home-counter { left: 3%; font: 700 clamp(11px, 2vw, 24px)/1.4 var(--font-link); }
.home-coffee { right: 3%; font: 400 clamp(12px, 2.25vw, 27px)/1.4 var(--font-link); }
.home-coffee a { color: var(--gold); }
.page-home { background: var(--grey); }
.page-home main { background: var(--paper); }
.home-updated { background: var(--grey); text-align: center; padding: 20px var(--gutter) 30px; font: 900 clamp(13px, 1.75vw, 21px)/1.2 var(--font-label); letter-spacing: .19em; }

.band--academy, .band--migra { background: var(--banner-gradient); border-top: 1px double #000; }
.academy { display: flex; align-items: center; gap: 24px; min-height: 140px; padding-left: 180px; }
.academy img { width: 200px; flex: none; }
.academy p { flex: 1; text-align: center; font-size: clamp(22px, 3.67vw, 44px); line-height: 1.75; }

.band--intro { background: linear-gradient(180deg, var(--grey) 0%, var(--paper) 100%); padding-block: 12px 40px; }
.intro { display: flex; gap: 36px; align-items: flex-start; }
.intro-text { flex: 1; max-width: 740px; }
.intro h2 { font: 700 clamp(30px, 3.75vw, 45px)/1.1 var(--font-title); margin-bottom: 18px; }
.intro p { font-size: clamp(17px, 2vw, 24px); line-height: 1.75; padding-left: 10px; }
.intro-figure { flex: none; width: 413px; margin-top: 70px; text-align: center; }
.intro-figure img { box-shadow: var(--shadow-photo); }
.intro-figure figcaption { margin-top: 18px; font: 400 clamp(18px, 2.25vw, 27px)/1.5 var(--font-link); }

.era-index { position: relative; padding-block: 18px 40px; }
.era-index-item { margin-bottom: 30px; font-size: clamp(16px, 2vw, 24px); line-height: 1.25; }
.era-index-title { font: 400 clamp(22px, 2.67vw, 32px)/1.25 var(--font-link); margin-bottom: 7px; }
.era-index-note { font: 400 clamp(14px, 1.75vw, 21px) var(--font-body); }
.era-index-years { padding-left: 10px; font-family: var(--font-link); }
.era-index-years .sep { font-family: var(--font-body); }
.era-index-aside { position: absolute; right: 12px; bottom: 40px; width: 376px; }
.era-index-aside img { border-radius: 20px; box-shadow: 5px 5px 4px rgb(0 0 0 / .4); }

.band--support { background: linear-gradient(180deg, var(--paper) 0%, var(--grey) 100%); padding-block: 22px 26px; }
.support { max-width: 1112px; font-size: clamp(17px, 2vw, 24px); line-height: 1.75; }
.support a { font: 400 1.125em var(--font-link); }

.migra { display: flex; align-items: center; gap: 24px; padding-block: 0; min-height: 296px; }
.migra img { width: 251px; flex: none; margin-left: 18px; }
.migra p { flex: 1; text-align: center; font: 400 clamp(36px, 6vw, 72px)/2 Anton, Impact, sans-serif; }
.migra a { color: var(--gold); text-decoration: none; text-shadow: 1px 1px 0 rgb(64 64 64 / .25), 2px 2px 0 rgb(64 64 64 / .25), 3px 3px 0 rgb(64 64 64 / .25), 4px 4px 0 rgb(64 64 64 / .25); }

/* ---------------------------------------------------------------- methodology */

.method-hero { position: relative; max-width: var(--page); margin-inline: auto; }
.method-hero-image { width: 100%; aspect-ratio: 1200 / 439; object-fit: cover; border-radius: clamp(10px, 2.1vw, 25px); box-shadow: var(--shadow-photo); }
.method-hero-title {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  font: 700 clamp(34px, 11.7vw, 140px)/1.1 var(--font-title); color: var(--gold); text-shadow: 4px 4px 0 #808080; text-align: center;
}
.method-return a { display: inline-block; }
.method-return { overflow-x: clip; max-width: var(--page); margin: 10px auto 12px; padding-inline: var(--gutter); font: 700 clamp(22px, 2.67vw, 32px)/1.2 var(--font-title); }
.method { max-width: var(--page); margin-inline: auto; padding: 0 var(--gutter) 48px; display: grid; grid-template-columns: 178px 1fr; gap: 24px; align-items: start; }
.method-toc { background: #e3eef8; border: 1px solid #8a9aa8; padding: 10px 12px 16px; }
.method-toc-title { font-size: 19px; margin-bottom: 4px; }
.method-toc ul { list-style: none; padding: 0; font: 400 14px/2.2 var(--font-link); }
.method-body h2 { font: 700 clamp(26px, 3vw, 36px)/1.2 var(--font-title); margin: 40px 0 22px; }
.method-body h2:first-child { margin-top: 0; }
.method-body p { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.85; margin-bottom: 1.2em; padding-left: 8px; }
.method-body .cta { text-align: center; font: 400 clamp(18px, 1.8vw, 22px)/1.5 var(--font-link); margin-block: 40px; }
.method-body .fine-print { font: 400 13px/1.55 var(--font-serif); margin-bottom: .6em; }

/* ---------------------------------------------------------------- lo-fi checklist */

.page-lofi { background: #fff; }
.lofi { max-width: 1000px; margin-inline: auto; padding: 0 var(--gutter) 48px; font-size: 16px; line-height: 1.7; }
.lofi-topline { display: flex; justify-content: space-between; padding: 6px 0 14px; font: italic 400 13px/1.4 'PT Sans', sans-serif; color: #808080; }
.lofi h1, .lofi-end { font: 700 clamp(26px, 4.8vw, 48px)/1.45 var(--font-title); text-align: center; text-shadow: 2px 2px 0 #808080; }
.lofi-switch { text-align: center; margin: 14px 0 24px; font: 900 15px/1.5 var(--font-label); }
.lofi-switch a { color: var(--navy); }
.lofi h2 { font: 700 clamp(24px, 3vw, 30px)/1.2 var(--font-title); border-top: 1px solid #eee; padding-top: 28px; margin: 36px -12px 22px; padding-inline: 12px; }
.lofi h3 { font: 700 22px/1.3 var(--font-title); color: var(--bright-blue); margin: 26px 0 6px; }
.lofi h3.kelvin { color: var(--teal); }
.lofi p { margin-bottom: 1.3em; }
.lofi p.small { font-size: 14px; margin-bottom: .6em; }
.checklist { list-style: circle; padding-left: 26px; margin: 0 0 1.3em; font: 700 13px/1.75 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; }
.checklist li { white-space: pre-wrap; }

/* ---------------------------------------------------------------- lightbox */

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgb(0 0 0 / .75); }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; border-radius: 4px; }
.lightbox-close {
  position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .55); color: #ebebeb; font-size: 30px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { color: #fff; background: rgb(0 0 0 / .8); }

/* ---------------------------------------------------------------- motion
   Elements only start hidden once site.js has confirmed it is running. */

@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes fly-in { from { opacity: 0; transform: translateX(-2000px); } to { opacity: 1; transform: none; } }
@keyframes slide-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes slide-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-right { from { transform: translateX(100vw); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-left { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: none; } }
@keyframes tada {
  from, to { transform: none; }
  10%, 20% { transform: scale(.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-anim='fly-in'] { animation: fly-in 6s ease 1s both; }
  .js [data-anim='flash'] { animation: flash 2s ease 1s 5; }
  .js [data-anim='slide-left'] { animation: slide-left 1s ease both; }
  .js [data-anim='slide-right'] { animation: slide-right 1s ease both; }
  .js [data-anim='slide-in-right'] { animation: slide-in-right 4s ease 2s both; }
  .js [data-anim^='fade-in'][data-anim-when='visible']:not(.is-visible) { opacity: 0; }
  .js [data-anim='fade-in'].is-visible { animation: fade-in 5s ease both; }
  .js [data-anim='fade-in-left'].is-visible { animation: fade-in-left 2s ease both; }
  .js [data-anim='tada'].is-visible { animation: tada 1s ease .3s 3; }
  .era-nav:not(.era-nav--sticky) [data-anim] { animation: none; }
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
  .episode { grid-template-columns: minmax(0, 300px) 1fr; }
  .episode-image img { width: 100%; }
  .episode-body { margin-left: 24px; }
  .intro { flex-direction: column; }
  .intro-figure { width: min(413px, 100%); margin: 0 auto; }
  .academy { padding-left: 0; }
  .era-index-aside { position: static; display: block; margin: 0 auto; width: min(376px, 100%); }
  .method { grid-template-columns: 1fr; }

  .method-toc ul { columns: 2; }
}

@media (max-width: 640px) {
  .site-header-inner { padding: 2px 0 8px; }
  .site-header-ship { bottom: 12px; }
  .site-header-coffee { bottom: 6px; }
  .era-nav-inner { padding-inline: 8px; gap: 6px; }
  .year-banner-inner { min-height: 0; padding: 10px 12px; gap: 8px 12px; }
  .year-banner-emblems img { height: 40px; width: auto; }
  .year-banner-logos { flex-basis: 100%; order: 3; justify-content: flex-start; }
  .year-banner-logos img { height: 44px; width: auto; flex: none; }
  .timeline { width: 120px; }
  .episode { grid-template-columns: 1fr; grid-template-areas: 'image' 'watch' 'text'; padding-top: 14px; min-height: 0; }
  .episode-text { padding-top: 6px; }
  .episode-label { font-size: 17px; }
  .episode-label .sep::before, .episode-label .sep::after { content: '\00a0'; }
  .episode-body { margin: 8px 0 0; font-size: 17px; }
  .episode-watch { padding-left: 0; }
  .year-card { border-radius: 20px; padding: 12px 12px 24px; box-shadow: 8px 6px 4px #808080; margin-inline: 8px; }
  .year-card-lists { padding-inline: 0; }
  .year-card-lists ul { font-size: 16px; }
  .year-card-logos { margin-left: 0; }
  .academy { flex-direction: column; gap: 8px; padding-block: 12px; }
  .academy img { width: 140px; }
  .migra { flex-direction: column; padding-block: 20px; }
  .migra img { margin: 0; width: 200px; }
  .migra p { line-height: 1.3; }
  .home-hero { background: var(--grey); }
  .method-toc ul { columns: 2; line-height: 2.4; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .page-era .site-header, .page-era .era-nav--sticky { position: static; }
  .skip-link, .lofi-switch, .sl-bar { display: none; }
  .lofi h2 { break-after: avoid; }
}