/*
  XpressiVox site styles: matched to the tool's current look (the 2.2.5 page).

  Light: warm parchment page, ink-black text, Baskerville-style headings,
  square corners, hairline rules, five staff lines under the header, square
  outlined step numbers. Dark: a neutral near-black. One blue accent, used
  for links, the current page, the main button and the keyboard focus ring.
  Green, amber and red are not used on the public site.

  To restyle the whole site, change the values in the :root blocks below.
  The colours and fonts are copied from the tool so the two feel like one product.
*/

:root {
  /* Colour (from the tool) */
  --paper: #f2e9d6;
  --paper-raised: #fbf5e8;
  --paper-sunk: #e8dcc3;
  --ink: #1a1916;
  --muted: #5a554a;
  --line: #d3c5a8;
  --line-strong: #84775f;
  --accent: #27477f;
  --accent-ink: #fbf5e8;
  --accent-soft: #dbe2ee;
  --draft-bg: #f5e6bd;
  --draft-line: #774a06;
  --focus: #27477f;

  /* Type (from the tool): headings Baskerville, text Palatino/Iowan */
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-head: Baskerville, "Baskerville Old Face", "Libre Baskerville", "Hoefler Text", Garamond, "Times New Roman", serif;

  /* Space and size */
  --measure: 40rem;
  --pad: clamp(16px, 4.5vw, 28px);
  --radius: 0;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151412;
    --paper-raised: #1d1b18;
    --paper-sunk: #282521;
    --ink: #ece6d8;
    --muted: #a59e8e;
    --line: #3a362f;
    --line-strong: #8a8373;
    --accent: #a3bdea;
    --accent-ink: #101726;
    --accent-soft: #26324a;
    --draft-bg: #372b10;
    --draft-line: #8f7326;
    --focus: #a3bdea;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 17.5px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad);
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Skip link: visible only when focused with the keyboard */
.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--paper-raised);
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--focus);
  border-radius: var(--radius);
  z-index: 10;
}

.skip:focus {
  left: 0.5rem;
}

/* Header and navigation: the mark, the name, and five staff lines beneath */
.site-header .bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.6rem;
}

.site-header .bar::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: -9px;
  height: 9px;
  opacity: 0.5;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.brand .mark {
  flex: none;
  height: 34px;
  width: auto;
  color: var(--ink);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li,
.site-footer li + li {
  margin-top: 0;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-head);
  font-size: 1.1rem;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--line-strong);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
}

/* Main content */
main {
  padding: 2.25rem 0 3.5rem;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 2rem 0 0.75rem;
}

h1 {
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  margin-top: 0.5rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.22rem;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

li + li {
  margin-top: 0.35rem;
}

.lead {
  font-size: 1.1rem;
  color: var(--ink);
}

.muted {
  color: var(--muted);
}

/* Buttons: square, hairline edges. The main button is the accent blue. */
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
}

.button:hover {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent);
}

.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.button.secondary:hover {
  background: var(--accent-soft);
  box-shadow: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

/* Boxes. A notice is a "card": a heavy rule on top and a light one below.
   A draft box is a flagged box with a bar on its left edge. */
.notice,
.draft {
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0;
}

.notice {
  background: var(--paper-raised);
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.draft {
  background: var(--draft-bg);
  border: 0;
  border-left: 3px solid var(--draft-line);
}

.notice > :last-child,
.draft > :last-child {
  margin-bottom: 0;
}

.draft strong:first-child {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  font-size: 0.8rem;
}

/* Numbered steps */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.1rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 400;
  font-variant-numeric: lining-nums;
}

.steps strong {
  display: block;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--ink);
  padding: 1.5rem 0 2.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.site-footer a {
  color: var(--muted);
}

.site-footer p {
  margin-bottom: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}