/* The Thread (Andre's pick 2026-10-13: "lets just do the thread no swatch").
   Tabs: every top-nav tab is a bead on one gold string (drawn by thread.js), a knot hangs under the page you are on,
   and pointing at a tab pulls the string taut on both sides of it. Beads keep loomwest.com's 8 px corner (Rav's rule);
   the Book a free call pill is untouched. Cursor: a fine gold thread with the carousel's gold ball at its tip trails
   a mouse pointer, and over a link the ball opens into a small gold label. Mouse only; off for touch and for reduced
   motion; the normal pointer always stays. Loaded on every public page; private pages never load it. */
:root{--lw-gold:#b08536;--lw-goldl:#d9b56a;--lw-bead:rgba(248,247,243,.86);--lw-ease:cubic-bezier(.33,.02,.2,1)}

/* ---------- the bead tabs: the home page's .toptab and the other pages' .nav links ---------- */
.bar,.nav{position:relative}
.lw-string{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.lw-string .str{fill:none;stroke:var(--lw-gold);stroke-width:1.6;stroke-linecap:round}
.lw-string .tail{fill:none;stroke:var(--lw-gold);stroke-width:1.4;stroke-linecap:round}
.lw-string .ball{fill:var(--lw-goldl)}
.lw-string .halo{fill:none;stroke:var(--lw-goldl);stroke-width:1.5;opacity:.6}
/* only where the tab row shows (it leaves at 1020 px on every page, where the hamburger becomes the navigation) */
@media (min-width:1021px){
.toptab,.nav a:not(.cta):not(.pill){position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  margin:0 6px 0 0;border:1px solid var(--line,#e3dfd6);border-radius:8px;background:var(--lw-bead);opacity:1;
  transition:transform .18s var(--lw-ease),border-color .18s var(--lw-ease),color .18s var(--lw-ease)}
.nav a:not(.cta):not(.pill){margin-left:0}
.toptab:hover,.toptab:focus-visible,.nav a:not(.cta):not(.pill):hover,.nav a:not(.cta):not(.pill):focus-visible{
  border-color:var(--lw-gold);color:var(--terra-d,#9c5426);transform:translateY(-1px)}
.toptab[aria-current="page"],.toptab.on,.nav a.on{border-color:var(--lw-gold);color:var(--terra-d,#9c5426)}
.nav a:not(.cta):not(.pill) + .cta{margin-left:12px}
}

/* the phone menu: a small gold knot marks the page you are on */
#menu-panel a.here::before{content:"";flex:none;display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;
  background:var(--lw-goldl);box-shadow:0 0 0 3px rgba(217,181,106,.32)}

/* ---------- the cursor ---------- */
.lw-cur{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:0;transition:opacity .2s var(--lw-ease)}
.lw-cur.on{opacity:1}
.lw-cur svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lw-cur .t1{fill:none;stroke:var(--lw-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lw-cur .t2{fill:none;stroke:var(--lw-gold);stroke-width:1.5;stroke-linecap:round;opacity:.55}
.lw-cur .t3{fill:none;stroke:var(--lw-gold);stroke-width:1.3;stroke-linecap:round;opacity:.25}
.lw-cur .cball{fill:var(--lw-goldl);transition:opacity .15s var(--lw-ease)}
.lw-cur .chalo{fill:none;stroke:var(--lw-goldl);stroke-width:1.5;opacity:.6;transition:opacity .15s var(--lw-ease)}
.lw-cur.hot .cball,.lw-cur.hot .chalo{opacity:0}
.lw-tag{position:absolute;left:0;top:0;font:700 11.5px/1 'Space Grotesk','Segoe UI',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;padding:7px 10px;border-radius:8px;background:var(--lw-goldl);color:#1e222a;opacity:0;transform-origin:0 50%;
  transition:opacity .16s var(--lw-ease),scale .16s var(--lw-ease);scale:.9}
.lw-cur.hot .lw-tag{opacity:1;scale:1}
@media (hover:none),(pointer:coarse){.lw-cur{display:none}}
@media (prefers-reduced-motion:reduce){.lw-cur{display:none}.toptab,.nav a{transition:none}}
@media print{.lw-cur,.lw-string{display:none}}
/* Selected text in Loomwest orange on every page (Andre 2026-10-13: the giveaway page showed the browser's blue). */
::selection{background:#bf6a33;color:#fff6f0}