:root{--pine:#1c3a29;--pine-deep:#12281b;--moss:#3f6248;--fire:#e8622a;--ember:#a83a12;--paper:#f3ead4;--page:#f8f1df;--tan:#d9c79e;--ink:#1b211c;--faint:#57604f;--rule:#b9c6ae}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background-color:var(--pine-deep);color:var(--ink);font:400 1.09rem/1.62 "Zilla Slab",Georgia,serif;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--ember);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--pine)}
:focus-visible{outline:3px solid var(--fire);outline-offset:2px}
h1,h2,h3{line-height:1.15;color:var(--pine)}
h1{font:700 clamp(2.05rem,5.2vw,3.3rem)/1.08 "Stardos Stencil",Impact,sans-serif;margin:.2em 0 .45em;letter-spacing:.01em}
.jump{position:absolute;left:-999px;top:0;background:var(--fire);color:var(--ink);padding:.5em 1em;z-index:9}
.jump:focus{left:8px;top:8px}
.stencil{font:700 clamp(1.6rem,3.6vw,2.3rem)/1.1 "Stardos Stencil",Impact,sans-serif;margin:0 0 .3em;color:var(--pine)}

/* cloth boards */
.boards{background:var(--pine);border-bottom:6px solid var(--pine-deep);background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px)}
.boards-in{max-width:1180px;margin:auto;padding:16px 20px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 16px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.brand-name{font:700 2rem/1 "Stardos Stencil",Impact,sans-serif;letter-spacing:.03em}
.brand:hover{color:#fff}
.motto{margin:0;color:var(--tan);font-style:italic;font-size:1rem}
.contents-box{position:absolute;opacity:0;width:1px;height:1px}
.contents-btn{display:none}
.tabs{grid-column:1/-1;margin-top:10px}
.tabs ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.tabs a{display:block;padding:.42em 1em .34em;background:var(--tan);color:var(--ink);text-decoration:none;font-weight:700;border-radius:7px 7px 0 0;font-size:1rem}
.tabs a:hover{background:var(--paper)}
.tabs a[aria-current]{background:var(--fire);color:var(--ink)}

/* desk */
.desk{display:block;background:var(--pine-deep);padding:22px 16px 40px}
.stamp{display:inline-block;margin:0 0 .4em;padding:.14em .6em .06em;border:3px solid var(--ember);color:var(--ember);font:700 1.05rem/1.25 "Stardos Stencil",Impact,sans-serif;text-transform:uppercase;letter-spacing:.09em;transform:rotate(-2deg)}
.lead{font-size:1.2rem;line-height:1.5}
.small{font-size:.97rem;color:var(--faint)}
.spread{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;background:var(--page);border-radius:4px;box-shadow:0 8px 0 var(--tan),0 12px 0 #bda977,0 18px 30px rgba(0,0,0,.45);position:relative}
.spread::after{content:"";position:absolute;top:0;bottom:0;left:54.5%;width:26px;margin-left:-13px;background:linear-gradient(90deg,transparent,rgba(27,33,28,.14) 48%,rgba(27,33,28,.2) 50%,rgba(27,33,28,.14) 52%,transparent);pointer-events:none}
.page-left{padding:34px 40px 34px 36px}
.page-right{padding:34px 34px 34px 44px}
.taped{margin:1.3em 0;position:relative;padding:8px 8px 10px;background:#fffdf5;box-shadow:0 2px 7px rgba(27,33,28,.3);transform:rotate(-.5deg)}
.taped::before{content:"";position:absolute;top:-11px;left:50%;width:104px;height:24px;margin-left:-52px;background:rgba(217,199,158,.82);transform:rotate(2deg)}
.taped figcaption{font-size:.92rem;padding:7px 3px 0;color:var(--ink);line-height:1.38}
.cred,.cred a{color:var(--faint);font-size:.86rem}
.warnline{border-left:6px solid var(--fire);background:#fbe3d4;padding:.7em .9em;line-height:1.4}
.tick{border:0;border-top:2px solid var(--pine);margin:0 0 .85em;padding:.3em 0 0}
.tick legend{font-weight:700;padding:0 .5em 0 0;color:var(--pine);letter-spacing:.02em;text-transform:uppercase;font-size:.9rem}
.tick label{display:flex;gap:.55em;align-items:flex-start;padding:.2em 0;border-bottom:1px solid var(--rule);line-height:1.3;cursor:pointer}
input[type=checkbox]{appearance:none;flex:none;width:1.15em;height:1.15em;margin:.1em 0 0;border:2px solid var(--pine);background:#fffdf5;cursor:pointer;position:relative}
input[type=checkbox]:checked::after{content:"";position:absolute;left:.25em;top:-.2em;width:.4em;height:.95em;border:solid var(--ember);border-width:0 .2em .2em 0;transform:rotate(40deg)}
input[type=checkbox]:checked+span{color:var(--faint);text-decoration:line-through}

/* ledger */
.ledger{max-width:1180px;margin:38px auto 0;background:var(--paper);padding:30px 28px;border-radius:3px}
.ledger-note{margin-top:0}
.ledger-heads,.row{display:grid;grid-template-columns:44px 106px 1.45fr 1fr 1fr;gap:0 14px}
.ledger-heads{background:var(--pine);color:var(--paper);padding:.35em 10px;font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em}
.rows{list-style:none;margin:0;padding:0}
.row{padding:.72em 10px;border-bottom:1.5px solid var(--rule);line-height:1.34;align-items:baseline}
.row:hover{background:var(--page)}
.row-no{font:700 1.3rem/1 "Stardos Stencil",Impact,sans-serif;color:var(--ember)}
.row-date{font-size:.96rem;color:var(--faint)}
.row-title{font-weight:700;color:var(--pine);font-size:1.13rem}
.row-field{font-size:.95rem;color:#3c443a}
.row-field b{display:none}

/* standing orders */
.orders{max-width:1180px;margin:30px auto 0;padding:28px;border:3px double var(--tan);color:var(--paper)}
.orders .stencil{color:var(--fire)}
.orders ol{margin:.4em 0 0;padding:0;list-style:none;columns:2;column-gap:38px;counter-reset:o}
.orders li{break-inside:avoid;padding:.55em 0 .6em 2.4em;position:relative;counter-increment:o;line-height:1.4}
.orders li::before{content:counter(o);position:absolute;left:0;top:.42em;width:1.6em;height:1.6em;border:2px solid var(--fire);border-radius:50%;text-align:center;line-height:1.45;color:var(--fire);font-weight:700}
.orders a{color:#ffb48f}
.orders a:hover{color:#fff}
.slip{max-width:760px;margin:34px auto 6px;background:var(--fire);color:var(--ink);padding:20px 26px;transform:rotate(-.6deg);clip-path:polygon(0 0,100% 0,99.4% 100%,70% 98%,40% 100%,0 98%)}
.slip a{color:var(--ink);font-weight:700}
.slip-h{color:var(--ink);font-size:1.5rem;margin-bottom:.2em}
.slip p{margin-top:0;margin-bottom:.2em}

/* leaf */
.leaf{max-width:1060px;margin:0 auto;background:var(--page);padding:30px 44px 42px;border-radius:3px;box-shadow:0 6px 0 var(--tan),0 14px 26px rgba(0,0,0,.4);position:relative}
.wideleaf{max-width:1180px}
.narrowleaf{max-width:800px}
.narrowleaf h1{margin-top:.1em}
.trail{font-size:.92rem;color:var(--faint);margin-bottom:12px}
.leaf-head h1{max-width:21em}
.fields{margin:0 0 1.2em;border:2px solid var(--pine);display:grid;grid-template-columns:1fr 1fr;background:#fbf6e8}
.fields>div{padding:.4em .75em .5em;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.fields dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ember);font-weight:700}
.fields dd{margin:0;line-height:1.3;font-size:1rem}
.leaf .taped{max-width:760px}
.leaf-grid{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:44px;align-items:start}
.prose{max-width:43em}
.prose h2{font:700 1.55rem/1.2 "Stardos Stencil",Impact,sans-serif;margin:1.6em 0 .45em}
.prose h3{font-size:1.18rem;margin:1.3em 0 .25em;color:var(--moss)}
.prose li{margin-bottom:.35em}
.straight{border:3px solid var(--pine);padding:1em 1.1em .35em;margin:0 0 1.3em;position:relative;background:#fbf6e8}
.straight p{margin-top:.2em}
.tag{display:inline-block;font:700 .92rem/1.3 "Stardos Stencil",Impact,sans-serif;background:var(--pine);color:var(--paper);padding:.15em .6em;text-transform:uppercase;letter-spacing:.08em}
.alarm{background:#fbe3d4;border:3px solid var(--ember);padding:.3em 1.1em .5em;margin:1.8em 0}
.alarm h2{margin-top:.6em;color:var(--ember)}
.drawn{margin:1.4em 0;border:2px solid var(--pine);background:#f8f1df}
.drawn figcaption{font-size:.92rem;padding:.5em .8em;border-top:1px solid var(--rule);color:#3c443a;line-height:1.38}
.rulebook{border-collapse:collapse;width:100%;margin:1.3em 0;font-size:.98rem;line-height:1.36;background:#fbf6e8}
.rulebook caption{font-weight:700;text-align:left;padding:.3em 0;color:var(--pine)}
.rulebook th,.rulebook td{border:1px solid var(--rule);padding:.5em .6em;text-align:left;vertical-align:top}
.rulebook thead th{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.rulebook tbody th{font-weight:700;width:30%}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:2.5em;margin-bottom:.6em}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.05em;font:700 1.55rem/1.2 "Stardos Stencil",Impact,sans-serif;color:var(--ember)}
.packlist{margin:1.4em 0;border-top:3px solid var(--pine)}
.packlist h2{margin:.4em 0 .3em;font-size:1.3rem}
.packlist ul{list-style:none;margin:0;padding:0}
.packlist li{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0 14px;border-bottom:1px solid var(--rule);padding:.3em 0;margin:0}
.packlist label{display:flex;gap:.55em;font-weight:500;line-height:1.3;cursor:pointer}
.packlist span{font-size:.96rem;color:#3c443a;line-height:1.32}
.recipe{border:2px dashed var(--moss);padding:.2em 1.1em .5em;margin:1.4em 0;background:#fbf6e8}
.recipe h2{margin-top:.55em;color:var(--ember)}
.needs{border-bottom:1px solid var(--rule);padding-bottom:.6em}
.swap{font-size:1rem;color:#3c443a}
.checked{border-top:4px double var(--pine);margin-top:2.4em;padding-top:.3em;font-size:1rem}
.checked h2{font-size:1.25rem;margin-top:.5em}
.checked ul{padding-left:1.1em}
.margin{border-left:3px solid var(--fire);padding:2px 0 2px 16px;position:sticky;top:18px;font-size:.98rem;line-height:1.32}
.margin-title{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.84rem;color:var(--ember);margin:0 0 .5em}
.margin ul{list-style:none;margin:0;padding:0}
.margin li{margin-bottom:.8em}
.margin li span{display:block;font-size:.8rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.margin-note{font-size:.94rem;border-top:1px solid var(--rule);padding-top:.6em}

/* blog index */
.pile{display:grid;grid-template-columns:1fr;gap:0}
.slipcard{display:grid;grid-template-columns:320px minmax(0,1fr);gap:26px;padding:24px 0;border-top:2px solid var(--pine)}
.slipcard figure{margin:0}
.slipcard img{width:100%;border:6px solid #fffdf5;box-shadow:0 1px 4px rgba(27,33,28,.35)}
.slipcard figcaption{display:block;margin-top:5px;line-height:1.3}
.slipcard h2{margin:.1em 0 .3em;font:700 1.55rem/1.15 "Stardos Stencil",Impact,sans-serif}
.slipcard h2 a{color:var(--pine);text-decoration:none}
.slipcard h2 a:hover{color:var(--ember);text-decoration:underline}
.slipcard p{margin:.25em 0}
.slipcard-no{font-size:.9rem;font-weight:700;color:var(--ember);text-transform:uppercase;letter-spacing:.05em}
.slipcard-no time{color:var(--faint);font-weight:400;margin-left:.5em;text-transform:none;letter-spacing:0}
.slipcard-field{font-size:.94rem;color:#3c443a;line-height:1.35;border-left:3px solid var(--tan);padding-left:.7em;margin-top:.6em!important}
.credits{font-size:.97rem}

/* back board */
.backboard{background:var(--pine);border-top:6px solid var(--fire);color:var(--paper)}
.backboard-in{max-width:1180px;margin:auto;padding:26px 20px}
.imprint{margin:0 0 .9em;line-height:1.45;max-width:50em}
.imprint-stamp{font:700 1.2rem/1 "Stardos Stencil",Impact,sans-serif;border:2px solid var(--fire);color:var(--fire);padding:.1em .45em 0;margin-right:.5em;display:inline-block}
.footlinks{list-style:none;margin:0 0 .8em;padding:0;display:flex;flex-wrap:wrap;gap:.2em 1.3em}
.backboard a{color:#ffc8ad}
.backboard a:hover{color:#fff}
.fieldnote{margin:0;font-size:.9rem;color:var(--tan);font-style:italic}

@media (max-width:960px){
 .leaf-grid{grid-template-columns:1fr;gap:12px}
 .margin{position:static;border-left:0;border-top:3px solid var(--fire);padding:12px 0 0}
 .spread{grid-template-columns:1fr}.spread::after{display:none}
 .page-left{padding:26px 22px 8px}.page-right{padding:18px 22px 28px}
 .ledger-heads{display:none}
 .row{grid-template-columns:40px 1fr;gap:2px 10px}
 .row-no{grid-row:span 4}
 .row-date,.row-title,.row-field{grid-column:2}
 .row-field b{display:inline;color:var(--ember);margin-right:.25em;font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}
 .orders ol{columns:1}
 .slipcard{grid-template-columns:1fr;gap:12px}
 .leaf{padding:24px 18px 32px}
}
@media (max-width:640px){
 body{font-size:1.04rem}
 .desk{padding:14px 8px 26px}
 .boards-in{grid-template-columns:1fr auto;padding:12px 16px 12px}
 .motto{display:none}
 .brand-name{font-size:1.65rem}
 .crest{width:44px;height:44px}
 .contents-btn{display:block;font-weight:700;border:2px solid var(--tan);color:var(--paper);padding:.25em .7em;border-radius:4px;cursor:pointer}
 .contents-box:focus-visible+.contents-btn{outline:3px solid var(--fire);outline-offset:2px}
 .contents-box:checked+.contents-btn{background:var(--tan);color:var(--ink)}
 .tabs{display:none;margin:6px 0 0}
 .contents-box:checked~.tabs{display:block}
 .tabs ul{flex-direction:column;gap:4px}
 .tabs a{border-radius:3px}
 .fields{grid-template-columns:1fr}
 .ledger{padding:20px 14px}.orders{padding:20px 16px}
 .packlist li{grid-template-columns:1fr}
 .packlist span{padding-left:1.7em}
 .rulebook{font-size:.92rem}
 .rulebook th,.rulebook td{padding:.4em}
 .slip{padding:16px 18px}
}
@media print{.boards,.backboard,.margin,.jump{display:none}body,.desk{background:#fff}.leaf,.spread{box-shadow:none}.taped{transform:none}}

.spread,.leaf,.ledger{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.page-left{position:relative}
.page-left::after{content:"";position:absolute;right:30px;bottom:18px;width:118px;height:118px;border-radius:50%;border:5px solid rgba(120,78,30,.17);box-shadow:inset 0 0 0 2px rgba(120,78,30,.07),0 0 3px rgba(120,78,30,.14);pointer-events:none}
.howto{margin:1.2em 0 .4em;border-top:2px solid var(--pine)}
.howto div{display:grid;grid-template-columns:82px 1fr;gap:10px;padding:.28em 0;border-bottom:1px solid var(--rule);line-height:1.3}
.howto dt{font-weight:700;color:var(--ember);text-transform:uppercase;font-size:.82rem;letter-spacing:.07em;padding-top:.15em}
.howto dd{margin:0;font-size:.98rem}
@media (max-width:960px){.page-left::after{display:none}}
@media (max-width:640px){.brand{grid-column:1;grid-row:1}.contents-btn{grid-column:2;grid-row:1;align-self:center}.tabs{grid-row:2}}
