/* =========================================================================
   Mockstack — shared chrome
   Single source of truth for everything that appears on BOTH the landing
   surface (landing.css) and the article surface (guides.css): the colour
   tokens, the sticky nav, and the footer.

   Load this AFTER the page stylesheet:
     <link rel="stylesheet" href="guides.css" />
     <link rel="stylesheet" href="chrome.css" />

   Order matters. guides.css styles bare <a> with an underline border for
   prose links; loading chrome.css last keeps that rule from leaking into
   the nav and footer without needing per-element `border: none` patches
   scattered through both files.

   The tool (mockstack.css) is a deliberately separate design system and
   does NOT load this file — see CLAUDE.md rule 1.
   ========================================================================= */

:root {
  /* ---- Palette C · Navy & Gold -----------------------------------------
     Replaced "Slate & Signal Blue" (July 2026), which itself replaced the
     warm cream / coral "Bold" palette. The surface inverted with this one:
     the marketing pages are now dark. */
  --navy:      #081426;   /* page background */
  --navy-2:    #0A192F;   /* alternate section band */
  --navy-3:    #0D1E38;   /* cards on navy */
  --navy-deep: #050D1A;   /* footer */
  --gold:      #D4AF37;   /* accent: CTAs, thread, numerals */
  --gold-hi:   #E8C766;   /* hover */
  --gold-dim:  rgba(212, 175, 55, 0.16);
  --gold-soft: rgba(212, 175, 55, 0.08);
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);
  --text:      #FFFFFF;
  --text-2:    rgba(255, 255, 255, 0.62);
  --text-3:    rgba(255, 255, 255, 0.45);

  /* ---- Legacy aliases ---------------------------------------------------
     Roughly 400 rules across landing.css, guides.css and tools.css are
     written against the old names. They are semantic (paper = page, ink =
     text), so pointing them at the new palette re-skins all of them at once
     rather than touching every rule. Same trick the Bold -> Slate swap used
     for --coral. The handful of places that used --ink as a BACKGROUND are
     fixed individually below and in the page stylesheets; those are the only
     ones that invert rather than translate. */
  --paper:        var(--navy);
  --paper-2:      var(--navy-2);
  --paper-3:      var(--navy-3);
  --card:         var(--navy-3);
  --ink:          var(--text);
  --ink-2:        var(--text-2);
  --mute:         var(--text-3);
  --mute-2:       rgba(255, 255, 255, 0.35);
  --rule:         var(--line);
  --rule-2:       var(--line-2);
  --coral:        var(--gold);
  --coral-deep:   var(--gold-hi);
  --coral-soft:   var(--gold-soft);
  --rose:         rgba(212, 175, 55, 0.12);
  --peach:        rgba(212, 175, 55, 0.07);
  --success:      #4ADE80;

  /* ---- Type ------------------------------------------------------------
     Bricolage Grotesque is dropped; the display face is Inter 800 with tight
     tracking, which is also the wordmark's face. */
  --display:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-w:     800;
  --display-track: -0.045em;
  --body:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:          "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-btn:  6px;   /* not pills any more */
  --radius-card: 10px;

  /* ---- Charcoal (tool workspaces) --------------------------------------
     Tool pages are not navy. They sit on a neutral charcoal so the artwork
     being edited is judged against grey, not against a colour cast. */
  --ch-bg:      #101114;   /* page */
  --ch-shell:   #17181C;   /* section bands under the workspace */
  --ch-panel:   #1B1C21;   /* panels and cards */
  --ch-bar:     #1E1F24;   /* toolbar and status bar */
  --ch-ctrl:    #26272D;   /* controls, inputs, chips */
  --ch-line:    rgba(255,255,255,.09);
  --ch-ok:      #4CAF7D;   /* status: ready */

  /* ---- Light paper (guide articles) ------------------------------------
     Long-form reading is on paper, not navy. The gold is darkened because
     #D4AF37 on near-white is only 1.9:1 and fails AA badly. */
  --pa-bg:      #F7F6F2;
  --pa-band:    #EFEDE7;
  --pa-ink:     #0A192F;
  --pa-body:    #33475C;
  --pa-gold:    #B8912B;
  --pa-line:    rgba(10,25,47,.12);

  /* One content width for every section so left/right edges line up —
     on the landing page AND in the footer of every article page. */
  --wrap: 1200px;
}

/* The marketing surface is dark now, so the page itself has to carry navy;
   individual page stylesheets set html/body background from --paper, which
   now resolves to navy. This is the belt-and-braces for anything that does
   not. */
html { background: var(--navy); }
::selection { background: var(--gold); color: var(--navy); }

/* ---- Motion --------------------------------------------------------------
   The gold thread, the rotating hero word and the dot matrix all share these.
   Keyframes live here so every page that loads chrome.css can use them. */
