:root{
  --paper:#EFEAD9; --paper-2:#E6E0CC; --card:#FBF8F3; --ink:#241F18; --ink-soft:#5B5344;
  --pine:#26433A; --pine-light:#3E5C50; --paprika:#B85C2E; --paprika-dark:#9A4A22;
  --amber:#D9A441; --brick:#A93226; --sage:#5C7A5E; --line:#DAD2BC;
  --shadow: 0 2px 0 rgba(36,31,24,0.06), 0 8px 24px rgba(36,31,24,0.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.55;}
img{max-width:100%}
a{color:inherit; text-decoration:none}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.02em}
.display{font-family:'Fraunces',serif}
body{
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 200 200"><g fill="%23B85C2E"><ellipse cx="100" cy="120" rx="34" ry="28"/><ellipse cx="60" cy="70" rx="15" ry="19"/><ellipse cx="95" cy="52" rx="15" ry="19"/><ellipse cx="132" cy="58" rx="14" ry="18"/><ellipse cx="150" cy="90" rx="13" ry="17"/></g></svg>') 6 6, auto;
}
input, textarea{ cursor:text; }
button, .case-card, .entry-card, .symptom-pill, .filter-chip, .result-item, .back-link, .guide-avatar, nav.main a, .wordmark{
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 200 200"><g fill="%2326433A"><ellipse cx="100" cy="120" rx="34" ry="28"/><ellipse cx="60" cy="70" rx="15" ry="19"/><ellipse cx="95" cy="52" rx="15" ry="19"/><ellipse cx="132" cy="58" rx="14" ry="18"/><ellipse cx="150" cy="90" rx="13" ry="17"/></g></svg>') 8 8, pointer;
}
header.site{position:sticky; top:0; z-index:50; background:var(--pine); color:#F3EFE1; border-bottom:3px solid var(--paprika);}
.header-inner{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.wordmark{display:flex; align-items:baseline; gap:10px;}
.wordmark .mark{font-family:'Fraunces',serif; font-weight:700; font-size:22px;}
.wordmark .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#C9BFA0; letter-spacing:.06em;}
.paw-icon{display:inline-block; width:16px; height:16px; vertical-align:-2px; transition:transform .3s ease}
.wordmark:hover .paw-icon{transform:rotate(-18deg) scale(1.15)}
nav.main{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
nav.main a{background:transparent; border:1px solid transparent; color:#EFE9D8; font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.04em; padding:8px 12px; border-radius:8px; text-transform:uppercase; transition:all .15s ease; display:inline-block;}
nav.main a:hover{border-color:rgba(239,233,216,.35)}
nav.main a.active{background:var(--paprika); color:#fff}
main{max-width:1180px; margin:0 auto; padding:0 24px 80px; position:relative; z-index:1}
footer.site{border-top:1px solid var(--line); margin-top:60px; padding:34px 24px 50px; color:var(--ink-soft); font-size:13.5px;}
footer.site .footer-inner{max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}
.hero{padding:64px 0 40px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative;}
.hero::before{content:""; position:absolute; top:-20px; right:-40px; width:340px; height:340px; z-index:0; pointer-events:none; opacity:.10;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><g fill="%2326433A"><ellipse cx="100" cy="120" rx="34" ry="28"/><ellipse cx="60" cy="70" rx="15" ry="19"/><ellipse cx="95" cy="52" rx="15" ry="19"/><ellipse cx="132" cy="58" rx="14" ry="18"/><ellipse cx="150" cy="90" rx="13" ry="17"/></g></svg>');
  background-repeat:no-repeat; background-size:contain;}
.hero > *{position:relative; z-index:1}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; color:var(--paprika-dark); text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.hero .eyebrow::before{content:""; width:22px; height:1px; background:var(--paprika-dark); display:inline-block}
.hero h1{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(34px,4.6vw,54px); line-height:1.06; margin:0 0 20px; letter-spacing:-.01em;}
.hero h1 em{font-style:italic; color:var(--paprika); font-weight:500}
.hero p.lede{font-size:17px; color:var(--ink-soft); max-width:52ch; margin:0 0 28px}
.search-box{display:flex; border:2px solid var(--ink); border-radius:22px; overflow:hidden; background:var(--card); max-width:520px; box-shadow:var(--shadow);}
.search-box input{flex:1; border:none; background:transparent; padding:14px 16px; font-size:15px; outline:none;}
.search-box button{border:none; background:var(--paprika); color:#fff; padding:0 20px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;}
.search-box button:hover{background:var(--paprika-dark)}
.hero-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); position:relative;}
.hero-card .stamp{position:absolute; top:16px; right:16px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--sage); border:1px solid var(--sage); padding:3px 8px; border-radius:20px; letter-spacing:.05em;}
.hero-card h3{font-family:'Fraunces',serif; font-size:19px; margin:0 0 6px}
.hero-card p{color:var(--ink-soft); font-size:14px; margin:0 0 18px}
.cat-photo-frame{width:100%; aspect-ratio:4/5; border-radius:14px; margin-bottom:18px; overflow:hidden; border:2px dashed var(--line);}
.cat-photo-frame img{width:100%; height:100%; object-fit:cover; display:block}
.stat-row{display:flex; gap:22px; margin-top:14px}
.stat .num{font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:var(--pine); line-height:1}
.stat .label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:4px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:56px 0 22px; gap:16px; flex-wrap:wrap}
.section-head h2{font-family:'Fraunces',serif; font-size:26px; margin:0; font-weight:600}
.section-head .sub{color:var(--ink-soft); font-size:14px}
.entry-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.entry-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; transition:transform .18s cubic-bezier(.34,1.56,.64,1); box-shadow:var(--shadow); display:block;}
.entry-card:hover{transform:translateY(-4px) rotate(0.6deg)}
.entry-card .num{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paprika); letter-spacing:.06em}
.entry-card h3{font-family:'Fraunces',serif; font-size:20px; margin:10px 0 8px}
.entry-card p{color:var(--ink-soft); font-size:14px; margin:0}
.file-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px}
.case-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 20px 20px 26px; display:block; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease; box-shadow: 0 1px 0 rgba(36,31,24,0.05);}
.case-card:hover{transform:translateY(-4px) rotate(-0.4deg); box-shadow:var(--shadow); border-color:var(--paprika)}
.case-card .tab{position:absolute; left:0; top:0; bottom:0; width:8px; border-radius:14px 0 0 14px;}
.tab.emergency{background:var(--brick)} .tab.monitor{background:var(--amber)} .tab.routine{background:var(--sage)}
.case-card .filenum{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); letter-spacing:.04em}
.case-card h3{font-family:'Fraunces',serif; font-size:17.5px; margin:8px 0 8px; line-height:1.25; color:var(--ink)}
.case-card p{font-size:13px; color:var(--ink-soft); margin:0 0 14px; min-height:36px}
.chip-row{display:flex; gap:6px; flex-wrap:wrap}
.chip{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:20px; border:1px solid var(--line); color:var(--ink-soft);}
.chip.urgency-emergency{border-color:var(--brick); color:var(--brick)}
.chip.urgency-monitor{border-color:var(--amber); color:#8a6416}
.chip.urgency-routine{border-color:var(--sage); color:var(--sage)}
.lib-search{display:flex; border:2px solid var(--ink); border-radius:22px; overflow:hidden; background:var(--card); max-width:460px; margin-bottom:16px;}
.lib-search input{flex:1; border:none; background:transparent; padding:11px 14px; font-size:14px; outline:none}
.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.filter-chip{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; padding:7px 13px; border-radius:20px; border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink-soft); transition:all .12s ease;}
.filter-chip.active{background:var(--pine); color:#F3EFE1; border-color:var(--pine)}
.result-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); margin-bottom:14px}
.back-link{display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); margin:20px 0 4px; text-transform:uppercase; letter-spacing:.04em;}
.back-link:hover{color:var(--paprika)}
.file-header{position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 32px 28px 40px; margin:18px 0 30px; box-shadow:var(--shadow);}
.file-header .tab{position:absolute; left:0; top:0; bottom:0; width:12px; border-radius:16px 0 0 16px}
.file-header .filenum{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); letter-spacing:.05em; margin-bottom:10px}
.file-header h1{font-family:'Fraunces',serif; font-size:clamp(28px,3.4vw,40px); font-weight:600; margin:0 0 16px; line-height:1.1}
.article-prose{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:40px; box-shadow:var(--shadow);}
.article-prose h2{font-family:'Fraunces',serif; font-size:22px; margin:36px 0 14px; padding-top:20px; border-top:1px solid var(--line); color:var(--pine);}
.article-prose h2:first-child{margin-top:0; padding-top:0; border-top:none}
.article-prose p{margin:0 0 14px; color:var(--ink)}
.article-prose ul,.article-prose ol{margin:0 0 14px; padding-left:22px}
.article-prose li{margin-bottom:6px}
.article-prose strong{color:var(--pine)}
.article-prose em{color:var(--ink-soft)}
.article-prose hr{border:none; border-top:1px solid var(--line); margin:24px 0}
.rescuer-note{background:#F4EEDD; border:1px dashed var(--paprika); border-radius:10px; padding:18px 20px; margin:18px 0; font-family:'Fraunces',serif; font-style:italic; color:var(--ink-soft);}
.important-note{background:#FBEDEA; border-left:4px solid var(--brick); padding:14px 18px; border-radius:2px; margin-top:26px; font-size:13.5px; color:#6b2018;}
.companion-strip{display:flex; gap:10px; align-items:center; margin:16px 0 6px; flex-wrap:wrap}
.companion-chip{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:5px 12px 5px 5px;}
.companion-chip img{width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--paprika);}
.companion-chip span{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft)}
.story-section{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 36px; margin-top:22px; box-shadow:var(--shadow);}
.story-section h2{font-family:'Fraunces',serif; font-size:20px; margin:0 0 6px; color:var(--pine)}
.story-section .hint{font-size:13px; color:var(--ink-soft); margin-bottom:16px}
.story-cta{display:inline-block; background:var(--pine); color:#F3EFE1; padding:11px 20px; border-radius:22px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase;}
.story-cta:hover{background:var(--pine-light)}
.quiz-intro{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 30px; margin:20px 0 30px; box-shadow:var(--shadow);}
.quiz-intro p{margin:0; color:var(--ink-soft); font-size:14.5px}
.quiz-intro strong{color:var(--ink)}
.symptom-group{margin-bottom:28px}
.symptom-group h3{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--paprika-dark); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.symptom-options{display:flex; flex-wrap:wrap; gap:9px}
.symptom-pill{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid var(--line); border-radius:20px; background:var(--card); font-size:13.5px; transition:all .12s ease; user-select:none;}
.symptom-pill.selected{background:var(--pine); color:#F3EFE1; border-color:var(--pine)}
.quiz-actions{margin:30px 0; display:flex; gap:12px; align-items:center}
.btn-primary{background:var(--paprika); color:#fff; border:none; padding:13px 26px; border-radius:22px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.04em; text-transform:uppercase;}
.btn-primary:hover{background:var(--paprika-dark)}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink-soft); padding:13px 20px; border-radius:22px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.03em; text-transform:uppercase;}
.selected-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft)}
.emergency-banner{background:var(--brick); color:#fff; padding:18px 22px; border-radius:14px; margin-bottom:24px; font-size:14.5px; display:flex; gap:14px; align-items:flex-start;}
.emergency-banner strong{display:block; font-family:'Fraunces',serif; font-size:17px; margin-bottom:4px}
.result-item{display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin-bottom:12px; transition:transform .12s ease;}
.result-item:hover{transform:translateX(3px); border-color:var(--pine)}
.result-item h4{font-family:'Fraunces',serif; font-size:17px; margin:0 0 4px}
.result-item .match{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--sage)}
.result-item .arrow{font-size:20px; color:var(--paprika)}
.guide-widget{position:fixed; bottom:22px; right:22px; z-index:100; display:flex; align-items:flex-end;}
.guide-bubble{background:var(--card); border:2px solid var(--pine); border-radius:18px 18px 4px 18px; padding:14px 18px; max-width:250px; margin-right:14px; margin-bottom:8px; box-shadow:var(--shadow); font-size:13.5px; line-height:1.45; opacity:0; transform:translateY(10px) scale(.95); transition:opacity .25s ease, transform .25s ease; pointer-events:none;}
.guide-bubble.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.guide-bubble .who{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--paprika-dark); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; display:flex; justify-content:space-between; align-items:center}
.guide-bubble .close-x{cursor:pointer; color:var(--ink-soft); font-weight:700; padding:0 2px}
@keyframes gentle-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.guide-avatar{width:62px; height:62px; border-radius:50%; object-fit:cover; border:3px solid var(--paprika); box-shadow:var(--shadow); display:block; animation:gentle-bob 3.2s ease-in-out infinite; background:var(--card);}
.guide-avatar:hover{animation-play-state:paused; transform:scale(1.06)}
.guide-roster-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.guide-roster-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; display:block; transition:transform .15s ease;}
.guide-roster-card:hover{transform:translateY(-3px)}
.guide-roster-card img{width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid var(--paprika); margin-bottom:8px;}
.guide-roster-card .gname{font-family:'Fraunces',serif; font-size:14.5px; color:var(--ink)}
.guide-roster-card .grole{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); text-transform:uppercase; margin-top:2px}
.empty-state{padding:60px 20px; text-align:center; color:var(--ink-soft)}
.empty-state h3{font-family:'Fraunces',serif; color:var(--ink); margin-bottom:8px}
@media (max-width: 860px){
  .hero{grid-template-columns:1fr; padding-top:36px}
  .entry-grid{grid-template-columns:1fr}
  nav.main{gap:2px}
}