/* ==========================================================================
   HAMMY'S HOPE — brand.css
   Built to the Concise Brand Manual, August 2026.

   Type hierarchy (manual, p.14) — enforced here, please keep it:
     Montserrat Alternates  owns the mark + small-caps section eyebrows. Nothing else.
     Licorice               owns the promise. Used large, rarely, never in UI.
     Nunito                 does everything else: headlines, body, nav, UI, captions.

   Colour note: HH-Goldenrod on HH-Lace measures 2.13:1, which is below the
   readable threshold, so Goldenrod is never used for small text on light
   grounds. It carries the icon, rules, fills and the paw motif instead, and
   takes dark text when used as a surface. Section eyebrows sit in HH-Forest
   on light (9.1:1) and Goldenrod on dark (4.3:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Primary — the four that carry the brand */
  --gold:      #D39A1A;
  --forest:    #004643;
  --apricot:   #D96E30;
  --lace:      #F4ECDC;

  /* Secondary — the hamster's coat */
  --bisque:    #DEB887;
  --latte:     #CD9861;
  --wood:      #915820;
  --brandy:    #401F12;

  /* Neutrals — warm, never pure */
  --ink:       #1A1714;
  --parchment: #FAF5EF;

  /* Working tints, derived only */
  --gold-deep:    #A87A12;
  --forest-deep:  #00302E;
  --forest-soft:  #0B5A56;
  --lace-deep:    #E9DEC7;
  --ink-70:       rgba(26, 23, 20, .72);
  --ink-55:       rgba(26, 23, 20, .56);
  --parch-75:     rgba(250, 245, 239, .78);
  --parch-55:     rgba(250, 245, 239, .58);
  --hairline:     rgba(26, 23, 20, .13);
  --hairline-dk:  rgba(250, 245, 239, .18);

  /* Type */
  --f-mark: "Montserrat Alternates", ui-sans-serif, system-ui, sans-serif;
  --f-hand: "Licorice", "Brush Script MT", cursive;
  --f-body: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale — 320px to 1440px */
  --t-eyebrow: clamp(.72rem, .66rem + .24vw, .84rem);
  --t-small:   clamp(.86rem, .83rem + .14vw, .94rem);
  --t-body:    clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-lead:    clamp(1.12rem, 1.03rem + .42vw, 1.375rem);
  --t-h4:      clamp(1.12rem, 1.04rem + .38vw, 1.35rem);
  --t-h3:      clamp(1.3rem, 1.14rem + .72vw, 1.85rem);
  --t-h2:      clamp(1.75rem, 1.42rem + 1.5vw, 3rem);
  --t-h1:      clamp(2.3rem, 1.7rem + 2.8vw, 4.4rem);
  --t-display: clamp(2.8rem, 1.9rem + 4.4vw, 6rem);
  --t-promise: clamp(3.4rem, 2.1rem + 6.2vw, 8rem);
  --t-stat:    clamp(2.4rem, 1.8rem + 2.8vw, 4rem);

  /* Space */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --gutter:    clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --maxw:      1220px;
  --maxw-text: 68ch;

  /* The H icon, as a mask. Powers the ghosted watermark on heroes and bands. */
  --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20d%3D%22M40%2C28.02c2.22%2C0%2C4.02-1.8%2C4.02-4.02s-1.8-4.02-4.02-4.02-4.02%2C1.8-4.02%2C4.02%2C1.8%2C4.02%2C4.02%2C4.02ZM79.53.55c-.33-.35-.79-.55-1.27-.55h-26.73c-.78%2C0-1.47.52-1.68%2C1.28h0l-.22.77c-1.42%2C5.07-2.81%2C9.76-3.29%2C11.34l-1.41%2C4.85c1.63%2C1.4%2C2.69%2C3.45%2C2.69%2C5.76%2C0%2C4.21-3.41%2C7.62-7.62%2C7.62s-7.62-3.41-7.62-7.62c0-2.32%2C1.06-4.37%2C2.69-5.76l-1.23-4.24h0s-1.88-6.22-3.69-12.72c-.21-.75-.9-1.28-1.68-1.28H1.74c-.48%2C0-.94.2-1.27.55C.14.9-.03%2C1.37%2C0%2C1.85l5.01%2C76.52c.06.92.82%2C1.63%2C1.74%2C1.63h22.2c.86%2C0%2C1.6-.63%2C1.72-1.48l1.83-11.96h0l.57-3.72c-1.74-1.76-2.82-4.17-2.82-6.84%2C0-5.38%2C4.36-9.74%2C9.74-9.74s9.74%2C4.36%2C9.74%2C9.74c0%2C2.67-1.08%2C5.08-2.81%2C6.84l2.4%2C15.68h0c.13.85.86%2C1.48%2C1.72%2C1.48h22.21c.92%2C0%2C1.68-.71%2C1.74-1.63L80%2C1.85c.03-.48-.14-.95-.47-1.3ZM40%2C49.86c-3.39%2C0-6.14%2C2.75-6.14%2C6.14s2.75%2C6.14%2C6.14%2C6.14%2C6.14-2.75%2C6.14-6.14-2.75-6.14-6.14-6.14Z%22%2F%3E%3C%2Fsvg%3E");

  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 32px;  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26,23,20,.05), 0 4px 14px -6px rgba(26,23,20,.11);
  --shadow-md: 0 2px 4px rgba(26,23,20,.05), 0 14px 34px -12px rgba(26,23,20,.18);
  --shadow-lg: 0 4px 8px rgba(26,23,20,.05), 0 30px 60px -20px rgba(26,23,20,.24);

  --ease: cubic-bezier(.22, .68, .36, 1);
  --dur: .32s;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.68;
  color: var(--ink);
  background: var(--lace);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Inline icon default. Context rules (.btn svg, .card-icon svg, .social svg,
   .notice svg) are more specific and override this on purpose. */
