/* XDW 2026 Report · shared styles
 * Self-contained: bundles design tokens, fonts, page chrome, and the lock component.
 * Paths are relative to /report/assets/ so this works at any deploy root.
 */

/* ---------- Fonts ---------- */
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Light.ttf')     format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Semibold.ttf')  format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Extrabold.ttf') format('truetype'); font-weight:800; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  /* Surfaces (task palette) */
  --xdw-bg:        #0a0e1a;   /* primary background, near-black */
  --xdw-bg-2:      #1a2540;   /* navy secondary background */
  --xdw-near-black:#0a0e1a;
  --xdw-navy:      #131E33;
  --xdw-navy-deep: #0c1730;
  --xdw-near-white:#f4faff;
  --xdw-white:     #FFFFFF;

  /* Blue ramp */
  --dttt-blue:     #1a55aa;   /* DTTT blue */
  --xdw-blue:      #33A5F7;   /* signal blue, accents + links */
  --xdw-blue-hi:   #6CBDFA;
  --xdw-blue-lo:   #2680C2;
  --xdw-blue-dim:  #1B5C8E;
  --xdw-blue-deep: #0D3454;

  /* Slate */
  --xdw-slate:       #424F66;
  --xdw-slate-light: #8794AB;
  --xdw-slate-soft:  #D0DAEB;

  /* ATF framework glyph colours (follow-up page) */
  --atf-tm: #5EBFB7; /* teal */
  --atf-pm: #4ADE80; /* green */
  --atf-em: #F59E0B; /* amber */
  --atf-ci: #F472B6; /* pink */

  /* Alphas on dark */
  --xdw-alpha-72: rgba(255,255,255,0.72);
  --xdw-alpha-50: rgba(255,255,255,0.50);
  --xdw-alpha-12: rgba(208,218,235,0.12);
  --xdw-alpha-04: rgba(255,255,255,0.04);
  --xdw-blue-alpha-12: rgba(51,165,247,0.12);
  --xdw-blue-alpha-30: rgba(51,165,247,0.30);

  /* Type */
  --xdw-heading:'Poppins', sans-serif;
  --xdw-body:'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --xdw-mono:'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Radii */
  --xdw-radius-sm:6px; --xdw-radius-md:10px; --xdw-radius-lg:14px; --xdw-radius-xl:20px; --xdw-radius-pill:999px;

  /* Glow elevation */
  --xdw-glow-sm:0 0 20px rgba(51,165,247,0.18);
  --xdw-glow-md:0 0 32px rgba(51,165,247,0.28);
  --xdw-glow-lg:0 0 60px rgba(51,165,247,0.35);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Fluid base type on desktop/laptop. The report content is rem-based, so scaling
   the root shrinks headings, body copy and rem spacing together: content reads
   smaller on a laptop (no longer "too zoomed in") and reaches full size only on a
   large monitor. Mobile (<=900px) keeps the full 16px base so it stays readable. */
@media (min-width:901px){
  html{font-size:clamp(13px, 0.45vw + 6.4px, 16.5px)}
}
body{
  font-family:var(--xdw-body);
  background:var(--xdw-bg);
  color:var(--xdw-alpha-72);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
h1,h2,h3,h4,.eyebrow{font-family:var(--xdw-heading);color:var(--xdw-white)}
/* Memberstack prebuilt UI renders a light (white) modal; keep our white heading
   colour from bleeding into its dark-on-light text. */
memberstack-prebuilt-ui h1,
memberstack-prebuilt-ui h2,
memberstack-prebuilt-ui h3,
memberstack-prebuilt-ui h4,
memberstack-prebuilt-ui .ms-modal__title{color:#0a0a0a}
a{color:var(--xdw-blue);text-decoration:none}
a:hover{color:var(--xdw-blue-hi)}
img{max-width:100%;display:block}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--xdw-blue)}
.wrap{max-width:1280px;margin:0 auto;padding:0 64px}
.mono{font-family:var(--xdw-mono);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--xdw-blue-hi)}

