/* Feline Trichomonosis resource — shared design system
   Themes: editorial | clinical | reference  (body[data-theme]) */
/* ─────────────────────────────────────────────
     DESIGN PROTOTYPE — three directions, one dial.
     Toggle the theme buttons top-right to compare.
     ───────────────────────────────────────────── */

  *{box-sizing:border-box;margin:0;padding:0}

  :root{
    --paper:#FAF6F0;
    --paper-2:#F2EBE1;
    --ink:#221E1A;
    --ink-soft:#5C534A;
    --ink-faint:#6E6359;
    --accent:#A84B2F;
    --accent-ink:#FFFFFF;
    --secondary:#2F4B43;
    --rule:#E2D8CB;
    --card:#FFFFFF;
    --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --body:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    --display-weight:400;
    --display-tracking:-0.015em;
    --radius:3px;
    --shadow:0 1px 2px rgba(34,30,26,.05),0 8px 24px -12px rgba(34,30,26,.18);
  }

  body[data-theme="clinical"]{
    --paper:#F6F8F7;
    --paper-2:#E8EEEB;
    --ink:#18211E;
    --ink-soft:#4E5C57;
    --ink-faint:#64706B;
    --accent:#1F5C4A;
    --accent-ink:#FFFFFF;
    --secondary:#7C5D33;
    --rule:#D3DEDA;
    --card:#FFFFFF;
    --display:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    --body:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    --display-weight:700;
    --display-tracking:-0.03em;
    --radius:2px;
    --shadow:0 1px 2px rgba(24,33,30,.05),0 8px 24px -14px rgba(24,33,30,.22);
  }

  body[data-theme="reference"]{
    --paper:#FBF9F5;
    --paper-2:#F1ECE4;
    --ink:#2A2723;
    --ink-soft:#5E574E;
    --ink-faint:#6F695F;
    --accent:#4A3F6B;
    --accent-ink:#FFFFFF;
    --secondary:#8A5E3B;
    --rule:#E5DED3;
    --card:#FFFFFF;
    --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --display-weight:400;
    --display-tracking:-0.01em;
    --radius:0px;
    --shadow:none;
  }

  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:16.5px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease,color .25s ease;
  }

  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}

  /* Default link colour: the site accent, never the browser's blue.
     Zero specificity, so every component rule still wins. */
  :where(a){color:var(--accent)}
  :where(a:visited){color:var(--accent)}

  /* ── prototype banner ── */
  .proto{
    background:var(--ink);color:var(--paper);
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:600;
  }
  .proto .wrap{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap;
  }
  .themes{display:flex;gap:6px}
  .themes button{
    font:inherit;font-size:11px;letter-spacing:.04em;text-transform:none;
    background:transparent;color:var(--paper);opacity:.78;
    border:1px solid rgba(255,255,255,.5);border-radius:100px;
    padding:5px 12px;cursor:pointer;transition:.15s;
  }
  .themes button:hover{opacity:.85}
  .themes button[aria-pressed="true"]{opacity:1;background:var(--paper);color:var(--ink);border-color:var(--paper)}

  /* ── masthead ── */
  header.site{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:5}
  header.site .wrap{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
  .mark{
    width:30px;height:30px;flex:0 0 30px;border-radius:50%;
    background:var(--accent);
    display:grid;place-items:center;color:var(--accent-ink);
    font-family:var(--display);font-weight:700;font-size:14px;
    letter-spacing:-.02em;
  }
  .brand .logo{
    width:48px;height:48px;flex:0 0 48px;display:block;
    image-rendering:auto;
  }
  .brand-name{
    font-family:var(--display);font-weight:var(--display-weight);
    font-size:18px;letter-spacing:var(--display-tracking);line-height:1.15;
    display:block;
  }
  .brand-sub{
    display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:600;margin-top:2px;
  }
  nav.site{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .navtoggle{display:none}
  nav.site a{
    color:var(--ink-soft);text-decoration:none;font-size:12.5px;
    border-bottom:1px solid transparent;padding-bottom:2px;
  }
  nav.site a:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .head-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .search{
    display:flex;align-items:center;gap:7px;
    border:1px solid var(--rule);background:var(--card);
    border-radius:100px;padding:7px 13px;
    transition:border-color .15s;
  }
  .search:focus-within{border-color:var(--accent)}
  .search input{
    font:inherit;font-size:13px;background:none;border:0;outline:0;
    color:var(--ink);width:92px;
  }
  .search input::placeholder{color:var(--ink-faint)}
  .search svg{flex:0 0 13px;opacity:.55;color:var(--ink-soft)}
  .trust{
    display:inline-flex;align-items:center;gap:7px;
    font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    font-weight:650;color:var(--ink-soft);
    border:1px solid var(--rule);border-radius:100px;padding:6px 12px;
    white-space:nowrap;
  }
  .trust .dot{background:var(--accent);width:5px;height:5px}

  /* ── hero ── */
  .hero{
    padding:0 0 58px;
    background:
      radial-gradient(1100px 380px at 12% -12%, var(--paper-2), transparent 72%);
    border-bottom:1px solid var(--rule);
  }
  /* the header photograph spans the page and dissolves into it from the bottom third */
  .hero-banner{
    position:relative;margin:0;padding:0;
    height:clamp(360px,46vw,640px);
    overflow:hidden;background:var(--paper-2);
  }
  .hero-banner img{
    display:block;width:100%;height:100%;
    object-fit:cover;object-position:center 9%;
  }
  .hero-banner::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,
      transparent 0 52.5%,
      color-mix(in srgb, var(--paper) 38%, transparent) 67%,
      color-mix(in srgb, var(--paper) 78%, transparent) 81%,
      color-mix(in srgb, var(--paper) 96%, transparent) 91%,
      var(--paper) 100%);
  }
  .hero-credit{
    position:absolute;right:20px;top:16px;margin:0;
    max-width:min(360px,72%);
    font-size:11px;line-height:1.4;letter-spacing:.02em;color:#fff;
    background:rgba(18,26,23,.35);
    text-shadow:0 1px 3px rgba(0,0,0,.45);
    padding:5px 9px;border-radius:2px;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  }
  .hero .wrap{position:relative;z-index:2}
  /* the species line now sits inside the fade, so it carries a deeper tone than elsewhere */
  .hero .eyebrow{color:#5E4526}
  .hero-grid{
    display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    gap:66px;align-items:start;
    margin-top:clamp(-150px,-11vw,-62px);
  }
  .eyebrow{
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    font-family:var(--display);font-style:italic;
    font-size:14.5px;letter-spacing:0;
    color:var(--secondary);font-weight:400;margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";width:22px;height:1px;background:var(--secondary);
    display:block;align-self:center;flex:0 0 22px;
  }
  h1{
    font-family:var(--display);font-weight:var(--display-weight);
    font-size:clamp(2rem,4.3vw,3.3rem);
    line-height:1.09;letter-spacing:var(--display-tracking);
    max-width:26ch;text-wrap:balance;
  }
  h1 em{font-style:italic;color:var(--accent)}
  .br-wide{display:none}
  @media (min-width:780px){.br-wide{display:inline}}

  /* quick-reference panel */
  .quick{
    background:var(--card);border:1px solid var(--rule);
    border-radius:var(--radius);
    padding:26px 24px;
  }
  .quick h2{
    font-family:var(--body);font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--accent);font-weight:700;
    margin-bottom:16px;line-height:1.3;
  }
  .quick dl{display:grid;gap:13px}
  .quick dl + dl{margin-top:15px;padding-top:15px;border-top:1px solid var(--rule)}
  .quick dt{
    font-size:11px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-faint);font-weight:650;margin-bottom:2px;
  }
  .quick dd{font-size:14px;color:var(--ink-soft);line-height:1.45}
  .quick dd i{color:var(--ink);font-style:italic}
  .qstake{
    margin-top:15px;padding:13px 15px;
    border-left:2px solid var(--accent);background:var(--paper-2);
    font-size:14px;color:var(--ink-soft);line-height:1.45;
  }
  .qstake b{
    display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--accent);font-weight:700;margin-bottom:4px;
  }
  .lede{
    margin-top:26px;max-width:54ch;font-size:clamp(1.02rem,1.7vw,1.2rem);
    color:var(--ink-soft);line-height:1.66;
  }
  .lede strong{color:var(--ink);font-weight:650}
  .cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    padding:13px 22px;border-radius:var(--radius);
    font-size:14.5px;font-weight:600;text-decoration:none;
    border:1px solid transparent;cursor:pointer;font-family:inherit;
    transition:.16s ease;
  }
  .btn-primary{background:var(--accent);color:var(--accent-ink)}
  .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
  .btn-ghost:hover{border-color:var(--ink-soft);background:var(--card)}

  .verify{
    margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);
    display:flex;gap:26px;flex-wrap:wrap;
    font-size:12.5px;color:var(--ink-faint);
  }
  .verify span{display:inline-flex;align-items:center;gap:7px}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--secondary);display:inline-block}
  .dot.warn{background:var(--accent)}

  /* ── sections ── */
  section{padding:64px 0}
  section + section{border-top:1px solid var(--rule)}
  .sec-head{margin-bottom:34px;max-width:64ch}
  h2{
    font-family:var(--display);font-weight:var(--display-weight);
    font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;
    letter-spacing:var(--display-tracking);
  }
  .sec-head p{margin-top:13px;color:var(--ink-soft);font-size:15.5px;max-width:62ch}

  /* ── audience cards ── */
  .aud{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .aud-card{
    background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
    padding:26px 24px 24px;text-decoration:none;color:inherit;
    box-shadow:var(--shadow);display:flex;flex-direction:column;
    transition:.16s ease;position:relative;
  }
  .aud-card:hover{transform:translateY(-2px);border-color:var(--accent)}
  .aud-card .kicker{
    font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);font-weight:700;margin-bottom:11px;
  }
  .aud-card h3{
    font-family:var(--display);font-weight:var(--display-weight);
    font-size:19px;line-height:1.28;margin-bottom:10px;letter-spacing:var(--display-tracking);
  }
  .aud-card p{font-size:14px;color:var(--ink-soft);line-height:1.58;flex:1}
  .aud-card .go{
    margin-top:18px;font-size:13px;font-weight:650;color:var(--accent);
    display:inline-flex;align-items:center;gap:6px;
  }
  .aud-card .go::after{content:"→";transition:transform .16s}
  .aud-card:hover .go::after{transform:translateX(3px)}

  /* ── naming callout ── */
  .namebox{
    background:var(--paper-2);
    border-left:3px solid var(--accent);
    padding:28px 30px;border-radius:0 var(--radius) var(--radius) 0;
  }
  .namebox .label{
    font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--accent);font-weight:700;margin-bottom:12px;
  }
  .namebox p{font-size:15.5px;color:var(--ink-soft);max-width:66ch}
  .namebox p + p{margin-top:12px}
  .namebox code{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.9em;background:var(--card);padding:1px 6px;
    border:1px solid var(--rule);border-radius:2px;color:var(--ink);
    font-style:italic;
  }

  /* ── stats ── */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .stat{
    background:var(--card);border:1px solid var(--rule);
    border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow);
  }
  .stat .n{
    font-family:var(--display);font-weight:var(--display-weight);
    font-size:clamp(1.85rem,3.6vw,2.5rem);line-height:1;
    letter-spacing:-.02em;color:var(--accent);
  }
  .stat .l{
    margin-top:10px;font-size:13px;color:var(--ink-soft);line-height:1.45;
  }
  .stat .src{
    margin-top:9px;font-size:11px;color:var(--ink-faint);
    border-top:1px solid var(--rule);padding-top:8px;
  }

  /* ── timeline / what changed ── */
  .tl{list-style:none;position:relative;margin-top:6px}
  .tl::before{
    content:"";position:absolute;left:74px;top:8px;bottom:8px;
    width:1px;background:var(--rule);
  }
  .tl li{
    display:grid;grid-template-columns:74px 1fr;gap:26px;
    padding:15px 0;position:relative;
  }
  .tl .yr{
    font-family:var(--display);font-size:14.5px;font-weight:650;
    color:var(--ink-faint);text-align:right;padding-top:2px;
    font-variant-numeric:tabular-nums;
  }
  .tl .body{position:relative;padding-left:22px}
  .tl .body::before{
    content:"";position:absolute;left:-4px;top:8px;
    width:7px;height:7px;border-radius:50%;
    background:var(--paper);border:1.5px solid var(--ink-faint);
  }
  .tl li.now .body::before{background:var(--accent);border-color:var(--accent)}
  .tl li.now .yr{color:var(--accent);font-weight:700}
  .tl .dose{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:13.5px;color:var(--ink);font-weight:600;
  }
  .tl .note{font-size:13.5px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
  .tl .flag{
    display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:var(--accent);border:1px solid var(--accent);
    border-radius:2px;padding:1px 6px;margin-left:8px;vertical-align:1px;
  }
  .tl .flag.dim{color:var(--ink-faint);border-color:var(--rule)}

  /* ── pull quote / credit ── */
  .credit{
    display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;
  }
  blockquote{
    font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.55rem);
    line-height:1.44;letter-spacing:var(--display-tracking);
    color:var(--ink);border-left:2px solid var(--accent);padding-left:26px;
  }
  blockquote footer{
    margin-top:16px;font-family:var(--body);font-size:13px;
    color:var(--ink-faint);letter-spacing:.01em;line-height:1.5;
  }
  .who{
    background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
    padding:24px;box-shadow:var(--shadow);
  }
  .who h4{
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);font-weight:700;margin-bottom:12px;
  }
  .who p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
  .who p + p{margin-top:10px}
  .who .facts{
    margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
    font-size:12.5px;color:var(--ink-faint);line-height:1.65;
  }

  /* ── footer ── */

  .disc{
    font-size:12.5px;color:var(--ink-soft);max-width:74ch;line-height:1.65;
    padding:16px 18px;border:1px solid var(--rule);background:var(--card);
    border-radius:var(--radius);
  }
  .disc strong{color:var(--ink)}


  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:36px;margin-top:-96px}
    .hero-banner{height:clamp(240px,46vw,380px)}
    .quick{order:2}
  }
  @media (max-width:820px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .credit{grid-template-columns:1fr;gap:26px}
    .hero{padding:52px 0 44px}
    .wrap{padding:0 20px}
    header.site .wrap{padding-top:14px;padding-bottom:14px;gap:12px}

    /* the menu button sits at the right of the masthead */
    .navtoggle{
      display:inline-flex;align-items:center;gap:9px;margin-left:auto;
      background:transparent;border:1px solid var(--rule);border-radius:2px;
      padding:9px 12px 9px 11px;font-family:inherit;font-size:12px;
      letter-spacing:.09em;text-transform:uppercase;font-weight:700;
      color:var(--ink-soft);cursor:pointer;
    }
    .navtoggle:hover{color:var(--ink);border-color:var(--ink-soft)}
    .navtoggle-bars{display:grid;gap:3px;width:15px}
    .navtoggle-bars i{display:block;height:1.5px;background:currentColor;transition:.16s ease}
    .navtoggle[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
    .navtoggle[aria-expanded="true"] .navtoggle-bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
    .navtoggle[aria-expanded="true"] .navtoggle-bars i:nth-child(2){opacity:0}
    .navtoggle[aria-expanded="true"] .navtoggle-bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

    /* closed: out of the flow entirely; open: a panel under the masthead */
    nav.site{display:none}
    body.nav-open nav.site{
      display:flex;order:3;width:100%;flex-direction:column;gap:0;
      margin-top:14px;padding-top:2px;border-top:1px solid var(--rule);
    }
    nav.site a{
      width:100%;padding:12px 2px;font-size:14px;border-bottom:1px solid var(--rule);
    }
    nav.site a:last-child{border-bottom:0}
    nav.site a.current{font-weight:650}
  }
  @media (max-width:520px){
    nav.site{gap:14px;font-size:13px}
    .stats{grid-template-columns:1fr}
    .tl li{grid-template-columns:56px 1fr;gap:16px}
    .tl::before{left:56px}
  }


/* ══════════════════════════════════════════════
   SHARED PAGE COMPONENTS (all pages)
   ══════════════════════════════════════════════ */

/* nav current page */
nav.site a.current{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* prototype / draft strip */
.proto.sub{background:var(--ink)}
.proto.sub .wrap{padding-top:8px;padding-bottom:8px}

/* page head */
.pagehead{padding:40px 0 34px;border-bottom:1px solid var(--rule);
  background:radial-gradient(900px 300px at 10% -20%, var(--paper-2), transparent 70%)}
/* a page that opens with the same full-bleed photograph treatment as the homepage */
.pagehead.has-banner{padding-top:0;background:none}
.pagehead.has-banner > .wrap:first-of-type{padding-top:16px;padding-bottom:14px;position:relative;z-index:3}
.pagehead.has-banner .overlap{margin-top:clamp(-150px,-11vw,-62px);position:relative;z-index:2}
/* this photograph is headroom-constrained: lift it so the fade crosses her chest, not her muzzle */
.pagehead-banner img{object-position:center 34%}
@media (max-width:900px){ .pagehead.has-banner .overlap{margin-top:-96px} }
@media (max-width:520px){
  .pagehead.has-banner .overlap{margin-top:-78px}
  /* on a phone, let the band take the photograph's own 3:2 shape rather than cropping her sides */
  .pagehead.has-banner .pagehead-banner{height:auto;aspect-ratio:3/2}
}
/* the owners page carries its own hero rather than a pagehead, so it needs the same rules */
.hero.owner.has-banner{padding-top:0}
.hero.owner.has-banner .overlap{margin-top:clamp(-150px,-11vw,-62px);position:relative;z-index:2}
@media (max-width:900px){ .hero.owner.has-banner .overlap{margin-top:-96px} }
@media (max-width:520px){
  .hero.owner.has-banner .overlap{margin-top:-78px}
  .hero.owner.has-banner .pagehead-banner{height:auto;aspect-ratio:3/2}
}
/* the species line sits inside the fade here too, so it takes a deeper tone; measured against
   the rust blanket behind it rather than guessed */
.pagehead.has-banner .eyebrow{color:#543D20}
.crumbs{font-size:12.5px;color:var(--ink-soft);padding:14px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumbs span{color:var(--ink-faint)}
.pagehead h1{
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.12;
  letter-spacing:var(--display-tracking);max-width:26ch;text-wrap:balance;margin-top:14px;
}
.pagehead .lede{margin-top:16px;max-width:60ch;font-size:clamp(1rem,1.5vw,1.12rem);
  color:var(--ink-soft);line-height:1.65}
.page-meta{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--rule);
  display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);
}
.page-meta span{display:inline-flex;align-items:center;gap:7px}
.page-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.page-meta .dot.ok{background:var(--secondary)}
.page-meta .dot.alert{background:#B4690E}

/* "what this is not" — must appear near the top of clinical pages, not only in the footer */
.notadvice{
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--paper-2);border-radius:var(--radius);
  padding:16px 18px;margin:24px 0 0;max-width:70ch;
  font-size:14px;line-height:1.6;color:var(--ink-soft);
}
.notadvice strong{color:var(--ink)}

/* a small way down to the plain-English summary */
.jumpnote{margin:14px 0 0;font-size:13px}
.jumpnote a{
  color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule);
  font-weight:600;letter-spacing:.01em;
}
.jumpnote a:hover{border-bottom-color:var(--accent)}

/* the summary itself: short lines, generous spacing, nothing to decode */
.tldr{margin-top:44px;padding:26px 28px 22px;border:1px solid var(--rule);
  border-left:3px solid var(--secondary);background:var(--paper-2);border-radius:var(--radius)}
.tldr h2{margin:0;font-size:clamp(1.25rem,2.3vw,1.55rem)}
.tldr-lede{margin:10px 0 18px;color:var(--ink-soft);font-size:15px;line-height:1.6}
.plainlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.plainlist li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.6;color:var(--ink)}
.plainlist li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--accent);opacity:.55;
}
.plainlist.big li{font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.62}
.tldr-foot{margin:20px 0 0;font-size:13.5px}

