/* Creature legal and support site. On-brand: near-black ground, living green, quiet. */
:root{
  --ground:#f4f6f2; --panel:#ffffff; --ink:#18211b; --ink-soft:#3d4a41;
  --muted:#697a6d; --hair:#d8e0d6; --green:#1f8a5b; --gold:#a9791f;
  --maxw:720px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#080b09; --panel:#0e120f; --ink:#dbe4dc; --ink-soft:#b3c0b5;
    --muted:#7f9084; --hair:#1d2620; --green:#5fc793; --gold:#d9b458;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 17px/1.65 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

header.top{padding:44px 0 22px; border-bottom:1px solid var(--hair)}
.brand{display:flex; align-items:center; gap:12px}
.dot{width:13px; height:13px; border-radius:50%; background:var(--green);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--green) 45%,transparent)}
.brand .name{font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:20px; letter-spacing:-.01em}
.brand .by{margin-left:auto; font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted)}

nav.pages{display:flex; gap:18px; flex-wrap:wrap; padding:16px 0; font-family:ui-monospace,Menlo,monospace; font-size:13px}
nav.pages a{color:var(--muted); text-decoration:none}
nav.pages a:hover, nav.pages a.here{color:var(--green)}

main{padding:26px 0 10px}
h1{font-size:clamp(28px,5vw,38px); line-height:1.1; margin:.2em 0 .1em; letter-spacing:-.015em; text-wrap:balance}
.updated{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--muted); margin:0 0 26px}
h2{font-size:22px; margin:1.8em 0 .4em; letter-spacing:-.01em}
h3{font-size:17px; margin:1.4em 0 .3em}
p, li{max-width:64ch}
p{margin:0 0 1em}
a{color:var(--green); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--green) 40%,transparent)}
a:hover{border-bottom-color:var(--green)}
ul{padding-left:1.1em; margin:0 0 1em}
li{margin:.35em 0}
strong{font-weight:700}

.lead{border-left:2px solid var(--green); padding:6px 0 6px 18px; margin:20px 0; color:var(--ink-soft); font-size:18px}
.vow{border-left:2px solid var(--gold); padding:10px 0 10px 18px; margin:22px 0}
.vow .tag{display:block; font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px}
.card{background:var(--panel); border:1px solid var(--hair); border-radius:12px; padding:16px 18px; margin:14px 0}
.card h3{margin-top:0}
.note{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--muted)}

footer{border-top:1px solid var(--hair); margin-top:36px; padding:26px 0 60px; color:var(--muted); font-size:14px}
footer .mono{font-size:12.5px}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:3px}