/* ==========================================================================
   Porch Dog Supply Co. — a Tramel Farms company
   Production stylesheet wired from JT's Claude Design canvases.
   Design values are exact at >=1280px; breakpoints below only degrade.
   ========================================================================== */

:root{
  --ink:#16120e;          /* page dark */
  --ink-deep:#0f0c09;     /* chrome dark (header/footer/strips) */
  --ink-dark:#14110d;     /* type on cream */
  --cream:#f2ece1;        /* page cream */
  --cream-warm:#f7f1e6;   /* cream on rust */
  --tan:#e8b57e;          /* link tan */
  --rust:#7a3f1d;         /* Tramel rust */
  --ember:#c2703a;        /* eyebrow ember */
  --sand:#f0c99a;         /* hero eyebrow */
  --muted:#8d8371;
  --muted-2:#a2967f;
  --muted-3:#6d6353;
  --muted-4:#5f564a;
  --body-cream:#d9cdb2;
  --body-warm:#d9c7a8;
  --body-dark:#3d352b;
  --line:#2b231b;         /* hairline on dark */
  --line-2:#3a2e22;
  --line-cream:rgba(20,17,13,.28);
  --hatch-cream:repeating-linear-gradient(45deg,#e6dbc4 0 10px,#eee5d3 10px 20px);
  --hatch-dark:repeating-linear-gradient(45deg,#1c1712 0 10px,#241d17 10px 20px);
  --hatch-rust:repeating-linear-gradient(45deg,#6a3616 0 10px,#7f4520 10px 20px);
  --pad:40px;             /* page gutter */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);overflow-x:hidden}
h1,h2,h3,h4{margin:0}
p{margin:0}
/* height:auto is load-bearing — the width/height attributes on every <img> reserve
   layout space, but without this the presentational height hint survives and any
   rule that sets only width stretches the picture (the department signs and the
   footer badge both did). Rules below that set an explicit height still win. */
img{display:block;max-width:100%;height:auto}
a{color:var(--tan);text-decoration:none}
a:hover{color:#f5efdf}

/* Font systems — homepage uses Bevan/Libre Baskerville/Cutive Mono,
   department pages use Archivo/Source Serif 4. Both are JT's, per page. */
body.hp{font-family:'Libre Baskerville',Georgia,serif}
body.dp{font-family:'Source Serif 4',Georgia,serif}

.wrap{width:100%;max-width:1280px;margin:0 auto;background:var(--ink);color:var(--cream)}

/* ---------- shared: skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--cream);color:var(--ink-dark);padding:12px 18px}
.skip:focus{left:0}

/* ==========================================================================
   NAV — same link set site-wide, styled in each page's own type system
   ========================================================================== */
.nav{padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;
  background:var(--ink-deep);border-bottom:1px solid var(--line)}
.hp .nav{height:84px}
.dp .nav{height:78px}
.nav-mark{display:block;flex:none}
/* width:auto keeps the 760x507 intrinsic aspect whichever height rule wins below.
   Height is the only thing that should ever size the wordmark. */
.nav-mark img{width:auto;filter:brightness(0) invert(1) sepia(.5) saturate(2) hue-rotate(-15deg)}
.hp .nav-mark img{height:68px}
.dp .nav-mark img{height:70px}

.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{white-space:nowrap}
.hp .nav-links{font:400 11px 'Cutive Mono',monospace;letter-spacing:.18em}
.hp .nav-links a{color:var(--muted-2)}
.hp .nav-links a.is-key{color:var(--tan)}
.hp .nav-links a:hover{color:var(--cream)}
.dp .nav-links{font-family:Archivo,system-ui,sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.dp .nav-links a{font-weight:400;color:var(--muted-2)}
.dp .nav-links a.is-here{font-weight:700;color:var(--cream)}
.dp .nav-links a:hover{color:var(--cream)}

/* mobile disclosure menu (no JS) */
.nav-menu{display:none;position:relative}
/* Measured 45px tall at 390px — it is the only navigation affordance on a
   phone, so it has to clear the 44px touch minimum. */
.nav-menu>summary{list-style:none;cursor:pointer;padding:15px 16px;border:1px solid #4a3a29;color:var(--cream);
  font:400 11px 'Cutive Mono',monospace;letter-spacing:.18em}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu[open]>summary{background:var(--cream);color:var(--ink-dark);border-color:var(--cream)}
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:230px;
  background:var(--ink-deep);border:1px solid #4a3a29;padding:8px 0;box-shadow:0 22px 46px rgba(0,0,0,.6)}
.nav-menu-panel a{display:block;padding:15px 20px;color:var(--cream);
  font:400 12px 'Cutive Mono',monospace;letter-spacing:.16em}
.nav-menu-panel a:hover{background:#1c1712;color:var(--tan)}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* --- hero --- */
.hp-hero{position:relative;height:700px;overflow:hidden}
.hp-hero>img,.hp-hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-hero-scrim{position:absolute;inset:0;
  background:linear-gradient(rgba(15,12,9,.5) 0%,rgba(15,12,9,.08) 34%,rgba(15,12,9,.45) 72%,rgba(15,12,9,.88) 100%)}
.hp-hero-body{position:relative;height:100%;padding:0 var(--pad) 54px;
  display:flex;flex-direction:column;justify-content:flex-end;max-width:900px}
.hp-hero-eyebrow{font:400 11px 'Cutive Mono',monospace;letter-spacing:.26em;color:var(--sand)}
.hp-hero h1{font:400 58px/1.06 Bevan,serif;text-transform:uppercase;margin-top:18px;letter-spacing:0}
.hp-hero-sub{font:700 20px/1.55 'Libre Baskerville',serif;color:#f2e6cf;margin-top:24px}

/* --- department strip (6 across) --- */
.hp-strip{background:var(--ink-deep);padding:0 var(--pad);display:flex;align-items:stretch}
.hp-strip a{flex:1;padding:20px 18px 22px;border-right:1px solid var(--line);color:var(--cream)}
.hp-strip a:first-child{padding-left:0}
.hp-strip a:last-child{padding-right:0;border-right:0}
.hp-strip .n,.hp-strip .t,.hp-strip .d{display:block}
.hp-strip .n{font:400 10px 'Cutive Mono',monospace;letter-spacing:.18em;color:var(--muted-3)}
.hp-strip a:first-child .n,.hp-strip a:last-child .n{color:var(--ember)}
.hp-strip .t{font:400 20px/1.06 Bevan,serif;text-transform:uppercase;color:var(--cream);margin-top:7px}
.hp-strip a:last-child .t{color:var(--tan)}
.hp-strip .d{font:400 13px/1.4 'Libre Baskerville',serif;color:var(--muted);margin-top:7px}
.hp-strip a:hover .t{color:var(--tan)}

/* --- teddy band --- */
.hp-band{position:relative;height:480px;overflow:hidden}
.hp-band>img,.hp-band>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-band-scrim{position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(15,12,9,.88) 0%,rgba(15,12,9,.6) 36%,rgba(15,12,9,.18) 66%,rgba(15,12,9,.02) 100%)}
.hp-band-body{position:relative;height:100%;padding:0 var(--pad);max-width:680px;
  display:flex;flex-direction:column;justify-content:center}
.hp-band h2{font:italic 700 50px/1.14 'Libre Baskerville',serif;margin-top:18px}
.hp-band p{font:400 18px/1.62 'Libre Baskerville',serif;color:#eadfc9;margin-top:18px;max-width:52ch;text-wrap:pretty}
/* Label rule must outrank `.hp-band p` above it — it is a mono eyebrow, not body copy. */
.hp-band p.hp-band-eyebrow{font:400 11px 'Cutive Mono',monospace;letter-spacing:.24em;color:var(--sand);margin-top:0;max-width:none}

/* --- buttons --- */
.btn{display:inline-block;padding:15px 28px;font:400 14px Bevan,serif;letter-spacing:.1em;text-transform:uppercase}
.btn-cream{background:var(--cream);color:var(--ink-dark)}
.btn-cream:hover{background:#fff;color:var(--ink-dark)}
.btn-dark{background:var(--ink-dark);color:var(--cream)}
.btn-dark:hover{background:#000;color:var(--cream)}
.btn-warm{background:var(--cream-warm);color:var(--ink-dark)}
.btn-warm:hover{background:#fff;color:var(--ink-dark)}
.hp-band .btn{align-self:flex-start;margin-top:26px}

/* --- section head rule (cream + dark variants) --- */
.hp-sec{padding:48px var(--pad) 52px}
.hp-sec-cream{background:var(--cream);color:var(--ink-dark)}
.hp-sec-dark{background:var(--ink)}
.hp-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:10px;gap:24px}
.hp-sec-cream .hp-head{border-bottom:2px solid var(--ink-dark)}
.hp-sec-dark .hp-head{border-bottom:2px solid var(--cream)}
.hp-head h2{font:400 22px Bevan,serif;text-transform:uppercase;letter-spacing:.14em}
.hp-head span{font:400 11px 'Cutive Mono',monospace;letter-spacing:.16em;padding-bottom:3px;text-align:right}
.hp-sec-cream .hp-head span{color:var(--muted-3)}
.hp-sec-dark .hp-head span{color:var(--muted)}

/* --- off the porch rail (5 across) --- */
.hp-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:32px}
.hp-rail img{width:100%;height:158px;object-fit:cover}
.hp-rail .name{font:700 18px/1.28 'Libre Baskerville',serif;margin-top:14px}
.hp-rail .meta{font:400 12px 'Cutive Mono',monospace;color:var(--rust);letter-spacing:.1em;margin-top:7px}
.hp-rail p{font:400 14px/1.55 'Libre Baskerville',serif;color:var(--body-dark);margin-top:7px}
.slot-cream{height:158px;background:var(--hatch-cream);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px}
.slot-cream span{font:400 10px 'Cutive Mono',monospace;letter-spacing:.14em;color:#8b8271}

/* --- department split rows --- */
.hp-split{display:grid;align-items:stretch}
.hp-split-r{grid-template-columns:1fr 540px}   /* copy left, art right */
.hp-split-l{grid-template-columns:540px 1fr}   /* art left, copy right */
.hp-split-dark{background:var(--ink)}
.hp-split-cream{background:var(--cream);color:var(--ink-dark)}
.hp-split-art{position:relative;overflow:hidden;min-height:520px}
.hp-split-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-split-copy{padding:48px 44px 52px var(--pad)}
.hp-split-l .hp-split-copy{padding:48px var(--pad) 52px 44px}
.hp-eyebrow{display:flex;align-items:baseline;gap:14px}
.hp-eyebrow span{font:400 11px 'Cutive Mono',monospace;letter-spacing:.2em}
.hp-eyebrow .rule{width:36px;height:1px;flex:none}
.hp-split-dark .hp-eyebrow span{color:var(--ember)}
.hp-split-dark .hp-eyebrow .rule{background:#4a3a29}
.hp-split-cream .hp-eyebrow span{color:var(--rust)}
.hp-split-cream .hp-eyebrow .rule{background:rgba(20,17,13,.3)}
.hp-split h2{font:400 58px/.98 Bevan,serif;text-transform:uppercase;margin-top:16px}
.hp-split .lede{font:400 18px/1.62 'Libre Baskerville',serif;margin-top:18px;max-width:50ch;text-wrap:pretty}
.hp-split-dark .lede{color:var(--body-cream)}
.hp-split-cream .lede{color:var(--body-dark)}
.hp-subnav{display:flex;flex-wrap:wrap;margin-top:26px}
.hp-subnav a{width:50%;padding:13px 0;font:700 16px 'Libre Baskerville',serif}
.hp-split-dark .hp-subnav{border-top:1px solid var(--line)}
.hp-split-dark .hp-subnav a{border-bottom:1px solid var(--line);color:var(--cream)}
.hp-split-dark .hp-subnav a:hover{color:var(--tan)}
.hp-split-cream .hp-subnav{border-top:1px solid var(--line-cream)}
.hp-split-cream .hp-subnav a{border-bottom:1px solid var(--line-cream);color:var(--ink-dark)}
.hp-split-cream .hp-subnav a:hover{color:var(--rust)}
.hp-split .btn{margin-top:26px}

/* --- walk on out (2 across) --- */
.hp-two{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:32px}
.hp-two img{width:100%;height:230px;object-fit:cover}
.hp-two .cap{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.hp-two .cap span{font:400 10px 'Cutive Mono',monospace;letter-spacing:.18em;color:var(--ember)}
.hp-two .cap h3{font:400 30px Bevan,serif;text-transform:uppercase}
.hp-two p{font:400 16px/1.6 'Libre Baskerville',serif;color:var(--muted-2);margin-top:10px}
.hp-two .more{display:inline-block;margin-top:14px;font:700 15px 'Libre Baskerville',serif;color:var(--tan);
  border-bottom:1px solid #6b5843;padding-bottom:2px}

/* --- guides + doctrine --- */
.hp-guides{display:grid;grid-template-columns:1.32fr 1fr;background:var(--ink)}
.hp-guides-list{padding:48px 44px 52px var(--pad);border-right:1px solid var(--line)}
.hp-kicker{font:400 11px 'Cutive Mono',monospace;letter-spacing:.24em;color:var(--ember)}
.hp-guides-list h2{font:italic 700 40px/1.14 'Libre Baskerville',serif;margin-top:14px}
.hp-guide-rows{margin-top:24px}
.hp-guide-rows a{display:flex;justify-content:space-between;gap:20px;padding:15px 0;
  border-top:1px solid var(--line);color:var(--cream);font:700 18px/1.4 'Libre Baskerville',serif}
.hp-guide-rows a:last-child{border-bottom:1px solid var(--line)}
.hp-guide-rows a:hover{color:var(--tan)}
.hp-guide-rows .min{font:400 11px 'Cutive Mono',monospace;color:var(--muted-3);white-space:nowrap;letter-spacing:.1em}
.hp-doctrine{padding:48px var(--pad) 52px;background:var(--ink-deep);
  display:flex;flex-direction:column;justify-content:space-between}
.hp-doctrine h2{font:400 27px/1.2 Bevan,serif;text-transform:uppercase;margin-top:14px}
.hp-doctrine p{font:400 16px/1.62 'Libre Baskerville',serif;color:var(--body-warm);margin-top:16px;text-wrap:pretty}
/* Same fix as .hp-band-eyebrow: the kicker is a mono label and must outrank `.hp-doctrine p`. */
.hp-doctrine p.hp-kicker{font:400 11px 'Cutive Mono',monospace;letter-spacing:.24em;color:var(--ember);margin-top:0}
.hp-doctrine img{width:100%;height:190px;object-fit:cover;margin-top:26px}

/* --- cast --- */
.hp-cast{position:relative;overflow:hidden}
.hp-cast>img,.hp-cast>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-cast-scrim{position:absolute;inset:0;background:rgba(15,12,9,.9)}
.hp-cast-body{position:relative;padding:48px var(--pad) 52px}
.hp-cast-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
  border-bottom:2px solid var(--cream);padding-bottom:14px}
.hp-cast-head h2{font:400 22px Bevan,serif;text-transform:uppercase;letter-spacing:.14em}
.hp-cast-head p{font:400 16px/1.6 'Libre Baskerville',serif;color:var(--body-warm);text-wrap:pretty}
.hp-cast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:32px}
.hp-cast-grid figure{margin:0}
.hp-cast-shot{position:relative;height:320px;overflow:hidden}
.hp-cast-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-cast-grid .who{font:400 28px Bevan,serif;text-transform:uppercase;margin-top:14px}
.hp-cast-grid .role{font:400 11px 'Cutive Mono',monospace;letter-spacing:.16em;color:var(--ember);margin-top:6px}
.hp-cast-foot{display:flex;justify-content:space-between;align-items:center;gap:28px;
  margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.hp-cast-foot p{font:700 17px 'Libre Baskerville',serif;color:var(--cream)}
.hp-cast-foot a{font:400 11px 'Cutive Mono',monospace;letter-spacing:.16em;color:var(--tan);
  white-space:nowrap;border-bottom:1px solid #6b5843;padding-bottom:3px}

/* --- find a vet --- */
.hp-vet{position:relative;overflow:hidden}
.hp-vet>img,.hp-vet>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-vet-scrim{position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(10,8,6,.92) 0%,rgba(10,8,6,.7) 52%,rgba(10,8,6,.3) 100%)}
.hp-vet-body{position:relative;display:grid;grid-template-columns:1fr 420px;gap:48px;padding:48px var(--pad) 54px}
.hp-vet-flag{display:flex;align-items:center;gap:11px}
.hp-vet-flag .dot{width:10px;height:10px;background:var(--ember);border-radius:50%;flex:none}
.hp-vet-flag p{font:400 10px 'Cutive Mono',monospace;letter-spacing:.22em;color:var(--tan)}
.hp-vet h2{font:400 56px/1 Bevan,serif;text-transform:uppercase;margin-top:18px}
.hp-vet .lede{font:400 17px/1.62 'Libre Baskerville',serif;color:var(--body-warm);margin-top:16px;max-width:50ch;text-wrap:pretty}
.hp-vet-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:26px;max-width:600px}
.hp-vet-form .field{border:1px solid #6b5843;padding:14px;font:400 12px 'Cutive Mono',monospace;
  color:var(--body-warm);letter-spacing:.08em;background:rgba(8,7,5,.55);display:flex;justify-content:space-between;gap:10px;
  cursor:pointer;align-items:center}
.hp-vet-form .field:focus-within{outline:2px solid var(--tan);outline-offset:2px}
/* Real <select> dressed as the canvas field: same box, same mono caps, same caret glyph. */
.hp-vet-form select{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;
  font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;flex:1;min-width:0;text-overflow:ellipsis}
.hp-vet-form select:focus{outline:none}
.hp-vet-form option{background:#14110d;color:var(--cream)}
.hp-vet-form .btn{padding:14px 26px;border:0;cursor:pointer}
.hp-vet-note{font:700 14px 'Libre Baskerville',serif;color:var(--tan);margin-top:16px}
.hp-vet-side{display:flex;flex-direction:column;justify-content:flex-end;
  border-left:1px solid rgba(242,236,225,.18);padding-left:30px}
.hp-vet-side .lbl{font:400 10px 'Cutive Mono',monospace;letter-spacing:.2em;color:var(--tan);margin-bottom:14px}
.hp-vet-card{border-top:1px solid rgba(242,236,225,.22);padding:14px 0}
.hp-vet-card:last-of-type{border-bottom:1px solid rgba(242,236,225,.22)}
.hp-vet-card .clinic{font:700 17px 'Libre Baskerville',serif;color:var(--cream)}
.hp-vet-card .tel{font:400 34px/1 Bevan,serif;color:var(--tan);margin-top:8px;display:inline-block;text-decoration:none;padding:5px 0}
.hp-vet-card .hours{font:400 11px 'Cutive Mono',monospace;color:var(--muted);letter-spacing:.12em;margin-top:6px}
.hp-vet-side .pending{font:400 11px 'Cutive Mono',monospace;color:var(--muted-4);letter-spacing:.1em;margin-top:14px}

/* --- tramel shelf --- */
.hp-tramel{background:var(--rust);color:var(--cream-warm);display:grid;grid-template-columns:1fr 400px}
.hp-tramel-copy{padding:48px 44px 52px var(--pad)}
.hp-tramel .kick{font:400 11px 'Cutive Mono',monospace;letter-spacing:.22em;color:#f0cfae}
.hp-tramel h2{font:400 38px/1.1 Bevan,serif;text-transform:uppercase;margin-top:14px}
.hp-tramel p{font:400 17px/1.62 'Libre Baskerville',serif;color:#f3e6d3;margin-top:16px;max-width:58ch;text-wrap:pretty}
.hp-tramel .btn{margin-top:26px}
.hp-tramel-slots{padding:48px var(--pad) 52px 0;display:grid;grid-template-rows:1fr 1fr;gap:12px}
.slot-rust{background:var(--hatch-rust);border:1px solid #96593a;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:12px;min-height:150px}
.slot-rust span{font:400 10px/1.8 'Cutive Mono',monospace;letter-spacing:.12em;color:#e0bd9c}

/* ==========================================================================
   FOOTER (shared shell, per-page columns)
   ========================================================================== */
.foot{background:var(--ink-deep);color:var(--muted);padding:var(--pad)}
.hp .foot{display:grid;grid-template-columns:190px 1fr 1fr 1fr;gap:36px}
.dp .foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
/* Canvas: badge-rocker at its natural 460x307 aspect, 118px wide, in a cream square
   chip with 7px padding and multiply blend. Homepage v2 canvas, footer. */
.foot-badge{background:var(--cream);padding:7px;width:fit-content;height:fit-content}
.foot-badge img{width:118px;height:auto;mix-blend-mode:multiply}
.foot h2{font:inherit}
.hp .foot-h{font:400 10px 'Cutive Mono',monospace;letter-spacing:.2em;color:var(--cream);text-transform:uppercase}
.hp .foot-list{font:400 15px/1.95 'Libre Baskerville',serif;margin-top:10px}
.dp .foot-h{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream)}
.dp .foot-list{font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.95;margin-top:10px}
.foot-list a{color:var(--muted)}
.hp .foot-store a{color:var(--tan)}
.foot-list a:hover{color:var(--tan)}
.foot-fine{color:var(--muted-4);margin-top:16px}
.hp .foot-fine{font:400 11px/1.75 'Cutive Mono',monospace}
.dp .foot-fine{font-family:Archivo,system-ui,sans-serif;font-size:11px;line-height:1.7}
.foot-bridge{margin-top:10px}
.foot-bridge a{color:var(--muted-2);border-bottom:1px solid #3a2e22}
.foot-bridge a:hover{color:var(--tan)}

/* ==========================================================================
   DEPARTMENT PAGES
   ========================================================================== */
.dp-hero{position:relative;height:560px;overflow:hidden}
.dp-hero-452{height:452px}
.dp-hero>img,.dp-hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dp-hero-scrim{position:absolute;inset:0}
.dp-hero-body{position:relative;height:100%;padding:34px var(--pad) 38px;max-width:820px;
  display:flex;flex-direction:column;justify-content:space-between}
.dp-hero-w840{max-width:840px}
.dp-aisle-tag{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dp-aisle-tag .no{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-stretch:78%;
  font-size:13px;letter-spacing:.2em}
.dp-aisle-tag .rule{width:44px;height:1px;flex:none}
.dp-aisle-tag .what{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:#cdbb9e}
.dp-hero h1{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:66%;font-size:136px;
  line-height:.82;letter-spacing:-.015em;text-transform:uppercase;color:#f6f1e6}
.dp-hero h1.big{font-size:146px}
.dp-hero h1.mid{font-size:132px}
.dp-hero .lede{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:22px;line-height:1.5;
  color:#eadfc9;margin-top:22px;max-width:46ch;text-wrap:pretty}

/* aisle strip + legend */
.dp-strip{background:var(--ink-deep);padding:0 var(--pad);display:grid;grid-template-columns:1fr 296px}
.dp-aisles{display:flex;align-items:stretch;padding:18px 0}
.dp-aisles a{flex:1;padding:4px 18px;border-right:1px solid var(--line)}
.dp-aisles a:first-child{padding-left:0}
.dp-aisles a:last-child{padding-right:0;border-right:0}
.dp-aisles .n,.dp-aisles .t,.dp-aisles .c{display:block}
.dp-aisles .n{font-family:Archivo,system-ui,sans-serif;font-weight:400;font-size:10px;letter-spacing:.16em;color:var(--muted-3)}
.dp-aisles .t{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-stretch:82%;font-size:22px;
  line-height:1.05;text-transform:uppercase;color:var(--cream);margin-top:5px}
.dp-aisles .c{font-family:'Source Serif 4',Georgia,serif;font-size:13px;color:var(--muted);margin-top:3px}
.dp-aisles a:hover .t{color:var(--tan)}
.dp-legend{border-left:1px solid var(--line);padding:20px 0 20px 24px;display:flex;flex-direction:column;gap:7px}
.dp-legend .h{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-3)}
.dp-legend .row{display:flex;gap:9px;align-items:baseline}
.dp-legend .row span:last-child{font-family:'Source Serif 4',Georgia,serif;font-size:13px;color:var(--muted-2)}
.tag-ours{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:9px;letter-spacing:.12em;
  background:#f0e6cd;color:var(--ink-dark);padding:3px 6px;white-space:nowrap}
.tag-direct{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:9px;letter-spacing:.12em;
  border:1px solid #6b5843;color:var(--body-warm);padding:3px 6px;white-space:nowrap}

/* Aisle-preview band — currently unused. The markup was removed from the aisle
   pages; these rules stay so the band can be dropped back under the OURS/DIRECT
   legend if it's ever wanted. */
.dp-preview{background:var(--ink-deep);border-top:1px solid var(--line-2);
  padding:22px var(--pad) 24px;display:grid;grid-template-columns:296px 1fr;gap:24px;align-items:start}
.dp-preview .kick{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-stretch:82%;font-size:13px;
  line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
.dp-preview p{font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.6;
  color:var(--muted-2);max-width:74ch;text-wrap:pretty}

/* department sections */
.dp-sec{padding:52px var(--pad) 56px}
.dp-sec-flush{padding:52px 0 54px}       /* full-bleed pick block inside */
.dp-sec-cream{background:var(--cream);color:var(--ink-dark)}
.dp-sec-dark{background:var(--ink)}
.dp-gutter{padding-left:var(--pad);padding-right:var(--pad)}
.dp-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:10px;gap:24px}
.dp-sec-cream .dp-head{border-bottom:2px solid var(--ink-dark)}
.dp-sec-dark .dp-head{border-bottom:2px solid var(--cream)}
.dp-head h2{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-stretch:80%;font-size:38px;
  line-height:1;text-transform:uppercase}
.dp-head .note{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;padding-bottom:4px;text-align:right}
.dp-sec-cream .dp-head .note{color:var(--muted-3)}
.dp-sec-dark .dp-head .note{color:var(--muted)}

/* the "if you buy one thing" pick block */
.dp-pick{display:grid;grid-template-columns:600px 1fr;gap:44px;margin-top:38px;align-items:start}
.dp-pick>img,.dp-pick>picture>img{width:100%;height:430px;object-fit:cover}
.dp-pick-copy{padding-right:var(--pad)}
.dp-pick-kick{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase}
.dp-pick h3{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:52px;line-height:1.02;
  letter-spacing:-.015em;margin-top:14px}
.dp-price-row{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
.dp-price{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em}
.dp-price-note{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.dp-src-dark{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;
  background:var(--ink-dark);color:var(--cream);padding:5px 9px}
.dp-src-line{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:10px;letter-spacing:.14em;
  border:1px solid rgba(20,17,13,.4);color:var(--body-dark);padding:5px 9px}
.dp-pick .body{font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.62;margin-top:18px;text-wrap:pretty}
.dp-pick-facts{border-top:1px solid rgba(20,17,13,.3);margin-top:24px;padding-top:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dp-sec-dark .dp-pick-facts{border-top-color:var(--line-2)}
.dp-fact-h{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-3)}
.dp-fact-h.dp-fact-h-wide{letter-spacing:.18em}
.dp-pick-facts p{font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.5;margin-top:6px}
.dp-cta-row{display:flex;gap:14px;align-items:center;margin-top:26px;flex-wrap:wrap}
.dp-btn{padding:15px 28px;font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;display:inline-block}
.dp-btn-dark{background:var(--ink-dark);color:var(--cream)}
.dp-btn-dark:hover{background:#000;color:var(--cream)}
.dp-btn-cream{background:var(--cream);color:var(--ink-dark)}
.dp-btn-cream:hover{background:#fff;color:var(--ink-dark)}
.dp-btn-warm{background:var(--cream-warm);color:var(--ink-dark)}
.dp-btn-warm:hover{background:#fff;color:var(--ink-dark)}
.dp-link{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding-bottom:3px}

/* secondary pick (narrower column) */
.dp-pick2{display:grid;grid-template-columns:472px 1fr;gap:48px;margin-top:38px;align-items:start}
.dp-pick2 .shot{width:100%;height:376px;object-fit:cover}
.dp-pick2 h3{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:40px;line-height:1.04;
  margin-top:10px}
.dp-pick2 .body{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.6;
  color:var(--body-cream);margin-top:14px;text-wrap:pretty}
.dp-rest-h{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-3);padding-bottom:10px;border-bottom:1px solid var(--line-2)}

/* product grids */
.dp-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:46px}
.dp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:36px}
.dp-grid4 .shot,.dp-grid4 .slot{height:180px}
.dp-grid3 .shot,.dp-grid3 .slot{height:250px}
.dp-tile .shot{width:100%;object-fit:cover}
.dp-tile .slot{background:var(--hatch-cream);display:flex;align-items:center;justify-content:center}
.dp-tile .slot span{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:10px;
  letter-spacing:.14em;color:#8b8271}
.dp-tile .line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dp-grid4 .dp-tile .line{margin-top:14px}
.dp-grid3 .dp-tile .line{margin-top:16px}
.dp-tile .nm{font-family:'Source Serif 4',Georgia,serif;font-weight:600;line-height:1.15}
.dp-grid4 .dp-tile .nm{font-size:20px}
.dp-grid3 .dp-tile .nm{font-size:25px;line-height:1.1}
.dp-tile .pr{font-family:Archivo,system-ui,sans-serif;font-weight:700}
.dp-grid4 .dp-tile .pr{font-size:17px}
.dp-grid3 .dp-tile .pr{font-size:20px}
.dp-tile p{font-family:'Source Serif 4',Georgia,serif;line-height:1.5;color:var(--body-dark)}
.dp-grid4 .dp-tile p{font-size:15px;margin-top:7px}
.dp-grid3 .dp-tile p{font-size:16px;line-height:1.55;margin-top:8px}
.dp-src{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:9px;letter-spacing:.14em;
  color:var(--muted-3)}
.dp-src-ours{font-weight:700;color:var(--ink-dark)}
.dp-sec-dark .dp-src:not(.dp-src-ours):not(.dp-row-src-ours){color:var(--muted)}
.dp-grid4 .dp-src{margin-top:9px}
.dp-grid3 .dp-src{margin-top:10px}

/* the rest-of-the-rack rows (thumb / copy / price) */
.dp-row{display:grid;grid-template-columns:118px 1fr auto;gap:24px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.dp-row .thumb{width:118px;height:96px;object-fit:cover}
.dp-row .slot{width:118px;height:96px;background:var(--hatch-dark);display:flex;align-items:center;justify-content:center}
.dp-row .slot span{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.14em;color:var(--muted-3)}
.dp-row .nm{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:22px}
.dp-row p{font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.5;color:var(--muted-2);margin-top:5px}
.dp-row .pr{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:22px;color:var(--cream)}
.dp-row .dp-src{margin-top:7px}
.dp-row-src-ours{font-weight:700;color:var(--tan)}
.dp-rest-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:18px;flex-wrap:wrap}
.dp-rest-foot .said{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:16px;color:var(--muted)}

/* two-column plain list */
.dp-list2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:26px}
.dp-list2>div{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line)}
.dp-list2 .nm{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:23px}
.dp-list2 p{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.55;color:var(--muted-2);margin-top:6px}
.dp-list2 .pr{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:22px}
.inline-ours{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:9px;letter-spacing:.14em;
  color:var(--tan);margin-left:10px;vertical-align:middle}

/* editorial bands */
.dp-ed{display:grid;grid-template-columns:1fr 400px;align-items:stretch}
.dp-ed-420{grid-template-columns:1fr 420px}
.dp-ed-rust{background:var(--rust);color:var(--cream-warm)}
.dp-ed-green{background:#2f3b2a;color:#f2f0e4}
.dp-ed-copy{padding:52px 44px 56px}
.dp-ed-kick{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase}
.dp-ed h3{font-family:'Source Serif 4',Georgia,serif;font-weight:200;font-style:italic;font-size:48px;
  line-height:1.1;margin-top:16px;max-width:20ch;text-wrap:pretty}
.dp-ed .body{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.62;margin-top:20px;
  max-width:54ch;text-wrap:pretty}
.dp-ed-art{position:relative;overflow:hidden;min-height:320px}
.dp-ed-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dp-ed-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;
  border-top:1px solid rgba(242,240,228,.28);padding-top:22px}
.dp-ed-stats .big{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em}
.dp-ed-stats p{font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.5;color:#c3d4ac;margin-top:5px}

/* full-bleed editorial over art (Goat Rodeo) */
.dp-ed-bleed{position:relative;overflow:hidden}
.dp-ed-bleed>img,.dp-ed-bleed>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dp-ed-bleed-scrim{position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(24,12,5,.94) 0%,rgba(24,12,5,.78) 40%,rgba(24,12,5,.24) 74%,rgba(24,12,5,.06) 100%)}
.dp-ed-bleed-body{position:relative;padding:56px var(--pad) 60px;max-width:760px}
.dp-ed-bleed h3{font-family:'Source Serif 4',Georgia,serif;font-weight:200;font-style:italic;font-size:50px;
  line-height:1.08;margin-top:16px;max-width:18ch;text-wrap:pretty}
.dp-ed-bleed .body{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.62;color:#e6d7bd;
  margin-top:20px;max-width:56ch;text-wrap:pretty}

/* "Ours" merch section */
.dp-ours-head{display:grid;grid-template-columns:1fr 460px;gap:48px;align-items:end;
  border-bottom:2px solid var(--ink-dark);padding-bottom:14px}
.dp-ours-head h2{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:74%;font-size:60px;
  line-height:.94;text-transform:uppercase;letter-spacing:-.01em}
.dp-ours-head h2.tall{font-size:64px}
.dp-ours-head p{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.6;
  color:var(--body-dark);text-wrap:pretty}
.dp-ours-body{display:grid;grid-template-columns:520px 1fr;gap:44px;margin-top:38px;align-items:start}
.dp-panel{padding:26px;display:flex;align-items:center;justify-content:center}
.dp-panel img{width:100%}
.dp-merch-shot{width:100%;height:300px;object-fit:cover}
.dp-merch-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px}
.dp-merch-grid .line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dp-merch-grid .nm{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:24px;line-height:1.1}
.dp-merch-grid .pr{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:20px}
.dp-merch-grid p{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.55;
  margin-top:8px;color:var(--body-dark)}
.dp-merch-grid .dp-src{margin-top:9px}
.dp-money{border-left:2px solid rgba(20,17,13,.18);padding-left:22px}

/* taller "Ours" product tiles (Porch Dogs) */
.dp-grid3-tall .shot,.dp-grid3-tall .slot{height:290px}
.dp-grid3.dp-grid3-tall .dp-tile .nm{font-size:26px;line-height:1.08}
.dp-grid3.dp-grid3-tall .dp-tile .pr{font-size:22px;font-weight:800}
.dp-grid3.dp-grid3-tall .dp-tile p{margin-top:9px}

/* ==========================================================================
   INTERIOR PAGES (/guides/, /shelf/, /vets/, 404)
   Not in the canvases. Built out of the department-page system above, with one
   borrowed idea: the 45deg hatch is already this site's mark for "we haven't got
   this yet", so a route that isn't stocked yet wears it at page scale.
   ========================================================================== */
.dp-hold-rows{margin-top:30px;border-top:1px solid rgba(20,17,13,.22)}
.dp-hold-row{display:grid;grid-template-columns:118px 1fr;gap:24px;align-items:center;
  padding:18px 0;border-bottom:1px solid rgba(20,17,13,.22)}
.dp-hold-row .nm{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:22px;line-height:1.2}
.dp-hold-row .nm a{color:var(--ink-dark);border-bottom:1px solid rgba(122,63,29,.35)}
.dp-hold-row .nm a:hover{color:var(--rust)}
.dp-hold-row p{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-3);margin-top:7px}
.dp-hold-mark{width:118px;height:74px;background:var(--hatch-cream);
  display:flex;align-items:center;justify-content:center}
.dp-hold-mark span{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.14em;color:#8b8271}
/* /guides/ bench row: same hold row, plus the canvas read-time figure on the
   right the way the homepage guides list carries it. Archivo rather than Cutive
   Mono because the interior pages don't load the mono face. */
.dp-hold-row-guide{grid-template-columns:118px 1fr auto}
.dp-hold-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.dp-hold-meta .min{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.14em;color:var(--muted-3);white-space:nowrap}
.dp-hold-meta .coming{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.18em;color:#9a8f7c;white-space:nowrap}
.dp-hold-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.dp-hold-panel{min-height:170px;background:var(--hatch-rust);border:1px solid #96593a;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:14px}
.dp-hold-panel span{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:10px;line-height:1.9;
  letter-spacing:.14em;color:#f2ddc6}
.dp-hold-panel-cream{background:var(--hatch-cream);border-color:rgba(20,17,13,.24)}
.dp-hold-panel-cream span{color:#8b8271}
.dp-hold-note{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.62;
  color:var(--body-dark);margin-top:26px;max-width:64ch;text-wrap:pretty}
.dp-hold-note a{color:var(--rust);border-bottom:1px solid rgba(122,63,29,.4)}

/* the one loud band on /vets/ — an emergency line has to outrank the layout */
.dp-vet-urgent{border-top:4px solid var(--ember);border-bottom:1px solid var(--line)}
.dp-vet-urgent-kick{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}
.dp-vet-urgent-line{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:25px;
  line-height:1.45;color:#f0e6d4;margin-top:14px;max-width:60ch;text-wrap:pretty}

.dp-vet-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-top:30px;max-width:660px;
  align-items:stretch}
.dp-vet-form .field{border:1px solid rgba(20,17,13,.38);padding:11px 14px;display:flex;
  flex-direction:column;gap:3px;background:#efe7d7;cursor:pointer}
.dp-vet-form .field:focus-within{outline:2px solid var(--rust);outline-offset:2px}
.dp-vet-form .lbl{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-3)}
.dp-vet-form select{appearance:none;-webkit-appearance:none;border:0;background:transparent;width:100%;
  font-family:'Source Serif 4',Georgia,serif;font-size:17px;color:var(--ink-dark);cursor:pointer;
  padding:0 18px 0 0;background-image:linear-gradient(45deg,transparent 50%,var(--rust) 50%),
  linear-gradient(135deg,var(--rust) 50%,transparent 50%);
  background-position:right 6px top 60%,right 1px top 60%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat}
.dp-vet-form select:focus{outline:none}
.dp-vet-form button{border:0;cursor:pointer}

/* The /vets/ front door carries the homepage vet block's card stack onto the page the
   homepage points at — same .hp-vet-side / .hp-vet-card markup, same type, same (555)
   placeholders. Only the surrounding grid is new. */
.dp-vet-book{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:end;margin-top:30px}
.dp-vet-book-copy p{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:19px;
  line-height:1.6;color:var(--body-cream);margin-top:16px;max-width:52ch;text-wrap:pretty}
.dp-vet-book-copy .kick{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ember);margin-top:0}

/* ==========================================================================
   RESPONSIVE — design is exact at >=1280; below here we degrade
   ========================================================================== */

/* ---- large tablet / small laptop ---- */
@media (max-width:1279px){
  :root{--pad:32px}
  .hp-hero{height:600px}
  .hp-hero h1{font-size:50px}
  .hp-band{height:440px}
  .hp-band h2{font-size:42px}
  .hp-split-r,.hp-split-l{grid-template-columns:1fr 42%}
  .hp-split-l{grid-template-columns:42% 1fr}
  .hp-split h2{font-size:48px}
  .hp-split-art{min-height:460px}
  .hp-vet-body{grid-template-columns:1fr 360px;gap:32px}
  .dp-vet-book{grid-template-columns:1fr 360px;gap:32px}
  .hp-vet h2{font-size:48px}
  .hp-tramel{grid-template-columns:1fr 320px}
  .hp .foot{grid-template-columns:150px 1fr 1fr 1fr;gap:28px}

  .dp-hero h1,.dp-hero h1.big,.dp-hero h1.mid{font-size:112px}
  .dp-hero{height:500px}
  .dp-hero-452{height:430px}
  .dp-strip{grid-template-columns:1fr 250px}
  .dp-pick{grid-template-columns:46% 1fr;gap:32px}
  .dp-pick>img,.dp-pick>picture>img{height:380px}
  .dp-pick h3{font-size:44px}
  .dp-pick2{grid-template-columns:40% 1fr;gap:32px}
  .dp-ours-head{grid-template-columns:1fr 380px;gap:32px}
  .dp-ours-head h2,.dp-ours-head h2.tall{font-size:52px}
  .dp-ours-body{grid-template-columns:44% 1fr;gap:32px}
  .dp-ed h3{font-size:42px}
  .dp-ed-bleed h3{font-size:44px}
}

/* ---- tablet ---- */
@media (max-width:1024px){
  .hp-rail{grid-template-columns:repeat(3,1fr);gap:24px}
  .hp-strip{flex-wrap:wrap}
  .hp-strip a{flex:1 1 33.333%;min-width:0;padding:18px 16px;border-bottom:1px solid var(--line)}
  .hp-strip a:first-child{padding-left:0}
  .hp-strip a:nth-child(3n){border-right:0;padding-right:0}
  .hp-strip a:nth-child(3n+1){padding-left:0}
  .hp-strip a:last-child{border-bottom:0}
  .hp-guides{grid-template-columns:1fr}
  .hp-guides-list{border-right:0;border-bottom:1px solid var(--line);padding:40px var(--pad) 44px}
  .hp-doctrine{padding:40px var(--pad) 44px}
  .hp-cast-head{grid-template-columns:1fr;gap:18px}
  .hp-vet-body{grid-template-columns:1fr;gap:36px}
  .hp-vet-side{border-left:0;padding-left:0;border-top:1px solid rgba(242,236,225,.18);padding-top:28px}
  .dp-vet-book{grid-template-columns:1fr;gap:30px}

  .dp-strip{grid-template-columns:1fr}
  .dp-preview{grid-template-columns:1fr;gap:9px}
  .dp-legend{border-left:0;border-top:1px solid var(--line);padding:16px 0 20px;
    flex-direction:row;flex-wrap:wrap;gap:14px 22px;align-items:center}
  .dp-legend .h{width:100%}
  .dp-pick{grid-template-columns:1fr;gap:28px}
  .dp-pick>img,.dp-pick>picture>img{height:340px}
  /* Pick block is full-bleed by canvas, so once it stacks the copy needs both gutters back. */
  .dp-pick-copy{padding-left:var(--pad);padding-right:var(--pad)}
  .dp-pick2{grid-template-columns:1fr;gap:28px}
  .dp-grid4{grid-template-columns:repeat(2,1fr);gap:28px;margin-top:36px}
  .dp-grid3{grid-template-columns:repeat(2,1fr)}
  .dp-ours-head{grid-template-columns:1fr;gap:18px}
  .dp-ours-body{grid-template-columns:1fr;gap:30px}
  .dp-ed,.dp-ed-420{grid-template-columns:1fr}
  .dp-ed-art{min-height:280px}
  .dp-ed-copy{padding:44px 32px 48px}
}

/* ---- small tablet / large phone ---- */
@media (max-width:820px){
  .nav-links{display:none}
  .nav-menu{display:block}
  .dp .nav-menu>summary{font-family:Archivo,system-ui,sans-serif;font-weight:600;letter-spacing:.15em}
  /* Department pages never load Cutive Mono (their canvases are Archivo/Source Serif),
     so the panel links inherited a generic fallback monospace that fought the Archivo
     summary button above them. Same override the summary already had. */
  .dp .nav-menu-panel a{font-family:Archivo,system-ui,sans-serif;font-weight:500;letter-spacing:.13em}

  .hp-hero{height:540px}
  .hp-hero h1{font-size:42px}
  .hp-hero-sub{font-size:18px}
  .hp-band{height:auto;min-height:420px}
  .hp-band-body{padding:44px var(--pad);max-width:none}
  .hp-band-scrim{background:linear-gradient(rgba(15,12,9,.62) 0%,rgba(15,12,9,.78) 60%,rgba(15,12,9,.92) 100%)}
  .hp-band h2{font-size:34px}
  .hp-split-r,.hp-split-l{grid-template-columns:1fr}
  .hp-split-l .hp-split-art{order:-1}
  .hp-split-art{min-height:320px}
  .hp-split-copy,.hp-split-l .hp-split-copy{padding:40px var(--pad) 44px}
  .hp-split h2{font-size:42px}
  .hp-two{grid-template-columns:1fr;gap:32px}
  .hp-tramel{grid-template-columns:1fr}
  .hp-tramel-copy{padding:40px var(--pad) 28px}
  .hp-tramel-slots{padding:0 var(--pad) 44px;grid-template-rows:auto auto}
  .hp .foot{grid-template-columns:1fr 1fr;gap:28px}
  .foot-badge{grid-column:1/-1}
  .hp-cast-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .hp-head{flex-direction:column;align-items:flex-start;gap:8px}
  .hp-head span{text-align:left;padding-bottom:0}

  .dp-hero{height:auto;min-height:440px}
  .dp-hero-452{height:auto;min-height:400px}
  .dp-hero-body{max-width:none;gap:40px;padding:28px var(--pad) 34px}
  .dp-hero h1,.dp-hero h1.big,.dp-hero h1.mid{font-size:80px}
  .dp-hero .lede{font-size:19px;max-width:none}
  .dp-hero-scrim{background:linear-gradient(rgba(15,12,9,.6) 0%,rgba(15,12,9,.55) 40%,rgba(15,12,9,.9) 100%)!important}
  .dp-hero-scrim-2{display:none}
  .dp-aisles{flex-wrap:wrap;gap:0}
  .dp-aisles a{flex:1 1 33.333%;padding:12px 14px;border-bottom:1px solid var(--line)}
  .dp-aisles a:first-child{padding-left:0}
  .dp-aisles a:nth-child(3n){border-right:0}
  .dp-aisles a:nth-child(3n+1){padding-left:0}
  .dp-head{flex-direction:column;align-items:flex-start;gap:8px}
  .dp-head .note{text-align:left;padding-bottom:0}
  .dp-head h2{font-size:32px}
  .dp-pick h3{font-size:38px}
  .dp-list2{grid-template-columns:1fr;gap:0}
  .dp-ed h3,.dp-ed-bleed h3{font-size:36px}
  .dp-ed-bleed-body{padding:44px var(--pad) 48px}
  .dp-ed-stats{grid-template-columns:1fr;gap:18px}
  .dp .foot{grid-template-columns:1fr 1fr}
  .dp .foot>div:last-child{grid-column:1/-1}
}

/* ---- phone ---- */
@media (max-width:600px){
  :root{--pad:20px}
  .hp .nav{height:72px}
  .hp .nav-mark img{height:52px}
  .dp .nav{height:70px}
  .dp .nav-mark img{height:54px}

  .hp-hero{height:520px}
  .hp-hero h1{font-size:34px;line-height:1.08}
  .hp-hero-eyebrow{font-size:10px;letter-spacing:.2em}
  .hp-hero-sub{font-size:16px;margin-top:18px}
  .hp-hero-body{padding-bottom:40px}
  .hp-hero-scrim{background:linear-gradient(rgba(15,12,9,.55) 0%,rgba(15,12,9,.2) 30%,rgba(15,12,9,.6) 66%,rgba(15,12,9,.94) 100%)}

  .hp-strip a{flex:1 1 50%;padding:16px 14px}
  .hp-strip a:nth-child(3n){border-right:1px solid var(--line);padding-right:14px}
  .hp-strip a:nth-child(3n+1){padding-left:14px}
  .hp-strip a:nth-child(2n){border-right:0;padding-right:0}
  .hp-strip a:nth-child(2n+1){padding-left:0}
  .hp-strip .t{font-size:17px}

  .hp-band h2{font-size:28px}
  .hp-band p{font-size:16px}
  .hp-sec{padding:40px var(--pad) 44px}
  .hp-head{gap:6px}
  .hp-head h2{font-size:19px}
  .hp-rail{grid-template-columns:1fr;gap:30px}
  .hp-rail img,.slot-cream{height:200px}
  .hp-split h2{font-size:34px}
  .hp-split .lede{font-size:16px}
  .hp-subnav a{width:100%;font-size:15px}
  .hp-guides-list h2{font-size:28px}
  .hp-guide-rows a{font-size:16px;gap:12px}
  .hp-doctrine h2{font-size:22px}
  .hp-cast-grid{grid-template-columns:1fr;gap:28px}
  .hp-cast-shot{height:360px}
  .hp-vet h2{font-size:38px}
  .hp-vet-form{grid-template-columns:1fr;gap:8px}
  .hp-vet-card .tel{font-size:28px}
  .hp-tramel h2{font-size:28px}
  .hp .foot{grid-template-columns:1fr}
  .btn{padding:14px 22px;font-size:13px}

  .dp-sec{padding:40px var(--pad) 44px}
  .dp-sec-flush{padding:40px 0 44px}
  .dp-hero h1,.dp-hero h1.big,.dp-hero h1.mid{font-size:56px}
  .dp-hero .lede{font-size:17px;margin-top:16px}
  .dp-aisle-tag .no{font-size:11px}
  .dp-aisle-tag .what{font-size:10px}
  .dp-aisles a{flex:1 1 50%;padding:12px 12px}
  .dp-aisles a:nth-child(3n){border-right:1px solid var(--line)}
  .dp-aisles a:nth-child(3n+1){padding-left:12px}
  .dp-aisles a:nth-child(2n){border-right:0;padding-right:0}
  .dp-aisles a:nth-child(2n+1){padding-left:0}
  .dp-aisles .t{font-size:18px}
  .dp-head h2{font-size:26px}
  .dp-pick>img,.dp-pick>picture>img{height:260px}
  .dp-pick h3{font-size:32px}
  .dp-pick-facts{grid-template-columns:1fr;gap:16px}
  .dp-pick2 .shot{height:260px}
  .dp-pick2 h3{font-size:30px}
  .dp-grid4,.dp-grid3{grid-template-columns:1fr;gap:30px}
  .dp-grid4 .shot,.dp-grid4 .slot,.dp-grid3 .shot,.dp-grid3 .slot{height:220px}
  .dp-row{grid-template-columns:84px 1fr;gap:16px;row-gap:6px}
  .dp-row .thumb,.dp-row .slot{width:84px;height:70px}
  .dp-row .pr{grid-column:2;font-size:19px}
  .dp-row .nm{font-size:19px}
  .dp-list2 .nm{font-size:20px}
  .dp-hold-row{grid-template-columns:84px 1fr;gap:16px}
  .dp-hold-mark{width:84px;height:64px}
  .dp-hold-row .nm{font-size:19px}
  .dp-hold-row-guide{grid-template-columns:84px 1fr;row-gap:10px}
  .dp-hold-meta{grid-column:2;flex-direction:row;align-items:baseline;justify-content:flex-start;
    gap:14px;text-align:left}
  .dp-ed h3,.dp-ed-bleed h3{font-size:29px;max-width:none}
  .dp-ed-copy{padding:36px var(--pad) 40px}
  .dp-ours-head h2,.dp-ours-head h2.tall{font-size:36px}
  .dp-panel{padding:16px}
  .dp-merch-grid{grid-template-columns:1fr;gap:26px}
  .dp-merch-shot{height:220px}
  .dp-money{border-left:0;border-top:2px solid rgba(20,17,13,.18);padding-left:0;padding-top:18px}
  .dp .foot{grid-template-columns:1fr}
  .dp .foot>div:last-child{grid-column:auto}
  .dp-btn{padding:14px 22px;font-size:12px}
}

/* ==========================================================================
   /about/ — THE CAST PAGE
   Not in the canvases, so it is built out of the department system above, the
   same way /guides/, /shelf/ and /vets/ were. One thing it does that no other
   page does: the three portraits get a tall 4:5 box instead of the homepage's
   320px landscape crop. That crop is what forced the object-position rescue in
   the homepage cast band — given the height, the heads simply fit.
   The column stagger is the canvas's own move: the hanging aisle signs in the
   hero are offset 9px / 6px / 2px off each other so the row never reads as a
   centred three-up. Same idea, no rotation — rotation belongs to the signs.
   ========================================================================== */
.ab-cast{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px;align-items:start}
.ab-cast figure{margin:0}
.ab-cast figure:nth-child(2){margin-top:38px}
.ab-cast figure:nth-child(3){margin-top:14px}
.ab-shot{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--ink-deep)}
.ab-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-cast .who{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:72%;font-size:52px;
  line-height:.9;text-transform:uppercase;letter-spacing:-.01em;color:#f6f1e6;margin-top:18px}
.ab-cast .role{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line-2)}
.ab-cast .line{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.6;
  color:var(--body-cream);margin-top:12px;text-wrap:pretty}
.ab-cast-foot{display:flex;justify-content:space-between;align-items:center;gap:28px;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
.ab-cast-foot p{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:19px;
  line-height:1.5;color:var(--cream);max-width:58ch;text-wrap:pretty}
.ab-cast-foot a{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tan);white-space:nowrap;border-bottom:1px solid #6b5843;
  padding-bottom:3px}

.ab-story{display:grid;grid-template-columns:1fr 440px;gap:48px;margin-top:38px;align-items:start}
.ab-story .body{font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.66;
  color:var(--body-dark);max-width:60ch;text-wrap:pretty}
.ab-story .body+.body{margin-top:18px}
.ab-story .body b{font-weight:600;color:var(--ink-dark)}
.ab-story-art img{width:100%;height:380px;object-fit:cover}
.ab-story-cap{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-3);margin-top:10px}
.ab-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:40px;
  border-top:1px solid rgba(20,17,13,.28);padding-top:24px}
.ab-rules .n{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:70%;font-size:34px;
  line-height:1;color:var(--rust)}
.ab-rules h3{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:23px;line-height:1.18;
  margin-top:10px;color:var(--ink-dark)}
.ab-rules p{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.58;
  color:var(--body-dark);margin-top:9px;text-wrap:pretty}

.ab-rust-slots{padding:52px 44px 56px 0;display:grid;grid-template-rows:1fr 1fr;gap:12px}

@media (max-width:1279px){
  .ab-story{grid-template-columns:1fr 360px;gap:36px}
  .ab-cast .who{font-size:44px}
}
@media (max-width:1024px){
  .ab-cast{gap:26px}
  .ab-cast .who{font-size:36px}
  .ab-cast .line{font-size:16px}
  .ab-story{grid-template-columns:1fr;gap:32px}
  .ab-story-art img{height:300px}
  .ab-rust-slots{padding:0 32px 44px}
}
/* The row stays three-up all the way down to the phone break. Dropping it to
   two columns leaves the third portrait orphaned beside a hole, which reads as
   a mistake rather than the deliberate stagger it is above. */
@media (max-width:820px){
  .ab-cast{gap:18px;margin-top:32px}
  .ab-cast figure:nth-child(2){margin-top:24px}
  .ab-cast figure:nth-child(3){margin-top:9px}
  .ab-cast .who{font-size:28px;margin-top:14px}
  .ab-cast .role{font-size:9px;letter-spacing:.16em;margin-top:8px;padding-top:8px}
  .ab-cast .line{font-size:15px;line-height:1.55;margin-top:10px}
  .ab-cast-foot{flex-direction:column;align-items:flex-start;gap:16px;margin-top:34px}
  .ab-cast-foot p{font-size:17px}
  .ab-rules{grid-template-columns:1fr;gap:26px}
}
@media (max-width:600px){
  .ab-cast{grid-template-columns:1fr;gap:32px}
  .ab-cast .who{font-size:40px}
  .ab-story-art img{height:240px}
  .ab-rust-slots{padding:0 var(--pad) 40px}
}

@media print{
  .nav-menu{display:none}
}

/* ==========================================================================
   THE VET BOOK — /vets/ and /vets/<ring>/
   EDITORIAL IDEA: "THE PORCH LIGHT LEDGER."
   The homepage hp-vet block is a bare bulb at night: dark scrim, the phone
   number set big in Bevan, one line — "If it's an emergency, call before you
   drive." That block is the seed. The book is that porch light kept as a
   ledger: somebody walked the county and wrote down who answers.
   So the whole system runs on ONE split, and every page in the book obeys it:
     · DARK (porch light, Bevan/Cutive Mono) = the 2 a.m. lane. Emergency only.
     · CREAM (feed-store paper, Archivo/Source Serif) = the daylight lanes you
       browse when nothing is wrong yet.
   Night is where you're scared; daylight is where you're planning. That is the
   layout, not a decoration on top of it.
   The dark band is always FIRST and always carries the tel: numbers big.
   Chrome (nav, footer, gutters, hairlines) is the department system unchanged.
   Ring pages load BOTH font stacks so the Bevan telephone number survives —
   it is the seed's single loudest gesture and it does not get downgraded.
   NOTE TO BUILDERS: this block is the whole vocabulary for all 16 rings and
   all 4 lane pages. Do not add classes here. Compose with what is below.
   ========================================================================== */

/* ---------- the lantern: the dark emergency band ---------- */
.dp-vet-lantern{position:relative;overflow:hidden;background:var(--ink-deep);
  border-top:4px solid var(--ember)}
.dp-vet-lantern>img,.dp-vet-lantern>picture>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% 34%}
/* THE HUB LANTERN IS FIVE TIMES AS TALL, AND COVER TURNS THE PORCH LIGHT OFF.
   A ring's overnight lane is two to eight cards and the band lands near 1400px,
   where the container is wider than it is tall relative to the photograph, so
   object-fit:cover scales the image to the WIDTH and shows the horizontal slice
   at 34% — the bulb, the moths, the dog. A lane hub gathers the overnight lane
   out of all sixteen rings: eighteen cards, nine rows, a band past 6000px. Now
   the container is far taller than the photograph's aspect, cover scales to the
   HEIGHT instead, and what survives is a 38%-wide vertical strip at 72% across —
   clapboard and shadow, no bulb anywhere in it. Measured 9 Aug 2026: the whole
   band composited to flat --ink-deep, 5.03:1 everywhere, 0% failing and the
   seed's single loudest gesture gone. Passing the contrast floor by deleting the
   photograph is not passing.
   So on a band that tall the photograph is anchored to the top, at its own
   aspect — where the headline, the ledger and the first numbers are — and masked
   off into ink below. Which is what a porch light actually does: it falls on the
   step and the rest of the yard is dark.
   The height is capped at 1400px rather than left to the band, because 1400 is
   about where a ring's lantern lands and it is the exact geometry the 72%/34%
   crop was tuned on — so the hub's head gets the same slice of the photograph
   the Memphis head gets, bulb, moths and all, instead of a new crop nobody
   measured. :has() keys off a hub's shape, not off a page name: either one
   .dp-vet-calls holding six cards (large animal splits 3 + 15, farm call 13 + 2)
   or a lantern carrying three or more species labels (the 24-hour hub runs 58
   cards under 26 of them). No ring page reaches either — the widest, Houston,
   is four and four under two labels — so every shipped ring keeps the crop it
   was tuned and measured on, and a browser without :has() keeps that crop too.
   THE MASK STOPS ARE MEASURED, NOT TASTE. At full strength down the whole 1400
   the first two rows of call cards sit on lit clapboard and .dp-vet-src-dark —
   the line that proves an emergency listing — bottomed out at 4.27:1 at 1280
   with 1.4% of its background under the floor. The photograph therefore runs
   clean through the head, where the type is 58px Bevan and nothing fine sits on
   it, and is down to two-fifths by the time the first source lines arrive. Which
   is also the truer picture: one bulb over a long ledger, bright at the step and
   gone by the far end of the porch. Re-measure if you change a stop. */
.dp-vet-lantern:has(.dp-vet-calls>.dp-vet-call:nth-child(6))>picture>img,
.dp-vet-lantern:has(.dp-vet-lane-mono~.dp-vet-lane-mono~.dp-vet-lane-mono)>picture>img{
  height:min(100%,1400px);bottom:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.4) 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.4) 58%,transparent 100%)}
.dp-vet-lantern-scrim{position:absolute;inset:0;
  background:linear-gradient(97deg,rgba(13,10,7,.975) 0%,rgba(13,10,7,.94) 40%,
  rgba(13,10,7,.72) 72%,rgba(13,10,7,.44) 100%)}
.dp-vet-lantern-body{position:relative;padding:40px var(--pad) 0}

/* head of the lantern — copy left, the count ledger on a hairline rail right */
.dp-vet-head{display:grid;grid-template-columns:1fr 336px;gap:52px;align-items:start;
  padding-bottom:38px}
.dp-vet-head h1,.dp-vet-head h2{font:400 58px/1 Bevan,serif;text-transform:uppercase;margin-top:18px;
  color:var(--cream)}
.dp-vet-head .lede{font:400 17px/1.62 'Libre Baskerville',Georgia,serif;color:var(--body-warm);
  margin-top:16px;max-width:52ch;text-wrap:pretty}
.dp-vet-head .callfirst{font:700 15px/1.5 'Libre Baskerville',Georgia,serif;color:var(--tan);
  margin-top:18px}

/* the ledger rail — what this ring holds, and when it was checked */
/* THE LEDGER STANDS IN SHADE. Read this before you touch the three declarations
   below; every one of them is load-bearing and the obvious simplifications were
   measured and rejected.
   The rail sits at the RIGHT edge of the lantern, where the scrim has thinned to
   .44 and the porch-light photograph shows through and lifts the ground. The
   rail's fine print is read against THAT, not against --ink-deep, and it was
   failing badly: 71% of the pixels under "CHECKED … AGAINST THE PRACTICE'S OWN
   SITE" came in below 4.5:1 at 1280. So the rail stops borrowing the scrim's
   ground and carries its own.
   FIRM AT THE HAIRLINE, not faded in from it. A soft entry looks better in
   isolation and fails: the leftmost stretch of the rail stays on bare scrim, the
   first words of every line sit in it, and that strip — not the far edge — held
   the worst pixels, 3.94:1 at 1025. Three soft-entry ramps and three compressed
   scrims were measured; only a firm entry clears. The rail's own border-left is
   its edge and does not need a second, softer one.
   FULL HEIGHT OF THE HEAD. Sized to its content the backing stops in open
   photograph and reads as a black card floating on the porch — card chrome,
   which this system does not do anywhere. Stretched, with the head's 38px of
   bottom padding borrowed back by the negative margin, the dark ends exactly on
   the hairline above the lane label. Then it is not a box: it is the ledger
   column standing in shade, bounded left by its own rule and below by the band's.
   The light falls on the headline and the phone numbers; the ledger is beside
   them in the dark. That is the seed, not a patch on it.
   Below 1024 this all comes off — the head stacks, there is no column to shade,
   and the compressed scrim in that media block carries the fine print instead.
   MEASURE THIS THE HARD WAY. getComputedStyle reports 5.03:1 here and is lying —
   it assumes the flat --ink-deep ground and cannot see the photograph. Hide the
   text, screenshot the band, sample the composited pixels. A ring that uses a
   different lantern photograph has to re-measure: these numbers are tuned to
   one image. */
.dp-vet-ledger{border-left:1px solid #4a3c2d;padding:4px 0 38px 26px;
  align-self:stretch;margin-bottom:-38px;
  background:linear-gradient(90deg,rgba(13,10,7,.78) 0%,rgba(13,10,7,.92) 55%,
  rgba(13,10,7,.98) 100%)}
.dp-vet-ledger .h{font:400 10px 'Cutive Mono',monospace;letter-spacing:.2em;color:var(--tan);
  padding-bottom:12px;border-bottom:1px solid #3a2f23}
.dp-vet-ledger .line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid #2b231b}
.dp-vet-ledger .line a,.dp-vet-ledger .line span:first-child{font:400 12px 'Cutive Mono',monospace;
  letter-spacing:.12em;color:var(--body-warm)}
/* On a ring page these rows are the fastest way down to a lane, and set like the
   plain ledger text beside them nothing said so. Tan + a hairline is the least
   that reads as a shortcut without turning the count rail into a nav bar.
   The affordance is half the rule; the box is the other half. These are the
   fastest route down to a lane for a reader who may be one-handed in the dark,
   so they carry the same ≥44px floor as every tel: on the site. The negative
   margin gives the padding back to the layout, so the rail keeps its 11px
   rhythm and the row does not grow. */
.dp-vet-ledger .line a{color:var(--tan);border-bottom:1px solid #4a3c2d;
  display:inline-block;padding:15px 0;margin:-15px 0}
.dp-vet-ledger .line a:hover{color:#ffd7a6;border-bottom-color:var(--tan)}
.dp-vet-ledger .n{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:19px;
  color:var(--cream);line-height:1}
/* Fine print on the dark ground still has to be readable in the dark — this is
   the line that carries the verification date, so it is proof, not decoration.
   --muted-3 is about 3.2:1 on --ink-deep; this clears the 4.5:1 floor at 10px.
   The cream-ground .dp-vet-src keeps --muted-3, where it already passes. */
/* No hard breaks in the display string either — same reason .dp-vet-key .grows
   carries. The rail is 336px at full width, 273px from 1025 to 1279 and 100% of
   the page below 1024, so a desktop-tuned <br> orphans a word at every other
   size; text-wrap:pretty keeps the last line from orphaning at any of them. On
   the page's proof line a year sitting alone reads as a mistake. */
.dp-vet-ledger .checked{font:400 10px/1.7 'Cutive Mono',monospace;letter-spacing:.1em;
  color:#8c806c;margin-top:14px;text-wrap:pretty}

/* the 24-hour lane label + the calls themselves */
.dp-vet-lane-mono{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:1px solid #3a2f23;padding-top:16px}
.dp-vet-lane-mono .t{font:400 11px 'Cutive Mono',monospace;letter-spacing:.22em;color:var(--ember)}
.dp-vet-lane-mono .s{font:400 11px 'Cutive Mono',monospace;letter-spacing:.12em;color:var(--muted)}
/* When the overnight lane splits by species, the second label needs air above it
   or it reads as a caption on the last call card instead of a new lane. */
.dp-vet-calls+.dp-vet-lane-mono{margin-top:26px}
/* The one way OUT of the lantern. The front door's dark band shows the Memphis
   small-animal pair, but the ring holds two more overnight — both equine — and
   without this the band is a dead end for somebody with a horse down at 2 a.m.
   The emergency band should not be the one place you cannot get out of. The
   lantern body carries no bottom padding (the calls are normally the last thing
   in it), so the row brings its own. Same combinator idiom as the rule above:
   two classes that already exist, related. And it is an answer to a question the
   reader is asking, so it is held to the same ≥44px floor as every tel: — see
   .dp-vet-answer .sub a, which solves it the same way. */
.dp-vet-calls+.dp-cta-row{margin-top:22px;padding-bottom:36px}
/* margin:0 is load-bearing, not tidiness: the general .dp-cta-row .dp-link rule
   below hands its padding back with a negative margin, and margin is not a
   property this rule declares, so without this it cascades in here and collapses
   the lantern's closing row from 81px to 51px. */
.dp-vet-calls+.dp-cta-row .dp-link{display:inline-block;padding:15px 0 14px;margin:0}
/* …and the SAME floor for every other .dp-cta-row in the book. The rule above is
   scoped to the one row that follows the emergency cards, so the way out of the
   honesty band at the foot of all sixteen rings ("The same ring on the Tramel
   Almanac"), the four lane hubs' "Who keeps this book" and the front door's
   "Back to the store" all shipped at 19px — every one of them a link that answers
   something the reader asked, held to nothing. This takes the house
   negative-margin idiom (§3) rather than the lantern row's bottom padding: these
   rows have no 36px of their own to absorb the growth, and .dp-cta-row is a
   centred flex line whose height is set by the .dp-btn beside the link, so the
   padding has to be handed back or the row grows. Lower specificity than the rule
   above, so the lantern keeps its own treatment untouched.
   The padding is weighted to the TOP on purpose: .dp-link draws its affordance as
   a 3px hairline under the text, and splitting the box evenly would drop that rule
   15px clear of the words it belongs to. .dp-link is set at line-height:normal,
   so its content box measures 15px or 16px depending on whether the string has a
   descender or an arrow in it — the floor has to clear the 15px case. 27 above
   and the original 3 below buys 45px on the worst string and leaves the underline
   exactly where it was drawn. */
.dp-cta-row .dp-link{display:inline-block;padding:27px 0 3px;margin:-27px 0 -3px}

.dp-vet-calls{display:grid;grid-template-columns:1.12fr 1fr;gap:0 44px;padding-bottom:6px}
.dp-vet-call{border-top:1px solid rgba(242,236,225,.2);padding:22px 0 26px}
.dp-vet-call:nth-child(odd){border-right:0;padding-right:44px;
  box-shadow:inset -1px 0 0 rgba(242,236,225,.11)}
/* A lane with exactly ONE call in it. The rule above is a divider between two
   cards, and on an only child it fires anyway: a hairline runs down the middle
   of the band and stops in open photograph, dividing the card from nothing.
   Wichita's overnight lane is one small-animal hospital and one equine practice,
   each alone under its own mono label, so it hits this twice; Little Rock hits
   it twice too. The card itself stays in the left column on purpose — the light
   falling across the empty right half IS the lantern, and stretching a lone card
   full-bleed would trade the seed's photograph for a filled box. Only the orphan
   divider comes off. */
.dp-vet-calls>.dp-vet-call:only-child{padding-right:0;box-shadow:none}
/* The same defect one card further along: an ODD-NUMBERED lane. Dallas–Fort
   Worth has three small-animal ERs answering overnight, so the third card lands
   alone on the left of a two-up row and the divider fires on it anyway — a
   hairline down the middle of the band ending in open photograph, dividing the
   last card from nothing. :only-child catches a lane of one; this catches a lane
   of three, five, seven. The card stays in the left column for the reason the
   rule above gives — the light falling across the empty right half IS the
   lantern. */
.dp-vet-calls>.dp-vet-call:nth-child(odd):last-child{padding-right:0;box-shadow:none}
.dp-vet-call .clinic{font:700 19px/1.3 'Libre Baskerville',Georgia,serif;color:var(--cream)}
.dp-vet-call .tel{font:400 44px/1 Bevan,serif;color:var(--tan);margin-top:10px;
  display:inline-block;min-height:44px;letter-spacing:-.01em}
.dp-vet-call .tel:hover{color:#ffd7a6}
.dp-vet-call .where{font:400 11px 'Cutive Mono',monospace;letter-spacing:.12em;color:var(--muted-2);
  margin-top:8px}
.dp-vet-call .said{font:italic 400 15px/1.55 'Libre Baskerville',Georgia,serif;color:var(--body-warm);
  margin-top:12px;max-width:46ch;text-wrap:pretty}
.dp-vet-call .tag{display:inline-block;font:400 10px 'Cutive Mono',monospace;letter-spacing:.18em;
  color:#f0c99a;border:1px solid #6b5843;padding:4px 9px;margin-top:12px}
/* A limit a practice puts on itself — a mileage ring, a client-only rule — is
   safety information, not fine print. It gets read-at-2am size, not source size. */
.dp-vet-call .caveat{font:400 14px/1.55 'Libre Baskerville',Georgia,serif;color:#e3cead;
  margin-top:14px;padding-left:14px;border-left:2px solid var(--ember);max-width:48ch;
  text-wrap:pretty}
.dp-vet-call .caveat b{display:block;font:400 10px 'Cutive Mono',monospace;letter-spacing:.2em;
  color:var(--ember);margin-bottom:5px;font-weight:400}
/* Same reason as .dp-vet-ledger .checked above: this is the line that proves an
   emergency listing, read on the darkest band on the site. #8c806c clears 4.5:1
   on --ink-deep at 10px; --muted-3 does not. Cream ground is unchanged below. */
.dp-vet-src-dark{display:block;font:400 10px 'Cutive Mono',monospace;letter-spacing:.1em;
  color:#8c806c;margin-top:12px;word-break:break-word}
.dp-vet-src-dark a{color:var(--muted-2);border-bottom:1px solid #3a2f23}
.dp-vet-src-dark a:hover{color:var(--tan)}

/* ---------- the daylight lanes: cream ledger ---------- */
.dp-vet-lane-head{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:end;
  border-bottom:2px solid var(--ink-dark);padding-bottom:12px}
.dp-vet-lane-head h2{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:74%;
  font-size:46px;line-height:.94;text-transform:uppercase;letter-spacing:-.01em}
.dp-vet-lane-head .qual{font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.55;
  color:var(--body-dark);text-wrap:pretty}
.dp-vet-lane-head .count{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rust);display:block;margin-bottom:7px}
.dp-sec-dark .dp-vet-lane-head{border-bottom-color:var(--cream)}
.dp-sec-dark .dp-vet-lane-head .qual{color:var(--body-cream)}
.dp-sec-dark .dp-vet-lane-head .count{color:var(--ember)}

.dp-vet-rows{margin-top:8px}
.dp-vet-row{display:grid;grid-template-columns:54px 1fr 234px;gap:28px;padding:24px 0;
  border-bottom:1px solid rgba(20,17,13,.22);align-items:start}
.dp-vet-row .n{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:70%;font-size:30px;
  line-height:.9;color:var(--rust)}
.dp-vet-row .nm{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:25px;line-height:1.12;
  color:var(--ink-dark)}
.dp-vet-row .where{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-3);margin-top:8px}
.dp-vet-row .said{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.56;
  color:var(--body-dark);margin-top:10px;max-width:66ch;text-wrap:pretty}
.dp-vet-row .hrs{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:15px;
  line-height:1.5;color:#5a5044;margin-top:9px;max-width:66ch;text-wrap:pretty}
.dp-vet-row .lanes{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.dp-vet-row .lanes span{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--body-dark);
  border:1px solid rgba(20,17,13,.3);padding:4px 8px}
.dp-vet-row .lanes span.hot{color:var(--cream);background:var(--rust);border-color:var(--rust)}
/* .inline-ours is tuned for the dark register, where tan is the flag colour. On
   feed-store paper the same mark has to be rust or it reads as a smudge beside
   the practice's name. Used where a lane claim comes with the practice's own
   limit attached — a mileage ring, a "we'd rather you hauled in". */
.inline-ours--cream{color:var(--rust)}
.dp-vet-call-col{text-align:right}
.dp-vet-call-col .tel{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:26px;
  letter-spacing:-.02em;color:var(--rust);display:inline-block;min-height:44px;line-height:1.3;
  border-bottom:2px solid rgba(122,63,29,.34)}
.dp-vet-call-col .tel:hover{color:#a5551f;border-bottom-color:#a5551f}
.dp-vet-call-col .cta{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-3);display:block;margin-top:6px}
.dp-vet-src{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:10px;letter-spacing:.1em;
  color:var(--muted-3);margin-top:12px;word-break:break-word}
.dp-vet-src a{color:var(--muted-3);border-bottom:1px solid rgba(20,17,13,.25)}
.dp-vet-src a:hover{color:var(--rust)}
/* THE LANE HUBS. A hub gathers one lane out of all sixteen rings, so every row
   has to say which ring it came out of and offer the way back to it. That ring
   link is the page's answer to "where is this one filed", and it rides on a 10px
   proof line: colour alone left it measuring 13px on a page where every tel: is
   44. Same negative-margin idiom the ledger rows and the index entries use — the
   hit box grows, the layout does not move a pixel. Scoped to internal /vets/
   hrefs on purpose: the practice's own source link beside it stays small print,
   because that is what a citation is. */
.dp-vet-src a[href^="/vets/"]{display:inline-block;padding:16px 0;margin:-16px 0;
  color:var(--rust);border-bottom-color:rgba(122,63,29,.45)}
.dp-vet-src a[href^="/vets/"]:hover{border-bottom-color:var(--rust)}

/* the empty lane. Every ring will have one. It is a finding, not a gap —
   say what was looked for and leave it empty rather than reach for a nearby
   clinic that never claimed the species. */
.dp-vet-empty{background:var(--hatch-cream);border:1px solid rgba(20,17,13,.24);
  padding:26px 24px;margin-top:26px}
.dp-vet-empty .h{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:#8b8271}
.dp-vet-empty p{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.58;
  color:var(--body-dark);margin-top:10px;max-width:60ch;text-wrap:pretty}
.dp-sec-dark .dp-vet-empty{background:var(--hatch-dark);border-color:var(--line-2)}
.dp-sec-dark .dp-vet-empty .h{color:var(--muted-3)}
.dp-sec-dark .dp-vet-empty p{color:var(--body-cream)}

/* ---------- the four lanes strip (full-bleed dark break) ---------- */
.dp-vet-lanes-strip{background:var(--ink-deep);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr)}
.dp-vet-lanes-strip a{padding:26px 22px;border-right:1px solid var(--line);display:block}
.dp-vet-lanes-strip a:first-child{padding-left:0}
.dp-vet-lanes-strip a:last-child{border-right:0;padding-right:0}
.dp-vet-lanes-strip .n{font-family:Archivo,system-ui,sans-serif;font-weight:400;font-size:10px;
  letter-spacing:.18em;color:var(--muted-3);display:block}
.dp-vet-lanes-strip .t{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-stretch:80%;
  font-size:23px;text-transform:uppercase;color:var(--cream);display:block;margin-top:6px;line-height:1.05}
.dp-vet-lanes-strip .c{font-family:'Source Serif 4',Georgia,serif;font-size:14px;line-height:1.45;
  color:var(--muted);display:block;margin-top:6px}
.dp-vet-lanes-strip a:hover .t{color:var(--tan)}

/* ---------- the front door: the index of rings, by state ---------- */
.dp-vet-index-wrap{display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start;
  margin-top:34px}
/* Multi-column, not a grid. A 4-up grid leaves whichever state lands last sitting
   alone beside a hole three cells wide, and that hole reads as a mistake rather
   than as the ragged bottom of a list. Columns flow, and the rag stays small
   however many states the book grows to. */
.dp-vet-index{columns:4;column-gap:28px}
.dp-vet-state{break-inside:avoid;-webkit-column-break-inside:avoid;
  border-top:2px solid var(--ink-dark);padding-top:12px;margin-bottom:30px;
  scroll-margin-top:24px}
.dp-vet-state .st{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:74%;
  font-size:22px;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink-dark)}
.dp-vet-state ul{list-style:none;margin:10px 0 0;padding:0}
.dp-vet-state li{padding:7px 0;border-bottom:1px solid rgba(20,17,13,.16)}
.dp-vet-state li:last-child{border-bottom:0}
.dp-vet-state a{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:18px;
  color:var(--ink-dark);border-bottom:1px solid rgba(122,63,29,.35)}
.dp-vet-state a:hover{color:var(--rust);border-bottom-color:var(--rust)}
/* The plate's note sends phone readers down here — "it's a small target, the list
   below is the easy way in" — and §7 makes this list the whole answer with JS
   off. So the route the page recommends has to measure like one. It was 26px,
   between the silhouette it replaces (63×22 at 390, un-tappable by design) and
   the #state-answer link (45px, already right). Same treatment as that link, and
   the negative margin keeps the card's 7px row rhythm. One rule lands it for all
   sixteen rings' index entries. */
.dp-vet-state ul a{display:inline-block;padding:11px 0;margin:-11px 0}
/* The 48px hit box above ends 11px BELOW the words, and the link's own hairline
   is drawn at the bottom of that box — straight through the .note that follows
   it in the same list item. The note has to clear the rule that belongs to the
   link, not sit on it. Found on the 24-hour lane hub, the first page in the book
   that prints a note against every entry; it fixes the front door too. */
.dp-vet-state ul a + .note{margin-top:13px}
.dp-vet-state .note{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3);display:block;margin-top:4px}
/* the state the form asked for */
.dp-vet-state.is-lit{border-top:2px solid var(--rust);background:#e9dfca;
  padding:12px 14px 10px;margin-left:-14px;margin-right:-14px}
.dp-vet-state.is-lit .st{color:var(--rust)}

.dp-vet-grow{border-left:2px solid rgba(20,17,13,.2);padding-left:24px}
.dp-vet-grow .h{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rust)}
.dp-vet-grow p{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.6;
  color:var(--body-dark);margin-top:12px;text-wrap:pretty}
.dp-vet-grow p+p{margin-top:12px}
/* The rail is the one cream band that carries running prose with a link in it,
   and the global tan is a dark-ground colour — on feed-store paper it washes out
   to nearly nothing. Same treatment the index cards use, for the same reason. */
.dp-vet-grow p a{color:var(--ink-dark);border-bottom:1px solid rgba(122,63,29,.45)}
.dp-vet-grow p a:hover{color:var(--rust);border-bottom-color:var(--rust)}

/* the honest answer to a state we have not walked. Written by the inline
   script; empty and hidden until then, so JS-off never sees a blank promise. */
.dp-vet-answer{margin-top:26px;border-left:3px solid var(--ember);padding:14px 0 14px 20px;
  display:none}
.dp-vet-answer.is-on{display:block}
.dp-vet-answer p{font:700 16px/1.55 'Libre Baskerville',Georgia,serif;color:var(--cream)}
.dp-vet-answer .sub{font:400 14px/1.6 'Libre Baskerville',Georgia,serif;color:var(--body-warm);
  margin-top:7px;font-weight:400}
/* The answer box link is the payoff of the form; it has to look and measure like
   a target. Set like the caption around it, it read as the tail of a sentence
   and measured 18px — half the 44px floor every tel: on this site is held to. */
.dp-vet-answer .sub a{display:inline-block;color:var(--tan);
  border-bottom:1px solid var(--ember);padding:15px 0 7px}
.dp-vet-answer .sub a:hover{color:#ffd7a6;border-bottom-color:var(--tan)}

/* The one link that closes a dark band — "back to the store", "the same ring on
   the Almanac". It was an inline colour + hairline repeated on every page in the
   book; it is a class now so the next fourteen rings inherit it. */
.dp-link-dark{color:var(--tan);border-bottom:1px solid var(--muted-4)}
.dp-link-dark:hover{color:#ffd7a6;border-bottom-color:var(--tan)}

/* Its cream counterpart, and the same story one register down. The global
   a{color:var(--tan)} is a dark-ground colour that washes out on paper, so every
   lane head's route to the whole-book lane hub carried the rust and the hairline
   as an inline style — 94 of them across the sixteen rings, two declarations
   typed 47 times each. Being hand-styled instead of classed is exactly why they
   never inherited a hit box and measured 18px: the fix for §3's "it belongs in
   styles.css, not inline on your page" and the fix for the 44px floor are the
   same edit. The ring generator emits .dp-link-cream now. */
.dp-link-cream{color:var(--rust);border-bottom:1px solid rgba(122,63,29,.4)}
.dp-link-cream:hover{color:var(--ink-deep);border-bottom-color:var(--rust)}
/* The lane head's second .qual is the lane-hub route, and it is an answer to a
   question the reader is asking — same floor as every tel:. Negative margin so
   the 11px of air below the qualifier paragraph stays exactly 11px. The offset
   itself is a sibling rule, not a class: both paragraphs already exist and the
   only thing that distinguishes the second is that it follows the first. */
.dp-vet-lane-head .qual+.qual{margin-top:11px}
/* This is the one padded link in the book whose text WRAPS, and that rules out
   the inline-block idiom used everywhere else: a wrapped inline-block stretches to
   the full 360px column (fit-content cannot shrink it — max-content is wider than
   the column), so the 3px hairline runs the whole width under a two-word last line
   and reads as a section rule rather than a link. Left inline, each line fragment
   keeps its own underline AND its own border box, so both lines are real targets.
   Padding goes on the TOP only: it buys the height upward into the leading above,
   where nothing is painted and no other link competes for the hit, and it leaves
   .dp-link's 3px hairline exactly where it was drawn. Measured per fragment with
   getClientRects(), not on the union box, which flatters a two-line inline. */
.dp-vet-lane-head .qual a.dp-link{padding-top:29px}

/* the ring's tie back to the sister Almanac */
.dp-vet-sister{background:var(--rust);color:var(--cream-warm);
  display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:center;
  padding:40px var(--pad) 44px}
.dp-vet-sister .kick{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#f0cfae}
.dp-vet-sister h3{font-family:'Source Serif 4',Georgia,serif;font-weight:200;font-style:italic;
  font-size:40px;line-height:1.08;margin-top:14px;max-width:28ch;text-wrap:pretty}
.dp-vet-sister p{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.6;
  color:#f3e6d3;margin-top:16px;max-width:64ch;text-wrap:pretty}
.dp-vet-sister-act{justify-self:end;text-align:right;
  border-left:1px solid rgba(243,230,211,.3);padding-left:40px;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.dp-vet-sister-act .why{font-family:Archivo,system-ui,sans-serif;font-weight:500;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#e6c8a8;line-height:1.9}

/* how the page was made — the honesty block, dark, every ring carries it */
.dp-vet-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:32px;
  border-top:1px solid var(--line-2);padding-top:24px}
.dp-vet-rules .n{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:70%;font-size:30px;
  line-height:1;color:var(--ember)}
.dp-vet-rules h3{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:21px;
  line-height:1.18;margin-top:10px;color:var(--cream)}
.dp-vet-rules p{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.58;
  color:var(--body-cream);margin-top:9px;text-wrap:pretty}

/* ---------- vet book responsive ---------- */
@media (max-width:1279px){
  .dp-vet-head{grid-template-columns:1fr 300px;gap:36px}
  .dp-vet-head h1,.dp-vet-head h2{font-size:50px}
  .dp-vet-call .tel{font-size:38px}
  .dp-vet-lane-head{grid-template-columns:1fr 300px;gap:26px}
  .dp-vet-lane-head h2{font-size:38px}
  .dp-vet-row{grid-template-columns:46px 1fr 200px;gap:22px}
  .dp-vet-index{columns:3}
  .dp-vet-index-wrap{grid-template-columns:1fr 270px;gap:36px}
  .dp-vet-sister{grid-template-columns:1fr 340px;gap:32px}
}
@media (max-width:1024px){
  .dp-vet-head{grid-template-columns:1fr;gap:30px}
  /* Stacked, the rail is the full width of the band and has no column to stand
     in, so the stretch-and-borrow above comes off. The compressed scrim below is
     what carries the fine print at these widths. */
  .dp-vet-ledger{border-left:0;border-top:1px solid #4a3c2d;padding:22px 0 0;
    align-self:auto;margin-bottom:0}
  /* 1024 is where the head stacks and the calls go single-column, so every line
     in the band now runs the full width and out into the falloff — the horizontal
     scrim stops meaning "the copy is in the light, the rail is in the shade" and
     just means "the right half of everything is harder to read". Measured on the
     composited pixels at 900 and 768: .dp-vet-src-dark, the line that proves an
     emergency listing, was bottoming out at 3.58:1 with a quarter of its
     background under the floor. Same falloff, kept, compressed: the photograph
     still reads, the fine print sitting on it clears 4.5:1. Below 600 the scrim
     goes vertical and near-opaque — that rule is below and still wins.
     RE-TUNED FOR THE TALL BANDS, 9 Aug 2026. Every stop here is a percentage of
     the lantern's OWN height, so a ring with a big overnight lane stretches the
     same falloff over twice the band and thins it exactly where the middle
     cards' proof lines sit. Houston is the first ring to hit it — eight calls,
     four small-animal and four equine, the widest night lane in the book — and
     its worst .dp-vet-src-dark measured 4.49:1 at 900 while every shorter ring
     cleared. Same falloff, a few thousandths deeper at each stop: Houston comes
     up to 4.59 with nothing under the floor, Memphis and Atlanta come up too,
     and the porch light still reads. Re-measure when a taller ring lands. */
  .dp-vet-lantern-scrim{background:linear-gradient(97deg,rgba(13,10,7,.978) 0%,
    rgba(13,10,7,.958) 40%,rgba(13,10,7,.918) 72%,rgba(13,10,7,.875) 100%)}
  .dp-vet-calls{grid-template-columns:1fr;gap:0}
  .dp-vet-call:nth-child(odd){padding-right:0;box-shadow:none}
  .dp-vet-lane-head{grid-template-columns:1fr;gap:12px;align-items:start}
  .dp-vet-index-wrap{grid-template-columns:1fr;gap:34px}
  .dp-vet-index{columns:2}
  .dp-vet-grow{border-left:0;border-top:2px solid rgba(20,17,13,.2);padding-left:0;padding-top:20px}
  .dp-vet-lanes-strip{grid-template-columns:repeat(2,1fr)}
  .dp-vet-lanes-strip a{border-bottom:1px solid var(--line)}
  .dp-vet-lanes-strip a:nth-child(2n){border-right:0;padding-right:0}
  .dp-vet-lanes-strip a:nth-child(2n+1){padding-left:0}
  .dp-vet-lanes-strip a:nth-last-child(-n+2){border-bottom:0}
  .dp-vet-sister{grid-template-columns:1fr;gap:24px}
  .dp-vet-sister-act{justify-self:start;text-align:left;border-left:0;padding-left:0;
    border-top:1px solid rgba(243,230,211,.3);padding-top:22px}
  .dp-vet-rules{grid-template-columns:1fr;gap:24px}
}
@media (max-width:820px){
  .dp-vet-head h1,.dp-vet-head h2{font-size:42px}
  .dp-vet-lane-head h2{font-size:32px}
  .dp-vet-row{grid-template-columns:40px 1fr;gap:18px;row-gap:0}
  /* Stacked, the number lands under the source line, so it needs its own rule to
     read as the row's one action rather than as more small print. */
  .dp-vet-call-col{grid-column:2;text-align:left;margin-top:14px;padding-top:14px;
    border-top:1px solid rgba(20,17,13,.18)}
  .dp-sec-dark .dp-vet-call-col{border-top-color:var(--line-2)}
  .dp-vet-sister h3{font-size:31px}
}
@media (max-width:600px){
  .dp-vet-lantern-body{padding:30px var(--pad) 0}
  /* Vertical on a phone, and re-tuned 9 Aug 2026 for the same reason as the
     ≤1024 rule above: the stops are percentages of the band, and Houston's
     eight-call lantern stretched them until its first proof line ran 4.46:1
     with 23% of its background under the floor. Deeper by four thousandths at
     the top stop and two at the others — Houston clears at 4.72 with nothing
     failing, every shorter ring comes up with it. */
  .dp-vet-lantern-scrim{background:linear-gradient(rgba(13,10,7,.94) 0%,rgba(13,10,7,.965) 55%,
    rgba(13,10,7,.985) 100%)}
  .dp-vet-head{padding-bottom:28px}
  .dp-vet-head h1,.dp-vet-head h2{font-size:34px}
  .dp-vet-head .lede{font-size:16px}
  .dp-vet-call .tel{font-size:33px}
  .dp-vet-call .clinic{font-size:17px}
  .dp-vet-index{columns:1}
  .dp-vet-state{margin-bottom:24px}
  .dp-vet-lanes-strip{grid-template-columns:1fr}
  .dp-vet-lanes-strip a{padding:20px 0;border-right:0}
  .dp-vet-lanes-strip a:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .dp-vet-lanes-strip a:last-child{border-bottom:0}
  .dp-vet-row .nm{font-size:21px}
  .dp-vet-call-col .tel{font-size:23px}
  .dp-vet-sister{padding:34px var(--pad) 38px}
  .dp-vet-sister h3{font-size:26px}
}

/* ==========================================================================
   THE NIGHT PLATE — the US map on the /vets/ front door
   EDITORIAL IDEA (extends "THE PORCH LIGHT LEDGER" above):
   The Tramel Farms Almanac keeps this same map as a DAYLIGHT engraving plate —
   cream paper, red states, gold register. The vet book keeps the night version
   of it. Same country, same viewBox, 2 a.m.: the thirteen states we have walked
   are lit like porch lights seen from a plane, and everything else is dark
   because we have not been there. A dark state is not a state we skipped, it is
   an honest one — so the map never invents a pin, and there is no third
   "coming soon" tier promising ground we haven't stood on.
   The glow behind the map is aimed at the lit block on purpose: the light falls
   on the part of the country the book covers, and falls off at the edges.
   NOTE TO BUILDERS: only /vets/ carries the plate. Ring pages open on the
   lantern, not on a map. Do not add classes here — compose with what is below.
   ========================================================================== */
/* The glow is aimed at the LIT BLOCK, and at one walked ring that is Tennessee —
   not the panhandle. At 61% 63% the brightest ground sat over Florida and south
   Georgia, which the key next to it defines as "DARK · NOT WALKED", so the plate
   was lighting the part of the country the book has not been to. 55% 55% puts
   the centre on the TN/MS block. RE-AIM IT as the lit block grows and moves —
   it is one number, it belongs with the §6a relighting edits, and the claim this
   comment makes has to stay true on the day you make it. */
.dp-vet-plate{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:42px var(--pad) 46px;
  background:radial-gradient(54% 62% at 55% 55%,rgba(194,112,58,.15) 0%,
    rgba(194,112,58,.055) 44%,rgba(194,112,58,0) 73%),var(--ink-deep)}
/* map left, key rail right — never a centred map with a caption under it */
.dp-vet-plate-grid{display:grid;grid-template-columns:1fr 316px;gap:46px;align-items:start;
  margin-top:26px}

.usmap{width:100%;height:auto;display:block;overflow:visible}
.usmap__st{fill:rgba(242,236,225,.045);stroke:rgba(242,236,225,.145);stroke-width:.7}
.usmap__link{cursor:pointer}
/* THE WELD — closed 9 Aug 2026, the day the book went to sixteen rings and fourteen
   states lit at once. The inherited Almanac paths do not tile: the Tennessee/Alabama
   gap is a 44×15-unit void (x 910–953, y 373–388), with 40u voids at MS/LA and AR/MS.
   A rust underlay at stroke-width 3.5 was tried first and closed none of them, and on
   this plate the key defines black as "DARK · NOT WALKED", so a void reads as unwalked
   ground cut between two walked states. What closes them is a morphological closing:
   .usmap__weld carries a copy of every lit path through an feMorphology dilate(9) +
   erode(9), which bridges any gap up to 18 units and puts the outer coastline back
   where it was. It is painted FIRST in the SVG, so every dark state repaints over the
   overspill and the weld survives only in the true voids. Light a new state and it
   welds itself — add its path to the group and nothing else. */
.usmap__weld path{fill:var(--rust)}
.usmap__st--lit{fill:var(--rust);stroke:var(--tan);stroke-width:1.7;
  transition:fill 200ms ease,stroke 200ms ease}
.usmap__link:hover .usmap__st--lit{fill:var(--ember);stroke:var(--sand)}
.usmap__link:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.usmap__link:focus-visible .usmap__st--lit{fill:var(--ember)}
/* Set in CSS, not as an SVG presentation attribute — a CSS declaration outranks
   the attribute, so a fill="" on the <text> would lose to this rule anyway. */
.usmap__lbl{font-family:'Cutive Mono',monospace;font-size:17px;letter-spacing:.04em;
  fill:var(--cream);pointer-events:none}
.usmap__link:hover .usmap__lbl{fill:#fff8ea}
/* A state that holds more than one ring carries the count, because tapping it
   opens a chooser rather than a ring page and you should know that before you
   tap. It is a number we have, not a decoration. */
.usmap__lbl--two{font-size:11px;letter-spacing:.08em;fill:var(--sand)}
/* the state the homepage form asked for, lit brighter than its neighbours */
.usmap__link.is-hit .usmap__st--lit{fill:var(--ember);stroke:var(--sand);stroke-width:3.4}

/* the key rail — what lit and dark mean, said plainly */
.dp-vet-key{border-left:1px solid #4a3c2d;padding:2px 0 2px 26px}
.dp-vet-key .h{font:400 10px 'Cutive Mono',monospace;letter-spacing:.2em;color:var(--tan);
  padding-bottom:12px;border-bottom:1px solid #3a2f23}
.dp-vet-key .row{display:flex;gap:13px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid #2b231b}
.dp-vet-key i{width:15px;height:15px;flex:none;margin-top:4px;display:block}
.dp-vet-key .sw-lit{background:var(--rust);outline:2px solid var(--tan);outline-offset:-1px}
.dp-vet-key .sw-dark{background:rgba(242,236,225,.05);outline:1px solid rgba(242,236,225,.22)}
/* Not a colour chip — the map does not colour these states differently, it
   labels them. The key shows the same glyph the map shows. */
.dp-vet-key .sw-two{width:auto;height:auto;margin-top:1px;border:1px solid #6b5843;
  padding:2px 5px;font:400 10px 'Cutive Mono',monospace;color:var(--sand);font-style:normal;
  line-height:1.2}
.dp-vet-key .k{font:400 10px 'Cutive Mono',monospace;letter-spacing:.18em;color:var(--cream);
  display:block}
.dp-vet-key .row p{font:400 14px/1.55 'Libre Baskerville',Georgia,serif;color:var(--body-warm);
  margin-top:6px;text-wrap:pretty}
/* No hard breaks — the rail is 316px at full width and 100% of the page below
   1024, so a desktop-tuned <br> orphans a word at every other size. */
.dp-vet-key .grows{font:400 11px/1.85 'Cutive Mono',monospace;letter-spacing:.08em;
  color:var(--muted-2);margin-top:18px;text-wrap:pretty}

/* ---------- night plate responsive ---------- */
@media (max-width:1279px){
  .dp-vet-plate-grid{grid-template-columns:1fr 280px;gap:34px}
}
@media (max-width:1024px){
  .dp-vet-plate-grid{grid-template-columns:1fr;gap:30px}
  .dp-vet-key{border-left:0;border-top:1px solid #4a3c2d;padding:22px 0 0}
}
@media (max-width:900px){
  /* The label is set in SVG user units, so it shrinks with the frame: at 390px
     the country renders about 350px wide and 17u lands near 6 CSS px. The two
     letters are the only thing telling you which state is lit, so they get set
     back up. Same fix the Almanac's plate uses on its home label.
     27 and not 34: the Deep South cluster — MS, AL, TN, KY, GA — is five narrow
     states inside about 190 units, and at 34 the labels overrun their own
     borders into the neighbour they are naming. */
  .usmap__lbl{font-size:27px}
  /* The count is back to the ×N glyph §5 and §6 name for this class, and 16 is
     the size that form wants. It had drifted to a spelled-out "N RINGS", which is
     seven characters where an abbreviation is two, and measured against the real
     fill (isPointInFill, §6b's method — a bbox is not a state) it overran four of
     the seven at 390: AR, MO, TN, and Mississippi at BOTH widths. MS is the
     binding constraint at 47u wide on the count's own baseline, against 76.7u of
     "3 RINGS"; no legible size and no x fixes that, which is why the string is
     what changed. ×N measures about 22u and clears every state at every width. */
  .usmap__lbl--two{font-size:16px}
}
@media (max-width:600px){
  .dp-vet-plate{padding:32px var(--pad) 36px}
  /* Full bleed on a phone. The map is the one element on this page that gets
     measurably more readable with 40 more pixels of width, and the gutter is
     doing nothing for it. */
  .dp-vet-plate-map{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
}
/* Clicking a two-ring state on the plate lands on its group in the index below.
   :target does the highlight with JS off; .is-lit is the same look applied by the
   ?state= script. Both share the one rule so the two paths can never drift. */
.dp-vet-state:target{border-top:2px solid var(--rust);background:#e9dfca;
  padding:12px 14px 10px;margin-left:-14px;margin-right:-14px}
.dp-vet-state:target .st{color:var(--rust)}