/* ============================================================================
   Windlume · ORG brand theme  —  "Parchment & Oxblood"  (light)
                                   "Nocturne"            (dark variant)
   ----------------------------------------------------------------------------
   Activated ONLY on windlume.org (and any *.windlume.org host) by
   <html data-brand="org">, which is set by a tiny inline script placed at the
   very top of <head> on every page (before any stylesheet) so there is no FOUC.
   windlume.com never gets data-brand -> none of these rules match -> the COM
   site (Sky / Night) is byte-for-byte unaffected.

   Design intent: a printed-book / letterpress look, deliberately the opposite
   of Sky (soft sky-blue gradients, 24px rounded glass cards, glow blobs) and
   of Night (deep navy, neon-violet monospace grid).

     · palette  : warm parchment paper + oxblood accent + burnt ochre +
                  bottle green.  NO sky blue anywhere.
     · type     : serif everywhere (Iowan/Palatino/Georgia); small labels in
                  uppercase monospace.  COM stays system sans.
     · shape    : 2-3px near-square corners, 1.5px ink rules, hard offset
                  "letterpress" shadows (no blurry blue glow).
     · layout   : home page becomes a left-aligned broadsheet with a double
                  masthead rule (COM is a centered floating card).
     · motion   : the light-sweep glint is removed; buttons "press" into the
                  page instead of floating up.
   Contrast: every text/background pair below is >= 4.5:1 (verified).
   color-scheme is declared so UA form controls / scrollbars stay legible.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
html[data-brand="org"] {
  /* --- brand palette (light "Parchment & Oxblood") --- */
  --o-paper:       #f6eeda;   /* page */
  --o-surface:     #fffaf0;   /* cards  */
  --o-surface-2:   #f1e6cd;   /* inner panels / hover */
  --o-sunk:        #e9ddc0;   /* sunk wells */
  --o-ink:         #241f18;   /* headings / primary text  (13.6:1 on paper) */
  --o-ink-2:       #453d2e;   /* body text                (10.1:1) */
  --o-ink-3:       #6d6350;   /* muted                    ( 5.1:1) */
  --o-ink-4:       #736850;   /* faint labels             ( 4.8:1 on paper) */
  --o-rule:        #cdbb95;   /* hairlines */
  --o-rule-2:      #dbccab;
  --o-rule-strong: #8a7550;   /* button outlines */
  --o-accent:      #8a1c2b;   /* oxblood  (8.8:1 on surface) */
  --o-accent-ink:  #fffaf0;   /* text ON oxblood (9.1:1) */
  --o-accent-2:    #9a5a18;   /* burnt ochre (4.7:1 on paper) */
  --o-accent-3:    #2f5d50;   /* bottle green */
  --o-ok:          #2c6a4c;
  --o-ok-bg:       #e6f0e7;
  --o-warn-bg:     #fbefd6;
  --o-danger:      #9b2226;
  --o-danger-bg:   #fbe8e4;
  --o-ring:        rgba(138, 28, 43, .26);
  --o-sh:          3px 3px 0 rgba(36, 31, 24, .16);
  --o-sh-hi:       5px 5px 0 rgba(36, 31, 24, .22);
  --o-sh-xs:       2px 2px 0 rgba(36, 31, 24, .12);
  --o-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --o-mono:  ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  color-scheme: light;

  /* --- remap the shared design-system tokens onto the brand palette --- */
  --sky-50:  var(--o-surface-2);
  --sky-100: var(--o-sunk);
  --sky-200: var(--o-rule-2);
  --sky-300: var(--o-rule);
  --sky-400: var(--o-accent-2);
  --sky-500: var(--o-accent);
  --sky-600: var(--o-accent);
  --sky-700: var(--o-accent);
  --sky-900: var(--o-ink);

  --gold-50:  var(--o-warn-bg);
  --gold-100: var(--o-sunk);
  --gold-200: var(--o-rule);
  --gold-300: var(--o-rule-strong);
  --gold-400: var(--o-accent-2);
  --gold-500: var(--o-accent-2);
  --gold-600: var(--o-accent-2);

  --teal-300: var(--o-rule);
  --teal-400: var(--o-accent-3);
  --teal-500: var(--o-accent-3);
  --teal-700: var(--o-accent-3);

  --ink-900: var(--o-ink);
  --ink-700: var(--o-ink-2);
  --ink-600: var(--o-ink-2);
  --ink-500: var(--o-ink-3);
  --ink-400: var(--o-ink-4);
  --ink-300: var(--o-rule);
  --ink-200: var(--o-rule-2);
  --ink-100: var(--o-sunk);

  --bg-app: var(--o-paper);
  --grad-primary: linear-gradient(135deg, var(--o-accent), var(--o-accent-2));
  --grad-sat:     linear-gradient(135deg, var(--o-accent-2), var(--o-accent));
  --grad-fast:    linear-gradient(135deg, var(--o-rule-strong), var(--o-accent-2));
  --grad-math:    linear-gradient(135deg, var(--o-accent-3), var(--o-ink));
  --grad-review:  linear-gradient(135deg, var(--o-accent), var(--o-accent-3));
  --grad-voron:   linear-gradient(135deg, var(--o-ink-4), var(--o-ink-2));
  --grad-gold:    linear-gradient(135deg, var(--o-accent-2), var(--o-rule-strong));

  --r-sm: 2px; --r-md: 2px; --r-lg: 3px; --r-xl: 3px; --r-pill: 2px;

  --sh-xs: var(--o-sh-xs);
  --sh-sm: var(--o-sh-xs);
  --sh-md: var(--o-sh);
  --sh-lg: var(--o-sh-hi);
  --sh-xl: var(--o-sh-hi);
  --sh-gold: 3px 3px 0 rgba(168, 98, 26, .3);
}

