@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');
/* Gatherby Help: job aids & explainers. Warm, calm, mobile-first. Light-only.
   Palette = the app's "Washi & Sumi" look (2026-10-06): paper, sumi ink, vermilion, faint dot grid. */
:root{
  --paper:#f8f6f1; --card:#fdfcf9; --ink:#24211d; --muted:#6e665b; /* was #8b8378 (3.46:1); now 5.23:1 on paper #f8f6f1, 5.51:1 on card #fdfcf9 */ --line:#e7e1d6;
  --accent:#b4412c; --accent-soft:#f6e3dc; --sage:#5f8a6b; --plum:#8a6e9a; --coral:#c47b6a; --slate:#6c8298;
  --body:#3d3832; --dot:rgba(36,33,29,.07);
  --radius:14px; --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background-color:var(--paper); color:var(--ink);
  background-image:radial-gradient(var(--dot) 1px, transparent 1.2px); background-size:6px 6px;
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Cormorant display for headings */
.serif{font-family:"Cormorant Garamond",Georgia,serif}

/* ── Header ── */
.hdr{position:sticky; top:0; z-index:5; background:rgba(248,246,241,.92); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--maxw); margin:0 auto; padding:13px 18px; display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap}
.hdr-nav{margin-left:auto; display:flex; align-items:center; gap:16px; font-size:13.5px; font-weight:500}
.hdr-nav a{color:var(--muted)}
.hdr-nav a:hover{color:var(--accent); text-decoration:none}
@media(max-width:480px){.hdr-nav{gap:13px; font-size:13px} .hdr-nav .nav-hide{display:none}}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand:hover{opacity:.85}
.mark{width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; background:var(--accent);
  border-radius:7px; color:#fff}
.mark svg{width:16px; height:16px}
.word{font-family:"Cormorant Garamond",Georgia,serif; font-size:22px; font-weight:600; letter-spacing:.2px; line-height:1}
.word small{font-family:-apple-system,sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-left:8px; vertical-align:2px}
.hdr .home{margin-left:auto; font-size:14px; color:var(--muted)}

/* ── Layout ── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:26px 18px 72px}
.crumb{font-size:13px; color:var(--muted); margin:0 0 14px}
.crumb a{color:var(--muted)}

h1.serif{font-size:38px; line-height:1.08; font-weight:600; margin:6px 0 8px; letter-spacing:.2px}
.lead{font-size:18.5px; color:var(--body); margin:0 0 26px}
h2.serif{font-size:25px; font-weight:600; margin:34px 0 10px; letter-spacing:.2px}
h3{font-size:16px; font-weight:700; margin:22px 0 6px; letter-spacing:.01em}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px; padding-left:22px}
li{margin:5px 0}
hr{border:none; border-top:1px solid var(--line); margin:30px 0}
strong{font-weight:650}
code{background:var(--accent-soft); border-radius:5px; padding:.08em .38em; font-size:.9em}

/* Steps */
ol.steps{counter-reset:s; list-style:none; padding:0; margin:8px 0 20px}
ol.steps>li{counter-increment:s; position:relative; padding:2px 0 2px 40px; margin:9px 0}
ol.steps>li::before{content:counter(s); position:absolute; left:0; top:0; width:26px; height:26px;
  display:grid; place-items:center; background:var(--accent); color:#fff; border-radius:50%; font-size:13px; font-weight:700}

/* Option list (what each control does) */
dl.opts{margin:8px 0 20px}
dl.opts dt{font-weight:700; margin:14px 0 2px}
dl.opts dd{margin:0 0 4px; color:var(--body)}

/* Callout */
.note{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:13px 16px; margin:18px 0; font-size:15px}
.note b{color:var(--accent)}
.tip{border-left-color:var(--sage)} .tip b{color:#4f7559} /* darker sage text: 5.03:1 on card (was 3.84:1) */

/* Chips (little inline UI labels) */
.k{display:inline-block; background:var(--card); border:1px solid var(--line); border-radius:7px;
  padding:1px 8px; font-size:13px; font-weight:600; white-space:nowrap}

/* ── Home ── */
.hero{padding:14px 0 8px}
.grid{display:grid; grid-template-columns:1fr; gap:12px; margin:10px 0 8px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
.tile{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 17px; transition:border-color .12s, transform .12s}
.tile:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-1px)}
.tile .t{font-family:"Cormorant Garamond",Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); margin-bottom:2px}
.tile .d{font-size:14px; color:var(--muted); line-height:1.5}
.sec-h{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  margin:30px 0 10px}
h2.sec-h{font-family:inherit; line-height:inherit}   /* index category labels are real headings (2026-10-26) */
.linklist{list-style:none; padding:0; margin:0; columns:2; column-gap:26px}
@media(max-width:520px){.linklist{columns:1}}
.linklist li{margin:0; break-inside:avoid}
.linklist a{display:block; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px}

/* Related footer */
.related{margin-top:34px; padding-top:18px; border-top:1px solid var(--line)}
.related .sec-h{margin-top:0}
.foot{max-width:var(--maxw); margin:0 auto; padding:26px 18px 40px; color:var(--muted); font-size:13px; text-align:center}
.foot a{color:var(--muted)}

/* What's new: release notes (quiet: a one-line teaser on the home, a timeline page) */
.wn-teaser{display:inline-flex; align-items:center; gap:8px; margin:-8px 0 8px; padding:6px 12px 6px 10px;
  border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink);
  font-size:13.5px; text-decoration:none; transition:border-color .15s}
.wn-teaser:hover{border-color:var(--accent)}
.wn-dot{width:7px; height:7px; border-radius:50%; background:var(--sage)}
.wn-go{color:var(--accent); font-weight:600}
.wn-list{margin-top:6px}
.wn-build{display:grid; grid-template-columns:140px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line)}
.wn-build:first-child{border-top:0; padding-top:6px}
.wn-v{font-size:22px; font-weight:600; color:var(--ink); line-height:1.1}
.wn-d{font-size:13px; color:var(--muted); margin-top:4px}
.wn-latest{display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; background:var(--accent-soft);
  color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:1px}
.wn-tf{font-size:12px; color:var(--muted); margin-top:4px}
.wn-note{color:var(--muted); font-size:15px; margin:-14px 0 22px}
.wn-items{margin:0; padding-left:18px; color:var(--body); font-size:15.5px; line-height:1.55}
.wn-items li{margin:3px 0}
.wn-items li::marker{color:var(--accent)}
.wn-more{margin:14px 0 4px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--card);
  font:inherit; font-size:14px; color:var(--ink); cursor:pointer}
.wn-more:hover{border-color:var(--accent)}
.wn-loading{color:var(--muted)}
.wn-rss{margin-top:22px; font-size:13px; color:var(--muted)}
.wn-rss a{color:var(--muted)}
@media (max-width:600px){ .wn-build{grid-template-columns:1fr; gap:6px} }