/* Young Gun Retrievers
   ---------------------------------------------------------------------------
   Direction: marsh water and paperwork. Deep wet green-black for the field,
   warm canvas panels for anything that is a *record* — the dog cards, the
   pedigree, the clearances. A working retriever kennel lives on documents:
   registration numbers, OFA results, pedigree certificates, hunt-test ribbons.
   So the site is built like a stud card, not a brochure.

   Type: Bitter (slab serif) carries the names and headings — it reads stamped
   rather than fashionable. Source Sans 3 for body. IBM Plex Mono for anything
   registered, dated or numbered.
   -------------------------------------------------------------------------- */

:root {
  --marsh:      #10201A;
  --marsh-2:    #172C23;
  --marsh-3:    #21382C;
  --line:       #2F4437;

  --canvas:     #EFE9DA;
  --canvas-2:   #E1D9C5;
  --canvas-3:   #C9BEA3;

  --rust:       #A8482A;
  --rust-hi:    #C4643F;
  --water:      #6E8F94;
  --wheat:      #D8C48E;

  --on-dark:    #E9E3D4;
  --on-dark-mut:#94A395;
  --on-light:   #1C241E;
  --on-light-mut:#5E6A61;

  --display: 'Bitter', Georgia, serif;
  --body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --wrap: 1160px;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --r: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--marsh);
  color: var(--on-dark);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--wheat); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--wheat); color: var(--marsh); padding: .7rem 1.2rem; font-weight: 700; }
.skip:focus { left: 0; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; }

/* --wheat is audited at 3:1 against the dark base, which is the bar for a label
   on a hero. This same class is also drawn on light cards (a puppy's sex, on
   .pup) where 11px uppercase is normal text and needs 4.5:1 — it measured 4.08
   there. The light-surface override sets the solved accent; this keeps the
   label colour for the dark case it was designed for. */
.eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--wheat); margin: 0 0 .9rem; font-weight: 600;
}
.pup .eyebrow, .dogcard .eyebrow, .prodcard .eyebrow, .card .eyebrow { color: var(--accent-text); }
.lede { font-size: 1.1rem; color: var(--on-dark-mut); max-width: 52ch; }

/* --------------------------------------------------------------- masthead -- */

.masthead { background: var(--marsh); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.masthead-row { display: block; }
.masthead-in {
  max-width: var(--wrap); margin: 0 auto; padding: .9rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}
.mark { width: 42px; height: 42px; color: var(--wheat); flex: none; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-txt { display: grid; line-height: 1; font-family: var(--display); }
.brand-txt b { font-size: 1.22rem; font-weight: 800; letter-spacing: .01em; }
.brand-txt i { font-style: normal; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wheat); margin-top: .25rem; }

.motto {
  margin: 0 0 0 auto; text-align: right; font-family: var(--display);
  font-style: italic; font-size: .96rem; color: var(--on-dark-mut);
}
.motto em { display: block; font-style: normal; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .2rem; }

.nav { border-top: 1px solid var(--line); background: var(--marsh-2); }
.nav-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-wrap: wrap; gap: .2rem; }
.nav a {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-mut); text-decoration: none; padding: .8rem .9rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--on-dark); }
.nav a[aria-current="page"] { color: var(--wheat); border-bottom-color: var(--rust); }

.nav-toggle { display: none; width: 42px; height: 36px; background: none; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; padding: 8px 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--on-dark); margin: 4px 0; }

/* ---------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; padding: .85rem 1.5rem; border: 1px solid transparent;
  border-radius: var(--r); text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
  /* Explicit, because a <button> with no background falls back to the BROWSER'S
     default button face — #efefef in Chrome. Every .btn-ghost rendered as a
     button (Update, Remove, anything posting a form) was therefore light text on
     a near-white chip: about 1.03:1, invisible. The same class on an <a> looked
     fine, which is why it read as "the Remove button doesn't work" rather than
     as a styling fault, and why Firefox showed less of it. The filled variants
     below set their own background and are unaffected. */
  background: transparent;
}
.btn-primary { background: var(--rust); color: var(--on-accent, #fff); }
.btn-primary:hover { background: var(--rust-hi); }
/* A ghost button takes its colour from whatever it is sitting on.
   It was hardcoded to --on-dark, which is right in a hero or a footer and wrong
   everywhere else: on a light section it rendered #EAEAEB text on a #EFEFEF
   panel — about 1.03:1, i.e. an invisible button. That is what "Remove" looked
   like in the cart, at every width, and you cannot tap what you cannot see. */
.btn-ghost { border-color: var(--line); color: var(--ghost-fg, var(--on-dark)); }
.btn-ghost:hover { border-color: var(--wheat); color: var(--wheat); }
.sec-light, .panel, .carttable, .card { --ghost-fg: var(--on-light); }
.sec-light .btn-ghost, .carttable .btn-ghost { border-color: var(--canvas-3); }
.btn-dark { background: var(--marsh); color: var(--on-dark); border-color: var(--marsh); }
.btn-dark:hover { background: var(--marsh-3); }
.btn-light { background: var(--marsh); color: var(--on-base, var(--canvas)); }
.btn-light:hover { background: var(--marsh-3); }
/* A .btn with no variant is still a button, and until now it only LOOKED like
   one on a <button>, by accident, via the browser's default button face. On an
   <a> it was borderless text. Give it the neutral outline so the two agree. */
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-dark):not(.btn-light) {
  border-color: var(--line); color: var(--ghost-fg, var(--on-dark));
}
.btn-block { width: 100%; }

/* ------------------------------------------------ SIGNATURE: titled names -- */
/* Prefix titles / registered name / suffix titles, ruled like a certificate. */

.dogname { display: block; font-family: var(--display); line-height: 1.12; }
/* The title affixes a dog carries before and after its name. The .sec-light and
   .dogcard overrides below already moved to the solved accent; this default is
   the one that renders on the dark surfaces, and it was still --rust-hi. */
.dn-pre, .dn-suf {
  font-family: var(--mono); font-weight: 600; letter-spacing: .12em;
  color: var(--accent-text-dark); text-transform: uppercase;
}
.dn-reg { font-weight: 700; }

.dogname.is-lg { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.dogname.is-lg .dn-pre, .dogname.is-lg .dn-suf { font-size: .38em; vertical-align: .42em; }
.dogname.is-md { font-size: 1.35rem; }
.dogname.is-md .dn-pre, .dogname.is-md .dn-suf { font-size: .55em; vertical-align: .18em; }
.dogname.is-sm { font-size: 1rem; }
.dogname.is-sm .dn-pre, .dogname.is-sm .dn-suf { font-size: .68em; vertical-align: .1em; }

.sec-light .dn-pre, .sec-light .dn-suf { color: var(--accent-text); }

/* title ladders */
.ladders { display: grid; gap: .45rem; }
.ladder { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ladder-org { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; color: var(--on-dark-mut); width: 2.6rem; }
.sec-light .ladder-org { color: var(--on-light-mut); }
.ladder-steps { display: flex; gap: .3rem; }
.rung {
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em;
  padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 100px;
  color: var(--on-dark-mut);
}
.sec-light .rung { border-color: var(--canvas-3); color: var(--on-light-mut); }
.rung.is-held { background: var(--rust); border-color: var(--rust); color: var(--on-accent, #fff); }

/* ------------------------------------------------------------------ hero -- */

.hero.is-bg {
  display: grid; align-items: center;
  min-height: clamp(420px, min(40vw, 78vh), 780px);
  border-bottom: 1px solid var(--line);
}
.hero-bg-in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) var(--pad); }
.hero.is-bg .lede { color: var(--on-dark); }

.hero { position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--marsh-2), var(--marsh)); }
.hero-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--pad); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); font-weight: 800; letter-spacing: -.01em; }
.hero h1 em { font-style: italic; color: var(--wheat); }
.hero .lede { margin: 1.4rem 0 2rem; font-size: 1.15rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-img { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--marsh-3); aspect-ratio: 4/3; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-img.is-empty { display: grid; place-items: center; color: var(--on-dark-mut); font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 2rem; }

/* --------------------------------------------------------------- sections -- */

.sec { padding: clamp(3rem, 7vw, 5rem) 0; }
.sec-light { background: var(--canvas); color: var(--on-light); }
.sec-light h1, .sec-light h2, .sec-light h3 { color: var(--on-light); }
.sec-light .lede, .sec-light p { color: var(--on-light-mut); }
.sec-light .eyebrow { color: var(--accent-text); }
.sec-alt { background: var(--marsh-2); }

.sec-hd { margin-bottom: 2.4rem; }
.sec-hd h2 { font-size: clamp(2rem, 4.6vw, 2.9rem); }
.sec-hd p { margin: .8rem 0 0; max-width: 56ch; }
.sec-hd.is-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }

