/* Soot design system, the web half. Tokens first; everything else uses
   them. The app's SootStyle.swift is the native half and shares the
   spacing scale (4 8 16 24 32) and the palette. */

:root {
  /* Colour, from the Soot suite */
  --rice: #F9F6EE;     /* page */
  --ink: #1B1917;      /* text, the sprite */
  --stone: #D9D1C6;    /* rules, quiet surfaces */
  --sage: #C7DCC8;     /* the one tint: the tile, focus, selection */
  --sage-deep: #C0D6C1;
  --leaf: #4E6E47;     /* links and buttons: Leaf, darkened for contrast */
  --mist: #6E6A63;     /* secondary text */
  --paper: #FFFFFF;    /* a field */

  /* Type: Source Serif, the note's typeface in the app, self-hosted */
  --display: "Source Serif 4", "Iowan Old Style", "Palatino", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size-body: 17px;
  --size-detail: 14px;
  --size-lead: 21px;
  --size-h2: 32px;
  --size-h1: clamp(40px, 7vw, 64px);

  /* Space (matches SootSpacing) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px;
  --section: 96px;
  --measure: 640px;

  /* Shape: the tile's corner, and nothing else is rounded much */
  --tile-radius: 22%;
  --control-radius: 10px;

  color-scheme: light dark;
}

/* Dark follows the system unless the visitor chose a mode (theme.js sets
   data-mode on <html>). themes.css overrides these for the other themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --rice: #1E1D1A;
    --ink: #EDEAE4;
    --stone: #3A3630;
    --sage: #2C3A2F;
    --sage-deep: #34453A;
    --leaf: #9DBF8C;
    --mist: #A09B92;
    --paper: #26241F;
  }
}
:root[data-mode="dark"] {
  --rice: #1E1D1A;
  --ink: #EDEAE4;
  --stone: #3A3630;
  --sage: #2C3A2F;
  --sage-deep: #34453A;
  --leaf: #9DBF8C;
  --mist: #A09B92;
  --paper: #26241F;
}
:root[data-mode="light"] { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; }

/* Base */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4.woff2") format("woff2-variations"), url("/fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Italic.woff2") format("woff2-variations"), url("/fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: var(--rice); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--rice);
  font: var(--size-body)/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main, header, footer { max-width: var(--measure); margin: 0 auto; padding-inline: var(--s4); }
a { color: var(--leaf); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; border-radius: 4px; }

h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}
h1 { font-size: var(--size-h1); line-height: 1.02; }
h2 { font-size: var(--size-h2); line-height: 1.15; margin-bottom: var(--s3); }
p { margin: 0 0 var(--s3); }
.lead { font-size: var(--size-lead); line-height: 1.45; color: var(--ink); }
.detail { font-size: var(--size-detail); color: var(--mist); }

/* Header: the wordmark alone */
header { padding-block: var(--s5) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.wordmark:hover { text-decoration: none; }
/* The tile, small: the same shape as the hero's, at icon size */
.mark { width: 26px; height: 26px; border-radius: 26%; background: var(--sage); display: grid; place-items: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.mark svg { width: 22px; height: 22px; display: block; }
header .detail { margin: 0; text-align: right; }
/* Breaks between sentences, never inside one */
header .detail span { white-space: nowrap; }

/* The appearance button. theme.js reveals it; without scripting it stays hidden. */
/* A header with a note: the note on its own line, then the wordmark and button */
header.noted { flex-direction: column; align-items: stretch; gap: var(--s3); }
header.noted .detail { text-align: left; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.appearance {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--size-detail);
  color: var(--mist); background: none;
  border: 1px solid var(--stone); border-radius: var(--control-radius);
  padding: 5px 10px; cursor: pointer;
}
.appearance[hidden] { display: none; }
.appearance:hover { color: var(--ink); border-color: var(--leaf); }
.appearance svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.appearance .i-light, .appearance .i-dark { display: none; }
:root[data-mode="light"] .appearance .i-auto, :root[data-mode="dark"] .appearance .i-auto { display: none; }
:root[data-mode="light"] .appearance .i-light, :root[data-mode="dark"] .appearance .i-dark { display: block; }

/* Hero: the sprite on its tile, then the headline */
.hero { padding-block: var(--section) calc(var(--section) - var(--s4)); }
.tile {
  width: 132px; height: 132px;
  border-radius: var(--tile-radius);
  background: var(--sage);
  display: grid; place-items: center;
  margin-bottom: var(--s5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 1px 0 rgba(27, 25, 23, 0.06), inset 0 -1px 0 rgba(27, 25, 23, 0.05);
}
.tile svg { width: 112px; height: 112px; display: block; }
.hero h1 { margin-bottom: var(--s4); }
.hero .lead { max-width: 34ch; margin-bottom: var(--s5); }
.hero .lead:has(+ .lead) { margin-bottom: var(--s3); }

/* Blink: once on load, then now and then. Off for reduced motion. */
.eyes { transform-origin: 146px 138px; animation: blink 6s ease-in-out 1.2s infinite; }
@keyframes blink {
  0%, 6%, 100% { transform: scaleY(1); }
  3% { transform: scaleY(0.08); }
}
@media (prefers-reduced-motion: reduce) { .eyes { animation: none; } }

/* The signup form, in the hero and again at the end */
.signup { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: stretch; max-width: 480px; }
.signup input {
  flex: 1 1 240px;
  font: inherit;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: var(--control-radius);
  min-width: 0;
}
.signup input::placeholder { color: var(--mist); }
.signup button {
  font: inherit; font-weight: 500;
  padding: 10px 18px;
  color: var(--rice);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--control-radius);
  cursor: pointer;
}
.signup button:hover { background: var(--leaf); border-color: var(--leaf); }
.signup + .detail { margin-top: var(--s2); }
.signup[data-state="done"] input, .signup[data-state="done"] button { display: none; }
.signup .done { display: none; margin: 0; }
.signup[data-state="done"] .done { display: block; }

/* Sections: prose, a rule between, no boxes */
section { padding-block: var(--s5); border-top: 1px solid var(--stone); }
section:first-of-type { border-top: 0; }
section p { max-width: 60ch; }
section ul { margin: 0 0 var(--s3); padding-left: 1.2em; max-width: 60ch; }
section li { margin-bottom: var(--s1); }
section li::marker { color: var(--mist); }
.closing .signup { margin-top: var(--s4); }

/* The theme picker: each theme's tile as a dot */
.themes[hidden] { display: none; }
.dots { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0 var(--s2); }
.dots button {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--c);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.dots button:hover { transform: scale(1.1); }
.dots button[aria-checked="true"] { outline: 2px solid var(--leaf); outline-offset: 3px; }
.theme-name { margin: 0; min-height: 1.5em; }
@media (prefers-reduced-motion: no-preference) { .dots button { transition: transform 0.12s; } }

/* The editor, shown rather than described */
/* Wider than the text, centred on it */
.shot { width: min(100vw - 2 * var(--s4), 1040px); margin: var(--s5) 0 0 50%; padding: 0; transform: translateX(-50%); }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 25, 23, 0.08), 0 12px 40px rgba(27, 25, 23, 0.10);
}

