/* Reset, type scale, reading column. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--vellum); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--vellum);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.62;
  padding-inline: var(--gutter);
  padding-block: 0 72px;
  overflow-wrap: break-word;
}
a { color: var(--saltire); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--oranje); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-top: var(--space-2); }
h1 em { font-family: var(--display-italic); color: var(--saltire); }
h2 { font-size: 1.6rem; }
p { margin: 0 0 var(--space-4); }
.muted { color: var(--muted); }
.label { font-family: var(--ui); font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--muted); max-width: 52ch; margin: var(--space-4) 0 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: var(--space-2); background: var(--sheet); padding: var(--space-2) var(--space-3); z-index: 10; }

.top {
  max-width: 1200px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4); border-bottom: 1px solid var(--rule);
}
.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; margin-right: auto; }
.mark b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.crest { flex: none; }
.nav { display: flex; gap: var(--space-4); font-family: var(--ui); font-size: .92rem; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--oranje); }
.lang { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); padding: 3px; }
.lang a { font-family: var(--ui); font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); padding: 5px 12px; border-radius: 999px; text-decoration: none; }
.lang a[aria-current="true"] { background: var(--saltire); color: var(--sheet); }

.page { max-width: 1200px; margin-inline: auto; padding-top: var(--space-6); }
.page-head { max-width: var(--measure); margin-bottom: var(--space-6); }
.hero { max-width: var(--measure); padding-top: var(--space-6); }
.button {
  display: inline-block; font-family: var(--ui); font-weight: 600; font-size: .95rem;
  background: var(--saltire); color: var(--sheet); text-decoration: none;
  padding: 10px 18px; border-radius: var(--radius);
}
.badge { display: inline-block; font-family: var(--ui); font-size: .72rem; font-weight: 600; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.badge-pub { background: var(--saltire-wash); color: var(--saltire); }
.badge-work { background: var(--oranje-wash); color: var(--oranje-ink); }
.badge-soon { background: var(--vellum); color: var(--saltire); border: 1px solid var(--saltire); }
.badge-muted { background: var(--vellum); color: var(--muted); border: 1px solid var(--rule); }