.i {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  display: inline-block;
  vertical-align: -.16em;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible { outline-color: var(--bisque); }

::selection { background: var(--gold); color: var(--ink); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 999;
  background: var(--forest); color: var(--parchment);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-body);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -.015em; }
h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.28; letter-spacing: -.01em; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.56;
  color: var(--ink-70);
  max-width: 58ch;
}
.on-dark .lead, .on-dark.lead { color: var(--parch-75); }

.small { font-size: var(--t-small); }
.muted { color: var(--ink-55); }
.on-dark .muted { color: var(--parch-55); }

.measure { max-width: var(--maxw-text); }

/* The only permitted use of Montserrat Alternates: small-caps section eyebrows */
.eyebrow {
  font-family: var(--f-mark);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--forest);
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: "";
  width: 1.9em; height: 3px; flex: none;
  background: var(--gold);
  border-radius: 2px;
}
.eyebrow--center { justify-content: center; }
.on-dark .eyebrow { color: var(--gold); }
.on-dark .eyebrow::before { background: var(--gold); }

/* The promise. Licorice, large, flat ground, never in UI. */
.promise {
  font-family: var(--f-hand);
  font-weight: 400;
  font-size: var(--t-promise);
  line-height: .92;
  letter-spacing: 0;
  color: var(--brandy);
  text-wrap: balance;
}
.on-dark .promise, .promise--light { color: var(--bisque); }
.promise--sm { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 4rem); }

/* Inline emphasis */
strong, b { font-weight: 700; }
.hl { color: var(--wood); font-weight: 700; }
.on-dark .hl { color: var(--gold); }

/* Text links inside prose */
.prose a, a.link {
  color: var(--wood);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.prose a:hover, a.link:hover { color: var(--apricot); text-decoration-color: var(--apricot); }
.on-dark .prose a, .on-dark a.link { color: var(--bisque); text-decoration-color: var(--gold); }
.on-dark .prose a:hover, .on-dark a.link:hover { color: var(--parchment); }
/* Buttons inside prose must keep their button colours, not inherit link styling. */
.prose a.btn { text-decoration: none; font-weight: 700; }
.prose a.btn--primary, .prose a.btn--primary:hover { color: var(--ink); }
.prose a.btn--forest, .prose a.btn--forest:hover { color: var(--parchment); }
.prose a.btn--ghost, .prose a.btn--ghost:hover { color: var(--forest); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }
.wrap--wide { max-width: 1400px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* Grounds */
.ground-lace      { background: var(--lace); }
.ground-latte     { background: var(--latte); color: var(--ink); }
.ground-wood      { background: var(--wood); color: var(--parchment); }
.ground-parchment { background: var(--parchment); }
.ground-forest    { background: var(--forest); color: var(--parchment); }
.ground-brandy    { background: var(--brandy); color: var(--parchment); }
.ground-gold      { background: var(--gold); color: var(--ink); }
.ground-apricot   { background: var(--apricot); color: var(--ink); }
.ground-bisque    { background: var(--bisque); color: var(--ink); }

.on-dark { color: var(--parchment); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--parchment); }

/* Grids */
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Exactly two columns — for four cards that should read as a 2x2 block. */
.grid-2x2 { grid-template-columns: 1fr; }
@media (min-width: 52rem) { .grid-2x2 { grid-template-columns: 1fr 1fr; } }

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1.05fr .95fr; }
  .split--wide-left { grid-template-columns: 1.25fr .75fr; }
  .split--wide-right { grid-template-columns: .8fr 1.2fr; }
  .split--flip > *:first-child { order: 2; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. The paw motif — two paws, a gap that never closes
   -------------------------------------------------------------------------- */
.paw { width: 1em; height: 1em; fill: currentColor; flex: none; }

.paw-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, .6rem + 2vw, 2.4rem);  /* the gap is fixed and never closes */
  color: var(--gold);
  margin-block: var(--s-6);
}
.paw-rule::before, .paw-rule::after {
  content: "";
  height: 2px;
  flex: 1 1 0;
  max-width: 8rem;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .5;
}
.paw-rule::after { background: linear-gradient(270deg, transparent, currentColor); }
.paw-rule .paw { width: 1.6rem; height: 1.6rem; }
.paw-rule .paw:last-of-type { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .82em 1.5em;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); box-shadow: var(--shadow-md); }

.btn--forest { background: var(--forest); color: var(--parchment); border-color: var(--forest); }
.btn--forest:hover { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--parchment); }

.btn--ghost { background: transparent; color: var(--forest); border-color: rgba(0,70,67,.32); }
.btn--ghost:hover { border-color: var(--forest); background: rgba(0,70,67,.06); }

.on-dark .btn--ghost, .btn--ghost-light {
  color: var(--parchment);
  border-color: var(--hairline-dk);
  background: transparent;
}
.on-dark .btn--ghost:hover, .btn--ghost-light:hover {
  border-color: var(--parchment);
  background: rgba(250,245,239,.1);
}

.btn--lg { padding: 1em 1.9em; font-size: var(--t-body); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 236, 220, .86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--hairline);
  box-shadow: 0 6px 24px -18px rgba(26,23,20,.5);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.75rem;
}

/* Exclusion zone: clear space equal to the cap-height of the H, all four sides */
.brand-link { display: block; padding: .55rem .2rem; text-decoration: none; flex: none; }
.brand-link img { height: clamp(2.1rem, 1.6rem + 1.6vw, 2.6rem); width: auto; }

.nav { display: none; }
@media (min-width: 64rem) {
  .nav { display: flex; align-items: center; gap: clamp(.4rem, -.6rem + 1.9vw, 1.4rem); }
}
.nav a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--ink-70);
  padding: .5rem .1rem;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--forest); font-weight: 700; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: none; }