/* the shareable graphic slot: invisible until an image is dropped in */
.sharecard:empty{display:none}
.sharecard{margin:32px 0 8px}
.sharecard img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--radius)}

/* prose blocks */
.prose{max-width:76ch}

/* long pages: text column plus a slim "on this page" rail in the right-hand space.
   The rail is generated at build time from the page's own headings. */
.wrap.has-rail{
  display:grid;grid-template-columns:minmax(0,72ch) 352px;
  column-gap:32px;align-items:start;
}
.wrap.has-rail > .prose{max-width:none}
.rail{position:sticky;top:24px;padding-left:16px;border-left:1px solid var(--rule);
  font-size:12.5px;line-height:1.45}
.rail-title{margin:0 0 12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-family:var(--ui,system-ui,sans-serif)}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rail a{color:var(--ink-soft);text-decoration:none;border-bottom:0;display:block}
.rail a:hover{color:var(--accent)}
@media (max-width:1040px){
  .wrap.has-rail{grid-template-columns:1fr;column-gap:0}
  .wrap.has-rail > .prose{max-width:76ch}
  .rail{display:none}
}

/* the "this does not diagnose" box sits beside the heading, bottom-aligned to the
   meta line, so the page body starts higher and the right-hand space is used */
.headgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(282px,352px);
  column-gap:46px;align-items:start}
