/* ==========================================================================
   Tino — global nav, Studios menu, phone sheet, studio local nav, footer.
   Rendered by js/nav.js. Requires css/tokens.css and css/base.css first.
   ========================================================================== */

/* ------------------------------------------------------------ Global bar */
.gnav {
  --gnav-h: 52px;
  position: sticky; top: 0; z-index: 100;
  height: var(--gnav-h);
  color: var(--ink);
}
.gnav::before {                      /* frosted ground (kept off the header itself
                                        so fixed children are not trapped by it) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.94);        /* white wins over dark studio panels */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color var(--d-2) var(--ease);
}
.gnav::after {                       /* hairline once scrolled */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--line); opacity: 0;
  transition: opacity var(--d-2) var(--ease);
  pointer-events: none;
}
.gnav.is-scrolled::after, .gnav.is-mega::after, .gnav.is-sheet::after { opacity: 1; }
.gnav.is-mega::before, .gnav.is-sheet::before { background: var(--surface); }

.gnav-bar { height: 100%; }
.gnav-inner {                       /* not positioned: the Apps menu sizes to the header */
  height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-6);
}

.gnav-home {
  display: inline-flex; align-items: center;
  height: 36px; margin-left: -6px; padding: 0 6px;
  border-radius: 8px; color: var(--ink);
}
.gnav-wm { display: block; width: 43px; height: 19px; overflow: visible; }

/* The nav and footer i are homes too (data-tino-wordmark). At this size they empty
   only while the dot is in flight or working (tino.js clears it 600 ms after the
   tool settles), and the ring is a deliberate open circle: 1.25px at 45% ink.
   Styled here as well as in tino.css, so pages without tino.js still draw a pink i. */
.gnav-wm .tino-i, .foot-wm .tino-i {
  fill: var(--pink); stroke: transparent; stroke-width: var(--tino-ring-w, 1.25px);
  vector-effect: non-scaling-stroke;
  transition: fill 160ms var(--ease), stroke 160ms var(--ease);
}
.is-tino-away .gnav-wm .tino-i, .is-tino-away .foot-wm .tino-i { fill: transparent; stroke: currentColor; stroke-width: 1.25px; stroke-opacity: 0.45; }

.gnav-home { justify-self: start; }
.gnav-links { display: flex; align-items: center; gap: 4px; height: 100%; }
.gnav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 12px;
  border: 0; background: none; border-radius: 8px;
  font-size: 14px; line-height: 1; font-weight: 450; letter-spacing: -0.005em;
  color: rgba(17, 17, 20, 0.72);
  white-space: nowrap;
  transition: color var(--d-1) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.gnav-link:hover,
.gnav-link[aria-current="page"],
.gnav-link.is-current,
.gnav-trigger[aria-expanded="true"] { color: var(--ink); }

.nav-chev {
  width: 9px; height: 6px; flex: none; margin-top: 1px; opacity: 0.7;
  transition: transform var(--d-3) var(--ease-spring);
}
.gnav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

