/* czo.css — Cold Paws, Warm Days
   Started by me on the kitchen table, Nov 2023. My niece fixed the grid in March.
   Colours: spruce bark, frozen river, rust from the old bear enclosure signs. */
:root{
  --czo-bark:#2b2a24;
  --czo-bark2:#3d3b32;
  --czo-spruce:#1f3b31;
  --czo-river:#7f9aa6;
  --czo-rust:#a9542c;
  --czo-bone:#f4efe4;
  --czo-paper:#fffdf7;
  --czo-line:#d9d1bf;
  --czo-mute:#6f6a5d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.czo-body{margin:0;background:var(--czo-bone);color:var(--czo-bark);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:18px;line-height:1.66}
.czo-skip{position:absolute;left:-9999px}
.czo-skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}

/* masthead — no sticky, no giant hero, just a sign over the gate */
.czo-mast{background:var(--czo-spruce);color:#f2efe6;border-bottom:6px solid var(--czo-rust)}
.czo-mast-in{max-width:1120px;margin:0 auto;padding:18px 24px 14px;display:flex;flex-wrap:wrap;gap:14px 30px;align-items:flex-end;justify-content:space-between}
.czo-wordmark{display:flex;gap:12px;align-items:center;color:#f2efe6;text-decoration:none}
.czo-paw{width:30px;height:30px;fill:var(--czo-rust);flex:0 0 auto}
.czo-wordmark-txt{display:flex;flex-direction:column;line-height:1.15}
.czo-wordmark-txt b{font-size:21px;letter-spacing:.2px}
.czo-wordmark-txt i{font-style:normal;font-size:12.5px;color:#c8d3c9;letter-spacing:.6px;text-transform:uppercase}
.czo-nav{display:flex;flex-wrap:wrap;gap:2px 18px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:13px}
.czo-nav a{color:#d7dfd5;text-decoration:none;display:inline-flex;gap:5px;align-items:baseline;padding:4px 0;border-bottom:2px solid transparent}
.czo-nav a span{font-size:10px;color:#8fa596}
.czo-nav a:hover{color:#fff;border-bottom-color:var(--czo-rust)}
.czo-nav a.czo-on{color:#fff;border-bottom-color:var(--czo-rust)}

.czo-main{max-width:1120px;margin:0 auto;padding:34px 24px 60px}
.czo-dateline{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:12px;letter-spacing:.9px;
  text-transform:uppercase;color:var(--czo-mute);margin:0 0 18px;padding-bottom:8px;border-bottom:1px solid var(--czo-line)}

h1{font-size:clamp(31px,4.4vw,50px);line-height:1.06;margin:0 0 18px;letter-spacing:-.6px;font-weight:600}
h2{font-size:26px;line-height:1.2;margin:38px 0 12px;font-weight:600}
h2::before{content:"";display:block;width:44px;height:3px;background:var(--czo-rust);margin-bottom:10px}
h3{font-size:19px;margin:24px 0 6px;font-weight:600}
p{margin:0 0 16px}
.czo-lede{font-size:21px;line-height:1.5;color:var(--czo-bark2);margin:0 0 20px;max-width:820px}
.czo-main a{color:#7a3b1c;text-decoration:none;border-bottom:1px solid rgba(122,59,28,.35)}
.czo-main a:hover{border-bottom-color:#7a3b1c}

/* two-column article with a narrow keeper's margin note */
.czo-article{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:38px;align-items:start}
.czo-side{border-top:3px solid var(--czo-spruce);padding-top:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--czo-bark2)}
.czo-side h3{font-family:inherit;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--czo-mute);margin:0 0 8px}
.czo-side p{margin:0 0 12px}
.czo-side .czo-tag{display:inline-block;background:#e9e2d2;color:#4a463a;padding:2px 8px;font-size:11px;letter-spacing:.6px;margin:0 4px 6px 0}

/* keeper quote — like something said over the fence */
.czo-quote{margin:26px 0;padding:18px 22px;background:var(--czo-paper);border-left:5px solid var(--czo-rust);
  font-size:19px;line-height:1.5;box-shadow:0 1px 0 var(--czo-line)}
.czo-quote cite{display:block;font-size:13px;font-style:normal;color:var(--czo-mute);margin-top:8px;font-family:-apple-system,Arial,sans-serif}

/* photo with a real caption, not a stock hero */
figure.czo-fig{margin:26px 0}
figure.czo-fig img{width:100%;height:auto;display:block;border:1px solid var(--czo-line);background:#e6dfd0}
figure.czo-fig figcaption{font-family:-apple-system,Arial,sans-serif;font-size:13px;color:var(--czo-mute);padding:8px 2px 0;line-height:1.5}

/* section index — numbered list, no cards */
.czo-index{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--czo-line)}
.czo-index li{border-bottom:1px solid var(--czo-line)}
.czo-index a{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:baseline;padding:14px 4px;text-decoration:none;border:0;color:var(--czo-bark)}
.czo-index a:hover{background:#efe8d8}
.czo-index .n{font-family:-apple-system,Arial,sans-serif;font-size:12px;color:var(--czo-rust)}
.czo-index .t{font-size:19px}
.czo-index .d{font-family:-apple-system,Arial,sans-serif;font-size:13px;color:var(--czo-mute);text-align:right}

.czo-note{background:#efe8d8;border:1px solid var(--czo-line);padding:14px 18px;margin:24px 0;font-size:16px}
.czo-warn{background:#fbeee6;border:1px solid #e4c3ae;padding:14px 18px;margin:24px 0;font-size:16px}

table.czo-table{width:100%;border-collapse:collapse;margin:20px 0;font-family:-apple-system,Arial,sans-serif;font-size:15px}
table.czo-table th{text-align:left;background:#e9e2d2;padding:9px 12px;font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:#4a463a}
table.czo-table td{padding:9px 12px;border-bottom:1px solid var(--czo-line);vertical-align:top}

.czo-faq details{border-bottom:1px solid var(--czo-line);padding:14px 0}
.czo-faq summary{cursor:pointer;font-size:19px;font-weight:600}
.czo-faq details p{margin:10px 0 0}

.czo-foot{background:var(--czo-bark);color:#d8d2c4;margin-top:40px;border-top:6px solid var(--czo-rust)}
.czo-foot-in{max-width:1120px;margin:0 auto;padding:30px 24px 40px}
.czo-foot-disc{font-size:14px;line-height:1.6;max-width:760px;color:#c9c3b5;margin:0 0 22px}
.czo-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;padding:18px 0;border-top:1px solid #45423a;border-bottom:1px solid #45423a}
.czo-foot-cols h4{font-family:-apple-system,Arial,sans-serif;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:#a9542c;margin:0 0 8px}
.czo-foot-cols a{display:block;color:#ded8ca;text-decoration:none;font-size:14.5px;padding:3px 0}
.czo-foot-cols a:hover{color:#fff}
.czo-copy{margin:16px 0 0;font-size:13px;color:#948e80}

@media (max-width:900px){.czo-article{grid-template-columns:1fr}.czo-side{border-top:1px solid var(--czo-line)}}
@media (max-width:620px){
  body.czo-body{font-size:17px}
  .czo-main{padding:24px 16px 44px}
  .czo-mast-in{padding:14px 16px 12px}
  h1{font-size:30px}
  .czo-index a{grid-template-columns:32px 1fr}
  .czo-index .d{display:none}
}