.headgrid > .eyebrow{grid-column:1;grid-row:1}
.headgrid > h1{grid-column:1;grid-row:2}
.headgrid > .lede{grid-column:1;grid-row:3}
.headgrid > .page-meta{grid-column:1 / -1;grid-row:4}
.headgrid > .notadvice{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0;max-width:none}
@media (max-width:960px){
  .headgrid{grid-template-columns:1fr;column-gap:0}
  .headgrid > .notadvice{grid-column:1;grid-row:5;margin-top:22px;max-width:76ch}
}
.prose h2{
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.22;
  letter-spacing:var(--display-tracking);margin:38px 0 0;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--body);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;margin:26px 0 10px}
.prose p{margin-top:13px;color:var(--ink-soft);font-size:16px;line-height:1.68}
.prose p strong{color:var(--ink);font-weight:650}
.prose ul,.prose ol{margin-top:13px;padding-left:22px;color:var(--ink);font-size:16.2px;line-height:1.66}
.prose ul li::marker,.prose ol li::marker{color:var(--accent)}
.prose li + li{margin-top:8px}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.prose a:hover{border-bottom-color:var(--accent)}
/* a citation that opens the paper itself */
.cite-link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule);font-weight:600}
.cite-link:hover{border-bottom-color:var(--accent)}
.pmid{display:block;font-size:11px;color:var(--ink-faint);letter-spacing:.03em;margin-top:3px}
.pmid::before{content:"\2197";display:inline-block;margin-right:4px;font-size:10px}
/* in-text links that live outside .prose — ledes, callouts, steps, the name box — get the
   same treatment, so nothing on the site falls back to a default-styled anchor */
