/**
 * Portfolio design tokens — shared type scale + layout (Apple-like hierarchy).
 * Load after portfolio-fonts.css; reference via var(--ds-*).
 */
:root {
  --ds-ink: #1d1d1f;
  --ds-muted: #6e6e73;
  --ds-line: rgba(210, 210, 215, 0.9);
  --ds-sf: "Avenir Next", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Primary reading — ~17px responsive (Apple product-page prose) */
  --ds-text-body: clamp(16px, 0.22vw + 15.1px, 17.5px);
  --ds-leading-body: 1.65;
  --ds-tracking-body: -0.016em;

  /* Hero / deck lead */
  --ds-text-lead: clamp(1.0625rem, 0.28vw + 0.98rem, 1.25rem);
  --ds-leading-lead: 1.55;
  --ds-tracking-lead: -0.014em;

  /* Section titles (case study H2) */
  --ds-text-section: clamp(1.35rem, 2.1vw + 1rem, 1.75rem);
  --ds-leading-section: 1.22;
  --ds-tracking-section: -0.022em;

  /* Supporting UI — header + footer primary chrome (nav links, footer links) */
  --ds-text-nav: 17px;
  --ds-text-caption: 13px;
  --ds-text-small: 12px;
  --ds-text-eyebrow: 11px;
  --ds-text-footnote: 13px;

  /*
   * Fixed global nav — floating glass chip: equal float padding + chip padding + row.
   * Keep in sync with SITE_NAV_* in components/nav-footer.jsx.
   */
  --ds-nav-float-pad: 9px;
  --ds-nav-chip-pad-y: 8px;
  --ds-nav-row-min: 52px;
  --ds-nav-offset: calc(
    var(--ds-nav-float-pad) + var(--ds-nav-chip-pad-y) +
    var(--ds-nav-row-min) + var(--ds-nav-chip-pad-y) +
    var(--ds-nav-float-pad)
  );

  /* Shells */
  --ds-shell-max: 1120px;
  --ds-case-layout-max: 1320px;
  --ds-case-sidenav-width: 248px;
  --ds-case-prose-max: 900px;
  --ds-hero-prose-max: 760px;

  /*
   * Fluid layout — gutters & rhythm scale with viewport (desktop ↔ mobile),
   * similar to polished portfolio sites that use min/max + vw clamps.
   */
  --ds-page-pad-x: max(1.25rem, min(5vw, 4rem));
  /* Nav inner / footer horizontal alignment with page content */
  --ds-nav-inline-pad: var(--ds-page-pad-x);
  /* Section vertical padding (work band, etc.) */
  --ds-space-section-y: clamp(2rem, 2.5vw + 1.1rem, 3.25rem);
  --ds-space-section-y-tight: clamp(1.35rem, 1.5vw + 0.65rem, 1.85rem);
  /* Home hero display — smooth headline scale */
  --ds-text-display: clamp(2rem, 1.2rem + 3.15vw, 3.65rem);
}

/*
 * Fallback global nav (pre-React / no-JS) — floating glass chip, matches GlobalNav.
 */
.fallback-gnav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200;
  min-height: var(--ds-nav-offset);
  padding: var(--ds-nav-float-pad) var(--ds-page-pad-x);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.fallback-gnav-chip {
  display: inline-flex;
  align-items: center;
  position: relative;
  max-width: min(920px, calc(100vw - 2 * var(--ds-page-pad-x)));
  padding: var(--ds-nav-chip-pad-y) 10px;
  border-radius: 9999px;
  gap: clamp(12px, 2vw, 24px);
  background: rgba(252, 252, 254, 0.86);
  border: 1px solid rgba(210, 210, 215, 0.75);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 10px 40px rgba(20, 42, 62, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  box-sizing: border-box;
  pointer-events: auto;
}
.fallback-gnav-chip--wide {
  width: min(920px, calc(100vw - 2 * var(--ds-page-pad-x)));
}
.fallback-gnav-chip--wide .fallback-gnav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fallback-gnav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--ds-sf);
  font-size: var(--ds-text-nav);
  font-weight: 500;
  letter-spacing: -0.014em;
  color: #86868b;
  text-decoration: none;
  padding: 10px 14px 10px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}
.fallback-gnav-back:hover {
  color: var(--ds-ink);
  background: rgba(0, 0, 0, 0.045);
}
.fallback-gnav-links a {
  color: var(--ds-ink);
  text-decoration: none;
  opacity: 0.82;
  padding: 11px 16px;
  border-radius: 9999px;
  font-family: var(--ds-sf);
  font-size: var(--ds-text-nav);
  letter-spacing: -0.012em;
  font-weight: 500;
  white-space: nowrap;
}
.fallback-gnav-links a:hover {
  opacity: 0.48;
}
.fallback-gnav-chip > a:not(.fallback-gnav-back) {
  color: var(--ds-ink);
  text-decoration: none;
  opacity: 0.82;
  padding: 11px 16px;
  border-radius: 9999px;
  font-family: var(--ds-sf);
  font-size: var(--ds-text-nav);
  letter-spacing: -0.012em;
  font-weight: 500;
  white-space: nowrap;
}
.fallback-gnav-chip > a:not(.fallback-gnav-back):hover {
  opacity: 0.48;
}
.fallback-gnav-chip a[aria-current="page"]:not(.fallback-gnav-back) {
  opacity: 1;
  color: var(--ds-ink);
  background: rgba(0, 0, 0, 0.075);
}
.fallback-gnav-links a[aria-current="page"] {
  opacity: 1;
  color: var(--ds-ink);
  background: rgba(0, 0, 0, 0.075);
}