.gnav-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.gnav-dl {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-size: 13px; line-height: 1; font-weight: var(--w-medium); letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color var(--d-2) var(--ease), transform var(--d-2) var(--ease-snap);
}
.gnav-dl:hover { background: #2A2A30; }
.gnav-dl:active { transform: scale(0.96); }

.gnav-home:focus-visible, .gnav-link:focus-visible, .gnav-menu:focus-visible { outline-offset: 0; }
.gnav-dl:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Menu button (phone only): two lines that become a close mark */
.gnav-menu {
  display: none;
  width: 40px; height: 40px; margin-right: -10px; padding: 0;
  border: 0; background: none; border-radius: 10px; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.gnav-menu-glyph { position: relative; display: block; width: 18px; height: 12px; margin: 0 auto; }
.gnav-menu-glyph span {
  position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform var(--d-3) var(--ease-spring), top var(--d-3) var(--ease-out);
}
.gnav-menu-glyph span:first-child { top: 2.5px; }
.gnav-menu-glyph span:last-child  { top: 8px; }
.gnav-menu[aria-expanded="true"] .gnav-menu-glyph span { top: 5.25px; }
.gnav-menu[aria-expanded="true"] .gnav-menu-glyph span:first-child { transform: rotate(45deg); }
.gnav-menu[aria-expanded="true"] .gnav-menu-glyph span:last-child  { transform: rotate(-45deg); }

/* --------------------------------------------------------- Studios menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(17, 17, 20, 0.14);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition:
    opacity 200ms var(--ease),
    transform 260ms var(--ease-spring),
    visibility 0s linear 260ms;
}
.mega[data-open="true"] {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 200ms var(--ease), transform 260ms var(--spring, var(--ease-spring)), visibility 0s;
}
.mega-wrap { padding-top: 28px; padding-bottom: 28px; }
/* Centred under the centred links: the two groups and the bottom row share one
   720px measure, so the menu reads as anchored to the trigger, not to the gutter.
   The rows' 12px inner padding hangs outside that measure, so icons and labels
   line up with the "Download Tino" link below. */
.mega-groups {
  display: grid; grid-template-columns: 336px 336px;
  column-gap: 48px; row-gap: 20px;
  width: calc(336px * 2 + 48px + 24px);
  margin-inline: auto;
}
.mega-label {
  margin: 0 0 8px; padding-left: 12px;
  font-size: 12px; line-height: 16px; font-weight: var(--w-medium); letter-spacing: 0.01em;
  color: var(--ink-3);
}
.mega-group li + li { margin-top: 2px; }
.mega-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 6px; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 12px;
  transition: background-color var(--d-1) var(--ease);
}
.mega-item:hover, .mega-item[aria-current="page"] { background: var(--surface-2); }
.mega-item .nav-icon { width: 32px; height: 32px; }
.mega-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-name { font-size: 14px; line-height: 18px; font-weight: var(--w-semibold); letter-spacing: -0.006em; color: var(--ink); }
.mega-line { font-size: 13px; line-height: 17px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The whole row is the link: a quiet chevron appears on hover and focus only. */
.mega-item .nav-chev-r { width: 6px; height: 10px; color: var(--ink-3); opacity: 0; transform: translateX(-3px); transition: opacity var(--d-1) var(--ease), transform var(--d-2) var(--ease-out); }
.mega-item:hover .nav-chev-r, .mega-item:focus-visible .nav-chev-r { opacity: 1; transform: none; }

/* One quiet bottom row under both groups: the way to get Tino. On the page grid. */
.mega-get {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  width: calc(336px * 2 + 48px); max-width: 100%;
  margin: 16px auto 0; padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 13px; line-height: 18px;
}
.mega-get .btn-link { font-size: 14px; }
.mega-note { color: var(--ink-3); }
@media (max-width: 900px) {
  .mega-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; margin-inline: -12px; }
  .mega-get { width: auto; }
}
.mega-item:focus-visible { outline-offset: -2px; border-radius: 12px; }

/* Page behind the open menu goes soft and quiet */
.nav-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(245, 245, 247, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
}
.nav-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease), visibility 0s; }

/* ---------------------------------------------------------- Phone sheet */
.sheet { display: none; }