/* --- dark variant: same rules, different palette ------------------------- */
html[data-brand="org"][data-theme="night"] {
  --o-paper:       #17140f;
  --o-surface:     #221d16;
  --o-surface-2:   #2c2519;
  --o-sunk:        #302820;
  --o-ink:         #f4ead6;   /* 12.9:1 on paper */
  --o-ink-2:       #ddd0b6;   /* 10.3:1 */
  --o-ink-3:       #a89a7e;   /*  6.4:1 */
  --o-ink-4:       #94886c;   /*  5.3:1 */
  --o-rule:        #4a3f2c;
  --o-rule-2:      #3a3225;
  --o-rule-strong: #7a6742;
  --o-accent:      #e0a35c;   /*  8.3:1 on paper */
  --o-accent-ink:  #1c1710;
  --o-accent-2:    #c9803a;
  --o-accent-3:    #7fb39a;
  --o-ok:          #8fd0ad;
  --o-ok-bg:       #1e2a22;
  --o-warn-bg:     #2a2216;
  --o-danger:      #e88a8a;
  --o-danger-bg:   #2c1c1c;
  --o-ring:        rgba(224, 163, 92, .3);
  --o-sh:          3px 3px 0 rgba(0, 0, 0, .5);
  --o-sh-hi:       5px 5px 0 rgba(0, 0, 0, .62);
  --o-sh-xs:       2px 2px 0 rgba(0, 0, 0, .42);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ page */
html[data-brand="org"] body,
html[data-brand="org"] body.wl {
  font-family: var(--o-serif) !important;
  background: var(--o-paper) !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(90, 70, 40, .05) 0 1px, transparent 1px 30px) !important;
  color: var(--o-ink-2) !important;
  -webkit-font-smoothing: auto;
}
html[data-brand="org"][data-theme="night"] body,
html[data-brand="org"][data-theme="night"] body.wl {
  background-image:
    repeating-linear-gradient(0deg, rgba(230, 200, 150, .045) 0 1px, transparent 1px 30px) !important;
}
html[data-brand="org"] ::selection { background: var(--o-accent); color: var(--o-accent-ink); }
html[data-brand="org"] *:focus-visible { outline: 2px solid var(--o-accent) !important; outline-offset: 2px; }
html[data-brand="org"] a { color: var(--o-accent); }

