/* Shared by every page: fonts, colours, the header, the gold button, the footer, the background line drawings,
   and the reading layout used by privacy and support. Home and 404 keep their own layout in their own files. */

/* Montserrat, self-hosted (SIL OFL 1.1, see /fonts/Montserrat-OFL.txt), the font of Atilla's card.
   latin carries ı, ü, ç, ö; latin-ext carries İ, Ş, ş, Ğ, ğ. Nunito stays in /fonts only for /ofis. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/montserrat-latin-ext-wght.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/montserrat-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Atilla's card: slate navy, white, gold. Contrast on slate: ink 13.7:1, muted 6.2:1, quiet 5.4:1, gold 6.9:1. */
  --slate: #1F2734;
  --ink: #F1F5F9;
  --muted: #9AA8BC;
  --quiet: #8D9DB3;
  --gold: #D9A756;
  --gold-ink: #1B2230; /* text on gold, 7.3:1 */
  --water: #5CC8F5;
  /* The light reading page on privacy and support. Contrast on paper: ink 14.7:1, soft 7.0:1, link 6.5:1. */
  --paper: #F4F6F9;
  --paper-ink: #1B2230;
  --paper-soft: #4A5568;
  --paper-link: #2557A7;
  --paper-gold: #B8862E; /* bullets only; decoration, 3.0:1 */
}

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

html {
  background-color: var(--slate);
  scrollbar-color: var(--muted) var(--slate);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--slate);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--gold-ink); }

/* The one gold button, like the crown on the card. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.375rem;
  border-radius: 999px;
  background-color: var(--gold);
  color: var(--gold-ink);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  /* One line at normal text sizes; with enlarged browser text the label wraps rather than run off the screen. */
  max-width: 100%;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

.button .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

@media (hover: hover) {
  .button:hover { background-color: #E3B86C; }
}

.button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* Header: the white bird and the name in spaced capitals, Privacy and Support on the right. */
.site-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.875rem 3.5rem;
}

.site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-name .mark {
  height: 2.5rem;
  width: auto;
}

.site-head nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.875rem;
}

.site-head nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-head nav a:hover,
.site-head nav a[aria-current="page"] { color: var(--ink); }

.site-head a:focus-visible,
.site-foot a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Footer: legal name, registered address, year, exactly as registered. Small and quiet. */
.site-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.75rem;
  padding: 1.75rem 3.5rem;
  color: var(--quiet);
  font-size: 0.78125rem;
  line-height: 1.5;
}

.site-foot p,
.site-foot address {
  margin: 0;
  font-style: normal;
}

/* The faint origami line drawings in the ground, like the pressed lines on the card. Decoration only. */
.lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lines svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  .site-head { padding: 1.25rem; }
  .site-name { gap: 0.625rem; font-size: 0.9375rem; }
  .site-name .mark { height: 2rem; }
  .site-head nav { gap: 1.125rem; font-size: 0.8125rem; }
  .site-foot { flex-direction: column; padding: 1.75rem 1.25rem 1.5rem; font-size: 0.75rem; }
}

.company { font-weight: 500; }

.nowrap { white-space: nowrap; }

/* Reading pages (privacy, support): the slate header and title, a light page to read on, the slate footer. */
.read-hero,
.prose {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

.read-hero {
  padding-top: clamp(1rem, 4vh, 2.5rem);
  padding-bottom: clamp(2rem, 5vh, 3rem);
}

.read-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5.5vw, 3.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.read-page {
  flex: 1;
  padding: clamp(2rem, 5vh, 3rem) 0 3.5rem;
  background-color: var(--paper);
  color: var(--paper-ink);
}

.read-page .button:focus-visible { outline-color: var(--paper-ink); }

.prose {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.prose h2 {
  margin: 2.6rem 0 0.7rem;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.prose p,
.prose ul { margin: 0 0 1rem; }

.prose p,
.prose li { text-wrap: pretty; }

.prose ul {
  list-style: none;
  padding: 0;
}

.prose li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
}

/* Bullets are small gold diamonds, like the points of the crown. */
.prose li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 0.42rem;
  height: 0.42rem;
  background-color: var(--paper-gold);
  transform: rotate(45deg);
}

.prose strong { font-weight: 600; }

.prose a:not(.button) {
  color: var(--paper-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:not(.button):hover { color: var(--paper-ink); }

.prose a:not(.button):focus-visible {
  outline: 2px solid var(--paper-link);
  outline-offset: 2px;
  border-radius: 4px;
}

.prose .updated {
  margin-bottom: 2rem;
  color: var(--paper-soft);
  font-size: 0.9375rem;
}

.prose .lead {
  font-size: 1.3rem;
  line-height: 1.4;
  text-wrap: balance;
}

/* Print: dark ink on white paper. Browsers leave backgrounds out by default, so the tokens switch to paper ink
   and the slate to nothing. */
@media print {
  :root {
    --ink: var(--paper-ink);
    --muted: var(--paper-soft);
    --quiet: var(--paper-soft);
    --gold: #6E5118;
    --slate: transparent;
    --paper: transparent;
  }

  html, body { background: none; }

  /* The white bird would vanish on paper. */
  .site-name .mark { filter: brightness(0); }

  .prose li::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The button prints as its icon and text. */
  .button {
    padding: 0;
    background: none;
  }

  /* Links can't be followed on paper: the header's drop out, and links out print their address
     (except .bare links, whose text already is the address). */
  .site-head nav,
  .lines { display: none; }

  .prose a[href^="http"]:not(.bare)::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
  }

  .prose h2 { break-after: avoid; }

  .prose li,
  .site-foot { break-inside: avoid; }
}

/* Windows high contrast: text, links and focus take the system colours; the bullets keep their gold with an edge,
   and the button keeps its shape. Normal display has no strokes. */
@media (forced-colors: active) {
  .prose li::before {
    forced-color-adjust: none;
    outline: 1px solid CanvasText;
  }

  .button { border: 2px solid LinkText; }
}