.lede a,
.step a,
.callout a,
.notadvice a,
.namebox a,
.pagehead p a,
.prose .small a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.lede a:hover,
.step a:hover,
.callout a:hover,
.notadvice a:hover,
.namebox a:hover,
.pagehead p a:hover,
.prose .small a:hover{border-bottom-color:var(--accent)}

/* callout */
.callout{margin:22px 0 0;padding:18px 20px;border-radius:var(--radius);
  border:1px solid var(--rule);background:var(--paper-2);
  font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:100%}
.callout.warn{border-left:3px solid var(--accent)}
.callout .tag{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:7px}
.callout strong{color:var(--ink)}

/* owner-reported callout: neutral ground, dashed edge, no accent bar —
   deliberately unlike the tinted evidence callouts so the two never blur */
.callout.report{
  background:var(--card);
  border:1.5px dashed var(--ink-soft);
  border-left:1.5px dashed var(--ink-soft);
}
.callout.report .tag{color:var(--ink-soft)}

/* evidence chips */
.chip{display:inline-block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;padding:2px 8px;border-radius:100px;border:1px solid var(--rule);
  color:var(--ink-soft);background:var(--paper);vertical-align:2px;margin-left:6px;white-space:nowrap}
.chip.trial{color:var(--accent);border-color:var(--accent)}
.chip.lab{color:var(--secondary);border-color:var(--secondary)}
.chip.none{color:var(--ink-faint);border-color:var(--rule)}
.chip.harm{color:#8C2F1E;border-color:#8C2F1E}

/* owner-reported: a source TYPE, deliberately shaped differently from the evidence grades */
.chip.report{
  color:var(--ink);border:1px solid var(--ink-soft);background:var(--paper);
  text-transform:none;letter-spacing:.03em;font-weight:650;font-style:normal;
  font-size:10.5px;padding:2px 9px;
}

/* data tables */
.evtable{width:100%;border-collapse:collapse;margin-top:20px;font-size:14.5px}
.evtable caption{caption-side:top;text-align:left;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding-bottom:10px}
.evtable th,.evtable td{text-align:left;padding:11px 14px 11px 0;
  border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-soft);line-height:1.5}