/* kill the sky glow blobs + sparkles — flat paper instead */
html[data-brand="org"] .glow,
html[data-brand="org"] .wl-glow,
html[data-brand="org"] .spark { display: none !important; }

/* ---------------------------------------------------------------- headings */
html[data-brand="org"] h1,
html[data-brand="org"] h2,
html[data-brand="org"] h3,
html[data-brand="org"] h4,
html[data-brand="org"] .ptitle,
html[data-brand="org"] .name,
html[data-brand="org"] .sess-date,
html[data-brand="org"] .wl-t-head {
  font-family: var(--o-serif) !important;
  color: var(--o-ink) !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
}
html[data-brand="org"] h1 { text-transform: none; }

/* short labels -> uppercase monospace (gives serif+mono editorial mix) */
html[data-brand="org"] .sec,
html[data-brand="org"] .qnum,
html[data-brand="org"] .pnum,
html[data-brand="org"] .qhead,
html[data-brand="org"] .setnav-lbl,
html[data-brand="org"] .modlabel,
html[data-brand="org"] .chip,
html[data-brand="org"] .pill,
html[data-brand="org"] .wl-pill,
html[data-brand="org"] .foot,
html[data-brand="org"] .f label,
html[data-brand="org"] .wlact-num,
html[data-brand="org"] .wl-t-head {
  font-family: var(--o-mono) !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
}

/* editorial sub-lines stay serif italic */
html[data-brand="org"] .sub,
html[data-brand="org"] .desc,
html[data-brand="org"] .meta,
html[data-brand="org"] .sess-meta,
html[data-brand="org"] .wl-meta,
html[data-brand="org"] .cite,
html[data-brand="org"] .sumline,
html[data-brand="org"] .cloudnote {
  font-family: var(--o-serif) !important;
  color: var(--o-ink-3) !important;
}
html[data-brand="org"] .meta b,
html[data-brand="org"] .sess-meta b,
html[data-brand="org"] .wl-meta b,
html[data-brand="org"] .sumline b,
html[data-brand="org"] .note strong,
html[data-brand="org"] .name { color: var(--o-accent) !important; }

html[data-brand="org"] .stem {
  font-family: var(--o-serif) !important;
  color: var(--o-ink) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}
