/* ═══════════════════════════════════════════════════════════════
   OL-X17-000001 — New front end: the "New Courses 8" look (Core 1.0.73.116)
   WHAT:  The public and learner pages in the look Nnamdi approved on 31 Oct:
          white blending to a barely-there cream (light, the default) or dark
          slate (switch), antique gold hairlines, olive for the main action,
          Fraunces headings and Instrument Sans text. The header matches the
          Oleren Policy page: logo, the menu links with a deep-navy line under
          the page you are on, a quiet Sign in, the light/dark switch, and a
          slim deep-navy top bar above it. Navy is used only there.
   WHY:   X-17 in TEST-PLAN-2026-10-31 ("front-end overhaul in the New
          Courses 8 look, keep the left menu, light mode the default").
   NOTE:  Loaded by layouts/public.blade.php right after oleren-premium-front.css
          when Appearance → Header → Front-end look is "New" (body.ol-x17).
          It re-points that file's --ol-fe-* tokens and restyles the header,
          phone menu and footer. Page builder content (.ol-page) is left alone,
          as before; the page's own CSS and the site's custom CSS still win.
          Strict CSP: no inline styles; fonts are self-hosted (OFL).
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-latin-opsz-wght-normal.woff2") format("woff2-variations"),url("fonts/fraunces-latin-opsz-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"),url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2")}

/* 1 Nov 11:16 (Nnamdi): the blue was too light — now the near-black deep blue from his palette (#05081b bar,
   #0a0e34 current-menu line). In dark mode the current-menu line is gold, as a near-black line would not show. */