.page-hd { background: linear-gradient(180deg, var(--marsh-2), var(--marsh)); border-bottom: 1px solid var(--line); padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hd h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; }
.page-hd p { margin: 1rem 0 0; color: var(--on-dark-mut); max-width: 58ch; font-size: 1.06rem; }

.longform { max-width: 68ch; }
.longform p { margin: 0 0 1.15rem; }

/* --------------------------------------------------------------- dog card -- */

.dog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.4rem; }

.dogcard {
  background: var(--canvas); color: var(--on-light); border-radius: var(--r);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  border: 1px solid var(--canvas-3); transition: transform .16s ease, box-shadow .16s ease;
}
.dogcard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.dogcard-img { aspect-ratio: 4/3; background: var(--canvas-2); overflow: hidden; }
.dogcard-img img { width: 100%; height: 100%; object-fit: cover; }
.dogcard-img.is-empty { display: grid; place-items: center; color: var(--canvas-3); font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.dogcard-bd { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.dogcard .dn-pre, .dogcard .dn-suf,
.litter .dn-pre, .litter .dn-suf,
.pup .dn-pre, .pup .dn-suf,
.card .dn-pre, .card .dn-suf { color: var(--accent-text); }
.dogcard-call { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--on-light); }
.dogcard-meta {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-light-mut); display: flex; flex-wrap: wrap; gap: .5rem;
  border-top: 1px solid var(--canvas-3); padding-top: .6rem; margin-top: auto;
}
.dogcard-meta span:not(:last-child)::after { content: " ·"; }

.rolechip {
  position: absolute; margin: .7rem; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; background: var(--marsh);
  color: var(--wheat); padding: .25rem .6rem; border-radius: 100px;
}
.dogcard-imgwrap { position: relative; }

/* ------------------------------------------------------------ dog profile -- */
/* Laid out like a stud card: portrait, ruled identity block, boxed records. */

.dogpro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* A grid item's default min-width is auto, not 0 — a track will not shrink
   below its content, so one unbreakable child drags the whole page sideways on
   a phone. This is what made a product page 437px wide inside a 390px screen.
   Applied to every content grid because they all share the default. */
.dogpro > *, .dogpro-gallery > *, .two-col > *, .hero-in > *, .litter > * { min-width: 0; }
.dogpro-gallery { display: grid; gap: .6rem; min-width: 0; }
/* No fixed aspect on the profile hero. Dog photographs are overwhelmingly portrait
   — a 2829x4507 phone shot is typical — and forcing one into a 4/3 landscape box
   cropped away more than half the dog on the one page built to show him. The frame
   now takes the shape of the photograph. The grid CARD upstairs still crops to 4/3
   on purpose, because a wall of thumbnails has to line up, and hero_focus still
   chooses what survives that crop. */
.dogpro-hero { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--marsh-3);
  width: fit-content; max-width: 100%; margin-inline: auto; }
.dogpro-hero img { display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin-inline: auto; object-fit: contain; }
/* fit-content would collapse the placeholder around its two words. */
.dogpro-hero.is-empty { width: auto; aspect-ratio: 4/3; display: grid; place-items: center; color: var(--on-dark-mut); font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.dogpro-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .5rem; }
.dogpro-thumbs a { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; aspect-ratio: 1; }
.dogpro-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.idblock { border-top: 2px solid var(--rust); padding-top: 1.2rem; }
.idblock .callname { font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--wheat); margin: .6rem 0 0; }

.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 1.8rem 0; border: 1px solid var(--line); }
.fact { padding: .8rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mut); }
.fact dd { margin: .25rem 0 0; font-family: var(--display); font-size: 1.05rem; font-weight: 500; }

.pedigree-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.parent {
  border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem;
  text-decoration: none; display: block;
}
.parent:hover { border-color: var(--wheat); }
.parent-role { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .35rem; }

.clearances { width: 100%; border-collapse: collapse; font-size: .92rem; }
.clearances th, .clearances td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--canvas-3); }
.clearances th { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-mut); }
.clearances td.ref { font-family: var(--mono); font-size: .8rem; color: var(--on-light-mut); }
.clearances tr:last-child td { border-bottom: 0; }

.pedigree-sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.sheet { background: var(--panel); border: 1px solid var(--canvas-3); border-radius: var(--r); padding: .7rem; }
.sheet img { width: 100%; height: auto; }
.sheet figcaption { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-light-mut); margin-top: .6rem; text-align: center; }

/* ---------------------------------------------------------------- litters -- */

