/* ==========================================================================
   Wagglewood stylesheet. Mobile-first: base styles are for ~360px phones,
   min-width media queries add layout for tablet (640 / 768) and desktop (1024).

   COLOUR RULES (all pairs checked with tools/contrast.mjs, WCAG AA = 4.5:1):
   - Body text is deep brown on cream, never black.
   - Orange / yellow / pink / blue are FILLS with deep-brown text only.
   - Teal, leaf, tomato and olive fills carry WHITE text, using the "-deep" variants
     where the logo colour alone would not reach 4.5:1.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subset, variable weights) ---- */
@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("../fonts/PatrickHand.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Logo colours */
  --deep: #682A0B;        /* text + headings */
  --bark: #893D13;        /* wordmark brown */
  --warm: #A84C1D;        /* warm accent text (5.0:1 on cream) */
  --teal: #2F797F;
  --amber: #FD9806;
  --amber-soft: #F4A21E;
  --tomato: #ED5223;      /* decorative only; use tomato-deep behind white text */
  --tomato-deep: #BD3A12;
  --olive: #88992C;       /* decorative only; use olive-deep behind white text */
  --olive-deep: #5F6E1A;
  --leaf: #5B883E;
  --leaf-deep: #477A44;
  --cream: #FCF1D7;       /* sign surface */
  --page: #FEF4DD;        /* page background */
  --sun: #FED464;
  --pink: #FDA09C;
  --blue: #7D9CCE;
  --rasp: #C42348;
  --link: #1F6268;        /* darker teal for text links (6.6:1 on cream) */
  --line: #E6CF9F;        /* soft border on cream */

  --font-display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-hand: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 1.25rem;
  --radius-sm: .75rem;
  --shadow: 0 .5rem 1.5rem rgba(104, 42, 11, .14), 0 .1rem .25rem rgba(104, 42, 11, .1);
  --shadow-sm: 0 .2rem .6rem rgba(104, 42, 11, .14);
  --gutter: 1rem;
  --space: clamp(2.5rem, 6vw, 5rem);   /* vertical section rhythm */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .41 0 0 0 0 .16 0 0 0 0 .04 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--page) var(--paper); color: var(--deep);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
img, picture, svg { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--deep); margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 4vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); }
p, ul, ol, dl, figure, blockquote { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--deep); }
strong { font-weight: 800; }
hr { border: 0; border-top: 2px dashed var(--line); margin: 2rem 0; }

