/* The Sellers Register: three-page pre-launch site.
   Colours and type follow the design system of 15 October 2026 (file 11, BRD-054 to BRD-056).
   Every page opens on Ink. The body ground changes by tier, following BRD-005:
   the Register on Ledger, the Academy on white paper, the Black Book on Ink.
   One gold thing per view. No gradients, glows or metallic effects.
   Fonts are served from this site, not from a font provider. */

@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --ink: #121417;
  --ink-lift: #1B1E22;   /* Ink lifted slightly for panels on dark: a neutral, not a brand colour */
  --ledger: #F4F2ED;
  --paper: #FFFFFF;
  --gold: #EBA912;       /* 8.98:1 with Ink */
  --gold-deep: #8A6300;  /* gold text on light grounds */
  --quiet-dark: #B9B5AC; /* secondary type on Ink: 9.02:1 */
  --quiet-light: #4A4D52;/* secondary type on Ledger and white */
  --rule-dark: #33363B;
  --rule-light: #D9D5CC;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", Arial, Helvetica, sans-serif;
  --measure: 66rem;
}

/* Tier themes: the body ground below the hero */
.theme-register  { --bg: var(--ledger); --fg: var(--ink);    --quiet: var(--quiet-light); --rule: var(--rule-light); --panel: var(--paper); }
.theme-academy   { --bg: var(--paper);  --fg: var(--ink);    --quiet: var(--quiet-light); --rule: var(--rule-light); --panel: var(--ledger); }
.theme-blackbook { --bg: var(--ink);    --fg: var(--ledger); --quiet: var(--quiet-dark);  --rule: var(--rule-dark);  --panel: var(--ledger); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ledger); color: var(--ink); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2.5rem; } }

/* Dark band: masthead, hero and footer on every page */
.dark { background: var(--ink); color: var(--ledger); }
.dark .quiet, .dark .standfirst { color: var(--quiet-dark); }

/* Masthead and navigation */
.masthead { border-bottom: 1px solid var(--rule-dark); }
.masthead .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.01em; text-decoration: none; }
.wordmark img { height: 2rem; width: auto; display: block; }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.nav a { text-decoration: none; color: var(--quiet-dark); padding: 0.35rem 0; display: inline-block; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ledger); }
.nav a[aria-current="page"] { color: var(--ledger); border-bottom-color: var(--ledger); }

/* Hero */
.hero { padding: 4.5rem 0 4.5rem; }
@media (min-width: 48rem) { .hero { padding: 7rem 0 6.5rem; } }
.eyebrow { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; color: var(--quiet); }
.dark .eyebrow { color: var(--quiet-dark); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.6rem, 8vw, 5rem); letter-spacing: -0.015em; max-width: 14ch; }
.standfirst { font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5; margin: 1.75rem 0 2.5rem; max-width: 36rem; }

/* The one gold thing in view: the primary button */
.button {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.95rem 1.5rem;
  border-radius: 2px;
}
.button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Sections */
section { padding: 4rem 0; border-top: 1px solid var(--rule); }
main section:first-child { border-top: 0; }
.section-head { margin-bottom: 1.75rem; }
@media (min-width: 48rem) {
  section { padding: 5.5rem 0; display: grid; grid-template-columns: 17rem 1fr; gap: 3rem; }
  .section-head { margin-bottom: 0; }
}
h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
p { margin: 0 0 1rem; max-width: 40rem; }
.lead { font-size: 1.2rem; }

.parts { display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 40rem) { .parts { grid-template-columns: 1fr 1fr; } }
.part { padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 40rem) {
  .part:nth-child(odd) { padding-right: 2rem; border-right: 1px solid var(--rule); }
  .part:nth-child(even) { padding-left: 2rem; }
}
.part p { margin-bottom: 0; color: var(--quiet); }
.part .more { display: inline-block; margin-top: 0.9rem; font-weight: 600; color: var(--fg); }

.proof { font-family: var(--serif); font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.15; margin: 3rem 0 0; }

/* Numbered steps (Black Book) */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--quiet); font-variant-numeric: tabular-nums; }
.steps p { margin: 0; color: var(--quiet); }

/* Join: the form sits on a light panel on every page, so the EmailOctopus form reads the same everywhere */
.join-panel { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); padding: 2rem 1.5rem; }
@media (min-width: 48rem) { .join-panel { padding: 2.75rem; } }
.join-panel p { color: var(--ink); }
.join-panel .small { color: var(--quiet-light); }
.join-panel a { color: var(--ink); }
.form-slot { margin: 1.5rem 0; min-height: 4rem; }
.small { font-size: 0.92rem; color: var(--quiet); }

/* Footer */
footer { border-top: 1px solid var(--rule-dark); padding: 2.5rem 0 3.5rem; font-size: 0.9rem; color: var(--quiet-dark); }
footer p { max-width: 50rem; margin-bottom: 0.6rem; }
footer a { color: var(--ledger); }
.legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: 0.95rem; }