/* DR PET LIFE · Premium Black · 26 October 2026
   Shared colour layer for every existing page family. */
:root {
  color-scheme: dark;
  --black: #050505;
  --surface: #0d0d0d;
  --surface-raised: #141414;
  --ink: #f5f1e9;
  --muted: #b7b1a6;
  --gold: #d6ba7b;
  --gold-hover: #ecd4a0;
  --green: #d6ba7b;
  --deep: #0d0d0d;
  --mint: #181714;
  --pale: #090909;
  --cream: #141414;
  --line: #2b2924;
  --white: #f5f1e9;
  --shadow: 0 20px 55px rgba(0, 0, 0, .36);
}
html { background: var(--black); scroll-padding-top: 100px; }
body { background: var(--black); color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { color: #090909; background: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
h1, h2, h3, h4 { color: var(--ink); }
h1, h2 { font-weight: 650; }
input, select, textarea, .blog-tools input, .blog-tools select {
  color: var(--ink); background: #090909; border-color: #55514a; border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: #9c968b; opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214, 186, 123, .16); outline: none;
}
option { color: var(--ink); background: #141414; }
input[type='date'] { color-scheme: dark; }
button { -webkit-tap-highlight-color: transparent; }
.topbar { color: #c2bbac; background: #030303; border-bottom: 1px solid #24221d; }
.topbar a:hover { color: var(--gold-hover); }
.site-header {
  background: rgba(7, 7, 7, .96); border-bottom: 1px solid #302b21;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}
.site-header .wrap { max-width: 1392px; }
.head-inner { min-height: 84px; gap: 20px; }
.logo-icon {
  color: var(--gold); background: #15130e; border: 1px solid #55452b;
  border-radius: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.logo-text { color: var(--ink); letter-spacing: -.035em; }
.logo-text small { color: var(--gold); letter-spacing: .19em; }
.site-header .nav { gap: 16px; }
.nav a { color: #c9c3b8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--gold-hover); }
.btn {
  color: #090909; background: var(--gold); border: 1px solid var(--gold);
  border-radius: 10px; font-weight: 750; letter-spacing: .015em;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #090909; }
.btn-white { color: #090909; background: var(--gold); border-color: var(--gold); }
.btn-white:hover { color: #090909; background: var(--gold-hover); border-color: var(--gold-hover); }
.btn-outline {
  color: var(--ink); background: transparent; border-color: #62533a; box-shadow: none;
}
.btn-outline:hover { color: var(--gold-hover); background: #18150f; border-color: var(--gold); }
.head-inner > .btn { flex-shrink: 0; white-space: nowrap; }
.hamburger { color: var(--gold); background: #15130f; border: 1px solid #62533a; }
.eyebrow { color: var(--gold); letter-spacing: .2em; font-weight: 700; }
.hero {
  background: radial-gradient(ellipse at 80% 44%, rgba(214, 186, 123, .055), transparent 49%), #050505;
  border-bottom: 1px solid #24221d;
}
.hero-grid { min-height: 630px; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(2.7rem, 5.2vw, 4.7rem); line-height: 1.07; letter-spacing: -.05em; }
.hero h1 em {
  color: var(--gold); font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400; letter-spacing: -.045em;
}
.hero p.lead { color: #c1bbb0; font-size: 17px; line-height: 1.8; }
.hero .eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 24px; height: 1px; margin-right: 12px; background: var(--gold);
}
.hero-art img { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .32)); }
.float-card { color: #e7dfd0; background: rgba(17, 16, 14, .96); border-color: #514630; }
.hero-bottom { color: #bdb5a6; }
.check, .text-link, .tiny-link { color: var(--gold); }
.text-link:hover, .tiny-link:hover { color: var(--gold-hover); }
.section { background-color: var(--black); }
.tinted { background: #090909; border-top: 1px solid #1e1d1a; border-bottom: 1px solid #1e1d1a; }
.card, .species-card, .directory-link, .step {
  color: var(--ink); background: linear-gradient(145deg, #111110, #0b0b0b);
  border-color: var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.card { border-radius: 16px; }
.card:hover, .species-card:hover, .directory-link:hover { background: #15130f; border-color: #79633c; }
.card .card-icon {
  background: #1b1812; border: 1px solid #3e3424; border-radius: 12px;
}
.card p, .species-card small { color: var(--muted); }
.species-card { border-radius: 14px; }
.wide-band {
  color: var(--ink); background: linear-gradient(120deg, #15130e, #0b0b0b 72%);
  border: 1px solid #534329; border-radius: 20px; box-shadow: var(--shadow);
}
.wide-band p { color: #c5bcab; }
.wide-band .eyebrow { color: var(--gold) !important; }
.stat { border-color: #49402e; }
.stat strong { color: var(--gold); font-weight: 550; }
.stat small { color: var(--muted); }
.footer { color: var(--ink); background: #030303; border-top: 1px solid #342c20; }
.footer a { color: #c2bbad; }
.footer a:hover { color: var(--gold-hover); }
.footer .logo { display: inline-flex; margin-bottom: 18px; }
.footer p { color: #b7afa0; }
.copyright { color: #aaa293; border-color: #2a261e; line-height: 1.8; }
.pagehero, .area-hero, .blog-hero {
  background: radial-gradient(ellipse at 83% 10%, rgba(214, 186, 123, .065), transparent 48%), #0a0a0a;
  border-bottom: 1px solid #30291d;
}
.pagehero p, .area-hero p, .blog-hero p { color: #c1b9aa; }
.pagehero .eyebrow, .area-hero .eyebrow, .blog-hero .eyebrow { color: var(--gold); }
.breadcrumbs, .area-crumb, .blog-crumb { color: #b0a694; }
.breadcrumbs a, .area-crumb a, .blog-crumb a { color: var(--gold); }
.kicker, .pill, .area-badge, .blog-tag {
  color: var(--gold-hover); background: #1b1812; border: 1px solid #51432c;
}
.chip { color: #ccc3b3; background: #11100e; border-color: #5a5245; }
.chip:hover { color: var(--gold-hover); background: #1c1913; border-color: #8c754c; }
.chip.active { color: #090909; background: var(--gold); border-color: var(--gold); }
.directory-link span { color: var(--gold); }
.notice, .alert { color: #cfc6b5; background: #14130f; border: 1px solid #4b402c; }
.notice.warning, .area-readiness, .blog-notice {
  color: #e3cca3; background: #19150d; border-color: #65502d;
}
.area-readiness, .blog-notice { border-left-color: var(--gold); }
.article p, .article li { color: #c7c0b3; }
.aside-card, .area-side, .blog-side {
  color: var(--ink); background: #10100f; border-color: #3d3528; box-shadow: var(--shadow);
}
.aside-card p, .blog-side p { color: #c0b7a8; }
.form-shell { background: #10100f; border-color: #383228; }
.faq { border-color: #353027; }
.faq summary { color: var(--ink); }
.faq summary::marker { color: var(--gold); }
.faq p, .help, .site-note { color: var(--muted); }
.step-num { color: var(--gold); background: #211b11; border: 1px solid #4e3e25; }
.cert-demo { color: var(--ink); background: #10100f; border-color: #77603b; border-radius: 12px; }
.cert-demo b { color: var(--gold) !important; }
.cert-demo::after { color: rgba(214, 186, 123, .22); }
.cert-row { border-color: #3c3426; }
.badge-demo { color: #e8c98e; background: #221a0d; border-color: #6c532b; }
.divider { background: #383124; }
.a11y-link:focus { background: #16130c; color: var(--gold-hover); border: 1px solid var(--gold); }
.empty, .mini-banner, .about-portrait { color: var(--muted); background: #11100d; border: 1px solid #3c3324; }
.quick-wa { color: #090909; background: var(--gold); border: 1px solid #f0d9a9; }
.quick-wa:hover { background: var(--gold-hover); }
.mobile-sheet.open { background: #090909; border-bottom: 1px solid #51432d; box-shadow: 0 20px 45px #0009; }
.mobile-sheet a { color: var(--ink); border-color: #2d281f; }
.mobile-sheet a:hover, .mobile-sheet a:focus-visible { color: var(--gold-hover); background: #1a1610; }
/* Location directories and all 230 individual area pages. */
.areas-tools, .area-result { color: var(--ink); background: #10100f; border-color: #393228; }
.area-result:hover { background: #17140e; border-color: #80673f; }
.area-result p, .area-paper p, .area-paper ul { color: #c7beae; }
.area-result span { color: var(--gold); }
.area-illustration { border: 1px solid #3d3426; box-shadow: var(--shadow); }
.area-soft { background: #11100e; border-color: #3b3224; }
.area-meta span, .blog-meta span { color: #cfc4b1; background: #14120e; border-color: #51442e; }
.area-links a { color: var(--gold); background: #0e0d0b; border-color: #5e4e32; }
.area-links a:hover { color: var(--gold-hover); background: #211a10; border-color: #a48650; }
.area-figure figcaption, .area-results-status, .area-location-label { color: var(--muted); }
.area-index-nav a { color: var(--gold); background: #1c1810; border: 1px solid #4f4028; }
/* Blog index, filters, cards and every individual article. */
.blog-tools { background: #10100f; border-color: #403629; }
.blog-card { color: var(--ink); background: #10100f; border-color: #393125; box-shadow: var(--shadow); }
.blog-card:hover { border-color: #8c7145; }
.blog-card img { border-bottom: 1px solid #342c20; }
.blog-card p, .blog-article { color: #c7beae; }
.blog-card-link, .blog-article a { color: var(--gold); }
.blog-article h2 { color: var(--ink); }
.blog-feature-img { border: 1px solid #3d3425; box-shadow: var(--shadow); }
.blog-caption { color: var(--muted) !important; }
.blog-toc, .blog-questions { background: #12110e; border-color: #443925; }
.blog-toc a { color: var(--gold); }
.blog-related a { color: #e0d0af; background: #11100d; border-color: #4b3e28; }
.blog-related a:hover { color: var(--gold-hover); background: #211a0e; }
.blog-empty, .blog-search-status { color: var(--muted); }
/* Tablet navigation switches before the long menu can become crowded. */
@media (max-width: 1230px) {
  .site-header .nav, .head-inner > .btn { display: none; }
  .head-inner { min-height: 76px; }
  .hamburger { display: block; margin-left: auto; }
  .mobile-sheet.open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 6px; padding: 18px max(20px, calc((100vw - 1160px) / 2));
    max-height: calc(100dvh - 100px); overflow-y: auto;
  }
  .mobile-sheet a { padding: 11px 14px; border-bottom: 1px solid #2d281f; font-weight: 650; }
}
@media (max-width: 780px) {
  .head-inner { min-height: 72px; }
  .hero-grid { gap: 26px; padding-top: 48px; padding-bottom: 32px; min-height: 0; }
  .hero h1 { font-size: clamp(2.65rem, 7vw, 3.7rem); }
  .hero-art { width: 100%; }
  .hero-art img { margin: auto; }
  .pagehero h1, .area-hero h1, .blog-hero h1 { overflow-wrap: anywhere; }
  .float-card { font-size: 10px; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 2.8rem; }
  .hero p.lead { font-size: 16px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .15em; }
  .hero .eyebrow::before { width: 14px; margin-right: 8px; }
  .float-card.bottom { bottom: 7%; }
  .float-card.top { top: 9%; }
  .section-head .text-link { white-space: normal; }
  .quick-wa { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .card:hover, .species-card:hover, .area-result:hover, .blog-card:hover { transform: none; }
}
/* Paper remains readable and economical; the sample watermark is retained. */
@media print {
  :root { color-scheme: light; }
  html, body, .section, .cert-demo { background: #fff !important; color: #181818 !important; }
  h1, h2, h3, h4, p, li, label, .cert-demo b, .cert-row, .cert-row span { color: #181818 !important; }
  .cert-demo { border-color: #777; box-shadow: none; }
  .cert-demo::after { color: rgba(130, 75, 38, .23); }
  .cert-row, .divider { border-color: #aaa; }
  .badge-demo { color: #41311c; background: #fff; border-color: #777; }
}