/* ============================================================================
   we-teaser-nav.css — the site nav, for the countdown page only.

   The countdown page is a home template with its own stylesheet, so it does
   not get the nav rules that live inside fp-landing.css / teardown-*.css.
   Rather than pull 155KB of page styles in to borrow a header, the nav block
   is lifted VERBATIM from assets/fp-landing.css — lines 726-822 (bar, links,
   dropdown, CTA), 847-876 (the dropdown's torn dark-paper treatment) and
   878-886 (the CTA's offset shadow) — so the header is pixel-identical to
   every other page on the site.

   Take those ranges from the RULES, never from the comment blocks above them.
   An extract that began at 842 started in the middle of a comment; the stray
   close-comment token it inherited ended this banner early and swallowed the
   rule that followed. It cost two rounds: first the dropdown silently kept its
   old navy card style, then the whole .nav rule stopped applying and the bar
   only looked right because its children inherited the page's colours. Neither
   was visible without diffing computed styles.

   Loaded only by sections/mist_teaser, which only renders while the teaser
   switch is on. Nothing else references this file.

   The .nav rule declares its own --nav-* tokens, so this is self-contained;
   the only outside dependency is --we-paper-dark from layouts/theme.liquid,
   which every page already has. The Intelligence dropdown is pure CSS
   (:hover / :focus-within) — no JS to port.
   ============================================================================ */

.nav{
  --nav-bg:#05070a;
  --nav-ink:#f7f8fa;
  --nav-line:rgba(255,255,255,.1);
  --nav-brand:#42b1ff;
  --nav-label:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif;
  --nav-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  /* rag depth; the bar's own painted height derives from it — see the
     global-pass note in assets/teardown-rhode.css for the derivation. */
  --nav-tear-h:24px;
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:calc(69px - .558 * var(--nav-tear-h));
  transition:box-shadow .3s,border-color .3s;
  background-color:var(--nav-bg);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  border-bottom:1px solid transparent;
  /* pinned: .btn-cta and .nav-link carry no line-height of their own, so they
     inherited each host page's body metric and the CTA measured anywhere from
     34px to 40.4px across the five. */
  font-family:var(--nav-sans);line-height:1.65}
@media(max-width:640px){.nav{--nav-tear-h:18px}}
.nav.scrolled{border-bottom-color:var(--nav-line);
  box-shadow:0 8px 18px -11px rgba(0,0,0,.53)}
/* the content box stays 68px and overflows the shorter painted bar, so
   the raised strip supplies the last stretch of paper; z-index 6 keeps
   the CTA and its shadow above the strip (which is 5). */
.nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:68px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:6}
/* the host page may already own a .brand class (the tour's 3D-scene HUD does,
   with its own padding) — reset rather than inherit it. */
.nav .brand{display:flex;align-items:center;flex:0 0 auto;height:68px;
  padding:0;margin:0;gap:0;background:none;border:0;text-decoration:none}
.nav .brand img{display:block;width:auto;height:36px;max-width:208px;object-fit:contain}
.nav-actions{display:flex;align-items:center;gap:30px}
.nav-link{color:var(--nav-ink);font-size:.92rem;text-decoration:none;transition:color .18s ease}
.nav-link:hover{color:#fff}
.nav-link[aria-current="page"]{color:#fff}
.nav .btn-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px;
  font-size:.85rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  background:var(--nav-brand);color:#050a12;white-space:nowrap;
  /* BATCH (V1-F5): the §8 nav-CTA spec is a blur-free hard offset. The
     de-glow pass had replaced it with a soft ambient shadow, making this the
     only button in the theme without the analog signature. Edited HERE rather
     than appended: this rule is `.nav .btn-cta` (0,2,0) and a later bare
     `.btn-cta` (0,1,0) loses to it silently. */
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
  transform:rotate(-.6deg);transition:box-shadow .18s ease,transform .18s ease}
.nav .btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}
.nav .dd{position:relative}
/* `font:inherit` is a SHORTHAND and resets font-size, so it has to come
   first — after `font-size` it silently put the trigger back to the button's
   16px while the sibling .nav-links stayed at .92rem (V6-2). */