html[data-brand="org"] .passage {
  font-family: var(--o-serif) !important;
  color: var(--o-ink-2) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
html[data-brand="org"] .ptitle { text-transform: uppercase; letter-spacing: 1.4px !important; font-size: 13px !important; }
html[data-brand="org"] .back { color: var(--o-accent) !important; font-family: var(--o-mono) !important; }

/* ------------------------------------------------- cards / wells / rules */
html[data-brand="org"] .card,
html[data-brand="org"] .q,
html[data-brand="org"] .qcard,
html[data-brand="org"] .wl-card,
html[data-brand="org"] .passage,
html[data-brand="org"] .sess,
html[data-brand="org"] .note,
html[data-brand="org"] .startbox,
html[data-brand="org"] .spec,
html[data-brand="org"] .formulas,
html[data-brand="org"] .stats,
html[data-brand="org"] .modbar,
html[data-brand="org"] .qwrap,
html[data-brand="org"] .wl-contact-pop,
html[data-brand="org"] .setitem,
html[data-brand="org"] .gridnav {
  background: var(--o-surface) !important;
  border: 1.5px solid var(--o-rule) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--o-sh) !important;
  color: var(--o-ink-2) !important;
}
html[data-brand="org"] .sess-body,
html[data-brand="org"] .fb,
html[data-brand="org"] .filters,
html[data-brand="org"] .pager,
html[data-brand="org"] .qjump,
html[data-brand="org"] [class*="setnav"] {
  background: var(--o-surface-2) !important;
  border-color: var(--o-rule) !important;
  border-radius: var(--r-md) !important;
  color: var(--o-ink-2) !important;
}
html[data-brand="org"] .sess.open { border-color: var(--o-accent) !important; box-shadow: var(--o-sh-hi) !important; }
html[data-brand="org"] .sess-head:hover { background: var(--o-surface-2) !important; }
html[data-brand="org"] .sess-head { color: var(--o-ink) !important; }
html[data-brand="org"] .ribbon .badge { background: var(--o-accent) !important; color: var(--o-accent-ink) !important; border-radius: 2px !important; font-family: var(--o-mono) !important; }
html[data-brand="org"] .ribbon .hint { color: var(--o-ink-3) !important; }
html[data-brand="org"] .chip.mode { color: var(--o-accent-2) !important; background: var(--o-warn-bg) !important; border-color: var(--o-rule) !important; }
html[data-brand="org"] .acc .pct { color: var(--o-accent) !important; font-family: var(--o-mono) !important; }
html[data-brand="org"] .acc .pct.low { color: var(--o-accent-2) !important; }
html[data-brand="org"] .bad { color: var(--o-danger) !important; }
html[data-brand="org"] .good { color: var(--o-ok) !important; }
html[data-brand="org"] .missing, html[data-brand="org"] .empty, html[data-brand="org"] .soon { color: var(--o-ink-3) !important; }

/* --------------------------------------------------------------- buttons */
html[data-brand="org"] .btn,
html[data-brand="org"] .wl-btn,
html[data-brand="org"] .nbtn,
html[data-brand="org"] .tab,
html[data-brand="org"] .optbtn,
html[data-brand="org"] .chkbtn,
html[data-brand="org"] .timerbtn,
html[data-brand="org"] .snbtn,
html[data-brand="org"] .pager-btn,
html[data-brand="org"] .newset,
html[data-brand="org"] .wlact-btn,
html[data-brand="org"] .wlact-chip,
html[data-brand="org"] .canclepick,
html[data-brand="org"] .cancelpick {
  border-radius: 2px !important;
  font-family: var(--o-mono) !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  background: var(--o-surface) !important;
  color: var(--o-ink) !important;
  border: 1.5px solid var(--o-rule-strong) !important;
  box-shadow: var(--o-sh-xs) !important;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease !important;
}
html[data-brand="org"] .btn:hover,
html[data-brand="org"] .wl-btn:hover,
html[data-brand="org"] .nbtn:hover,
html[data-brand="org"] .tab:hover,
html[data-brand="org"] .snbtn:hover,
html[data-brand="org"] .pager-btn:hover,
html[data-brand="org"] .wlact-btn:hover,
html[data-brand="org"] .wlact-chip:hover {
  background: var(--o-surface-2) !important;
  color: var(--o-ink) !important;
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 rgba(36, 31, 24, .18) !important;
}
html[data-brand="org"] .btn.primary,
html[data-brand="org"] .wl-btn.primary,
html[data-brand="org"] .wl-btn-primary,
html[data-brand="org"] .nbtn.primary,
html[data-brand="org"] .btn.all,
html[data-brand="org"] .tab.active,
html[data-brand="org"] .optbtn.sel,
html[data-brand="org"] .snbtn.done,
html[data-brand="org"] .snbtn.active,
html[data-brand="org"] .wlact-btn.primary,
html[data-brand="org"] .wlact-chip.on {
  background: var(--o-accent) !important;
  color: var(--o-accent-ink) !important;
  border-color: var(--o-accent) !important;
  box-shadow: var(--o-sh) !important;
}
html[data-brand="org"] .btn.primary:hover,
html[data-brand="org"] .wl-btn.primary:hover,
html[data-brand="org"] .btn.all:hover,
html[data-brand="org"] .wlact-btn.primary:hover {
  background: var(--o-accent) !important;
  filter: brightness(1.08);
}
/* letterpress: no sweeping glint, no float */
html[data-brand="org"] .wl-btn::after { display: none !important; }
html[data-brand="org"] .wl-btn:hover { transform: translate(1px, 1px) !important; }
html[data-brand="org"] .wl-btn:active { transform: translate(2px, 2px) !important; box-shadow: none !important; }
html[data-brand="org"] .wl-btn.sat { border-left: 5px solid var(--o-accent-2) !important; }
html[data-brand="org"] .wl-btn.ghost { border-left: 5px solid var(--o-accent-3) !important; }