.evtable th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;border-bottom:1.5px solid var(--ink-soft)}
.evtable td:first-child{color:var(--ink);font-weight:600}
.evtable tbody tr:last-child td{border-bottom:0}

/* citations + sources */
.cite{font-size:11.5px;vertical-align:super;color:var(--accent);text-decoration:none}
.cite:hover{text-decoration:underline}
.sources{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-soft);line-height:1.65;max-width:80ch}
.sources h3{font-family:var(--body);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;margin:0 0 12px}
.sources ol{padding-left:20px;display:grid;gap:7px}
.sources a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}

/* card grid (front door + supplies) */
.aud{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.aud-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:24px 22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:.16s ease}
.aud-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.aud-card .kicker{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:10px}
.aud-card h3{font-family:var(--display);font-weight:var(--display-weight);font-size:18px;
  line-height:1.28;margin:0 0 9px;letter-spacing:var(--display-tracking)}
.aud-card p{font-size:14px;color:var(--ink-soft);line-height:1.55;flex:1;margin:0}
.aud-card .go{margin-top:16px;font-size:13px;font-weight:650;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px}
.aud-card .go::after{content:"\2192";transition:transform .16s}
.aud-card:hover .go::after{transform:translateX(3px)}

@media (max-width:1180px){ .aud{gap:14px} }
@media (max-width:620px){ .aud{grid-template-columns:1fr} }


/* ══════════════════════════════════════════════
   FORMS — case reporting
   ══════════════════════════════════════════════ */