.dd-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--nav-ink);
  font:inherit;font-size:.92rem;border:0;background:none;cursor:pointer;transition:color .18s ease}
.dd-trigger:hover,.dd:hover .dd-trigger,.dd.open .dd-trigger,.dd:focus-within .dd-trigger{color:#fff}
.dd-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.dd:hover .dd-trigger svg,.dd.open .dd-trigger svg,.dd:focus-within .dd-trigger svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:302px;padding:8px;
  border:1px solid var(--nav-line);border-radius:12px;background:rgba(11,15,21,.98);
  box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(66,177,255,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70}
.dd:hover .dd-panel,.dd.open .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd-head{font-family:"FLBold","Arial Black",sans-serif;font-size:.74rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--nav-brand);padding:8px 12px 6px;
  transform:rotate(-.6deg);display:inline-block}
.dd-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px;
  text-decoration:none;transition:background .18s ease}
.dd-item:hover{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)}
.dd-item .ic{flex:0 0 26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(150deg,#123a63,#0a1a2e);border:1px solid rgba(66,177,255,.28);
  color:var(--nav-brand);font-family:var(--nav-label);font-size:.62rem;font-weight:700;margin-top:1px}
.dd-item .tt{display:block;color:var(--nav-ink);font-size:.86rem;font-weight:560;line-height:1.25}
.dd-item .ds{display:block;color:var(--nav-ink);font-size:.72rem;line-height:1.3;margin-top:3px}
.dd-item.now{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)}
.dd-item.now .tt{color:var(--nav-brand)}
.dd-item.now .ic{border-color:color-mix(in srgb,var(--nav-brand) 60%,transparent)}
/* the torn bottom edge. Same paper stock AND same darkening veil as the
   bar, both at background-attachment:fixed so the texture and the veil
   register to the viewport — that is what makes the strip a seamless
   continuation of the bar rather than a lighter band under it. */
.nav .tstrip--nav{position:absolute;left:0;right:0;top:100%;margin-top:-1px;
  height:var(--nav-tear-h);pointer-events:none;z-index:5;
  background-color:var(--nav-bg);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.408));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='31'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='31'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}
@media(max-width:880px){.nav-actions .nav-link,.nav-actions .dd{display:none}}
@media(max-width:480px){.nav .brand img{height:28px;max-width:158px}.nav .btn-cta{padding:9px 14px;font-size:.82rem}}

.dd-panel{
  border:0;border-radius:0;
  background-color:#14120d;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;
  padding:10px 8px 46px;
  box-shadow:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 20px 34px rgba(0,0,0,.5));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
  mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top;
}
/* numerals become little white paper tabs with ink on them — the house
   artifact — instead of navy gradient tiles with cyan type. */
.dd-item .ic{
  background:#f4f2e9;border:0;border-radius:2px;
  color:#141109;font-family:"FLBold","Arial Black",sans-serif;
  font-size:.68rem;letter-spacing:0;rotate:-1.5deg;
}
.dd-item:nth-child(odd) .ic{rotate:1.2deg}
/* the current-page row was a blue-tinted rounded slab, which reads as another
   soft UI card on paper. It becomes a torn-off paper marker instead: the row
   keeps the stock, the numeral tab goes full white, and the title takes the
   brand blue (legal here — the ground is dark). */
.dd-item.now{background:rgba(255,255,255,.06);border-radius:0}
.dd-item.now .ic{background:#fff;color:#141109}
.dd-item:hover{border-radius:0}

/* ---- BATCH · nav CTA lost the hard offset shadow (V1-F5) ----
   The de-glow pass replaced the brand's blur-free offset with a soft ambient
   `0 10px 30px -12px`, which BRAND-SYSTEM-INDEX §8 already flags as "worth
   revisiting" — it made the nav CTA the only button in the theme without the
   analog signature. Restored to the §8 nav-CTA spec exactly (2px 2px 0, and
   3px 4px 0 on hover — the small-button values, not the larger `.button`'s).
   Radius and tilt unchanged. */
.btn-cta{box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}