@media (min-width: 64rem) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--forest);
  padding: .55rem .9rem;
  border: 2px solid rgba(0,70,67,.28);
  border-radius: var(--r-pill);
}
@media (min-width: 64rem) { .nav-toggle { display: none; } }
.nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle-bars span {
  height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--forest);
  color: var(--parchment);
  padding: 6.5rem var(--gutter) var(--s-7);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mobile-nav ul { display: grid; gap: .25rem; max-width: 32rem; }
/* Scoped to the list so it never reaches the Donate button below it. */
.mobile-nav ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  text-decoration: none;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  padding: .62rem 0;
  border-bottom: 1px solid var(--hairline-dk);
  color: var(--parchment);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobile-nav ul a:hover,
.mobile-nav ul a[aria-current="page"] { color: var(--gold); padding-left: .5rem; }
.mobile-nav .btn { margin-top: var(--s-6); font-size: var(--t-body); }
.mobile-nav > nav { max-width: 32rem; }
body[data-nav-open="true"] { overflow: hidden; }
/* Solid ground while the drawer is open — the translucent header goes muddy
   sitting over Forest. */
body[data-nav-open="true"] .site-header {
  background: var(--lace);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--hairline);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) clamp(3rem, 1.5rem + 6vw, 6rem);
  overflow: hidden;
}
.hero::after {           /* the H icon, oversized, ghosted into the ground */
  content: "";
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: min(46vw, 30rem);
  aspect-ratio: 1;
  background: var(--gold);
  opacity: .045;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-copy h1 { margin-bottom: var(--s-5); }
.hero-copy .lead { margin-bottom: var(--s-6); }

.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art img { width: min(100%, 25rem); filter: drop-shadow(0 26px 40px rgba(26,23,20,.2)); }
.hero-art::before {      /* warm halo behind Hammy */
  content: "";
  position: absolute;
  inset: 12% 4% 4%;
  background: radial-gradient(circle at 50% 55%, var(--bisque) 0%, transparent 68%);
  opacity: .55;
  border-radius: 50%;
  z-index: -1;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-small);
  color: var(--ink-55);
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45em; }
.hero-trust svg { width: 1.05em; height: 1.05em; color: var(--gold); flex: none; }


/* --------------------------------------------------------------------------
   8b. The opening — CR-1
   The call and the answer: a paw reaching down, a paw reaching up, the promise
   between them. The logo and copy arrive after a beat. This is the identity's
   single most distinctive image and it owns the first screen.
   -------------------------------------------------------------------------- */
.opening {
  position: relative;
  overflow: hidden;
  background: var(--lace);
  /* The header is sticky above this, so the scene is the viewport less its height. */
  min-height: calc(100svh - 4.75rem);
  display: grid;
  align-items: center;
  padding-block: 0;
}
.opening .wrap {
  display: grid;
  gap: clamp(1rem, .2rem + 3vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
  width: 100%;
}
@media (min-width: 64rem) {
  .opening .wrap { grid-template-columns: 1fr 1.05fr 1fr; }
}

/* The scene: paws anchored to the top and bottom edges, script between. */
.opening-scene {
  position: relative;
  min-height: calc(100svh - 4.75rem);
  display: grid;
  place-items: center;
  order: -1;
}
@media (min-width: 64rem) { .opening-scene { order: 0; } }

/* The two paws must never touch — the manual's rule, and the script sits in the
   gap between their tips. Both paw images are tall: stacked, they come to about
   5.1x their own width. So the width is the one number that decides whether they
   clear each other, and everything else here is derived from it via --paw-w.

   The trap this avoids: sizing the paws off the viewport WIDTH alone while the
   space they reach across is the viewport HEIGHT. At 1280x720 and 1440x800 the
   paws overlapped by ~100px and the script was unreadable behind them. */
.opening { --paw-w: clamp(6.5rem, min(13vw, 17svh), 10.5rem); }

.opening-paw {
  position: absolute;
  left: 50%;
  width: var(--paw-w);
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(26, 23, 20, .13));
}
/* The paws run off the top and bottom edges, as in the identity: you see the
   reach, not the whole leg. Overflow on .opening does the clipping. */
.opening-paw--top    { top: -7%;    transform: translateX(-50%) rotate(180deg); }
.opening-paw--bottom { bottom: -9%; transform: translateX(-50%); }

.opening-script {
  position: relative;
  z-index: 1;
  color: var(--wood);
  /* One line, always — it is the promise, not a paragraph. Allowed to spill
     past its grid column, which is what the identity does too. */
  font-size: clamp(2.1rem, 1rem + 3vw, 4rem);
  white-space: nowrap;
  text-align: center;
  line-height: .95;
  /* The two paws are not the same length, so true centring reads low. */
  transform: translateY(-1.25rem);
}

.opening-logo { justify-self: center; }
.opening-logo img { width: min(100%, 17rem); }
@media (max-width: 63.99rem) {
  .opening { min-height: 0; padding-block: var(--s-6) var(--s-7); }
  .opening-logo img { width: min(58vw, 11rem); }
  .opening { --paw-w: clamp(4.25rem, 17vw, 6.5rem); }
  /* Below 64rem the scene is a fixed band rather than the viewport, so its
     height has to follow the paws instead of the other way round: the pair
     needs ~4.7x the paw width, plus room for the script in the gap. A flat
     rem value here broke at tablet widths, where the paws hit their cap
     while the band did not grow. Mobile scrolls anyway — the height is free. */
  .opening-scene { min-height: calc(4.7 * var(--paw-w) + 5rem); }
  /* The arms are hard-cropped in the artwork. On desktop the crop bleeds off
     the section's own edges, but here the scene sits inside the section, so
     the flat cut ends floated mid-Lace (and the dog's arm ran into the logo
     below). Fade the last stretch of each arm instead. Both images carry the
     arm at their bottom edge — the top paw's 180° rotation happens after
     painting, so the one gradient serves both. */
  .opening-paw {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
  }
  .opening-paw--top { top: -4%; }
  .opening-paw--bottom { bottom: -6%; }
}

