/* Extropic shared site chrome: header + footer.
   Single source of truth for the nav/footer used on the paper microsites,
   newsroom, and launch blog. Replicates extropic.ai exactly (sampled 2026-07-25).
   Brand tokens from extropic.ai :root. Classes are xc- prefixed to avoid
   collisions with host-page styles. */

.xc-header, .xc-footwrap {
  --xc-gold: #f5d54c;
  --xc-deep-brown: #1c0101;
  --xc-navbar-height: 64px;
  --xc-gutter: 14px;
  --xc-max-width: 90rem;
  --xc-mono: "Suisse Int'l Mono", SuisseMono, "Suisse Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --xc-sans: "Suisse Int'l", Suisse, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  box-sizing: border-box;
}
.xc-header *, .xc-footwrap * { box-sizing: border-box; }

/* extropic.ai responsive tokens: mobile 64px/14px, >=768px 100px/60px */
@media (min-width: 768px) {
  .xc-header, .xc-footwrap { --xc-navbar-height: 100px; --xc-gutter: 60px; }
}

/* ---------------- header ---------------- */

.xc-header {
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
  z-index: 54; color: #fff; font-family: var(--xc-mono);
  pointer-events: none;
}
.xc-header-inner {
  margin: 0 auto; max-width: var(--xc-max-width);
  padding: 0 var(--xc-gutter);
  display: flex; width: 100%; align-items: flex-end; justify-content: space-between;
  height: var(--xc-navbar-height);
  position: relative;
}
.xc-header-scrim {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 150%;
  background: linear-gradient(to bottom, rgba(28,1,1,.85) 0%, rgba(28,1,1,.65) 50%, transparent 100%);
  z-index: 1; pointer-events: none;
  transition: opacity .3s; opacity: 0;
}
.xc-header.xc-scrimmed .xc-header-scrim { opacity: 1; }
.xc-header-row {
  width: 100%; display: flex; align-items: stretch; justify-content: space-between;
  z-index: 2; position: relative;
}
.xc-logo {
  overflow: visible; display: flex; flex-shrink: 0; align-items: center; gap: 12px;
  opacity: 1; pointer-events: auto; transition: opacity .3s; z-index: 54;
  color: #fff; text-decoration: none; border: 0;
}
.xc-logo svg { width: 160px; height: auto; overflow: visible; display: block; }
.xc-logo img { width: 160px; height: auto; display: block; }
.xc-header.xc-hidden .xc-logo,
.xc-header.xc-hidden .xc-pills { opacity: 0; pointer-events: none; }

.xc-pills {
  height: 35px; display: none; flex-direction: row; align-items: center;
  gap: 32px; padding: 0 32px;
  background: rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.5); border-radius: 8px;
  opacity: 1; pointer-events: auto; transition: opacity .3s;
  position: relative; overflow: hidden;
}
.xc-pills a {
  font-family: var(--xc-mono); text-transform: uppercase;
  font-size: 12px; letter-spacing: .01em;
  color: #fff; text-decoration: none; border: 0;
}
.xc-mobile { position: relative; z-index: 54; }
@media (min-width: 1024px) {
  .xc-pills { display: flex; }
  .xc-mobile { display: none; }
}

.xc-menu-btn {
  pointer-events: auto; z-index: 53; position: relative;
  border-radius: 4px; width: 32px; height: 32px; padding: 4px;
  background: #fff; color: #000; border: 0; cursor: pointer;
  display: block;
}
.xc-menu-btn img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; display: block; }
.xc-mobile.xc-open .xc-menu-btn img { transform: rotate(90deg); }

