/*
 * Critical shell for the BrandGuard and Universe routes.
 *
 * The full theme remains the source of truth and is enabled by
 * deferred-fonts.js after this small sheet has painted. Keep this layer
 * limited to first-viewport structure, typography fallbacks, and the
 * diagram reservation so it cannot drift into a second site-wide theme.
 *
 * Synchronization contract: scripts/check-critical-theme-drift.py documents
 * the shared selectors and properties that must stay aligned. Mobile fallback
 * geometry and load reservations are intentionally allowed to differ.
 */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 10rem;
}

body.askjamie-main {
  margin: 0;
  overflow-x: hidden;
  background: #f6f2ee;
  color: #2e2b29;
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Keep the first paint's header footprint aligned with the deferred theme. */
.askjamie-main .skip-link,
.askjamie-main .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.askjamie-main img {
  display: block;
  max-width: 100%;
  height: auto;
}

body.askjamie-main a {
  color: inherit;
  text-decoration: none;
}

.askjamie-main .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #f6f2ee;
  border-bottom: 1px solid #d7d7d7;
}

.askjamie-main .site-header > .container,
.askjamie-main .site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.askjamie-main .logo {
  display: flex;
  align-items: center;
}

.askjamie-main .logo img {
  width: 40px;
  height: 40px;
  border-radius: 0.8rem;
}

.askjamie-main .primary-nav {
  position: fixed;
  inset: 3.75rem 0 auto 0;
  z-index: 40;
  background: #f6f2ee;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transform: translateY(-120%);
}

.askjamie-main .primary-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 1rem 1.5rem 1.5rem;
  list-style: none;
}

.askjamie-main .primary-nav a {
  color: #2e2b29;
}

.askjamie-main .nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: rgba(246, 242, 238, 0.98);
}

.askjamie-main .nav-toggle .bar {
  display: block;
  width: 26px;
  height: 3px;
  margin: 4px 0;
  border-radius: 999px;
  background: #2e2b29;
}

.askjamie-main .site-specials--jamie {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-block: 0.75rem;
  padding: 0.45rem 1rem;
  background: #e4f0ee;
  font-size: 0.82rem;
  line-height: 1.4;
}

.askjamie-main .site-header .container {
  height: auto;
  min-height: 3.75rem;
  flex-wrap: wrap;
}

.askjamie-main .header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.askjamie-main .okh-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  background: transparent;
  color: #2e2b29;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
}

.askjamie-main .okh-search-trigger .okh-search-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.askjamie-main .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  flex-shrink: 0;
}

.askjamie-main .theme-toggle .tt-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.askjamie-main .glee-color-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
}

.askjamie-main .glee-color-toggle .tt-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .askjamie-main .okh-search-trigger kbd,
  .askjamie-main .okh-search-trigger .okh-search-label {
    display: none;
  }
}

.askjamie-main .site-specials--jamie .site-specials-link {
  min-width: 0;
}

/* This transition notice sits above the hero on BrandGuard routes. Reserve its
   themed box and text rhythm here so enabling the full theme does not push the
   breadcrumb and hero copy down after first paint. */
