/* ============================================================= HEARTS OF GOLD LEGACY CANINES — design system (site.css) THE CHARTER (binding — every page follows this, no drift): · BONES = H. Light warm paper ground. Every major section opens with a full-bleed photo banner; the section title sits in the banner's lower edge over a gradient. Dense editorial content beneath. Dark ink ground appears ONLY in the donate band (.cta-band / .field) + footer. · TYPE VOICE. Fraunces (soft + optical axes) for ALL display type. Hero = a short distilled mission-derived headline, oversized serif, set half-on-photo / half-on-paper (J's overlap device — executed once, in the hero only). The mission statement VERBATIM gets its own serif section immediately below the hero (index) and the centerpiece treatment (mission.html). Jost for body/UI. Kaushan Script — the logo wordmark's face — appears NOWHERE except inside the logo images, with ONE sanctioned exception (Founder-approved 2026-07-29): the nav's "The Heartbeat" link, so the blog reads as a named sub-brand rather than another menu item. See `.nav-links a[href$="blog.html"]` below. Do not extend it further without the same approval. · GOLD RULE — gold does exactly three jobs: (1) the thread motif, (2) the Donate button, (3) one key-phrase underline per section. Nothing else is gold. Text-gold = #806010 (contrast-safe on the papers); bright #E0B028 only on fills/strokes >=3px or dark ground. · SIGNATURE — the tamed golden thread: a short hand-drawn-quality gold SVG stroke (not page-length, not scroll-scrubbed) that (a) draws in (stroke-dashoffset) as each section reveals — small varied gestures: an arc, a heart hint, a paw hint — and (b) forms the key-phrase underline. One per section, quiet, consistent. · MOTION — calm IntersectionObserver reveals (2.5s failsafe) + honest count-up stats with bracketed placeholders. NOTHING else: no parallax, no marquee, no sticky stacking, no polaroids, no magnetic buttons. · FINISHING LAYER: GOLDEN HOUR (binding — the approved site-wide finish): (1) ken-burns on EVERY photo banner's .bg — slow perpetual drift, 8–10s, alternating direction per banner (JS adds .kb-alt to every other banner; pure-CSS kbA otherwise); (2) drifting warm sunlight gradient on EVERY dark band (.cta-band / .field / .site-footer) and on .banner.hero; (3) gold dust motes ONLY on the page-hero banner and donate bands — mark those hosts with class `motes` (max 7 per container, JS-injected .mote spans; nowhere else, ever); (4) warm glow-bloom on primary/ghost button hover. Transform/opacity only. Reduced-motion = static warm gradients, no ken-burns, faint still motes. No-JS = static gradients keep the warmth; content never depends on any of it. site.js depends on these class names: .site-nav .site-nav.open .site-nav.scrolled .menu-btn .mobile-menu .reveal / .reveal.in .thread / .thread.drawn .count[data-target] .banner .bg (.kb-alt) .motes / .mote (all gated by except the CSS-only ken-burns) Structural contract: .wrap .section .two .lede .lbl .btn .btn-primary .btn-ghost .field .cta-band .site-nav .site-footer .reveal --------------------------------------------------------------- GOOGLE FONTS (paste verbatim into every page , after charset/viewport, before site.css) — Fraunces variable (ital, optical size, weight, SOFT) + Jost variable. --------------------------------------------------------------- --------------------------------------------------------------- CANONICAL NAV MARKUP (paste verbatim into every page ) --------------------------------------------------------------- --------------------------------------------------------------- CANONICAL FOOTER MARKUP (dark ink ground; white horizontal logo) --------------------------------------------------------------- The blanket "Demonstration site: figures, story, and photography are illustrative samples" line was REMOVED 2026-08-06: her real photography and her own copy landed 2026-07-29, and no invented figures remain, so the disclaimer had become false in the direction that matters — it understated the site. Two pages keep a NARROW, still-true note of their own: heart-of-hawkins (litter dates + available puppies are placeholders) and sponsors (tiers/open slots are illustrative; MAS is the real tech sponsor). What IS still a demo carries its own inline label at the point of use — the giving panel, the contact form, and the newsletter signup — never in the footer, so the disclaimer sits where the visitor can act on it. ============================================================= */ /* ================= Tokens ================= */ :root{ --gold:#E0B028; --gold-deep:#806010; --gold-soft:#f3e3b4; --ink:#141210; --ink-2:#3d3831; --ink-3:#6b6357; --paper:#FBF8F1; --paper-2:#F5EFE2; --cream:#f3ead9; --cream-dim:#d9cdb5; --line:rgba(20,18,16,.12); --line-2:rgba(20,18,16,.06); --serif:"Fraunces",Georgia,serif; --sans:"Jost",Helvetica,Arial,sans-serif; --nav-h:86px; /* golden-hour finish: enlarged nav logo (was 66px) */ } /* ================= Reset / base ================= */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6; font-size:1.03rem;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit} /* Fraunces carries ALL display type — soft axis on, optical sizing auto. */ h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.08; font-optical-sizing:auto;font-variation-settings:"SOFT" 50} /* Skip-to-content link (a11y) — hidden until keyboard-focused */ .skip{position:fixed;top:0;left:0;z-index:2000;background:var(--gold-deep);color:#fff; padding:.65rem 1.1rem;border-radius:0 0 8px 0;text-decoration:none;font-weight:600; transform:translateY(-200%);transition:transform .15s ease} .skip:focus{transform:translateY(0);outline:3px solid var(--ink);outline-offset:2px} /* Visually-hidden utility (labels for assistive tech) */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Visible focus ring everywhere (a11y floor beyond the skip link) */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:3px solid var(--gold-deep);outline-offset:2px} /* ================= Layout ================= */ .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,56px);position:relative;z-index:1} /* .section is the standard vertical rhythm block on paper. */ .section{padding:clamp(48px,7vw,96px) 0;position:relative;z-index:1} .section-tight{padding:clamp(32px,5vw,60px) 0} /* When .wrap carries a section class, the section padding shorthand would zero the wrap's horizontal gutters — restore them explicitly. */ .wrap.section,.wrap.section-tight{ padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)} /* .band — a quieter strip on the deeper paper (fact strips, cost band). */ .band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Section label — small uppercase letterspaced, ink (gold is spoken for). */ .lbl{font-weight:600;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase; color:var(--ink-3);display:block;margin-bottom:1.2em} /* Editorial two-column: heading left, prose right. */ .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:start} @media(max-width:820px){.two{grid-template-columns:1fr;gap:26px}} h2{font-size:clamp(1.9rem,4.4vw,3.2rem)} h3{font-size:clamp(1.35rem,2.6vw,1.9rem)} .lede{font-family:var(--serif);font-size:clamp(1.12rem,2vw,1.4rem);font-weight:400; color:var(--ink-2);max-width:46ch;line-height:1.5;font-variation-settings:"SOFT" 50} .lede p+p{margin-top:1em} .prose{color:var(--ink-2);max-width:62ch} .prose p+p{margin-top:1em} /* ================= Banner — the section opener (bones = H) ================= Full-bleed photo, title set into the lower edge over a gradient. Every major paper section opens with one; the hero is taller and uses the overlap device instead of an in-banner title. */ .banner{position:relative;height:56vh;min-height:22rem;overflow:hidden;display:flex;align-items:flex-end} /* TWO PHOTO VARIANTS PER BANNER — the convention every page follows. One file cannot serve this band. It is viewport-proportional, so it is ~2.86:1 on a 1440x900 laptop (74vh hero: ~2.16:1) but flips to NEAR-PORTRAIT on a phone (~1.05:1; hero ~0.75:1). So each page declares its banner photo TWICE, in its own