/* PK2 AI Advisors · site foundation
   Reset, base type, the two grounds, section grammar, hairlines, buttons,
   header, footer.

   This sheet declares no colour and no system size of its own. Everything
   resolves through a custom property from tokens.css. If you need a new value,
   add it there, not here.

   Load order on every page:
     css/tokens.css
     css/site.css
     css/week-grid.css   (only on pages that use the grid)

   Flat by rule: no gradients, no glassmorphism, no shadows beyond a hairline.
*/

/* ----------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

ul, ol { margin: 0; padding: 0; }

::selection { background: var(--gold-soft); }

/* One focus treatment, three grounds. On paper the ring takes the dark gold,
   because full gold reads 1.92:1 there and the ring is the only indicator a
   keyboard user gets. On slate the full gold is the legible one. Where the
   element is itself gold, the ring goes to deep slate. The gold-fill rule is
   written last so it also wins on a primary button inside a slate section. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ground-ink :focus-visible {
  outline-color: var(--focus-ring-ink);
}
.btn-primary:focus-visible,
.on-gold:focus-visible {
  outline-color: var(--focus-ring-inv);
}

/* The kill switch. Everything below is decoration, so under reduced motion it
   all resolves instantly and nothing is left sitting at partial opacity. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ page load -- */

/* A single fade, once, on the whole page. Gated on the html.js flag set by the
   inline snippet in the head, so a page served without script renders fully
   visible from the first frame. Written as an animation rather than a class
   the page has to add later, which means no second script and no way to leave
   the body sitting at zero opacity if something fails to run. */
@keyframes page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.js body {
  animation: page-fade var(--dur-page) var(--ease) 1 both;
}
@media (prefers-reduced-motion: reduce) {
  html.js body { animation: none; }
}

/* ------------------------------------------------------------ skip link -- */

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--text-inv);
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: 1;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------- type -- */

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3,
.display-xl, .display-lg, .h2, .h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1, .display-xl {
  font-size: var(--size-display-xl);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.display-lg {
  font-size: var(--size-display-lg);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--size-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-size: var(--size-h3);
  line-height: 1.2;
}

.h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-h4);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}

.body-lg { font-size: var(--size-body-lg); line-height: 1.6; }
.body    { font-size: var(--size-body); line-height: 1.65; }
.small   { font-size: var(--size-small); line-height: 1.55; }

/* The eyebrow. Mono, small, wide, quiet. It names the section and does not
   compete with the heading under it. */
.label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.label-gold { color: var(--gold-text); }

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.num-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-num-display);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Reading column. Body copy is never allowed to run wider than this. */
.measure { max-width: var(--measure); }
.muted { color: var(--text-muted); }

a { color: var(--ink); }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: var(--hair);
  text-underline-offset: 4px;
}
.prose a:hover { color: var(--gold-text); }

.prose > * + * { margin-top: var(--space-3); }

/* --------------------------------------------------------------- ground -- */

.ground-paper   { background: var(--paper); color: var(--text); }
.ground-paper-2 { background: var(--paper-2); color: var(--text); }
.ground-ink     { background: var(--ink); color: var(--text-inv); }

.ground-ink h1, .ground-ink h2, .ground-ink h3,
.ground-ink .display-xl, .ground-ink .display-lg,
.ground-ink .h2, .ground-ink .h3, .ground-ink .h4,
.ground-ink .num-display,
.ground-ink a { color: var(--text-inv); }
.ground-ink .label, .ground-ink .muted { color: var(--muted-inv); }
.ground-ink .label-gold { color: var(--gold); }
.ground-ink .prose a:hover { color: var(--gold); }

/* ------------------------------------------------------- grid + spacing -- */