.opening-copy { color: var(--wood); }
.opening-copy p { font-size: var(--t-lead); font-weight: 300; line-height: 1.5; }
.opening-copy p + p { margin-top: .7em; }
.opening-copy .btn-row { margin-top: var(--s-6); }

/* First-load choreography. Without this attribute — no JS, reduced motion, a
   repeat visit, or an early scroll — the final state renders immediately. */
@keyframes paw-in-down { from { opacity: 0; transform: translateX(-50%) rotate(180deg) translateY(44px); } }
@keyframes paw-in-up   { from { opacity: 0; transform: translateX(-50%) translateY(44px); } }
@keyframes scene-fade  { from { opacity: 0; } }
@keyframes pop-in      { from { opacity: 0; transform: scale(.92); } }

[data-opening="run"] .opening-paw--top    { animation: paw-in-down .9s var(--ease) both; }
[data-opening="run"] .opening-paw--bottom { animation: paw-in-up .9s var(--ease) both; }
[data-opening="run"] .opening-script      { animation: scene-fade 1s var(--ease) .15s both; }
[data-opening="run"] .opening-logo,
[data-opening="run"] .opening-copy        { animation: pop-in .45s var(--ease) 2.5s both; }

@media (prefers-reduced-motion: reduce) {
  [data-opening="run"] .opening-paw--top,
  [data-opening="run"] .opening-paw--bottom,
  [data-opening="run"] .opening-script,
  [data-opening="run"] .opening-logo,
  [data-opening="run"] .opening-copy { animation: none; }
}

/* --------------------------------------------------------------------------
   8b2. Contact hero
   The deck's closing composition: the invitation in script on the left, the
   trio holding the centre, the lockup and practical details on the right.
   The script takes Brandy rather than the deck's Goldenrod for the same
   reason as every other text swap in this file — Goldenrod on Lace is
   2.13:1 (see the note at the top).
   -------------------------------------------------------------------------- */
.contact-hero {
  background: var(--lace);
  padding-block: var(--s-6) var(--s-8);
}
.contact-hero .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 64rem) {
  .contact-hero .wrap { grid-template-columns: 1.05fr 1.4fr .85fr; gap: clamp(1.5rem, 3vw, 3.5rem); }
}
.contact-hero-script {
  margin-block: var(--s-3) var(--s-4);
  /* Two short lines beside the trio, as in the deck — not the band-width
     promise size. */
  font-size: clamp(2.4rem, 1.5rem + 2.4vw, 3.6rem);
}
.contact-hero-art img { width: 100%; height: auto; }
.contact-hero-details {
  text-align: center;
  color: var(--forest);
  justify-self: center;
  max-width: 17rem;
}
.contact-hero-details > img { width: min(58%, 9.5rem); height: auto; margin-bottom: var(--s-4); }
.contact-hero-details .small { color: inherit; }
.contact-hero-details .link { color: inherit; }
.contact-hero-reg {
  margin-top: var(--s-4);
  font-size: .72rem;
  line-height: 1.55;
  color: var(--ink-70);
}
@media (max-width: 63.99rem) {
  .contact-hero-copy { text-align: left; }
  .contact-hero-art { max-width: 26rem; justify-self: center; }
}

/* --------------------------------------------------------------------------
   8b3. The composite bands
   The designer's homepage: full-width colour bands, one per chapter — Story
   on Latte, What We Do on Forest, the Record on Goldenrod, Vets on Wood,
   Give on Bisque — each opened by an eyebrow and a script headline.

   Text colours are the site's usual accessibility swaps, not the composite's:
   the composites set white script on Latte and Bisque (2.5:1) and cream on
   Goldenrod (2.3:1); here mid-light grounds take Brandy/Ink and dark grounds
   take Bisque/Parchment. The bands still read as the composites.
   -------------------------------------------------------------------------- */
.chapter { padding-block: var(--section-y); position: relative; overflow: hidden; }

/* Script headlines and eyebrows per ground. */
.ground-latte .promise, .ground-bisque .promise, .ground-gold .promise { color: var(--brandy); }
.ground-latte .eyebrow, .ground-gold .eyebrow { color: var(--brandy); }
.ground-latte .eyebrow::before, .ground-gold .eyebrow::before { background: var(--brandy); }
.ground-bisque .eyebrow { color: var(--ink); }
.ground-bisque .eyebrow::before { background: var(--ink); }
.ground-wood .eyebrow { color: var(--parchment); }
.ground-wood .eyebrow::before { background: var(--parchment); }

/* Buttons for the bands. */
.btn--parchment { background: var(--parchment); color: var(--forest); border-color: var(--parchment); }
.btn--parchment:hover { background: var(--lace); }
.btn--on-latte, .btn--on-gold { color: var(--brandy); border-color: rgba(64, 31, 18, .45); background: transparent; }
.btn--on-latte:hover, .btn--on-gold:hover { border-color: var(--brandy); background: rgba(64, 31, 18, .07); }
.btn-row--end { justify-content: flex-end; }

/* --- Story: copy left, the wave filling the right, feet on the band's floor. */
.chapter-story { padding-block-end: 0; }
.chapter-story .wrap { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 62rem) { .chapter-story .wrap { grid-template-columns: 1.2fr 1fr; } }
.chapter-story-copy { padding-block-end: var(--section-y); }
.chapter-story-copy p + p { margin-top: .8em; }
.chapter-quote {
  margin-block: var(--s-5);
  font-size: 1.15em;
  font-weight: 700;
  font-style: italic;
  color: var(--brandy);
  max-width: 34ch;
}
.chapter-story-art { align-self: end; }
.chapter-story-art img { display: block; width: min(100%, 26rem); margin-inline: auto; }