/* --------------------------------------------------------------- options */
html[data-brand="org"] .opt,
html[data-brand="org"] .optrow,
html[data-brand="org"] .retry .optbtn,
html[data-brand="org"] .wlact-opt {
  background: var(--o-surface) !important;
  border: 1.5px solid var(--o-rule) !important;
  border-left: 4px solid var(--o-accent-2) !important;
  border-radius: 2px !important;
  color: var(--o-ink-2) !important;
  box-shadow: none !important;
  transition: background .12s ease, border-color .12s ease !important;
}
html[data-brand="org"] .opt:hover:not(.locked),
html[data-brand="org"] .optrow:hover,
html[data-brand="org"] .retry .optbtn:hover:not(:disabled),
html[data-brand="org"] .wlact-opt:hover:not(.locked) {
  background: var(--o-surface-2) !important;
  border-color: var(--o-accent) !important;
  border-left-color: var(--o-accent) !important;
}
html[data-brand="org"] .opt.sel,
html[data-brand="org"] .opt.pending,
html[data-brand="org"] .opt.pend,
html[data-brand="org"] .opt.chosen,
html[data-brand="org"] .optrow.sel,
html[data-brand="org"] .retry .optbtn.sel,
html[data-brand="org"] .wlact-opt.pend,
html[data-brand="org"] .wlact-opt.chosen {
  border-color: var(--o-accent) !important;
  border-left-color: var(--o-accent) !important;
  background: var(--o-surface-2) !important;
  box-shadow: inset 3px 0 0 var(--o-accent) !important;
}
html[data-brand="org"] .opt .k,
html[data-brand="org"] .optrow .k,
html[data-brand="org"] .retry .optbtn .k,
html[data-brand="org"] .opt .lt,
html[data-brand="org"] .wlact-opt .lt {
  color: var(--o-accent) !important;
  font-family: var(--o-mono) !important;
}
/* correct / revealed */
html[data-brand="org"] .opt.correct,
html[data-brand="org"] .opt.answer-revealed,
html[data-brand="org"] .optrow.right,
html[data-brand="org"] .wlact-opt.correct {
  background: var(--o-ok-bg) !important;
  border-color: var(--o-ok) !important;
  border-left-color: var(--o-ok) !important;
  color: var(--o-ink) !important;
}
html[data-brand="org"] .opt.correct .k,
html[data-brand="org"] .opt.answer-revealed .k,
html[data-brand="org"] .optrow.right .k,
html[data-brand="org"] .wlact-opt.correct .k { color: var(--o-ok) !important; }
/* wrong / mine */
html[data-brand="org"] .opt.wrong,
html[data-brand="org"] .optrow.mine,
html[data-brand="org"] .wlact-opt.wrong {
  background: var(--o-danger-bg) !important;
  border-color: var(--o-danger) !important;
  border-left-color: var(--o-danger) !important;
  color: var(--o-ink) !important;
}
html[data-brand="org"] .opt.wrong .k,
html[data-brand="org"] .optrow.mine .k,
html[data-brand="org"] .wlact-opt.wrong .k { color: var(--o-danger) !important; }
html[data-brand="org"] .optrow.mine .tagm { color: var(--o-danger) !important; }
html[data-brand="org"] .optrow.right .tagm { color: var(--o-ok) !important; }

