/* Clothesline site: linen paper, ink text, a twine rule with pegs between
   sections — the same palette as the app (views/look.dart). */
:root {
  --linen: #F5EFE4; --card: #FBF8F2; --ink: #26243A; --soft: #5E5A70;
  --twine: #9C7B5B; --peg: #D8B98C; --sky1: #BFD9EC; --sky2: #F5EFE4;
  --link: #3F6E96;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --linen: #1B1E33; --card: #23273F; --ink: #ECE7DC; --soft: #A9A5B8;
    --twine: #C4A27E; --peg: #8C7350; --sky1: #2A3157; --sky2: #1B1E33;
    --link: #9CC3E6;
  }
}
* { box-sizing: border-box; }
html { background: var(--linen); }
body {
  margin: 0; color: var(--ink); background: var(--linen);
  font: 17px/1.6 -apple-system, "Segoe UI", system-ui, sans-serif;
}
.sky {
  background: linear-gradient(180deg, var(--sky1), var(--sky2));
  padding: 28px 16px 8px;
}
.sky .inner, main, .foot { max-width: 680px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink);
         text-decoration: none; font-weight: 600; }
.brand img { width: 44px; height: 44px; border-radius: 11px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
h1 { font-size: 2rem; line-height: 1.2; margin: 28px 0 4px; }
h2 { font-size: 1.3rem; margin: 0 0 8px; }
h3 { font-size: 1rem; margin: 18px 0 4px; }
.stamp { color: var(--soft); font-size: .92rem; margin: 0 0 18px; }
main { padding: 0 16px 24px; }
/* Each section hangs from a peg on the line. */
section {
  position: relative; background: var(--card); border-radius: 18px;
  padding: 22px 20px 16px; margin: 34px 0 0;
}
section::before {
  content: ""; position: absolute; left: -16px; right: -16px; top: -14px;
  border-top: 2px solid var(--twine); border-radius: 50%/6px;
}
section::after {
  content: ""; position: absolute; top: -22px; left: 28px; width: 10px; height: 26px;
  background: var(--peg); border-radius: 3px;
}
.gist { font-size: 1.05rem; }
code { font: .88em ui-monospace, Menlo, monospace; background: rgba(156,123,91,.16);
       padding: 1px 5px; border-radius: 5px; }
dl { margin: 8px 0; }
dt { font-weight: 600; margin-top: 12px; }
dd { margin: 2px 0 0 0; color: var(--soft); }
ul { padding-left: 1.2em; }
a { color: var(--link); }
.foot { padding: 28px 16px 48px; color: var(--soft); font-size: .9rem; }
.foot a { margin-right: 14px; }
.big-links a { display: block; padding: 10px 0; font-size: 1.05rem; }