.survey{max-width:70ch}
.fs{border:0;padding:0;margin:0 0 8px}
.fs + .fs{margin-top:34px;padding-top:28px;border-top:1px solid var(--rule)}
.fs legend{
  font-family:var(--body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:4px;padding:0;
}
.fs .hint{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.5;
  margin:0 0 18px;max-width:62ch}
.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
.field label, .field .q{
  display:block;font-size:15px;font-weight:650;color:var(--ink);
  margin-bottom:6px;line-height:1.45;
}
.field .sub{display:block;font-size:13px;font-weight:400;color:var(--ink-soft);
  margin-top:3px;line-height:1.45}
.field input[type=number], .field input[type=text], .field select, .field textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:9px 12px;width:100%;max-width:320px;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{max-width:100%;min-height:92px;resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,92,74,.12);
}
.field input[type=number]{max-width:140px}
.radios{display:grid;gap:9px;margin-top:4px}
.radios label{
  display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;
  font-size:14.5px;font-weight:400;color:var(--ink-soft);line-height:1.45;
  cursor:pointer;padding:2px 0;
}
.radios input[type=radio], .radios input[type=checkbox]{
  margin:3px 0 0;accent-color:var(--accent);width:15px;height:15px;flex:0 0 15px;
}
.radios label strong{color:var(--ink);font-weight:650}
.consent{
  margin-top:8px;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--radius);padding:20px 22px;
}
.consent .radios label{font-size:14px}
.formfoot{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.formfoot .status{font-size:13.5px;color:var(--ink-soft)}
.formfoot .status.err{color:#8C2F1E;font-weight:600}
.formfoot .status.ok{color:#2F6B4F;font-weight:600}
.formfoot .status a{color:var(--accent);border-bottom:1px solid var(--rule)}
.req{color:var(--accent);font-weight:700;margin-left:2px}

/* aggregate tables on the results page */
.agg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:22px}
.agg .box{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 18px}
.agg .n{font-family:var(--display);font-weight:var(--display-weight);font-size:1.9rem;
  line-height:1;color:var(--accent);letter-spacing:-.02em}
.agg .l{font-size:12.5px;color:var(--ink-soft);margin-top:8px;line-height:1.4}
.agg .box .sub{font-size:11px;color:var(--ink-faint);margin-top:6px;line-height:1.35;
  padding-top:6px;border-top:1px solid var(--rule)}
.nstate{margin-top:20px;padding:14px 16px;border-left:3px solid var(--ink-soft);
  background:var(--card);border-radius:0 var(--radius) var(--radius) 0;
  font-size:14px;line-height:1.6;color:var(--ink-soft)}
.nstate strong{color:var(--ink)}
.bar{height:6px;background:var(--paper-2);border-radius:100px;overflow:hidden;margin-top:9px}
.bar > i{display:block;height:100%;background:var(--accent);border-radius:100px}
.datawarn{margin-top:26px;padding:16px 18px;border:1.5px dashed var(--ink-soft);
  border-radius:var(--radius);font-size:14px;line-height:1.6;color:var(--ink-soft)}
.datawarn strong{color:var(--ink)}

/* FAQ accordion (owners, rescues, vets) */
  .faq{margin-top:44px;border-top:1px solid var(--rule);padding-top:34px}
  .faq h2{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.3rem,2.4vw,1.7rem);
    line-height:1.22;letter-spacing:var(--display-tracking);margin:0 0 22px;max-width:28ch}
  .faq details{border-bottom:1px solid var(--rule);padding:4px 0}
  .faq details:first-of-type{border-top:1px solid var(--rule)}
  .faq summary{
    cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
    font-family:var(--display);font-size:17px;line-height:1.35;color:var(--ink);
    letter-spacing:var(--display-tracking);
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+";position:absolute;right:2px;top:15px;color:var(--accent);
    font-family:var(--body);font-size:18px;font-weight:400;line-height:1;
  }
  .faq details[open] summary::after{content:"\2013"}
  .faq summary:hover{color:var(--accent)}
  .faq details > div{padding:0 0 20px;max-width:64ch}
  .faq details p{color:var(--ink-soft);font-size:15.5px;line-height:1.66;margin:0}
  .faq details p + p{margin-top:11px}
  .faq details a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
  .faq details a:hover{border-bottom-color:var(--accent)}
  .faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}


/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
footer.site{
  border-top:3px solid var(--accent);
  background:var(--paper-2);
  margin-top:0;padding:0;
}
.footgrid{
  display:grid;grid-template-columns:1.45fr repeat(4,minmax(0,1fr));
  gap:30px;padding:56px 0 46px;
}
.footbrand .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-bottom:18px}
.footbrand .logo{width:48px;height:48px;flex:0 0 48px}
.footbrand .brand-name{font-size:16.5px;line-height:1.2}
.footmission{
  font-size:13.5px;color:var(--ink-soft);line-height:1.62;max-width:37ch;margin:0;
}
.footmission em{font-style:italic;color:var(--ink)}
.footcontact{margin:18px 0 0}
.footcontact a{
  font-size:13.5px;font-weight:650;color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .14s;
}
.footcontact a:hover{border-bottom-color:var(--accent)}
.footcol h4{
  font-family:var(--body);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin:2px 0 14px;
}
.footcol a{
  display:block;font-size:13.5px;color:var(--ink-soft);text-decoration:none;
  padding:5px 0;transition:color .14s,transform .14s;
}
.footcol a:hover{color:var(--accent);transform:translateX(2px)}
.footcol a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.foot-rule{border:0;border-top:1px solid var(--rule);margin:0;width:100%}
footer.site .disc{
  margin:0;border:0;background:transparent;
  border-radius:0;padding:24px 0 0;max-width:94ch;
  font-size:12.5px;color:var(--ink-soft);line-height:1.68;
}
footer.site .disc a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
footer.site .disc a:hover{border-bottom-color:var(--accent)}

.foot-bottom{
  margin-top:22px;padding:16px 0 30px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;color:#4B5651;letter-spacing:.01em;
}

/* keep the four link columns side by side for as long as the type still fits */
@media (max-width:1180px){
  .footgrid{grid-template-columns:1.25fr repeat(4,minmax(0,1fr));gap:20px}
  .footcol a{font-size:12.5px;padding:4px 0}
  .footcol h4{font-size:10px;margin-bottom:11px}
  .footmission{font-size:12.5px}
}
@media (max-width:960px){
  .footgrid{grid-template-columns:1fr 1fr;gap:34px;padding:44px 0 34px}
  .footbrand{grid-column:1 / -1}
}
@media (max-width:560px){
  .footgrid{grid-template-columns:1fr;gap:28px}
  .foot-bottom{flex-direction:column;gap:8px}
}


/* ══════════════════════════════════════════════
   PHOTOGRAPHY
   ══════════════════════════════════════════════ */
.breedgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:18px;margin-top:26px;
}
.breedgrid figure{
  margin:0;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;
}
.breedgrid img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:var(--paper-2);
}
.breedgrid figcaption{
  padding:12px 14px 14px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);
}
.breedgrid figcaption strong{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px}
.creditgrid figcaption span{font-size:11.5px;color:var(--ink-faint);display:block;line-height:1.5}
.creditgrid figcaption a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.creditgrid figcaption a:hover{border-bottom-color:var(--accent)}
.photoplaceholder{
  margin-top:22px;border:1.5px dashed var(--ink-soft);border-radius:var(--radius);
  padding:20px 22px;font-size:14px;line-height:1.62;color:var(--ink-soft);max-width:70ch;
}
.photoplaceholder strong{color:var(--ink)}

/* the mark shrinks with the viewport so the header never crowds */
@media (max-width:760px){
  .brand .logo{width:44px;height:44px;flex:0 0 44px}
  .brand-name{font-size:16px}
}