.litter-list { display: grid; gap: 1.4rem; }
.litter {
  display: grid; grid-template-columns: 260px 1fr; gap: 1.6rem;
  background: var(--canvas); color: var(--on-light); border: 1px solid var(--canvas-3);
  border-radius: var(--r); overflow: hidden;
}
.litter-img { background: var(--canvas-2); }
.litter-img img { width: 100%; height: 100%; object-fit: cover; }
.litter-img.is-empty { display: grid; place-items: center; min-height: 190px; color: var(--canvas-3); font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.litter-bd { padding: 1.4rem 1.5rem 1.5rem; }
.litter-bd h3 { font-size: 1.5rem; }
.status {
  display: inline-block; font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: .25rem .6rem;
  border-radius: 100px; background: var(--canvas-2); color: var(--on-light-mut); margin-bottom: .7rem;
}
.status.is-available { background: var(--rust); color: var(--on-accent, #fff); }
.status.is-expecting, .status.is-whelped { background: var(--water); color: var(--on-water, #fff); }
.cross { display: grid; gap: .5rem; margin: 1rem 0; }
.cross-row { display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; align-items: baseline; }
.cross-lbl { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-mut); }
.litter-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--on-light-mut); border-top: 1px solid var(--canvas-3); padding-top: .8rem; margin-top: 1rem; }

/* -------------------------------------------------------------- offerings -- */

.offer-list { display: grid; gap: 1rem; }
.offer {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.5rem;
  background: var(--marsh-2);
}
.sec-light .offer { background: var(--panel, #fff); border-color: var(--canvas-3); }
.offer h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.offer-sum { color: var(--on-dark-mut); margin: 0 0 .8rem; }
.sec-light .offer-sum { color: var(--on-light-mut); }
.offer-price { text-align: right; white-space: nowrap; }
.offer-price b { font-family: var(--display); font-size: 1.7rem; font-weight: 700; display: block; line-height: 1.1; }
.offer-price span { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mut); }
.sec-light .offer-price span { color: var(--on-light-mut); }
.offer-dur { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wheat); }
.sec-light .offer-dur { color: var(--rust); }

/* ------------------------------------------------------- events / news --- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }

.evlist { display: grid; gap: .1rem; }
.ev { display: grid; grid-template-columns: 5.4rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.sec-light .ev { border-color: var(--canvas-3); }
.ev-when { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--wheat); line-height: 1.4; }
.sec-light .ev-when { color: var(--rust); }
.ev-what b { font-family: var(--display); font-size: 1.05rem; font-weight: 700; display: block; }
.ev-where { font-size: .88rem; color: var(--on-dark-mut); }
.sec-light .ev-where { color: var(--on-light-mut); }

.newslist { display: grid; gap: 1.4rem; }
.newsitem { border-left: 2px solid var(--rust); padding-left: 1.1rem; }
.newsitem time { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mut); }
.sec-light .newsitem time { color: var(--on-light-mut); }
.newsitem h3 { font-size: 1.2rem; margin: .3rem 0 .4rem; }
.newsitem p { margin: 0; font-size: .95rem; white-space: pre-line; }

/* --------------------------------------------------------------- partners -- */

.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; }
.partner { background: var(--canvas); color: var(--on-light); border: 1px solid var(--canvas-3); border-radius: var(--r); padding: 1.4rem; text-decoration: none; display: grid; gap: .6rem; }
.partner:hover { border-color: var(--rust); }
.partner-logo { height: 54px; display: grid; place-items: center; }
.partner-logo img { max-height: 54px; width: auto; }
.partner h3 { font-size: 1.15rem; }
.partner p { margin: 0; font-size: .9rem; color: var(--on-light-mut); }

/* ------------------------------------------------------------------ tiles -- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.tile { border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; text-decoration: none; display: block; background: var(--marsh-2); }
.tile:hover { border-color: var(--wheat); background: var(--marsh-3); }
.tile h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.tile p { margin: 0; color: var(--on-dark-mut); font-size: .94rem; }
.tile-go { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wheat); margin-top: .9rem; display: block; }

/* ------------------------------------------------------------------ forms -- */

.field { display: grid; gap: .35rem; margin-bottom: 1rem; min-width: 0; }
.field label { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mut); }
.sec-light .field label { color: var(--on-light-mut); }
.field input, .field textarea, .field select {
  width: 100%; max-width: 100%; min-width: 0;
  font-family: var(--body); font-size: 1rem; padding: .75rem .85rem;
  background: var(--marsh); color: var(--on-dark); border: 1px solid var(--line); border-radius: var(--r);
}
.sec-light .field input, .sec-light .field textarea, .sec-light .field select {
  background: var(--panel, #fff); color: var(--on-light); border-color: var(--canvas-3);
}
.field input:focus, .field textarea:focus { border-color: var(--rust); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.notice { border-left: 3px solid var(--rust); background: var(--marsh-2); padding: 1rem 1.2rem; border-radius: var(--r); margin: 1.5rem 0; }
.sec-light .notice { background: var(--panel); }
.notice p { margin: 0; font-size: .94rem; }
.notice.is-good { border-left-color: var(--water); }

.empty-note {
  border: 1px dashed var(--line); border-radius: var(--r); padding: 2rem;
  text-align: center; color: var(--on-dark-mut); font-family: var(--mono);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.sec-light .empty-note { border-color: var(--canvas-3); color: var(--on-light-mut); }

/* ----------------------------------------------------------------- footer -- */

.footer { background: var(--marsh-2); border-top: 1px solid var(--line); padding-top: 3rem; }
.footer-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem; }
.footer-mark { color: var(--wheat); }
.footer-motto { font-family: var(--display); font-style: italic; font-size: 1.15rem; margin: .8rem 0 .2rem; }
.footer-by { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mut); margin: 0; }
.footer-col h2 { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wheat); margin-bottom: .9rem; font-weight: 600; }
.footer-col a, .footer-plain { display: block; font-size: .92rem; color: var(--on-dark-mut); text-decoration: none; padding: .22rem 0; }
.footer-col a:hover { color: var(--wheat); }
/* --accent-text-dark, not --rust-hi: --rust is solved to 3:1 against the paper,
   which is a bar for rules and icons, not for .72rem uppercase type on the dark
   footer. This measured 2.03–3.69:1 across the estate. */