/* WL-NOREVEAL badges "你的答案 / 正确答案" */
html[data-brand="org"] .opt.is-yours::after {
  background: var(--o-sunk) !important; color: var(--o-ink-3) !important;
  border: 1px solid var(--o-rule) !important; border-radius: 2px !important;
  font-family: var(--o-mono) !important;
}
html[data-brand="org"] .opt.wrong.is-yours::after {
  background: var(--o-danger-bg) !important; color: var(--o-danger) !important; border-color: var(--o-danger) !important;
}
html[data-brand="org"] .opt.answer-revealed::after {
  background: var(--o-ok-bg) !important; color: var(--o-ok) !important; border-color: var(--o-ok) !important;
  border-radius: 2px !important; font-family: var(--o-mono) !important;
}

/* ------------------------------------------------------- explain / why */
html[data-brand="org"] .explain {
  background: var(--o-surface-2) !important;
  border: 0 !important;
  border-left: 4px solid var(--o-accent) !important;
  border-radius: 0 2px 2px 0 !important;
  color: var(--o-ink-2) !important;
}
html[data-brand="org"] .explain b,
html[data-brand="org"] .explain strong { color: var(--o-accent) !important; }
html[data-brand="org"] .explain.inert {
  background: var(--o-sunk) !important;
  border-left-color: var(--o-rule-strong) !important;
  color: var(--o-ink-3) !important;
}
html[data-brand="org"] .why {
  background: var(--o-warn-bg) !important;
  border: 1.5px solid var(--o-rule) !important;
  border-radius: 2px !important;
  color: var(--o-ink-2) !important;
}
html[data-brand="org"] .why b { color: var(--o-accent-2) !important; }
html[data-brand="org"] .wlact-why {
  background: var(--o-surface-2) !important;
  border: 1.5px solid var(--o-rule) !important;
  border-radius: 2px !important;
  color: var(--o-ink-2) !important;
}
html[data-brand="org"] .wlact-why b { color: var(--o-accent) !important; }
html[data-brand="org"] .wlact-score {
  background: var(--o-sunk) !important; color: var(--o-accent) !important;
  border-radius: 2px !important; font-family: var(--o-mono) !important;
}
html[data-brand="org"] .wlact-timer { color: var(--o-accent) !important; font-family: var(--o-mono) !important; }
html[data-brand="org"] .wlact-sethead { border-bottom: 3px double var(--o-rule) !important; }
html[data-brand="org"] .wlact-setname { color: var(--o-accent) !important; font-family: var(--o-serif) !important; }

/* ------------------------------------- WL-CONFIRM / WL-KEYCONFIRM bars */
html[data-brand="org"] .askbar,
html[data-brand="org"] .wlkeyask {
  background: var(--o-warn-bg) !important;
  border: 1.5px solid var(--o-accent-2) !important;
  border-radius: 2px !important;
  box-shadow: var(--o-sh-hi) !important;
}
html[data-brand="org"] .askmsg,
html[data-brand="org"] .wlkeyask-msg {
  color: var(--o-accent) !important;
  font-family: var(--o-serif) !important;
}
html[data-brand="org"] .wlkeyask-hint { color: var(--o-ink-3) !important; }
html[data-brand="org"] .askyes,
html[data-brand="org"] .btn.wlkeyask-yes {
  background: var(--o-accent) !important;
  color: var(--o-accent-ink) !important;
  border-color: var(--o-accent) !important;
}
html[data-brand="org"] .askno,
html[data-brand="org"] .btn.wlkeyask-no {
  background: var(--o-surface) !important;
  color: var(--o-accent) !important;
  border-color: var(--o-rule-strong) !important;
}
html[data-brand="org"] .anskey.asking {
  border-color: var(--o-accent) !important;
  box-shadow: 0 0 0 3px var(--o-ring) !important;
}
html[data-brand="org"] .btn.all.asking { box-shadow: 0 0 0 3px var(--o-ring) !important; }
html[data-brand="org"] .wlkeyask, html[data-brand="org"] .wlkeyask-msg,
html[data-brand="org"] .wlkeyask-hint, html[data-brand="org"] .explain.inert,
html[data-brand="org"] .opt.answer-revealed { color: var(--o-ink-2); }

