/* ==========================================================================
   Martha — reset, atmosphere, typography, shared primitives
   Loaded by every page, after tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, served from this domain.

   They used to come from fonts.googleapis.com, which hands the visitor's IP
   address to Google before the page has asked anyone for anything. Under
   GDPR that is a transfer without consent — a German court said so in 2022 —
   and it covers a reader in Dublin or Valletta exactly as it covers one in
   Berlin: the rule follows the person, not the language of the page.

   The unicode-range lines are why there are fourteen files and not seven.
   A browser fetches only the ranges a page actually uses, so an English page
   pulls the seven "latin" files and never touches "latin-ext".
   To regenerate: Inter 400/500/600, Outfit 300/400/500/600, woff2.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/outfit-300-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/outfit-300-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/outfit-400-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/outfit-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/outfit-500-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/outfit-500-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit-600-latin.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit-600-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, not hidden: it never creates a scroll container, so sticky survives. */
  overflow-x: clip;
}

body {
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; }

:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Atmosphere.

   The page travels night → morning, so light belongs to individual zones,
   not to the document. What is left at document level is grain: a whisper
   of texture that keeps large flat fields of cream from reading as printer
   paper. Decorative, never intercepts pointer events.

   The reader page is genuinely one continuous room, so it re-adds a fixed
   glow of its own — see reader.css.
   -------------------------------------------------------------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Focus + skip link
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--c-amber);
  color: var(--c-amber-ink);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0.75rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - (var(--space-gutter) * 2), var(--measure-wide));
  margin-inline: auto;
}

.shell--narrow { width: min(100% - (var(--space-gutter) * 2), 46rem); }

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

.stack > * + * { margin-top: var(--flow, 1rem); }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-text-mute);
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.eyebrow--dot::before {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--c-amber);
  opacity: 1;
}

.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); }

.lead {
  font-size: var(--text-lead);
  line-height: 1.56;
  color: var(--c-text-dim);
}

.muted { color: var(--c-text-mute); }

.fine {
  font-size: var(--text-sm);
  line-height: 1.58;
  color: var(--c-text-mute);
}

.tiny {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--c-text-mute);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  text-align: center;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn--primary {
  --btn-bg: var(--c-amber);
  --btn-fg: var(--c-amber-ink);
  font-weight: 600;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: var(--c-amber-soft); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  border: 1px solid var(--c-line);
  color: var(--c-text-dim);
}
.btn--ghost:hover {
  border-color: var(--c-amber);
  color: var(--c-text);
  background: color-mix(in oklab, var(--c-amber) 8%, transparent);
}

.btn--quiet {
  padding-inline: 0;
  color: var(--c-amber);
  border-bottom: 1px solid color-mix(in oklab, var(--c-amber) 40%, transparent);
  border-radius: 0;
}
.btn--quiet:hover { border-bottom-color: var(--c-amber); }

.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.card {
  padding: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}

.card--glass {
  background: var(--glass-bg);
  border-color: var(--glass-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}

/* Small pill used for "free", "included", "audio" markers. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--c-lavender) 34%, transparent);
  background: var(--c-lavender-dim);
  color: var(--c-lavender);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tag--amber {
  border-color: color-mix(in oklab, var(--c-amber) 34%, transparent);
  background: color-mix(in oklab, var(--c-amber) 12%, transparent);
  color: var(--c-amber);
}

/* --------------------------------------------------------------------------
   Reading-light toggle — the reader page only.

   A bare moon icon read as decoration, not as a control, so the label is
   part of the button. The word describes what you will GET, not what is
   currently on: in night mode it offers "Day", in day mode "Night".
   -------------------------------------------------------------------------- */

.reading-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem 0.42rem 0.72rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  color: var(--c-text-dim);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.reading-toggle:hover {
  color: var(--c-amber);
  border-color: var(--c-amber);
  background: color-mix(in oklab, var(--c-amber) 8%, transparent);
}
.reading-toggle svg { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; }

/* Night is the default state of the reader, so the day affordance is what
   shows first; the pair swaps whole-cloth when the document flips. */
.reading-toggle .is-for-day { display: inline-flex; align-items: center; gap: 0.45rem; }
.reading-toggle .is-for-night { display: none; }
:root[data-reading="day"] .reading-toggle .is-for-day { display: none; }
:root[data-reading="day"] .reading-toggle .is-for-night { display: inline-flex; align-items: center; gap: 0.45rem; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll (progressive enhancement; JS adds .is-in)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Without JS nothing ever adds .is-in, and the whole landing page would be a
   blank cream column. The reveal is an enhancement, so it stands down when
   there is no script to finish it — same stance the sticky header takes. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion: keep everything, remove the movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}