/* Shared base for Zenda site explorations
   ---------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* utility */
.mono { font-family: var(--font-mono); font-feature-settings: "ss02"; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hairline { border: 0; border-top: 1px solid var(--border); margin: 0; }
.dashline { border: 0; border-top: 1px dashed var(--slate-200); margin: 0; }

/* button — pills (single soft moment per the system) */
.zbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--zenda-black);
  background: var(--zenda-black);
  color: var(--zenda-white);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.zbtn:hover { background: var(--slate-800); }
.zbtn:active { transform: scale(0.98); }
.zbtn--magenta { background: var(--zenda-magenta); border-color: var(--zenda-magenta); color: #000; }
.zbtn--magenta:hover { background: #e74cba; }
.zbtn--ghost {
  background: transparent; color: var(--zenda-black);
  border: 1px solid var(--slate-200);
}
.zbtn--ghost:hover { background: var(--slate-50); border-color: var(--slate-300); }
.zbtn--ghost-dark {
  background: transparent; color: var(--zenda-white);
  border: 1px solid rgba(255,255,255,0.18);
}
.zbtn--ghost-dark:hover { background: rgba(255,255,255,0.06); }

/* nav (shared visual baseline; v2/v3 may override) */
.znav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px max(64px, calc((100% - 1280px) / 2));
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.znav__logo { display: flex; align-items: center; gap: 10px; }
.znav__logo img { height: 18px; }
.znav__links { display: flex; align-items: center; gap: 28px; }
.znav__links a {
  font-size: clamp(16px, 15.26px + 0.190vw, 18px); color: var(--fg-2); font-weight: 400;
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-standard);
}
.znav__links a:hover { color: var(--zenda-magenta); }
.znav-dd { position: relative; }
.znav-dd__toggle { display: inline-flex; align-items: center; gap: 6px; }
.znav-dd__toggle svg { transition: transform 200ms ease; }
.znav-dd:hover .znav-dd__toggle svg, .znav-dd:focus-within .znav-dd__toggle svg { transform: rotate(180deg); }
.znav-dd__panel {
  position: absolute; top: 100%; left: 50%; padding-top: 16px; transform: translate(-50%, 6px);
  opacity: 0; visibility: hidden; transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms; z-index: 60;
}
.znav-dd:hover .znav-dd__panel, .znav-dd:focus-within .znav-dd__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 180ms ease, transform 180ms ease;
}
.znav-dd__grid {
  display: grid; grid-template-columns: repeat(2, 280px); gap: 4px; padding: 12px;
  background: #fff; border: 1px solid var(--slate-100); border-radius: 8px; box-shadow: 0 16px 40px rgba(10,10,10,0.10);
}
.znav .znav__links .znav-dd__panel a.znav-dd__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 6px; color: var(--zenda-black); transition: background 160ms ease; }
.znav .znav__links .znav-dd__panel a.znav-dd__item:hover { background: var(--slate-50); color: var(--zenda-black); }
.znav-dd__item img { width: 32px; height: 32px; flex: 0 0 32px; }
.znav-dd__item > span { display: flex; flex-direction: column; gap: 4px; }
.znav-dd__item strong { font-size: 15px; font-weight: 600; color: var(--zenda-black); line-height: 1.25; }
.znav-dd__item strong + span { font-size: 13px; color: var(--slate-500); line-height: 1.4; }
.znav-dd__item:hover strong { color: var(--zenda-magenta); }

/* scroll-aware overlay nav:
   transparent + white over the hero, frosted-white once the hero content
   rises to meet it. Pages add .znav--overlay to .znav, ship two wordmarks
   (.logo-dark/.logo-light), and toggle .is-stuck on scroll. Everything
   cross-fades for a smooth transition. */
.znav--overlay {
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%);
  border-bottom-color: transparent;
  transition: background var(--dur-slow) var(--ease-standard),
              backdrop-filter var(--dur-slow) var(--ease-standard),
              -webkit-backdrop-filter var(--dur-slow) var(--ease-standard),
              border-color var(--dur-slow) var(--ease-standard);
}
.znav--overlay .znav__links a { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 0 16px rgba(0,0,0,0.4); transition: color var(--dur-slow) var(--ease-standard); }
.znav--overlay.is-stuck .znav__links a, .znav--overlay .znav__links .znav-dd__panel a, .znav--overlay .znav__links a.zbtn { text-shadow: none; }
.znav--overlay .znav__links a.cur,
.znav--overlay .znav__links a:hover { color: #fff; }
/* two wordmarks cross-fade (opacity) rather than display-swap */
.znav--overlay .znav__logo { position: relative; }
.znav--overlay .znav__logo img { transition: opacity var(--dur-slow) var(--ease-standard); }
.znav--overlay .znav__logo .logo-light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.znav--overlay .znav__logo .logo-dark { opacity: 0; }
.znav--overlay .znav__logo .logo-light { opacity: 1; }
.znav--overlay.is-stuck {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--slate-100);
}
.znav--overlay.is-stuck .znav__links a { color: var(--slate-700); }
.znav--overlay.is-stuck .znav__links a.cur { color: var(--zenda-magenta); }
.znav--overlay.is-stuck .znav__links a:hover { color: var(--zenda-magenta); }
.znav--overlay.is-stuck .znav__logo .logo-dark { opacity: 1; }
.znav--overlay.is-stuck .znav__logo .logo-light { opacity: 0; }

/* registered (R) marker */
.r { font-size: 0.55em; vertical-align: super; font-weight: 400; }

.znav__links > a, .znav-dd__toggle { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1200px) {
  .znav__links { gap: 20px; }
  .znav-dd__panel { left: auto; right: -190px; transform: translateY(6px); }
  .znav-dd:hover .znav-dd__panel, .znav-dd:focus-within .znav-dd__panel { transform: none; }
  .znav-dd__grid { grid-template-columns: repeat(2, 250px); }
}