/* One brand, two complete reading themes. Champagne on graphite, with a readable light theme. */
:root {
  color-scheme: dark;
  --brand-champagne: #dec7a7;
  --brand-ink: #282016;
  --bg: #131313;
  --sidebar: #171717;
  --surface: #1e1e1d;
  --surface-soft: #1a1a19;
  --surface-raised: #23211f;
  --surface-hover: #2a2723;
  --surface-select: #342d24;
  --surface-select-hover: #3b3228;
  --surface-accent: #27231e;
  --surface-inset: #2c2925;
  --border: #35312b;
  --border-detail: #494136;
  --border-strong: #665947;
  --muted: #b5aa9b;
  --quiet: #a99d8c;
  --text: #f3eee7;
  --text-body: #d3c9bc;
  --text-subtle: #c5b7a4;
  --accent: #dec7a7;
  --accent-hover: #eddbc3;
  --accent-ink: #282016;
  --accent-border: #736047;
  --accent-border-strong: #a68b65;
  --track: #41392e;
  --avatar-bg: #393127;
  --avatar-text: #e4d2bb;
  --badge-bg: #3a3024;
  --success-bg: #342f25;
  --success-border: #7c6a4c;
  --neutral-button-bg: #292622;
  --neutral-button-hover: #36302a;
  --notice-bg: #302b23;
  --notice-border: #8d7957;
  --notice-text: #e7d8bc;
  --toast-bg: #352d23;
  --toast-text: #f2dfc3;
  --toast-border: #91764f;
  --nav-bg: #1b1a18f5;
  --nav-solid: #1b1a18;
  --selection-bg: #786345;
  --selection-text: #ffffff;
  --overlay: #080706b3;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f5f1;
  --sidebar: #fdfbf8;
  --surface: #ffffff;
  --surface-soft: #fdfbf8;
  --surface-raised: #f1ece4;
  --surface-hover: #f0e9de;
  --surface-select: #eee2d0;
  --surface-select-hover: #e5d5bd;
  --surface-accent: #f3ebdf;
  --surface-inset: #f0ebe3;
  --border: #ded6ca;
  --border-detail: #cec0ac;
  --border-strong: #aa9474;
  --muted: #6c5b46;
  --quiet: #79664f;
  --text: #29231b;
  --text-body: #514534;
  --text-subtle: #68543b;
  --accent: #76532b;
  --accent-border: #b9a07c;
  --accent-border-strong: #937146;
  --track: #dfd2bf;
  --avatar-bg: #eaddc9;
  --avatar-text: #62472a;
  --badge-bg: #efe2ce;
  --success-bg: #eee5d5;
  --success-border: #b6a27c;
  --neutral-button-bg: #f1eade;
  --neutral-button-hover: #e9dcc9;
  --notice-bg: #f6efdf;
  --notice-border: #bda56f;
  --notice-text: #6a542f;
  --toast-bg: #f0e3cd;
  --toast-text: #604423;
  --toast-border: #b69b71;
  --nav-bg: #fdfbf8f5;
  --nav-solid: #fdfbf8;
  --selection-bg: #e7d3b3;
  --selection-text: #282016;
  --overlay: #2a211675;
}