.footer-cta { color: var(--accent-text-dark) !important; margin-top: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-legal { margin-top: 2.5rem; padding-block: 1.4rem; border-top: 1px solid var(--line); }
.footer-legal p { margin: 0; font-size: .8rem; color: var(--on-dark-mut); font-family: var(--mono); letter-spacing: .06em; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 960px) {
  .hero-in, .dogpro, .two-col { grid-template-columns: 1fr; }
  .litter { grid-template-columns: 1fr; }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .motto { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav { display: none; }
  .nav.is-open { display: block; }
  .nav-in { flex-direction: column; padding-bottom: .6rem; }
  .nav a { border-bottom: 1px solid var(--line); padding: .85rem .2rem; font-size: .82rem; }
}

@media (max-width: 620px) {
  .field-row, .pedigree-strip { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr; }
  .offer-price { text-align: left; }
  .footer-in { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------ client-set background photos -- */
/* Deliberately LAST in the file. `.hero` and `.page-hd` both set the
   `background` shorthand, which includes background-image — at equal
   specificity the later rule wins, so this modifier has to come after them or
   the photo silently never appears.

   The overlay is a gradient rather than a flat wash: text sits low on these
   banners, so the bottom edge needs to be darker than the top. --bg-a and
   --bg-a2 come from the darkness the client picks per section. */

.has-bg {
  background-image:
    linear-gradient(180deg, rgba(16,32,26,var(--bg-a,.62)), rgba(16,32,26,var(--bg-a2,.76))),
    var(--bg-url);
  background-size: cover;
  background-position: var(--bg-focus, center);
  background-repeat: no-repeat;
}
.has-bg h1, .has-bg h2, .has-bg h3,
.has-bg p, .has-bg .lede { text-shadow: 0 1px 14px rgba(8,16,12,.6); }
.has-bg .eyebrow { text-shadow: 0 1px 10px rgba(8,16,12,.7); }

/* ------------------------------------------------------------- gallery --- */

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.shot {
  position: relative; display: block; aspect-ratio: 4/3; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--marsh-3);
}
.sec-light .shot { border-color: var(--canvas-3); background: var(--canvas-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.shot:hover img { transform: scale(1.04); }
.shot-cap {
  position: absolute; inset: auto 0 0 0; padding: .5rem .7rem;
  background: linear-gradient(180deg, transparent, rgba(16,32,26,.85));
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--on-dark);
}

/* a client logo replaces the monogram mark */
.brand-logo { height: 44px; width: auto; max-width: 190px; object-fit: contain; }
.footer .brand-logo { height: 40px; }

.footer-legal .byline { margin-top: .3rem; font-size: .78rem; }
.footer-legal .byline a { color: var(--wheat); text-decoration: none; }
.footer-legal .byline a:hover { text-decoration: underline; }

/* ------------------------------------------------------ module: bookings -- */

.bookables { display: grid; gap: 1.2rem; margin-bottom: 2.6rem; }
.bookable {
  display: grid; grid-template-columns: 220px 1fr; gap: 1.4rem;
  background: var(--panel); border: 1px solid var(--canvas-3); border-radius: var(--r); overflow: hidden;
}
.bookable-img img { width: 100%; height: 100%; object-fit: cover; }
.bookable-bd { padding: 1.3rem 1.4rem 1.4rem; }
.bookable-bd h3 { font-size: 1.4rem; }
.bookable-sum { margin: .4rem 0 .8rem; color: var(--on-light-mut); }
.bookable-meta {
  display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid var(--canvas-2); font-family: var(--mono); font-size: .74rem;
  letter-spacing: .05em; color: var(--on-light-mut);
}
.bookable-meta b { font-size: 1.1rem; color: var(--on-light); }
.bookform { background: var(--panel); border: 1px solid var(--canvas-3); border-radius: var(--r); padding: 1.6rem; }
.bookform h2 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.kv-block { display: grid; gap: .6rem; margin: 1.4rem 0; }
.kv-block dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-mut); }
.kv-block dd { margin: .2rem 0 0; font-size: 1.05rem; }

/* ---------------------------------------------------------- module: club -- */

.evcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.evcard {
  background: var(--panel); border: 1px solid var(--canvas-3); border-radius: var(--r);
  overflow: hidden; text-decoration: none; display: block; color: var(--on-light);
}
.evcard:hover { border-color: var(--rust); }
.sec:not(.sec-light) .evcard { background: var(--marsh-2); border-color: var(--line); color: var(--on-dark); }
.evcard-img { aspect-ratio: 16/9; }
.evcard-img img { width: 100%; height: 100%; object-fit: cover; }
.evcard-bd { padding: 1rem 1.1rem 1.2rem; }
.evcard-kind {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust);
}
.evcard h3 { font-size: 1.2rem; margin: .3rem 0 .5rem; }
.evcard-when { font-family: var(--mono); font-size: .74rem; }
.evcard-where { font-size: .86rem; color: var(--on-light-mut); margin-top: .2rem; }
.sec:not(.sec-light) .evcard-where { color: var(--on-dark-mut); }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.member { border-left: 2px solid var(--rust); padding-left: .8rem; display: grid; gap: .15rem; }
.member b { font-family: var(--display); font-size: 1.05rem; }
.member-role { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wheat); }
.sec-light .member-role { color: var(--rust); }
.member-dogs { font-size: .84rem; color: var(--on-dark-mut); }
.sec-light .member-dogs { color: var(--on-light-mut); }

/* -------------------------------------------- modules: catalogue + store -- */

.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.prodcard {
  background: var(--panel); border: 1px solid var(--canvas-3); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: var(--on-light); display: block;
}
.prodcard:hover { border-color: var(--rust); }
.prodcard-img { aspect-ratio: 1; background: var(--canvas-2); }
.prodcard-img img { width: 100%; height: 100%; object-fit: cover; }
.prodcard-img.is-empty { display: grid; place-items: center; color: var(--canvas-3); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.prodcard-bd { padding: .9rem 1rem 1.1rem; }
.prodcard-cat { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
/* Made to order rather than on the shelf. Quiet — it is a fact about delivery,
   not a warning. */
.prodcard-pre { display: inline-block; margin-left: .5rem; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-mut);
  border: 1px solid currentColor; border-radius: 2px; padding: .05rem .3rem; vertical-align: .05rem; }
/* The line a client can write under a product group's heading. Sits between the
   eyebrow and the grid, so it takes the eyebrow's bottom margin with it. */
.prod-groupnote { max-width: 58ch; margin: -.9rem 0 1.1rem; color: var(--on-light-mut); font-size: .95rem; }
.prodcard h3 { font-size: 1.1rem; margin: .25rem 0 .3rem; }
.prodcard p { margin: 0; font-size: .86rem; color: var(--on-light-mut); }
.prodcard-price { font-family: var(--mono); font-weight: 600; margin-top: .6rem; }
.prodcard-price span { font-weight: 400; font-size: .78rem; color: var(--on-light-mut); }
.soldout { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }

.detail-price { font-family: var(--display); font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.detail-price span { font-family: var(--mono); font-size: .8rem; font-weight: 400; color: var(--on-dark-mut); }
.specs { display: grid; gap: .4rem; margin: 1.4rem 0; }
.specs > div { display: grid; grid-template-columns: 10rem 1fr; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.sec-light .specs > div { border-color: var(--canvas-3); }
.specs dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mut); margin: 0; }
.sec-light .specs dt { color: var(--on-light-mut); }
.specs dd { margin: 0; }
.addform { display: flex; align-items: end; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.addform label { min-width: 0; }
.addrset { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem 0.2rem; margin: 0 0 1.1rem; min-width: 0; }
.addrset legend { padding: 0 .45rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.addrset .opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .65; }
/* City takes the room; state and ZIP only need what they need. */
.addr-csz { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) { .addr-csz { grid-template-columns: 1fr; } }
.addform-range { margin: 0 0 .55rem; align-self: end; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8b8b8b); }
.addform select { max-width: 100%; min-width: 0; }
.addform label { display: grid; gap: .3rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.addform input { width: 5rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--marsh); color: var(--on-dark); }
.sec-light .addform input { background: var(--panel, #fff); color: var(--on-light); border-color: var(--canvas-3); }

.carttable { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--canvas-3); border-radius: var(--r); }
.carttable th { text-align: left; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-light-mut); padding: .7rem .8rem; border-bottom: 1px solid var(--canvas-2); }
.carttable td { padding: .7rem .8rem; border-bottom: 1px solid var(--canvas); vertical-align: middle; }
.carttable.is-compact td { padding: .5rem .8rem; }
.cartthumb { width: 46px; height: 46px; object-fit: cover; border-radius: var(--r); }
.qtyform { display: flex; gap: .3rem; }
.qtyform input { width: 4rem; padding: .35rem; border: 1px solid var(--canvas-3); border-radius: var(--r); }
.carttotal { margin: 1.2rem 0; max-width: 320px; margin-left: auto; }
.carttotal > div { display: flex; justify-content: space-between; padding: .35rem 0; font-family: var(--mono); font-size: .86rem; }
.carttotal .grand { border-top: 1px solid var(--canvas-3); margin-top: .3rem; padding-top: .6rem; font-size: 1.1rem; }
.cart-pill { display: inline-flex; align-items: center; gap: .35rem; }

@media (max-width: 760px) {
  .bookable { grid-template-columns: 1fr; }
  .specs > div { grid-template-columns: 1fr; }
  .carttable th:first-child, .carttable td:first-child { display: none; }
}

/* The cart, on a phone.
   Six columns — thumb, item, price, qty, line total, remove — cannot fit in
   390px, and as a table it forced the whole page to scroll sideways: 568px of
   content in a 390px viewport. Below 620px each row becomes a small card
   instead, which is the same information in the order it is read: what it is,
   what it costs, how many, and the way out.
   Grid areas rather than floats so the source order stays a sane table for
   anyone reading it with a screen reader or with CSS off. */
@media (max-width: 620px) {
  .carttable, .carttable tbody, .carttable tr, .carttable td { display: block; }
  .carttable { border: 0; background: none; }
  .carttable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .carttable tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name name" "price total" "qty remove";
    gap: .45rem .8rem;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--canvas-3);
    border-radius: var(--r);
    padding: .85rem;
    margin-bottom: .7rem;
  }
  .carttable td { border: 0; padding: 0; }
  .carttable td:nth-child(2) { grid-area: name; }
  .carttable td:nth-child(3) { grid-area: price; font-family: var(--mono); font-size: .86rem; color: var(--on-light-mut); }
  .carttable td:nth-child(4) { grid-area: qty; }
  .carttable td:nth-child(5) { grid-area: total; justify-self: end; font-family: var(--mono); font-weight: 700; }
  .carttable td:nth-child(6) { grid-area: remove; justify-self: end; }
  /* Thumb-and-fingers sizing: a 28px button beside a 28px number box is a
     mis-tap waiting to happen, and mis-tapping Remove costs the sale. */
  .qtyform { gap: .4rem; }
  .qtyform input { width: 3.6rem; min-height: 44px; font-size: 16px; }
  .carttable .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .carttotal { max-width: none; }
}