.askjamie-main .capability-transition {
  max-width: 1120px;
  margin: 1.5rem auto;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--color-surface, #fdfbf7);
  color: var(--color-fg, #2e2b29);
  border: 1px solid var(--color-border, #d7d7d7);
  border-inline-start: 4px solid #2d6f7e;
  border-radius: 12px;
}

.askjamie-main .capability-transition .eyebrow {
  margin: 0 0 1rem;
  color: var(--color-inline-link, #1f5a67);
  font-family: var(--font-accent, "Kalam", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.askjamie-main .capability-transition h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading, "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.askjamie-main .capability-transition p {
  margin: 0 0 1rem;
}

.askjamie-main .capability-transition p:last-of-type {
  margin-bottom: .5rem;
}

.askjamie-main .askjamie-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 2.5rem 0 2.75rem;
  overflow: hidden;
  background: none;
  color: #2e2b29;
}

.askjamie-main .askjamie-hero > .brand-stripes {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #007c84 0%, #007c84 20%,
    #76b2ba 20%, #76b2ba 40%,
    #f5ead9 40%, #f5ead9 60%,
    #d5ba9a 60%, #d5ba9a 80%,
    #69584c 80%, #69584c 100%
  );
  opacity: 0.6;
}

.askjamie-main .askjamie-paper {
  position: absolute;
  inset: 6% 10% 0;
  z-index: 0;
  pointer-events: none;
  background: #f6f2ee;
}

.askjamie-main .askjamie-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.askjamie-main .askjamie-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.askjamie-main .askjamie-hero-copy {
  min-width: 0;
  max-width: min(38rem, 100%);
  padding: 0 1.75rem;
  overflow-wrap: anywhere;
}

.askjamie-main .askjamie-hero-copy .eyebrow {
  margin: 0 0 0.75rem;
  color: var(--color-inline-link, #1f5a67);
  font-family: "Kalam", "Segoe UI", sans-serif;
  font-size: 0.95rem;
}

.askjamie-main .askjamie-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}

.askjamie-main .askjamie-breadcrumb .breadcrumb-label {
  white-space: nowrap;
}

.askjamie-main .askjamie-logo--crumb {
  display: inline-block;
  margin-bottom: 1rem;
}

.askjamie-main .askjamie-logo--crumb img {
  width: auto;
  max-width: 12rem;
  height: auto;
}

.askjamie-main .askjamie-hero-copy h1 {
  margin: 0 0 0.75rem;
  color: #2e2b29;
  font-family: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  line-height: 1.2;
}

.askjamie-main .askjamie-hero-copy .hero-subtitle {
  margin: 0 0 0.75rem;
  color: #4b5563;
  font-family: "Kalam", "Segoe UI", sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.askjamie-main .askjamie-hero-copy .hero-tagline,
.askjamie-main .askjamie-hero-copy .askjamie-hero-tagline {
  margin: 0 0 1.6rem;
  color: #6b6b6b;
}

.askjamie-main .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.askjamie-main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
}

.askjamie-main .btn-primary {
  background: linear-gradient(135deg, #2d6f7e, #3c8ea1);
  color: #f9fafb;
}

.askjamie-main .btn-quiet {
  border-color: #d7d7d7;
  color: #4b5563;
}

.askjamie-main .askjamie-hero-visual {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.askjamie-main .askjamie-hero--universe .askjamie-hero-visual {
  align-items: stretch;
}

.askjamie-main .askjamie-mermaid-shell {
  width: 100%;
  margin: 0;
}

.askjamie-main .mermaid-scroll-wrap {
  max-width: 100%;
  min-height: 14rem;
  overflow: hidden;
}

.askjamie-main .askjamie-hero--universe .mermaid-scroll-wrap {
  min-height: 22rem;
}

.askjamie-main .universe-map-group[data-map-node-count="4"] .mermaid-scroll-wrap {
  min-height: 22rem;
}

.askjamie-main .universe-map-group[data-map-node-count="5"] .mermaid-scroll-wrap {
  min-height: 17rem;
}

@media (max-width: 640px) {
  .askjamie-main .askjamie-hero--universe .mermaid-scroll-wrap {
    min-height: 18rem;
  }
}

.askjamie-main .askjamie-mermaid-shell .mermaid:not([data-universe-ready="1"]) {
  visibility: hidden;
  min-height: 2rem;
  font-size: 0;
}

.askjamie-main .askjamie-hero > .reveal-on-scroll {
  opacity: 1;
  transform: none;
}

@media (min-width: 900px) {
  .askjamie-main .askjamie-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.5rem;
  }

  .askjamie-main .askjamie-hero-copy {
    padding: 0 1.75rem;
  }

  .askjamie-main .askjamie-hero-visual {
    justify-content: flex-end;
  }
}

@media (min-width: 769px) {
  .askjamie-main .primary-nav {
    position: static;
    inset: auto;
    background: transparent;
    border-bottom: 0;
    transform: none;
  }

  .askjamie-main .primary-nav ul {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Keep the desktop dropdown out of header flow before the shared theme loads. */
  .askjamie-main .primary-nav .has-submenu {
    position: relative;
  }

  .askjamie-main .primary-nav .has-submenu > .submenu {
    position: absolute;
    display: none;
  }

  .askjamie-main .primary-nav .has-submenu:hover > .submenu,
  .askjamie-main .primary-nav .has-submenu:focus-within > .submenu {
    display: block;
  }

  .askjamie-main .nav-toggle {
    display: none;
  }
}

@media (max-width: 640px) {
  .askjamie-main .askjamie-hero {
    padding-top: 2rem;
  }

  .askjamie-main .site-specials--jamie {
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem;
  }
}

@media (max-width: 899px) {
  .askjamie-brandguard-page .askjamie-logo--crumb {
    margin-bottom: 0;
  }

  .askjamie-brandguard-page .askjamie-logo--crumb img {
    max-width: 7.5rem;
  }

  .askjamie-brandguard-page .askjamie-hero-copy {
    padding-inline: 0;
  }

  .askjamie-brandguard-page .askjamie-hero-copy .hero-tagline {
    max-width: 32rem;
  }

  .askjamie-brandguard-page .askjamie-breadcrumb .breadcrumb-label {
    min-width: 15.25rem;
  }

  .askjamie-brandguard-page .askjamie-hero-copy h1 {
    font-size: 2rem;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 340px) {
  .askjamie-main.askjamie-brandguard-page .askjamie-breadcrumb .breadcrumb-label,
  .askjamie-main:has(.brandguard-demo-notice) .askjamie-breadcrumb .breadcrumb-label {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .askjamie-main.askjamie-brandguard-page .askjamie-breadcrumb .breadcrumb-separator,
  .askjamie-main:has(.brandguard-demo-notice) .askjamie-breadcrumb .breadcrumb-separator {
    display: none;
  }
}

/* At 360px, keep fallback and deferred BrandGuard text on the same line counts
   without applying the 390px-specific tracking across narrower phone widths. */
@media (min-width: 350px) and (max-width: 370px) {
  /* Reserve the loaded font's line counts across narrower system fallbacks. */
  .askjamie-main.askjamie-brandguard-page .capability-transition > p:nth-of-type(2) {
    min-height: 9.6rem;
  }

  .askjamie-main.askjamie-brandguard-page .capability-transition > p:last-of-type {
    min-height: 3.2rem;
  }

  .askjamie-main.brandguard-lvmh-page .capability-transition > p:last-of-type {
    min-height: 3.2rem;
  }

  .askjamie-main.brandguard-lvmh-page .askjamie-hero-copy .hero-tagline {
    min-height: 4.8rem;
  }

  .askjamie-main.askjamie-brandguard-page .capability-transition h2 {
    letter-spacing: -0.05em;
  }

  .askjamie-main.askjamie-brandguard-page .askjamie-hero-copy h1 {
    letter-spacing: -0.08em;
  }

  .askjamie-main.askjamie-brandguard-page .askjamie-hero-copy .hero-subtitle {
    font-size: 1rem;
    letter-spacing: -1.25px;
  }

}

/* At 390px, small tracking adjustments keep the fallback and deferred fonts
   on the same line counts without leaving reserved blank space in the copy. */
@media (min-width: 381px) and (max-width: 400px) {
  .askjamie-main.askjamie-brandguard-page .capability-transition > p:nth-of-type(2) {
    letter-spacing: -0.005em;
  }

  .askjamie-main.askjamie-brandguard-page .askjamie-hero-copy h1 {
    letter-spacing: -0.03em;
  }

  .askjamie-main.askjamie-brandguard-page .askjamie-hero-copy .hero-subtitle {
    letter-spacing: -0.04em;
  }

  .askjamie-main.askjamie-brandguard-page .askjamie-hero-copy .hero-tagline,
  .askjamie-main.askjamie-brandguard-page .askjamie-hero-copy .askjamie-hero-tagline {
    letter-spacing: -0.04em;
  }
}