/* ---------- Material Symbols ---------- */
.mi{
  font-family:'Material Symbols Rounded';font-weight:500;font-size:24px;line-height:1;
  font-feature-settings:'liga' 1;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
  color:var(--xdw-blue);display:inline-block;vertical-align:middle;
  -webkit-font-smoothing:antialiased;
}
.mi-white{color:var(--xdw-white)}
.mi-hi{color:var(--xdw-blue-hi)}

/* ---------- Top nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,26,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--xdw-alpha-12);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.nav-brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--xdw-heading);font-weight:800;letter-spacing:.02em;color:var(--xdw-white);font-size:1.02rem}
.nav-brand .xdw-logo{height:38px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.nav-links a{
  font-family:var(--xdw-heading);font-weight:600;font-size:.92rem;color:var(--xdw-alpha-72);
  padding:8px 11px;border-radius:var(--xdw-radius-sm);white-space:nowrap;
}
.nav-links a:hover{color:var(--xdw-white);background:var(--xdw-alpha-04)}
.nav-links a.is-active{color:var(--xdw-white)}
.nav-links a.is-active::after{content:'';display:block;height:2px;margin-top:4px;border-radius:2px;background:var(--xdw-blue);box-shadow:var(--xdw-glow-sm)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-right .dttt{height:26px;opacity:.92}

/* Member auth buttons · Log in is the primary CTA, sits next to Discuss */
.nav-auth{display:inline-flex;align-items:center;gap:8px}
/* Log in is always available by default so anyone can sign in at any point.
   It only gives way to Log out once Memberstack confirms a signed-in member. */
.nav-auth [data-auth="login"]{display:inline-flex}
.nav-auth [data-auth="logout"]{display:none}
.site-nav[data-auth-state="in"] .nav-auth [data-auth="login"]{display:none}
.site-nav[data-auth-state="in"] .nav-auth [data-auth="logout"]{display:inline-flex}
.btn-auth{
  align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;
  font-family:var(--xdw-heading);font-weight:600;font-size:.9rem;
  border-radius:var(--xdw-radius-pill);padding:9px 18px;transition:all .2s ease;
}
/* Log in · filled, noticeable (primary action) */
.btn-auth[data-auth="login"]{
  color:var(--xdw-white);background:var(--xdw-blue);
  border:1px solid var(--xdw-blue);box-shadow:var(--xdw-glow-sm);
}
.btn-auth[data-auth="login"]:hover{background:var(--xdw-blue-hi);border-color:var(--xdw-blue-hi);box-shadow:var(--xdw-glow-md)}
/* Log out · quiet ghost (no longer a CTA once signed in) */
.btn-auth[data-auth="logout"]{
  color:var(--xdw-alpha-72);background:transparent;border:1px solid var(--xdw-alpha-12);
}
.btn-auth[data-auth="logout"]:hover{color:var(--xdw-white);border-color:var(--xdw-blue-hi);box-shadow:var(--xdw-glow-sm)}

/* Discuss button (footer keeps label) */
.btn-discuss{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--xdw-heading);font-weight:600;font-size:.9rem;color:var(--xdw-blue-hi);
  background:transparent;border:1px solid var(--xdw-blue-alpha-30);
  padding:9px 16px;border-radius:var(--xdw-radius-pill);transition:all .2s ease;
}
.btn-discuss:hover{border-color:var(--xdw-blue);color:var(--xdw-white);box-shadow:var(--xdw-glow-sm)}
.btn-discuss .mi{font-size:18px}
/* Nav Discuss · discreet, icon-only circle */
.nav-right .btn-discuss{
  gap:0;padding:0;width:40px;height:40px;justify-content:center;
  color:var(--xdw-alpha-72);border-color:var(--xdw-alpha-12);
}
.nav-right .btn-discuss .mi{font-size:20px;color:inherit}
.nav-right .btn-discuss:hover{color:var(--xdw-blue-hi);border-color:var(--xdw-blue-alpha-30)}

/* Mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer;color:var(--xdw-white)}
.nav-toggle .mi{font-size:28px;color:var(--xdw-white)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding-top:28px;padding-bottom:4px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--xdw-heading);font-size:.82rem;font-weight:600}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px;color:var(--xdw-slate-light)}
.breadcrumb li a{color:var(--xdw-slate-light)}
.breadcrumb li a:hover{color:var(--xdw-blue-hi)}
.breadcrumb li[aria-current]{color:var(--xdw-white)}
.breadcrumb .sep{color:var(--xdw-slate);font-size:1rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--xdw-heading);font-weight:600;font-size:.95rem;padding:14px 22px;border-radius:var(--xdw-radius-md);border:1px solid transparent;cursor:pointer;transition:all .2s ease;text-decoration:none}
.btn-primary{background:var(--xdw-blue);color:var(--xdw-white);box-shadow:var(--xdw-glow-sm)}
.btn-primary:hover{background:var(--xdw-blue-hi);color:var(--xdw-white);box-shadow:var(--xdw-glow-md)}
.btn-ghost{background:transparent;color:var(--xdw-white);border-color:var(--xdw-alpha-12)}
.btn-ghost:hover{border-color:var(--xdw-blue);color:var(--xdw-blue-hi)}
.btn-sm{padding:10px 16px;font-size:.88rem}

/* ---------- Hero ----------
   The pillar intro is a single full-viewport panel: nav + breadcrumb + hero
   together equal one screen, so the first panel never needs scrolling.
   --hero-offset is the sticky nav + breadcrumb height (overridden per breakpoint).
   Type scales with both width and height so the content shrinks on short screens. */
.hero{
  --hero-offset:137px;
  min-height:calc(100svh - var(--hero-offset));
  display:flex;flex-direction:column;justify-content:center;
  box-sizing:border-box;
  padding:clamp(24px,4vh,64px) 0 clamp(36px,6vh,80px);
  background:radial-gradient(circle at 78% 18%,rgba(51,165,247,.16),transparent 52%),linear-gradient(160deg,var(--xdw-navy-deep) 0%,var(--xdw-bg-2) 100%);
  border-bottom:1px solid var(--xdw-alpha-12);
}
.hero .eyebrow{margin-bottom:clamp(10px,1.6vh,18px)}
.hero h1{font-family:var(--xdw-heading);font-weight:700;font-size:clamp(1.9rem,2.6vw + 1.4vh,4rem);line-height:1.08;letter-spacing:-.015em;color:var(--xdw-white);max-width:18ch}
.hero p.lede{font-size:clamp(1rem,.4vw + .9vh,1.15rem);max-width:60ch;margin-top:clamp(12px,1.8vh,20px);color:var(--xdw-alpha-72)}
.hero .pillar-no{font-family:var(--xdw-mono);color:var(--xdw-blue-hi);letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;margin-bottom:clamp(8px,1.4vh,14px)}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:40px;border-bottom:1px solid var(--xdw-alpha-12);padding-bottom:16px}
.section-head h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:-.01em}
.section-head .meta{font-family:var(--xdw-mono);font-size:.78rem;color:var(--xdw-blue-hi);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}

/* Cards / tiles */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:var(--xdw-alpha-04);border:1px solid var(--xdw-alpha-12);border-radius:var(--xdw-radius-lg);padding:30px 26px;color:var(--xdw-alpha-72);text-decoration:none;transition:all .2s ease;display:block}
a.card:hover{border-color:var(--xdw-blue-alpha-30);box-shadow:var(--xdw-glow-sm)}
.card .mi{font-size:40px;margin-bottom:16px}
.card h3{font-size:1.4rem;font-weight:600;margin:6px 0 10px;color:var(--xdw-white)}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--xdw-heading);font-weight:600;font-size:.74rem;padding:5px 11px;border-radius:var(--xdw-radius-pill);background:var(--xdw-blue-alpha-12);border:1px solid var(--xdw-blue-alpha-30);color:var(--xdw-blue-hi)}

.divider-glow{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--xdw-blue) 50%,transparent);margin:72px 0}