@media (max-width: 733px) {
  .gnav { --gnav-h: 48px; }
  .gnav-inner { grid-template-columns: 1fr auto; }
  .gnav-links { display: none; }
  .gnav-menu { display: inline-flex; align-items: center; justify-content: center; }
  .gnav-end { gap: 6px; }
  .gnav-dl { position: relative; height: 32px; padding: 0 14px; font-size: 13px; }
  .gnav-dl::after { content: ""; position: absolute; inset: -6px -4px; }   /* 44px hit area */
  .gnav-menu { width: 44px; height: 44px; margin-right: -12px; }
  .nav-scrim { display: none; }

  .sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; top: var(--sheet-top, 48px); bottom: 0;
    background: var(--surface);
    visibility: hidden; opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path 380ms var(--ease-out),
      opacity 200ms var(--ease),
      visibility 0s linear 380ms;
  }
  .sheet[data-open="true"] {
    visibility: visible; opacity: 1; clip-path: inset(0 0 0 0);
    transition: clip-path 420ms var(--ease-out), opacity 160ms var(--ease), visibility 0s;
  }
  .sheet-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 24px; }
  .sheet-list > li {
    opacity: 0; transform: translateY(-6px);
    transition: opacity 240ms var(--ease), transform 320ms var(--ease-out);
  }
  .sheet[data-open="true"] .sheet-list > li { opacity: 1; transform: none; }
  .sheet[data-open="true"] .sheet-list > li:nth-child(2) { transition-delay: 30ms; }
  .sheet[data-open="true"] .sheet-list > li:nth-child(3) { transition-delay: 60ms; }
  .sheet[data-open="true"] .sheet-list > li:nth-child(4) { transition-delay: 80ms; }
  .sheet[data-open="true"] .sheet-list > li:nth-child(5) { transition-delay: 100ms; }
  .sheet[data-open="true"] .sheet-list > li:nth-child(6) { transition-delay: 120ms; }

  .sheet-link {
    display: flex; align-items: center; min-height: 52px;
    font-size: 20px; line-height: 1.2; font-weight: var(--w-semibold); letter-spacing: -0.016em;
    color: var(--ink);
  }
  .sheet-link[aria-current="page"]::after, .sheet-head.is-current::after {
    content: ""; width: 5px; height: 5px; margin-left: 10px; border-radius: 50%; background: var(--ink-4);
  }
  .sheet-head { min-height: 44px; padding-top: 8px; color: var(--ink-3); font-size: 13px; font-weight: var(--w-medium); letter-spacing: 0.01em; }
  .sheet-head.is-current::after { display: none; }
  .sheet-list > li { border-bottom: 1px solid var(--line-2); }
  .sheet-group { padding: 0 0 6px; }
  .sheet-apps li + li { border-top: 1px solid var(--line-2); margin-left: 40px; }
  .sheet-apps li + li .sheet-app { margin-left: -40px; }
  .sheet-app {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 8px; align-items: center; gap: 12px;
    min-height: 52px;
  }
  .sheet-app .nav-icon { width: 28px; height: 28px; }
  .sheet-app-name { font-size: 17px; line-height: 1.2; font-weight: var(--w-medium); letter-spacing: -0.01em; color: var(--ink); }
  .sheet-app-line { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
  .sheet-app[aria-current="page"] .sheet-app-name { font-weight: var(--w-semibold); }
  .nav-chev-r { width: 6px; height: 10px; color: var(--ink-4); display: block; }
  .sheet-link:focus-visible, .sheet-app:focus-visible { outline-offset: 2px; }

  .sheet-foot {
    flex: none;
    padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-2);
    background: var(--surface);
    text-align: center;
  }
  .sheet-dl { width: 100%; }
  .sheet-note { margin-top: 10px; font-size: 13px; line-height: 1.3; color: var(--ink-3); }
}

html.nav-locked, html.nav-locked body { overflow: hidden; }

/* ------------------------------------------------------- Product local nav */
/* The Apple pattern: on a page with a product bar, the global bar scrolls away with
   the page and only the product bar stays stuck (top: 0), so the studio windows get
   the room and the stuck state shows a single CTA pill (the product bar's). */
