/* hb (Claude, 2026-10-12): the Experience pages in honeyblooms.org's theme. Ours, loaded after GPT's page CSS
   (capabilities, explore, object; product adds hb-product.css). His markup, scenes and scripts are unchanged.

   Rhythm (brand kit C): dark hero -> warm light sections -> dark close, bridged with the site's gradient
   (.bridge-down: ink -> ink 3 -> ground), never a butt joint. Every WebGL scene paints its own #17120e ground
   (HONEY_THEME, chosen in GPT's page scripts), so any section that holds a scene STAYS DARK: on a light ground it
   would be a dark slab with a hard edge. Text-only and 2D sections go light:
     capabilities  .care (honey spheres + glass button are 2D/CSS)       held bloom, flight: dark
     explore       .explore-bridge + #words (the kinetic chapter)       pigment, Nectar preview: dark
     object        .object-story + .object-next                         the sculpture: dark
   Light sections remap GPT's own tokens (--ink, --muted, --honey, --line) to the site's warm light palette, so his
   rules keep working. Measured: text #35281B on #F5EAD0 11.9:1, soft #6A503A 6.2:1, honey-ink #895810 5.1:1. */

/* the site's accent on dark: Honey 2 (#F0A830, 9.2:1 on #17120e), cream text; the scene ground stays #17120e */
:root{--honey:#F0A830;--ink:#F3E8CE;--hb-ground:#F5EAD0;--hb-dark:#17120e;--hb-ink3:#2E1F0E;--hb-text:#35281B;--hb-soft:#6A503A;
  --hb-honey:#C8860A;--hb-honey2:#F0A830;--hb-honey-ink:#895810;--hb-bridge:120px}
.explore-page{--explore-honey:#F0A830}
.skip{background:var(--hb-honey);color:#1C1208;font-weight:700}

/* ---- light sections ---- */
.care,.explore-bridge,.kinetic-chapter,.object-story,.object-next{
  --ink:var(--hb-text);--muted:var(--hb-soft);--honey:var(--hb-honey-ink);--line:#6A503A33;
  --explore-honey:var(--hb-honey-ink);--explore-soft:var(--hb-soft);--explore-line:#6A503A33;
  color:var(--hb-text);color-scheme:light;position:relative;border-top:0}
/* full-bleed ground without touching the layout: a border-image outset paints edge to edge (ink overflow,
   so it never adds a horizontal scrollbar) */
.care{border-image:linear-gradient(180deg,var(--hb-dark) 0,var(--hb-ink3) 26px,var(--hb-ground) var(--hb-bridge),var(--hb-ground) calc(100% - var(--hb-bridge)),var(--hb-ink3) calc(100% - 26px),var(--hb-dark) 100%) fill 0//0 100vmax}
.explore-bridge,.object-story{border-image:linear-gradient(180deg,var(--hb-dark) 0,var(--hb-ink3) 26px,var(--hb-ground) var(--hb-bridge)) fill 0//0 100vmax}
.kinetic-chapter,.object-next{border-image:linear-gradient(180deg,var(--hb-ground) 0,var(--hb-ground) calc(100% - var(--hb-bridge)),var(--hb-ink3) calc(100% - 26px),var(--hb-dark) 100%) fill 0//0 100vmax}
.care :focus-visible,.explore-bridge :focus-visible,.kinetic-chapter :focus-visible,.object-story :focus-visible,.object-next :focus-visible{outline-color:var(--hb-honey-ink)}
.care .text-link,.object-story .text-link,.kinetic-chapter .text-link{border-bottom-color:#89581080}

/* capabilities: The useful. The thoughtful. (2D canvas + CSS orbs read well on cream) */
.care{padding-block:calc(var(--hb-bridge) + 56px)}
.invitation{background:radial-gradient(ellipse,#C8860A1f,transparent 67%)}
.invitation-note{color:var(--hb-soft)}
.frosted-cta{border-color:#C8860A73;box-shadow:inset 0 1px 0 #fff9,0 20px 50px #2e1f0e2e}
.assembly-journey{border-top:0}

/* explore: the bridge line, then the kinetic chapter */
.explore-bridge{padding-block:calc(var(--hb-bridge) + 48px) 72px}
.explore-bridge .bridge-rule{background:#89581059}
.explore-bridge p{color:var(--hb-text)}
.explore-object{border-top:0}

/* object (Nectar): the story and the next links */
.object-story{padding-top:calc(var(--hb-bridge) + 64px)}
.object-next{padding-bottom:calc(var(--hb-bridge) + 40px)}
.object-next a>span:first-child{color:var(--hb-soft)}

/* ---- buttons: the site's primary (honey fill, ink label 6:1) for the main ask; ghost pills keep honey rims ---- */
.explore-contact{background:var(--hb-honey);color:#1C1208;border:0;border-radius:3px;font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:16px 26px;transition:transform .18s}
.explore-contact span{color:#1C1208}
.explore-contact:hover{background:var(--hb-honey2);transform:translateY(-2px)}
.motion-control button,.object-controls button{border-color:#F0A83066}
.motion-control button:hover:not(:disabled),.object-controls button:hover:not(:disabled){border-color:var(--hb-honey2)}
.site-footer a:hover{color:var(--hb-honey2)}

@media(max-width:759px){
  :root{--hb-bridge:96px}
  .care{padding-block:calc(var(--hb-bridge) + 40px)}
  .explore-bridge{padding-block:calc(var(--hb-bridge) + 36px) 48px}
  .object-story{padding-top:calc(var(--hb-bridge) + 44px)}
  .object-next{padding-bottom:calc(var(--hb-bridge) + 28px)}
}
@media(prefers-reduced-motion:reduce){.explore-contact{transition:none}.explore-contact:hover{transform:none}}
@media(forced-colors:active){.explore-contact{border:1px solid ButtonText}}
@media print{.care,.explore-bridge,.kinetic-chapter,.object-story,.object-next{border-image:none}}