/* ============================================================== LOOKS ==== */
/* Structural variants driven by body classes. Colour is the theme's job;
   these change arrangement, rhythm and voice. --density scales the vertical
   rhythm so a "Compact" site genuinely fits more on a screen than "Broadside",
   rather than just using a smaller font. */

.sec        { padding: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1)) 0; }
.page-hd    { padding: calc(clamp(2.5rem, 6vw, 4rem) * var(--density, 1)) 0 calc(clamp(2rem, 4vw, 3rem) * var(--density, 1)); }
h1, h2, h3, h4 { letter-spacing: var(--h-tracking, 0); }

/* headings: caps or as-typed */
.head-upper h1, .head-upper h2, .head-upper h3,
.head-upper .brand-txt b { text-transform: uppercase; }

/* --- masthead arrangements ------------------------------------------------ */

/* inline: logo and links on one row, no second bar.
   The row wrapper carries the page gutter so the masthead background stays
   full-bleed while its contents line up with everything below. */
.nav-inline .masthead-row {
  display: flex; align-items: center; gap: 1.2rem;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
}
.nav-inline .masthead-in { flex-wrap: nowrap; flex: 1 1 auto; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.nav-inline .nav { border-top: 0; background: transparent; }
.nav-inline .nav-in { padding: 0; flex-wrap: nowrap; }
.nav-inline .nav a { padding: .5rem .7rem; }
.nav-inline .motto { display: none; }
@media (max-width: 1100px) { .nav-inline .nav a { font-size: .68rem; padding: .5rem .45rem; } }
@media (max-width: 860px) { .nav-inline .masthead-row { display: block; padding: 0; } }

/* The last nav item is Contact on every site — the one thing a visitor is
   being asked to do, so it reads as a button rather than a seventh link. */
/* Same fault as .cf-chip had: an accent-filled pill using --on-dark, which is a
   foreground for the DARK base, not for the accent. The theme derives
   --on-accent for exactly this and guarantees it clears 4.5:1 against --rust
   (see auditSeeds). On a light accent this pill was 1.78:1. */
.nav a.nav-cta {
  margin-left: .5rem; padding: .5rem 1rem; border-radius: 999px;
  background: var(--rust); color: var(--on-accent, #fff); border-bottom: 0;
}
.nav a.nav-cta:hover { filter: brightness(1.12); color: var(--on-accent, #fff); }
.nav a.nav-cta[aria-current="page"] { border-bottom: 0; color: var(--on-accent, #fff); }
.nav-inline .nav-in { margin-left: auto; }
@media (max-width: 860px) {
  .nav a.nav-cta { margin-left: 0; border-radius: var(--r); text-align: center; }
}

/* "Updated <date>" under the hero — a live claim, so it only renders when a
   save actually happened. */
.freshness {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-mut); margin: 1rem 0 0; display: flex; align-items: center; gap: .5rem;
}
.freshness::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rust); flex: none; }

/* Guides and contracts */
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.artcard { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  /* The card paints its own light ground, so it must set its own ink too —
     inheriting it renders light-on-light wherever the section is dark. */
  background: var(--canvas-2); color: var(--on-light); }
.artcard:hover { border-color: var(--rust); }
.artcard-img { aspect-ratio: 16/9; overflow: hidden; }
.artcard-img img { width: 100%; height: 100%; object-fit: cover; }
.artcard-bd { padding: 1.1rem 1.2rem 1.3rem; }
.artcard-bd h3 { margin: 0 0 .5rem; font-size: 1.12rem; color: var(--on-light); }
.artcard-bd p { margin: 0 0 .8rem; color: var(--on-light-mut); font-size: .93rem; }
.artcard-go { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.wrap-read { max-width: 46rem; }
.lede { font-size: 1.12rem; color: var(--on-light-mut); margin: 0 0 1.6rem; }
.artimg { width: 100%; border-radius: var(--r); margin: 0 0 1.8rem; }
.dl { margin: 0 0 1.8rem; }
.artfoot { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .93rem; color: var(--on-light-mut); }

/* One breeding, on its own page */
.litterpro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* Same reasoning as .dogpro-hero: the one page built to show the litter should not
   crop it. Cards and thumbnails keep their fixed shapes. */
.litterpro-hero { border-radius: var(--r); overflow: hidden; background: var(--canvas-2);
  width: fit-content; max-width: 100%; margin-inline: auto; }
.litterpro-hero img { display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin-inline: auto; object-fit: contain; }
.litterpro-hero.is-empty { width: auto; aspect-ratio: 4/3; display: grid; place-items: center; color: var(--on-light-mut); font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.cross-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0 0 1.6rem; }
.cross-card { border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .9rem; }
.cross-card .parent-role { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-mut); margin-bottom: .35rem; }
.litter-sum { margin: .6rem 0 0; color: var(--on-light-mut); }
.litter-bd h3 a { color: inherit; text-decoration: none; }
.litter-bd h3 a:hover { color: var(--rust); }
@media (max-width: 800px) { .litterpro, .cross-cards { grid-template-columns: 1fr; } }

/* centred: logo on the centre line, nav centred beneath it */
.nav-centred .masthead-in { flex-direction: column; gap: .6rem; text-align: center; }
.nav-centred .brand { flex-direction: column; gap: .4rem; }
.nav-centred .brand-txt { text-align: center; justify-items: center; }
.nav-centred .motto { margin: 0; text-align: center; }
.nav-centred .nav-in { justify-content: center; }
.nav-centred .nav-toggle { position: absolute; right: var(--pad); top: 1rem; }

/* --- hero arrangements ---------------------------------------------------- */

/* stacked: text above a wide image band */
.hero-stacked .hero-in { grid-template-columns: 1fr; }
.hero-stacked .hero-img { aspect-ratio: 21/9; }

/* centred: no side image, text on the centre line */
.hero-centred .hero-in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero-centred .hero .lede { margin-left: auto; margin-right: auto; }
.hero-centred .hero-cta { justify-content: center; }
.hero-centred .hero-img { display: none; }

/* full: always full-bleed, even without a background photo */
.hero-full .hero-in { grid-template-columns: 1fr; text-align: center; justify-items: center; min-height: 60vh; align-content: center; }
.hero-full .hero-img { display: none; }
.hero-full .hero .lede { margin-left: auto; margin-right: auto; }
.hero-full .hero-cta { justify-content: center; }
.hero-full .hero-bg-in { text-align: center; }
.hero-full .hero-bg-in .lede { margin-left: auto; margin-right: auto; }
.hero-full .hero-bg-in .hero-cta { justify-content: center; }

/* none: no hero band at all. The headline stays — it is the page's h1 and the
   site's first line to a visitor — but it sits in ordinary page rhythm instead
   of a slab, and the side photo goes. Sites that lead with content, not a
   picture, want this. */
.hero-none .hero { background: none; border-bottom: 1px solid var(--canvas-3); }
.hero-none .hero-in { grid-template-columns: 1fr; padding-top: calc(2.5rem * var(--density, 1)); padding-bottom: calc(2.5rem * var(--density, 1)); }
.hero-none .hero-img { display: none; }
.hero-none .hero.is-bg { background-image: none !important; min-height: 0; }
.hero-none .hero-vid { display: none; }
.hero-none .hero-bg-in { padding: calc(2.5rem * var(--density, 1)) var(--pad); }
/* The hero band is normally dark, so every colour inside it is a light-on-dark
   colour. Taking the band away without re-colouring the text would leave a
   headline the same value as the paper behind it — invisible, not subtle. */
.hero-none .hero h1 { color: var(--on-light); }
.hero-none .hero h1 em { color: var(--rust); }
.hero-none .hero .lede,
.hero-none .hero.is-bg .lede { color: var(--on-light-mut); }
.hero-none .hero .eyebrow { color: var(--on-light-mut); }
.hero-none .has-bg h1, .hero-none .has-bg h2, .hero-none .has-bg h3,
.hero-none .has-bg p, .hero-none .has-bg .lede, .hero-none .has-bg .eyebrow { text-shadow: none; }

/* side: the mirror of split — photo first, words second. */
.hero-side .hero-in { grid-template-columns: .85fr 1.15fr; }
.hero-side .hero-in > div:first-child { order: 2; }
.hero-side .hero-img { order: 1; aspect-ratio: 4/3; }

/* overlap: the words sit on a card lifted over the photo. Only worth doing
   where there is room for it, so below the breakpoint it falls back to the
   plain stack rather than cramming a card onto a phone. */
@media (min-width: 861px) {
  .hero-overlap .hero-in { grid-template-columns: 1fr; position: relative; padding-bottom: calc(4rem * var(--density, 1)); }
  .hero-overlap .hero-img { aspect-ratio: 21/9; width: 100%; }
  .hero-overlap .hero-in > div:first-child {
    position: relative; z-index: 2; margin: -5rem auto 0; max-width: 46rem;
    background: var(--canvas); border: 1px solid var(--line-light, var(--canvas-3));
    border-radius: var(--r); padding: clamp(1.6rem, 3vw, 2.6rem); text-align: center;
  }
  .hero-overlap .hero-in > div:first-child .lede { margin-left: auto; margin-right: auto; }
  .hero-overlap .hero-cta { justify-content: center; }
  /* The card is paper, so its contents need the paper colours — same trap as
     hero-none: the hero's own colours all assume a dark band behind them. */
  .hero-overlap .hero-in > div:first-child h1 { color: var(--on-light); }
  .hero-overlap .hero-in > div:first-child h1 em { color: var(--rust); }
  .hero-overlap .hero-in > div:first-child .lede { color: var(--on-light-mut); }
  .hero-overlap .hero-in > div:first-child .eyebrow { color: var(--on-light-mut); }
  .hero-overlap .hero-in > div:first-child p { text-shadow: none; }
}
.hero-overlap .hero-img { order: -1; }

/* rail: navigation as a fixed column down the left instead of a bar across the
   top. Desktop only — under 1000px it returns to the normal stacked masthead,
   because a fixed rail on a phone is just a menu that eats the screen. */
@media (min-width: 1000px) {
  .nav-rail .masthead {
    position: fixed; inset: 0 auto 0 0; width: 15rem; overflow-y: auto;
    border-bottom: 0; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 0;
  }
  .nav-rail .masthead-in { flex-direction: column; align-items: flex-start; gap: .8rem; padding: 0 1.4rem; }
  .nav-rail .brand { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .nav-rail .motto { margin: 0; }
  .nav-rail .nav { border-top: 0; background: transparent; }
  .nav-rail .nav-in { flex-direction: column; padding: 0 1.4rem; gap: 0; }
  .nav-rail .nav a { width: 100%; padding: .5rem 0; border-bottom: 0; }
  .nav-rail .nav a[aria-current="page"] { border-left: 3px solid var(--rust); padding-left: .55rem; }
  .nav-rail main, .nav-rail .footer { margin-left: 15rem; }
  .nav-rail .skip:focus { left: 15rem; }
}

/* --- pedigree chart -------------------------------------------------------- */
/* Columns of ancestors, each column twice as many cells as the last. The cells
   flex to equal height so rows line up across generations without any fixed
   sizes — a chart that stays aligned whatever the names are. */

.ped-scroll { overflow-x: auto; padding-bottom: .5rem; }
.ped-chart { display: flex; gap: .5rem; min-width: 44rem; }
.ped-col { flex: 1; display: flex; flex-direction: column; min-width: 10rem; }
.ped-head {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .5rem; min-height: 1.2rem;
}
.ped-stack { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.ped-cell {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  background: var(--marsh-2); border: 1px solid var(--line); border-left: 3px solid var(--rust);
  border-radius: var(--r); padding: .5rem .6rem; min-height: 3.1rem;
}
.ped-cell.is-self { border-left-color: var(--wheat); background: var(--marsh-3); }
.ped-cell.is-empty { background: transparent; border-style: dashed; border-left-color: var(--line); }
.ped-name { font-family: var(--display); font-size: .84rem; line-height: 1.25; }
.ped-titles { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: var(--wheat); }
.ped-meta { font-family: var(--mono); font-size: .6rem; color: var(--on-dark-mut); }
.ped-credit { font-size: .78rem; color: var(--on-dark-mut); margin-top: .9rem; }

.sec-light .ped-cell { background: var(--canvas-2); border-color: var(--canvas-3); }
.sec-light .ped-cell.is-empty { background: transparent; }
.sec-light .ped-name { color: var(--on-light); }
.sec-light .ped-meta, .sec-light .ped-head, .sec-light .ped-credit { color: var(--on-light-mut); }
.sec-light .ped-titles { color: var(--rust); }

/* --- per-Look grace notes ------------------------------------------------- */

/* Almanac rules its sections off like a printed catalogue */
.look-almanac .sec + .sec { border-top: 1px solid var(--line); }
.look-almanac .sec-light + .sec-light { border-top-color: var(--canvas-3); }
.look-almanac .sec-hd h2 { border-bottom: 2px solid currentColor; display: inline-block; padding-bottom: .2rem; }

/* Ledger boxes its cards hard, no softness anywhere */
.look-ledger .card, .look-ledger .dogcard, .look-ledger .prodcard { box-shadow: none; }
.look-ledger .eyebrow { border-left: 3px solid var(--rust); padding-left: .5rem; }

/* Dispatch rules every section like newsprint columns */
.look-dispatch .sec + .sec { border-top: 1px solid var(--line); }
.look-dispatch .sec-light + .sec-light { border-top-color: var(--canvas-3); }
.look-dispatch .lede { font-size: 1.05rem; }

/* Notebook squares everything off and labels in typewriter */
.look-notebook .card, .look-notebook .dogcard, .look-notebook .prodcard { box-shadow: none; }
.look-notebook .eyebrow { font-family: var(--mono); }

/* Hearth softens every frame it can reach */
.look-hearth .card, .look-hearth .dogcard, .look-hearth .prodcard, .look-hearth .evcard {
  box-shadow: 0 8px 26px rgba(0,0,0,.08); border-color: transparent;
}

/* Homestead rules its sections and lets the measure stay narrow */
.look-homestead .sec + .sec { border-top: 1px solid var(--line); }
.look-homestead .sec-light + .sec-light { border-top-color: var(--canvas-3); }

/* Kiosk makes the things you tap genuinely big */
.look-kiosk .btn { padding: .95rem 1.5rem; font-size: 1rem; }
.look-kiosk .nav a { padding: .8rem 1rem; font-size: .82rem; }

/* Marquee shouts: the hero headline runs as large as it can */
.look-marquee .hero h1 { font-size: clamp(2.6rem, 8vw, 6rem); line-height: .95; }

/* Gallery lets imagery breathe and quietens the frames */
.look-gallery .dogcard, .look-gallery .prodcard, .look-gallery .evcard { border-color: transparent; box-shadow: 0 6px 24px rgba(0,0,0,.10); }
.look-gallery .dogcard-img, .look-gallery .prodcard-img { aspect-ratio: 3/4; }

/* Storefront: soft, lifted cards */
.look-storefront .dogcard, .look-storefront .prodcard, .look-storefront .evcard { border-color: transparent; box-shadow: 0 4px 18px rgba(0,0,0,.10); }
.look-storefront .btn { border-radius: 100px; }

/* Banner shouts */
.look-banner .hero h1 { font-size: clamp(3rem, 9vw, 6.5rem); line-height: .95; }
.look-banner .btn { border-radius: 100px; padding: 1rem 2rem; }

/* Compact tightens everything readable */
.look-compact body, body.look-compact { font-size: 15.5px; }
.look-compact .sec-hd { margin-bottom: 1.4rem; }

/* ------------------------------------------------------- module: videos --- */

.vidgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1.2rem; }
.vidlist { display: grid; gap: 1.4rem; }
.vidcard { display: grid; gap: .7rem; }
.vidcard.list { grid-template-columns: 320px 1fr; gap: 1.4rem; align-items: start; }
.vidcard h3 { font-size: 1.15rem; }
.vidcard.wide h3 { font-size: 1.4rem; }
.vidcard-when { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--on-dark-mut); margin-top: .2rem; }
.sec-light .vidcard-when { color: var(--on-light-mut); }
.vidcard-sum { margin: .4rem 0 0; font-size: .9rem; color: var(--on-dark-mut); }
.sec-light .vidcard-sum { color: var(--on-light-mut); }

.vidfeature { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }

/* Click-to-play facade: a poster and a button. The real iframe is only
   inserted when someone presses play, so a page of twenty clips costs twenty
   images instead of twenty third-party players. */
.vid-facade {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--marsh-3); border-radius: var(--r); overflow: hidden; aspect-ratio: 16/9;
}
.vid-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vid-facade:hover img { transform: scale(1.03); }
.vid-noposter { display: block; width: 100%; height: 100%; background: var(--marsh-3); }
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(20,20,20,.78); transition: color .2s ease, transform .2s ease;
}
.vid-play svg { width: 68px; height: 48px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.vid-facade:hover .vid-play { color: var(--rust); transform: scale(1.06); }
.vid-facade:focus-visible { outline: 3px solid var(--wheat); outline-offset: 3px; }
.vid-dur {
  position: absolute; right: .5rem; bottom: .5rem; background: rgba(10,10,10,.82);
  color: #fff; font-family: var(--mono); font-size: .68rem; padding: .15rem .4rem; border-radius: 2px;
}
.vid-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r); display: block; }
.vid-player { width: 100%; aspect-ratio: 16/9; border-radius: var(--r); background: #000; display: block; }

@media (max-width: 900px) {
  .vidgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .vidcard.list { grid-template-columns: 1fr; }
  .vidfeature { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ hero video -- */
/* The hero can carry a moving picture instead of a still. Three rules keep it
   from being an annoyance rather than a welcome:
   - it is decoration, so it is muted, silent, and never the only place
     information lives;
   - the section photo stays set and acts as the poster, so the first paint is
     a photo and the video fades over it once it has something to show;
   - phones and anyone asking for reduced motion get the photo and nothing
     else. A hero loop is not worth 20MB of someone's data plan.
   The scrim moves to ::after here because a background-image sits *under* the
   video element, and text over an undimmed video is unreadable. */

.hero.has-video { position: relative; overflow: hidden; isolation: isolate; }
.hero.has-video > .hero-bg-in, .hero.has-video > .hero-in { position: relative; z-index: 2; }

.hero-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-focus, center);
  border: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.hero-vid.is-ready, .hero-vid.is-embed { opacity: 1; }

/* An iframe cannot object-fit. Oversize it to 16:9 past whichever edge is
   short and centre it — the overflow is clipped by the section. */
.hero-vid.is-embed {
  width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%;
  left: 50%; top: 50%; inset: auto auto auto 50%; transform: translate(-50%, -50%);
}

.hero.has-video::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,32,26,var(--bg-a,.62)), rgba(16,32,26,var(--bg-a2,.76)));
}

