/* Labeltron shared navigation — v208
   One header for storefront, studio, account, pulse, support, and ops.
   Loaded AFTER each page's inline <style>, so #lt-header wins specificity. */

#lt-header{
  --lt-bg: var(--bg, #03110b);
  --lt-cream: var(--tx, #f4f2ee);
  --lt-dim: var(--dim, #98a29a);
  --lt-mint: var(--teal2, #4ade80);
  --lt-mint-deep: var(--teal, #15b87a);
  --lt-amber: #e89a3c;
  --lt-line: color-mix(in srgb, var(--lt-mint) 18%, transparent);
  --lt-glass: color-mix(in srgb, var(--lt-bg) 78%, transparent);
  position: sticky;
  top: 0;
  z-index: 60;
  display: block;
  min-height: 0;
  padding: 0;
  gap: 0;
  background: var(--lt-glass);
  background-color: rgba(3,17,11,.82);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border-bottom: 1px solid var(--lt-line);
  color: var(--lt-cream);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  isolation: isolate;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
#lt-header::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--lt-mint) 45%, transparent), transparent);
  opacity:.55;
  pointer-events:none;
}
#lt-header.is-scrolled .lt-bar{height:64px}
#lt-header.is-scrolled{
  background-color: rgba(3,17,11,.94);
  border-bottom-color: color-mix(in srgb, var(--lt-mint) 12%, transparent);
  box-shadow:0 14px 44px rgba(0,0,0,.34);
}
#lt-header .lt-bar{
  max-width:1360px;
  margin:0 auto;
  /* v218: 66px could not hold 44px nav targets without clipping. */
  height:72px;
  padding:0 clamp(1rem, 2.6vw, 2.25rem);
  transition:height .28s ease;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(.75rem, 2vw, 2rem);
}

/* brand */
#lt-header .lt-brand{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
  color:inherit;
  text-decoration:none;
  border-radius:10px;
  outline-offset:4px;
  font-size:inherit;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
}
#lt-header .lt-mark{
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45)) drop-shadow(0 0 12px color-mix(in srgb, var(--lt-mint) 10%, transparent));
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
#lt-header .lt-brand:hover .lt-mark{
  transform:rotate(-9deg) scale(1.04);
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px color-mix(in srgb, var(--lt-mint) 22%, transparent));
}
#lt-header .lt-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
  min-width:0;
}
#lt-header .lt-brand-text b{
  font-family:'Fraunces', Georgia, serif;
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:.005em;
  color:var(--lt-cream);
  white-space:nowrap;
}
#lt-header .lt-brand-text small{
  margin-top:.24rem;
  font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:.48rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--lt-cream) 52%, transparent);
  white-space:nowrap;
}
#lt-header .np-dot{
  width:7px;
  height:7px;
  margin-left:.1rem;
  border-radius:50%;
  background:var(--lt-mint);
  box-shadow:0 0 9px color-mix(in srgb, var(--lt-mint) 80%, transparent);
}

/* primary rail */
#lt-header .lt-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:2px;
  margin:0;
  padding:5px;
  border-radius:14px;
  background:rgba(244,242,238,.035);
  border:1px solid rgba(244,242,238,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.16);
}
#lt-header .lt-nav::before{content:none}
#lt-header .lt-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  /* v218: 32px was under the 44px touch floor on every page. The header bar
     grows to 72px to hold these without crowding. */
  min-height:44px;
  line-height:1.2;
  padding:.62rem .85rem;
  border-radius:10px;
  font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.105em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--lt-cream) 62%, transparent);
  text-decoration:none;
  white-space:nowrap;
  border:0;
  background:transparent;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