/* The typing clip: portrait, so narrower than the text */
.clip { margin: var(--s5) 0 0; padding: 0; max-width: 400px; }
.clip video {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 25, 23, 0.08), 0 12px 40px rgba(27, 25, 23, 0.10);
}

/* Footer */
footer { padding-block: var(--s5) var(--section); color: var(--mist); font-size: var(--size-detail); border-top: 1px solid var(--stone); margin-top: var(--s5); display: flex; gap: var(--s4); flex-wrap: wrap; }
footer a { color: var(--mist); }

@media (max-width: 480px) {
  :root { --section: 64px; --size-h2: 27px; --size-lead: 19px; }
  .tile { width: 108px; height: 108px; }
  .tile svg { width: 92px; height: 92px; }
}

/* Privacy and terms: a quieter title, and the text at reading width */
.legal { padding-block: var(--s5) var(--s4); }
.legal h1 { font-size: var(--size-h2); line-height: 1.15; margin-bottom: var(--s2); }
.legal > .detail { margin-bottom: var(--s4); }
.legal section:first-of-type { border-top: 1px solid var(--stone); }
.legal h2 { font-size: calc(var(--size-h2) * 0.72); }

/* The blog: a post at reading width, then the signup */
.post { padding-block: var(--s5) var(--s4); }
.post h1 { font-size: calc(var(--size-h1) * 0.75); line-height: 1.08; margin-bottom: var(--s2); }
.post article > .detail { margin-bottom: var(--s5); }
.post article { padding-bottom: var(--s4); }
/* A post's text is set like a note in the app */
.post article p, .post article li, .post article blockquote { font-family: var(--display); font-size: 18px; line-height: 1.6; }
.post article p, .post article li { max-width: 60ch; }
.post article h2 { font-size: calc(var(--size-h2) * 0.8); margin-top: var(--s5); }
.post article h3 { font-size: var(--size-body); margin: var(--s4) 0 var(--s2); }
.post article ul, .post article ol { margin: 0 0 var(--s3); padding-left: 1.2em; }
.post article li { margin-bottom: var(--s1); }
.post article li::marker { color: var(--mist); }
.post article blockquote { margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 3px solid var(--sage-deep); color: var(--mist); }
.post article code { font-size: 0.9em; background: var(--paper); border: 1px solid var(--stone); border-radius: 4px; padding: 0 4px; }
.post article pre { overflow-x: auto; background: var(--paper); border: 1px solid var(--stone); border-radius: var(--control-radius); padding: var(--s3); font-size: var(--size-detail); }
.post article pre code { background: none; border: 0; padding: 0; }
.post article img { max-width: 100%; height: auto; border-radius: 12px; }
.post article hr { border: 0; border-top: 1px solid var(--stone); margin: var(--s5) 0; }
/* The blog's front page: every post in full, a rule between */
.post .entry { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--stone); }
.post .entry > h2 { font-size: calc(var(--size-h2) * 1.1); line-height: 1.12; margin: 0 0 var(--s2); }
.post .entry > h2 a { color: var(--ink); text-decoration: none; }
.post .entry > h2 a:hover { color: var(--leaf); }
.post .closing { border-top: 1px solid var(--stone); }
/* A picture on its own line: wider than the text, centred on it, as the homepage shots are */
.post article p:has(> img:only-child) { width: min(100vw - 2 * var(--s4), 1040px); max-width: none; margin: var(--s5) 0 var(--s5) 50%; transform: translateX(-50%); }
.post article p:has(> img:only-child) img { display: block; width: 100%; box-shadow: 0 1px 2px rgba(27, 25, 23, 0.08), 0 12px 40px rgba(27, 25, 23, 0.10); }
@media (max-width: 480px) {
  .post article p:has(> img:only-child) { width: 100vw; }
  .post article p:has(> img:only-child) img { border-radius: 0; box-shadow: none; }
}
.post .detail a { color: inherit; }
/* About: the portrait above the title, pixel art kept sharp */
.about .portrait { display: block; width: 160px; height: 160px; border-radius: var(--tile-radius); image-rendering: pixelated; margin-bottom: var(--s4); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }