/* WagNote: THE VET'S NOTEBOOK LOOK (design handoff, 13 Oct 2026).
   Loaded by base.njk only on pages that set `blogLook: true`: the blog home (/blog/),
   every blog post and every library page (both through layouts/article.njk), and /about/.
   It loads AFTER articles.css, so it can override it. The hand-written pages (index.html
   and the legal pages) never load either file; /learn/, /newsletter/ and the 404 page keep
   articles.css alone (they don't set blogLook).

   Everything here is prefixed `bl-` (classes) or `--bl-` (custom properties) so nothing
   collides with articles.css or with the styles launch.js / android.js inject at run time
   (.lb-*, .gp-*, .sb*, .store-pair, .as-badge, .topbar, #ctaRow).

   Contents:
     1. tokens (colours, type scale, spacing, surfaces)
     2. page base
     3. utilities: clay card, notebook surface (ruled lines + margin line), marker
        highlight, eyebrow, buttons, topic tags and chips
     4. store badges (the partial / {% storeBadges %} shortcode)
     5. header (+ reading-progress bar)
     6. footer
     7. print, reduced motion
     8. blog home (/blog/): hero, topic chips, featured post, post cards, topic coin pictures
     9. article (posts and library pages): notebook header, text, boxes, side rail,
        "Read next", the phone bar
    10. about (/about/): hero with the taped photo cards and fact pills, "The pack at
        home", "What you won't find here", "Why I built WagNote", the numbered
        "How I write these pages" cards, the yellow medical note */

/* ---------- 1. tokens ---------- */
:root{
  /* colours (handoff table) */
  --bl-ink:#0F3B36;          /* headings, footer, deep panels */
  --bl-teal:#1E6B5F;         /* links, accents */
  --bl-btn-top:#2C8C7A;      /* primary button gradient */
  --bl-btn-bottom:#17594F;
  --bl-hero-mid:#134A43;
  --bl-hero-deep:#0C2F2B;    /* hero gradient end */
  --bl-mint:#A6E6DC;         /* eyebrows and links on dark, rules */
  --bl-mint-mid:#5FC0B2;     /* marker swash, dots, progress bar */
  --bl-paper:#FAF8F2;        /* page background */
  --bl-clay-top:#FFFFFF;     /* card gradient */
  --bl-clay-bottom:#F3F7F5;
  --bl-body:#1F3A36;         /* article text: 12.9:1 on paper */
  --bl-muted:#4F6662;        /* dates, meta: 5.9:1 on paper. Never lighter. */
  --bl-nav:#3E5E59;          /* header links that aren't the current page */
  --bl-margin-red:#F2938E;   /* notebook margin line (45% on dark) */
  --bl-hairline:rgba(15,59,54,.10);
  --bl-band:#EFF4F1;         /* "Read next" band */
  --bl-tile:#F1F8F6;         /* "What to track" tiles */
  --bl-notepaper:#FFFDF6;    /* "Questions to ask your vet" card */
  /* text on the dark teal panels and the footer */
  --bl-on-dark:#E6F4F0;
  --bl-on-dark-soft:#BFDAD4;
  --bl-on-dark-faint:#9CC2BA;
  /* callout boxes */
  --bl-call-top:#FFF8E2; --bl-call-bottom:#FCEFC7; --bl-call-edge:#E8C766; --bl-call-ink:#4D3A00;
  --bl-now-top:#FFEDEA;  --bl-now-bottom:#FBDAD5;  --bl-now-edge:#E58A80;  --bl-now-ink:#6E1C14; --bl-now-badge:#C9463B;

  /* type */
  --bl-font-head:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;   /* 600-900 */
  --bl-font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* 400-700 */
  --bl-fs-h1-hero:clamp(38px,6.4vw,68px);     /* lh 1.02, tracking -1.2px */
  --bl-fs-h1-article:clamp(34px,5.4vw,58px);  /* lh 1.05 */
  --bl-fs-h2:clamp(26px,2.8vw,32px);          /* 44px above, 14px below */
  --bl-fs-h3:clamp(20px,1.9vw,23px);          /* card titles, lh 1.2 */
  --bl-fs-eyebrow:13px;                       /* caps, 2.2-2.6px tracking */
  --bl-fs-lead:21px;                          /* lh 1.6 */
  --bl-fs-body:18.5px;                        /* lh 1.7 */
  --bl-fs-card:17px;                          /* card summaries, 16.5-17.5, lh 1.55 */
  --bl-fs-meta:15px;
  --bl-fs-small:14.5px;                       /* sources / disclaimer: the smallest text on the site */

  /* spacing and widths */
  --bl-pad:clamp(16px,4vw,48px);              /* side padding */
  --bl-w-home:1120px;
  --bl-w-article:1040px;                      /* 680 text + 56 gap + 260 rail */
  --bl-w-text:680px;                          /* ~65 characters of body text */
  --bl-w-rail:260px;
  --bl-w-about:1080px;
  --bl-gap-section:clamp(36px,6vw,64px);
  --bl-gap-para:22px;
  --bl-gap-grid:clamp(16px,1.6vw,18px);

  /* surfaces */
  --bl-r-big:28px; --bl-r-card:24px; --bl-r-box:20px; --bl-r-pill:999px;
  --bl-clay:linear-gradient(180deg,var(--bl-clay-top),var(--bl-clay-bottom));
  --bl-clay-edge:1px solid rgba(15,59,54,.08);
  --bl-clay-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,59,54,.06),0 14px 30px -12px rgba(15,59,54,.24);
  --bl-clay-shadow-hover:inset 0 1px 0 #fff,0 1px 2px rgba(15,59,54,.06),0 22px 40px -12px rgba(15,59,54,.32);
  --bl-hero-bg:radial-gradient(120% 90% at 85% 0%,var(--bl-teal) 0%,var(--bl-hero-mid) 45%,var(--bl-hero-deep) 100%);
  --bl-ruled:repeating-linear-gradient(180deg,transparent 0 35px,rgba(166,230,220,.10) 35px 36px);
  --bl-margin-x:clamp(12px,3vw,40px);         /* where the red margin line sits */
  --bl-marker:linear-gradient(180deg,transparent 58%,rgba(95,192,178,.55) 58% 92%,transparent 92%);

  --bl-header-h:64px;                         /* 76px from 720px up */
  scroll-padding-top:calc(var(--bl-header-h) + 20px);   /* anchors land below the sticky header */
}
@media (min-width:720px){:root{--bl-header-h:76px;}}

/* ---------- 2. page base ---------- */
/* Zero-specificity (:where) so the page styles can override any of it without a fight. */
body.bl{background:var(--bl-paper);color:var(--bl-body);font-family:var(--bl-font-body);font-weight:400;}
body.bl :where(h1,h2,h3,h4){font-family:var(--bl-font-head);font-weight:900;color:var(--bl-ink);text-wrap:balance;}
body.bl :where(p,li,dd,blockquote){text-wrap:pretty;}
body.bl a{color:var(--bl-teal);}
body.bl a:hover{color:var(--bl-ink);}
body.bl :focus-visible{outline:3px solid var(--bl-teal);outline-offset:3px;}

/* A centred column at one of the handoff's widths, with the side padding. */
.bl-wrap{width:100%;max-width:calc(var(--bl-w-home) + 2 * var(--bl-pad));margin-inline:auto;padding-inline:var(--bl-pad);}
.bl-wrap--article{max-width:calc(var(--bl-w-article) + 2 * var(--bl-pad));}
.bl-wrap--about{max-width:calc(var(--bl-w-about) + 2 * var(--bl-pad));}
.bl-wrap--text{max-width:calc(var(--bl-w-text) + 2 * var(--bl-pad));}

/* ---------- 3. utilities ---------- */
/* Clay card: the white-to-mint card. Add .bl-lift to a link card for the hover lift. */
.bl-clay{background:var(--bl-clay);border:var(--bl-clay-edge);border-radius:var(--bl-r-card);box-shadow:var(--bl-clay-shadow);}
.bl-clay--big{border-radius:var(--bl-r-big);}
.bl-lift{transition:transform .18s ease,box-shadow .18s ease;}
.bl-lift:hover{transform:translateY(-3px);box-shadow:var(--bl-clay-shadow-hover);}

/* Notebook surface: the dark teal panel with ruled lines and one red margin line.
   The lines are drawn by ::before/::after, so put content in a child (it is lifted above them). */
