/* HOMESPUN — MORIverse brand kit. "Everything works great, but it all looks engineered by a hillbilly."
   Decoration is homemade and jury-rigged; function is rock solid. Rules: STYLE-HOMESPUN.md.
   Pure CSS (+ inline SVG parts from assets/homespun-parts.svg). No web fonts, no images from anywhere else. */
:root{
 --hs-paper:#F4EBDD;      /* kraft paper / page */
 --hs-plank:#E8D3A9;      /* sawdust pine */
 --hs-ink:#211810;        /* body text: 14.8:1 on paper */
 --hs-ink-2:#4A3A2A;      /* secondary text: 9.2:1 on paper */
 --hs-wood:#6B3F1C;       /* painted-wood sign: cream text 8.3:1 (6.5:1 on the lighter top, --hs-wood-2) */
 --hs-wood-2:#7E4E26;
 --hs-cream:#FFF6E0;
 --hs-tin:#DDE1E3;        /* tin sign: ink text 13.3:1 */
 --hs-tin-edge:#5C6166;
 --hs-wire:#7C8287;
 --hs-red:#9E2B25;        /* barn red: cream text 6.9:1 (6.1:1 on the lighter top) */
 --hs-denim:#2F4B6B;      /* denim: cream text 8.3:1 (7.1:1 on the lighter top); as link text on paper 7.6:1 */
 --hs-gold:#FFD76A;       /* the sparkle (decoration only) */
 --hs-focus:#0B57D0;
 --hs-font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;          /* body: real, readable */
 --hs-sign:"Rockwell","Roboto Slab","Noto Serif","Georgia",serif;                             /* hand-painted sign headings */
 --hs-hand:"Segoe Print","Bradley Hand","Chalkboard SE","Comic Neue","Noto Serif",serif;     /* short labels only */
}
.hs{background:var(--hs-paper);color:var(--hs-ink);font:400 1.25rem/1.55 var(--hs-font)}
/* hand-painted sign heading: heavy slab, a little ink spread. Static (never animated). */
.hs-title{font-family:var(--hs-sign);font-weight:800;letter-spacing:.01em;line-height:1.1;color:var(--hs-ink);text-shadow:1px 1px 0 rgba(107,63,28,.25)}
.hs-hand{font-family:var(--hs-hand);font-weight:700}
/* riveted / patched panel */
.hs-panel{position:relative;background:#FFFBF2;border:3px solid #5a4632;border-radius:6px;padding:20px;box-shadow:3px 4px 0 rgba(33,24,16,.18);
 background-image:radial-gradient(circle at 12px 12px,#8b9196 0 4px,transparent 5px),radial-gradient(circle at calc(100% - 12px) 12px,#8b9196 0 4px,transparent 5px),radial-gradient(circle at 12px calc(100% - 12px),#8b9196 0 4px,transparent 5px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#8b9196 0 4px,transparent 5px)}
.hs-patch{position:absolute;width:56px;height:40px;background:#E1C9A0;border:2px dashed #8a6a3a;border-radius:4px;transform:rotate(-6deg);opacity:.9;pointer-events:none}
/* duct-tape corners */
.hs-taped{position:relative}
.hs-taped::before,.hs-taped::after{content:"";position:absolute;width:72px;height:24px;background:repeating-linear-gradient(90deg,#c3c8cb 0 3px,#b6bbbe 3px 6px);opacity:.92;pointer-events:none;
 clip-path:polygon(0 10%,4% 0,9% 12%,14% 2%,86% 4%,91% 0,96% 14%,100% 6%,100% 92%,95% 100%,90% 86%,85% 100%,14% 96%,9% 100%,4% 88%,0 98%)}
.hs-taped::before{top:-10px;left:-18px;transform:rotate(-38deg)}.hs-taped::after{bottom:-10px;right:-18px;transform:rotate(-38deg)}
/* baling-wire border: twisted strand */
.hs-wired{border:5px solid transparent;border-radius:10px;background:linear-gradient(#FFFBF2,#FFFBF2) padding-box,repeating-linear-gradient(45deg,#6b7075 0 3px,#c9cdd0 3px 5px,#8a8f93 5px 8px) border-box}
/* hand-lettered tape label */
.hs-label{display:inline-block;font-family:var(--hs-hand);font-weight:700;font-size:1.125rem;color:var(--hs-ink);background:repeating-linear-gradient(90deg,#d4d8da 0 3px,#c7cbce 3px 6px);padding:4px 14px;transform:rotate(-1.5deg);
 clip-path:polygon(0 8%,3% 0,97% 4%,100% 0,100% 92%,97% 100%,3% 96%,0 100%)}
/* BUTTONS — obviously tappable: big, solid, labelled, with an arrow. They look painted but never move. */
.hs-btn{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:64px;padding:14px 20px;border-radius:8px;cursor:pointer;
 font:700 1.3rem/1.25 var(--hs-font);text-align:left;text-decoration:none;border:3px solid #2e1b0b;box-shadow:0 5px 0 #2e1b0b;transition:none}
.hs-btn::after{content:"➜";font-size:1.4em;line-height:1}
.hs-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #2e1b0b}
.hs-btn:focus-visible,.hs-tin:focus-visible,.hs-link:focus-visible{outline:4px solid var(--hs-focus);outline-offset:3px}
.hs-wood{color:var(--hs-cream);background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 9px),linear-gradient(var(--hs-wood-2),var(--hs-wood))}
.hs-red{color:var(--hs-cream);background:linear-gradient(#a8332c,var(--hs-red))}
.hs-denim{color:var(--hs-cream);background:linear-gradient(#36557a,var(--hs-denim))}
.hs-tinbtn{color:var(--hs-ink);background:linear-gradient(#eef0f1,var(--hs-tin));border-color:var(--hs-tin-edge);box-shadow:0 5px 0 var(--hs-tin-edge)}
.hs-btn small{display:block;font-weight:400;font-size:1.125rem}
/* tin-sign small controls (bar buttons) — still 48px+ */
.hs-tin{display:inline-flex;align-items:center;gap:8px;min-height:52px;min-width:52px;padding:8px 16px;border-radius:6px;font:700 1.15rem/1 var(--hs-font);color:var(--hs-ink);text-decoration:none;cursor:pointer;
 background:radial-gradient(circle at 8px 8px,#8b9196 0 2.5px,transparent 3px),radial-gradient(circle at calc(100% - 8px) 8px,#8b9196 0 2.5px,transparent 3px),linear-gradient(#f2f4f5,var(--hs-tin));border:2px solid var(--hs-tin-edge)}
.hs-link{color:var(--hs-denim);font-weight:600;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:48px}
/* plank strip (top bar) */
.hs-planks{background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 22px),linear-gradient(#e7d0a2,#dcc18e);border-bottom:4px solid #6b4a24}
/* hand-drawn arrow + loose screw: decorative only */
.hs-deco{pointer-events:none;color:var(--hs-red)}
.hs-loose{display:inline-block;transform:rotate(17deg)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}