.work-cards article { min-width: 0; }
.work-photo {
  border: 4px solid var(--parchment);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 3 / 2;
}
.work-photo img { width: 100%; height: 100%; object-fit: cover; }
.work-title {
  margin-top: var(--s-4);
  font-family: var(--f-mark);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.work-cards .small { margin-top: var(--s-3); }

/* --- The Record: copy, the phone in the paw, and four points beside it. */
.chapter-record { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62rem) { .chapter-record { grid-template-columns: 1.1fr .9fr 1.1fr; } }
.chapter-record-art img { display: block; width: min(100%, 17rem); margin-inline: auto; }
.record-point {
  background: var(--parchment);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.record-point + .record-point { margin-top: var(--s-4); }
.record-point strong { font-family: var(--f-mark); text-transform: uppercase; letter-spacing: .06em; font-size: .82em; }
/* The dotted threads back to the phone. */
@media (min-width: 62rem) {
  .record-point::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: var(--s-6);
    border-top: 2px dotted var(--parchment);
  }
}

/* --- Vets: photograph with the covered badge on its corner. */
.chapter-vets-art { position: relative; }
.vets-badge {
  position: absolute;
  top: -1.2rem;
  right: -1rem;
  display: grid;
  place-items: center;
  width: 7.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  color: var(--brandy);
  font-weight: 700;
  font-style: italic;
  font-size: .82rem;
  text-align: center;
  line-height: 1.25;
  box-shadow: var(--shadow-sm);
}

/* --- Give: copy, the open hand, four cards. */
.chapter-give .wrap { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62rem) { .chapter-give .wrap { grid-template-columns: 1.1fr .9fr 1.2fr; } }
.chapter-give-art img { display: block; width: min(100%, 21rem); margin-inline: auto; }
.give-cards { display: grid; gap: var(--s-4); }
@media (min-width: 36rem) { .give-cards { grid-template-columns: 1fr 1fr; } }
.give-card {
  background: var(--parchment);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  padding: 0 0 var(--s-4);
}
.give-card h3 {
  background: var(--forest);
  color: var(--gold);
  font-size: 1.18rem;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}
.give-card .small { padding-inline: var(--s-4); }

@media (max-width: 61.99rem) {
  .chapter-story-copy { padding-block-end: 0; }
  .chapter-story { padding-block-end: 0; }
}

/* --------------------------------------------------------------------------
   8c. Ask Hammy — CR-2
   Scholar Hammy bursting from a forest speech bubble, ringed by questions.
   The Scholar render is reserved for this composition and nowhere else.
   -------------------------------------------------------------------------- */
.ask-hammy {
  position: relative;
  max-width: 32rem;
  margin-inline: auto;
  padding: 16% 2% 9%;
}
/* The bubble sits inside the composition so the question circles ring it from
   outside, as in the identity — it is not the full width of the block. */
.ask-bubble {
  position: relative;
  width: 74%;
  margin-inline: auto;
  aspect-ratio: 1 / .95;
  background: var(--forest);
  border-radius: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
}
.ask-bubble::after {                      /* the tail, bottom-right */
  content: "";
  position: absolute;
  right: 6%;
  bottom: -1.05rem;
  width: 2.6rem;
  height: 1.6rem;
  background: var(--forest);
  clip-path: polygon(0 0, 100% 0, 24% 100%);
}
/* The Scholar's containing block is the BUBBLE, and he is bottom-anchored
   and taller than it — that is the whole trick: his head and ears break out
   of the top edge onto the Lace, as in the identity. His render is 700x872,
   so at 92% of the bubble's width he stands ~1.15 bubble-widths tall against
   its 0.95 — about a fifth of him rises clear of the top. */
.ask-scholar {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 92%;
  transform: translateX(-49%);
  z-index: 1;
  pointer-events: none;
}
/* The questions ring the composition from a full-size overlay — NOT
   display:contents, which would hand their percentages to whichever ancestor
   happens to be positioned. */
.ask-questions { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ask-q {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--gold);
  /* Brandy, not the deck's cream — Goldenrod is a surface here, and surfaces
     take dark text on this site (see the note at the top of this file).
     Cream on Goldenrod measures 2.30:1. */
  color: var(--brandy);
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(.6rem, .34rem + .55vw, .76rem);
  padding: 6%;
  box-shadow: 0 8px 20px -8px rgba(26, 23, 20, .35);
  /* Kept circular: the ratio sets the height and the type is sized to fit
     inside it, not the other way round — content-driven height is what was
     stretching these into eggs at desktop widths. */
  overflow: clip;
  /* No hyphenation — these are short questions and "an-nual" reads badly. */
  hyphens: none;
  text-wrap: balance;
}
/* Varying sizes, per the identity — not five identical stamps. */
.ask-q--1 { width: 30%; aspect-ratio: 1; left: 0;    top: 4%;   }
.ask-q--2 { width: 33%; aspect-ratio: 1; right: 0;   top: 0;    }
.ask-q--3 { width: 29%; aspect-ratio: 1; left: -4%;  top: 46%;  }
.ask-q--4 { width: 33%; aspect-ratio: 1; right: -4%; top: 52%;  }
.ask-q--5 { width: 31%; aspect-ratio: 1; left: 34%;  bottom: -3%; }

@keyframes q-float { 50% { transform: translateY(-4px); } }
.ask-q { animation: q-float 6s ease-in-out infinite; }
.ask-q--2 { animation-delay: .8s; }
.ask-q--3 { animation-delay: 1.6s; }
.ask-q--4 { animation-delay: 2.4s; }
.ask-q--5 { animation-delay: 3.2s; }
@media (prefers-reduced-motion: reduce) { .ask-q { animation: none; } }

/* Stacked: the bubble keeps the Scholar, the questions reflow beneath it. */
@media (max-width: 47.99rem) {
  .ask-hammy { padding-top: 14%; }
  .ask-q {
    position: static;
    width: auto;
    aspect-ratio: auto;
    border-radius: var(--r-pill);
    padding: .55rem 1rem;
    font-size: .78rem;
    animation: none;
    box-shadow: none;
  }
  .ask-questions {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: var(--s-5);
  }
}


/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(211,154,26,.5); }
.card h3, .card h4 { color: var(--forest); }
.card p { color: var(--ink-70); font-size: var(--t-small); line-height: 1.62; }
.card .card-foot { margin-top: auto; padding-top: var(--s-3); }
.card .card-foot--stack { display: grid; gap: var(--s-3); }
.card .card-foot--stack p { margin: 0; }