/* Wordmark: interlocking o/c and a small rising square, shared by both themes. */
.brand {
  gap: 12px;
  padding: 0 5px;
}
.brand-mark {
  display: block;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.brand-wordmark {
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: -.8px;
  font-weight: 620;
}
.brand-wordmark > span { display: block; }
.brand-wordmark .wordmark-club { font-weight: 430; }
.wordmark-stop {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 2px 4px;
  border-radius: 1px;
  background: var(--accent);
}
.primary-button {
  background: var(--brand-champagne);
  color: var(--brand-ink);
}
.primary-button:hover { background: var(--accent-hover); }
.skip-link { background: var(--brand-champagne); color: var(--brand-ink); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 13px;
  border: 1px solid var(--border-detail);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-subtle);
  font-size: 11px;
  white-space: nowrap;
}
.theme-toggle .icon { width: 19px; height: 19px; flex-basis: 19px; }
.theme-toggle:hover { color: var(--text); background: var(--surface-hover); }
.topbar-right { gap: 12px; }
.top-avatar { min-width: 44px; min-height: 44px; font-size: 12px; }
.lesson-tab { min-height: 48px; }
.bookmark-button, .close-button { min-height: 44px; min-width: 44px; }
.breadcrumbs { min-width: 0; }
.preview-label { white-space: nowrap; }
.note-input { scroll-margin-bottom: 105px; }
.lesson-row, .primary-button { scroll-margin-bottom: 100px; }
.lesson-article .inline-term, .inline-term { text-decoration-color: var(--accent-border); }
.article-callout { background: var(--surface-accent); }
.flow-diagram, .knowledge-check { background: var(--surface-accent); }
.progress-panel { background: var(--surface-raised); }
.course-art { color-scheme: dark; }

@media (max-width: 1279px) {
  .brand-mark { width: 46px; height: 46px; }
  .brand-wordmark { font-size: 21px; }
  .brand { gap: 10px; }
  .topbar-right { gap: 8px; }
}

@media (max-width: 767px) {
  .topbar { height: 74px; padding: 0 20px; }
  .mobile-brand { gap: 9px; font-size: 0; line-height: 1; }
  .mobile-brand .brand-mark { width: 38px; height: 38px; }
  .mobile-brand .mobile-wordmark {
    color: var(--text);
    margin: 0;
    font-size: 16px;
    font-weight: 580;
    letter-spacing: -.6px;
    line-height: 1.1;
  }
  .mobile-wordmark .wordmark-club { font-weight: 430; }
  .mobile-brand .wordmark-stop { width: 3px; height: 3px; margin: 0 0 2px 2px; }
  .preview-label { display: none; }
  .theme-toggle { padding: 0; }
  .theme-toggle-label { display: none; }
  .topbar-right { gap: 6px; }
  .top-avatar { width: 44px; height: 44px; }
  main { padding-top: 25px; }
  .page-heading > p { font-size: 13px; line-height: 1.75; }
  .course-info > p { font-size: 12px; line-height: 1.75; }
  .course-meta { font-size: 11px; }
  .lesson-row p { font-size: 11px; }
  .lesson-article { font-size: 15px; line-height: 1.9; }
  .lesson-heading > p { font-size: 13px; line-height: 1.8; }
  .lesson-side-row { min-height: 48px; font-size: 12px; }
  .mobile-curriculum > summary { min-height: 24px; padding: 2px 0; font-size: 12px; }
  .lesson-tab { font-size: 12px; }
  .lesson-tabs { gap: 19px; }
  .lesson-actions > .primary-button { min-height: 50px; font-size: 13px; }
  .quiz-option { min-height: 50px; font-size: 12px; }
  .notes-intro, .notes-label { font-size: 13px; }
  .note-input { font-size: 16px; padding: 16px; }
  .search-field input { font-size: 16px; min-height: 50px; }
  .glossary-grid .term-card p { font-size: 13px; }
  .mobile-nav a, .mobile-nav button { min-height: 48px; font-size: 10px; }
  .mobile-nav { background: var(--nav-bg); border-color: var(--border-detail); }
  .dialog-body > p { font-size: 13px; }
  .faq-item summary { font-size: 13px; padding: 3px 0; }
  .faq-item p { font-size: 12px; }
  .reset-button { min-height: 44px; }
}