/* Six items on a 60px reel. The sixth repeats the first for a seamless loop. */
@keyframes msWords {
  0%, 15%   { transform: translateY(0); }
  20%, 35%  { transform: translateY(-60px); }
  40%, 55%  { transform: translateY(-120px); }
  60%, 75%  { transform: translateY(-180px); }
  80%, 95%  { transform: translateY(-240px); }
  100%      { transform: translateY(-300px); }
}
/* Guilloche rings. Five concentric dashed circles at alternating directions. */
@keyframes msSpinSlow { to { transform: rotate(360deg); } }
@keyframes msSpinRev  { to { transform: rotate(-360deg); } }
/* A slow highlight travelling the stat strip's top border. */
@keyframes msGlint { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(1200%); } }
@keyframes msFlow { to { stroke-dashoffset: -1000; } }
@keyframes msCycA { 0%, 26% { opacity: 1; } 33%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes msCycB { 0%, 26% { opacity: 0; } 33%, 59% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes msCycC { 0%, 59% { opacity: 0; } 66%, 93% { opacity: 1; } 100% { opacity: 0; } }

/* Dot-matrix cells. matrix-shapes.js builds the grids and tags lit cells with
   .ms-dot-on; the faint base grid underneath uses .ms-dot-base. */
.ms-dot-on {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
}
.ms-dot-base {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(212, 175, 55, 0.14);
}

/* Reduced motion freezes everything to its first frame: the thread shows its
   static dim path, the matrix holds shape A, the hero word shows item one. */
@media (prefers-reduced-motion: reduce) {
  .ms-word-reel, .ms-thread-live, .ms-matrix-layer, .ms-pulse-live,
  .ms-ring, .ms-glint { animation: none !important; }
  .ms-glint { opacity: 0; }
  .ms-matrix-layer { opacity: 0; }
  .ms-matrix-layer.a { opacity: 1; }
}


/* ===================== EYEBROW LABEL ====================================== */
.tag {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ===================== TOP NAV ============================================
   Slim bar: wordmark, a five-hub dropdown, two links, one gold CTA. The mega
   menu is retired; the hub pages carry the full inventory now. */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 15px 36px;
  padding-top: calc(15px + env(safe-area-inset-top, 0px));
  padding-left: calc(36px + env(safe-area-inset-left, 0px));
  padding-right: calc(36px + env(safe-area-inset-right, 0px));
  background: rgba(8, 20, 38, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .brand { font: 800 19px/1 var(--body); letter-spacing: -0.035em; color: var(--text); border: none; }
.nav .brand .dot { color: var(--gold); }
.nav .crumb { color: var(--text-3); font: 500 13px var(--mono); border: none; }
.nav .spacer { flex: 1; }
.nav .links { display: flex; gap: 24px; align-items: center; font-size: 13.5px; }
.nav .links a { color: rgba(255,255,255,.75); border: none; font-weight: 500; }
.nav .links a:hover { color: var(--gold); }

/* Hub dropdown. Hover for pointers, focus-within for keyboards. */
.nav .has-menu { position: relative; display: inline-flex; padding-bottom: 14px; margin-bottom: -14px; }
.nav .menu-trigger::after { content: "\25BE"; margin-left: 5px; font-size: 9px; opacity: .65; }
.nav .menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  flex-direction: column; min-width: 262px;
  background: var(--navy-3); border: 1px solid var(--line-2);
  border-radius: var(--radius-card); padding: 7px;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.75);
  display: none;
}
.nav .has-menu:hover .menu, .nav .has-menu:focus-within .menu { display: flex; }
.nav .menu a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 11px; border-radius: var(--radius-btn);
  font-size: 13.5px; white-space: nowrap; color: rgba(255,255,255,.8);
}
.nav .menu a:hover { background: var(--gold-soft); color: var(--gold); }
.nav .menu a .n { font: 500 10.5px var(--mono); color: var(--text-3); letter-spacing: .1em; }
.nav .menu a:hover .n { color: var(--gold); }
.nav .menu .menu-all {
  margin-top: 5px; padding-top: 11px; border-top: 1px solid var(--line);
  border-radius: 0; font: 700 11.5px var(--mono); letter-spacing: .1em; color: var(--gold);
}

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 34px; padding: 0 8px; cursor: pointer;
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius-btn);
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--text); transition: transform .18s ease, opacity .18s ease;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav .cta {
  background: var(--gold); color: var(--navy);
  padding: 10px 18px; border-radius: var(--radius-btn);
  font: 700 13px var(--body); border: none;
}
.nav .cta:hover { background: var(--gold-hi); color: var(--navy); }

/* ===================== FOOTER =============================================
   One compact row everywhere. The four-column footer is retired. */
.foot {
  background: var(--navy-deep);
  border-top: 1px solid var(--line);
  padding: 22px 36px;
  padding-left: calc(36px + env(safe-area-inset-left, 0px));
  padding-right: calc(36px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.foot-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap;
}
.foot .brand { font: 800 16px/1 var(--body); letter-spacing: -0.035em; color: var(--text); border: none; }
.foot .brand .dot { color: var(--gold); }
.foot .foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot .foot-links a { color: rgba(255,255,255,.62); font-size: 13px; border: none; }
.foot .foot-links a:hover { color: var(--gold); }
.foot .foot-copy { margin-left: auto; font: 500 11.5px var(--mono); color: var(--text-3); }

/* Collapse AdSense units Google reports as unfilled. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ===================== RESPONSIVE ========================================= */
@media (max-width: 800px) {
  .nav {
    padding: 12px 20px; gap: 12px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
  }
  .nav-toggle { display: flex; }
  .nav .links { display: none; }
  .nav.open .links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 6px 20px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--navy-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 34px -20px rgba(0,0,0,.8);
    max-height: calc(100vh - 100%); overflow-y: auto;
  }
  .nav.open .links > a, .nav.open .links .menu-trigger {
    padding: 13px 2px; font-size: 16px; font-weight: 600; color: var(--text);
    border-bottom: 1px solid var(--line);
  }
  .nav.open .links .has-menu { display: block; padding-bottom: 0; margin-bottom: 0; }
  .nav.open .links .menu-trigger { display: block; }
  .nav.open .links .menu-trigger::after { content: none; }
  .nav.open .links .menu {
    display: flex; position: static; transform: none;
    min-width: 0; padding: 4px 0 8px 12px;
    background: none; border: 0; box-shadow: none;
  }
  .nav .cta { padding: 11px 14px; font-size: 13px; }
  .nav-toggle { width: 42px; height: 40px; }
  .foot { padding: 20px; }
  .foot-inner { gap: 10px 18px; }
  .foot .foot-copy { margin-left: 0; width: 100%; }
}