/* ============================================================
   JOIN THE BITCOIN: visual identity. Site-specific.

   WHO THIS IS FOR
   Crypto-curious adults, many hearing about Bitcoin from family,
   the news or a stranger online. Unsure how it works, worried
   about getting scammed, and wary of anyone selling it. They want
   the basics and the risks before anything else.

   WHAT THE DESIGN HAS TO SAY
   Calm and practical, like a safety manual, not a trading screen.
   The crypto look (black screens, glowing gold coins, rocket
   charts) is exactly what the scams use, so this looks like the
   opposite: paper, ruled lines and clearly labeled warnings.

   SIGNATURES
   A numbered lesson path, a "Scam alarm" panel in red with the
   words always written out, a "The one rule" card, and a quiet
   graph-paper ground. Bitcoin orange appears only as a small brand
   mark on the dark header and footer.

   COLOR
   Warm grey paper, graphite ink and buttons, burnt orange links,
   alarm red and safe green on pale washes, slate blue for rules.
   Every pair is checked by the build script.

   TYPE
   Schibsted Grotesk for headings: sturdy, newsroom plain. Bitter
   for reading: a friendly slab that feels like a printed manual.
   ============================================================ */

:root {
  --paper:         #f3f4f1;
  --card:          #ffffff;
  --ink:           #15181d;
  --ink-soft:      #4b5260;
  --graphite:      #2b3038;
  --graphite-deep: #1b1f25;
  --rust:          #9a3412;
  --alarm:         #b42318;
  --alarm-wash:    #fdecea;
  --safe:          #14532d;
  --safe-wash:     #dcfce7;
  --rule:          #1e3a5f;
  --rule-wash:     #e3e9f1;
  --orange:        #f7931a;   /* brand mark on dark grounds only */
  --line:          #dfe2e6;   /* decorative rules only */

  --accent:     var(--graphite);
  --accent-ink: #ffffff;
  --focus:      #1d4ed8;
  --measure:    66ch;

  --display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Bitter', Georgia, 'Times New Roman', serif;
}

[hidden] { display: none !important; }

body {
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
}

.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2, h3 { font-family: var(--display); line-height: 1.12; }
h1 { font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 3.9rem); letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: clamp(1.55rem, 3.2vw, 2.25rem); margin-bottom: 0.6rem; }
h3 { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.3rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--rust); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
a[href^="mailto:"] { overflow-wrap: anywhere; }

.kicker { font-family: var(--display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rust); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 52ch; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.85rem; }
.fact-label { font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.35rem; }

/* ---- Header ------------------------------------------------ */
.site-header { background: var(--graphite-deep); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: #ffffff; text-decoration: none; }
.brand .mark { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); box-shadow: inset 0 0 0 4px var(--graphite-deep), 0 0 0 2px var(--orange); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 600; color: #ffffff; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: #ffffff; color: #ffffff; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--orange); }
.site-header :focus-visible { outline-color: var(--orange); }

main { padding-block: 2.75rem 4rem; }
.hero { padding-bottom: 1.25rem; }
.hero h1 { max-width: 18ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.25rem; }

/* ---- Lesson path ------------------------------------------- */
.lessons { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.lessons li { max-width: none; }
.lessons a { display: grid; grid-template-columns: 2.6rem 1fr; grid-template-rows: auto auto; column-gap: 0.8rem; align-items: center; min-height: 44px; background: var(--card); border: 1px solid var(--ink-soft); border-radius: 12px; padding: 0.9rem 1rem; color: var(--ink); text-decoration: none; }
.lessons a:hover { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.step { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--graphite); color: #ffffff; font-family: var(--display); font-weight: 800; }
.lesson-title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.lesson-sub { font-size: 0.95rem; color: var(--ink-soft); }

/* ---- Rule card, alarm panel -------------------------------- */
.rule-card { background: var(--rule-wash); border-left: 8px solid var(--rule); border-radius: 0 14px 14px 0; padding: clamp(1.25rem, 3vw, 2rem); }
.rule-card .fact-label, .rule-card h2 { color: var(--rule); }
.alarm-panel { background: var(--alarm-wash); border: 2px solid var(--alarm); border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); }
.alarm-panel .fact-label, .alarm-panel h2 { color: var(--alarm); }
.alarm-panel a:not(.btn) { color: var(--alarm); }
.big-figure { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; color: var(--alarm); margin: 0.3rem 0 0.5rem; }
.fig-year { font-size: 0.4em; font-weight: 700; color: var(--ink); vertical-align: middle; }
.signs { margin: 0.8rem 0 0; padding-left: 1.25rem; }
.signs li { margin-bottom: 0.55rem; }

/* ---- Fact cards -------------------------------------------- */
.facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.fact { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--graphite); border-radius: 12px; padding: 1rem 1.1rem 0.9rem; max-width: none; display: flex; flex-direction: column; }
.fact--scams { border-top-color: var(--alarm); }
.fact--scams .fact-label, .fact--scams .fact-figure { color: var(--alarm); }
.fact--rules { border-top-color: var(--rule); }
.fact--rules .fact-label { color: var(--rule); }
.fact--basics .fact-label { color: var(--rust); }
.fact-figure { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.1; margin: 0.1rem 0 0.4rem; }
.source { margin-top: auto; padding-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-soft); }
.alarm-panel .source { margin-top: 0.8rem; }

/* ---- How it works: compare and glossary -------------------- */
.compare { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); margin-top: 1rem; }
.compare-col { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; }
.compare-col .fact-label { color: var(--rust); }
.compare-col ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.compare-col li { margin-bottom: 0.45rem; }
.glossary { margin: 1rem 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; max-width: 52rem; }
.glossary div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); }
.glossary div:last-child { border-bottom: 0; }
.glossary dt { font-family: var(--display); font-weight: 700; }
.glossary dd { margin: 0; }

/* ---- Stay safe: before, report ----------------------------- */
.before { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.8rem; counter-reset: q; max-width: 52rem; }
.before li { counter-increment: q; position: relative; background: var(--safe-wash); border-radius: 12px; padding: 0.9rem 1.1rem 0.9rem 3.4rem; max-width: none; }
.before li::before { content: counter(q); position: absolute; left: 1rem; top: 0.95rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--safe); color: #ffffff; font-family: var(--display); font-weight: 800; }
.before h3 { color: var(--safe); }
.report { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.report li { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--graphite); border-radius: 0 12px 12px 0; padding: 1rem 1.1rem 0.6rem; max-width: none; }
.runby { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.4rem; }
.go { font-family: var(--display); font-weight: 700; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Buttons, forms, prose --------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem; background: var(--graphite); color: #ffffff; border: 2px solid var(--graphite); border-radius: 10px; font-family: var(--display); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--graphite-deep); border-color: var(--graphite-deep); color: #ffffff; }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }
.prose, .narrow { background: transparent; }
.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-family: var(--display); font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; }
.signup button { justify-self: start; }

/* ---- Footer: dark band, orange focus ring ------------------ */
.site-footer { background: var(--graphite-deep); color: var(--paper); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; font-family: var(--display); }
.site-footer a:hover { color: var(--orange); }
.site-footer .fine { color: #c9ced8; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--orange); }

@media (max-width: 30rem) {
  .glossary div { grid-template-columns: 1fr; gap: 0.1rem; }
}
@media (forced-colors: active) {
  .lessons a, .rule-card, .alarm-panel, .fact, .compare-col, .glossary, .before li, .report li, .btn { border: 1px solid; }
}