@media (max-width: 370px) {
  .topbar { padding: 0 16px; }
  .mobile-brand { gap: 7px; }
  .mobile-brand .brand-mark { width: 34px; height: 34px; }
  .mobile-brand .mobile-wordmark { font-size: 15px; }
  .topbar-right { gap: 3px; }
  .lesson-tabs { gap: 14px; }
  .course-art { min-height: 130px; height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { background: var(--nav-solid); }
}

@media (min-width:768px) and (max-width:1100px) { .preview-label { display:none; } }
.session-logout{font:inherit;font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:9px;min-height:44px;padding:0 12px;cursor:pointer}.session-logout:hover{color:var(--text);background:var(--surface-hover)}@media(max-width:480px){.topbar-right{gap:8px}.topbar-right .top-avatar{display:none}.session-logout{padding:0 10px}}
.additional-section{margin-top:42px}.additional-list{display:grid;gap:16px}.additional-block{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:27px;border:1px solid var(--border-detail);border-radius:15px;background:var(--surface)}.additional-kicker{font-size:10px;letter-spacing:.1em;color:var(--muted)}.additional-block h3{font-size:21px;line-height:1.3;letter-spacing:-.025em;margin:13px 0 10px}.additional-block p{font-size:13px;line-height:1.7;color:var(--text-body);margin:0}.additional-action{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:10px}.additional-action>strong{font-size:23px;letter-spacing:-.02em;white-space:nowrap}.additional-action>small{font-size:11px;color:var(--muted)}.additional-action>button{margin-top:5px;min-height:44px}@media(max-width:767px){.additional-block{grid-template-columns:1fr;gap:22px;padding:23px}.additional-action{align-items:flex-start}.additional-action>button{width:100%;justify-content:center}.additional-block h3{font-size:21px}}


/* Approved OWNER’S CLUB lockup: emblem above the wordmark. */
.brand { display:flex; align-items:center; justify-content:center; gap:0; padding:0; }
.brand-lockup { display:block; width:100%; height:auto; max-width:210px; aspect-ratio:1541/684; object-fit:contain; }
.sidebar .brand { width:100%; max-width:194px; min-height:86px; margin:0 auto; }
.sidebar .nav-label { margin-top:32px; }
.mobile-brand { display:none; }
:root[data-theme="light"] .brand-lockup { filter:brightness(.44) saturate(.7); }
.auth-story .brand { width:260px; max-width:100%; align-self:flex-start; }
.auth-story .brand-lockup { max-width:none; }
.course-art { background:radial-gradient(ellipse at 55% 45%,#554735 0%,#302a22 40%,#201d18 78%); }
.art-line,.art-small { color:#d4bea0; }
.art-number { color:#c4a77e; }
.art-orbit { border-color:#c9b28b24; }
.art-orbit:after { border-color:#c9b28b20; }
.slab { border-color:#d3bd9967; box-shadow:-9px 11px 0 #392f22,-9px 12px 0 #a3875e45,0 23px 32px #08060355; }
.slab:nth-child(1) { background:linear-gradient(135deg,#7d684a,#4a3d2b); }
.slab:nth-child(2) { background:linear-gradient(135deg,#a08963,#665235); }
.slab:nth-child(3) { background:linear-gradient(135deg,#c3ac83,#8b714b); }
.slab:nth-child(4) { background:linear-gradient(135deg,#ead8ba,#b99a6c); box-shadow:-9px 11px 0 #8d7249,-9px 12px 0 #b69a6e,0 2px 25px #dec7a719; }
.slab:nth-child(4):after { color:#655033; }
@media(max-width:767px) {
  .topbar { height:94px; min-height:94px; }
  .mobile-brand { display:flex; align-items:center; justify-content:flex-start; width:150px; flex:0 0 150px; padding:0; }
  .mobile-brand .brand-lockup { width:100%; height:auto; max-width:none; }
  .topbar-right { margin-left:auto; }
  .auth-story { padding:22px 24px; }
  .auth-story .brand { width:190px; align-self:center; }
  .auth-panel { min-height:calc(100dvh - 128px); }
}
@media(max-width:370px) {
  .mobile-brand { width:130px; flex-basis:130px; }
  .topbar-right { gap:5px; }
}