/* ==========================================================================
   Dynasty Labs website, run 3 (started 2026-11-09)

   A blank canvas. Alex pulls elements in from run 1 (../website/) and
   run 2 (../website-2/); note the source beside anything that comes in.

   So far: the logo is the canon horizontal lockup from 2.GTM/brand/
   (Alex, 2026-11-11), inline so it takes the nav's color. Buttons are
   hard-edged rectangles (Alex, 2026-11-09).
   Everything else here is a neutral placeholder (white page, Inter for
   nav text, a black button) until Alex picks the base fonts and colors.
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --ink: #111212;                      /* run 2 ink, the logo's color */
  --muted: #5E6060;
  --line: #ECECEC;
  --hover: #F4F4F4;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;   /* run 2 wordmark */
  --gut: max(clamp(16px, 3.2vw, 44px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* never under an iPhone's notch when it is on its side */
  --max: 1380px;
  --nav-h: 72px;
  --radius: 0;                         /* buttons are hard-edged rectangles (Alex, 2026-11-09) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
em, i { font-style: normal; }   /* house rule: no italics */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; transition: top .2s; }
.skip:focus { top: 12px; }

/* ---------- nav: logo left, the one button far right (Home is the only page, Alex, 2026-11-11) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-in { max-width: var(--max); margin: 0 auto; height: var(--nav-h); padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }

/* logo: the canon horizontal lockup (2.GTM/brand/, Alex, 2026-11-11), drawn in the link's color */
.brand { justify-self: start; display: inline-flex; align-items: center; color: var(--ink); }
.brand svg { height: 36px; width: 123.9px; flex: none; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { padding: 8px 12px; border-radius: var(--radius); font-size: 14.5px; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: var(--hover); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: opacity .2s; }
.nav-cta:hover { opacity: .85; }

/* Sign In: text only, no outline (Alex, 2026-11-10) */
.nav-signin { padding: 8px 10px; font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: opacity .2s; }
.nav-signin:hover { opacity: .65; }
.nav-light .nav .nav-signin { color: #fff; }
html.nav-past.nav-light .nav .nav-signin { color: var(--ink); }

.menu-btn { display: none; width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--line); place-items: center; align-content: center; gap: 5px; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .25s; }
.menu-open .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mmenu { display: none; }

/* ---------- smaller screens: the six links move into a menu ---------- */
@media (max-width: 1023px) {
  .nav-in { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .mmenu { position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + 1px); bottom: 0; background: var(--bg); padding: 12px var(--gut) 32px; overflow-y: auto; flex-direction: column; }
  .menu-open .mmenu { display: flex; }
  .menu-open body { overflow: hidden; }
  .mmenu a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 20px; }
  .mmenu a[aria-current="page"] { font-weight: 500; }
  .mmenu .nav-cta { margin-top: 24px; height: 48px; border-bottom: 0; font-size: 16px; }
}
@media (max-width: 520px) {
  .nav-in { gap: 12px; }
  .nav-end { gap: 2px; }
  .nav-signin { padding: 8px 8px; font-size: 13.5px; }
  .nav-end .nav-cta { height: 36px; padding: 0 12px; font-size: 13.5px; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
}
@media (max-width: 359px) {
  .nav-end .nav-signin { display: none; }   /* no room beside the button; Sign In stays in the footer */
}

/* statistics: a small numbered marker on a figure, and the matching source line at the bottom right of its section (Alex, 2026-11-11) */
.src-n { margin-left: .28em; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1; color: #8A8A84; vertical-align: top; position: relative; top: .35em; }
.src { margin: clamp(12px, 1.4vw, 18px) 0 0; text-align: right; font-size: 10.5px; line-height: 1.5; color: #8A8A84; text-wrap: pretty; }