/* ---------------------------------------------------- misc components */
html[data-brand="org"] .score {
  background: var(--o-sunk) !important; color: var(--o-accent) !important;
  border-radius: 2px !important; font-family: var(--o-mono) !important;
}
html[data-brand="org"] .timer { color: var(--o-accent) !important; font-family: var(--o-mono) !important; }
html[data-brand="org"] .timer.low { color: var(--o-danger) !important; }
html[data-brand="org"] .f select,
html[data-brand="org"] .f input,
html[data-brand="org"] .f input[type="date"] {
  background: var(--o-surface) !important;
  border: 1.5px solid var(--o-rule) !important;
  border-radius: 2px !important;
  color: var(--o-ink) !important;
  font-family: var(--o-mono) !important;
}
html[data-brand="org"] .f.chk input { accent-color: var(--o-accent) !important; }
html[data-brand="org"] .src a { color: var(--o-accent) !important; }
html[data-brand="org"] .lede { color: var(--o-ink-2) !important; font-family: var(--o-serif) !important; }
html[data-brand="org"] .hint { color: var(--o-ink-4) !important; }
html[data-brand="org"] .topic, html[data-brand="org"] .target { color: var(--o-accent-2) !important; }
html[data-brand="org"] .colophon, html[data-brand="org"] footer { color: var(--o-ink-3) !important; }
html[data-brand="org"] footer a { color: var(--o-accent) !important; }
html[data-brand="org"] .wl-legal { color: var(--o-ink-3) !important; }
html[data-brand="org"] .wl-fold summary { color: var(--o-accent) !important; font-family: var(--o-mono) !important; }
html[data-brand="org"] details.note summary { color: var(--o-accent) !important; }

/* --------------------------------------------------- masthead (content pages) */
html[data-brand="org"] header {
  text-align: left !important;
  border-bottom: 3px double var(--o-rule) !important;
  padding-bottom: 14px !important;
}
html[data-brand="org"] header h1 { letter-spacing: 1.2px !important; }

/* ============================================================ HOME PAGE
   Scoped under .shell, which exists only on index.html, so nothing else
   is affected.  Turns the centred floating card into a left-aligned
   broadsheet with a double masthead rule and squared index entries.
   ==================================================================== */
