/* ==========================================================================
   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}
.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}
}