.container {
  width: min(var(--container), 100% - (var(--margin-outer) * 2));
  margin-inline: auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

/* Sections carry more air below than above, so a section reads as belonging
   to the heading that opens it. */
.section {
  position: relative;
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}
/* A tight section halves the section spacing, but a banded one sets that
   spacing against a hard edge of colour, where half of the small-screen
   section step reads as a crop rather than as air. The floor holds the
   internal padding at --space-6 so a band never closes on its contents. */
.section-tight {
  padding-top: max(calc(var(--section-top) * 0.5), var(--space-6));
  padding-bottom: max(calc(var(--section-bottom) * 0.5), var(--space-6));
}
/* The gap between an eyebrow and the heading it opens, everywhere. */
.section-head > .label + * { margin-top: var(--space-3); }
.section-head > * + .measure { margin-top: var(--space-4); }

@media (max-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 640px) {
  .grid-12 { grid-template-columns: 1fr; }
  .grid-12 > * { grid-column: 1 !important; }
}

/* ------------------------------------------------------------ hairlines -- */

.hairline-top    { border-top: var(--hair) solid var(--hairline); }
.hairline-bottom { border-bottom: var(--hair) solid var(--hairline); }
.hairline-left   { border-left: var(--hair) solid var(--hairline); }

.ground-ink .hairline-top,
.hairline-inv-top    { border-top: var(--hair) solid var(--hairline-inv); }
.ground-ink .hairline-bottom,
.hairline-inv-bottom { border-bottom: var(--hair) solid var(--hairline-inv); }
.ground-ink .hairline-left { border-left-color: var(--hairline-inv); }

.rule {
  height: var(--hair);
  border: 0;
  margin: 0;
  background: var(--hairline);
}
.ground-ink .rule { background: var(--hairline-inv); }

/* -------------------------------------------------------------- buttons -- */

/* Primary. A gold pill with a recessed arrow well on the right. The well is
   the only piece that moves on hover, so the button reads as a door. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  height: var(--btn-height);
  padding: 0 var(--btn-pad-arrow) 0 var(--btn-pad-x);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--on-gold);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--btn-font);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-ui) ease, transform 120ms ease;
}
.btn-arrow {
  display: grid;
  place-items: center;
  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);
  flex: 0 0 var(--btn-arrow-size);
  border-radius: var(--radius-pill);
  background: var(--arrow-well);
  font-size: var(--size-small);
  line-height: 1;
  transition: transform var(--dur-ui) var(--ease);
}
.btn-primary:hover { background: var(--gold-hover); }
.btn-primary:hover .btn-arrow { transform: translateX(2px); }
.btn-primary:active { transform: scale(0.98); }

/* Secondary. Same pill, hairline instead of fill. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--btn-font);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-ui) ease, transform 120ms ease;
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-secondary:active { transform: scale(0.98); }
.ground-ink .btn-secondary { border-color: var(--hairline-inv); color: var(--text-inv); }
.ground-ink .btn-secondary:hover { border-color: var(--text-inv); }

/* Tertiary. A mono link with a gold underline. No pill, no fill. */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: var(--hair);
  text-underline-offset: 4px;
  transition: color var(--dur-ui) ease;
}
.btn-tertiary:hover { color: var(--gold-text); }
.btn-tertiary .btn-arrow-glyph { transition: transform var(--dur-ui) var(--ease); }
.btn-tertiary:hover .btn-arrow-glyph { transform: translateX(3px); }
.ground-ink .btn-tertiary { color: var(--text-inv); }
.ground-ink .btn-tertiary:hover { color: var(--gold); }

/* On the widths where the site is tapped rather than clicked, the mono link
   carries the padding that takes its target past the minimum. */
@media (max-width: 640px) {
  .btn-tertiary { padding-block: var(--space-1); }
}

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

/* Sticky, opaque, and hairlined at all times. The bar needs no script: no
   scroll listener, no state class, nothing to go wrong. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  background: var(--paper);
  border-bottom: var(--hair) solid var(--hairline);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--nav-gap);
  min-height: var(--header-height);
}

/* Wordmark. The only place Poppins appears. */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  font-size: var(--size-h4);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--gold-text); }

.site-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--nav-gap);
  list-style: none;
}
.site-nav-links a {
  display: inline-block;
  padding-block: var(--space-1);
  font-size: var(--nav-font);
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  border-bottom: var(--strike) solid transparent;
  transition: color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.site-nav-links a:hover { color: var(--ink); border-bottom-color: var(--hairline); }
.site-nav-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--gold);
}

/* The header pill is compact so it sits inside the 76px bar without crowding
   it. Same geometry, one size down. */
.site-header .btn-primary {
  height: var(--btn-height-compact);
  padding-right: var(--space-1);
  font-size: var(--size-small);
}

/* Mobile: wordmark and pill stay on the first row and are always visible. The
   nav links wrap to a full-width second row. No script, no disclosure, no
   focus trap: every link is a plain tab stop at every width. */
@media (max-width: 640px) {
  .site-header-inner {
    padding-block: var(--space-2);
    row-gap: var(--space-2);
  }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    padding-top: var(--space-2);
    border-top: var(--hair) solid var(--hairline);
  }
  .site-nav-links { gap: var(--space-3) var(--space-4); }
  .site-header .btn-primary {
    padding-left: var(--space-3);
    font-size: var(--size-label);
  }
  .wordmark { font-size: var(--size-body); }
}

@media (max-width: 360px) {
  .site-header .btn-primary { gap: var(--space-1); }
}

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

/* Slate ground, mono throughout. No call to action lives here: the header pill
   is the only action on the site chrome. */
.site-footer {
  background: var(--ink);
  color: var(--text-inv);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-label);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-footer-mark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  font-size: var(--size-h4);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-inv);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  list-style: none;
}
.footer-links a {
  display: inline-block;
  padding-bottom: 3px;
  color: var(--text-inv);
  text-decoration: none;
  border-bottom: var(--hair) solid var(--hairline-inv);
  transition: border-color var(--dur-ui) ease;
}
.footer-links a:hover { border-bottom-color: var(--gold); }
.footer-legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--hair) solid var(--hairline-inv);
  color: var(--muted-inv);
  text-transform: none;
}

@media (max-width: 640px) {
  .footer-links a { padding-top: var(--space-2); }
  .site-footer-inner { gap: var(--space-3); }
}