#lt-header .lt-nav a:hover{
  color:var(--lt-cream);
  background:rgba(244,242,238,.06);
}
#lt-header .lt-nav a:active{transform:translateY(1px)}
#lt-header .lt-nav a:focus-visible,
#lt-header .lt-brand:focus-visible,
#lt-header .lt-cta:focus-visible,
#lt-header .lt-tool:focus-visible{
  outline:2px solid var(--lt-mint);
  outline-offset:2px;
}
#lt-header .lt-nav a[aria-current="page"],
#lt-header .lt-nav a[aria-current="true"]{
  color:var(--lt-mint);
  background:color-mix(in srgb, var(--lt-mint) 12%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lt-mint) 30%, transparent),
    0 0 18px color-mix(in srgb, var(--lt-mint) 10%, transparent);
}
#lt-header .lt-nav a[aria-current="page"]::after,
#lt-header .lt-nav a[aria-current="true"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:16px;
  height:2px;
  transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--lt-mint), transparent);
  opacity:.9;
}

/* right-side tools */
#lt-header .lt-tools{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}
/* v218: the Account chip and the brand lockup were 16px/34px tap boxes. */
#lt-header .lt-tools a,
#lt-header .lt-tools button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
#lt-header .lt-brand{min-height:44px}
#lt-header #wayclock,
#lt-header .lt-clock{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin:0;
  padding:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.08em;
  color:color-mix(in srgb, var(--lt-cream) 50%, transparent);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  flex:none;
}
#lt-header #wayclock::before,
#lt-header .lt-clock::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--lt-mint);
  box-shadow:0 0 8px color-mix(in srgb, var(--lt-mint) 75%, transparent);
  animation:ltPulse 2.4s ease-in-out infinite;
}
@keyframes ltPulse{
  0%,100%{opacity:.55; transform:scale(.9)}
  50%{opacity:1; transform:scale(1.1)}
}
#lt-header .lt-tool{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* v218: 32px failed the touch floor on every page; 44px square minimum. */
  min-height:44px;
  min-width:44px;
  padding:.42rem .62rem;
  border:1px solid rgba(244,242,238,.13);
  border-radius:10px;
  background:rgba(244,242,238,.03);
  color:color-mix(in srgb, var(--lt-cream) 70%, transparent);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
#lt-header .lt-tool:hover{
  color:var(--lt-cream);
  border-color:rgba(244,242,238,.26);
  background:rgba(244,242,238,.06);
}
#lt-header .lt-tool.on,
#lt-header .lt-tool[aria-pressed="true"]{
  background:var(--lt-mint);
  border-color:transparent;
  color:#04140c;
  font-weight:800;
}
#lt-header .lt-token{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.6rem;
  letter-spacing:.06em;
  color:color-mix(in srgb, var(--lt-cream) 58%, transparent);
  white-space:nowrap;
}
#lt-header .lt-token b{
  color:var(--lt-mint);
  font-weight:700;
}
#lt-header .lt-token[hidden]{display:none}
#lt-header .tokbar{display:none}
#lt-header .lt-cta{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  /* v218: primary CTA must clear the touch floor too. */
  min-height:44px;
  padding:.68rem .95rem;
  border-radius:11px;
  background:linear-gradient(135deg, var(--lt-amber), #f2b25e);
  color:#1a1206;
  font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.085em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:
    0 7px 20px rgba(232,154,60,.22),
    inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#lt-header .lt-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:
    0 11px 28px rgba(232,154,60,.3),
    inset 0 1px 0 rgba(255,255,255,.42);
}
#lt-header .lt-cta[aria-current="page"],
#lt-header .lt-cta[aria-current="true"]{
  background:linear-gradient(135deg, var(--lt-mint), #6ee7a4);
  color:#04140c;
  box-shadow:
    0 7px 20px rgba(74,222,128,.24),
    inset 0 1px 0 rgba(255,255,255,.4);
}
#lt-header .lt-cta .arw{
  font-size:.82rem;
  line-height:1;
  transition:transform .18s ease;
}
#lt-header .lt-cta:hover .arw{transform:translateX(3px)}
#lt-header .lt-cta-short{display:none}