/* When the video is suppressed the scrim goes with it — otherwise the section
   photo gets dimmed twice and reads as a black box.
   On phones the video is suppressed only when there is no phone-sized version
   of it: a 38 MB upload must not be pushed at someone on mobile data, but the
   ~1.8 MB rendition lib/rendition.mjs makes is smaller than most hero photos,
   and there is nothing to protect anyone from at that size. Embeds keep the
   old behaviour — a YouTube or Vimeo background frame is a third party we do
   not get to make small. */
@media (max-width: 720px) {
  .hero:not(.has-video-mobile) .hero-vid,
  .hero.has-video:not(.has-video-mobile)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-vid, .hero.has-video::after { display: none; }
}

/* ------------------------------------------------------------- puppies --- */
/* Available and reserved use the same card so the page reads as one litter,
   with the reserved ones dimmed and stamped rather than restyled. A buyer
   should be able to tell in one glance which are still going. */

.pups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.pup {
  border: 1px solid var(--canvas-3); border-radius: var(--r); overflow: hidden;
  background: var(--canvas-2); display: flex; flex-direction: column;
}
.pup-img {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: var(--canvas-3);
  /* A flex item will not shrink below its content, so a portrait photo would
     stretch this box past the square and leave one card taller than the rest.
     Taking the image out of flow makes the square authoritative. */
  flex: none;
}
.pup-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Puppy photos are nearly always portrait, and the head is near the top. A
     centred square crop takes the ears off. */
  object-position: center 20%;
}
.pup-noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-light-mut);
}
.pup-status {
  position: absolute; top: .6rem; right: .6rem; padding: .2rem .55rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--rust); color: #fff; border-radius: 2px;
}
.pup.is-gone .pup-status { background: var(--marsh-3); }
.pup.is-gone .pup-img img { filter: grayscale(.55) brightness(.94); }
.pup-body { padding: .9rem 1rem 1.1rem; }
.pup-body h3 { font-size: 1.15rem; margin: .1rem 0 .6rem; }
.pup-facts { display: grid; gap: .3rem; font-size: .86rem; }
.pup-facts div { display: flex; gap: .5rem; }
.pup-facts dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-light-mut); min-width: 4.2rem; padding-top: .15rem;
}
.pup-facts dd { margin: 0; }
.pup-note { margin-top: .7rem; font-size: .88rem; color: var(--on-light-mut); }