.bl-notebook{position:relative;overflow:hidden;isolation:isolate;background:var(--bl-hero-bg);color:#fff;}
.bl-notebook::before{content:"";position:absolute;inset:0;background-image:var(--bl-ruled);pointer-events:none;z-index:-1;}
.bl-notebook::after{content:"";position:absolute;top:0;bottom:0;left:var(--bl-margin-x);width:2px;background:rgba(242,147,142,.45);pointer-events:none;z-index:-1;}
.bl-notebook--no-margin::after{content:none;}
/* the same lines on their own, for a panel that brings its own background */
.bl-ruled{background-image:var(--bl-ruled);}

/* Marker highlight on one phrase of an H1. */
.bl-marker{background:var(--bl-marker);padding:0 4px;margin:0 -4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* Eyebrow: the small caps line above a heading. On dark panels it is mint. */
.bl-eyebrow{font-family:var(--bl-font-head);font-weight:900;font-size:var(--bl-fs-eyebrow);line-height:normal;letter-spacing:2.4px;text-transform:uppercase;color:var(--bl-teal);margin:0;}
.bl-notebook .bl-eyebrow,.bl-on-dark .bl-eyebrow{color:var(--bl-mint);}

/* Buttons. Primary: 48px, the teal gradient. Ghost: outlined, for a second action. */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--bl-r-pill);
  background:linear-gradient(180deg,var(--bl-btn-top),var(--bl-btn-bottom));border:1px solid var(--bl-teal);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),0 8px 18px -6px rgba(23,89,79,.6);
  color:#fff;font-family:var(--bl-font-head);font-weight:800;font-size:17px;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s ease;}