.on-dark .card, .card--dark {
  background: rgba(250,245,239,.055);
  border-color: var(--hairline-dk);
}
.on-dark .card h3, .on-dark .card h4, .card--dark h3, .card--dark h4 { color: var(--parchment); }
.on-dark .card p, .card--dark p { color: var(--parch-75); }

.card-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--gold);
  color: var(--ink);
  margin-bottom: var(--s-2);
  flex: none;
}
.card-icon svg { width: 1.5rem; height: 1.5rem; }
.card-icon--forest { background: var(--forest); color: var(--gold); }
.card-icon--apricot { background: var(--apricot); color: var(--ink); }
.card-icon--bisque { background: var(--bisque); color: var(--brandy); }

/* Numbered pillar card */
.pillar { position: relative; overflow: hidden; }
.pillar .pillar-no {
  position: absolute;
  top: .35rem; right: .55rem;
  width: 1.1ch;
  font-size: 6rem;
  font-weight: 900;
  line-height: .86;
  color: var(--gold);
  opacity: .1;
  pointer-events: none;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */
.stat { text-align: center; padding: var(--s-4) var(--s-2); }
.stat dt { order: 2; font-size: var(--t-small); color: var(--parch-75); line-height: 1.45; }
.stat dd {
  order: 1;
  font-size: var(--t-stat);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.stat { display: flex; flex-direction: column; }
.stat-grid { border-top: 1px solid var(--hairline-dk); border-bottom: 1px solid var(--hairline-dk); }
@media (min-width: 48rem) {
  .stat-grid .stat + .stat { border-left: 1px solid var(--hairline-dk); }
}

/* --------------------------------------------------------------------------
   11. Placeholder marker — every unverified figure on this site wears one
   -------------------------------------------------------------------------- */
[data-placeholder] {
  position: relative;
  border-bottom: 2px dashed var(--apricot);
  cursor: help;
}
[data-placeholder]::after {
  content: "TO CONFIRM";
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translate(-50%, -.35rem);
  font-family: var(--f-body);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .12em;
  background: var(--apricot);
  color: var(--parchment);
  padding: .15rem .45rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
[data-placeholder]:hover::after, [data-placeholder]:focus-visible::after { opacity: 1; }

.notice {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: rgba(217,110,48,.09);
  border: 1px solid rgba(217,110,48,.3);
  font-size: var(--t-small);
  line-height: 1.6;
}
.notice svg { width: 1.4rem; height: 1.4rem; color: var(--apricot); flex: none; margin-top: .1rem; }
.notice strong { color: var(--wood); }

/* --------------------------------------------------------------------------
   12. Chat — how Hammy actually looks on WhatsApp
   -------------------------------------------------------------------------- */
.chat {
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: clamp(1rem, .6rem + 1.4vw, 1.6rem);
  box-shadow: var(--shadow-lg);
  max-width: 26rem;
  margin-inline: auto;
}
.chat-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-4);
}
.chat-avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--gold); flex: none;
  display: grid; place-items: center; overflow: hidden;
}
.chat-avatar img { width: 118%; max-width: none; transform: translateY(9%); }
.chat-head strong { display: block; font-size: var(--t-small); color: var(--forest); line-height: 1.3; }
.chat-head span { font-size: .78rem; color: var(--ink-55); }
.chat-log { display: grid; gap: var(--s-3); }
.bubble {
  padding: .7rem 1rem;
  border-radius: 16px;
  font-size: var(--t-small);
  line-height: 1.5;
  max-width: 84%;
  animation: bubble-in .5s var(--ease) both;
}
.bubble--them { background: var(--lace); border-bottom-left-radius: 5px; justify-self: start; }
.bubble--me { background: var(--forest); color: var(--parchment); border-bottom-right-radius: 5px; justify-self: end; }
.bubble:nth-child(2) { animation-delay: .12s; }
.bubble:nth-child(3) { animation-delay: .24s; }
.bubble:nth-child(4) { animation-delay: .36s; }
.bubble:nth-child(5) { animation-delay: .48s; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   13. Donation amount picker
   -------------------------------------------------------------------------- */
.give { display: grid; gap: var(--s-5); }
.give-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-3); }
.tier {
  position: relative;
  text-align: left;
  padding: var(--s-4) var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 2px solid var(--hairline);
  background: var(--parchment);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.tier:hover { transform: translateY(-2px); border-color: rgba(211,154,26,.6); }
.tier[aria-pressed="true"] { border-color: var(--gold); background: rgba(211,154,26,.12); }
.tier[aria-pressed="true"]::after {
  content: "";
  position: absolute; top: .6rem; right: .6rem;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--gold);
}
.tier .amt { display: block; font-size: 1.4rem; font-weight: 900; color: var(--forest); letter-spacing: -.02em; line-height: 1.2; }
.tier .what { display: block; font-size: .82rem; color: var(--ink-70); line-height: 1.45; margin-top: .3rem; }

.give-freq { display: inline-flex; padding: 4px; background: var(--lace-deep); border-radius: var(--r-pill); gap: 2px; }
.give-freq button {
  padding: .5rem 1.15rem; border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 700; color: var(--ink-70);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.give-freq button[aria-pressed="true"] { background: var(--parchment); color: var(--forest); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: .4rem; align-content: start; }
.field label { font-size: var(--t-small); font-weight: 700; color: var(--forest); }
.field .hint { font-size: .8rem; color: var(--ink-55); line-height: 1.45; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .78rem 1rem;
  border: 2px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--parchment);
  font-size: var(--t-small);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(211,154,26,.2);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--apricot); }