/* ══════════════════════════════════════════════
   EDITORIAL PHOTOGRAPHY (decorative art direction)
   ══════════════════════════════════════════════ */
.pagehead .wrap::after,.hero.owner .wrap::after{content:"";display:block;clear:both}
.pagehead .photo,
.hero.owner .photo{
  float:right;width:min(330px,34%);
  margin:4px 0 24px 46px;
  border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;background:var(--card);
}
.pagehead .photo img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
}
/* homepage right rail: photo above the at-a-glance panel */
.hero-rail{display:grid;gap:20px}
.hero-rail .photo{
  margin:0;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;background:var(--card);
}
.hero-rail .photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

@media (max-width:880px){
  .pagehead .photo,
  .hero.owner .photo{
    float:none;width:100%;max-width:430px;
    margin:0 0 24px;
  }
}
@media (max-width:900px){
  .hero-rail{order:2;grid-template-columns:1fr;align-items:start}
}
@media (max-width:620px){
  .hero-rail{grid-template-columns:1fr}
}
/* on a phone the badge is more clutter than credit: attribution lives on the
   image credits page, reached from the footer, and stays on screen at every
   larger size */
@media (max-width:620px){
  .hero-credit{display:none}
}
@media (max-width:520px){
  .hero-banner{height:230px}
  .hero-grid{margin-top:-78px}
  .hero-credit{
    right:8px;top:8px;font-size:8.5px;line-height:1.35;padding:3px 6px;
    max-width:min(190px,58%);letter-spacing:.01em;background:rgba(18,26,23,.3);
  }
}

.photocredit{
  display:block;padding:9px 12px;font-size:11px;line-height:1.4;
  color:var(--ink-faint);border-top:1px solid var(--rule);background:var(--card);
}

/* wide 3-column evidence tables get their own scroll container on small screens
   instead of pushing the whole page sideways */
@media (max-width:560px){
  .prose .evtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose .evtable caption{position:sticky;left:0}
}

/* the project emblem, shown at a size where its ring text reads */
.emblem{float:right;width:min(238px,30%);margin:-6px 0 22px 42px}
.emblem img{display:block;width:100%;height:auto}
.pagehead .wrap::after{content:"";display:block;clear:both}
@media (max-width:880px){
  .emblem{float:none;width:100%;max-width:230px;margin:0 0 22px}
}


/* ══════════════════════════════════════════════
   PRINTABLE SHEETS  (pages/print/*)
   Screen: a plain document. Print: one page, black on white.
   ══════════════════════════════════════════════ */
.sheet{background:#fff}
.sheetbar{
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-soft);
}
.sheetbar .wrap{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:11px 28px;
}
.sheetbar a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.sheetbar a:hover{border-bottom-color:var(--accent)}

