/* Stormap site style: the same paper-and-ink look as Idea Bubbles. One family for headings
   (Fraunces), one for text (Instrument Sans). Colour comes only from the four branch colours,
   each tied to one part of the site. */
:root {
  --paper: #F3EEE4;
  --paper-2: #EBE4D7;
  --ink: #23201C;
  --ink-2: #4A453D;
  --muted: #6E675C;
  --line: #DCD3C3;
  --moss: #5E7A35;
  --teal: #2F6E78;
  --ochre: #A0721A;
  --plum: #7D4C6E;
  --display: "Fraunces", Georgia, serif;
  --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1916; --paper-2: #24211D; --ink: #EDE7DC; --ink-2: #CFC7B9; --muted: #A39A8B; --line: #3A352E;
    --moss: #9BB86A; --teal: #6FB3BD; --ochre: #D9A84B; --plum: #C892B8;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--text); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header and footer */
.site-head { max-width: 1080px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wordmark { font: 600 26px/1 var(--display); text-decoration: none; letter-spacing: -0.01em; }
.site-head nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-head nav a { text-decoration: none; color: var(--ink-2); font-size: 16px; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.site-foot { max-width: 1080px; margin: 72px auto 0; padding: 28px 24px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.site-foot a { margin-left: 14px; color: var(--ink-2); }
.site-foot .small { font-size: 13px; margin: 6px 0 0; }

main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Hero: the site as a branch map */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 48px 0 56px; }
h1 { font: 400 clamp(40px, 6vw, 64px)/1.04 var(--display); letter-spacing: -0.02em; margin: 0 0 22px; font-variation-settings: "opsz" 144; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 34em; margin: 0 0 28px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.btn { display: inline-block; padding: 12px 20px; border-radius: 10px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; border: 1px solid var(--ink); }
.btn:hover { opacity: .9; }
.btn.quiet { background: transparent; color: var(--ink); }
.hero-map { margin: 0; }
.hero-map svg { width: 100%; height: auto; display: block; }
.hero-map .b { stroke-dasharray: 260; stroke-dashoffset: 260; animation: grow 900ms 150ms ease-out forwards; }
.hero-map .b.teal { animation-delay: 300ms; } .hero-map .b.ochre { animation-delay: 450ms; } .hero-map .b.plum { animation-delay: 600ms; }
@keyframes grow { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-map .b { animation: none; stroke-dashoffset: 0; } }
.b.moss { stroke: var(--moss); } .b.teal { stroke: var(--teal); } .b.ochre { stroke: var(--ochre); } .b.plum { stroke: var(--plum); }
.hero-map rect { fill: var(--paper); stroke-width: 1.5; }
.moss-fill { stroke: var(--moss); } .teal-fill { stroke: var(--teal); } .ochre-fill { stroke: var(--ochre); } .plum-fill { stroke: var(--plum); }
.hero-map text { font: 500 16px var(--text); fill: var(--ink); text-anchor: middle; }
.hero-map .node:hover rect, .hero-map .node:focus rect { fill: var(--paper-2); }
.hero-map .root rect { fill: var(--ink); stroke: none; }
.hero-map .root text { fill: var(--paper); font: italic 400 20px var(--display); }

/* What's here: three rows, each marked by its branch colour */
.what { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 220px 1fr; column-gap: 40px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.row > * { grid-column: 2; }
.row h3 { grid-column: 1; grid-row: 1 / span 4; margin: 2px 0 0; font: 400 26px/1.2 var(--display); padding-left: 16px; border-left: 4px solid currentColor; }
.row.moss h3 { color: var(--moss); } .row.teal h3 { color: var(--teal); } .row.ochre h3 { color: var(--ochre); }
.row h3 a { color: var(--ink); text-decoration: none; }
.row h3 a:hover { text-decoration: underline; }
.row p { margin: 0 0 12px; max-width: 40em; color: var(--ink-2); }
.links a { margin-right: 18px; font-weight: 600; color: var(--ink); }
.tool-list { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); }
.tool-list li { margin: 4px 0; }
.tool-list a { color: var(--ink); font-weight: 600; }
.code code { font: 15px ui-monospace, "SF Mono", Menlo, monospace; background: var(--paper-2); padding: 4px 8px; border-radius: 6px; }

/* Guides and changes */
.guides, .changes { padding-top: 48px; }
h2 { font: 400 32px/1.15 var(--display); margin: 0 0 10px; letter-spacing: -0.01em; }
.note { color: var(--muted); margin: 0 0 18px; max-width: 40em; font-size: 15px; }
.guide-list { list-style: none; padding: 0; margin: 0 0 16px; columns: 2; column-gap: 40px; }
.guide-list li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line); }
.guide-list a { text-decoration: none; }
.guide-list a:hover { text-decoration: underline; }
.change-list { list-style: none; padding: 0; margin: 0 0 16px; }
.change-list li { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.change-list time { color: var(--muted); font-size: 15px; }

/* Prose pages (about, changelog) */
.prose { max-width: 680px; padding: 32px 0 0; }
.prose h1 { font-size: clamp(36px, 5vw, 52px); }
.prose h2 { margin-top: 40px; font-size: 26px; }
.prose p, .prose li { color: var(--ink-2); }
.prose .entry { padding: 18px 0; border-bottom: 1px solid var(--line); }
.prose .entry h3 { font: 600 18px/1.35 var(--text); margin: 0 0 4px; color: var(--ink); }
.prose .entry time { color: var(--muted); font-size: 14px; }
.prose .entry p { margin: 6px 0 0; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-head { padding: 16px; }
  .site-head nav { gap: 14px; }
  main { padding: 0 16px; }
  .hero { grid-template-columns: 1fr; padding: 24px 0 32px; gap: 20px; }
  .row { grid-template-columns: 1fr; }
  .row > *, .row h3 { grid-column: 1; grid-row: auto; }
  .row h3 { margin-bottom: 10px; }
  .guide-list { columns: 1; }
  .site-foot { padding: 24px 16px 32px; }
  .site-foot a { margin: 0 12px 0 0; display: inline-block; }
}