:root { --ink: #253d33; --paper: #faf4e4; --line: #9eaa91; --rust: #9f3b26; --pink: #f4d9c8; --green: #e1e8cd; --soft: #52614e; }
html { color-scheme: light; }
body { color: var(--ink); background: var(--paper); }
::selection { background: #edd079; color: var(--ink); }
a { color: var(--ink); text-decoration-color: var(--rust); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 4px; }
main:focus:not(:focus-visible) { outline: 0; }
.utility { background: var(--green); border-bottom: 1px solid var(--ink); }
.menu summary { color: var(--ink); }
.menu summary span { transition: transform 150ms ease; }
.menu[open] summary span { transform: rotate(45deg); }
.menu nav { background: var(--paper); border: 1px solid var(--ink); box-shadow: 5px 5px 0 #cad6b4; }
.menu nav a { text-decoration: none; }
.menu nav a:hover { background: var(--green); }
.mast { border-bottom: 1px solid var(--ink); }
.brand { text-decoration: none; }
.mark { border: 2px solid var(--ink); background: #df694c; box-shadow: 4px 3px 0 #c8d4b1; transform: rotate(-5deg); }
.mark::before { content: ""; position: absolute; left: .35rem; right: .35rem; top: .45rem; height: .8rem; border-block: 2px solid var(--paper); }
.tabs a { text-decoration: none; border-bottom: 3px solid transparent; }
.tabs a[aria-current] { border-color: var(--rust); }
.tabs a:hover { border-color: var(--ink); }
h1 em { color: var(--rust); }
.eyebrow, .tag, .soft { color: var(--soft); }
.btn { color: var(--paper); background: var(--ink); text-decoration: none; border: 1px solid var(--ink); box-shadow: 4px 4px 0 #cdd8b5; }
.btn:hover { background: #354f42; box-shadow: 2px 2px 0 #cdd8b5; }
.note { border: 1px solid var(--line); }
.status { background: var(--green); border-left: 4px solid var(--ink); }
.status .tag { color: var(--ink); }
.pink { background: var(--pink); }
.green { background: var(--green); }
.cream { background: #fff9ec; }
.art { background: #ebe4ce; border: 1px solid #c7c2a7; }
.art img { color: transparent; }
.art figcaption { background: #f8ecc8; border: 1px solid var(--ink); box-shadow: 3px 3px 0 #cf5d42; transform: rotate(-3deg); }
.paper { background-image: radial-gradient(#786b4933 .6px, transparent .7px); background-size: 5px 5px; }
.scrap { box-shadow: 6px 7px 0 #38402f12; }
.teal { background: #285647; transform: rotate(9deg); clip-path: polygon(0 2%, 97% 0, 100% 99%, 5% 97%); }
.rust { background: #d86343; transform: rotate(-12deg); clip-path: polygon(3% 1%, 97% 4%, 100% 97%, 0 100%); }
.lime { background: #c6d7aa; border-radius: 50% 42% 8% 45%; transform: rotate(15deg); }
.ruled { background-color: #fff8e7; background-image: repeating-linear-gradient(to bottom, transparent 0 24px, #66816859 25px 26px); background-position: 0 10px; border: 1px solid #e0d7b8; transform: rotate(-4deg); clip-path: polygon(0 2%, 99% 0, 97% 96%, 94% 98%, 86% 96%, 76% 99%, 68% 96%, 60% 98%, 50% 96%, 41% 98%, 34% 97%, 23% 99%, 15% 97%, 2% 100%); }
.clip { border: 3px double #273e32; border-radius: 1.2rem; transform: rotate(-18deg); background: transparent; }
.band { border-top: 1px solid var(--line); }
.ask { border-top: 1px dashed var(--ink); }
.call { background: #f0e6c8; border-left: 3px solid var(--rust); }
.faq article + article { border-top: 1px dashed var(--line); }
.next { background: var(--green); border: 1px solid var(--ink); box-shadow: 6px 6px 0 #efccad; }
.sources { background: #f0ead7; border: 1px solid var(--line); }
.sources a { text-decoration: none; }
.sources a:hover { text-decoration: underline; text-underline-offset: .2em; }
.sources a span { color: var(--soft); }
.foot { border-top: 1px solid var(--ink); background: #e1e8cd; }
.letter { background: #f2d1be; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--green); transform: rotate(-4deg); }
.check { border: 1px dashed var(--ink); background: #fff9ec; }
.check:hover { background: var(--green); }
.check input { accent-color: var(--ink); }
.cost-list > div { border-top: 1px solid var(--line); }
.skip { color: var(--paper); background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .menu summary span { transition: none; }
}
@media print {
  body, .note, .call, .next, .sources, .foot, .check { background: white; color: black; box-shadow: none; }
  h1 em, .eyebrow, .tag, .soft, .sources a span { color: black; }
  a { color: black; }
  .letter { background: white; box-shadow: none; transform: none; }
}