/* Widford Magazine — theme + layout on top of Modest UI.
   Modest UI styles everything through :where(), so plain overrides win here
   without needing extra specificity. */

/* ---------------------------------------------------------------- Theme -- */

:root {
  /* Warm paper and ink rather than Modest UI's pure #fff / #000. */
  --mdst-color-bg: #faf7f0;
  --mdst-color-fg: #1c1a17;
  --mdst-color-muted: #6b6459;
  --mdst-color-subtle: #f2ede2;
  --mdst-color-surface: #f2ede2;
  --mdst-color-border: #d5cdbb;
  --mdst-color-focus: #1c1a17;

  /* Serif for reading, sans for interface. Both system stacks, so there are
     no web fonts to download. */
  --mdst-font-text: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --mdst-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --mdst-line-height: 1.65;

  /* Page rhythm. */
  --measure: 50rem;
  --gutter: var(--mdst-space-6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mdst-color-bg: #171614;
    --mdst-color-fg: #ece7dc;
    --mdst-color-muted: #9c9484;
    --mdst-color-subtle: #22201d;
    --mdst-color-surface: #22201d;
    --mdst-color-border: #38342d;
    --mdst-color-focus: #ece7dc;
  }
}

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

body {
  background-color: var(--mdst-color-bg);
  color: var(--mdst-color-fg);
  margin: 0;
}

.page {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--mdst-space-8) var(--gutter) var(--mdst-space-6);
}

/* ------------------------------------------------------------- Masthead -- */

.masthead {
  text-align: center;
  padding-block-end: var(--mdst-space-6);
  margin-block-end: var(--mdst-space-8);
  border-block-end: var(--mdst-space-px) solid var(--mdst-color-border);
}

.masthead h1 {
  /* Scales down on narrow screens without a media query. */
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-block: var(--mdst-space-3);
}

.eyebrow {
  font-family: var(--mdst-font-ui);
  font-size: var(--mdst-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdst-color-muted);
}

.tagline {
  font-style: italic;
  color: var(--mdst-color-muted);
}

/* ------------------------------------------------------------- Sections -- */

section + section {
  margin-block-start: var(--mdst-space-8);
}

section h2 {
  font-family: var(--mdst-font-ui);
  font-size: var(--mdst-text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mdst-color-muted);
  margin-block-end: var(--mdst-space-4);
}

p + p,
ul + p {
  margin-block-start: var(--mdst-space-4);
}

.lede {
  font-size: var(--mdst-text-lg);
}

/* Feature list — hanging rules instead of bullets, closer to print. */
.features {
  list-style: none;
  padding: 0;
}

.features li {
  padding-block: var(--mdst-space-3);
  border-block-start: var(--mdst-space-px) solid var(--mdst-color-border);
}

.features li:last-child {
  border-block-end: var(--mdst-space-px) solid var(--mdst-color-border);
}

.features strong {
  display: block;
}

.features span {
  color: var(--mdst-color-muted);
}

/* --------------------------------------------------------------- Footer -- */

.site-footer {
  margin-block-start: var(--mdst-space-8);
  padding-block-start: var(--mdst-space-6);
  border-block-start: var(--mdst-space-px) solid var(--mdst-color-border);
  font-family: var(--mdst-font-ui);
  font-size: var(--mdst-text-sm);
  color: var(--mdst-color-muted);
}

.site-footer a {
  color: inherit;
}

/* ------------------------------------------------- Signup form (unused) --
   Styles for the email capture in index.html, which is commented out until a
   form provider is chosen. Kept here so dropping the markup back in is the
   only change needed. */

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdst-space-2);
  margin-block-start: var(--mdst-space-4);
}

.signup .mdst-input {
  flex: 1 1 14rem;
}

.signup .mdst-button {
  font-family: var(--mdst-font-ui);
  border-color: var(--mdst-color-fg);
}