/* ─── 1. Tokens: light (default) ───────────────────────────────── */
body.ol-front.ol-x17{
  --x-ink:#23252b; --x-mist:#5c5a52; --x-gold:#8a6a22; --x-gold-ink:#76591b;
  --x-line:rgba(138,106,34,.30); --x-soft:rgba(138,106,34,.16); --x-wash:rgba(138,106,34,.06);
  --x-olive:#6f6419; --x-olive-hover:#7d7120; --x-on-olive:#fffdf8;
  --x-card:#ffffff; --x-bar:rgba(255,255,255,.90); --x-pop:#ffffff;
  --x-navy:#05081b; --x-navy-ink:#0a0e34; --x-on-navy:#eef0f8; --x-navy-mute:#9aa0bf;
  --x-shadow:0 22px 48px -22px rgba(60,45,10,.38),0 0 0 1px rgba(60,45,10,.08);
  --x-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --x-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* the brochure theme's tokens, re-pointed */
  --ol-fe-page:#ffffff; --ol-fe-surface:#ffffff; --ol-fe-surface-2:#fdfbf6;
  --ol-fe-border:#ebe3d0; --ol-fe-border-strong:#d6c7a3; --ol-fe-divider:#f2ecdf;
  --ol-fe-title:#23252b; --ol-fe-text:#23252b; --ol-fe-muted:#5c5a52; --ol-fe-kicker:#76591b; --ol-fe-link:#76591b;
  --ol-fe-header-bg:rgba(255,255,255,.90);
  --ol-fe-hero-bg:radial-gradient(90% 120% at 100% 0%,rgba(205,170,98,.12),transparent 60%),linear-gradient(180deg,#ffffff,#fdfbf6);
  --ol-fe-hero-title:#23252b; --ol-fe-hero-text:#5c5a52; --ol-fe-hero-kicker:#76591b;
  --ol-fe-hero-chip-bg:rgba(138,106,34,.07); --ol-fe-hero-chip-border:rgba(138,106,34,.30);
  --ol-fe-chip-bg:#f7f2e6; --ol-fe-chip-fg:#5e4a14;
  --ol-fe-chip-active-bg:#6f6419; --ol-fe-chip-active-fg:#fffdf8; --ol-fe-chip-active-border:#6f6419;
  --ol-fe-btn2-border:rgba(138,106,34,.42); --ol-fe-btn2-fg:#23252b; --ol-fe-btn2-hover-bg:rgba(138,106,34,.06);
  --ol-fe-track:rgba(138,106,34,.16); --ol-fe-fill:#8a6a22;
  --ol-fe-shadow:0 1px 2px rgba(60,45,10,.04),0 14px 30px -20px rgba(60,45,10,.22);
  --ol-fe-shadow-hover:0 22px 48px -22px rgba(60,45,10,.38),0 0 0 1px rgba(60,45,10,.08);
  --ol-fe-radius:16px;
  --ol-btn-gold:#6f6419; --ol-btn-gold-hover:#7d7120; --ol-btn-gold-text:#fffdf8;
  --ol-font-heading:var(--x-serif); --ol-font-body:var(--x-sans);
  /* icon tiles and initials: gold on white instead of navy squares */
  --ol-badge-bg:#fbf6ea; --ol-badge-fg:#8a6a22; --ol-badge-border:rgba(138,106,34,.32);
  --ol-avatar-bg:#fbf6ea; --ol-avatar-fg:#5e4a14; --ol-avatar-ring:rgba(138,106,34,.55);

  color:var(--x-ink);
  font-family:var(--x-sans);
  /* 31 Oct 20:05 (Nnamdi): much lighter cream — almost white, a faint warm tint at the bottom */
  background:linear-gradient(180deg,#ffffff 0%,#fffffe 30%,#fefdfa 65%,#fcfaf5 100%) #ffffff;
}
body.ol-front.ol-x17:has(#main > .ol-page){background:linear-gradient(180deg,#ffffff 0%,#fffffe 30%,#fefdfa 65%,#fcfaf5 100%) #ffffff}

/* ─── 2. Tokens: dark slate (switch, or "system" on a dark device) ─ */
html.ol-mode-dark body.ol-front.ol-x17{
  --x-ink:#f3efe4; --x-mist:#a9a79f; --x-gold:#cdaa62; --x-gold-ink:#cdaa62;
  --x-line:rgba(205,170,98,.28); --x-soft:rgba(205,170,98,.14); --x-wash:rgba(205,170,98,.06);
  --x-on-olive:#f3efe4; --x-card:#2e3035; --x-bar:rgba(37,39,43,.86); --x-pop:#2e3035;
  --x-navy:#05081b; --x-navy-ink:#cdaa62; --x-on-navy:#e6e8f2; --x-navy-mute:#8d93b3;
  --x-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  --ol-fe-page:#25272b; --ol-fe-surface:#2e3035; --ol-fe-surface-2:#34363b;
  --ol-fe-border:rgba(205,170,98,.26); --ol-fe-border-strong:rgba(205,170,98,.45); --ol-fe-divider:rgba(205,170,98,.14);
  --ol-fe-title:#f3efe4; --ol-fe-text:#ece8dd; --ol-fe-muted:#a9a79f; --ol-fe-kicker:#cdaa62; --ol-fe-link:#cdaa62;
  --ol-fe-header-bg:rgba(37,39,43,.86);
  --ol-fe-hero-bg:radial-gradient(90% 120% at 100% 0%,rgba(205,170,98,.10),transparent 60%),linear-gradient(180deg,#2e3035,#292b2f);
  --ol-fe-hero-title:#f3efe4; --ol-fe-hero-text:#cfccc2; --ol-fe-hero-kicker:#cdaa62;
  --ol-fe-hero-chip-bg:rgba(205,170,98,.10); --ol-fe-hero-chip-border:rgba(205,170,98,.32);
  --ol-fe-chip-bg:rgba(205,170,98,.10); --ol-fe-chip-fg:#cdaa62;
  --ol-fe-chip-active-bg:#6f6419; --ol-fe-chip-active-fg:#f3efe4; --ol-fe-chip-active-border:#6f6419;
  --ol-fe-btn2-border:rgba(205,170,98,.5); --ol-fe-btn2-fg:#f3efe4; --ol-fe-btn2-hover-bg:rgba(205,170,98,.08);
  --ol-fe-track:rgba(205,170,98,.16); --ol-fe-fill:#cdaa62;
  --ol-fe-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 30px -18px rgba(0,0,0,.6);
  --ol-fe-shadow-hover:0 30px 60px -20px rgba(0,0,0,.6);
  --ol-btn-gold-text:#f3efe4;
  --ol-badge-bg:rgba(205,170,98,.08); --ol-badge-fg:#cdaa62; --ol-badge-border:rgba(205,170,98,.32);
  --ol-avatar-bg:#34363b; --ol-avatar-fg:#e2c88f; --ol-avatar-ring:rgba(205,170,98,.55);
  background:#25272b radial-gradient(1200px 600px at 75% -10%,#34363b 0%,transparent 60%) no-repeat;
}
html.ol-mode-dark body.ol-front.ol-x17:has(#main > .ol-page){background:#25272b}
@media (prefers-color-scheme: dark){
  html.ol-mode-system body.ol-front.ol-x17{
    --x-ink:#f3efe4; --x-mist:#a9a79f; --x-gold:#cdaa62; --x-gold-ink:#cdaa62;
    --x-line:rgba(205,170,98,.28); --x-soft:rgba(205,170,98,.14); --x-wash:rgba(205,170,98,.06);
    --x-on-olive:#f3efe4; --x-card:#2e3035; --x-bar:rgba(37,39,43,.86); --x-pop:#2e3035;
    --x-navy:#05081b; --x-navy-ink:#cdaa62; --x-on-navy:#e6e8f2; --x-navy-mute:#8d93b3;
    --x-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    --ol-fe-page:#25272b; --ol-fe-surface:#2e3035; --ol-fe-surface-2:#34363b;
    --ol-fe-border:rgba(205,170,98,.26); --ol-fe-border-strong:rgba(205,170,98,.45); --ol-fe-divider:rgba(205,170,98,.14);
    --ol-fe-title:#f3efe4; --ol-fe-text:#ece8dd; --ol-fe-muted:#a9a79f; --ol-fe-kicker:#cdaa62; --ol-fe-link:#cdaa62;
    --ol-fe-header-bg:rgba(37,39,43,.86);
    --ol-fe-hero-bg:radial-gradient(90% 120% at 100% 0%,rgba(205,170,98,.10),transparent 60%),linear-gradient(180deg,#2e3035,#292b2f);
    --ol-fe-hero-title:#f3efe4; --ol-fe-hero-text:#cfccc2; --ol-fe-hero-kicker:#cdaa62;
    --ol-fe-hero-chip-bg:rgba(205,170,98,.10); --ol-fe-hero-chip-border:rgba(205,170,98,.32);
    --ol-fe-chip-bg:rgba(205,170,98,.10); --ol-fe-chip-fg:#cdaa62;
    --ol-fe-chip-active-bg:#6f6419; --ol-fe-chip-active-fg:#f3efe4; --ol-fe-chip-active-border:#6f6419;
    --ol-fe-btn2-border:rgba(205,170,98,.5); --ol-fe-btn2-fg:#f3efe4; --ol-fe-btn2-hover-bg:rgba(205,170,98,.08);
    --ol-fe-track:rgba(205,170,98,.16); --ol-fe-fill:#cdaa62;
    --ol-fe-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 30px -18px rgba(0,0,0,.6);
    --ol-fe-shadow-hover:0 30px 60px -20px rgba(0,0,0,.6);
    --ol-btn-gold-text:#f3efe4;
    --ol-badge-bg:rgba(205,170,98,.08); --ol-badge-fg:#cdaa62; --ol-badge-border:rgba(205,170,98,.32);
    --ol-avatar-bg:#34363b; --ol-avatar-fg:#e2c88f; --ol-avatar-ring:rgba(205,170,98,.55);
    background:#25272b radial-gradient(1200px 600px at 75% -10%,#34363b 0%,transparent 60%) no-repeat;
  }
  html.ol-mode-system body.ol-front.ol-x17:has(#main > .ol-page){background:#25272b}
}

/* The brochure theme points --deep / --c-primary at navy inside the chrome and pages. In the new look
   the main colour is ink and olive; navy stays for the top bar and the current-menu line only. */
html .ol-front.ol-x17 :is(.site-header, .public-drawer, .site-footer, #main > :not(.ol-page)){
  --c-primary:var(--x-olive); --c-primary-hover:var(--x-olive-hover);
  --deep:var(--x-ink); --deep-soft:var(--x-ink); --deep-wash:var(--x-wash);
  --c-accent:var(--x-gold); --c-accent-hover:var(--x-gold-ink);
  --signal:var(--x-gold); --signal-dim:var(--x-gold-ink); --signal-wash:var(--x-wash); --c-accent-soft:var(--x-wash);
}

/* ─── 3. Type ─────────────────────────────────────────────────── */
:root .ol-front.ol-x17 #main :is(h1, h2, h3):not(.ol-page *){font-family:var(--x-serif);font-weight:400;letter-spacing:-.01em;font-variation-settings:"opsz" 96}
:root .ol-front.ol-x17 #main h1:not(.ol-page *){font-weight:350;letter-spacing:-.015em;font-variation-settings:"opsz" 144}
:root .ol-front.ol-x17 #main :is(.eyebrow, .metric-label):not(.ol-page *){font-family:var(--x-sans);font-weight:500;letter-spacing:.16em;color:var(--x-gold-ink)}
:root .ol-front.ol-x17 #main a:not(.btn):not(.ol-page *){text-underline-offset:3px}

/* ─── 4. The deep-navy top bar (partials/utility-bar) ───────────── */
.ol-x17 .ol-util{background:var(--x-navy);color:var(--x-on-navy);font:400 13px/1.4 var(--x-sans)}
.ol-x17 .ol-util-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.ol-x17 .ol-util a{color:var(--x-on-navy);text-decoration:none}
.ol-x17 .ol-util-news{display:inline-flex;align-items:center;gap:10px;min-height:38px;min-width:0}
.ol-x17 .ol-util-news span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-x17 .ol-util-news b{flex:none;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(238,241,247,.38);border-radius:999px;padding:1px 9px;line-height:18px}
.ol-x17 .ol-util-news svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.ol-x17 a.ol-util-news:hover span{text-decoration:underline;text-underline-offset:3px}
.ol-x17 .ol-util-links{display:flex;align-items:center;gap:2px;flex:none}
.ol-x17 .ol-util-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 11px;color:var(--x-navy-mute)}
.ol-x17 .ol-util-links a:hover{color:var(--x-on-navy)}
.ol-x17 .ol-util :focus-visible{outline:2px solid var(--x-on-navy);outline-offset:2px;border-radius:3px}

/* ─── 5. Header: the Oleren Policy page header ─────────────────── */
:root .ol-front.ol-x17 .site-header{padding-top:env(safe-area-inset-top, 0px);background:var(--x-bar);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--x-soft);box-shadow:none}
:root .ol-front.ol-x17 .site-header .public-header-shell{height:76px;gap:0}
.ol-x17 .public-header-shell > .public-brand{order:1;margin-right:28px}
.ol-x17 .public-header-shell > .public-nav{order:2}
.ol-x17 .public-header-shell > .spacer{order:3}
.ol-x17 .public-header-shell > .public-header-actions{order:4;gap:12px}
.ol-x17 .public-header-shell > .public-menu-toggle{order:5}
:root .ol-front.ol-x17 .public-nav-surface{background:none;border:0;box-shadow:none;padding:0;gap:4px;border-radius:0}
.ol-x17 .public-menu-link-desktop,
.ol-x17 .public-menu-group-desktop > summary{position:relative;min-height:44px;padding:0 14px;border-radius:0;background:none;box-shadow:none;color:var(--x-mist);font:500 15.5px/1 var(--x-sans);letter-spacing:0}
.ol-x17 .public-menu-link-desktop .icon,
.ol-x17 .public-menu-group-desktop > summary .icon{color:var(--x-gold)}
.ol-x17 .public-menu-link-desktop:hover,
.ol-x17 .public-menu-group-desktop > summary:hover,
.ol-x17 .public-menu-group-desktop > summary:focus-visible{background:none;color:var(--x-navy-ink)}
.ol-x17 .public-menu-link-desktop:focus-visible,
.ol-x17 .public-menu-group-desktop > summary:focus-visible{outline:2px solid var(--x-gold);outline-offset:2px;border-radius:4px}
.ol-x17 .public-menu-link-desktop.is-current,
.ol-x17 .public-menu-group-desktop > summary.is-current{background:none;box-shadow:none;color:var(--x-navy-ink);font-weight:500}
.ol-x17 .public-menu-link-desktop.is-current .icon,
.ol-x17 .public-menu-group-desktop > summary.is-current .icon{color:var(--x-navy-ink)}
/* the deep-navy line under the page you are on (top level only) */
.ol-x17 .public-nav-surface > .public-menu-link-desktop.is-current::after,
.ol-x17 .public-nav-surface > .public-menu-group-desktop > summary.is-current::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--x-navy-ink)}
/* drop-down menus */
:root .ol-front.ol-x17 .public-menu-group-desktop > .public-menu-children{background:var(--x-pop);border:1px solid var(--x-line);border-radius:14px;box-shadow:var(--x-shadow);padding:6px}
.ol-x17 .public-menu-group-desktop .public-menu-children .public-menu-link,
.ol-x17 .public-menu-group-desktop .public-menu-children .public-menu-group > summary{min-height:44px;border-radius:10px;color:var(--x-ink);font:500 15px/1.3 var(--x-sans);padding:0 12px}
.ol-x17 .public-menu-group-desktop .public-menu-children .public-menu-link:hover,
.ol-x17 .public-menu-group-desktop .public-menu-children .public-menu-group > summary:hover{background:var(--x-wash);color:var(--x-ink)}
.ol-x17 .public-menu-group-desktop .public-menu-children .public-menu-link.is-current{background:var(--x-wash);color:var(--x-navy-ink);font-weight:600}
/* right-hand tools: quiet Sign in, round light/dark switch, account */
:root .ol-front.ol-x17 :is(#main, .site-header, .public-drawer) .public-header-actions .btn-primary:not(.ol-page *){background:none;border:1px solid var(--x-line);color:var(--x-ink);border-radius:12px;min-height:44px;padding:0 18px;font:500 15px/1 var(--x-sans);box-shadow:none}
:root .ol-front.ol-x17 :is(#main, .site-header, .public-drawer) .public-header-actions .btn-primary:hover:not(.ol-page *){background:none;border-color:var(--x-gold);color:var(--x-ink)}
.ol-x17 .site-header .ol-theme-toggle,
.ol-x17 .public-drawer .ol-theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--x-line);background:none;color:var(--x-gold);box-shadow:none}
.ol-x17 .site-header .ol-theme-toggle:hover,
.ol-x17 .public-drawer .ol-theme-toggle:hover{border-color:var(--x-gold);background:none}
:root .ol-front.ol-x17 .public-account-trigger{background:none;border-color:var(--x-line);color:var(--x-ink)}
:root .ol-front.ol-x17 .public-account-trigger:hover{border-color:var(--x-gold);background:var(--x-wash)}
:root .ol-front.ol-x17 .public-account-popover{background:var(--x-pop);border-color:var(--x-line);box-shadow:var(--x-shadow)}
:root .ol-front.ol-x17 .public-menu-toggle{border-radius:50%;border-color:var(--x-line);background:none;color:var(--x-ink)}

/* phones: the second row of links (hidden on wide screens) */
.ol-x17 .ol-x17-row{display:none}

/* ─── 6. Footer ───────────────────────────────────────────────── */
:root .ol-front.ol-x17 .site-footer{background:transparent;border-top:1px solid var(--x-line);color:var(--x-mist);font-size:13.5px}
:root .ol-front.ol-x17 .site-footer a{color:var(--x-mist);font-weight:400}
:root .ol-front.ol-x17 .site-footer a:hover{color:var(--x-ink)}

/* ─── 7. Page parts: buttons, cards, notices ──────────────────── */
:root .ol-front.ol-x17 :is(#main, .site-header, .public-drawer) .btn:not(.ol-page *){font-family:var(--x-sans);font-weight:600;letter-spacing:0;border-radius:12px}
:root .ol-front.ol-x17 :is(#main, .site-header, .public-drawer) .btn-primary:not(.ol-page *){background:var(--x-olive);color:var(--x-on-olive);border-color:transparent;box-shadow:none}
:root .ol-front.ol-x17 :is(#main, .site-header, .public-drawer) .btn-primary:hover:not(.ol-page *){background:var(--x-olive-hover);color:var(--x-on-olive)}
:root .ol-front.ol-x17 #main :is(.card, .ol-card):not(.ol-page *){border-color:var(--x-line)}
/* C-17: the "<company> — Your organisation learning access is active" notice was pale blue and the
   company colour barely showed. Now a white card with a gold hairline and the company colour as a bar. */
:root .ol-front.ol-x17 #main .ol-learner-org:not(.ol-page *){background:var(--x-card);color:var(--x-ink);border:1px solid var(--x-line);border-left:4px solid var(--ol-company, var(--x-gold));border-radius:14px;box-shadow:none}
:root .ol-front.ol-x17 #main .ol-learner-org .alert-icon:not(.ol-page *){color:var(--ol-company, var(--x-gold))}
:root .ol-front.ol-x17 #main .ol-learner-org p:not(.ol-page *){color:var(--x-mist)}

/* ─── 8. Narrow screens ────────────────────────────────────────── */
@media (max-width: 1023px){
  :root .ol-front.ol-x17 .site-header .public-header-shell{height:64px}
  .ol-x17 .public-header-shell > .public-brand{margin-right:12px}
  .ol-x17 .ol-x17-row{display:block;border-top:1px solid var(--x-soft)}
  .ol-x17 .ol-x17-row-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ol-x17 .ol-x17-row-in::-webkit-scrollbar{display:none}
  .ol-x17 .ol-x17-row a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--x-mist);text-decoration:none;font:500 15px/1 var(--x-sans);white-space:nowrap}
  .ol-x17 .ol-x17-row a.is-current{color:var(--x-navy-ink)}
  .ol-x17 .ol-x17-row a.is-current::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--x-navy-ink)}
  .ol-x17 .ol-util-links a:not(:last-child){display:none}
}
@media print{.ol-x17 .ol-util,.ol-x17 .ol-x17-row{display:none}}
@media (forced-colors: active){
  .ol-x17 .public-nav-surface > .public-menu-link-desktop.is-current::after,
  .ol-x17 .ol-x17-row a.is-current::after{background:CanvasText}
}
.ol-x17 .public-header-actions > .ol-theme-toggle{order:2}

/* ─── 9. Phone menu (drawer) — Core 1.0.73.118 (Nnamdi 22:27: "this menu does not fit the theme") ───
   Light: white to barely-cream sheet. Dark: slate, no navy anywhere. Gold hairlines, a gold-ink
   "Navigate" kicker, plain links with a 2px gold bar and a soft wash for the page you are on,
   a round quiet close button like the light/dark switch, a warm backdrop. */
body.ol-front.ol-x17{
  --c-pdrawer-bg:#ffffff; --c-pdrawer-border:rgba(138,106,34,.30); --c-pdrawer-text:#23252b; --c-pdrawer-muted:#5c5a52;
  --c-pdrawer-section:#76591b; --c-pdrawer-hover-bg:rgba(138,106,34,.06); --c-pdrawer-active-bg:rgba(138,106,34,.08);
  --c-pdrawer-active-border:transparent; --c-pdrawer-active-text:#23252b; --c-pdrawer-close-bg:transparent; --c-pdrawer-close-text:#8a6a22;
}
html.ol-mode-dark body.ol-front.ol-x17{
  --c-pdrawer-bg:#25272b; --c-pdrawer-border:rgba(205,170,98,.28); --c-pdrawer-text:#f3efe4; --c-pdrawer-muted:#a9a79f;
  --c-pdrawer-section:#cdaa62; --c-pdrawer-hover-bg:rgba(205,170,98,.07); --c-pdrawer-active-bg:rgba(205,170,98,.10);
  --c-pdrawer-active-text:#f3efe4; --c-pdrawer-close-text:#cdaa62;
}
@media (prefers-color-scheme: dark){
  html.ol-mode-system body.ol-front.ol-x17{
    --c-pdrawer-bg:#25272b; --c-pdrawer-border:rgba(205,170,98,.28); --c-pdrawer-text:#f3efe4; --c-pdrawer-muted:#a9a79f;
    --c-pdrawer-section:#cdaa62; --c-pdrawer-hover-bg:rgba(205,170,98,.07); --c-pdrawer-active-bg:rgba(205,170,98,.10);
    --c-pdrawer-active-text:#f3efe4; --c-pdrawer-close-text:#cdaa62;
  }
}
@media (max-width: 1023px){
  :root .ol-front.ol-x17 .public-drawer{background:linear-gradient(180deg,#ffffff 0%,#fefdfa 60%,#fcfaf5 100%);color:var(--x-ink);border-right:1px solid var(--x-line);box-shadow:var(--x-shadow);font-family:var(--x-sans);padding:20px 18px 24px}
  html.ol-mode-dark .ol-front.ol-x17 .public-drawer{background:#25272b radial-gradient(600px 400px at 80% -10%,#34363b 0%,transparent 60%) no-repeat}
  @media (prefers-color-scheme: dark){html.ol-mode-system .ol-front.ol-x17 .public-drawer{background:#25272b radial-gradient(600px 400px at 80% -10%,#34363b 0%,transparent 60%) no-repeat}}
  .ol-x17 .public-drawer-head{padding-bottom:16px;border-bottom:1px solid var(--x-line)}
  :root .ol-front.ol-x17 .public-drawer-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--x-line);background:none;color:var(--x-gold);box-shadow:none;filter:none}
  :root .ol-front.ol-x17 .public-drawer-close:hover{border-color:var(--x-gold);background:none}
  .ol-x17 .public-drawer-section{display:flex;align-items:center;gap:10px;padding:0 4px;margin:4px 0 10px;font:500 12px/1.4 var(--x-sans);letter-spacing:.16em;color:var(--x-gold-ink)}
  .ol-x17 .public-drawer-section::before{content:"";width:22px;height:1px;background:var(--x-gold)}
  .ol-x17 .public-drawer-nav{gap:0}
  :root .ol-front.ol-x17 .public-menu-link-drawer,
  :root .ol-front.ol-x17 .public-menu-group-drawer > summary{position:relative;min-height:50px;padding:0 14px;border-radius:0;background:none;box-shadow:none;color:var(--x-ink);font:500 17px/1.2 var(--x-sans)}
  :root .ol-front.ol-x17 .public-menu-link-drawer .icon,
  :root .ol-front.ol-x17 .public-menu-group-drawer > summary .icon{color:var(--x-gold)}
  :root .ol-front.ol-x17 .public-menu-link-drawer:hover,
  :root .ol-front.ol-x17 .public-menu-group-drawer > summary:hover{background:var(--x-wash);color:var(--x-ink)}
  :root .ol-front.ol-x17 .public-menu-link-drawer.is-current,
  :root .ol-front.ol-x17 .public-menu-group-drawer > summary.is-current{background:var(--x-wash);box-shadow:none;color:var(--x-ink);font-weight:600}
  :root .ol-front.ol-x17 .public-menu-link-drawer.is-current::after,
  :root .ol-front.ol-x17 .public-menu-group-drawer > summary.is-current::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--x-gold)}
  :root .ol-front.ol-x17 .public-menu-link-drawer.is-current .icon{color:var(--x-gold)}
  .ol-x17 .public-menu-group-drawer > .public-menu-children{margin:2px 0 6px 18px;padding:0 0 0 10px;border-left:1px solid var(--x-line)}
  :root .ol-front.ol-x17 .public-menu-link-drawer.is-sub{min-height:44px;font-size:15.5px;font-weight:400;color:var(--x-mist)}
  :root .ol-front.ol-x17 .public-menu-link-drawer.is-sub::before{display:none}
  .ol-x17 .public-drawer-nav > * + *{border-top:1px solid var(--x-soft)}
  .ol-x17 .public-drawer-foot{gap:12px;padding-top:18px;border-top:1px solid var(--x-line)}
  .ol-x17 .public-drawer-user{gap:12px}
  .ol-x17 .public-drawer-user strong{font:600 16px var(--x-sans);color:var(--x-ink)}
  .ol-x17 .public-drawer-user .xs{color:var(--x-mist)}
  :root .ol-front.ol-x17 .public-drawer-account-links a,
  :root .ol-front.ol-x17 .public-drawer-signout{min-height:46px;border-radius:10px;color:var(--x-ink);font:400 15.5px var(--x-sans)}
  :root .ol-front.ol-x17 .public-drawer-account-links a .icon{color:var(--x-gold)}
  :root .ol-front.ol-x17 .public-drawer-account-links a:hover,
  :root .ol-front.ol-x17 .public-drawer-signout:hover{background:var(--x-wash);color:var(--x-ink)}
  :root .ol-front.ol-x17 .public-drawer-signout{color:var(--x-mist);border-top:1px solid var(--x-soft);border-radius:0;margin-top:4px}
  :root .ol-front.ol-x17 :is(#main, .site-header, .public-drawer) .public-drawer-cta:not(.ol-page *){background:var(--x-olive);color:var(--x-on-olive);border-radius:12px;min-height:50px}
  :root .ol-front.ol-x17 .public-drawer-foot .ol-theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--x-line);background:none;color:var(--x-gold);align-self:flex-start}
  :root .ol-front.ol-x17 .public-drawer-backdrop{background:rgba(35,37,43,.35)}
  html.ol-mode-dark .ol-front.ol-x17 .public-drawer-backdrop{background:rgba(10,11,12,.55)}
  @media (prefers-color-scheme: dark){html.ol-mode-system .ol-front.ol-x17 .public-drawer-backdrop{background:rgba(10,11,12,.55)}}
  .ol-x17 .public-drawer-version{color:var(--x-mist)}
}
/* The light logo on dark surfaces keeps a plate (a navy logo cannot sit on slate), but a quieter one. */
html.ol-mode-dark .ol-x17 .brand-logo-set.has-light-variant:not(.has-dark-variant){padding:5px 9px;border-radius:10px;background:#efe9db;box-shadow:0 0 0 1px rgba(205,170,98,.28)}
@media (prefers-color-scheme: dark){html.ol-mode-system .ol-x17 .brand-logo-set.has-light-variant:not(.has-dark-variant){padding:5px 9px;border-radius:10px;background:#efe9db;box-shadow:0 0 0 1px rgba(205,170,98,.28)}}