/* Mailato — the look comes from Marc's two wordmarks (2026-10-27).
   Every colour below was sampled from src/brand/mailato-wordmark-{day,dark}.jpg:
   the script teal, the day gradient's pale cyan, aqua and mint, the dark navy.
   The page background in each mode is the wordmark's own background, and the
   script itself is lifted off its image, so it sits in the page with no edge.
   Text colours are checked against every sampled background by
   tests/build.test.mjs (contrast). */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
}

:root {
  --teal: #1dcfc9;          /* the script, day */
  --pale: #ccf5f6;          /* day gradient, top left */
  --pale-2: #c7f7ea;        /* day gradient, centre */
  --aqua: #87e6e5;          /* day gradient, bottom left */
  --mint: #84f2c9;          /* day gradient, bottom right */
  --navy: #02102b;          /* the dark wordmark's background */

  --bg: var(--pale);
  --page: radial-gradient(120% 90% at 0% 100%, var(--aqua) 0%, transparent 55%),
          linear-gradient(135deg, var(--pale) 0%, var(--pale-2) 45%, var(--mint) 100%);
  --text: #02102b;
  --muted: #2f5563;
  --link: #04625e;
  --rule: rgba(2, 16, 43, .14);
  --panel: rgba(255, 255, 255, .42);
  --code-bg: rgba(255, 255, 255, .55);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal: #21cdc1;        /* the script, dark */
    --bg: var(--navy);
    --page: var(--navy);
    --text: #e7f5f4;
    --muted: #a9c4c9;
    --link: #21cdc1;
    --rule: rgba(33, 205, 193, .22);
    --panel: rgba(33, 205, 193, .06);
    --code-bg: rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --teal: #21cdc1;
  --bg: var(--navy);
  --page: var(--navy);
  --text: #e7f5f4;
  --muted: #a9c4c9;
  --link: #21cdc1;
  --rule: rgba(33, 205, 193, .22);
  --panel: rgba(33, 205, 193, .06);
  --code-bg: rgba(255, 255, 255, .06);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  background-attachment: fixed;
  color: var(--text);
  font: 400 19px/1.65 "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "kern", "liga";
}

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* The wordmark exists twice, one per mode; the mode decides which shows.
   It is the script alone on transparency (scripts/brand-cutout.py). */
.wm { display: block; height: auto; }
.wm-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wm-day { display: none; }
  :root:not([data-theme="light"]) .wm-dark { display: block; }
}
:root[data-theme="dark"] .wm-day { display: none; }
:root[data-theme="dark"] .wm-dark { display: block; }

header.site, main, footer.site { max-width: 40rem; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

header.site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; padding-top: 1rem; padding-bottom: .75rem;
}
.brand { display: block; line-height: 0; border-radius: 6px; }
.brand .wm { width: 112px; }
.theme-toggle {
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--text);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem .85rem; cursor: pointer; order: 1;
}
header.site nav {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem;
  font-size: .95rem; font-weight: 500; padding-top: .4rem; border-top: 1px solid var(--rule); order: 2;
}
header.site nav a { text-decoration: none; color: var(--text); opacity: .8; }
header.site nav a:hover { opacity: 1; text-decoration: underline; }
header.site nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; }

h1, h2, h3 { line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 2.3rem; margin: 2.5rem 0 1rem; }
h2 { font-size: 1.4rem; margin: 2.75rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
p, ul, ol { margin: 0 0 1.1rem; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--muted); }
ul, ol { padding-left: 1.3rem; }
li { margin: .45rem 0; }
li::marker { color: var(--muted); }
strong { font-weight: 650; }

/* The home hero: the wordmark itself. */
h1.hero { margin: 3.5rem 0 1.75rem; line-height: 0; }
h1.hero .wm { width: 88%; max-width: 560px; margin: 0 auto; }
h1.hero + .lead { text-align: center; font-size: 1.3rem; max-width: 30rem; margin: 0 auto 3rem; }

.contract {
  margin-top: 5rem; padding: 1.5rem 1.25rem; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--rule);
  font-size: .9rem; line-height: 1.6; color: var(--muted);
}
.contract h2 { color: var(--text); margin-top: 0; }
.contract h3 { color: var(--text); }
pre { background: var(--code-bg); padding: 12px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; font-size: .76rem; line-height: 1.5; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; overflow-wrap: anywhere; }

footer.site {
  margin-top: 3rem; padding-top: 1.25rem; padding-bottom: 2.5rem;
  border-top: 1px solid var(--rule); font-size: .9rem; color: var(--muted);
}
footer.site a { color: var(--muted); }

@media (min-width: 640px) {
  body { font-size: 20px; }
  .brand .wm { width: 136px; }
  h1 { font-size: 2.7rem; }
}