/* Original navigation typography, revealed within the same centred masthead. */
[data-drop-nav] .menu-toggle {
  display: block;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
@media (min-width: 960px) {
  [data-drop-nav] { grid-template-columns: 1fr auto 1fr; }
  [data-drop-nav] .nav {
    display: flex;
    gap: clamp(.6rem, 1.1vw, 1.7rem);
    visibility: hidden;
    pointer-events: none;
  }
  [data-drop-nav] .nav-right { padding-right: 5rem; }
  [data-drop-nav] .nav a {
    opacity: 0;
    transform: translateY(-1.4rem);
    transition: opacity .35s, transform .5s var(--ease-soft), border-color .3s;
    font-size: clamp(.65rem, .75vw, .85rem);
    letter-spacing: .18em;
    white-space: nowrap;
  }
  [data-drop-nav].nav-revealed .nav { visibility: visible; pointer-events: auto; }
  [data-drop-nav].nav-revealed .nav a { opacity: 1; transform: translateY(0); }
  .nav-revealed .nav a:nth-child(2) { transition-delay: .05s; }
  .nav-revealed .nav a:nth-child(3) { transition-delay: .1s; }
  .nav-revealed .nav a:nth-child(4) { transition-delay: .15s; }
  .nav-revealed .nav a:nth-child(5) { transition-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  [data-drop-nav] .nav a { transition: none; transform: none; }
}

/* A persistent glass invitation at the right edge of the screen. */
.floating-start {
  position: fixed;
  z-index: 55;
  top: auto;
  bottom: max(var(--start-button-bottom, 24px), calc(env(safe-area-inset-bottom, 0px) + 16px));
  right: 0;
  transform: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid #ffffff80;
  border-right: 0;
  border-radius: 2rem 0 0 2rem;
  background: rgba(246, 244, 240, .76);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 .3rem 1.5rem #00000015, inset 0 1px #ffffff90;
  color: var(--ink);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .25s, padding .25s;
}
.floating-start span:last-child { color: var(--accent); font-size: 1.25rem; }
.floating-start:hover { background: rgba(246, 244, 240, .95); padding-right: 1.6rem; }
html.intro .floating-start { visibility: hidden; }
@media (max-width: 680px) {
  .floating-start { padding: .7rem .6rem; gap: .4rem; font-size: .5rem; letter-spacing: .08em; }
}

[data-drop-nav] .menu-toggle[aria-expanded="true"] {
  text-transform: none;
  font-size: .85rem;
  letter-spacing: 0;
}

[data-drop-nav] .menu-toggle[aria-expanded="true"] { text-transform: none; font-size: .85rem; letter-spacing: 0; }
[data-drop-nav] .wordmark { font-size: clamp(1.25rem, 1.65vw, 1.8rem); }

.floating-start.is-footer-clear { visibility: hidden; pointer-events: none; }

/* Keep shared masthead geometry steady as scrolling reveals navigation.
   Resizing a sticky header can otherwise move the scroll position back across
   the reveal threshold and repeatedly restart its transitions. */
.site-header[data-drop-nav],
.site-header[data-drop-nav].scrolled {
  padding-top: 1.1rem;
  padding-bottom: 1rem;
}
[data-drop-nav] .tagline,
[data-drop-nav].scrolled .tagline {
  display: none;
}

/* Menu links appear without replaying slide/fade effects during scrolling. */
[data-drop-nav] .nav a,
[data-drop-nav].nav-revealed .nav a {
  transform: none;
  transition: border-color .2s;
  transition-delay: 0s;
}

/* Draw CTA arrows instead of allowing iOS to render the Unicode glyph as emoji. */
.floating-start span:last-child,
.doorway-enter-arrow { font-size: 0; }
.floating-start span:last-child { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.floating-start span:last-child::before,
.doorway-enter-arrow::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M5 5h14v14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M5 5h14v14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}