/* Shared stylesheet for blog + revenue-diagnostic pages.
  Design tokens mirror index.html's inline styles so new pages match the
  existing brand without touching the homepage/games markup. */

:root {
 --bg: #f3f0eb;
 --surface: #fffaf3;
 --surface-2: #e9e4db;
 --ink: #171717;
 --muted: #5c5a55;
 --line: #d4cdc1;
 --red: #bd1124;
 --red-dark: #8d0e1c;
 --blue: #202f66;
 --green: #214f3b;
 --gold: #a9782b;
 --charcoal: #0f1010;
 --soft-red: #f7e5e4;
 --soft-blue: #e7eaf4;
 --soft-green: #e5eee8;
 --shadow: 0 24px 70px rgba(23, 23, 23, .14);
 --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: "Instrument Sans", sans-serif;
 line-height: 1.45;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

.nav {
 position: sticky;
 top: 0;
 z-index: 50;
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 28px;
 align-items: center;
 min-height: 76px;
 padding: 12px clamp(18px, 4vw, 64px);
 border-bottom: 1px solid rgba(212,205,193,.92);
 background: rgba(243,240,235,.9);
 backdrop-filter: blur(18px);
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 text-decoration: none;
 font-weight: 800;
}

.brand img { width: 58px; height: 58px; object-fit: contain; }
.brand span { display: grid; line-height: 1.05; }
.brand small {
 color: var(--muted);
 font-size: 12px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .08em;
}

.nav-links {
 display: flex;
 justify-content: center;
 gap: clamp(14px, 2.4vw, 30px);
 color: #2e2c29;
 font-size: 14px;
 font-weight: 700;
}

.nav-links a, .button, .text-link { text-decoration: none; }

.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 45px;
 padding: 11px 18px;
 border: 1px solid var(--ink);
 border-radius: 6px;
 background: var(--ink);
 color: #fffaf3;
 font-weight: 800;
 white-space: nowrap;
 cursor: pointer;
 font-size: 15px;
 transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.button:hover { transform: translateY(-1px); background: var(--red); border-color: var(--red); color: #fffaf3; }
.button.secondary { background: transparent; color: var(--ink); }
.button.secondary:hover { color: #fffaf3; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.text-link {
 display: inline-flex;
 align-items: center;
 width: fit-content;
 color: var(--red);
 font-weight: 800;
}

.page-shell { position: relative; z-index: 1; }

.section {
 padding: clamp(48px, 8vw, 108px) clamp(18px, 5vw, 72px);
 border-bottom: 1px solid var(--line);
}

.inner { width: min(1240px, 100%); margin: 0 auto; }
.inner.narrow { width: min(820px, 100%); }

.kicker {
 margin: 0 0 18px;
 color: var(--red);
 font-family: "IBM Plex Mono", monospace;
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: .08em;
}

h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 em, h2 em { color: var(--red); font-style: italic; }

h1 {
 max-width: 950px;
 font-family: "Instrument Serif", serif;
 font-size: clamp(48px, 7vw, 96px);
 font-weight: 400;
 line-height: .95;
}

h2 {
 max-width: 880px;
 font-family: "Instrument Serif", serif;
 font-size: clamp(34px, 5vw, 64px);
 font-weight: 400;
 line-height: .95;
}

h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 800; line-height: 1.1; }

p { margin: 0; color: var(--muted); font-size: 17px; }
.lede { max-width: 760px; margin-top: 20px; color: #302f2b; font-size: clamp(18px, 2vw, 24px); line-height: 1.3; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.card-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1px;
 border: 1px solid var(--line);
 background: var(--line);
}

.card { padding: 24px; background: var(--surface); }
.card h3 { margin-bottom: 12px; }
.card p, .card li { font-size: 16px; }

.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quote {
 min-height: 220px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 24px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--surface);
}
.quote p { color: #34322d; font-size: 17px; }
.quote strong { display: block; margin-top: 22px; color: var(--red); }

.band { background: var(--charcoal); color: var(--surface); }
.band h2, .band h3 { color: var(--surface); }
.band p { color: rgba(255,250,243,.73); }
.band .kicker { color: #ff6a75; }
.band .button { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.band .button.secondary { background: transparent; color: var(--surface); border-color: rgba(255,250,243,.42); }
.band .button.secondary:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }

.contact {
 padding: clamp(44px, 7vw, 80px) clamp(18px, 5vw, 72px);
 background: var(--red);
 color: var(--surface);
}
.contact .inner { display: grid; grid-template-columns: minmax(0, .75fr) minmax(240px, .36fr); gap: 28px; align-items: end; }
.contact h2 { color: var(--surface); }
.contact p, .contact a { color: rgba(255,250,243,.82); }
.contact .button { background: var(--surface); color: var(--red); border-color: var(--surface); }
.contact .button:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

footer { padding: 32px clamp(18px, 5vw, 72px); background: var(--charcoal); color: var(--surface); }
footer .inner { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
footer img { width: 80px; margin-bottom: 10px; border-radius: 6px; }
footer p, footer a { color: rgba(255,250,243,.72); font-size: 15px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; font-weight: 700; }

/* Blog index + posts */
.post-list { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.post-row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 18px;
 align-items: center;
 padding: 26px 28px;
 background: var(--surface);
 text-decoration: none;
}
.post-row h3 { margin-bottom: 8px; color: var(--ink); }
.post-row p { font-size: 16px; }
.post-row .text-link { white-space: nowrap; }

.post-meta {
 display: flex;
 gap: 14px;
 align-items: center;
 margin-bottom: 14px;
 color: var(--muted);
 font-family: "IBM Plex Mono", monospace;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .06em;
}

article.post-body { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; }
article.post-body p { font-size: 18px; line-height: 1.65; color: #302f2b; }
article.post-body h2 { font-size: clamp(28px, 4vw, 40px); margin-top: 12px; }
article.post-body h3 { font-size: 22px; color: var(--red); }
article.post-body ul, article.post-body ol { color: #302f2b; font-size: 18px; line-height: 1.65; padding-left: 22px; }
article.post-body li + li { margin-top: 8px; }
article.post-body blockquote {
 margin: 0;
 padding: 20px 26px;
 border-left: 3px solid var(--red);
 background: var(--soft-red);
 font-size: 19px;
 color: #302f2b;
 font-style: italic;
}

.cta-block {
 padding: 32px;
 border-radius: var(--radius);
 background: var(--charcoal);
 color: var(--surface);
 display: grid;
 gap: 14px;
}
.cta-block h3,
article.post-body .cta-block h3 { color: var(--surface); }
.cta-block p,
article.post-body .cta-block p { color: rgba(255,250,243,.86); font-size: 18px; }
.cta-block .kicker,
article.post-body .cta-block .kicker { color: #ff7a83; }
.cta-block .button { background: var(--red); border-color: var(--red); color: var(--surface); width: fit-content; }
.cta-block .button:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }

/* Revenue diagnostic quiz */
.quiz-shell {
 max-width: 720px;
 margin: 0 auto;
 padding: 36px clamp(20px, 4vw, 44px);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--surface);
 box-shadow: var(--shadow);
}

.quiz-progress {
 height: 6px;
 border-radius: 999px;
 background: var(--surface-2);
 overflow: hidden;
 margin-bottom: 28px;
}
.quiz-progress-fill { height: 100%; background: var(--red); transition: width .25s ease; width: 0%; }

.quiz-step-label {
 font-family: "IBM Plex Mono", monospace;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .08em;
 color: var(--muted);
 margin-bottom: 10px;
}

.quiz-question { font-family: "Instrument Serif", serif; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; margin-bottom: 22px; }

.quiz-options { display: grid; gap: 10px; }
.quiz-option {
 text-align: left;
 padding: 16px 18px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--surface);
 color: var(--ink);
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 transition: border-color .15s ease, background .15s ease;
}
.quiz-option:hover { border-color: var(--red); background: var(--soft-red); }
.quiz-option.selected { border-color: var(--red); background: var(--soft-red); }

.quiz-score-display {
 text-align: center;
 padding: 12px 0 4px;
}
.quiz-score-number {
 font-family: "Instrument Serif", serif;
 font-size: clamp(64px, 12vw, 110px);
 line-height: 1;
 color: var(--red);
}
.quiz-score-label {
 font-weight: 800;
 font-size: 20px;
 margin-top: 6px;
}

.quiz-email-gate { display: grid; gap: 14px; margin-top: 24px; }
.quiz-email-gate input[type="text"], .quiz-email-gate input[type="email"] {
 height: 50px;
 padding: 0 16px;
 border: 1px solid var(--line);
 border-radius: 6px;
 background: var(--bg);
 font-size: 16px;
 font-family: inherit;
}
.quiz-email-gate input[type="text"]:focus, .quiz-email-gate input[type="email"]:focus { outline: 2px solid var(--red); outline-offset: 1px; }

.quiz-breakdown { display: grid; gap: 18px; margin-top: 24px; }
.quiz-breakdown .pillar {
 padding: 20px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--bg);
}
.quiz-breakdown .pillar.weakest { border-color: var(--red); background: var(--soft-red); }
.quiz-breakdown .pillar h3 { font-size: 17px; margin-bottom: 8px; }
.quiz-breakdown .pillar p { font-size: 15px; }

.hidden { display: none !important; }

@media (max-width: 720px) {
 .nav { grid-template-columns: 1fr auto; }
 .nav-links { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
 .card-grid, .quote-grid { grid-template-columns: 1fr; }
 .post-row { grid-template-columns: 1fr; }
 .contact .inner, footer .inner { grid-template-columns: 1fr; }
 footer .footer-links { justify-content: flex-start; }
 .button { width: 100%; }
}

/* Board-style diagnostic report */
.report-shell { display: grid; gap: 22px; }
.report-cover { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.report-cover img { width: 84px; border-radius: 6px; }
.report-cover h2 { font-size: clamp(34px, 5vw, 56px); }
.report-cover p:not(.quiz-step-label) { margin-top: 8px; color: #302f2b; }
.report-scorecard { display: grid; grid-template-columns: minmax(180px, .36fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.report-scorecard > div, .report-constraint, .report-section, .report-metrics > div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.report-scorecard > div { padding: 22px; }
.report-readout p:last-child, .report-constraint p, .plan-card p, .report-note { color: #302f2b; }
.report-constraint { padding: 24px; border-color: var(--red); background: var(--soft-red); }
.report-constraint h3 { margin-bottom: 10px; }
.report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.report-metrics > div { padding: 18px; }
.report-metrics span, .plan-card span, .quiz-breakdown .pillar small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.report-metrics strong { display: block; margin-top: 8px; color: var(--ink); font-size: 18px; line-height: 1.15; }
.report-section { padding: 22px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.plan-card p { margin-top: 8px; font-size: 15px; }
.board-questions { margin: 0; padding-left: 20px; color: #302f2b; }
.board-questions li + li { margin-top: 10px; }
.next-step { background: var(--charcoal); }
.next-step h3, .next-step p { color: var(--surface); }
.next-step p:not(.quiz-step-label) { color: rgba(255,250,243,.76); margin-top: 10px; }
.next-step .button { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.next-step .button.secondary { background: transparent; color: var(--surface); border-color: rgba(255,250,243,.42); }

@media print {
 body { background: #fff; }
 .nav, footer, main > section:first-child, main > section:last-child, #panel-intro, #panel-quiz, #panel-teaser, .next-step .actions { display: none !important; }
 .section { padding: 0; border: 0; }
 .quiz-shell { max-width: none; box-shadow: none; border: 0; padding: 0; }
 .report-shell { gap: 14px; color: #111; }
 .report-cover, .report-scorecard > div, .report-constraint, .report-section, .report-metrics > div, .plan-card { break-inside: avoid; box-shadow: none; }
}

@media (max-width: 720px) {
 .report-scorecard, .report-metrics, .plan-grid { grid-template-columns: 1fr; }
 .report-cover { grid-template-columns: 1fr; }
}

.controls-grid, .memo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.control-card, .memo-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.control-card.weakest { border-color: var(--red); background: var(--soft-red); }
.control-card span, .memo-card span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.control-card h3 { margin-bottom: 8px; font-size: 18px; }
.control-card p, .memo-card p, .report-brief p { color: #302f2b; font-size: 15px; }

@media (max-width: 720px) {
 .controls-grid, .memo-grid { grid-template-columns: 1fr; }
}