/* Wurnix site: design authority is design-system/MASTER.md (Letterhead). */
:root {
  --bg: #FBFAF7;
  --fg: #1B1F2A;
  --muted: #5B6170;
  --rule: #E2DED5;
  --accent: #1E3A8A;
  --serif: "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161C;
    --fg: #E9E6DF;
    --muted: #A3A7B2;
    --rule: #2A2D36;
    --accent: #9DB4F0;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 var(--sans);
}
.wrap { max-width: 40rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .wrap { padding: 0 20px; } }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header.site { border-bottom: 1px solid var(--rule); }
header.site .wrap { padding-top: 16px; padding-bottom: 16px; }
.wordmark { font: 600 1.25rem/1 var(--serif); color: var(--fg); text-decoration: none; }
main { padding: 32px 0 48px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); margin: 0 0 8px; }
h2 { font-size: 1.3rem; margin: 32px 0 8px; }
h3 { font-size: 1.1rem; margin: 24px 0 8px; }
p, ul, ol { margin: 0 0 16px; }
ul { padding-left: 1.25rem; }
li { margin: 0 0 8px; }
code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 0.875rem; margin-bottom: 24px; }
.meta a { display: inline-block; padding: 10px 0; }
.lede { color: var(--muted); margin-bottom: 24px; }
.coming-soon { font-style: italic; color: var(--muted); }
.apps { list-style: none; padding: 0; margin: 0; }
.apps li { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); margin: 0; }
.apps li:last-child { border-bottom: 1px solid var(--rule); }
.apps img { width: 56px; height: 56px; border-radius: 22%; flex: none; }
.apps .name { display: block; font-weight: 600; }
.apps .sub { display: block; color: var(--muted); font-size: 0.875rem; }
.apps .links { display: block; font-size: 0.875rem; }
.apps .links a { display: inline-block; padding: 10px 0; }
.apps .links a + a { margin-left: 20px; }
.app-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.app-head img { width: 40px; height: 40px; border-radius: 22%; flex: none; }
.app-head span { font-weight: 600; }
footer.site { border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.875rem; }
footer.site .wrap { padding-top: 16px; padding-bottom: 32px; }