html[data-brand="org"] .shell {
  max-width: 940px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 40px 22px 54px !important;
}
html[data-brand="org"] body.wl { display: block !important; padding: 0 !important; }
html[data-brand="org"] .shell .panel {
  display: block !important;
  text-align: left !important;
  padding: 26px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 3px double var(--o-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-brand="org"] .logo-wrap {
  width: auto !important; height: auto !important; margin: 0 0 14px !important;
  display: flex; align-items: center; gap: 14px;
}
html[data-brand="org"] .logo-halo { display: none !important; }
html[data-brand="org"] .logo-mark {
  width: 54px !important; height: 54px !important;
  border-radius: 2px !important;
  background: var(--o-accent) !important;
  box-shadow: 4px 4px 0 rgba(36, 31, 24, .22) !important;
}
html[data-brand="org"] .logo-mark svg { width: 28px !important; height: 28px !important; }
html[data-brand="org"] .shell h1 {
  font-size: 46px !important;
  line-height: 1.02 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid var(--o-rule) !important;
}
html[data-brand="org"] .tagline {
  font-family: var(--o-serif) !important;
  font-style: italic !important;
  font-size: 15px !important;
  color: var(--o-accent-2) !important;
  margin: 0 0 20px !important;
}
html[data-brand="org"] .blurb {
  font-family: var(--o-serif) !important;
  font-size: 16.5px !important;
  line-height: 1.85 !important;
  color: var(--o-ink-2) !important;
  max-width: 62ch !important;
  margin: 0 0 28px !important;
}
html[data-brand="org"] .blurb em { color: var(--o-accent) !important; font-style: italic; font-weight: inherit !important; }
html[data-brand="org"] .blurb .gold { color: var(--o-accent-2) !important; }
html[data-brand="org"] .grid-main {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin: 0 0 26px !important;
}
html[data-brand="org"] .grid-main .wl-btn {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  padding: 16px 18px !important;
  font-size: 13.5px !important;
  border-left-width: 6px !important;
}
html[data-brand="org"] .minor {
  border-top: 1.5px solid var(--o-rule) !important;
  padding-top: 14px !important;
}
html[data-brand="org"] .minor a { color: var(--o-ink-3) !important; font-family: var(--o-mono) !important; }
html[data-brand="org"] .minor a:hover { color: var(--o-accent) !important; }
html[data-brand="org"] .foot {
  border-top: 1.5px solid var(--o-rule) !important;
  padding-top: 12px !important;
  color: var(--o-ink-4) !important;
}
html[data-brand="org"] .foot a { color: var(--o-accent) !important; }

/* --------------------------------------------- theme switcher FAB/panel */
html[data-brand="org"] #wlThemeFab {
  background: var(--o-accent) !important;
  color: var(--o-accent-ink) !important;
  border: 1.5px solid var(--o-accent) !important;
  border-radius: 2px !important;
  font-family: var(--o-mono) !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  box-shadow: var(--o-sh) !important;
}
html[data-brand="org"] #wlThemeFab:hover { background: var(--o-accent) !important; filter: brightness(1.08); transform: translate(1px, 1px) !important; }
html[data-brand="org"] #wlThemeFab.active { background: var(--o-ink) !important; color: var(--o-paper) !important; }
html[data-brand="org"] #wlThemePanel {
  background: var(--o-surface) !important;
  border: 1.5px solid var(--o-rule-strong) !important;
  border-radius: 2px !important;
  box-shadow: var(--o-sh-hi) !important;
  font-family: var(--o-serif) !important;
}
html[data-brand="org"] .wl-t-head { color: var(--o-ink-3) !important; }
html[data-brand="org"] .wl-t-item { border-radius: 2px !important; }
html[data-brand="org"] .wl-t-item b { color: var(--o-ink) !important; font-family: var(--o-serif) !important; }
html[data-brand="org"] .wl-t-item i { color: var(--o-ink-3) !important; font-family: var(--o-serif) !important; }
html[data-brand="org"] .wl-t-item:hover { background: var(--o-surface-2) !important; }
html[data-brand="org"] .wl-t-item.active { background: var(--o-sunk) !important; box-shadow: inset 0 0 0 2px var(--o-accent) !important; }
html[data-brand="org"] .wl-t-sw em { border-radius: 1px !important; box-shadow: 0 0 0 1px var(--o-rule-strong) !important; }

/* ------------------------------------------------- small-screen tuning */
@media (max-width: 620px) {
  html[data-brand="org"] .shell { padding: 26px 16px 44px !important; }
  html[data-brand="org"] .shell h1 { font-size: 32px !important; letter-spacing: 2px !important; }
  html[data-brand="org"] .grid-main { grid-template-columns: 1fr !important; }
  html[data-brand="org"] .blurb { font-size: 15.5px !important; }
}
@media print {
  html[data-brand="org"] body,
  html[data-brand="org"] body.wl { background: #fff !important; color: #000 !important; }
  html[data-brand="org"] #wlThemeFab,
  html[data-brand="org"] #wlThemePanel { display: none !important; }
}