/* Stylemark site styles.
   Colours come from the app icon: the navy ground, the orange proofreader's caret,
   and the cream of its text lines. Type is the reader's own system serif (New York
   on Apple devices) and system sans, so the site loads no web fonts and makes no
   third-party requests. */

:root {
  --paper: #f7f8fb;
  --surface: #ffffff;
  --ink: #121a33;
  --ink-2: #3c4560;
  --mute: #586179;
  --rule: #d9dde7;
  --navy: #1e3a8a;
  --caret: #ff6b3d;
  --caret-text: #b5401a;
  --fixed: #1f6f4a;
  --icon-ground: #1e3a8a;

  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure: 38rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b1d22;
    --surface: #23262d;
    --ink: #eceef3;
    --ink-2: #c9cdd8;
    --mute: #a3a9b8;
    --rule: #3a3e48;
    --navy: #9db4ff;
    --caret-text: #ff8a63;
    --fixed: #6fd3a0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1b1d22;
  --surface: #23262d;
  --ink: #eceef3;
  --ink-2: #c9cdd8;
  --mute: #a3a9b8;
  --rule: #3a3e48;
  --navy: #9db4ff;
  --caret-text: #ff8a63;
  --fixed: #6fd3a0;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
}

a { color: var(--navy); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .wrap { padding: 0 2rem; } }

/* Header and footer */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 1.05rem;
}
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.site-head nav { display: flex; gap: 1.25rem; }
.site-head nav a { color: var(--ink-2); text-decoration: none; }
.site-head nav a:hover,
.site-head nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

.site-foot {
  margin-top: 5rem;
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--mute);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.site-foot nav { display: flex; gap: 1.25rem; }
.site-foot a { color: var(--mute); }

/* Home: hero */

.hero {
  display: grid;
  gap: 2.5rem;
  padding-block: 3rem 4rem;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 5fr 6fr; align-items: center; gap: 4rem; padding-block: 5rem 6rem; }
}

.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.hero .lede {
  font-size: 1.25rem;
  color: var(--ink-2);
  margin: 0 0 1.75rem;
  max-width: 30rem;
}
.availability {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--mute);
  margin: 0;
}

/* The specimen: a story with live style marks */

.specimen {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -24px rgb(18 26 51 / 0.35);
}
@media (min-width: 640px) { .specimen { padding: 2rem 2.25rem; } }

.specimen-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--mute);
  margin-bottom: 1rem;
}
.specimen-count { font-variant-numeric: tabular-nums; }

.specimen-story {
  font-size: 1.2rem;
  line-height: 1.75;
  margin: 0;
}

.mark {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline wavy var(--caret);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: none;
}
.mark:hover, .mark[aria-expanded="true"] { background: color-mix(in srgb, var(--caret) 14%, transparent); }
.mark.is-fixed {
  cursor: default;
  text-decoration: none;
  color: var(--fixed);
  background: none;
}

.note {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--caret);
  background: color-mix(in srgb, var(--caret) 7%, var(--surface));
  border-radius: 0 8px 8px 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
}
.note[hidden] { display: none; }
.note-rule { color: var(--mute); font-size: 0.85rem; margin: 0 0 0.35rem; }
.note-message { margin: 0 0 0.85rem; color: var(--ink); }
.note-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.note button {
  font: inherit;
  font-size: 0.9rem;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
}
.note button.primary { background: var(--icon-ground); border-color: var(--icon-ground); color: #fff; }

.specimen-hint {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--mute);
}

@media (prefers-reduced-motion: no-preference) {
  .mark { transition: color 0.4s ease, background-color 0.2s ease; }
}

/* Home: sections */

.section {
  padding-block: 3rem;
  border-top: 1px solid var(--rule);
}
.section h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 1rem;
  max-width: var(--measure);
}
.section > .wrap > p { max-width: var(--measure); color: var(--ink-2); }

.audiences {
  display: grid;
  gap: 2.5rem 4rem;
  margin-top: 2rem;
}
@media (min-width: 800px) { .audiences { grid-template-columns: 1fr 1fr; } }
.audiences h3 { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.5rem; }
.audiences > div > p { margin: 0 0 1rem; color: var(--ink-2); }

.features { list-style: none; margin: 0; padding: 0; }
.features li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.features li strong { font-weight: 600; }

.privacy-band { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .privacy-band { grid-template-columns: 2fr 3fr; gap: 4rem; } }
.privacy-band p { margin: 0 0 1rem; color: var(--ink-2); }

.requirements { font-family: var(--sans); font-size: 0.95rem; color: var(--mute); }

/* Text pages: support, privacy, 404 */

.page {
  max-width: var(--measure);
  padding-block: 3rem 1rem;
}
.page h1 {
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.page .updated { font-family: var(--sans); font-size: 0.9rem; color: var(--mute); margin: 0 0 2rem; }
.page .lede { font-size: 1.25rem; color: var(--ink-2); }
.page h2 { font-size: 1.45rem; line-height: 1.25; font-weight: 600; margin: 2.75rem 0 0.75rem; }
.page h3 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.page li { margin-bottom: 0.4rem; }
.page code { font-size: 0.9em; }

.summary {
  border-left: 3px solid var(--caret);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 2rem 0;
}
.summary p { margin: 0; }

.contact {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.contact p { margin: 0 0 0.5rem; }
.contact p:last-child { margin: 0; }
.contact .address { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; }

.faq details { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 0.75rem 0 0; color: var(--ink-2); }