/* =====================================================================
   x-shell.css — SHELL group: #progress · #nav · #mobMenu · marquee · footer ·
   .quick-contact pill · #vhPop toast. Owner: shell.
   Adapted from .design-lab/noir/noir.css 219-259 (nav/menu), 308-316 (marquee),
   475-504 (footer, pill, win) + Vision menu head / email CTA.
   ===================================================================== */

/* ---- progress (IIFE writes style.width) ---- */
#progress { position: fixed; left: 0; top: 0; z-index: var(--x-z-progress); width: 0; height: 2px; background: var(--x-accent); pointer-events: none; }

/* ---- nav ---- */
.x-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--x-z-nav); height: var(--x-nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--x-gutter);
  transition: transform 0.7s var(--x-ease-out), background-color 0.5s;
}
.x-nav::after { content: ""; position: absolute; left: var(--x-gutter); right: var(--x-gutter); bottom: 0; height: 1px; background: var(--x-line); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--x-ease-out); }
.x-nav.scrolled { background: color-mix(in srgb, var(--x-bg) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.x-nav.scrolled::after { transform: scaleX(1); }
.x-nav.is-hidden { transform: translateY(-100%); }
html.x-menu-open .x-nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
html.x-menu-open .x-nav::after { transform: scaleX(0); }
.x-nav-logo { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; align-items: center; }
.x-nav-mark { font-weight: 850; font-stretch: 125%; font-size: 1.32rem; letter-spacing: -0.04em; line-height: 1; }
.x-nav-sub { font-family: var(--x-font-serif); font-style: italic; font-size: 1.08rem; color: var(--x-ink-2); }
.x-nav-links { display: flex; gap: clamp(18px, 2.4vw, 38px); position: absolute; left: 50%; transform: translateX(-50%); list-style: none; margin: 0; padding: 0; }
.x-roll { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; font-size: 0.875rem; font-weight: 540; font-stretch: 106%; }
.x-roll > span { display: inline-block; transition: transform 0.6s var(--x-ease-out); }
.x-roll > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; font-family: var(--x-font-serif); font-style: italic; font-size: 1.12em; }
.x-roll:hover > span, .x-roll:focus-visible > span { transform: translateY(-100%); }
.x-roll { transition: padding-left 0.4s var(--x-ease-out); }
.x-roll.is-active { padding-left: 11px; }    /* keep overflow hidden — the serif duplicate must never peek */
.x-roll.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--x-accent); }
.x-nav-end { display: flex; align-items: center; gap: 12px; }
.x-nav-time { white-space: nowrap; margin-right: 4px; }
.x-theme-ic { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform 0.8s var(--x-ease-out); }
html[data-theme="light"] .x-theme-ic { transform: rotate(180deg); }
.x-menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--x-r-pill); box-shadow: inset 0 0 0 1px var(--x-line-2); font-size: 0.875rem; font-weight: 620; font-stretch: 108%; }
.x-menu-lines { display: grid; gap: 4px; width: 16px; }
.x-menu-lines i { display: block; height: 1.5px; background: currentColor; transition: transform 0.5s var(--x-ease-out); }
html.x-menu-open .x-menu-lines i:first-child { transform: translateY(2.75px) rotate(45deg); }
html.x-menu-open .x-menu-lines i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ---- mobile menu (#mobMenu.mob-menu, .open toggled by the IIFE NAV block) ---- */
.mob-menu.x-menu {
  position: fixed; inset: 0; z-index: var(--x-z-menu); background: var(--x-bg); visibility: hidden;
  clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--x-ease-inout), visibility 0s linear 0.8s;
}
.mob-menu.x-menu.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.8s var(--x-ease-inout), visibility 0s; }
.x-menu-inner { height: 100%; overflow-y: auto; display: flex; flex-direction: column; padding: calc(var(--x-nav-h) + 16px) var(--x-gutter) calc(24px + env(safe-area-inset-bottom)); }
.x-menu-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--x-line); }
.x-menu-links { display: flex; flex-direction: column; }
.x-menu-links a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0 8px; border-bottom: 1px solid var(--x-line); overflow: hidden; font-size: clamp(2.5rem, 12vw, 4rem); font-weight: 780; font-stretch: 112%; letter-spacing: -0.04em; line-height: 1; }
.x-menu-links a em { min-width: 1.7em; font-size: 0.36em; color: var(--x-accent-ink); letter-spacing: 0; }
.x-menu-links a > * { display: inline-block; transform: translateY(110%); transition: transform 1s var(--x-ease-out); }
.mob-menu.open .x-menu-links a > * { transform: none; }
.mob-menu.open .x-menu-links a:nth-child(1) > * { transition-delay: 0.30s; }
.mob-menu.open .x-menu-links a:nth-child(2) > * { transition-delay: 0.34s; }
.mob-menu.open .x-menu-links a:nth-child(3) > * { transition-delay: 0.38s; }
.mob-menu.open .x-menu-links a:nth-child(4) > * { transition-delay: 0.42s; }
.mob-menu.open .x-menu-links a:nth-child(5) > * { transition-delay: 0.46s; }
.mob-menu.open .x-menu-links a:nth-child(6) > * { transition-delay: 0.50s; }
.x-menu-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 16px; }
.x-menu-soc { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.x-menu-soc a { min-height: 44px; display: inline-flex; align-items: center; color: var(--x-ink-2); font-weight: 520; }
.x-menu-close { justify-self: start; min-height: 44px; }

/* ---- marquee ---- */
.x-marquee { position: relative; z-index: 2; overflow: hidden; overflow: clip; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); padding: 14px 0 clamp(18px, 2.4vw, 32px); background: var(--x-bg); }
.x-marquee-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 var(--x-gutter) 10px; }
.x-marquee-head a { min-height: 44px; }
.x-marquee-track { display: flex; width: max-content; will-change: transform; }
.x-marquee-set { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); padding-right: clamp(22px, 3vw, 48px); flex-shrink: 0; }
.x-marquee-set > span { font-size: clamp(2.4rem, 6vw, 6.2rem); font-weight: 800; font-stretch: 118%; letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.x-marquee-set > span.o { color: transparent; -webkit-text-stroke: 1.2px var(--x-ink-3); }
.x-star { display: inline-block; flex: none; width: clamp(1.2rem, 2.2vw, 2.2rem); aspect-ratio: 1; background: var(--x-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0c1.2 9.8 3.9 15.2 7 17.2 3.1 2 7.4 2.6 13 2.8-5.6.2-9.9.8-13 2.8-3.1 2-5.8 7.4-7 17.2-1.2-9.8-3.9-15.2-7-17.2C9.9 20.8 5.6 20.2 0 20c5.6-.2 9.9-.8 13-2.8C16.1 15.2 18.8 9.8 20 0z'/%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 40 40'%3E%3Cpath d='M20 0c1.2 9.8 3.9 15.2 7 17.2 3.1 2 7.4 2.6 13 2.8-5.6.2-9.9.8-13 2.8-3.1 2-5.8 7.4-7 17.2-1.2-9.8-3.9-15.2-7-17.2C9.9 20.8 5.6 20.2 0 20c5.6-.2 9.9-.8 13-2.8C16.1 15.2 18.8 9.8 20 0z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---- footer ---- */
.x-footer { position: relative; overflow: hidden; border-top: 1px solid var(--x-line); padding-top: 26px; background: var(--x-bg); }
.x-ft-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.ft-links { display: flex; gap: 8px; }
.ft-links a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--x-line-2); transition: box-shadow 0.3s, background-color 0.3s; }
.ft-links a:hover { box-shadow: inset 0 0 0 1px var(--x-ink); }
.ft-links a i { font-size: 1.05rem; width: auto; }     /* FA brand glyphs: fab fa-github / fa-linkedin-in / fa-x-twitter */
.x-ft-mark { margin-top: clamp(28px, 5vw, 64px); padding: 0 var(--x-gutter); height: 0.7em; line-height: 0.74; overflow: hidden;
  font-size: calc((min(100vw, var(--x-maxw)) - 2 * var(--x-gutter)) / 12.6); white-space: nowrap; text-align: center; }  /* JS refits exactly */
.x-ft-mark-in { display: inline-block; font-weight: 850; font-stretch: 125%; letter-spacing: -0.055em; word-spacing: 0.12em; text-transform: uppercase; color: var(--x-ink); }

/* ---- floating contact pill (.quick-contact) ---- */
.quick-contact.x-pill-fab {
  position: fixed; z-index: var(--x-z-pill); right: max(16px, calc(var(--x-gutter) * 0.75)); bottom: calc(18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 18px 0 7px; border-radius: var(--x-r-pill);
  background: var(--x-ink); color: var(--x-bg); font-weight: 620; font-size: 0.9rem; font-stretch: 106%; box-shadow: var(--x-shadow);
  transform: translateY(160%); transition: transform 0.8s var(--x-ease-out), background-color 0.4s, color 0.4s;
}
.quick-contact.x-pill-fab.is-in { transform: none; }
html.x-menu-open .quick-contact.x-pill-fab, html.x-locked .quick-contact.x-pill-fab { transform: translateY(160%); }
.quick-contact .x-pill-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--x-accent); }
.quick-contact .x-dot { background: var(--x-accent); }
.quick-contact.x-pill-fab:hover { background: var(--x-accent); color: var(--x-on-accent); }
.quick-contact.x-pill-fab:hover .x-dot { background: var(--x-on-accent); }
.quick-contact.x-pill-fab:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 3px; }

