@font-face{font-family:"Young Serif";src:url(fonts/young-serif-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Karla;src:url(fonts/karla-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{--sage:#E3EBDD;--leaf:#CCDAC1;--cocoa:#3B2417;--terra:#B5532F;--rust:#9A4222;--rustd:#7A3418;--frost:#F3E7D3;--line:#A9BC9B;--max:980px}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--sage);color:var(--cocoa);font:17px/1.6 Karla,system-ui,sans-serif}
h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;margin:0}
a{color:var(--rustd);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--cocoa);outline-offset:3px}
.page{max-width:var(--max);margin:auto;padding:56px 32px;border-top:1px solid var(--line)}
.page:first-of-type{border-top:0}
.cover{min-height:92vh;display:flex;flex-direction:column;justify-content:space-between;background:var(--cocoa);color:var(--sage);padding:56px 32px;max-width:none}
.cover .in{max-width:var(--max);margin:auto;width:100%}
.cover h1{font-size:clamp(44px,8vw,96px);line-height:1;margin:40px 0 16px}
.cover .meta{font-size:15px;opacity:1}
.cover svg{display:block}
.num{font:600 13px Karla,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
h2{font-size:clamp(30px,4vw,48px);line-height:1.1;margin:6px 0 20px}
h3{font-size:24px;margin:32px 0 10px}
p{max-width:60ch;margin:0 0 14px}
.lede{font-size:21px}
.small{font-size:14px}
table{border-collapse:collapse;width:100%;margin:12px 0 20px;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--rust)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:16px 0}
.box{background:var(--leaf);border:1px solid var(--line);padding:20px}
.box.light{background:#fff}
.box.dark{background:var(--cocoa);color:var(--sage);border-color:var(--cocoa)}
.do,.dont{padding:16px 18px;border-left:6px solid var(--cocoa);background:#fff}
.dont{border-left-color:var(--terra);border-left-style:dashed}
.do b,.dont b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:16px 0}
.sw div{border:1px solid var(--line);background:#fff}
.sw i{display:block;height:84px}
.sw span{display:block;padding:8px 10px;font-size:14px;line-height:1.4}
.bar{display:flex;height:34px;border:1px solid var(--cocoa);margin:10px 0 6px;max-width:560px}
.btn{display:inline-block;background:var(--terra);color:#fff;text-decoration:none;font:600 18px Karla,sans-serif;padding:14px 28px;min-height:48px;border:3px solid var(--cocoa);border-radius:999px;box-shadow:4px 4px 0 var(--cocoa)}
.btn.alt{background:var(--sage);color:var(--cocoa)}
.btn.off{opacity:.6;box-shadow:none}
.logo{font:400 34px "Young Serif",Georgia,serif;white-space:nowrap}.logo i{font-style:normal;color:var(--rust)}
.logo.rev{color:var(--sage)}.logo.rev i{color:var(--sage)}
.logo.mono{color:var(--cocoa)}.logo.mono i{color:var(--cocoa)}
.quote{background:var(--frost);border:1px solid var(--line);padding:18px 22px;max-width:460px}
.quote div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dotted var(--line)}
.opt{display:inline-block;border:2px solid var(--cocoa);border-radius:12px;padding:10px 16px;margin:4px 6px 4px 0;background:var(--sage);font-weight:600}
.opt.on{background:var(--cocoa);color:var(--sage)}
.day{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border:2px solid var(--cocoa);border-radius:10px;background:var(--sage);font-weight:600;line-height:1.1;margin:4px}
.day small{font-size:10px;letter-spacing:.04em;text-transform:uppercase;min-height:11px}
.day.few{border-style:dashed}.day.full{background:repeating-linear-gradient(135deg,var(--leaf) 0 6px,var(--sage) 6px 12px)}.day.sel{background:var(--cocoa);color:var(--sage)}
.field{display:grid;gap:6px;max-width:320px;font-weight:600}
.field span.i{font-weight:400;border:2px solid var(--cocoa);border-radius:6px;background:#fff;padding:12px;min-height:48px}
.notice{border-left:4px solid var(--rust);background:var(--leaf);padding:12px 14px;max-width:460px}
.mis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mis div{border:1px solid var(--line);background:#fff;padding:14px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;overflow:hidden}
.mis small{display:block;font-size:13px}
.card{width:350px;height:200px;border:1px solid var(--cocoa);padding:22px;display:flex;flex-direction:column;justify-content:space-between;max-width:100%}
.seal{width:150px;height:150px;border-radius:50%;background:var(--cocoa);color:var(--sage);display:grid;place-items:center;font:400 40px "Young Serif",serif;border:6px double var(--sage);outline:3px solid var(--cocoa)}
.sheet{background:#fff;border:1px solid var(--line);padding:28px;max-width:520px}
.avatar{width:120px;height:120px;border-radius:50%;background:var(--cocoa);display:grid;place-items:center}
.sig{border-top:3px solid var(--terra);padding-top:10px;font-size:15px;max-width:340px}
.toc{columns:2;column-gap:40px;padding-left:20px}.toc li{margin:4px 0;break-inside:avoid}
code{background:var(--leaf);padding:1px 6px;border-radius:4px;font-size:.9em}
@media print{
 @page{size:Letter;margin:.55in}
 body{background:var(--sage);-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:12pt}
 .page{break-before:page;padding:0;border:0;max-width:none}
 .page.cover{break-before:auto;min-height:9.6in;padding:.5in}
 .box,.do,.dont,.sw div,.mis,.mis div,table,.sheet,.card,.quote,.notice,.field,.sig,.bar,.sw{break-inside:avoid}
 h2,h3{break-after:avoid}
 body{font-size:10.5pt;line-height:1.5}
 .lede{font-size:13pt}
 h2{font-size:28pt;margin-bottom:12px}
 h3{font-size:15pt;margin:16px 0 6px}
 p{margin-bottom:9px}
 .grid{gap:12px;margin:10px 0}
 .box{padding:14px}
 .sw i{height:60px}
 table{margin:8px 0 12px;font-size:9.5pt}
 th,td{padding:6px 8px}
 .page.cover h1{font-size:44pt;max-width:4.6in}
 .btn{box-shadow:4px 4px 0 var(--cocoa)}
}
ul{max-width:60ch}.toc{max-width:none}td p{max-width:none}
.cover .meta{max-width:60ch}

.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--cocoa);color:var(--sage,#E3EBDD);padding:12px 18px;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none}
.skip:focus{top:0;outline:3px solid #9A4222;outline-offset:2px}

.cover{position:relative}
.cover-img{position:absolute;right:32px;top:56px;width:min(30%,300px);height:auto;border:6px solid var(--sage)}
@media(max-width:760px){.cover-img{position:static;width:58%;margin-bottom:20px}}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:14px 0}
.gal.small4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.gal figure{margin:0;background:#fff;border:1px solid var(--line)}
.gal img{display:block;width:100%;height:auto}
.gal figcaption{padding:8px 10px;font-size:14px}
.post{background:#fff;border:1px solid var(--line);max-width:340px}.post.wide{max-width:460px}
.post img{display:block;width:100%;height:auto}.post p{padding:10px 14px;margin:0;font-size:15px}
@media print{.gal figure,.post{break-inside:avoid}.cover-img{width:2in;right:.5in;top:.55in}.gal img{max-height:2.2in;object-fit:cover}}
/* Focus: one clear ring on everything you can tab to (rust on sage 5.4:1, sage on cocoa 11.9:1) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #9A4222;outline-offset:3px}
.site-footer a:focus-visible,.cover a:focus-visible,.cover button:focus-visible{outline-color:#E3EBDD}
@media print{.cover .in{margin-left:0;margin-right:auto}}

/* ---- screen only: 3D depth for the web version. The PDF uses print rules and never sees this. ---- */
@media screen and (prefers-reduced-motion:no-preference){
.js3d .page{opacity:0;transform:perspective(1400px) rotateX(14deg) translateY(50px) translateZ(-80px);transform-origin:50% 0;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.15,1)}
.js3d .page.in{opacity:1;transform:none}
.js3d .sw div,.js3d .box,.js3d .mis div,.js3d .do,.js3d .dont,.js3d .card{opacity:0;transform:perspective(900px) rotateY(-24deg) translateX(-30px) translateZ(-60px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.15,1)}
.js3d .in .sw div,.js3d .in .box,.js3d .in .mis div,.js3d .in .do,.js3d .in .dont,.js3d .in .card{opacity:1;transform:none}
.js3d .in .sw div:nth-child(2),.js3d .in .box:nth-child(2),.js3d .in .mis div:nth-child(2),.js3d .in .dont{transition-delay:.12s}
.js3d .in .sw div:nth-child(3),.js3d .in .box:nth-child(3),.js3d .in .mis div:nth-child(3){transition-delay:.24s}
.js3d .in .sw div:nth-child(4),.js3d .in .box:nth-child(4),.js3d .in .mis div:nth-child(4){transition-delay:.36s}
.js3d .in .sw div:nth-child(n+5),.js3d .in .mis div:nth-child(n+5){transition-delay:.48s}
.js3d .num{text-shadow:3px 3px 0 var(--line)}
.js3d .page h2{text-shadow:3px 3px 0 var(--line)}
html.js3d,html.js3d body{overflow-x:clip}
.js3d .sw div.tilting,.js3d .box.tilting,.js3d .mis div.tilting,.js3d .do.tilting,.js3d .dont.tilting,.js3d .card.tilting{transition:transform .12s ease-out;box-shadow:10px 12px 0 rgba(59,36,23,.35);z-index:2;position:relative}
}
@media print{.js3d .page,.js3d .sw div,.js3d .box,.js3d .mis div,.js3d .do,.js3d .dont,.js3d .card{opacity:1!important;transform:none!important;text-shadow:none!important}.js3d .num,.js3d .page h2{text-shadow:none!important}}