.field .err { font-size: .8rem; color: var(--wood); font-weight: 700; display: none; }
.field[data-invalid="true"] .err { display: block; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--apricot); }

.form-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--2 .span-2 { grid-column: 1 / -1; } }

.form-card {
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   15. Accordion
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--hairline); }
.acc details { border-bottom: 1px solid var(--hairline); }
.acc summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) 2.6rem var(--s-5) 0;
  position: relative;
  font-weight: 700;
  font-size: var(--t-h4);
  color: var(--forest);
  line-height: 1.35;
  transition: color var(--dur) var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--wood); }
.acc summary::after {
  content: "";
  position: absolute; right: .4rem; top: 50%;
  width: .72rem; height: .72rem;
  border-right: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.acc details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.acc .acc-body { padding-bottom: var(--s-5); color: var(--ink-70); max-width: var(--maxw-text); }
.acc .acc-body > * + * { margin-top: .8em; }
.on-dark .acc, .on-dark .acc details { border-color: var(--hairline-dk); }
.on-dark .acc summary { color: var(--parchment); }
.on-dark .acc .acc-body { color: var(--parch-75); }

/* --------------------------------------------------------------------------
   16. Tables / fact lists
   -------------------------------------------------------------------------- */
.facts { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.facts > div {
  display: grid;
  gap: .15rem var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 40rem) { .facts > div { grid-template-columns: minmax(11rem, 15rem) 1fr; align-items: baseline; } }
.facts dt { font-size: var(--t-small); font-weight: 700; color: var(--forest); }
.facts dd { font-size: var(--t-small); color: var(--ink-70); }
.facts dd code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .92em;
  background: var(--lace);
  padding: .12em .45em;
  border-radius: var(--r-sm);
  letter-spacing: .02em;
}
/* Worked example: a running sum, so the total has to land. */
.facts--sum dd { font-variant-numeric: tabular-nums; }
.facts--sum .sum-total { border-bottom: 0; padding-bottom: 0; }
.facts--sum .sum-total dt,
.facts--sum .sum-total dd {
  font-weight: 900;
  font-size: var(--t-h4);
  color: var(--forest);
  letter-spacing: -.01em;
}

.on-dark .facts, .on-dark .facts > div { border-color: var(--hairline-dk); }
.on-dark .facts dt { color: var(--gold); }
.on-dark .facts dd { color: var(--parch-75); }
.on-dark .facts dd code { background: rgba(250,245,239,.1); }

/* --------------------------------------------------------------------------
   17. Media blocks
   -------------------------------------------------------------------------- */
.figure-tile {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Only fall back to a neutral ground when no .ground-* class is present —
   otherwise this would win on source order and flatten the coloured tiles. */
.figure-tile:not([class*="ground-"]) { background: var(--lace-deep); }
.figure-tile img { width: 100%; height: 100%; object-fit: cover; }

.tile-gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .tile-gallery { grid-template-columns: repeat(4, 1fr); } }
.tile-gallery .figure-tile { aspect-ratio: 3 / 4; }
/* Mascot cut-outs sit inside these tiles, so they must be contained and stood
   on the floor of the tile — never cropped like a photograph. */
.tile-gallery .figure-tile img {
  object-fit: contain;
  object-position: 50% 100%;
  padding: 9% 7% 0;
}

.cutout { filter: drop-shadow(0 20px 34px rgba(26,23,20,.18)); }
.cutout--sm { width: min(100%, 15rem); }
.cutout--md { width: min(100%, 21rem); }
.cutout--lg { width: min(100%, 30rem); }

/* --------------------------------------------------------------------------
   18. Callout band
   -------------------------------------------------------------------------- */
.band {
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.2rem + 3vw, 4rem);
  position: relative;
  overflow: hidden;
}
.band::after {
  content: "";
  position: absolute;
  right: -9%; top: -14%;
  width: min(34vw, 20rem);
  aspect-ratio: 1;
  background: currentColor;
  opacity: .05;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
  pointer-events: none;
}
.band > * { position: relative; z-index: 1; }

/* The H monogram as a standalone graphic — used where a character would be
   wrong, e.g. the press block. */
.monogram {
  width: min(100%, 14rem);
  aspect-ratio: 1;
  margin-inline: auto;
  background: var(--parchment);
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--forest); color: var(--parchment); padding-block: var(--s-8) var(--s-6); }
.footer-top {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--hairline-dk);
}
@media (min-width: 52rem) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); } }
.footer-brand img { height: 3.4rem; width: auto; margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--t-small); color: var(--parch-75); max-width: 30ch; }
.footer-col h4 {
  font-family: var(--f-mark);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
}
.footer-col ul { display: grid; gap: .55rem; }
.footer-col a {
  text-decoration: none;
  font-size: var(--t-small);
  color: var(--parch-75);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--gold); padding-left: .25rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-size: .82rem;
  color: var(--parch-55);
}
.footer-bottom a { color: var(--parch-75); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }
.footer-legal { display: grid; gap: .3rem; }

.social { display: flex; gap: var(--s-3); }
.social a {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--hairline-dk);
  display: grid; place-items: center;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.social svg { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------------------------------
   20. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute;
  left: 74%; top: -55%;
  width: min(36vw, 22rem);
  aspect-ratio: 1;
  background: var(--gold);
  opacity: .035;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
  pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }
.page-head h1 { max-width: 22ch; }
.page-head .lead { margin-top: var(--s-5); }

/* Hammy alongside the masthead. Page heads never carry documentary
   photography, so this is the one place he can appear on every page without
   breaking the two-worlds rule in the manual. */
.page-head--mascot .wrap {
  display: grid;
  gap: clamp(1rem, .4rem + 2vw, 3rem);
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .page-head--mascot .wrap { grid-template-columns: 1fr minmax(9rem, 14rem); align-items: center; }
}
.page-head--mascot::after { display: none; }   /* mascot replaces the watermark */
.page-head-mascot {
  justify-self: center;
  filter: drop-shadow(0 16px 26px rgba(26, 23, 20, .16));
}
.page-head-mascot img { width: min(100%, 13rem); }
/* Stacked, he tucks into the corner beside the lead rather than taking a
   band of his own and pushing the page down. */