/* ---- recent-win toast (#vhPop) ---- */
.vh-pop.x-toast {
  position: fixed; z-index: var(--x-z-toast); left: max(16px, calc(var(--x-gutter) * 0.75)); bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 32px)); overflow: hidden; border-radius: var(--x-r-sm);
  background: var(--x-glass); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--x-shadow), inset 0 0 0 1px var(--x-line);
  opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--x-ease-out), transform 0.7s var(--x-ease-out);
}
.vh-pop.x-toast.open { opacity: 1; transform: none; }
.x-toast-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--x-line); }
.x-toast-bar .x-label { color: var(--x-accent-ink); display: inline-flex; align-items: center; gap: 8px; }
.x-toast-body { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 12px 14px 14px; }
.x-toast-media { position: relative; width: 88px; height: 88px; overflow: hidden; border-radius: var(--x-r-xs); --x-rc: 8px; }
.x-toast-media img { width: 100%; height: 100%; object-fit: cover; }
.x-toast-media .x-rc { z-index: 2; }
.vh-title { font-size: 1.15rem; font-weight: 700; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.15; }
.vh-meta { margin: 4px 0 8px; font-size: var(--x-fs-label); color: var(--x-ink-2); }
.vh-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--x-line); }
.vh-track i { position: absolute; inset: 0; background: var(--x-accent); transform-origin: left; transform: scaleX(0); }
.vh-pop.open .vh-track i { animation: x-countdown 10s linear forwards; }
.vh-pop.open:hover .vh-track i, .vh-pop.open:focus-within .vh-track i { animation-play-state: paused; }
@keyframes x-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- responsive ---- */
@media (max-width: 1180px) { .x-nav-time { display: none; } }
@media (max-width: 960px) {
  .x-nav-links, .x-nav-cta { display: none; }
  .x-menu-btn { display: inline-flex; }
}
@media (max-width: 760px) {
  .x-nav-sub { display: none; }
  .x-ft-row { flex-direction: column; align-items: flex-start; }
  /* phone: the wordmark stacks one word per line, the last line cropped at its baseline */
  .x-ft-mark { white-space: normal; text-align: left; height: 2.42em; line-height: 0.86; font-size: calc((100vw - 2 * var(--x-gutter)) / 4.9) !important; }
  .x-ft-mark-in { word-spacing: 0; }
  .quick-contact.x-pill-fab { padding: 0 7px; min-height: 52px; gap: 0; }
  .quick-contact.x-pill-fab .x-pill-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .quick-contact.x-pill-fab .x-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--x-ink); }
  .vh-pop.x-toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .x-toast-body { grid-template-columns: 64px 1fr; }
  .x-toast-k-long { display: none; }
  .x-toast-media { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .x-menu-links a > * { transform: none; } }