/* ---- Accessibility ---- */
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px var(--sun); }
.skip-link { position: absolute; left: .5rem; top: -4rem; z-index: 100; background: var(--deep); color: #fff; padding: .75rem 1rem; border-radius: var(--radius-sm); font-weight: 800; }
.skip-link:focus { top: .5rem; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Layout helpers ---- */
.wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }
.prose { max-width: 44rem; }
/* A full-width container whose children are kept to a readable line length, left-aligned with the headings */
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: 44rem; }
.section { padding-block: var(--space); position: relative; }
.section--cream { background: var(--cream) var(--paper); }
.section--tight { padding-block: calc(var(--space) * .6); }
.kicker { font-family: var(--font-hand); font-size: 1.35rem; color: var(--warm); margin: 0 0 .15rem; line-height: 1.2; }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.55; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* Rotating accent colour (logo letters): set on a section/card, used by underline + badges */
.acc-teal { --accent: var(--teal); --accent-ink: #fff; }
.acc-amber { --accent: var(--amber); --accent-ink: var(--deep); }
.acc-tomato { --accent: var(--tomato-deep); --accent-ink: #fff; }
.acc-olive { --accent: var(--olive-deep); --accent-ink: #fff; }
.acc-bark { --accent: var(--bark); --accent-ink: #fff; }
.acc-leaf { --accent: var(--leaf-deep); --accent-ink: #fff; }
/* Decorative bars/underlines use the BRIGHT logo colours (no text on them) */
.bar-teal { --accent-bar: var(--teal); } .bar-amber { --accent-bar: var(--amber); }
.bar-tomato { --accent-bar: var(--tomato); } .bar-olive { --accent-bar: var(--olive); }
.bar-bark { --accent-bar: var(--bark); } .bar-leaf { --accent-bar: var(--leaf); }

/* Heading with a hand-painted squiggle underline in the accent colour */
.h-squiggle { padding-bottom: .45em; position: relative; }
.h-squiggle::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: min(7rem, 40%); height: .4rem; border-radius: 1rem;
  background: var(--accent-bar, var(--bright, var(--amber)));
}
.center .h-squiggle::after { left: 50%; transform: translateX(-50%); }

/* Five dots = wordmark letter colours */
.dots { display: inline-flex; gap: .35rem; margin: 0 0 .6rem; }
.dots i { width: .7rem; height: .7rem; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: var(--bark); } .dots i:nth-child(2) { background: var(--amber); }
.dots i:nth-child(3) { background: var(--teal); } .dots i:nth-child(4) { background: var(--tomato); }
.dots i:nth-child(5) { background: var(--olive); }

/* Paw and leaf decorations (SVG sprite symbols, aria-hidden) */
.paw, .leaf { width: 1.4rem; height: 1.4rem; fill: currentColor; flex: none; }
.deco { position: absolute; opacity: .16; color: var(--bark); pointer-events: none; }
.deco--paw { width: 5rem; height: 5rem; }
.deco--leaf { width: 4.5rem; height: 4.5rem; color: var(--leaf); opacity: .3; }

/* ---- Wavy hill divider (echoes the rolling hill in the wordmark) ---- */
.wave { display: block; line-height: 0; color: var(--cream); }
.wave svg { display: block; width: 100%; height: clamp(1.8rem, 5vw, 4rem); fill: currentColor; }
.wave--page { color: var(--page); }
.wave--flip svg { transform: scaleY(-1); }
.wave--sun { color: var(--sun); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.5rem; border-radius: 999px; border: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--btn-ink, #fff); background: var(--btn, var(--bark));
  box-shadow: 0 .28rem 0 var(--btn-edge, rgba(104, 42, 11, .45)), var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
  width: 100%;                      /* full-width on phones */
}
.btn:hover { color: var(--btn-ink, #fff); transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 .1rem 0 var(--btn-edge, rgba(104, 42, 11, .45)); }
.btn .paw { width: 1.15rem; height: 1.15rem; }
.btn--amber { --btn: var(--amber); --btn-ink: var(--deep); --btn-edge: #B86C00; }
.btn--teal { --btn: var(--teal); --btn-edge: #1D5459; }
.btn--tomato { --btn: var(--tomato-deep); --btn-edge: #7E2308; }
.btn--leaf { --btn: var(--leaf-deep); --btn-edge: #2B4D29; }
.btn--sun { --btn: var(--sun); --btn-ink: var(--deep); --btn-edge: #C99A1A; }
.btn--ghost { --btn: transparent; --btn-ink: var(--deep); box-shadow: inset 0 0 0 3px var(--deep); }
.btn--ghost:hover { background: var(--sun); }
.btn[aria-disabled="true"] { --btn: #EBD9AE; --btn-ink: var(--deep); box-shadow: inset 0 0 0 2px var(--line); cursor: default; }
.btn[aria-disabled="true"]:hover { transform: none; }
.btn-row { display: flex; flex-direction: column; gap: .85rem; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(254, 244, 221, .97); border-bottom: 3px solid var(--line); box-shadow: 0 .25rem .75rem rgba(104, 42, 11, .08); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; padding-block: .4rem; }
.brand { display: inline-flex; align-items: center; min-height: 3rem; border-radius: var(--radius-sm); }
.brand img { width: auto; height: clamp(2.6rem, 11vw, 3.6rem); }
.nav-toggle { display: none; }
.site-nav { flex: 1 1 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .4rem; }
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .85rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--deep); text-decoration: none;
}
.site-nav a:hover { background: var(--sun); color: var(--deep); }
.site-nav a[aria-current="page"] { background: var(--deep); color: #fff; }

/* With JS: collapse the nav behind a hamburger on small screens */
.js .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.9rem; min-height: 2.9rem; padding: .4rem .8rem;
  background: var(--cream); color: var(--deep); border: 3px solid var(--deep); border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 1.25rem; height: 3px; background: currentColor; border-radius: 3px; position: relative; transition: transform .2s ease, background .2s ease; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -.4rem; } .nav-toggle .bars::after { top: .4rem; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(.4rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-.4rem) rotate(-45deg); }
.js .site-nav { display: none; padding-bottom: .5rem; }
.js .site-nav.is-open { display: block; }
.js .site-nav ul { flex-direction: column; }
.js .site-nav a { width: 100%; font-size: 1.15rem; border-radius: var(--radius-sm); }

/* ---- "For Professionals" nav group ----
   No JS / phones: a plain label with its two links listed under it. With JS on desktop (900px+): a button that opens a small dropdown. */
.nav-group-btn { display: none; }
.nav-group-label { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .85rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--deep); }
.site-nav .nav-sub { flex-direction: column; flex-wrap: nowrap; padding: 0 0 0 .85rem; gap: .1rem; }
@media (min-width: 900px) {
  .site-nav .nav-sub { flex-direction: row; padding: 0; }
  .js .nav-group { position: relative; }
  .js .nav-group-label { display: none; }
  .js .nav-group-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .35rem .85rem; border: 0; border-radius: 999px; background: transparent; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--deep); cursor: pointer; }
  .js .nav-group-btn::after { content: ""; width: .45rem; height: .45rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
  .js .nav-group-btn:hover, .js .nav-group-btn[aria-expanded="true"] { background: var(--sun); }
  .js .nav-group.is-current .nav-group-btn { background: var(--deep); color: #fff; }
  .js .site-nav .nav-sub { display: none; position: absolute; right: 0; top: calc(100% + .35rem); z-index: 60; flex-direction: column; align-items: stretch; min-width: 17rem; padding: .4rem; background: var(--page); border: 2px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
  .js .nav-group.is-open .nav-sub { display: flex; }
  .js .site-nav .nav-sub a { width: 100%; white-space: nowrap; border-radius: .5rem; }
}
/* ---- Hero ---- */
.hero { padding-block: clamp(1.5rem, 5vw, 3.5rem) var(--space); position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 1.5rem; align-items: center; }
.hero-art { justify-self: center; width: min(72vw, 20rem); }
.hero-art img { width: 100%; height: auto; filter: drop-shadow(0 .6rem 1rem rgba(104, 42, 11, .22)); }
.tagline { font-family: var(--font-hand); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem); color: var(--warm); margin: 0 0 1rem; line-height: 1.2; }
.hero .lede { margin-bottom: 1.5rem; }

/* ---- Book cards ---- */
.books-head { max-width: 42rem; margin-bottom: 2rem; }
.book-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
.book-grid > li { margin: 0; display: flex; }
.book-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--cream) var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.book-card::before { content: ""; display: block; height: .7rem; background: var(--accent-bar, var(--teal)); }
.book-card .cover-wrap { padding: 1.25rem 1.25rem 0; display: grid; place-items: center; }
.cover { width: min(100%, 15rem); aspect-ratio: 1102 / 1427;   /* same proportions as the real front cover */ border-radius: .35rem .75rem .75rem .35rem; box-shadow: -.35rem .35rem 0 rgba(104, 42, 11, .18), var(--shadow); overflow: hidden; background: var(--cream); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover--img { aspect-ratio: auto; }               /* the real cover keeps its own proportions (no cropping) */
.cover--img img { height: auto; }
.cover--placeholder {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.25rem 1rem;
  color: #fff; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .15), transparent 55%), var(--teal);
  border-left: .6rem solid rgba(0, 0, 0, .18);
}
.cover--placeholder .cover-title { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.cover--placeholder .cover-sub { font-family: var(--font-hand); font-size: 1.1rem; line-height: 1.2; }
.cover--placeholder .paw { width: 3.2rem; height: 3.2rem; color: var(--sun); }
.cover--soon { color: var(--deep); background: repeating-linear-gradient(135deg, #F3E2B8 0 .6rem, var(--cream) .6rem 1.2rem); border: 3px dashed var(--bark); border-left-width: .6rem; border-left-style: solid; }
.cover--soon .paw { color: var(--bark); opacity: .55; width: 4.5rem; height: 4.5rem; }
.cover--soon .cover-title { color: var(--deep); }
.book-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.4rem; flex: 1; }
.book-body h3 { margin: 0; }
.book-body h3 a { color: var(--deep); text-decoration: none; }
.book-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }   /* whole card clickable */
.book-body h3 a:focus-visible { outline-offset: -3px; }
.book-sub { font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.25; color: var(--warm); margin: 0; }
.book-sub--lg { font-size: 1.45rem; margin-bottom: 1rem; }
.book-meta { font-size: .95rem; margin: 0; font-weight: 700; }
.book-body .btn-row { margin-top: auto; padding-top: .6rem; }
.book-body .btn, .book-body .text-link { position: relative; z-index: 1; }
.badge { display: inline-block; align-self: flex-start; padding: .15rem .8rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; background: var(--accent, var(--leaf-deep)); color: var(--accent-ink, #fff); }
.badge--soon { background: var(--sun); color: var(--deep); }
.text-link { font-weight: 800; display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Featured live book (wide card) + slim "coming soon" strip */
.book-feature { max-width: 56rem; margin-inline: auto; }
.book-feature .cover-wrap { padding-bottom: .5rem; }
.book-feature .cover { transform: rotate(-1.5deg); }
.book-feature .book-body h3, .book-feature .book-body h2 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem); }
.feature-quote { font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.3; background: var(--sun); border-radius: var(--radius-sm); padding: .6rem .9rem; margin: .25rem 0; }
.soon-strip { position: relative; max-width: 56rem; margin: 1.75rem auto 0; display: grid; gap: 1.25rem; padding: 1.25rem; border: 3px dashed var(--bark); border-radius: var(--radius); background: rgba(255, 248, 230, .7); }
.soon-head .badge { margin-bottom: .5rem; }
.soon-head h2, .soon-head h3 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); margin-bottom: .3rem; }
.soon-strip p { margin-bottom: 0; }
.soon-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.soon-book { display: flex; gap: 1rem; align-items: flex-start; margin: 0; padding: 1rem; background: #fff8e6; border: 2px solid var(--line); border-radius: var(--radius-sm); }
.soon-book h3, .soon-book h4 { font-size: 1.2rem; margin: 0 0 .15rem; }
.soon-sub { font-family: var(--font-hand); font-size: 1.1rem; line-height: 1.25; color: var(--warm); margin: 0 0 .4rem !important; }
.soon-book p:last-child { font-size: .98rem; line-height: 1.5; }
.soon-cover { flex: none; width: 3.4rem; aspect-ratio: 1102 / 1427; display: grid; place-items: center; border-radius: .2rem .45rem .45rem .2rem; border-left: .4rem solid rgba(0,0,0,.2); box-shadow: -.2rem .2rem 0 rgba(104,42,11,.18), var(--shadow-sm); }
.soon-cover .paw { width: 1.6rem; height: 1.6rem; }
.soon-cover--a { background: var(--amber); color: var(--deep); transform: rotate(-4deg); }
.soon-cover--b { background: var(--tomato-deep); color: #fff; transform: rotate(3deg); }
.soon-strip .btn-row { justify-content: center; }
@media (min-width: 768px) {
  .book-feature { display: grid; grid-template-columns: minmax(0, 17rem) 1fr; align-items: center; }
  .book-feature .cover-wrap { padding: 1.5rem 0 1.5rem 1.5rem; }
  .book-feature .book-body { padding: 1.5rem 1.75rem 1.5rem 1.25rem; }
  .book-feature::before { grid-column: 1 / -1; }
  .soon-strip { padding: 1.5rem 1.75rem; }
  .soon-books { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
  .soon-cover { width: 3.8rem; }
}

/* ---- Veterinary / B2B page ---- */
.hero--vets .crumbs { margin-bottom: .5rem; }
.vets-hero-art { justify-self: center; width: min(72vw, 16.5rem); }
.vets-hero-art .cover { transform: rotate(2deg); width: 100%; }
.vets-byline { margin: 1.25rem 0 0; }
.form-anchor { display: block; position: relative; top: -.5rem; }
.steps--wide { max-width: 56rem; }
.hint { font-size: .92rem; line-height: 1.4; }
.field select:required:invalid { color: #6b4a33; }
.partner-form { max-width: 48rem; }
.author-card picture { flex: none; display: block; }
.author-photo { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--cream); box-shadow: 0 0 0 4px var(--amber); flex: none; }
.testimonial { margin: 1rem 0; padding: 1rem 1.25rem; background: #fff8e6; border-left: .6rem solid var(--amber); border-radius: var(--radius-sm); }
.testimonial blockquote { margin: 0 0 .5rem; font-size: 1.1rem; } .testimonial figcaption { font-weight: 800; }
@media (min-width: 640px) {
  .partner-form { grid-template-columns: 1fr 1fr; }
  .partner-form .field--wide, .partner-form .btn, .partner-form .visually-hidden { grid-column: 1 / -1; }
  .partner-form .btn { justify-self: start; }
}
@media (min-width: 768px) { .vets-hero-art { width: 18rem; } .peek--three { grid-template-columns: repeat(3, 1fr); } }

/* ---- Author portrait ---- */
.portrait { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 0; }
.portrait picture { flex: none; display: block; }
.portrait img { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--cream); box-shadow: 0 0 0 4px var(--amber), var(--shadow); flex: none; }
.portrait figcaption { font-size: 1rem; line-height: 1.4; }
.portrait figcaption strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
@media (min-width: 640px) { .portrait img { width: 9rem; height: 9rem; } }

/* ---- Contact form ---- */
.contact-form { display: grid; gap: 1.1rem; max-width: 36rem; background: var(--cream) var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); border-top: .7rem solid var(--teal); }
.field { display: grid; gap: .35rem; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.field .opt, .field .req { font-family: var(--font-body); font-weight: 600; font-size: .9rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; font: inherit; color: var(--deep); background: #fff; border: 3px solid var(--bark); border-radius: var(--radius-sm); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; box-shadow: 0 0 0 6px var(--sun); }
.footer-cta { font-weight: 800; }


/* Two live books side by side (each card is vertical: cover on top) */
.book-pair { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 56rem; margin-inline: auto; }
.book-pair .book-feature { display: flex; max-width: none; margin: 0; height: 100%; }
.book-pair .book-feature .cover-wrap { padding: 1.5rem 1.25rem .5rem; }
.book-pair .cover--img { width: auto; }                                        /* both covers share one height, so titles line up */
.book-pair .cover--img img { height: clamp(15rem, 30vw, 19rem); width: auto; max-width: 100%; }
.book-pair .book-feature .book-body { padding: 1rem 1.25rem 1.5rem; }
.book-pair .book-feature .book-body h2, .book-pair .book-feature .book-body h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }
/* From tablet up the two cards share ONE set of rows (CSS subgrid), so title, subtitle, description, quote and buttons line up
   across the pair even when one subtitle wraps. Needs a 2020+ browser; older ones just show two independent cards. */
@media (min-width: 768px) {
  .book-pair { grid-template-columns: 1fr 1fr; column-gap: 1.75rem; row-gap: 0; }
  .book-pair .book-feature { display: grid; grid-template-columns: none; grid-template-rows: subgrid; grid-row: 1 / span 10; row-gap: .5rem; height: auto; align-items: start; }
  .book-pair .book-feature .book-body { display: contents; }
  .book-pair .book-feature .book-body > * { margin: 0 1.25rem; }
  .book-pair .book-feature .book-body > .badge { justify-self: start; margin-top: .5rem; }
  .book-pair .book-feature .book-body > .btn-row { padding-top: .75rem; }
  .book-pair .book-feature .book-body > :last-child { margin-bottom: 1.5rem; }
  .book-pair .book-feature .book-body > .feature-quote { align-self: stretch; display: flex; align-items: center; }   /* equal-height quote boxes */
}
@media (min-width: 1024px) { .book-pair { max-width: 62rem; } }

/* ---- Brand blurb / feature trio ---- */
.split { display: grid; gap: 2rem; align-items: center; }
.pillars { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.pillars li { background: #fff8e6; border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin: 0; box-shadow: var(--shadow-sm); border-left: .6rem solid var(--accent-bar, var(--teal)); }
.pillars strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }

/* ---- Where to buy ---- */
.buy-grid { display: grid; gap: 1.25rem; }
.buy-card { background: var(--cream) var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .5rem; border-top: .7rem solid var(--accent-bar, var(--amber)); }
.buy-card h3 { margin: 0; }
.buy-card p { margin: 0; }
.buy-card .btn { margin-top: auto; }
.buy-card .price { font-weight: 800; }
.buy-note { margin-top: 1rem; font-size: .98rem; }

/* ---- Inner pages ---- */
.page-head { padding-block: clamp(1.5rem, 4vw, 3rem) 1rem; }
.crumbs { font-size: .95rem; margin-bottom: 1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.75rem; line-height: 1; }
.crumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--warm); font-size: 1.2em; }
.crumbs a, .crumbs span { display: inline-flex; align-items: center; min-height: 2.75rem; }
.byline { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .98rem; font-weight: 700; margin: 0 0 1rem; }
.summary {
  background: #fff8e6; border: 2px solid var(--line); border-left: .7rem solid var(--teal); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
  font-size: 1.12rem; line-height: 1.6; margin-bottom: 1.5rem;
}
.summary p:last-child { margin-bottom: 0; }
.content-section { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.two-col { display: grid; gap: 2rem; }
.page-cover { justify-self: center; width: min(100%, 17rem); }

/* At a glance table */
.glance { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff8e6; border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.glance caption { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; padding: 0 0 .6rem; caption-side: top; }
.glance th, .glance td { text-align: left; vertical-align: top; padding: .65rem .85rem; border-top: 1px solid var(--line); }
.glance tr:first-child th, .glance tr:first-child td { border-top: 0; }
.glance th { width: 38%; font-weight: 800; background: #F7E6BC; }
.glance td { overflow-wrap: anywhere; }

.pull-quote { margin: 2rem 0; padding: 1.5rem 1.25rem; border-radius: var(--radius); background: var(--sun); box-shadow: var(--shadow-sm); text-align: center; position: relative; }
.pull-quote p { font-family: var(--font-hand); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); line-height: 1.25; margin: 0; }
.pull-quote .paw { width: 1.6rem; height: 1.6rem; color: var(--bark); margin-bottom: .3rem; }

.check-list { list-style: none; padding: 0; }
.check-list li { padding-left: 2rem; position: relative; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.2rem; height: 1.2rem; background: var(--accent-bar, var(--teal)); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: step; position: relative; padding: 1rem 1rem 1rem 4rem; background: #fff8e6; border: 2px solid var(--line); border-radius: var(--radius-sm); margin: 0; }
.steps li::before { content: counter(step); position: absolute; left: .9rem; top: .9rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--step, var(--teal)); color: var(--step-ink, #fff); font-family: var(--font-display); font-weight: 700; }
.steps li:nth-child(5n+1) { --step: var(--bark); } .steps li:nth-child(5n+2) { --step: var(--amber); --step-ink: var(--deep); }
.steps li:nth-child(5n+3) { --step: var(--teal); } .steps li:nth-child(5n+4) { --step: var(--tomato-deep); } .steps li:nth-child(5n+5) { --step: var(--olive-deep); }
.steps strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }

/* ---- Peek Inside gallery: swipe carousel on phones, grid from 768px ---- */
.peek-hint { font-size: .95rem; margin: 0 0 .75rem; font-weight: 700; }
.peek { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: .5rem var(--gutter) 1.5rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.peek > li { flex: 0 0 min(78%, 18rem); scroll-snap-align: center; margin: 0; }
.peek figure { margin: 0; height: 100%; display: flex; flex-direction: column; gap: .6rem; }
.paper-card { display: block; background: #fff; padding: .55rem; border-radius: .3rem; box-shadow: 0 .6rem 1.4rem rgba(104, 42, 11, .22), 0 .1rem .3rem rgba(104, 42, 11, .2); transition: transform .2s ease, box-shadow .2s ease; }
.peek > li:nth-child(odd) .paper-card { transform: rotate(-.8deg); } .peek > li:nth-child(even) .paper-card { transform: rotate(.8deg); }
.paper-card img { width: 100%; height: auto; background: #fff; }
.peek figcaption { font-size: .98rem; line-height: 1.4; }
.peek figcaption strong { display: block; font-family: var(--font-hand); font-size: 1.25rem; font-weight: 400; color: var(--warm); line-height: 1.2; }
.peek-more { margin-top: .5rem; }

/* Lightbox (native <dialog>; only opened by JS, plain image links work without it) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; color: #fff; }
.lightbox::backdrop { background: rgba(60, 25, 5, .88); }
.lb-inner { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; padding: .75rem var(--gutter) 1rem; max-width: 60rem; margin-inline: auto; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.lb-count { font-weight: 800; }
.lb-stage { min-height: 0; display: grid; place-items: center; }
.lb-stage img { background: #fff; padding: .5rem; border-radius: .3rem; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.lb-caption { text-align: center; font-size: 1.05rem; margin: 0; }
.lb-nav { display: flex; justify-content: center; gap: .75rem; }
.lb-btn { min-width: 3rem; min-height: 3rem; padding: .4rem 1.1rem; border-radius: 999px; border: 3px solid #fff; background: var(--deep); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; cursor: pointer; }
.lb-btn:hover { background: #fff; color: var(--deep); }
.lightbox :focus-visible { outline-color: var(--sun); box-shadow: none; }

/* ---- FAQ (native <details>, answers are always in the HTML) ---- */
.faq { display: grid; gap: .75rem; }
.faq details { background: #fff8e6; border: 2px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .8rem 1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--deep); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; background: var(--sun); }
.faq details[open] summary { border-bottom: 2px dashed var(--line); }
.faq .answer { padding: .9rem 1rem 1rem; }
.faq .answer p:last-child { margin: 0; }

.callout { background: var(--sun); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.callout p:last-child { margin-bottom: 0; }
.author-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--cream) var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.author-card .paw { width: 2.4rem; height: 2.4rem; color: var(--bark); margin-top: .2rem; }
.author-card p:last-child { margin-bottom: 0; }

.notfound { text-align: center; padding-block: var(--space); }
.notfound .paw { width: 5rem; height: 5rem; color: var(--bark); opacity: .6; }
.notfound .btn-row { max-width: 22rem; margin: 1.5rem auto 0; }

/* ---- Footer ---- */
.site-footer { background: var(--deep); color: #FEF4DD; margin-top: 0; position: relative; }
.site-footer a { color: #FEF4DD; } .site-footer a:hover { color: var(--sun); }
.site-footer :focus-visible { outline-color: var(--sun); box-shadow: none; }
.footer-grid { display: grid; gap: 2rem; padding-block: 2.5rem 1.5rem; }
.footer-brand { display: inline-block; background: var(--page); border-radius: var(--radius); padding: .75rem 1rem; justify-self: start; max-width: 100%; }
.footer-brand img { width: min(100%, 16rem); height: auto; }
.footer-tag { font-family: var(--font-hand); font-size: 1.4rem; margin: .75rem 0 0; color: var(--sun); line-height: 1.2; }
.site-footer h2 { font-size: 1.15rem; color: #fff; margin-bottom: .5rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-grid a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 2.75rem; }
.byline a { display: inline-block; padding-block: .5rem; }
.footer-small { border-top: 1px solid rgba(254, 244, 221, .3); padding-block: 1.25rem 2rem; font-size: .95rem; display: grid; gap: .5rem; }
.footer-small p { margin: 0; }

/* ---- Hover animations (switched off for reduced motion, see bottom) ---- */
@keyframes wag { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes pawbounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-.35rem); } 70% { transform: translateY(.05rem); } }
@media (hover: hover) {
  .brand:hover img { animation: wag .5s ease-in-out 2; transform-origin: 20% 80%; }
  .btn:hover .paw, .book-card:hover .cover .paw { animation: pawbounce .6s ease; }
  .book-card:hover { transform: translateY(-4px); box-shadow: 0 .8rem 2rem rgba(104, 42, 11, .2); }
  .paper-card:hover { transform: rotate(0) scale(1.02) !important; }
}

/* ======================= Tablet and up ======================= */
@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
  .btn { width: auto; }
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  .book-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .875rem); }
  .book-body .btn-row .btn { flex: 1 1 auto; }
  .buy-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 2.5rem; }
  .hero-art { width: min(100%, 26rem); }
  .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .two-col { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
  .glance th { width: 34%; }
  .steps li { padding-left: 4.5rem; }
  /* Gallery turns into a grid */
  .peek-hint { display: none; }
  .peek { margin-inline: 0; padding: .5rem 0 1rem; overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; scroll-snap-type: none; }
  .peek > li { flex: none; }
}
@media (min-width: 900px) {
  /* Nav goes inline; hamburger disappears */
  .header-inner { flex-wrap: nowrap; }
  .site-nav, .js .site-nav { flex: 0 1 auto; display: block; padding: 0; }
  .site-nav ul, .js .site-nav ul { flex-direction: row; flex-wrap: nowrap; gap: .25rem; }
  .js .site-nav a { width: auto; border-radius: 999px; font-size: 1.05rem; }
  .js .nav-toggle { display: none; }
}
@media (min-width: 1024px) {
  .book-grid { grid-template-columns: repeat(3, 1fr); }
  .book-grid > li:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .hero-grid { gap: 4rem; }
}

/* ---- Small phones: keep everything inside 320px ---- */
@media (max-width: 380px) {
  body { font-size: 1.0625rem; }
  .glance th { width: 40%; padding-inline: .6rem; } .glance td { padding-inline: .6rem; }
  .summary { padding: 1rem; }
}

/* ---- Reduced motion: no animation, no smooth scroll, no hover movement ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .book-card:hover { transform: none; }
  .paper-card:hover { transform: none !important; }
}
@media print { .site-header, .site-nav, .lightbox, .wave { display: none; } body { background: #fff; } }

/* Explainer video (click-to-play poster; main.js swaps in the player) */
.video { margin: 1.25rem 0 0; max-width: 44rem; }
.video-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #2b1a0e; box-shadow: var(--shadow); }
.video-poster { display: block; position: relative; width: 100%; height: 100%; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--tomato-deep); color: #fff; display: grid; place-items: center; box-shadow: 0 .3rem .9rem rgba(0,0,0,.35); transition: transform .15s; }
.video-play svg { width: 2.2rem; height: 2.2rem; fill: currentColor; margin-left: .2rem; }
.video-poster:hover .video-play, .video-poster:focus-visible .video-play { transform: scale(1.08); }
.video-poster:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.video-stage iframe, .video-stage > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: .95rem; margin-top: .6rem; }
@media print { .video { display: none; } }
/* Phones: headline and intro first, then the book cover, then the buttons (desktop layout is untouched).
   The text column is flattened with display: contents so its children can be re-ordered around the cover. */
@media (max-width: 767px) {
  .hero--vets .hero-grid, .page-head .two-col { gap: 0; grid-template-columns: minmax(0, 1fr); }
  .hero--vets .hero-grid > div:first-child, .page-head .two-col > div:first-child { display: contents; }
  .hero--vets .vets-hero-art, .page-head .two-col > .page-cover { order: 1; width: min(52vw, 11.5rem); margin: .5rem auto 1.5rem; }
  .hero--vets .btn-row, .page-head .btn-row { order: 2; }
  .hero--vets .vets-byline, .page-head .byline, .page-head .summary { order: 3; }
  .page-head .btn-row { order: 4; }
  .page-head .byline { order: 2; } .page-head .summary { order: 2; }
}