/* 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 lead. One paragraph, directly under a heading that runs the full
   container, standing in for the section head's body. It is set larger than
   body copy and leads tighter, because at this size the looser body leading
   opens holes between the lines. Always paired with .measure-lead: the reading
   column has to grow with the size or the paragraph runs short lines. */
.body-lead { font-size: var(--size-body-lead); line-height: 1.5; }

/* The standfirst. A lead that takes the whole container rather than a reading
   column: three or four long lines under the heading, the way a masthead sets
   the sentence that stands in front of the piece. It is deliberately not held
   to a measure, so it is for one short paragraph at the top of a page and not
   for running copy. Leads tighter again than the lead, because the line is
   longer and the size is larger. */
.standfirst { font-size: var(--size-standfirst); line-height: 1.4; }

/* 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); }
/* The lead's column. Wider than the measure by exactly enough to hold the same
   ~75 characters a line at the lead's larger size. */
.measure-lead { max-width: var(--measure-lead); }
.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 compact section is one whose body is short: a closing CTA, a single slate
   statement, anything under roughly 60 words. Full section spacing around that
   much copy reads as a hole rather than as air, and against the hard edge of a
   banded ground it reads as a crop. The compact pair is its own step, not a
   fraction of the full one, so a band never closes on its contents. */
.section-compact {
  padding-top: var(--section-top-compact);
  padding-bottom: var(--section-bottom-compact);
}
/* The first section on a page. The header above it has already put a band of
   air on top of the page, so this one opens on its own step. */
.section-first { padding-top: var(--section-top-first); }

/* The section header's internal rhythm, declared here and nowhere else. The
   heading-to-body rule comes first so a heading that is itself held to the
   measure still reads the eyebrow gap under its label. */
.section-head > * + .measure,
.section-head > * + .measure-lead,
.section-head > * + .standfirst { margin-top: var(--space-heading); }
.section-head > .label + * { margin-top: var(--space-eyebrow); }
/* The same gap where the body sits under the head rather than inside it. */
.section-head + .measure,
.section-head + .grid-12 { margin-top: var(--space-heading); }

/* A section head set beside its body rather than above it. A one-column section
   runs a 620px measure inside a 1040px container and leaves 420px of paper on
   the right at every desktop width, which reads as a page that stopped rather
   than a page that is short. Four columns of head and seven of body, offset by
   one, put the same words across the whole container. The heading wraps in the
   narrow column, which is what a stacked head is for. Row order in the source
   is eyebrow, heading, body, so the collapsed state at 1024 and under is
   already correct without reordering. The row gap is the heading-to-body step
   the one-column head uses, so the collapse changes the axis and nothing else. */
.section-split { row-gap: var(--space-heading); }
.section-split-head { grid-column: 1 / 5; }
.section-split-body { grid-column: 6 / 13; }

/* A closing block: a short statement and one action. Left-aligned at the
   measure it hangs off the left edge of a wide container with nothing to
   balance it, so the closers centre on a column one --space-6 wider than the
   measure on each side. Everything inside centres with it, including the flex
   row that holds the button. */
.section-closer { --closer-width: calc(var(--measure) + var(--space-6) * 2); }
.section-closer > .container {
  max-width: min(var(--closer-width), 100%);
  text-align: center;
}
.section-closer > .container > * { justify-content: center; }
.section-closer .measure { margin-inline: auto; }

@media (max-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(8, 1fr); }

  /* Four columns of an eight-column grid is a rail, not a column, and a
     heading does not belong in a rail. The split stacks whole. */
  .section-split-head,
  .section-split-body { grid-column: 1 / -1; }
}
@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); }
/* On slate, .ground-ink a turns every link cream, and it outweighs .btn-primary
   on specificity. That made the one button that has to be read on the money
   surfaces — both Start closers and the offer card — cream on gold at 1.9:1.
   The pill carries its own ground, so it takes its own text colour back. The
   arrow inherits it. */
.ground-ink .btn-primary { color: var(--on-gold); }

/* 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 -- */

/* Cream ground, mono throughout. No call to action lives here: the header pill
   is the only action on the site chrome.

   The footer used to be slate, and that was the mistake: slate is how this site
   marks the money moments — the offer card, the guarantee band, the Start
   closers, the About statement. Spending it on the footer let the furniture
   borrow the emphasis, and on every page that closes in slate the closer and
   the footer fused into one long dark block. The footer is furniture. It takes
   the deeper cream and declares its ground here rather than through a
   .ground-* class, the same way .site-header does: chrome is not a section. */
.site-footer {
  background: var(--paper-2);
  color: var(--text);
  /* Cream on cream is a 1.08:1 step, so on the pages that end on paper — the
     assessment, About, the 404 — the ground change alone does not draw the
     line. The rule does, and it is the same rule the header carries on its
     bottom edge: the chrome is ruled off from the page at both ends. On the
     pages that close in slate the hairline is invisible against the dark and
     costs nothing, which is what keeps this one treatment sitewide. */
  border-top: var(--hair) solid var(--hairline);
  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);
}
.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);
  text-decoration: none;
  border-bottom: var(--hair) solid var(--hairline);
  transition: border-color var(--dur-ui) ease;
}
/* The dark gold, not full --gold: on cream the full gold reads 1.92:1 and the
   rule under the address would all but vanish on hover. */
.footer-links a:hover { border-bottom-color: var(--gold-text); }
/* The other half of the firm. Plainly a link, no gold and no button treatment:
   this points sideways, it does not compete with the assessment. Full ink
   rather than muted — the footer sets these at the label size in mono, and at
   that size the muted grey was the thinnest text on the site. The sideways
   pointing is done by the size and the position, not by dimming the type. */
.footer-sibling {
  margin-top: var(--space-5);
  max-width: var(--measure);
  color: var(--text);
  text-transform: none;
}
.footer-sibling-link {
  margin-top: var(--space-2);
}
.footer-sibling-link a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-ui) ease;
}
.footer-sibling-link a:hover { text-decoration-color: var(--text-muted); }
.footer-legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--hair) solid var(--hairline);
  color: var(--text);
  text-transform: none;
}

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