/* Tablet and mobile */
@media (max-width: 1200px) {
  :root { --fs-display: 180px; --fs-h1: 60px; }
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prow { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.3fr) 120px; }
  .pthumb { grid-column: 2 / 4; }
}
@media (max-width: 1024px) {
  :root { --fs-h2: 40px; --margin: 32px; --s-section: 112px; }
  .hero .grid { grid-template-columns: 1fr; gap: var(--s-2xl); }
  .hist { grid-template-columns: 1fr; }
  .rail { display: none; }
  .era .body { grid-template-columns: 1fr; gap: var(--s-l); }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl, .snums, .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl > div::before { right: 0; }
}
@media (max-width: 767px) {
  :root {
    --margin: 16px; --gutter: 12px; --header: 56px; --subnav: 52px;
    --fs-display: 128px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-stat: 48px; --fs-lead: 19px; --fs-body: 17px;
    --s-section: 80px; --s-4xl: 64px; --s-3xl: 40px; --s-2xl: 32px;
  }
  nav.main { display: none; }
  .logo { font-size: 16px; }
  .mnav { display: flex; position: sticky; top: var(--header); z-index: 39; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 8px var(--margin); }
  .mnav::-webkit-scrollbar { display: none; }
  .mnav a { padding: 8px 12px; font-size: 15px; }
  .mnav .sep { flex: none; width: 1px; margin: 6px 6px; background: var(--line); }
  .hero { padding-top: var(--s-2xl); }
  .hero p, .intro, .study .lead { line-height: 1.45; }
  .hero .imgs { grid-template-columns: 1fr 1fr; }
  .hero .imgs .fig:first-child { grid-row: auto; grid-column: 1 / 3; }
  .hero .imgs .fig:first-child .zoom { aspect-ratio: 3 / 4; flex: none; }
  .era .yr { font-size: 72px; }
  .era h3 { line-height: 1.2; }
  .facts li { grid-template-columns: 70px 1fr; }
  .gal.n3, .gal.n4, .gal.n1 { grid-template-columns: 1fr 1fr; }
  .gal.n3 .fig:first-child, .gal.n1 .fig:first-child { grid-column: 1 / 3; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xl) var(--gutter); }
  .person b { font-size: 17px; }
  .person .r { font-size: 14px; line-height: 20px; }
  .tl, .snums, .prog, .steps, .about .cols { grid-template-columns: 1fr; }
  .snums { grid-template-columns: 1fr 1fr; }
  .nums { grid-template-columns: 1fr 1fr; }
  .nums > div { padding-bottom: var(--s-l); }
  .prow { grid-template-columns: 1fr 120px; gap: var(--s-xs) var(--s-m); }
  .prow > .y { grid-column: 1 / 3; padding: 0; }
  .prow > div { grid-column: 1; }
  .prow .d { grid-column: 1 / 3; }
  .prow .n { grid-column: 1; grid-row: 4; flex-direction: row; align-items: baseline; gap: 8px; font-size: 26px; }
  .pthumb { grid-column: 2; grid-row: 2; width: 120px; }
  .drawer { width: 100%; }
  .dr-head { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-m); }
  .dr-head h2 { font-size: 24px; }
  .works { grid-template-columns: 1fr 1fr; }
  .lb-stage { grid-template-columns: 1fr; padding: 0 var(--s-s); }
  .lb-stage .prev, .lb-stage .next { position: absolute; bottom: 84px; }
  .lb-stage .prev { left: var(--s-l); }
  .lb-stage .next { right: var(--s-l); }
  footer .wrap { flex-direction: column; align-items: flex-start; }
}