/* Series style: a printed atlas. Century Schoolbook (TeX Gyre Schola, GUST Font License) on paper, black ink,
   a few historical map inks. */
@font-face { font-family: "Schoolbook"; src: url("fonts/schola-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Schoolbook"; src: url("fonts/schola-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Schoolbook"; src: url("fonts/schola-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Schoolbook"; src: url("fonts/schola-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: block; }

:root {
  --paper: #fbfaf7;
  --paper-2: #f1efe9;
  --ink: #141414;
  --ink-2: #474644;
  --ink-3: #85837e;
  --hair: #141414;
  --rule: #cfccc4;
  /* map inks */
  --oxblood: #7d1d16;
  --prussian: #1d3557;
  --olive: #5f6b3a;
  --ochre: #b0862f;
  --serif: "Schoolbook", "Century Schoolbook", "New Century Schoolbook", "C059", Georgia, serif;
  --gutter: clamp(16px, 3.4vw, 48px);
  --title-size: clamp(30px, 4.4vw, 54px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 var(--serif);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sc { font-variant-caps: all-small-caps; letter-spacing: .05em; }
.lining { font-variant-numeric: lining-nums tabular-nums; }

.frame-header { padding: var(--gutter) var(--gutter) 0; max-width: 1100px; }
.frame-kicker { font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: 17px; color: var(--ink-2); }
.frame-title { font: 400 var(--title-size)/1.05 var(--serif); letter-spacing: -.005em; margin: .12em 0 .18em; }
.frame-subtitle { font: italic 400 clamp(17px, 1.6vw, 21px)/1.4 var(--serif); color: var(--ink-2); margin: 0; max-width: 56ch; }

.frame-footer {
  padding: 14px var(--gutter) var(--gutter);
  font: 14px/1.5 var(--serif); color: var(--ink-2);
  border-top: 1px solid var(--rule);
}
.frame-footer a { color: inherit; }
.frame-version { font-style: italic; white-space: nowrap; margin-left: 0.4em; }

.frame-corner { position: fixed; top: 12px; right: 18px; z-index: 10; display: flex; align-items: center; gap: 14px; }
.frame-back { font: italic 15px var(--serif); color: var(--ink-2); }
.frame-gh { color: var(--ink); display: block; line-height: 0; }
.frame-gh:hover { color: var(--ink-2); }
.frame-links { display: block; margin-top: 0.3em; }

/* Text-link controls instead of buttons */
.textlink { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
            text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.textlink[aria-pressed="true"] { text-decoration: none; font-weight: 700; cursor: default; }

/* Screenshot mode (?shot=portrait|square|wide): fixed canvas, no controls, a printed plate border. */
html.shot .no-shot, html.shot .frame-corner { display: none !important; }
html.shot body { overflow: hidden; }
html.shot body::after { content: ""; position: fixed; inset: 16px; border: 1px solid var(--hair); outline: 3px solid var(--hair); outline-offset: 3px; pointer-events: none; }
html.shot { --title-size: 58px; }