/* The app's palette and type, so the site and the product look like one thing. */
:root {
  --sand: #EFE6DB;
  --surface: #F7F1E9;
  --ink: #16150F;
  --muted: #9A8F82;
  --olive: #6E6E23;
  --coral: #DF7F4F;
  --pink: #EFA2AE;
  --sage: #CBCB93;
  --blue: #7FA3BC;
  --gutter: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 17px/1.55 ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 720px; margin: 0 auto; padding: 56px var(--gutter) 96px; }

h1, h2 {
  font-family: "Bricolage Grotesque", ui-rounded, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0 0 18px;
}
h1 { font-size: clamp(44px, 9vw, 68px); }
h2 { font-size: 28px; margin-top: 44px; }
h3 { font-size: 17px; margin: 28px 0 6px; }

p, li { color: #3A3A36; }
p.lead { font-size: 20px; color: var(--muted); }
a { color: var(--ink); text-decoration-color: var(--muted); text-underline-offset: 3px; }

.wordmark {
  font: 800 13px/1 ui-rounded, system-ui, sans-serif;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 40px;
}

.cards { display: flex; gap: 14px; margin: 40px 0; flex-wrap: wrap; }
.card {
  flex: 1 1 200px;
  border-radius: 28px;
  padding: 22px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
}
.card .word { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 26px; }
.card .ipa { color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px; }
.card .meaning { margin-top: auto; font-size: 14px; opacity: 0.8; }
.card .langs { font-size: 11px; font-weight: 700; letter-spacing: 1px; opacity: 0.55; margin-top: 10px; }

footer {
  border-top: 1px solid rgba(22,21,15,0.12);
  margin-top: 72px; padding-top: 24px;
  font-size: 14px; color: var(--muted);
  display: flex; gap: 18px; flex-wrap: wrap;
}

.updated { font-size: 14px; color: var(--muted); margin-bottom: 32px; }
dt { font-weight: 700; margin-top: 20px; }
dd { margin: 4px 0 0; color: #3A3A36; }

/* The Lock Screen schematic. Drawn rather than screenshotted: it survives an
   iOS redesign, and it says "a strip under the clock" faster than a photo. */
.phone { margin: 32px 0 8px; text-align: center; }
.phone svg { width: 220px; max-width: 100%; height: auto; }
.phone figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; }

.t-clock { font: 300 44px ui-rounded, system-ui, sans-serif; fill: rgba(22,21,15,.5); }
.t-date  { font: 600 11px ui-rounded, system-ui, sans-serif; fill: rgba(22,21,15,.5); }
.t-word  { font: 800 11px "Bricolage Grotesque", system-ui, sans-serif; fill: var(--ink); }
.t-small { font: 500 8px ui-rounded, system-ui, sans-serif; fill: rgba(22,21,15,.7); }
.w-fill  { fill: rgba(22,21,15,.08); }
.w-dim   { fill: rgba(22,21,15,.08); }

@media (prefers-color-scheme: dark) {
  :root { --sand: #16150F; --surface: #211F18; --ink: #EFE6DB; --muted: #8C8378; }
  body { background: var(--sand); color: var(--ink); }
  p, li, dd { color: #CFC7BB; }
  .t-clock, .t-date { fill: rgba(239,230,219,.5); }
  .t-word { fill: var(--ink); }
  .t-small { fill: rgba(239,230,219,.7); }
  .w-fill, .w-dim { fill: rgba(239,230,219,.10); }
  .phone svg rect[stroke] { stroke: rgba(239,230,219,.35); }
  footer { border-top-color: rgba(239,230,219,.14); }
  /* The word cards keep their colours; ink on them still reads. */
  .card .meaning, .card .langs, .card .word { color: #16150F; }
}

/* The wordmark doubles as the way back on sub-pages. */
a.wordmark { text-decoration: none; }
a.wordmark:hover { color: var(--ink); }

ol { padding-left: 22px; }
ol li { margin: 6px 0; }
code {
  font: 500 15px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 6px;
}