/* =============================================================
   BASE — reset, document defaults, registers, Golden Master shell
   ============================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  /* No smooth scrolling: the approved interaction inventory lists
     eleven interactions and nothing else moves. Anchor jumps are
     instant and land below the sticky header via scroll-margin-top. */
}

body {
  margin: 0;
  background: var(--fkn-ivory);
  color: var(--fkn-ink);
  font-family: var(--fkn-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

ul, ol {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

a {
  color: var(--fkn-gold-deep);
  text-decoration: none;
}

/* The Golden Master emphasises partner names at weight 600, not at the
   browser's default bold. */
strong {
  font-weight: 600;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection {
  background: var(--fkn-gold);
  color: var(--fkn-night);
}

/* ---------- Focus ----------
   design-freeze.md: 2px gold with offset on light, gold-light on night. */
:focus-visible {
  outline: 2px solid var(--fkn-focus);
  outline-offset: 2px;
  border-radius: var(--fkn-radius-xs);
}

/* ---------- Skip link ---------- */
.fkn-skip {
  position: absolute;
  left: var(--fkn-pad-x);
  top: -100px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--fkn-space-5);
  background: var(--fkn-ink);
  color: var(--fkn-ivory);
  font-family: var(--fkn-font-display);
  font-weight: 600;
  transition: top var(--fkn-duration-fast) var(--fkn-ease);
}

.fkn-skip:focus-visible {
  top: var(--fkn-space-3);
  color: var(--fkn-ivory);
}

/* ---------- Registers ---------- */
.register-night {
  --fkn-focus: var(--fkn-gold-light);
  background: var(--fkn-night);
  color: var(--fkn-text-dark);
}

.register-night a {
  color: var(--fkn-gold-light);
}

/* ---------- Golden Master shell ----------------------------------
   The desktop artboard is exactly 1440 wide. Content is capped there
   and centred, so at and above 1440 the page renders the approved
   endpoint 1:1; below it, padding and gutters scale proportionally.
   Sections that the Golden Master pads directly (02, 04, 05, 08,
   header, footer) keep this padding at every width. Sections built on
   its 12-column grid (01, 03, 07, 09) drop the padding at the desktop
   composition switch and adopt the Golden Master's own grid, whose
   leading gutter column supplies the page margin — see responsive.css. */
.fkn-shell {
  max-width: var(--fkn-artboard);
  margin-inline: auto;
  padding-inline: var(--fkn-pad-x);
}

/* ---------- Typographic primitives (Golden Master literals) ----------
   The Golden Master sets its small labels with the `font:` shorthand, which
   resets leading to normal. Without `line-height: normal` here they would
   inherit the document's 1.6 and sit on a line box several pixels taller
   than the artboard's — invisible in a family/size/weight comparison, but
   it accumulates down the page. */
.fkn-eyebrow {
  font-family: var(--fkn-font-body);
  font-size: var(--fkn-fs-eyebrow);
  font-weight: 600;
  line-height: normal;
  letter-spacing: var(--fkn-ls-eyebrow);
  text-transform: uppercase;
  color: var(--fkn-gold-deep);
}

.fkn-eyebrow--quiet {
  color: var(--fkn-stone-deep);
}

.register-night .fkn-eyebrow {
  color: var(--fkn-gold-light);
}

/* Production-paper meta: coordinates, stamps, image captions. */
.fkn-meta {
  font-family: var(--fkn-font-mono);
  font-size: var(--fkn-fs-meta);
  font-weight: 500;
  line-height: normal;
  letter-spacing: var(--fkn-ls-coords);
  text-transform: uppercase;
  color: var(--fkn-stone-deep);
}

/* Slot stamps sit one step smaller and lighter than the coordinates
   line — Golden Master uses --fkn-stone for these. */
.fkn-stamp-note {
  font-family: var(--fkn-font-mono);
  font-size: var(--fkn-fs-stamp);
  font-weight: 500;
  line-height: normal;
  letter-spacing: var(--fkn-ls-stamp);
  text-transform: uppercase;
  color: var(--fkn-stone);
}

.register-night .fkn-meta {
  color: var(--fkn-meta-dark);
}

.fkn-lead {
  font-size: var(--fkn-fs-lead);
  line-height: var(--fkn-lh-lead);
  color: var(--fkn-text-2);
}

.register-night .fkn-lead {
  color: var(--fkn-text-dark-2);
}

/* Handwritten accent — the organiser's pen. Never an information
   carrier (design-system.md §3), so always aria-hidden in the markup. */
.fkn-hand {
  font-family: var(--fkn-font-hand);
  font-size: var(--fkn-fs-hand);
  font-weight: 600;
  line-height: normal;
  color: var(--fkn-gold-deep);
  transform: rotate(-2.5deg);
  white-space: nowrap;
}

.register-night .fkn-hand {
  color: var(--fkn-gold-light);
}

.fkn-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Anchored sections must clear the sticky header. */
[id] {
  scroll-margin-top: calc(var(--fkn-header-h) + var(--fkn-space-4));
}

main:focus {
  outline: none;
}