body.bl a.bl-btn,body.bl a.bl-btn:hover{color:#fff;}
.bl-btn:hover{transform:translateY(-1px);}
.bl-btn--sm{min-height:44px;padding:0 18px;font-size:16px;}
.bl-btn--ghost{background:transparent;border:1.5px solid rgba(15,59,54,.22);box-shadow:none;}
body.bl a.bl-btn--ghost,body.bl a.bl-btn--ghost:hover{color:var(--bl-ink);}

/* Topic tags (small pill on a card or an article) and topic chips (the 44px filter pills).
   Colour comes from data-topic="<slug>" (the slugs in posts' `topics:`), on the tag itself
   or on any parent (a card); labels come from src/_data/topicLabels.js. A topic with no colour
   yet gets the neutral grey pair (the var() fallbacks), never nothing.
   New topics: add a pair at the same lightness. */
.bl-tag{display:inline-flex;align-items:center;align-self:flex-start;border-radius:var(--bl-r-pill);padding:5px 12px;background:var(--tag-bg,#E8ECEE);color:var(--tag-ink,#33464D);font-family:var(--bl-font-head);font-weight:800;font-size:14px;line-height:normal;white-space:nowrap;text-decoration:none;}
.bl-chip{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:var(--bl-r-pill);background:var(--tag-bg,#E8ECEE);border:1px solid rgba(15,59,54,.08);color:var(--tag-ink,#33464D);font-family:var(--bl-font-head);font-weight:800;font-size:15.5px;line-height:1.1;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 6px 16px -6px rgba(15,59,54,.25);}
.bl-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tag-dot,#7F959C);flex:0 0 auto;}
body.bl a.bl-chip:hover,body.bl button.bl-chip:hover{color:var(--tag-ink,#33464D);filter:brightness(.98);}
.bl-chip--all{--tag-bg:var(--bl-ink);--tag-ink:#fff;--tag-dot:var(--bl-mint);border-color:var(--bl-ink);}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;}
/* the round topic coin on post cards (46px on home, 40px in Read next) */
.bl-coin{width:46px;height:46px;border-radius:50%;flex:0 0 auto;background:#fff;box-shadow:0 0 0 4px var(--tag-bg,#E8ECEE);}

[data-topic="diabetes"]{--tag-bg:#DDF3EE;--tag-ink:#0F5A4E;--tag-dot:#2C8C7A;}
[data-topic="heart"]{--tag-bg:#FBE3E1;--tag-ink:#8A2A22;--tag-dot:#E8746F;}
[data-topic="cognitive-dysfunction"]{--tag-bg:#FBF0D6;--tag-ink:#6B4E00;--tag-dot:#D9A72E;}   /* handoff "Senior dogs" */
[data-topic="cushings"]{--tag-bg:#ECE6F7;--tag-ink:#4A3A78;--tag-dot:#8E78C9;}                /* handoff "Hormones" */
[data-topic="kidney"]{--tag-bg:#E0EEF8;--tag-ink:#1D4E73;--tag-dot:#4D93C7;}                  /* handoff "Thirst & kidneys" */
[data-topic="pancreatitis"]{--tag-bg:#FCE7D9;--tag-ink:#7A3A10;--tag-dot:#E08A4F;}
[data-topic="noise-phobia"]{--tag-bg:#E4E7F8;--tag-ink:#2F3C7A;--tag-dot:#7484D1;}
[data-topic="medicines"]{--tag-bg:#E6F0D6;--tag-ink:#3D5212;--tag-dot:#86A63A;}
[data-topic="sitter"]{--tag-bg:#F7E2EE;--tag-ink:#7A2558;--tag-dot:#D278A9;}
[data-topic="seizures"]{--tag-bg:#F1E8DE;--tag-ink:#5E4127;--tag-dot:#B98A5E;}
[data-topic="vet-visits"]{--tag-bg:#E8ECEE;--tag-ink:#33464D;--tag-dot:#7F959C;}
/* added 16 Oct 2026: same lightness as the handoff pairs */
[data-topic="arthritis"]{--tag-bg:#F3E9DC;--tag-ink:#5C4325;--tag-dot:#B48A5A;}
[data-topic="cancer"]{--tag-bg:#F4E4F2;--tag-ink:#6A2A63;--tag-dot:#C27AB8;}
[data-topic="hyperthyroidism"]{--tag-bg:#DFF1F4;--tag-ink:#18525C;--tag-dot:#4AA3B2;}
[data-topic="liver"]{--tag-bg:#F6EBD3;--tag-ink:#5F4708;--tag-dot:#C9A23A;}
[data-topic="poisoning"]{--tag-bg:#FBE6DC;--tag-ink:#7E2E12;--tag-dot:#E07A4F;}
[data-topic="seniors"]{--tag-bg:#FBF0D6;--tag-ink:#6B4E00;--tag-dot:#D9A72E;}

/* ---------- 4. store badges ----------
   Apple's own black badge (/app-store-badge.svg, unmodified) and the Google Play badge the
   home page draws (android.js): the four-colour logo with "GET IT ON / Google Play" in white
   on black. 40px tall in the header and footer, 48px in the WagNote box. */
.bl-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.bl-badge{display:inline-flex;flex:0 0 auto;align-items:center;border-radius:9px;line-height:0;text-decoration:none;transition:transform .15s ease;}
.bl-badge:hover{transform:translateY(-2px);}
.bl-badge img{display:block;height:40px;width:auto;}
.bl-badge--play{height:40px;gap:8px;padding:0 14px 0 12px;background:#000;border:1px solid #A6A6A6;line-height:1;white-space:nowrap;font-family:var(--bl-font-head);}
body.bl a.bl-badge--play,body.bl a.bl-badge--play:hover{color:#fff;}
.bl-badge--play svg{display:block;width:18px;height:20px;flex:0 0 auto;}
.bl-play-t{display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.bl-play-s{font-weight:700;font-size:8px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 2px;}
.bl-play-b{font-weight:800;font-size:16px;letter-spacing:-.005em;}
/* The 40px badges (header, footer) stay 40px to the eye but take taps 2px above and below,
   so each link's tap area is 44px tall. */
.bl-badges--40 .bl-badge{position:relative;}
.bl-badges--40 .bl-badge::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px;}
.bl-badges--40 .bl-badge--play::after{left:-1px;right:-1px;top:-3px;bottom:-3px;}   /* measured from inside its 1px border */
.bl-badges--48 .bl-badge{border-radius:11px;}
.bl-badges--48 .bl-badge img{height:48px;}
.bl-badges--48 .bl-badge--play{height:48px;gap:10px;padding:0 17px 0 14px;}
.bl-badges--48 .bl-badge--play svg{width:22px;height:24px;}
.bl-badges--48 .bl-play-s{font-size:9.5px;margin-bottom:3px;}
.bl-badges--48 .bl-play-b{font-size:19px;}

/* ---------- 5. header ----------
   Frosted paper bar, sticky. Phone (<720px): 64px, logo 30px, links pushed right, no
   badges. Wider: 76px, logo 36px, links beside the logo, badges on the right. The row's
   contents stop at 1184px (the drawing's 1280px frame minus its 48px padding) and centre. */
.bl-header{position:sticky;top:0;z-index:30;background:rgba(250,248,242,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.bl-header-row{display:flex;align-items:center;gap:20px;height:var(--bl-header-h);padding:0 max(var(--bl-pad),calc((100% - 1184px) / 2));border-bottom:1px solid var(--bl-hairline);}
.bl-logo{display:flex;align-items:center;flex:0 0 auto;min-height:44px;line-height:0;}
.bl-logo img{display:block;height:30px;width:auto;}
.bl-nav{display:flex;align-items:center;gap:4px;margin-left:auto;min-width:0;}
body.bl .bl-nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;font-family:var(--bl-font-head);font-weight:800;font-size:17px;line-height:1;color:var(--bl-nav);text-decoration:none;white-space:nowrap;}
body.bl .bl-nav a:hover{background:rgba(30,107,95,.08);color:var(--bl-ink);}
body.bl .bl-nav a.is-here{color:var(--bl-ink);}
.bl-nav a.is-here::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:3px;background:var(--bl-mint-mid);}
.bl-header-end{display:none;margin-left:auto;flex:0 0 auto;}
@media (min-width:720px){
  .bl-logo img{height:36px;}
  .bl-nav{margin-left:12px;}
  .bl-header-end{display:flex;}
}
/* Small phones: three links (once Learn is live) must still fit beside the logo at 320px.
   (390px, the drawing's phone, keeps the full 17px links.) */
@media (max-width:360px){
  .bl-header-row{gap:12px;}
  .bl-nav{gap:2px;}
  body.bl .bl-nav a{padding:0 9px;font-size:16px;}
  .bl-nav a.is-here::after{left:9px;right:9px;}
}
/* Reading progress: a 4px track under the header row, filled by assets/blog.js. */
.bl-progress{height:4px;background:rgba(15,59,54,.08);}
.bl-progress span{display:block;width:0;height:100%;border-radius:0 4px 4px 0;background:linear-gradient(90deg,var(--bl-btn-top),var(--bl-mint-mid));box-shadow:0 0 10px rgba(95,192,178,.7);}

/* ---------- 6. footer ---------- */
.bl-footer{position:relative;overflow:hidden;isolation:isolate;background:var(--bl-ink);color:var(--bl-on-dark);font-family:var(--bl-font-body);padding:44px clamp(20px,4vw,48px) 36px;}
.bl-footer::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(166,230,220,.06) 0 1px,transparent 1px 32px);pointer-events:none;z-index:-1;}
.bl-footer-in{max-width:var(--bl-w-home);margin:0 auto;display:flex;flex-wrap:wrap;gap:28px 40px;align-items:flex-start;justify-content:space-between;}
.bl-footer-about{display:flex;flex-direction:column;gap:14px;max-width:360px;}
.bl-footer-title{margin:0;font-family:var(--bl-font-head);font-weight:900;font-size:22px;line-height:normal;color:#fff;}
.bl-footer-blurb{margin:0;font-size:15.5px;line-height:1.55;color:var(--bl-on-dark-soft);}
/* the store badges under their own "Get the WagNote app" label, ruled off from the blog's blurb */
.bl-footer-app{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(166,230,220,.18);}
.bl-footer-app-label{margin:0;font-family:var(--bl-font-head);font-weight:800;font-size:17px;line-height:normal;color:#fff;}
.bl-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:2px 28px;}
body.bl .bl-footer-nav a{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;line-height:1.3;color:var(--bl-mint);text-decoration:none;}
body.bl .bl-footer-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
body.bl .bl-footer :focus-visible{outline-color:var(--bl-mint);}
.bl-footer-co{max-width:var(--bl-w-home);margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(166,230,220,.18);font-size:14px;line-height:1.5;color:var(--bl-on-dark-faint);}
/* Narrow phones: two equal columns that may wrap a long link onto two lines, never sideways. */
@media (max-width:420px){
  .bl-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;width:100%;}
}

/* ---------- 7. print, reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .bl-lift,.bl-btn,.bl-badge{transition:none;}
  .bl-lift:hover,.bl-btn:hover,.bl-badge:hover{transform:none;}
}
@media print{
  .bl-header,.bl-footer,.bl-progress,.bl-badges{display:none!important;}
  body.bl{background:#fff;}
}

/* ---------- 8. blog home (/blog/, src/pages/blog.njk) ----------
   Handoff Blog-Home: notebook hero, the topic chips over the hero's bottom edge, the newest
   post featured, then "More from the notebook". Sizes are the drawing's (its cqw = vw here). */

/* Topic coin pictures: the WagNote app's own icons (mobile/assets/home-icons), white
   background. -96 for the 46px/40px coins, -336 for the featured post's big coin (2x).
   The handoff drew Hormones = stethoscope, Diabetes = pill, Heart = chart, Senior dogs = clock;
   the rest are the closest icon in the app's set. A topic with none gets a plain white coin. */
[data-topic="cushings"]{--tag-art:url(/assets/topics/stethoscope-96.jpg);--tag-art-lg:url(/assets/topics/stethoscope-336.jpg);}
[data-topic="diabetes"]{--tag-art:url(/assets/topics/capsule-96.jpg);--tag-art-lg:url(/assets/topics/capsule-336.jpg);}
[data-topic="heart"]{--tag-art:url(/assets/topics/chart-96.jpg);--tag-art-lg:url(/assets/topics/chart-336.jpg);}
[data-topic="cognitive-dysfunction"]{--tag-art:url(/assets/topics/alarm-clock-96.jpg);--tag-art-lg:url(/assets/topics/alarm-clock-336.jpg);}
[data-topic="kidney"]{--tag-art:url(/assets/topics/test-tube-96.jpg);--tag-art-lg:url(/assets/topics/test-tube-336.jpg);}
[data-topic="pancreatitis"]{--tag-art:url(/assets/topics/scale-96.jpg);--tag-art-lg:url(/assets/topics/scale-336.jpg);}
[data-topic="noise-phobia"]{--tag-art:url(/assets/topics/fireworks-96.jpg);--tag-art-lg:url(/assets/topics/fireworks-336.jpg);}
[data-topic="medicines"]{--tag-art:url(/assets/topics/capsule-96.jpg);--tag-art-lg:url(/assets/topics/capsule-336.jpg);}
[data-topic="sitter"]{--tag-art:url(/assets/topics/dog-house-96.jpg);--tag-art-lg:url(/assets/topics/dog-house-336.jpg);}
[data-topic="seizures"]{--tag-art:url(/assets/topics/logbook-96.jpg);--tag-art-lg:url(/assets/topics/logbook-336.jpg);}
[data-topic="vet-visits"]{--tag-art:url(/assets/topics/vet-96.jpg);--tag-art-lg:url(/assets/topics/vet-336.jpg);}
[data-topic="arthritis"]{--tag-art:url(/assets/topics/scale-96.jpg);--tag-art-lg:url(/assets/topics/scale-336.jpg);}
[data-topic="cancer"]{--tag-art:url(/assets/topics/stethoscope-96.jpg);--tag-art-lg:url(/assets/topics/stethoscope-336.jpg);}
[data-topic="hyperthyroidism"]{--tag-art:url(/assets/topics/test-tube-96.jpg);--tag-art-lg:url(/assets/topics/test-tube-336.jpg);}
[data-topic="liver"]{--tag-art:url(/assets/topics/test-tube-96.jpg);--tag-art-lg:url(/assets/topics/test-tube-336.jpg);}
[data-topic="poisoning"]{--tag-art:url(/assets/topics/alarm-clock-96.jpg);--tag-art-lg:url(/assets/topics/alarm-clock-336.jpg);}
[data-topic="seniors"]{--tag-art:url(/assets/topics/dog-house-96.jpg);--tag-art-lg:url(/assets/topics/dog-house-336.jpg);}
.bl-coin{background:#fff var(--tag-art,none) center/cover no-repeat;}

.bl-home{display:block;}
.bl-home [hidden]{display:none!important;}
.bl-home a{text-decoration:none;}

/* hero */
.bl-home-hero{padding:clamp(36px,6vw,84px) clamp(20px,5vw,64px) clamp(44px,6vw,92px);}
body.bl .bl-home-hero :focus-visible{outline-color:var(--bl-mint);}
.bl-home-hero-in{max-width:var(--bl-w-home);margin:0 auto;display:flex;flex-wrap:wrap;gap:36px 56px;align-items:center;}
/* 780px: the drawing's text column, so the H1 breaks the same with or without the photo */
.bl-home-hero-text{flex:1 1 420px;min-width:0;max-width:780px;display:flex;flex-direction:column;gap:18px;}
.bl-home-hero .bl-eyebrow{letter-spacing:2.6px;}
.bl-home .bl-home-hero h1{margin:0;font-size:var(--bl-fs-h1-hero);line-height:1.02;letter-spacing:-1.2px;color:#fff;}
.bl-home-lead{margin:0;max-width:34em;font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:#D4ECE7;}
.bl-home-by{display:flex;align-items:center;gap:14px;margin-top:6px;align-self:flex-start;min-height:52px;border-radius:30px;}
body.bl a.bl-home-by,body.bl a.bl-home-by:hover{color:#fff;}
body.bl div.bl-home-by{color:#fff;}
a.bl-home-by:hover .bl-home-by-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
.bl-home-avatar{width:72px;height:72px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--bl-mint),var(--bl-mint-mid));color:var(--bl-ink);font-family:var(--bl-font-head);font-weight:900;font-size:19px;line-height:1;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.25);}
.bl-home-by-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.bl-home-by-name{font-family:var(--bl-font-head);font-weight:800;font-size:18px;line-height:1.25;}
.bl-home-by-line{font-size:15px;line-height:1.4;color:var(--bl-on-dark-soft);}
/* Nugget's taped photo (only when author.nuggetPhoto is set) */
.bl-taped{position:relative;flex:0 0 auto;width:clamp(220px,26vw,300px);margin:0 auto;padding:12px 12px 16px;background:var(--bl-notepaper);border-radius:6px;transform:rotate(3deg);box-shadow:0 24px 50px -12px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.08);}
.bl-taped::before{content:"";position:absolute;left:50%;top:-12px;width:92px;height:26px;margin-left:-46px;background:rgba(166,230,220,.75);transform:rotate(-4deg);border-radius:2px;}
.bl-taped img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:3px;}
.bl-taped figcaption{margin-top:12px;text-align:center;}
.bl-taped-cap{display:block;font-family:var(--bl-font-head);font-weight:800;font-size:16px;line-height:1.3;color:#12302C;}
.bl-taped-note{display:block;font-size:13.5px;line-height:1.4;color:var(--bl-muted);}

/* body: the drawing's 1120px box, side padding inside it */
.bl-home-body{max-width:var(--bl-w-home);margin:0 auto;padding:0 var(--bl-pad) clamp(56px,7vw,96px);}
.bl-home-chips{position:relative;z-index:1;margin-top:clamp(-26px,-2vw,-18px);}
body.bl a.bl-chip{color:var(--tag-ink,#33464D);}
.bl-home-chips .bl-chip[aria-current="true"]{--tag-bg:var(--bl-ink);--tag-ink:#fff;border-color:var(--bl-ink);}
.bl-home-chips .bl-chip--all:not([aria-current="true"]){--tag-bg:#fff;--tag-ink:var(--bl-ink);--tag-dot:var(--bl-mint-mid);border-color:rgba(15,59,54,.14);}
.bl-meta{font-size:var(--bl-fs-meta);line-height:1.4;color:var(--bl-muted);}
.bl-home-empty{margin:32px 0 0;font-size:var(--bl-fs-card);color:var(--bl-muted);}

/* the featured (newest) post: art panel + text, side by side from ~700px */
.bl-feature{margin-top:28px;}
.bl-feature-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));border-radius:var(--bl-r-big);overflow:hidden;color:inherit;background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(15,59,54,.06),0 22px 44px -16px rgba(15,59,54,.30);transition:transform .18s ease,box-shadow .18s ease;}
.bl-feature-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(15,59,54,.06),0 30px 56px -16px rgba(15,59,54,.36);}
body.bl a.bl-feature-card,body.bl a.bl-feature-card:hover,body.bl a.bl-card,body.bl a.bl-card:hover{color:var(--bl-body);}
.bl-feature-art{position:relative;isolation:isolate;min-height:290px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,var(--bl-teal),var(--bl-ink));}
.bl-feature-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(166,230,220,.12) 27px 28px);}
.bl-stamp{position:absolute;left:22px;top:20px;z-index:3;transform:rotate(-6deg);border:2px solid var(--bl-margin-red);border-radius:8px;padding:4px 10px;color:#FFD6D3;font-family:var(--bl-font-head);font-weight:900;font-size:13px;line-height:normal;letter-spacing:2px;text-transform:uppercase;}
.bl-coin--lg{position:relative;z-index:2;width:clamp(136px,14vw,168px);height:clamp(136px,14vw,168px);margin:44px 0;background-image:var(--tag-art-lg,none);box-shadow:0 0 0 8px var(--tag-bg,#E8ECEE),0 24px 44px -10px rgba(0,0,0,.5);}
/* the measuring jug, drawn in code (dog-drinking-too-much-water only) */
.bl-jug{position:relative;z-index:2;display:block;width:128px;height:150px;margin:36px 26px 44px 0;}
.bl-jug-handle{position:absolute;right:-22px;top:30px;width:40px;height:70px;border:8px solid rgba(234,250,246,.55);border-left:0;border-radius:0 30px 30px 0;}
.bl-jug-body{position:absolute;inset:0;overflow:hidden;border-radius:10px 10px 30px 30px;border:3px solid rgba(234,250,246,.75);background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.22) 30%,rgba(255,255,255,.06));box-shadow:0 24px 44px -10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.15);}
.bl-jug-water{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(166,230,220,.95),rgba(44,140,122,.95));}
.bl-jug-water::before{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;border-radius:50%;background:#CFF3EC;}
.bl-jug-glint{position:absolute;left:14px;top:16px;bottom:22px;width:7px;border-radius:4px;background:rgba(255,255,255,.45);}
.bl-jug-ticks{position:absolute;right:0;top:0;bottom:0;width:64px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-end;}
.bl-jug-ticks>span{display:flex;align-items:center;gap:6px;}
.bl-jug-ticks b{font-family:var(--bl-font-head);font-weight:900;font-size:12px;line-height:1;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.bl-jug-ticks i{display:block;width:18px;height:3px;border-radius:2px;background:#fff;}
.bl-jug-mark{position:absolute;z-index:1;left:22px;bottom:16px;font-family:var(--bl-font-head);font-weight:900;font-size:40px;line-height:1;color:rgba(166,230,220,.22);white-space:nowrap;}
.bl-feature-text{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(22px,3vw,40px);}
.bl-feature-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.bl-home .bl-feature-title{margin:0;font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.5px;color:var(--bl-ink);}
.bl-feature-sum{margin:0;font-size:17.5px;line-height:1.6;color:#34504B;}
.bl-feature-text .bl-btn{margin-top:6px;align-self:flex-start;}
.bl-feature-card:hover .bl-btn{transform:translateY(-1px);}
.bl-arrow{font-size:19px;line-height:1;}

/* "More from the notebook" */
.bl-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:clamp(40px,5vw,64px) 0 18px;}
.bl-more-head .bl-meta{white-space:nowrap;}
.bl-home .bl-more-head h2{margin:0;font-size:clamp(24px,2.6vw,30px);line-height:normal;color:var(--bl-ink);}
.bl-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px;}
.bl-cards>li{display:flex;min-width:0;}
.bl-card{display:flex;flex-direction:column;gap:14px;width:100%;padding:22px;border-radius:var(--bl-r-card);color:inherit;background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:var(--bl-clay-shadow);transition:transform .18s ease,box-shadow .18s ease;}
.bl-card:hover{transform:translateY(-3px);box-shadow:var(--bl-clay-shadow-hover);}
.bl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.bl-card-top .bl-tag{white-space:normal;}
.bl-card-top .bl-coin{margin-left:auto;}
.bl-home .bl-card-title{margin:0;font-size:22px;line-height:1.2;color:var(--bl-ink);}
.bl-card-sum{margin:0;font-size:16.5px;line-height:1.55;color:#34504B;}
.bl-card-meta{margin-top:auto;padding-top:12px;border-top:1px solid rgba(15,59,54,.08);font-size:var(--bl-fs-meta);line-height:1.4;color:var(--bl-muted);}

@media (prefers-reduced-motion:reduce){
  .bl-feature-card,.bl-card{transition:none;}
  .bl-feature-card:hover,.bl-card:hover,.bl-feature-card:hover .bl-btn{transform:none;}
}
@media print{
  .bl-home-chips{display:none!important;}
}

/* ---------- 9. article (every post and library page, layouts/article.njk) ----------
   Handoff Blog-Article: a full-width notebook header (← All posts, tag, H1, summary, byline,
   dates + read time), then the text column (680px of 18.5px/1.7 Plex) with the boxes, and on
   wide screens (1024px up) the sticky side rail ("In this post" + the author card). After the
   article, the "Read next" band. Hero and body share one 1040px box, so the H1 and the text
   start on the same line; text 680 + rail 260 sit at its two edges.
   The old article classes (.byline .dek .prose .box .call-vet .call-now .sources .fineprint
   .appbox .vet-note .signup) stay in the markup (the checks and articles.css know them) and
   are restyled here under .bl-article, which outranks articles.css. */
.bl-article{--bl-art-pad:clamp(20px,5vw,64px);display:block;}

/* the notebook header */
.bl-article .bl-art-hero{background:radial-gradient(120% 100% at 90% 0%,var(--bl-teal) 0%,var(--bl-hero-mid) 50%,var(--bl-hero-deep) 100%);padding:clamp(28px,5vw,72px) var(--bl-art-pad) clamp(36px,5vw,72px);}
body.bl .bl-art-hero :focus-visible{outline-color:var(--bl-mint);}
.bl-art-hero-in{max-width:var(--bl-w-article);margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.bl-back{display:flex;flex-wrap:wrap;align-items:center;}
body.bl .bl-back a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--bl-font-head);font-weight:800;font-size:16px;line-height:1.2;color:var(--bl-mint);text-decoration:none;}
body.bl .bl-back a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.bl-tag--kind{--tag-bg:#E6F4F0;--tag-ink:var(--bl-ink);}
.bl-article .bl-art-hero h1{margin:0;max-width:18em;font-size:var(--bl-fs-h1-article);line-height:1.05;letter-spacing:-1px;color:#fff;}
.bl-article .bl-art-hero .dek{margin:0;max-width:36em;font-weight:400;font-size:clamp(18px,1.8vw,21px);line-height:1.55;color:#D4ECE7;}
.bl-article .byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:8px 0 0;padding:0;border:0;}
body.bl a.bl-by{display:flex;align-items:center;gap:12px;min-height:48px;border-radius:30px;color:#fff;text-decoration:none;}
body.bl a.bl-by:hover{color:#fff;}
a.bl-by:hover .bl-by-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
.bl-avatar{width:60px;height:60px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--bl-mint),var(--bl-mint-mid));color:var(--bl-ink);font-family:var(--bl-font-head);font-weight:900;font-size:17px;line-height:1;box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.bl-avatar--sm{width:48px;height:48px;font-size:15px;box-shadow:none;}
.bl-by-t{display:flex;flex-direction:column;}
.bl-by-k{font-size:14px;line-height:1.3;color:var(--bl-on-dark-soft);}
.bl-by-name{font-family:var(--bl-font-head);font-weight:800;font-size:18px;line-height:1.25;}
.bl-when{margin:0;font-size:15.5px;line-height:1.5;color:#D4ECE7;}

/* the body: text column, then the rail from 1024px up */
.bl-art-body{max-width:var(--bl-w-article);margin:0 auto;padding:clamp(28px,4vw,56px) clamp(18px,4vw,40px) clamp(48px,6vw,80px);}
.bl-art-main{min-width:0;max-width:var(--bl-w-text);font-size:var(--bl-fs-body);line-height:1.7;color:var(--bl-body);}
.bl-rail{display:none;}

/* the text */
.bl-article .prose{font-size:var(--bl-fs-body);line-height:1.7;color:var(--bl-body);}
.bl-article .prose > p{margin:0 0 var(--bl-gap-para);font-weight:400;font-size:inherit;line-height:inherit;color:inherit;}
/* a post's opening paragraph: 21px. No opening quote mark: the design's big teal one read as a quote
   that never closes (Brett, 18 Oct 2026: "there's no finishing quotations. It seems weird to me.") */
.bl-article--post .prose > p:first-child{font-size:var(--bl-fs-lead);line-height:1.6;color:#12302C;}
.bl-article .prose > h2{margin:44px 0 14px;font-size:var(--bl-fs-h2);line-height:1.2;letter-spacing:normal;color:var(--bl-ink);}
.bl-article .prose > h3{margin:30px 0 10px;font-size:var(--bl-fs-h3);line-height:1.25;color:var(--bl-ink);}
.bl-article .prose strong{font-weight:700;color:var(--bl-ink);}
.bl-article .prose a{text-decoration-thickness:1.5px;text-underline-offset:3px;}
.bl-article .prose > blockquote{margin:0 0 var(--bl-gap-para);padding:4px 0 4px 20px;border-left:4px solid var(--bl-mint-mid);}
.bl-article .prose > hr{border:0;border-top:1px solid rgba(15,59,54,.12);margin:36px 0;}
/* lists: mint dots with a halo; numbered steps in 38px teal coins */
.bl-article .prose > ul,.bl-article .prose > ol{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;}
.bl-article .prose > ul{gap:10px;}
.bl-article .prose > ol{gap:14px;counter-reset:bl-step;}
.bl-article .prose > ul > li,.bl-article .prose > ol > li{position:relative;margin:0;font-weight:400;font-size:inherit;line-height:inherit;color:inherit;}
.bl-article .prose > ul > li{padding-left:24px;}
.bl-article .prose > ul > li::before{content:"";position:absolute;left:0;top:calc(.85em - 5px);width:10px;height:10px;border-radius:50%;background:var(--bl-mint-mid);box-shadow:0 0 0 4px #DDF3EE;}
.bl-article .prose > ol > li{counter-increment:bl-step;min-height:38px;padding:4px 0 0 54px;}
.bl-article .prose > ol > li::before{content:counter(bl-step);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--bl-btn-top),var(--bl-btn-bottom));color:#fff;font-family:var(--bl-font-head);font-weight:900;font-size:18px;line-height:1;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 6px 12px -4px rgba(23,89,79,.5);}

/* boxes: shared spacing */
.bl-article .box{margin:34px 0;}
.bl-article .embed-placeholder{border-radius:20px;}

/* the WagNote box ({% midbox %}): dark teal, ruled, the app icon on a paper tile, badges */
.bl-article .bl-appbox{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin:34px 0;padding:clamp(22px,3vw,32px);border-radius:var(--bl-r-big);background:radial-gradient(120% 120% at 100% 0%,var(--bl-teal),var(--bl-ink) 70%);color:#fff;box-shadow:0 24px 48px -20px rgba(15,59,54,.6);}
.bl-article .bl-appbox::before{content:"";position:absolute;inset:0;z-index:-1;background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(166,230,220,.09) 31px 32px);pointer-events:none;}
body.bl .bl-appbox :focus-visible{outline-color:var(--bl-mint);}
.bl-appbox-logo{width:64px;height:64px;border-radius:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--bl-paper);box-shadow:0 10px 22px rgba(0,0,0,.3);}
.bl-appbox-logo img{display:block;width:54px;height:54px;border-radius:13px;}
.bl-appbox-text{flex:1 1 260px;min-width:0;}
.bl-article .bl-appbox .box-label{display:block;margin:0 0 4px;font-family:var(--bl-font-head);font-weight:900;font-size:var(--bl-fs-eyebrow);line-height:1.3;letter-spacing:2.2px;text-transform:uppercase;color:var(--bl-mint);}
.bl-article .bl-appbox .bl-appbox-h{margin:0 0 6px;font-size:20px;line-height:1.25;color:#fff;}
.bl-article .bl-appbox p{margin:0;font-weight:400;font-size:18px;line-height:1.5;color:var(--bl-on-dark);}

/* "What to track at home": a clay card of tiles */
.bl-track{margin:34px 0;padding:clamp(22px,3vw,30px);border-radius:var(--bl-r-big);background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(15,59,54,.05),0 20px 40px -18px rgba(15,59,54,.32);}
.bl-box-head{display:flex;align-items:center;gap:14px;margin:0 0 16px;}
.bl-track-coin{width:48px;height:48px;border-radius:50%;flex:0 0 auto;background:#fff url(/assets/topics/logbook-96.jpg) center/cover no-repeat;box-shadow:0 0 0 4px #DDF3EE;}
.bl-article .bl-track h2{margin:0;font-size:23px;line-height:1.2;color:var(--bl-ink);}
.bl-track-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;}
.bl-track-tiles li{margin:0;padding:14px 16px;border-radius:18px;background:var(--bl-tile);border:1px solid rgba(30,107,95,.12);}
.bl-track-tiles b{display:block;font-family:var(--bl-font-head);font-weight:800;font-size:18px;line-height:1.3;color:var(--bl-ink);}
.bl-track-tiles span{display:block;margin-top:2px;font-size:16px;line-height:1.5;color:#34504B;}

/* "Questions to ask your vet": notebook paper, a red margin line, an empty box per line */
.bl-article .bl-ask h2{margin:44px 0 14px;font-size:var(--bl-fs-h2);line-height:1.2;color:var(--bl-ink);}
.bl-notepaper{position:relative;overflow:hidden;margin:0 0 30px;padding:18px 22px 18px 54px;border-radius:var(--bl-r-card);background:var(--bl-notepaper);border:1px solid rgba(15,59,54,.10);box-shadow:0 14px 30px -18px rgba(15,59,54,.3);}
.bl-notepaper::before{content:"";position:absolute;top:0;bottom:0;left:36px;width:2px;background:rgba(232,116,111,.5);}
.bl-qs{list-style:none;margin:0;padding:0;}
.bl-qs li{position:relative;min-height:52px;margin:0;padding:12px 0 12px 36px;}
.bl-qs li::before{content:"";position:absolute;left:0;top:calc(12px + .85em - 11px);width:22px;height:22px;box-sizing:border-box;border-radius:6px;border:2px solid var(--bl-btn-top);background:#fff;}
.bl-qs li::after{content:"";position:absolute;left:-54px;right:-22px;bottom:0;height:1px;background:rgba(30,107,95,.14);}

/* "When to call your vet" + "Call now": side by side, stacked on phones */
.bl-callpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin:34px 0 30px;}
.bl-article .bl-callpair .box{position:relative;margin:0;padding:20px 22px;border-radius:var(--bl-r-card);}
/* the hidden "When to call" / "Call now" headings sit at the box's top edge, so the rail's
   links to #h-call / #h-now land with the whole box below the sticky header */
.bl-callpair .sr-h{top:0;left:0;}
.bl-article .bl-callpair .call-vet{background:linear-gradient(180deg,var(--bl-call-top),var(--bl-call-bottom));border:1.5px solid var(--bl-call-edge);box-shadow:0 14px 28px -18px rgba(140,100,0,.45);color:var(--bl-call-ink);}
.bl-article .bl-callpair .call-now{background:linear-gradient(180deg,var(--bl-now-top),var(--bl-now-bottom));border:1.5px solid var(--bl-now-edge);box-shadow:0 14px 28px -18px rgba(140,30,20,.45);color:var(--bl-now-ink);}
.bl-article .bl-callpair .box-label{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--bl-font-head);font-weight:900;font-size:21px;line-height:1.2;letter-spacing:0;text-transform:none;color:inherit;}
.bl-box-ico{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--bl-font-head);font-weight:900;font-size:19px;line-height:1;}
.call-vet .bl-box-ico{background:#F2D27A;color:var(--bl-call-ink);}
.call-now .bl-box-ico{background:var(--bl-now-badge);color:#fff;box-shadow:0 0 0 4px rgba(201,70,59,.18);}
.bl-article .bl-box-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.bl-article .bl-callpair .box p,.bl-article .bl-callpair .box li{margin:0 0 10px;font-weight:400;font-size:17px;line-height:1.55;color:inherit;}
.bl-article .bl-callpair .box p:last-child,.bl-article .bl-callpair .box li:last-child{margin-bottom:0;}
.bl-article .bl-callpair .box ul,.bl-article .bl-callpair .box ol{margin:0 0 10px;padding-left:20px;}
.bl-article .bl-callpair .box a{color:inherit;}

/* library pages: the Vet's note */
.bl-article .vet-note{margin:0 0 34px;padding:22px 24px;border-radius:var(--bl-r-card);background:linear-gradient(180deg,#F1F8F6,#E4F2EE);border:1px solid rgba(30,107,95,.14);border-left:6px solid var(--bl-btn-top);box-shadow:0 14px 30px -18px rgba(15,59,54,.3);}
.bl-article .vet-note .box-label{margin:0 0 10px;font-family:var(--bl-font-head);font-weight:900;font-size:var(--bl-fs-eyebrow);letter-spacing:2.2px;color:var(--bl-teal);}
.bl-article .vet-note .note{font-weight:400;font-size:var(--bl-fs-body);line-height:1.65;color:var(--bl-body);}
.bl-article .vet-note .note p{margin:0 0 14px;font-weight:400;font-size:inherit;line-height:inherit;color:inherit;}
.bl-article .vet-note .note p:last-child{margin-bottom:0;}
.bl-article .vet-note .sig{margin-top:12px;font-family:var(--bl-font-head);font-weight:800;font-size:18px;color:var(--bl-teal);}

/* the sign-up box (only once site.newsletter.live; the preview shows a placeholder) */
.bl-article .signup{padding:clamp(22px,3vw,30px);border-radius:var(--bl-r-big);background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:var(--bl-clay-shadow);}
.bl-article .signup .box-label{font-family:var(--bl-font-head);font-weight:900;font-size:var(--bl-fs-eyebrow);letter-spacing:2.2px;color:var(--bl-teal);}
.bl-article .signup h2{margin:0 0 6px;font-size:23px;line-height:1.2;color:var(--bl-ink);}
.bl-article .signup .who{font-weight:400;font-size:15px;color:var(--bl-muted);}
.bl-article .signup input[type=email]{min-height:48px;border:1px solid rgba(15,59,54,.18);border-radius:14px;background:#fff;box-shadow:inset 0 1px 2px rgba(15,59,54,.06);font-family:var(--bl-font-body);font-weight:400;font-size:17px;color:var(--bl-body);}
.bl-article .signup button{min-height:48px;border:1px solid var(--bl-teal);border-radius:var(--bl-r-pill);background:linear-gradient(180deg,var(--bl-btn-top),var(--bl-btn-bottom));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),0 8px 18px -6px rgba(23,89,79,.6);font-family:var(--bl-font-head);font-weight:800;font-size:17px;}
.bl-article .signup .consent{font-weight:400;font-size:15px;color:var(--bl-muted);}

/* the end: Sources (small), the disclaimer and the AI-use line, under a hairline */
.bl-art-end{margin-top:44px;padding-top:22px;border-top:1px solid rgba(15,59,54,.12);}
.bl-article .sources{margin:0;padding:0;background:none;border-radius:0;box-shadow:none;}
.bl-article .sources h2{margin:0 0 10px;font-family:var(--bl-font-head);font-weight:900;font-size:var(--bl-fs-eyebrow);line-height:1.3;letter-spacing:2px;text-transform:uppercase;color:var(--bl-muted);}
.bl-article .sources ol{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:6px;}
.bl-article .sources li{margin:0;font-weight:400;font-size:15px;line-height:1.55;color:var(--bl-muted);overflow-wrap:anywhere;}
.bl-article .fineprint{margin:18px 0 0;padding:0;border:0;}
.bl-art-end > .fineprint:first-child{margin-top:0;}
.bl-article .fineprint p{margin:0 0 10px;font-style:normal;font-weight:400;font-size:var(--bl-fs-small);line-height:1.55;color:var(--bl-muted);}
.bl-article .fineprint p:last-child{margin-bottom:0;}
body.bl .bl-article .sources a,body.bl .bl-article .fineprint a{color:var(--bl-teal);}
body.bl .bl-article .sources a:hover,body.bl .bl-article .fineprint a:hover{color:var(--bl-ink);}

/* the side rail: "In this post" (current section in mint, assets/blog.js) + the author card.
   Sticky under the header; if it is ever taller than the window it scrolls on its own
   (the padding/negative margin leaves room for the TOC card's shadow). */
.bl-toc{padding:18px;border-radius:22px;background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:inset 0 1px 0 #fff,0 14px 28px -16px rgba(15,59,54,.28);}
.bl-toc-h{margin:0 0 8px;font-family:var(--bl-font-head);font-weight:900;font-size:var(--bl-fs-eyebrow);line-height:normal;letter-spacing:2px;text-transform:uppercase;color:var(--bl-muted);}
.bl-toc ol{list-style:none;margin:0;padding:0;}
.bl-toc li{margin:0;}
body.bl .bl-toc a{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 -10px;padding:4px 10px;border-radius:10px;font-weight:500;font-size:15.5px;line-height:1.3;color:var(--bl-muted);text-decoration:none;}
body.bl .bl-toc a::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:rgba(15,59,54,.25);}
body.bl .bl-toc a:hover{color:var(--bl-ink);background:rgba(30,107,95,.06);}
body.bl .bl-toc a.is-current{font-weight:700;color:var(--bl-ink);background:#DDF3EE;}
body.bl .bl-toc a.is-current::before{background:var(--bl-btn-top);}
.bl-author-card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:22px;background:var(--bl-ink);color:var(--bl-on-dark);}
body.bl .bl-author-card :focus-visible{outline-color:var(--bl-mint);}
.bl-author-who{display:flex;align-items:center;gap:10px;}
.bl-author-name{font-family:var(--bl-font-head);font-weight:800;font-size:17px;line-height:1.25;color:#fff;}
.bl-author-line{margin:0;font-size:15px;line-height:1.5;color:var(--bl-on-dark-soft);}
body.bl a.bl-author-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;margin:-6px 0 -8px;font-weight:700;font-size:15px;color:var(--bl-mint);}
body.bl a.bl-author-link:hover{color:#fff;}

@media (min-width:1024px){
  .bl-art-body{display:grid;grid-template-columns:minmax(0,var(--bl-w-text)) var(--bl-w-rail);justify-content:space-between;column-gap:56px;align-items:start;}
  .bl-rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--bl-header-h) + 4px + 24px);max-height:calc(100vh - var(--bl-header-h) - 4px - 48px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,59,54,.22) transparent;margin:-6px -16px 0;padding:6px 16px 12px;}
}

/* "Read next": a pale band of cards (three a row) after the article */
.bl-next{background:var(--bl-band);border-top:1px solid rgba(15,59,54,.08);padding:clamp(36px,5vw,64px) clamp(16px,4vw,48px);}
.bl-next-in{max-width:var(--bl-w-article);margin:0 auto;}
.bl-article .bl-next h2{margin:0 0 18px;font-size:clamp(24px,2.6vw,30px);line-height:normal;color:var(--bl-ink);}
.bl-next-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;}
.bl-next-cards > li{display:flex;min-width:0;}
.bl-next a{text-decoration:none;}
.bl-card.bl-next-card{gap:12px;padding:20px;box-shadow:inset 0 1px 0 #fff,0 14px 30px -14px rgba(15,59,54,.26);}
.bl-card.bl-next-card:hover{box-shadow:var(--bl-clay-shadow-hover);}
.bl-next .bl-coin{width:40px;height:40px;}
.bl-article .bl-next-title{margin:0;font-size:20px;line-height:1.22;color:var(--bl-ink);}
.bl-next-meta{margin-top:auto;font-size:var(--bl-fs-meta);line-height:1.4;color:var(--bl-muted);}

/* the slim "Get the app" bar at the bottom of phone screens (articles only), in this look */
@media (max-width:700px){
  body.bl.has-phone-bar{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
  body.bl .phone-bar{gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(250,248,242,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--bl-hairline);box-shadow:0 -10px 24px -12px rgba(15,59,54,.25);}
  body.bl .phone-bar .pb-text{font-family:var(--bl-font-head);font-weight:900;font-size:16px;line-height:1.2;color:var(--bl-ink);}
  body.bl .phone-bar .pb-text small{font-family:var(--bl-font-body);font-weight:400;font-size:13.5px;line-height:1.35;color:var(--bl-muted);}
  body.bl .phone-bar a.pb-go{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--bl-teal);border-radius:var(--bl-r-pill);background:linear-gradient(180deg,var(--bl-btn-top),var(--bl-btn-bottom));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),0 8px 18px -6px rgba(23,89,79,.6);font-family:var(--bl-font-head);font-weight:800;font-size:16px;color:#fff;}
}
/* very narrow phones: the bar's second line wraps, so leave room for its taller height */
@media (max-width:360px){
  body.bl.has-phone-bar{padding-bottom:calc(80px + env(safe-area-inset-bottom));}
}

@media print{
  .bl-rail,.bl-next,.bl-back{display:none!important;}
  .bl-article .bl-art-hero{background:none;padding:0 0 12px;}
  .bl-art-hero::before,.bl-art-hero::after{content:none;}
  .bl-article .bl-art-hero h1,.bl-article .bl-art-hero .dek,.bl-when,body.bl a.bl-by,.bl-by-k{color:#000;}
  .bl-art-body{padding:12px 0 0;}
  .bl-track,.bl-notepaper,.bl-article .bl-callpair .box{box-shadow:none;}
}

/* ---------- 10. about (/about/, src/pages/about.njk) ----------
   Handoff Blog-About: notebook hero (eyebrow, H1 with the marker, lead, fact pills) beside
   the taped photo cards; then a 1080px column: "The pack at home" (clay) beside "What you
   won't find here" (dark, ruled), "Why I built WagNote", the numbered "How I write these
   pages" cards, the yellow medical note. Sizes are the drawing's (its cqw = vw here). */
.bl-about{display:block;}

/* hero */
.bl-about-hero{padding:clamp(36px,6vw,84px) clamp(20px,5vw,64px);}
body.bl .bl-about-hero :focus-visible{outline-color:var(--bl-mint);}
.bl-about-hero-in{max-width:var(--bl-w-about);margin:0 auto;display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center;}
.bl-about-hero-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px;}
.bl-about-hero .bl-eyebrow{letter-spacing:2.6px;}
.bl-about .bl-about-hero h1{margin:0;font-size:clamp(38px,6vw,64px);line-height:1.03;letter-spacing:-1.2px;color:#fff;}
.bl-about-lead{margin:0;max-width:34em;font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:#D4ECE7;}
/* fact pills: a big figure over a small label */
.bl-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.bl-facts li{display:flex;flex-direction:column;margin:0;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(166,230,220,.22);font-size:14.5px;line-height:1.35;color:var(--bl-on-dark-soft);}
.bl-facts b{font-family:var(--bl-font-head);font-weight:900;font-size:24px;line-height:1.1;color:#fff;}

/* the taped photo cards: Dr. K + Nugget SIDE BY SIDE, both whole (Brett, 17 Oct 2026: the cartoon was "hidden… by
   the other picture over the top of it" when they overlapped). With no photo of Nugget (author.nuggetPhoto empty)
   Dr. K's card stands alone, taped, centred. */
.bl-photos{position:relative;flex:0 1 500px;min-width:0;display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2vw,22px);margin:0 auto;padding:18px 4px 10px;}
.bl-photo{position:relative;flex:1 1 0;min-width:0;max-width:240px;margin:0;padding:10px 10px 14px;background:var(--bl-notepaper);border-radius:6px;}
.bl-photo--dr{transform:rotate(-3deg);box-shadow:0 20px 40px -12px rgba(0,0,0,.5);}
.bl-photo--nugget{margin-top:30px;transform:rotate(3deg);box-shadow:0 24px 50px -12px rgba(0,0,0,.55);}
.bl-photo--dr::before,.bl-photo--nugget::before,.bl-photos--one .bl-photo--dr::before{content:"";position:absolute;left:50%;top:-12px;width:86px;height:24px;margin-left:-43px;background:rgba(166,230,220,.75);transform:rotate(3deg);border-radius:2px;}
.bl-photo-ck{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:3px;background:linear-gradient(160deg,var(--bl-mint),var(--bl-mint-mid));color:var(--bl-ink);font-family:var(--bl-font-head);font-weight:900;font-size:54px;line-height:1;}
.bl-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:3px;}
.bl-photo-cap{display:block;margin-top:10px;text-align:center;font-family:var(--bl-font-head);font-weight:800;font-size:15px;line-height:1.3;color:#12302C;}
.bl-photos--one{padding:14px 0 8px;}
.bl-photos--one .bl-photo--dr{flex:0 0 auto;width:clamp(200px,22vw,250px);transform:rotate(4deg);box-shadow:0 24px 50px -12px rgba(0,0,0,.55);}
.bl-photos--one .bl-photo-ck{font-size:clamp(54px,5vw,64px);}

/* body: the drawing's 1080px column */
.bl-about-body{max-width:var(--bl-w-about);margin:0 auto;padding:clamp(36px,5vw,72px) var(--bl-pad) clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:clamp(36px,5vw,64px);}
.bl-about .bl-about-body h2{margin:0 0 12px;font-size:clamp(24px,2.6vw,30px);line-height:normal;color:var(--bl-ink);}
.bl-about-pack p,.bl-about-why p{margin:0 0 14px;font-size:18px;line-height:1.65;color:var(--bl-body);}
.bl-about-pack p:last-child,.bl-about-why p:last-child{margin-bottom:0;}

/* "The pack at home" beside "What you won't find here" (stacked under ~720px) */
.bl-about-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;align-items:stretch;}
.bl-about-pack{padding:clamp(22px,3vw,32px);border-radius:var(--bl-r-big);background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:inset 0 1px 0 #fff,0 20px 40px -18px rgba(15,59,54,.3);}
.bl-about-pack strong{color:var(--bl-ink);}
.bl-about-nots{position:relative;overflow:hidden;isolation:isolate;padding:clamp(22px,3vw,32px);border-radius:var(--bl-r-big);background:var(--bl-ink);color:var(--bl-on-dark);}
.bl-about-nots::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(166,230,220,.08) 31px 32px);}
.bl-about .bl-about-body .bl-about-nots h2{margin-bottom:14px;color:#fff;}
.bl-about-nots ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.bl-about-nots li{display:flex;align-items:center;gap:14px;margin:0;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(166,230,220,.2);font-family:var(--bl-font-head);font-weight:900;font-size:20px;line-height:1.25;color:#fff;}
.bl-x{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bl-mint);color:var(--bl-ink);font-size:18px;line-height:1;}
.bl-about-nots p{margin:16px 0 0;font-size:16px;line-height:1.5;color:var(--bl-on-dark-soft);}

/* "Why I built WagNote": the app icon on a paper tile beside the heading, the text under
   it (phones: under both; from 720px the icon keeps its own column). Text at the 680px
   reading width. */
.bl-about-why{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"ico head" "text text";gap:16px 18px;align-items:center;padding:clamp(22px,3vw,32px);border-radius:var(--bl-r-big);background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:var(--bl-clay-shadow);}
.bl-about .bl-about-body .bl-about-why h2{grid-area:head;margin:0;text-wrap:wrap;}
.bl-about-why p{grid-area:text;max-width:var(--bl-w-text);}
.bl-about-why-ico{grid-area:ico;align-self:start;width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--bl-paper);box-shadow:0 10px 22px -6px rgba(15,59,54,.35);}
.bl-about-why-ico img{display:block;width:54px;height:54px;border-radius:13px;}
@media (max-width:719px){.bl-about-why-ico{align-self:center;}}
@media (min-width:720px){
  .bl-about-why{grid-template-areas:"ico head" "ico text";column-gap:28px;row-gap:12px;align-items:start;}
}

/* "How I write these pages": numbered clay cards. Phones one column; from 640px two
   (a last odd card spans the row); from 960px the two long ones share the first row and
   the rest sit three across. */
.bl-about .bl-about-body .bl-about-how h2{margin-bottom:18px;font-size:clamp(26px,3vw,34px);}
.bl-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;}
.bl-how li{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:20px;border-radius:var(--bl-r-card);background:var(--bl-clay);border:var(--bl-clay-edge);box-shadow:inset 0 1px 0 #fff,0 14px 30px -16px rgba(15,59,54,.28);}
.bl-how-n{font-family:var(--bl-font-head);font-weight:900;font-size:44px;line-height:1;color:var(--bl-mint);-webkit-text-stroke:1.5px var(--bl-btn-top);}
.bl-about .bl-how h3{margin:0;font-size:20px;line-height:1.2;color:var(--bl-ink);}
.bl-how p{margin:0;font-size:16.5px;line-height:1.55;color:#34504B;}
.bl-how a{overflow-wrap:anywhere;}
@media (min-width:640px){
  .bl-how{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bl-how li:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (min-width:960px){
  .bl-how{grid-template-columns:repeat(6,minmax(0,1fr));}
  .bl-how li,.bl-how li:last-child:nth-child(odd){grid-column:span 2;}
  .bl-how li:nth-child(-n+2){grid-column:span 3;}
}

/* the yellow medical note (the "When to call your vet" colours) */
.bl-about-note{margin:0;padding:20px 22px;border-radius:var(--bl-r-card);background:linear-gradient(180deg,var(--bl-call-top),var(--bl-call-bottom));border:1.5px solid var(--bl-call-edge);color:var(--bl-call-ink);font-size:17px;line-height:1.6;}
body.bl .bl-about-note a{color:#6B4E00;font-weight:700;}
body.bl .bl-about-note a:hover{color:var(--bl-call-ink);}

@media print{
  .bl-photos{display:none!important;}
  .bl-about .bl-about-hero{background:none;padding:0 0 12px;}
  .bl-about-hero::before,.bl-about-hero::after,.bl-about-nots::before{content:none;}
  .bl-about .bl-about-hero h1,.bl-about-lead,.bl-about-hero .bl-eyebrow,.bl-facts li,.bl-facts b{color:#000;}
  .bl-about-nots,.bl-about .bl-about-body .bl-about-nots h2,.bl-about-nots li,.bl-about-nots p{background:none;color:#000;}
  .bl-about-pack,.bl-about-why,.bl-how li{box-shadow:none;}
}

/* Dr. K's picture in the round avatars (Brett's cartoon, 13 Oct 2026); the initials stay the fallback. */
.bl-avatar img,.bl-home-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;}
.bl-avatar:has(img),.bl-home-avatar:has(img){background:#FAF8F2;overflow:hidden;}

/* POST PHOTOS (Brett, 17 Oct 2026): two dog or cat photos in every post, taped-print style, slightly tilted, and the
   first one on the post's card in the list. */
.bl-pic{margin:30px auto;max-width:560px;padding:10px 10px 12px;background:var(--bl-notepaper);border-radius:6px;box-shadow:0 18px 36px -16px rgba(15,59,54,.45),0 1px 0 rgba(0,0,0,.05);}
.bl-pic--a{transform:rotate(-1.2deg);}
.bl-pic--b{transform:rotate(1.4deg);}
.bl-pic img{display:block;width:100%;height:auto;max-height:540px;object-fit:cover;border-radius:3px;}
.bl-card--pic{padding-top:12px;}
.bl-card-pic{display:block;margin:0 -10px 2px;border-radius:calc(var(--bl-r-card) - 8px);overflow:hidden;aspect-ratio:4/3;background:#E9E4D8;}
.bl-card-pic img{display:block;width:100%;height:100%;object-fit:cover;}
.bl-feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
@media (prefers-reduced-motion:no-preference){.bl-card--pic:hover .bl-card-pic img{transform:scale(1.03);transition:transform .3s ease;}}

/* THE PACK (Brett's four dogs, 17 Oct 2026): each dog's paragraph with that dog's own photo beside it
   (Nugget, Sugar, Chewy and Roo, from the photos Brett sent). */
.bl-dog{display:flex;align-items:flex-start;gap:16px;margin:0 0 14px;}
.bl-dog:last-child{margin-bottom:0;}
.bl-dog p{margin:0;}
.bl-dog-pic{flex:0 0 auto;width:clamp(84px,14vw,112px);height:auto;aspect-ratio:1/1;object-fit:cover;padding:5px 5px 8px;background:var(--bl-notepaper);border-radius:5px;box-shadow:0 10px 22px -10px rgba(15,59,54,.5);transform:rotate(-2deg);}
.bl-dog:nth-of-type(even) .bl-dog-pic{transform:rotate(2deg);}