/* ------------------------------------------------------------- lightbox --
   Sits above everything, dark enough that the photo is the only thing left.
   Controls are large enough to hit on a phone (44px) and stay off the image
   on small screens, where a chevron over a photo is a mis-tap waiting. */
body.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  background: rgba(6, 8, 10, .93);
  padding: clamp(.75rem, 3vw, 2.5rem);
}
.lb.is-on { display: flex; }
.lb-fig {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: .8rem; max-width: 100%; max-height: 100%;
}
.lb-img {
  max-width: min(1400px, 92vw); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r, 4px); background: #0b0d0f;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.lb-cap {
  color: rgba(255, 255, 255, .82); font-family: var(--body);
  font-size: .95rem; text-align: center; max-width: 60ch; line-height: 1.45;
}
.lb-x, .lb-nav {
  position: absolute; background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.lb-x:hover, .lb-nav:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
.lb-x:focus-visible, .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lb-x { top: clamp(.6rem, 2vw, 1.4rem); right: clamp(.6rem, 2vw, 1.4rem); font-size: 1.9rem; }
.lb-prev { left: clamp(.5rem, 2vw, 1.6rem); }
.lb-next { right: clamp(.5rem, 2vw, 1.6rem); }
.lb-count {
  position: absolute; bottom: clamp(.6rem, 2vw, 1.3rem); left: 50%;
  transform: translateX(-50%); color: rgba(255, 255, 255, .55);
  font-family: var(--mono, monospace); font-size: .78rem; letter-spacing: .12em;
}
/* On a phone the arrows would sit on top of the photo, so drop them to the
   bottom corners and let the swipe do the work. */
@media (max-width: 560px) {
  .lb-prev, .lb-next { top: auto; bottom: clamp(.6rem, 2vw, 1.3rem); }
  .lb-img { max-height: 74vh; }
}
.lb.is-on .lb-img { animation: lb-in .18s ease-out; }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lb.is-on .lb-img { animation: none; }
}

