/* Naiva root section, primary shape (approved 3 Oct 2026). Scoped to #naiva-roots-component.
   Shape, ribbons, timings and label positions are the approved build; site changes: brand fonts
   from site.css, the sticky top clears Naiva's fixed nav, 12px label floor (item 37), cards link
   to their category pages, plus three touches: branch highlight on hover/focus, hairline
   rootlets, and a slow sand pulse along the roots once the tree is grown. */
#naiva-roots-component{--nr-paper:#f0ebe3;--nr-ink:#232e38;--nr-sand:#d8ae72;--naiva-sticky-top:calc(34px + 72px);background:var(--nr-paper);color:var(--nr-ink);font-family:var(--display,"Plus Jakarta Sans"),sans-serif;font-weight:300}
#naiva-roots-component *{box-sizing:border-box}
#naiva-roots-component .nr-journey{position:relative;height:480svh}
#naiva-roots-component .nr-stage{position:sticky;top:var(--naiva-sticky-top);height:calc(100svh - var(--naiva-sticky-top));min-height:560px;overflow:hidden}
#naiva-roots-component .nr-tree{position:absolute;inset:0;width:100%;height:100%;display:block}
#naiva-roots-component .nr-head,#naiva-roots-component .nr-group li{position:absolute;margin:0;left:5%;width:22%;opacity:0;transform:translateY(calc(-50% + 8px));transition:opacity .22s ease,transform .22s ease}
#naiva-roots-component .nr-right .nr-head,#naiva-roots-component .nr-right li{left:auto;right:5%}
#naiva-roots-component .nr-head{top:15.7%;font-size:clamp(24px,3.2vw,48px);line-height:1.1;letter-spacing:-.055em;font-weight:300}
#naiva-roots-component .nr-head a{color:inherit;text-decoration:none}
#naiva-roots-component .nr-left{text-align:right}
#naiva-roots-component .nr-group ul{list-style:none;margin:0;padding:0}
#naiva-roots-component .nr-group li{top:var(--nr-y);font-size:clamp(13px,1.35vw,21px);line-height:1.45;letter-spacing:-.025em;text-wrap:balance}
#naiva-roots-component [data-reveal].nr-visible{opacity:1;transform:translateY(-50%)}
@media(max-width:820px){#naiva-roots-component{--naiva-sticky-top:calc(36px + 62px)}}
@media(max-width:600px){#naiva-roots-component .nr-head,#naiva-roots-component .nr-group li{left:4%;width:23.5%}#naiva-roots-component .nr-right .nr-head,#naiva-roots-component .nr-right li{left:auto;right:4%}#naiva-roots-component .nr-head{font-size:clamp(18px,4.8vw,27px)}#naiva-roots-component .nr-group li{font-size:12px;line-height:1.35;letter-spacing:-.01em}}
@media(prefers-reduced-motion:reduce){#naiva-roots-component .nr-journey{height:auto}#naiva-roots-component .nr-stage{position:relative}#naiva-roots-component [data-reveal]{transition:none}}

#naiva-roots-component .nr-category{z-index:2}
#naiva-roots-component .nr-category.nr-open{z-index:20}
#naiva-roots-component .nr-trigger{font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;text-align:inherit;background:none;border:0;padding:8px 0;cursor:pointer;position:relative;max-width:100%;text-wrap:balance}
#naiva-roots-component .nr-trigger::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .2s}
#naiva-roots-component .nr-right .nr-trigger::after{transform-origin:left}
#naiva-roots-component .nr-open .nr-trigger::after{transform:scaleX(1)}
#naiva-roots-component .nr-trigger:focus-visible{outline:1px solid currentColor;outline-offset:5px;border-radius:2px}
#naiva-roots-component .nr-card{position:absolute;top:100%;right:0;width:290px;max-width:80vw;padding:25px 26px 27px;text-align:left;background:var(--nr-ink);color:var(--nr-paper);border:1px solid #ffffff18;box-shadow:0 14px 36px #232e3824;border-radius:3px;animation:nr-card-in .18s ease both}
#naiva-roots-component .nr-right .nr-card{right:auto;left:0}
#naiva-roots-component .nr-card-above .nr-card{top:auto;bottom:100%}
#naiva-roots-component .nr-card[hidden]{display:none}
#naiva-roots-component .nr-card-group{display:block;font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.17em;opacity:.65;margin-bottom:15px}
#naiva-roots-component .nr-card-title{display:block;margin:0 0 12px;font-weight:300;font-size:23px;line-height:1.25;letter-spacing:-.045em}
#naiva-roots-component .nr-card p{margin:0;font-size:14px;line-height:1.6;letter-spacing:0;opacity:.85}
#naiva-roots-component .nr-card a{display:inline-block;margin-top:16px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--nr-sand);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
@keyframes nr-card-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){#naiva-roots-component .nr-card{width:260px;right:auto;left:0;padding:21px}#naiva-roots-component .nr-right .nr-card{left:auto;right:0}#naiva-roots-component .nr-card-title{font-size:21px}}
@media(prefers-reduced-motion:reduce){#naiva-roots-component .nr-card{animation:none}#naiva-roots-component .nr-trigger::after{transition:none}}

/* touch 1: hover or focus a category and its own branch stays lit back to the root */
#naiva-roots-component .nr-ribbons path{transition:opacity .35s ease}
#naiva-roots-component.nr-focus .nr-ribbons path:not(.nr-lit),#naiva-roots-component.nr-focus .nr-rootlets{opacity:.14}
#naiva-roots-component.nr-focus .nr-group li:not(.nr-open),#naiva-roots-component.nr-focus .nr-head:not(.nr-lit-head){opacity:.35}
#naiva-roots-component.nr-focus .nr-group li.nr-visible:not(.nr-open){opacity:.35}
/* touch 2: hairline rootlets */
#naiva-roots-component .nr-rootlets{transition:opacity .35s ease}
#naiva-roots-component .nr-rootlets path{fill:none;stroke:var(--nr-ink);stroke-linecap:round;vector-effect:non-scaling-stroke}
/* touch 3: a slow sand pulse runs down the roots once the tree is grown */
#naiva-roots-component .nr-sap path{fill:none;stroke:var(--nr-sand);stroke-linecap:round;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-dasharray:.05 1.4;stroke-dashoffset:.05;opacity:0}
#naiva-roots-component.nr-grown .nr-sap path{opacity:.9;animation:nr-sap 5.6s cubic-bezier(.45,0,.35,1) infinite;animation-delay:var(--d,0s)}
@keyframes nr-sap{from{stroke-dashoffset:.05}to{stroke-dashoffset:-1.05}}
@media(prefers-reduced-motion:reduce){#naiva-roots-component .nr-sap{display:none}}
/* phones/tablets: the site's sticky Book bar owns the bottom 4.6rem, so the stage stops above it */
@media(max-width:820px){#naiva-roots-component .nr-stage{height:calc(100svh - var(--naiva-sticky-top) - 4.6rem - env(safe-area-inset-bottom));min-height:480px}}

/* 3 Oct: every label and card is a real link. Hover/focus previews the card and lights the
   branch; a click goes to the category page. */
#naiva-roots-component a.nr-trigger{display:inline-block;text-decoration:none}
#naiva-roots-component .nr-go{display:inline-block;margin-left:.3em;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;color:var(--nr-ink)}
#naiva-roots-component .nr-left .nr-go{margin-left:0;margin-right:.3em;float:none}
#naiva-roots-component .nr-open .nr-go,#naiva-roots-component a.nr-trigger:hover .nr-go,#naiva-roots-component a.nr-trigger:focus-visible .nr-go{opacity:1;transform:none}
#naiva-roots-component a.nr-trigger:hover::after{transform:scaleX(1)}
#naiva-roots-component a.nr-card{display:block;text-decoration:none;cursor:pointer;transition:background-color .2s}
#naiva-roots-component a.nr-card:hover{background:#2c3a46}
#naiva-roots-component .nr-card-text{display:block;margin:0;font-size:14px;line-height:1.6;opacity:.85}
#naiva-roots-component .nr-card-more{display:inline-block;margin-top:16px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--nr-sand);border-bottom:1px solid currentColor;padding-bottom:2px}
#naiva-roots-component .nr-head a{transition:opacity .2s}
#naiva-roots-component .nr-head a:hover{opacity:.7}

/* 3 Oct: the center root eases into the next section. In the last stretch of scroll its tip
   swells into a pool that widens to the full width at the bottom edge, exactly where the navy
   section begins, so root and section read as one shape. --pool (0→1) is set by the script. */
#naiva-roots-component .nr-pool{position:absolute;left:0;right:0;bottom:0;width:100%;height:24%;display:block;pointer-events:none;color:var(--nr-ink);opacity:0}
@media(prefers-reduced-motion:reduce){#naiva-roots-component .nr-pool{display:none}}

/* 3 Oct: everything scales with the viewport, so a large monitor gets the same proportions
   (sizes keep a legible floor on small screens instead of a ceiling on big ones). */
#naiva-roots-component .nr-head{font-size:max(24px,3.2vw)}
#naiva-roots-component .nr-group li{font-size:max(13px,1.35vw)}
#naiva-roots-component .nr-trigger{padding:max(8px,.55vw) 0}
#naiva-roots-component .nr-card{width:max(290px,20vw);padding:max(25px,1.75vw) max(26px,1.8vw) max(27px,1.9vw)}
#naiva-roots-component .nr-card-group,#naiva-roots-component .nr-card-more{font-size:max(12px,.82vw)}
#naiva-roots-component .nr-card-group{margin-bottom:max(15px,1vw)}
#naiva-roots-component .nr-card-title{font-size:max(23px,1.6vw)}
#naiva-roots-component .nr-card-text{font-size:max(14px,.98vw)}
#naiva-roots-component .nr-card-more{margin-top:max(16px,1.1vw)}
@media(max-width:600px){#naiva-roots-component .nr-head{font-size:clamp(18px,4.8vw,27px)}#naiva-roots-component .nr-group li{font-size:12px}#naiva-roots-component .nr-card{width:260px;padding:21px}#naiva-roots-component .nr-card-title{font-size:21px}#naiva-roots-component .nr-card-text{font-size:14px}}

/* 3 Oct: breathing room at the foot. The tree and its labels live in the top 82% of the frame;
   the bottom band is where the center root runs on and swells into the next section. */
#naiva-roots-component{--nr-tree-h:.82}
#naiva-roots-component .nr-tree{inset:0 0 auto 0;height:calc(var(--nr-tree-h) * 100%)}
#naiva-roots-component .nr-group li{top:calc(var(--nr-y) * var(--nr-tree-h))}
#naiva-roots-component .nr-head{top:calc(15.7% * var(--nr-tree-h))}
#naiva-roots-component .nr-pool{top:calc(var(--nr-tree-h) * 100% - 2%);bottom:-1px;height:auto}
#naiva-roots-component .nr-pool{bottom:auto;height:calc(102% - var(--nr-tree-h) * 100% + 1px)}

/* 3 Oct: clickable branches. Invisible finger-wide hit lines over each branch. */
#naiva-roots-component .nr-hits path{fill:none;stroke:transparent;stroke-width:26px;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}
#naiva-roots-component .nr-head.nr-hover a{opacity:.7}
/* cards open inward, toward the tree, so they never leave the screen */
#naiva-roots-component .nr-left .nr-card{right:auto;left:0}
#naiva-roots-component .nr-right .nr-card{left:auto;right:0}

/* 3 Oct: one hover state for a category, whether the pointer is on its name or its branch */
#naiva-roots-component .nr-trigger{transition:transform .25s ease,color .2s}
#naiva-roots-component .nr-trigger::after{height:2px;background:var(--nr-sand);bottom:2px}
#naiva-roots-component .nr-left .nr-open .nr-trigger,#naiva-roots-component .nr-left a.nr-trigger:hover{transform:translateX(6px)}
#naiva-roots-component .nr-right .nr-open .nr-trigger,#naiva-roots-component .nr-right a.nr-trigger:hover{transform:translateX(-6px)}
#naiva-roots-component .nr-go{color:var(--nr-sand)}
@media(prefers-reduced-motion:reduce){#naiva-roots-component .nr-trigger{transition:none}}
/* labels and cards always take the pointer (an old site rule once disabled them by id) */
#naiva-roots-component .nr-journey,#naiva-roots-component .nr-stage,#naiva-roots-component .nr-group,#naiva-roots-component .nr-group li,#naiva-roots-component .nr-head{pointer-events:auto}

/* 6 Oct: shorter scroll, organic placement. Labels sit at their branch tips (positioned by the
   script every frame), so no fixed columns; type is capped so big screens don't feel zoomed. */
/* 6 Oct: the tree autoplays on arrival, so the section is one screen (no pinned scroll) */
#naiva-roots-component .nr-journey{height:auto}
#naiva-roots-component .nr-stage{position:relative;top:auto}
#naiva-roots-component .nr-group li,#naiva-roots-component .nr-head{width:max-content;max-width:min(17vw,260px)}
#naiva-roots-component .nr-right .nr-group li,#naiva-roots-component .nr-right li,#naiva-roots-component .nr-right .nr-head{text-align:left}
#naiva-roots-component .nr-left li,#naiva-roots-component .nr-left .nr-head{text-align:right}
#naiva-roots-component .nr-head{font-size:clamp(24px,2.5vw,44px);max-width:none;white-space:nowrap}
#naiva-roots-component .nr-group li{font-size:clamp(13px,1.05vw,18px)}
#naiva-roots-component .nr-card{width:clamp(260px,18vw,320px);padding:clamp(20px,1.6vw,28px)}
#naiva-roots-component .nr-card-title{font-size:clamp(20px,1.4vw,26px)}
#naiva-roots-component .nr-card-text{font-size:clamp(14px,.9vw,16px)}
#naiva-roots-component .nr-card-group,#naiva-roots-component .nr-card-more{font-size:12px}
@media(max-width:600px){#naiva-roots-component .nr-group li{max-width:30vw;font-size:12px}#naiva-roots-component .nr-head{font-size:clamp(18px,5vw,26px)}}
/* the tree lives: transforms are set per frame, so no transition on them */
#naiva-roots-component .nr-ribbons path,#naiva-roots-component .nr-rootlets g{transition:opacity .35s ease}
/* 6 Oct (round 3): cards are placed by the script beside their name, toward the tree, and kept
   inside the section. They fade and slide in from the name's side. The name never turns bold. */
#naiva-roots-component.nr-js .nr-group .nr-card,#naiva-roots-component.nr-js .nr-group .nr-card-above .nr-card{display:block;top:0;left:0;right:auto;bottom:auto;margin:0;opacity:0;visibility:hidden;pointer-events:none;animation:none;transform:translate3d(-8px,0,0);transition:opacity .16s ease,transform .2s cubic-bezier(.2,.7,.2,1),visibility 0s linear .16s,background-color .2s}
#naiva-roots-component.nr-js .nr-right .nr-card{transform:translate3d(8px,0,0)}
#naiva-roots-component.nr-js .nr-group .nr-open .nr-card{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .16s ease,transform .2s cubic-bezier(.2,.7,.2,1),visibility 0s,background-color .2s}
#naiva-roots-component .nr-group{position:absolute;inset:0;pointer-events:none}
#naiva-roots-component .nr-group.nr-has-open{z-index:30}
#naiva-roots-component .nr-ribbons path,#naiva-roots-component .nr-rootlets{transition:opacity .25s ease}
#naiva-roots-component .nr-group li,#naiva-roots-component .nr-head{transition:opacity .25s ease,transform .22s ease}
@media(prefers-reduced-motion:reduce){#naiva-roots-component.nr-js .nr-group .nr-card{transition:none}}
#naiva-roots-component .nr-bridge{position:absolute;top:0;height:100%;width:0;pointer-events:none}
#naiva-roots-component .nr-open .nr-bridge{pointer-events:auto}