/* ops-only bits */
#lt-header .lt-live{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .48rem;
  border:1px solid color-mix(in srgb, var(--lt-mint) 40%, transparent);
  border-radius:6px;
  color:var(--lt-mint);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#lt-header .lt-stamp{
  max-width:18ch;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.56rem;
  letter-spacing:.04em;
  color:color-mix(in srgb, var(--lt-cream) 50%, transparent);
  white-space:nowrap;
}

/* scroll progress hairline */
#lt-header .lt-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
}
#lt-header .lt-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg, var(--lt-mint), var(--lt-amber));
  opacity:.9;
  transition:width .08s linear;
}

/* tablet / mobile: brand + tools, then a scrollable chip rail */
@media (max-width:980px){
  #lt-header.is-scrolled .lt-bar{height:auto}
  #lt-header .lt-bar{
    height:auto;
    /* v218: tighter vertical rhythm — the nav rail carries its own 44px targets. */
    padding:.32rem clamp(.9rem, 3vw, 1.4rem) .3rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.28rem .55rem;
  }
  #lt-header .lt-brand{order:1;flex:none;min-height:44px}
  #lt-header .lt-tools{order:2;margin-left:auto;gap:.4rem}
  #lt-header .lt-nav{
    order:3;
    width:100%;
    justify-self:auto;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    border-radius:11px;
    /* v218: 44px targets plus 3px rail padding made the header 168px tall on a
       phone. Trim the rail to 1px padding and 42px so the header stays ~150px. */
    padding:1px;
    gap:1px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  #lt-header .lt-nav::-webkit-scrollbar{display:none}
  #lt-header .lt-nav a{
    flex:1 1 auto;
    min-width:max-content;
    scroll-snap-align:start;
    /* v218: phone nav was 40px, under the 44px floor. */
    min-height:44px;
    justify-content:center;
    padding:.55rem .62rem;
  }
  #lt-header #wayclock,
  #lt-header .lt-clock{display:none}
  #lt-header .lt-brand-text small{display:none}
  #lt-header .lt-mark{width:30px;height:30px}
  #lt-header .lt-cta{min-height:44px;padding:.6rem .75rem;font-size:.63rem}
  #lt-header .lt-cta-full{display:none}
  #lt-header .lt-cta-short{display:inline}
  #lt-header .lt-live,
  #lt-header .lt-stamp{display:none}
}

@media (max-width:560px){
  /* v212: nav links were .59rem (9.4px) and the token counter .56rem (9.0px) —
     under the 11px legibility floor, on the two controls a phone user touches
     most. Raise both and let the rail scroll rather than shrink the type. */
  #lt-header .lt-brand-text b{font-size:.98rem}
  #lt-header .lt-mark{width:28px;height:28px}
  #lt-header .lt-nav a{font-size:.7rem;letter-spacing:.06em;padding:.5rem .62rem}
  #lt-header .lt-cta{min-height:44px;padding:.55rem .7rem;font-size:.68rem}
  #lt-header .lt-token{font-size:.68rem}
}

@media (prefers-reduced-motion:reduce){
  #lt-header,
  #lt-header *,
  #lt-header *::before,
  #lt-header *::after{
    transition:none !important;
    animation:none !important;
  }
  #lt-header .lt-progress span{transition:none !important}
}

@media (forced-colors:active){
  #lt-header .lt-nav a[aria-current="page"],
  #lt-header .lt-nav a[aria-current="true"]{
    border:1px solid ButtonText;
  }
}


/* Storefront section jump rail.
   v209: this was tertiary to the point of being unreadable — 8.8px type at 38%
   opacity with no hit area, sitting directly under the header. It is a real
   navigation affordance, so give it legible type, pill targets and a hover
   state. It stays visually quieter than the primary nav. */