.xc-menu {
  position: absolute; top: 100%; right: 0; margin-top: 8px; width: 300px;
  pointer-events: auto; overflow: hidden;
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  color: #fff; border: 1px solid #fff; border-radius: 8px;
  z-index: 53;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.xc-mobile.xc-open .xc-menu { opacity: 1; visibility: visible; transform: none; }
.xc-menu-inner { padding: 32px 16px 16px 12px; }
.xc-menu-links { display: flex; flex-direction: column; gap: 20px; margin-bottom: 64px; }
.xc-menu-links a {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  color: #fff; text-decoration: none; border: 0;
}
.xc-menu-num {
  font-family: var(--xc-mono); text-transform: uppercase;
  letter-spacing: -.01em; font-size: 12px; line-height: 1; margin: 0;
}
.xc-menu-title {
  font-family: var(--xc-sans); font-weight: 400;
  font-size: 32px; letter-spacing: -.02em; line-height: .9;
  color: #fff; transition: color .3s; margin: 0; text-wrap: balance;
  text-transform: none; /* guard against host h2 rules */
}
@media (min-width: 768px) { .xc-menu-title { font-size: 24px; } }
.xc-menu-links a:hover .xc-menu-title { color: var(--xc-gold); }
.xc-menu-foot { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.xc-menu-foot p {
  font-family: var(--xc-mono); text-transform: uppercase;
  letter-spacing: -.01em; font-size: 12px; line-height: 1;
  color: var(--xc-gold); margin: 0;
}
.xc-overlay {
  pointer-events: auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6); z-index: 52;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.xc-mobile.xc-open .xc-overlay { opacity: 1; visibility: visible; }

/* ---------------- footer ---------------- */

.xc-footwrap { position: relative; background: var(--xc-deep-brown); }
.xc-foot-iframe {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; border: 0; pointer-events: none; z-index: 1;
}
.xc-foot-glyphs {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
  background-image:
    linear-gradient(0deg, var(--xc-deep-brown) 0%, transparent 50%, var(--xc-deep-brown)),
    linear-gradient(90deg, var(--xc-deep-brown), transparent 50%, var(--xc-deep-brown)),
    url("glyphs.svg") /* relative to this CSS file (assets/chrome/) */;
  background-position: 0 0, 0 0, 50%;
  background-size: auto, auto, 400px;
}
.xc-footer {
  position: relative; z-index: 4; width: 100%;
  min-height: calc(100svh - var(--xc-navbar-height) - 1rem);
  color: #fff;
  display: grid; grid-template-columns: 1fr; gap: 16px;
  font-family: var(--xc-mono);
}
.xc-footer-inner {
  padding: 24px var(--xc-gutter);
  margin: 0 auto; width: 100%; max-width: var(--xc-max-width); height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
@media (min-width: 1024px) { .xc-footer-inner { gap: 150px; } }

.xc-foot-links {
  width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;
  column-gap: 32px; row-gap: 16px;
  justify-content: center; margin: 0 auto;
}
@media (min-width: 768px) { .xc-foot-links { justify-content: space-between; } }
@media (min-width: 1024px) { .xc-foot-links { column-gap: 16px; } }
@media (max-width: 538px) { .xc-foot-links { max-width: 340px; } }

.xc-foot-links p, .xc-foot-legal p, .xc-foot-terms p {
  font-family: var(--xc-mono); text-transform: uppercase;
  letter-spacing: -.01em; font-size: 14px; line-height: 1;
  color: var(--xc-gold); margin: 0;
}
.xc-foot-links p, .xc-foot-terms p {
  text-decoration: underline; text-underline-offset: 2px;
  transition: opacity .2s;
}
.xc-foot-links p:hover, .xc-foot-terms p:hover { opacity: .75; }
.xc-foot-links a, .xc-foot-terms a { color: inherit; text-decoration: inherit; border: 0; }

.xc-foot-bottom {
  display: flex; flex-direction: column-reverse; justify-content: space-between;
  align-items: center; column-gap: 16px; row-gap: 24px;
}
@media (min-width: 768px) { .xc-foot-bottom { flex-direction: row; align-items: flex-end; } }
.xc-foot-legal {
  display: flex; flex-direction: row; flex-wrap: wrap;
  column-gap: 16px; row-gap: 8px; justify-content: center;
}
@media (min-width: 768px) { .xc-foot-legal { justify-content: flex-start; align-items: flex-end; } }
.xc-foot-right { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }

.xc-news { position: relative; }
.xc-news-cover {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;
  border: 1px solid var(--xc-gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--xc-deep-brown);
  transition: background-color .2s;
}
.xc-news-cover p {
  font-family: var(--xc-mono); text-transform: uppercase; text-align: center;
  letter-spacing: -.01em; font-size: 14px; line-height: 1;
  color: var(--xc-gold); background: var(--xc-deep-brown); margin: 0;
}
.xc-news.xc-news-open .xc-news-cover { display: none; }
.xc-news-form { border: 1px solid var(--xc-gold); display: flex; align-items: stretch; }
.xc-news-input {
  text-transform: uppercase; flex: 1; padding: 8px 12px;
  background: transparent; color: var(--xc-gold);
  font-family: var(--xc-mono); letter-spacing: -.02em; font-size: 16px; line-height: 1;
  min-width: 120px; border: 0; outline: none; border-radius: 0;
}
.xc-news-input::placeholder { color: rgba(245,213,76,.3); }
.xc-news-input:disabled, .xc-news-btn:disabled { opacity: .5; }
.xc-news-btn:disabled { cursor: not-allowed; }
.xc-news-divider { width: 1px; background: var(--xc-gold); }
.xc-news-btn {
  padding: 8px 16px; background: transparent; color: var(--xc-gold);
  font-family: var(--xc-mono); letter-spacing: -.02em; font-size: 12px;
  text-transform: uppercase; border: 0; cursor: pointer;
  transition: background-color .15s;
}
.xc-news-btn:hover { background: rgba(245,213,76,.2); }
.xc-news-msg {
  font-family: var(--xc-mono); text-transform: uppercase;
  letter-spacing: -.01em; font-size: 12px; line-height: 1.4;
  color: var(--xc-gold); margin: 8px 0 0;
}
.xc-foot-terms {
  display: flex; flex-direction: row; flex-wrap: wrap;
  column-gap: 16px; row-gap: 8px; justify-content: center; align-items: flex-end;
}
@media (min-width: 768px) { .xc-foot-terms { justify-content: flex-end; } }