/* Stacked, he sits in the corner under the lead. He must never overlap the
   text — at this width the lead runs the full column and would be obscured. */
@media (max-width: 55.99rem) {
  .page-head--mascot .wrap { gap: var(--s-2); }
  .page-head-mascot {
    justify-self: end;
    margin-bottom: calc(-1 * var(--s-4));
  }
  .page-head-mascot img { width: min(30vw, 6.75rem); }
}

/* Ask Hammy — fixed on every page. Functional as well as decorative: the
   whole service runs on this one WhatsApp number. */
.hammy-fab {
  position: fixed;
  right: clamp(.85rem, .3rem + 1.4vw, 1.5rem);
  bottom: clamp(.85rem, .3rem + 1.4vw, 1.5rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .32rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-small);
  line-height: 1;
  box-shadow: 0 6px 18px -4px rgba(26, 23, 20, .3), 0 2px 6px rgba(26, 23, 20, .16);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hammy-fab:hover { background: var(--gold-deep); transform: translateY(-3px); }
.hammy-fab img {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--parchment);
  flex: none;
}
.hammy-fab span { display: none; }
.hammy-fab svg { width: 1.05em; height: 1.05em; }
@media (min-width: 40rem) {
  .hammy-fab span { display: inline-flex; align-items: center; gap: .4em; padding-right: .95rem; }
}
/* Out of the way while the drawer is open. */
body[data-nav-open="true"] .hammy-fab { opacity: 0; pointer-events: none; }

.crumbs { font-size: .82rem; color: var(--ink-55); margin-bottom: var(--s-4); }
.crumbs a { text-decoration: none; color: var(--ink-55); }
.crumbs a:hover { color: var(--wood); text-decoration: underline; }
.crumbs span { margin-inline: .45em; color: var(--gold); }

/* --------------------------------------------------------------------------
   20a. People
   -------------------------------------------------------------------------- */
.person {
  display: grid;
  gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .person { grid-template-columns: minmax(11rem, 15rem) 1fr; }
}
/* Stacked, a full-width portrait swamps the profile it belongs to. */
@media (max-width: 45.99rem) {
  .person-portrait { max-width: 11.5rem; }
}

/* Portrait frame. Holds initials until a headshot is dropped in; an <img>
   inside simply covers them, so adding photographs needs no CSS change. */
.person-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.person-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;   /* faces sit above centre in most headshots */
}
/* With a photograph in the frame, the ghosted H would sit on the subject. */
.person-portrait:has(img)::after { display: none; }
.person-initials {
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  opacity: .9;
}
.person-portrait::after {          /* the H icon, ghosted into the corner */
  content: "";
  position: absolute;
  right: -14%; bottom: -12%;
  width: 62%;
  aspect-ratio: 1;
  background: currentColor;
  opacity: .12;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
  pointer-events: none;
}

.person-role {
  font-family: var(--f-mark);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: var(--s-2);
}
.on-dark .person-role { color: var(--gold); }
.person h3 { margin-bottom: var(--s-4); }

.cred {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--s-5);
}
.cred li {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--forest);
  background: rgba(0, 70, 67, .07);
  border: 1px solid rgba(0, 70, 67, .14);
  padding: .38rem .8rem;
  border-radius: var(--r-pill);
}
.on-dark .cred li {
  color: var(--parchment);
  background: rgba(250, 245, 239, .09);
  border-color: var(--hairline-dk);
}

/* --------------------------------------------------------------------------
   20b. Long-form legal
   -------------------------------------------------------------------------- */
.legal { max-width: 44rem; }
.legal > section { scroll-margin-top: 6.5rem; }
.legal h2 {
  font-size: var(--t-h3);
  color: var(--forest);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.legal > section:first-child h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 {
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--wood);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
/* Flow spacing for everything in a section — covers p-after-list and
   p-after-table, which a `p + p` rule alone would miss. Headings keep their
   own larger margins, which are more specific and still win. */
.legal > section > * + * { margin-top: .95em; }
.legal ul li {
  position: relative;
  padding-left: 1.5em;
  margin-top: .5em;
  font-size: var(--t-small);
  line-height: 1.62;
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: .25em; top: .68em;
  width: .42em; height: .42em;
  border-radius: 50%;
  background: var(--gold);
}
.legal .ref {
  display: inline-block;
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wood);
  background: rgba(211, 154, 26, .16);
  padding: .1em .5em;
  border-radius: var(--r-sm);
  white-space: nowrap;
  vertical-align: .08em;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--t-small);
  color: var(--ink-55);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-6);
}

.legal-toc {
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-7);
}
.legal-toc h2 {
  font-family: var(--f-mark);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0 0 var(--s-4);
  border: 0; padding: 0;
}
.legal-toc ol { counter-reset: toc; display: grid; gap: .35rem; }
@media (min-width: 44rem) { .legal-toc ol { grid-template-columns: 1fr 1fr; gap: .35rem var(--s-6); } }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  gap: .6em;
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--ink-70);
  padding: .16rem 0;
  transition: color var(--dur) var(--ease);
}
.legal-toc a::before {
  content: counter(toc) ".";
  color: var(--gold);
  font-weight: 700;
  flex: none;
  min-width: 1.3em;
}
.legal-toc a:hover { color: var(--wood); }

/* --------------------------------------------------------------------------
   21. Reveal on scroll
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.flow > * + * { margin-top: var(--s-5); }
.nowrap { white-space: nowrap; }
.gold { color: var(--gold); }
.forest { color: var(--forest); }

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .site-footer, .btn, .nav-toggle,
  .hammy-fab, .page-head-mascot { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  [data-reveal] { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}