/* SyphonGo base styles (owner: W1, design system): fonts, reset, typography, links, focus, motion,
 * layout helpers and the page background. Components live in components.css. */

/* ---- Fonts ---------------------------------------------------------------------------------------
 * Literata 3.103 by The Literata Project Authors, SIL Open Font License 1.1 (/assets/fonts/OFL.txt),
 * from @fontsource-variable/literata 5.3.0 and @fontsource/literata 5.3.0 (Latin subset).
 * The variable file has the wght (200-900) and opsz (7-72) axes; browsers pick the optical size from the
 * font size, so the same file gives the display cut for headings and the text cut for body copy. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/literata-latin-var.woff2") format("woff2-variations"),
       url("/assets/fonts/literata-latin-var.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;
}

@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/literata-latin-400-italic.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;
}

/* Georgia, resized to Literata's widths, shows while Literata loads, so the swap barely moves the text.
   Measured on a sample paragraph: Literata 400 is 108.3% of Georgia's width, Literata 700 97.4% of
   Georgia Bold's. */
@font-face {
  font-family: "Literata Fallback";
  font-weight: 100 500;
  src: local("Georgia");
  size-adjust: 108.3%;
  ascent-override: 108.7%;
  descent-override: 28.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Literata Fallback";
  font-weight: 600 900;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 97.4%;
  ascent-override: 120.8%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ol[class],
ul[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

table {
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}

/* ---- Page --------------------------------------------------------------------------------------- */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--c-ink);
  /* Warm cream parchment: a soft light from the top and a faint warm grain, never a flat fill. */
  background-color: var(--c-parchment);
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgb(255 252 244 / 0.75), rgb(255 252 244 / 0) 70%),
    radial-gradient(70% 50% at 0% 55%, rgb(241 221 178 / 0.35), rgb(241 221 178 / 0) 70%),
    radial-gradient(70% 50% at 100% 85%, rgb(241 221 178 / 0.35), rgb(241 221 178 / 0) 70%),
    url("/assets/img/ui/parchment-grain.svg");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 256px 256px;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  /* The ornaments of panels and banners may reach past the edge on a phone; never scroll sideways. */
  overflow-x: clip;
}

/* Contrast themes keep url() layers and with them the whole list, which would lay a grey haze over
   the theme's own background. */
@media (forced-colors: active) {
  body {
    background-image: none;
  }
}

main {
  flex: 1 0 auto;
  display: block;
}

main:focus {
  outline: none;
}

::selection {
  background: rgb(243 198 90 / 0.55);
  color: var(--c-ink);
}

/* ---- Typography ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--c-royal);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.012em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: var(--fs-body); }

p {
  text-wrap: pretty;
}

p + p {
  margin-top: 0.85em;
}

strong,
b {
  font-weight: var(--fw-bold);
}

small {
  font-size: var(--fs-small);
}

em,
i {
  font-style: italic;
}

code,
kbd,
samp {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}

:not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  background: rgb(214 170 90 / 0.16);
  overflow-wrap: anywhere;
}

hr {
  height: 1px;
  margin: var(--space-6) 0;
  border: 0;
  background: var(--gold-rule);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* ---- Links ------------------------------------------------------------------------------------ */
a {
  color: var(--c-royal);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(15 39 168 / 0.35);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

a:hover {
  color: var(--c-royal-hover);
  text-decoration-color: currentColor;
}

/* ---- Focus ------------------------------------------------------------------------------------ */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Links and buttons on the page art get a light halo too, so the ring shows on dark or busy pixels. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(255 250 240 / 0.9);
}

/* ---- Layers -------------------------------------------------------------------------------------
 * Back to front, on every page:
 *   1. the page's scenic background (world.css), on the canvas
 *   2. .fx-page: the page-wide animation layer; fixed, z-index 0, a direct child of <body>
 *   3. main and the footer: all content, z-index 1
 *   4. the header (absolute over the art, z-index 50) with its compact menu; the skip link (100)
 * Inside an art section (.home-hero, the home banner's .home-banner__band, .page-banner):
 *   z-index 0  the art: an image, or the section's own background
 *   z-index 1  .fx-layer: an animation layer that a script appends to the section
 *   z-index 2  the content: panels, text, buttons
 * The art section itself is position: relative and must not be a stacking context (no isolation,
 * transform, filter, opacity, mask, contain or will-change on it), or its layer could not lie between
 * its art and its content. So nothing that moves ever lies over text or a control, and nothing that
 * moves can catch a click or a tap. */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

.fx-layer,
.fx-page {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.fx-layer {
  position: absolute;
  z-index: 1;
}

.fx-page {
  position: fixed;
  z-index: 0;
}

/* Not even a child that asks for it may catch a click or a tap. */
.fx-layer *,
.fx-page * {
  pointer-events: none !important;
}

/* ---- Motion policy -------------------------------------------------------------------------------
 * prefers-reduced-motion: no animation layers at all, and every other animation and transition ends
 * at once. Scripts should not even start a layer then: check
 * matchMedia('(prefers-reduced-motion: reduce)') and follow its change event. Print and the Windows
 * contrast themes get no animation layers either. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fx-layer,
  .fx-page {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media print, (forced-colors: active) {
  .fx-layer,
  .fx-page {
    display: none !important;
  }
}

/* ---- Layout helpers ------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
}

.container--narrow {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
}

.section {
  padding-block: var(--section-space);
}

.section--tight {
  padding-block: calc(var(--section-space) * 0.6);
}

/* A page that does not start with art (the home hero or a .page-banner) still clears the header. */
main:not(:has(> .page-banner:first-child, > .home-hero:first-child)) {
  padding-top: calc(var(--header-h) + var(--space-6));
}

/* ---- Accessibility helpers -------------------------------------------------------------------- */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-m);
  background: var(--c-parchment-hi);
  color: var(--c-royal);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-panel);
  transform: translateY(calc(-100% - 2rem));
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}