/* Honeypot: off the canvas rather than display:none, because some bots skip
   hidden inputs but happily fill anything present in the DOM. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Where else to find them. Text rather than icons: no icon font to load, and
   "Good Dog profile" says what it is to a buyer who has never seen the logo. */
.footer-elsewhere { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .7rem; }
.footer-elsewhere a { font-size: .88rem; opacity: .82; }
.footer-elsewhere a:hover { opacity: 1; }

/* ---------------------------------------------------- good dog credential --
   Sits where the buyer hesitates: above the contact form, and under a litter's
   enquiry button. Everything around it stays flat so the seal is the only
   ornament on screen. */
.gd {
  display: flex; align-items: center; gap: .95rem;
  padding: .85rem 1.05rem; margin: 0 0 1.4rem;
  /* --canvas-3 is the hairline on light sections; --line is the dark-ground
     token and reads as a near-black box here. */
  border: 1px solid var(--canvas-3); border-left: 3px solid var(--rust);
  border-radius: var(--r);
  background: var(--canvas-2);
  text-decoration: none; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.gd:hover { border-left-color: var(--rust-hi); box-shadow: 0 8px 26px rgba(0,0,0,.08); }
.gd:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Concentric rings, the way an embossed document mark reads. Drawn from the
   accent token so it belongs to whichever look the site is on. */
.gd-seal {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--rust); display: grid; place-items: center;
}
.gd-seal::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; border: 1px dashed var(--rust); opacity: .5;
}
.gd-seal::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rust); }
.gd-txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.gd-eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rust);
}
.gd-line { font-family: var(--body); font-size: .9rem; color: var(--on-light-mut); line-height: 1.35; }
.gd-arrow { margin-left: auto; color: var(--rust); font-size: 1.05rem; transition: transform .16s ease; }
.gd:hover .gd-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .gd, .gd-arrow { transition: none; }
  .gd:hover .gd-arrow { transform: none; }
}
/* On a litter card it is a footnote to the enquiry button, not a rival CTA. */
.gd-inline { margin: .9rem 0 0; padding: .6rem .8rem; }
.gd-inline .gd-seal { width: 26px; height: 26px; }
.gd-inline .gd-seal::after { width: 5px; height: 5px; }
.gd-inline .gd-line { font-size: .82rem; }
@media (max-width: 520px) { .gd-arrow { display: none; } }

/* The animal's name is the page's <h1>, but visually it is unchanged: the base
   heading rule would otherwise bolden the prefix and suffix titles, which are
   meant to sit lighter than the registered name (.dn-reg carries the weight). */
h1.dogname { font-weight: 400; }

/* Front-door switcher ------------------------------------------------------
   A thin bar above the masthead listing the businesses that share this site.
   Only rendered when there is more than one door and the owner has not folded
   them into a single company, so it is invisible on every ordinary site. */
.topstack { position: static; }
.doorbar {
  background: var(--marsh-3); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.doorbar .wrap { display: flex; align-items: center; gap: .7rem; padding-top: .45rem; padding-bottom: .45rem; flex-wrap: wrap; }
.doorbar a { color: var(--on-dark-mut); text-decoration: none; }
.doorbar a:hover { color: var(--on-dark); }
.doorbar .on { color: var(--wheat); font-weight: 600; }
.doorbar i {
  /* A divider, not a border. --line is tuned to sit almost invisibly against
     panel backgrounds, which is right for a hairline rule and wrong for a
     character somebody is meant to read: on a dark palette it came out at
     about 1.1:1 against the bar. Dimmed body colour keeps it subordinate to
     the links while staying legible. */
  color: var(--on-dark-mut); opacity: .5; font-style: normal;
}
@media (max-width: 560px) { .doorbar { font-size: .6rem; } .doorbar .wrap { gap: .4rem; } }