/* ATF framework thread (follow-up page) */
.atf-thread{list-style:none;display:grid;gap:12px}
.atf-thread li{display:flex;align-items:center;gap:14px;background:var(--xdw-alpha-04);border:1px solid var(--xdw-alpha-12);border-radius:var(--xdw-radius-md);padding:16px 20px;color:var(--xdw-alpha-72)}
.atf-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.atf-key{font-family:var(--xdw-heading);font-weight:800;color:var(--xdw-white);min-width:2.4em}
.atf-tm{background:var(--atf-tm)}
.atf-pm{background:var(--atf-pm)}
.atf-em{background:var(--atf-em)}
.atf-ci{background:var(--atf-ci)}

/* ---------- Lock component ---------- */
.lock{position:relative;margin:32px 0}
/* Until JS resolves membership, hide protected body and show neither flash */
.lock[data-lock-state="pending"] .lock-content,
.lock[data-lock-state="pending"] .lock-gate{display:none}
.lock[data-lock-state="unlocked"] .lock-gate{display:none}
.lock[data-lock-state="locked"] .lock-content{display:none}

.lock-gate{
  position:relative;overflow:hidden;
  border:1px solid var(--xdw-blue-alpha-30);
  border-radius:var(--xdw-radius-lg);
  background:radial-gradient(circle at 50% 0%,rgba(51,165,247,.12),transparent 60%),var(--xdw-navy-deep);
  padding:48px 40px;text-align:center;
  box-shadow:var(--xdw-glow-sm);
}
.lock-gate .mi{font-size:40px;margin-bottom:14px}
.lock-gate h3{font-family:var(--xdw-heading);font-weight:700;color:var(--xdw-white);font-size:1.5rem;margin-bottom:12px}
.lock-gate p{max-width:54ch;margin:0 auto 26px;color:var(--xdw-alpha-72)}
.lock-gate .gate-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
/* The primary button carries a Material Symbol whose tall intrinsic line box
   otherwise makes it ~10px taller than the ghost button and pushes its icon
   off-centre. Collapse the icon's line box and drop the inherited margin so the
   two buttons match height and the icon sits centred next to the label. */
.lock-gate .gate-actions .btn{line-height:1.65}
.lock-gate .gate-actions .btn .mi{margin:0;line-height:0}
.lock-gate .gate-secondary{font-family:var(--xdw-heading);font-weight:600;font-size:.92rem;color:var(--xdw-blue-hi)}
.lock-gate .gate-secondary:hover{color:var(--xdw-white)}

/* ---------- Footer ---------- */
.site-footer{margin-top:40px;border-top:1px solid var(--xdw-alpha-12);background:var(--xdw-bg)}
.site-footer .wrap{padding-top:56px;padding-bottom:56px}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links a{font-family:var(--xdw-heading);font-weight:600;font-size:.92rem;color:var(--xdw-alpha-72)}
.footer-links a:hover{color:var(--xdw-white)}
.footer-brand .xdw-logo{height:46px;width:auto;display:block;margin-bottom:18px}
.footer-brand .dttt{height:28px;margin-bottom:14px}
.footer-meta{margin-top:32px;padding-top:24px;border-top:1px solid var(--xdw-alpha-12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--xdw-alpha-50)}
.footer-meta .wordmark{font-family:var(--xdw-heading);font-weight:800;color:var(--xdw-alpha-72)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .wrap{padding:0 28px}
  .nav-links{
    position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--xdw-bg);border-bottom:1px solid var(--xdw-alpha-12);padding:8px 28px 20px;
    transform:translateY(-120%);transition:transform .25s ease;
  }
  .site-nav.open .nav-links{transform:translateY(0)}
  .nav-links a{padding:12px 4px;border-radius:0;border-bottom:1px solid var(--xdw-alpha-12)}
  .nav-links a.is-active::after{display:none}
  .nav-toggle{display:inline-flex}
  .nav-right .dttt{display:none}
  /* Log in stays visible in the header bar, compact next to the Discuss icon */
  .nav-auth{gap:8px}
  .btn-auth{padding:8px 14px;font-size:.85rem}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .hero{--hero-offset:124px} /* shorter nav on mobile */
}