html.has-lnav { scroll-padding-top: calc(48px + 16px); }
html.has-lnav .gnav { position: relative; }
.lnav {
  position: sticky; top: 0; z-index: 95;
  height: 48px;
}
.lnav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.94);        /* white wins over dark studio panels */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.lnav-inner { position: relative; height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.lnav-title {
  margin-right: auto; margin-left: -6px; padding: 4px 6px; border-radius: 8px;
  font-size: 17px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -0.018em; color: var(--ink);
  white-space: nowrap;
}
.lnav-toggle { display: none; }
.lnav-links { display: flex; align-items: center; gap: 2px; }
.lnav-link {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px;
  font-size: 13px; line-height: 1; letter-spacing: -0.003em; color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--d-1) var(--ease);
}
.lnav-link:hover { color: var(--ink); }
.lnav-link[aria-current="true"] { color: var(--ink); }
/* On Movie and Deck the local bar carries "Download Tino" (the global pill steps
   aside, as on apple.com). On the coming studios the local bar holds a secondary
   "Notify me", so the global Download stays in the bar. */
html.lnav-dl .gnav-dl { display: none; }
/* Before launch the coming studios' bar asks too ("Notify me"), so the global pill steps
   aside there as well: one ask in the first screen. At launch the global Download returns. */
html.pre-launch.has-lnav .gnav-dl { display: none; }
.lnav-cta {
  position: relative;
  display: inline-flex; align-items: center; flex: none;
  height: 28px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-size: 12px; line-height: 1; font-weight: var(--w-medium); letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color var(--d-2) var(--ease), transform var(--d-2) var(--ease-snap);
}
.lnav-cta:hover { background: #2A2A30; }
.lnav-cta.is-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lnav-cta.is-secondary:hover { background: var(--surface-2); }
.lnav-cta:active { transform: scale(0.96); }
.lnav-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lnav-link:focus-visible, .lnav-title:focus-visible, .lnav-toggle:focus-visible { outline-offset: 0; }

@media (max-width: 733px) {
  .lnav-title { display: none; }
  .lnav-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: auto; margin-left: -6px; height: 36px; padding: 0 6px;
    border: 0; background: none; border-radius: 8px;
    font-size: 17px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -0.018em; color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .lnav-toggle .nav-chev { width: 10px; height: 6px; margin-top: 2px; opacity: 0.55; }
  .lnav-toggle[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
  .lnav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: block;
    padding: 6px var(--gutter) 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(17, 17, 20, 0.16);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 180ms var(--ease), transform 260ms var(--ease-spring), visibility 0s linear 260ms;
  }
  .lnav.is-open .lnav-links { visibility: visible; opacity: 1; transform: none; transition: opacity 180ms var(--ease), transform 260ms var(--ease-spring), visibility 0s; }
  .lnav-links li + li { border-top: 1px solid var(--line-2); }
  .lnav.is-open .lnav-links { box-shadow: 0 12px 32px rgba(17, 17, 20, 0.10); }
  /* The page under the open list steps back; a tap on it closes the list (nav.js). */
  .lnav::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--lnav-bottom, 48px); z-index: -1;
    background: rgba(17, 17, 20, 0.18);
    opacity: 0; visibility: hidden;
    transition: opacity 200ms var(--ease), visibility 0s linear 200ms;
  }
  .lnav.is-open::after { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease), visibility 0s; }
  .lnav-link { display: flex; height: 48px; padding: 0; font-size: 17px; color: var(--ink); }
  .lnav-link[aria-current="true"] { font-weight: var(--w-semibold); }
  .lnav-cta { height: 32px; padding: 0 14px; font-size: 13px; }
  .lnav-cta::after { content: ""; position: absolute; inset: -6px -4px; }   /* 44px hit area */
}