body > .skipnav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  max-width:1360px;
  margin:0 auto;
  padding:.55rem clamp(1rem, 2.6vw, 2.25rem) .65rem;
  border-bottom:1px solid color-mix(in srgb, var(--teal2, #4ade80) 10%, transparent);
  font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim, #86b398);
}
body > .skipnav::before{
  content:"Jump to";
  margin-right:.45rem;
  color:color-mix(in srgb, var(--teal2, #4ade80) 78%, transparent);
  font-size:.66rem;
  letter-spacing:.16em;
}
body > .skipnav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* v218: section rail chips were 32px on desktop and phone. */
  min-height:44px;
  padding:0 .8rem;
  border:1px solid color-mix(in srgb, var(--teal2, #4ade80) 15%, transparent) !important;
  border-radius:999px !important;
  background:color-mix(in srgb, var(--teal2, #4ade80) 4%, transparent) !important;
  color:inherit !important;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  text-decoration:none;
  transition:color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease;
}
/* the "·" separators are redundant once each link is a pill */
body > .skipnav a + a::before{content:none}
body > .skipnav a:hover,
body > .skipnav a:focus-visible{
  color:var(--teal2, #4ade80) !important;
  border-color:color-mix(in srgb, var(--teal2, #4ade80) 55%, transparent) !important;
  background:color-mix(in srgb, var(--teal2, #4ade80) 12%, transparent) !important;
  transform:translateY(-1px);
}
@media (max-width:980px){
  body > .skipnav{
    justify-content:flex-start;
    padding:.3rem .9rem .36rem 1.1rem;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 18px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  }
  body > .skipnav::-webkit-scrollbar{display:none}
  body > .skipnav::before{flex:none}
  body > .skipnav a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:.2rem .5rem}
}

/* ══ v212 shared site footer ══
   The storefront had a proper 4-column footer; pulse.html and contact.html each
   had a single centred line of text ("... · Store · Studio · Account ·
   Support"), which read as a placeholder. One definition here so every page
   gets the same footer. Pages opt in by using the .foot-grid markup. */
body > footer.site-foot{
  margin-top:2.4rem;
  padding:2.2rem clamp(1rem, 3vw, 2.25rem) 1.2rem;
  border-top:1px solid color-mix(in srgb, var(--teal2, #4ade80) 12%, transparent);
  background:linear-gradient(180deg, rgba(74,222,128,.025), transparent 60%);
  font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
body > footer.site-foot .foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2rem;
  max-width:1100px;
  margin:0 auto;
}
body > footer.site-foot .foot-brand{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
body > footer.site-foot .foot-brand b{font-family:var(--serif, Georgia, serif);font-size:1.15rem;color:var(--tx, #eaf4ec)}
body > footer.site-foot .foot-brand p,
body > footer.site-foot .foot-note p{
  margin:0;font-size:.82rem;color:var(--dim, #86b398);line-height:1.55;max-width:28ch;
}
body > footer.site-foot .foot-col{display:flex;flex-direction:column;gap:.1rem}
body > footer.site-foot .foot-col h3{
  margin:0 0 .3rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb, var(--teal2, #4ade80) 62%, var(--dim, #86b398));
}
body > footer.site-foot .foot-col a{
  /* v218: 32px was under the touch floor on every page. */
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--dim, #86b398);text-decoration:none;font-size:.84rem;
  transition:color .15s ease;
}
body > footer.site-foot .foot-col a:hover,
body > footer.site-foot .foot-col a:focus-visible{color:var(--teal2, #4ade80);text-decoration:underline}
body > footer.site-foot .foot-base{
  margin-top:2.2rem;padding-top:.9rem;max-width:1100px;margin-left:auto;margin-right:auto;
  border-top:1px solid color-mix(in srgb, var(--teal2, #4ade80) 10%, transparent);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb, var(--dim, #86b398) 85%, transparent);
}
@media (max-width:760px){
  body > footer.site-foot .foot-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
}
@media (max-width:430px){
  body > footer.site-foot .foot-grid{grid-template-columns:1fr;gap:1.4rem}
}