/* The page's own manners: the sky behind everything, the four voices at
   their work, links, focus, and the two marks any component may wear —
   the glyph and the glossed term. What merely undoes the browser is
   reset.css; the faces themselves are font-face.css. */
@layer base {

html {
  min-height: 100%;
  background: var(--paper);
}

/* A dawn sky: gold warming the horizon above, a sprinkle of pastel stars
   still hanging on. */
body {
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  background-color: var(--paper);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(224, 90, 58, 0.35) 0, transparent 100%),
    radial-gradient(1px 1px at 28% 64%, rgba(122, 95, 199, 0.35) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 12%, rgba(212, 180, 106, 0.5) 0, transparent 100%),
    radial-gradient(1px 1px at 55% 44%, rgba(63, 143, 209, 0.3) 0, transparent 100%),
    radial-gradient(1px 1px at 63% 81%, rgba(122, 95, 199, 0.25) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 74% 27%, rgba(212, 180, 106, 0.45) 0, transparent 100%),
    radial-gradient(1px 1px at 86% 58%, rgba(224, 90, 58, 0.25) 0, transparent 100%),
    radial-gradient(1px 1px at 93% 9%, rgba(63, 143, 209, 0.35) 0, transparent 100%),
    radial-gradient(1px 1px at 7% 88%, rgba(92, 154, 78, 0.3) 0, transparent 100%),
    radial-gradient(ellipse at 50% -20%, var(--dawn) 0, var(--paper) 60%);
  background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }
h1 { font-size: 2.2rem; color: var(--ink); margin: 0 0 0.25rem; line-height: 1.15; }
h2 { font-size: 1.5rem; color: var(--ink); }
a { color: var(--gold); text-decoration: none; }
/* Hover lives only where a pointer can hover: on touch, WebKit leaves the
   last-tapped element "hovered", and the flourish sticks to it. The same
   guard stands over every :hover in these sheets. */
@media (hover: hover) {
  a:hover { text-decoration: underline; }
}

a, button { transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  a, button, .tile { transition: none; }
}

/* Glyphs speak in their own face, everywhere, identically. */
.glyph { font-family: var(--font-glyph); font-style: normal; }

/* A glossed term wears a dotted hem; one tap opens its teaching — a
   sheet on the web, the Learn page itself in the native app. */
.glossed {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: inherit;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold) 45%, transparent);
}
@media (hover: hover) {
  .glossed:hover { color: inherit; text-decoration: none; border-bottom-color: var(--gold); }
}

@media (max-width: 760px) {
  h1 { font-size: 1.65rem; }
}

}