/* ------------------------------------------------------------------ Footer */
.foot {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px; line-height: 18px;
  padding: 48px 0 40px;
}
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; padding-bottom: 36px; }
.foot-h { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: var(--w-semibold); letter-spacing: 0.005em; color: var(--ink); }
.foot-col li + li { margin-top: 9px; }
.foot-col a { color: var(--ink-2); border-radius: 3px; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.foot-tag {
  display: inline-block; margin-left: 4px; padding: 0 6px; height: 17px; line-height: 17px;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 11px; font-weight: var(--w-medium); letter-spacing: 0.01em; color: var(--ink-3);
  vertical-align: 1px;
}
.foot-base {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.foot-left, .foot-right { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.foot-note { font-size: var(--t-12); color: var(--ink-3); }
.foot-right span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 16px 0 0; border-radius: 50%; background: var(--ink-4); vertical-align: middle; }
.foot-right span + span { display: inline-flex; align-items: center; }
.foot-home { display: inline-flex; color: var(--ink); border-radius: 4px; }
.foot-wm { display: block; width: 34px; height: 15px; overflow: visible; }
.foot-legal { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--ink-3); }

@media (min-width: 734px) and (max-width: 1068px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 733px) {
  .foot { padding: 36px 0 32px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding-bottom: 24px; }
  .foot-h { margin-bottom: 2px; }
  .foot-col li + li { margin-top: 0; }
  .foot-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-col li { display: flex; align-items: center; flex-wrap: wrap; column-gap: 2px; }
  .foot-home { padding: 12px 6px; margin: -12px -6px; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mega, .mega[data-open="true"] { transform: none; }
  .sheet, .sheet[data-open="true"] { clip-path: none; }
  .sheet-list > li { transform: none; }
  .lnav-links { transform: none !important; }
}

/* The open sheet carries its own Download button; the bar's pill steps back */
@media (max-width: 733px) {
  .gnav-dl { transition: opacity var(--d-2) var(--ease), visibility 0s, background-color var(--d-2) var(--ease); }
  .gnav.is-sheet .gnav-dl { opacity: 0; visibility: hidden; transition: opacity var(--d-2) var(--ease), visibility 0s linear var(--d-2); }
}

/* Before launch the main buttons ask to be told ("Get notified"), so they carry no
   download glyph. The class is baked on <html> by tools/chrome.mjs and kept by nav.js. */
html.pre-launch [data-cta-download] .btn-glyph { display: none; }

/* ------------------------------------------------------ Over a dark band
   Dark on the site only ever means "inside a studio". While a dark band
   ([data-ground="dark"], or a .studio-band's studio) holds the middle of the
   viewport, nav.js puts .is-dark on the global and local bars: the same
   treatment the home sequence uses when it steps inside (html.nav-dim, below). An open
   Studios menu, phone sheet or local list stays light: those are surfaces. */
.gnav::before, .lnav::before { transition: background-color 240ms var(--ease), border-color 240ms var(--ease); }
.gnav::after { transition: opacity var(--d-2) var(--ease), background-color 240ms var(--ease); }
.gnav-home, .gnav-menu, .lnav-title, .lnav-toggle { transition: color 240ms var(--ease); }
.gnav-link, .lnav-link { transition: color 240ms var(--ease); }
.gnav-dl, .lnav-cta { transition: background-color 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease), transform var(--d-2) var(--ease-snap); }

.gnav.is-dark:not(.is-mega):not(.is-sheet)::before { background: rgba(14, 14, 16, 0.72); }
.gnav.is-dark:not(.is-mega):not(.is-sheet)::after { background: rgba(255, 255, 255, 0.08); }
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-home,
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-menu { color: #F5F5F7; }
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-link { color: rgba(245, 245, 247, 0.72); }
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-link:hover,
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-link.is-current,
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-link[aria-current="page"] { color: #F5F5F7; }
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-dl { background: #F5F5F7; color: #111114; }
.gnav.is-dark:not(.is-mega):not(.is-sheet) .gnav-dl:hover { background: #FFFFFF; }

.lnav.is-dark:not(.is-open)::before { background: rgba(14, 14, 16, 0.72); border-bottom-color: rgba(255, 255, 255, 0.08); }
.lnav.is-dark:not(.is-open) .lnav-title,
.lnav.is-dark:not(.is-open) .lnav-toggle { color: #F5F5F7; }
.lnav.is-dark .lnav-cta { background: #F5F5F7; color: #111114; }
.lnav.is-dark .lnav-cta:hover { background: #FFFFFF; }
.lnav.is-dark .lnav-cta.is-secondary { background: transparent; color: #F5F5F7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.lnav.is-dark .lnav-cta.is-secondary:hover { background: rgba(255, 255, 255, 0.08); }
@media (min-width: 734px) {          /* on phones the links live in a light dropdown */
  .lnav.is-dark .lnav-link { color: rgba(245, 245, 247, 0.72); }
  .lnav.is-dark .lnav-link:hover, .lnav.is-dark .lnav-link[aria-current="true"] { color: #F5F5F7; }
}

/* ------------------------------------------------------- Nav dim (home move)
   The nav's supported dark state for a page that steps inside a studio as it scrolls
   (the home sequence, js/home.js). Two inputs, both on <html>:
     .nav-dim               stepped: the bars as over a studio (also the reduced-motion stills)
     .sq-live + --sq-nav    continuous: 0 light .. 1 dark, set every frame of the move, so the
                            nav is never a light bar over a dark room or the reverse
   An open Studios menu or phone sheet stays light: those are surfaces. */
html.nav-dim .gnav:not(.is-mega):not(.is-sheet)::before { background: rgba(14, 14, 16, 0.94); }
html.nav-dim .gnav:not(.is-mega):not(.is-sheet)::after { background: rgba(255, 255, 255, 0.08); }
html.nav-dim .gnav:not(.is-mega):not(.is-sheet) .gnav-home,
html.nav-dim .gnav:not(.is-mega):not(.is-sheet) .gnav-menu { color: #F5F5F7; }
html.nav-dim .gnav:not(.is-mega):not(.is-sheet) .gnav-link { color: rgba(245, 245, 247, 0.72); }
html.nav-dim .gnav:not(.is-mega):not(.is-sheet) .gnav-link:hover { color: #F5F5F7; }
html.nav-dim .gnav:not(.is-mega):not(.is-sheet) .gnav-dl { background: #F5F5F7; color: #111114; }
html.nav-dim:not(.sq-live) .gnav-home, html.nav-dim:not(.sq-live) .gnav-link, html.nav-dim:not(.sq-live) .gnav-menu { transition: color 200ms var(--ease); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  html.sq-live .gnav:not(.is-mega):not(.is-sheet)::before {
    background: color-mix(in srgb, rgba(14, 14, 16, 0.94) calc(var(--sq-nav, 0) * 100%), rgba(255, 255, 255, 0.94));
    transition: none;
  }
  html.sq-live .gnav:not(.is-mega):not(.is-sheet)::after { background: color-mix(in srgb, rgba(255, 255, 255, 0.08) calc(var(--sq-nav, 0) * 100%), var(--line)); }
  html.sq-live .gnav:not(.is-mega):not(.is-sheet) .gnav-home,
  html.sq-live .gnav:not(.is-mega):not(.is-sheet) .gnav-menu { color: color-mix(in srgb, #F5F5F7 calc(var(--sq-nav, 0) * 100%), #111114); transition: none; }
  html.sq-live .gnav:not(.is-mega):not(.is-sheet) .gnav-link { color: color-mix(in srgb, rgba(245, 245, 247, 0.72) calc(var(--sq-nav, 0) * 100%), rgba(17, 17, 20, 0.72)); transition: none; }
  html.sq-live .gnav:not(.is-mega):not(.is-sheet) .gnav-link:hover,
  html.sq-live .gnav:not(.is-mega):not(.is-sheet) .gnav-trigger[aria-expanded="true"] { color: color-mix(in srgb, #F5F5F7 calc(var(--sq-nav, 0) * 100%), #111114); transition: color var(--d-1) var(--ease); }
}
/* while the home sequence drives the nav, the pill flips with it, frame for frame (no colour transition of its own) */
html.sq-live .gnav-dl { transition: transform var(--d-2) var(--ease-snap); }