:root { --ground:#0c2421; --card:#173230; --cream:#f5eadd; --accent:#d6a266;
        --muted:#8aa09b; --body:#bcccc6; --rule:#2a4441; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--body); line-height:1.7;
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       font-size:16px; }
.wrap { max-width:720px; margin:0 auto; padding:56px 24px 96px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none;
         margin-bottom:40px; }
/* The width/height ATTRIBUTES on these images carry the same numbers. That
   is deliberate belt and braces: the sources are 900x900 and 1000x100, so a
   stylesheet that is stale, cached or slow renders a logo the width of the
   page. The attributes size them before any CSS arrives, and also stop the
   layout shifting as they load. */
.brand img.mark { width:38px; height:38px; display:block; }
.brand img.word { height:15px; display:block; }
/* The mark alone, centred and larger — for the share page, where it is the
   header rather than a byline. */
.brand.stacked { flex-direction:column; gap:14px; margin-bottom:26px; }
.brand.stacked img.mark { width:64px; height:64px; }
.brand.stacked img.word { height:17px; }
h1 { color:var(--cream); font-size:32px; line-height:1.2; margin:0 0 8px; }
h2 { color:var(--cream); font-size:19px; margin:40px 0 10px; }
.updated { color:var(--muted); font-size:14px; margin:0 0 40px; }
a { color:var(--accent); }
ul { padding-left:20px; } li { margin-bottom:8px; }
table { width:100%; border-collapse:collapse; margin:16px 0; font-size:15px; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
th { color:var(--cream); font-weight:600; }
.note { background:var(--card); border:1px solid var(--rule); border-radius:14px;
        padding:16px 18px; margin:24px 0; font-size:15px; }
footer { margin-top:64px; padding-top:24px; border-top:1px solid var(--rule);
         color:var(--muted); font-size:14px; }