.doc{
  max-width:860px;margin:0 auto;padding:38px 30px 70px;
  color:#141414;font-size:13.4px;line-height:1.5;
}
.doc-head{border-bottom:2px solid #141414;padding-bottom:14px;margin-bottom:18px}
.doc-kicker{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#555;font-weight:700;
}
.doc h1{font-size:27px;line-height:1.14;letter-spacing:-.02em;margin:7px 0 8px;font-weight:800;text-wrap:balance}
.doc-sub{font-size:13px;line-height:1.5;color:#3d3d3d;max-width:72ch}
.doc h2{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  margin:20px 0 7px;padding-bottom:4px;border-bottom:1px solid #c9c9c9;font-weight:800;
}
.doc p{margin:0 0 7px;max-width:88ch}
.doc ul,.doc ol{margin:0 0 7px 19px}
.doc li{margin-bottom:3px;max-width:88ch}
.doc strong{font-weight:700}
.doc table{width:100%;border-collapse:collapse;font-size:12.1px;margin:6px 0 9px}
.doc th,.doc td{border-bottom:1px solid #d8d8d8;padding:5px 7px;text-align:left;vertical-align:top}
.doc th{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#444;
  border-bottom:1.5px solid #141414;
}
.doc .fields{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px;margin:8px 0 2px}
.doc .field{
  display:flex;gap:8px;align-items:baseline;padding:5px 0;margin:0;
  border-bottom:1px dotted #b5b5b5;font-size:12.5px;
}
.doc .field b{font-weight:700;white-space:nowrap}
.doc .field i{flex:1;height:1em}
.doc .box{border:1px solid #141414;padding:9px 12px;margin:9px 0}
.doc .box--warn{border-left:4px solid #141414;background:#F7F7F7}
.doc .box h3{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 5px;font-weight:800;
}
.doc .box p:last-child{margin-bottom:0}
.doc .small{font-size:11.4px;line-height:1.45;color:#3f3f3f}
.doc ul.tick{list-style:none;margin-left:0}
.doc ul.tick li{padding-left:21px;position:relative}
.doc ul.tick li::before{
  content:"";position:absolute;left:0;top:.38em;width:9px;height:9px;border:1.2px solid #141414;
}
.doc .refs{font-size:10.6px;line-height:1.42;color:#333;margin:5px 0 0 18px}
.doc .refs li{margin-bottom:2px}
.doc .sign{
  display:flex;justify-content:space-between;gap:26px;align-items:flex-start;
  border-top:2px solid #141414;margin-top:20px;padding-top:10px;font-size:11px;line-height:1.45;color:#333;
}
.doc .sign span:first-child{max-width:62ch}
.doc .sign span:last-child{text-align:right;white-space:nowrap}
.doc a{color:#141414;text-decoration:underline}

@media (max-width:640px){
  .doc{padding:24px 18px 52px}
  .doc h1{font-size:22px}
  .doc .fields{grid-template-columns:1fr}
  .doc .sign{flex-direction:column;gap:8px}
  .doc .sign span:last-child{text-align:left;white-space:normal}
}

@media print{
  @page{size:A4 portrait;margin:10mm}
  .proto,.sheetbar,header.site,footer.site,.noprint{display:none !important}
  html,body{background:#fff !important;font-size:10pt}
  .doc{
    max-width:none;padding:0;margin:0;
    font-size:8.5pt;line-height:1.25;color:#000;
  }
  .doc-head{border-bottom-width:1.5pt;padding-bottom:4pt;margin-bottom:4pt}
  .doc-kicker{font-size:6.4pt}
  .doc h1{font-size:12.6pt;margin:2pt 0 3pt;line-height:1.12;letter-spacing:-.01em}
  .doc-sub{font-size:7.3pt;line-height:1.28;max-width:none}
  .doc h2{font-size:6.9pt;margin:4.6pt 0 1.8pt;padding-bottom:1.2pt}
  .doc p,.doc li{max-width:none;margin-bottom:1.2pt}
  .doc ul,.doc ol{margin-left:10pt}
  .doc table{font-size:7.1pt;margin:2pt 0 2.5pt}
  .doc th,.doc td{padding:1.4pt 3pt}
  .doc .small{font-size:6.9pt;line-height:1.28}
  .doc .refs{font-size:6.1pt;line-height:1.26;margin:2pt 0 0 10pt;column-count:2;column-gap:12pt}
  .doc .refs li{margin-bottom:0;break-inside:avoid}
  .doc .fields{gap:0 14pt;margin:3pt 0 0;grid-auto-rows:min-content;align-content:start;grid-template-columns:repeat(3,1fr)}
  .doc .field{padding:2pt 0;font-size:7.4pt;margin:0}
  .doc .box{padding:4pt 6pt;margin:3.5pt 0}
  .doc .box h3{font-size:6.8pt;margin-bottom:2pt}
  .doc .sign{margin-top:5pt;padding-top:3pt;font-size:6.7pt;line-height:1.3}
  .doc a{color:#000;text-decoration:none}
  h1,h2,h3,.doc table,.doc .box,.doc .fields,.doc li{break-inside:avoid}
  .doc .sign{break-inside:avoid}
}

/* two photographs sit so high in their source frames that the default crop clips an ear;
   showing them from the top edge is the only crop that keeps the whole head */
.pagehead-banner.banner-bengal img{object-position:center 0%}
.pagehead-banner.banner-tabby img{object-position:center 2%}
/* these two need the top of the frame, not the middle: their subjects sit high in the source */
.pagehead-banner.banner-maine img{object-position:center 18%}
.pagehead-banner.banner-devon img{object-position:center 7%}

/* the page banners are cropped tight around each cat's face, so they start at the top of the
   frame; the Maine Coon photograph is used whole and positioned to keep her head in view */
.pagehead-banner.banner-bengal img,
.pagehead-banner.banner-tabby img,
.pagehead-banner.banner-british img{object-position:center 21%}
.pagehead-banner.banner-devon img{object-position:center 0%}
.pagehead-banner.banner-maine img{object-position:center 18%}

/* and because the heads are larger, the wash-out starts lower and the text sits lower with it */
.hero-banner.pagehead-banner::after{
  background:linear-gradient(to bottom,
    transparent 0 75%,
    color-mix(in srgb, var(--paper) 46%, transparent) 84%,
    color-mix(in srgb, var(--paper) 84%, transparent) 91%,
    color-mix(in srgb, var(--paper) 97%, transparent) 96%,
    var(--paper) 100%);
}
.pagehead.has-banner .overlap{margin-top:clamp(-96px,-7vw,-44px)}
.hero.owner.has-banner .overlap{margin-top:clamp(-96px,-7vw,-44px)}
@media (max-width:900px){
  .pagehead.has-banner .overlap{margin-top:-78px}
  .hero.owner.has-banner .overlap{margin-top:-78px}
}
@media (max-width:520px){
  .pagehead.has-banner .overlap{margin-top:-62px}
  .hero.owner.has-banner .overlap{margin-top:-62px}
}

/* new photographs for the owners and vets pages: both carry a little headroom, so they sit
   slightly lower than the tight face crops */
.pagehead-banner.banner-indoor img{object-position:center 30%}
.pagehead-banner.banner-vet img{object-position:center 22%}

/* affiliate product links: small, quiet, obviously an outbound shop link */
.buy{display:inline-block;margin:6px 6px 0 0;padding:2px 8px 3px;border:1px solid var(--rule);
  border-radius:999px;font-size:12px;line-height:1.5;text-decoration:none;white-space:nowrap;
  color:var(--accent);background:var(--paper-2)}
.buy:hover{border-color:var(--accent);background:#fff}
.buy::after{content:"";}

/* a .btn inside prose or a callout was inheriting the link colour, which painted the label in the
   same green as its own background — invisible. Buttons keep their own colour and no underline. */
a.btn.btn-primary{color:var(--accent-ink);border-bottom:0}
a.btn.btn-ghost{color:var(--ink);border-bottom:1px solid var(--rule)}
a.btn.btn-ghost:hover{border-bottom-color:var(--ink-soft)}
a.btn:hover{border-bottom:0}

/* the case-report page shows the live form's question set read-only: no controls, no false promise
   of submission */
.readonly-sheet .radios label{grid-template-columns:14px 1fr;cursor:default}
.readonly-sheet .radios label::before{content:"\2022";grid-column:1;color:var(--ink-faint);line-height:1.45}
.readonly-sheet .radios label:hover{background:none}
.readonly-sheet .field .ro-slot{display:inline-block;min-width:140px;height:1.15em;
  border-bottom:1.5px dashed var(--ink-soft);vertical-align:baseline}

/* keyboard users get to the content in one keystroke; invisible until focused */
.skip{position:absolute;left:-9999px;top:0;z-index:10000;padding:11px 16px;border-radius:0 0 8px 0;
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{left:0;outline:2px solid var(--accent);outline-offset:2px}