/* Compliwright brand foundation, shared by the public site and the portal.
   Direction: modern regulatory luxury. Deep burgundy surfaces, warm ivory paper, champagne gold used only as an
   accent (rules, icons, primary buttons with dark text), never for body text on light backgrounds.
   Fonts: DM Serif Display (headlines) and Manrope (everything else), both SIL OFL, self-hosted. */
@font-face{font-family:"DM Serif Display";src:url(/fonts/DMSerifDisplay-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(/fonts/DMSerifDisplay-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/Manrope-Variable.woff) format("woff");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* brand constants */
  --burgundy:#421626; --burgundy-2:#5B2238; --burgundy-3:#2E0E1A; --ivory:#FAF7F0; --gold:#D5AD62; --gold-soft:#EBD6A8; --night:#211C20; --white:#FFFFFF;
  /* light theme roles */
  --page:#FAF7F0; --sheet:#FFFFFF; --sunk:#F3EEE3; --ink:#211C20; --muted:#5F5258; --line:#E3D9C6; --line-strong:#CDBFA6;
  --link:#6E2440; --accent-ink:#7A5719; --focus:#421626; --btn-line:#421626; --btn-ink:#421626; --btn-hover:#F3EEE3;
  --ok:#1D6A45; --ok-tint:#E3F0E7; --warn:#7A5300; --warn-tint:#F8ECD0; --bad:#9F2A2A; --bad-tint:#F8E3E0; --soon:#5E4A1C; --soon-tint:#F4EAD3;
  /* the burgundy band reads the same in both themes */
  --band:#421626; --band-deep:#2E0E1A; --on-band:#FAF7F0; --on-band-muted:#E6D5DA; --on-band-line:rgba(250,247,240,.22);
  --shadow:0 1px 2px rgba(33,28,32,.06),0 8px 24px -12px rgba(66,22,38,.18);
  --display:"DM Serif Display","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --r:12px; --r-sm:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --page:#151013; --sheet:#1F181C; --sunk:#1A1417; --ink:#F3EEE6; --muted:#C2B5BA; --line:#3A2D33; --line-strong:#56444C;
  --link:#E7C88A; --accent-ink:#E2BE79; --focus:#D5AD62; --btn-line:#7A6670; --btn-ink:#F3EEE6; --btn-hover:#2A2025;
  --ok:#86D1A8; --ok-tint:#173226; --warn:#E8C273; --warn-tint:#352A14; --bad:#F29C92; --bad-tint:#3A1C1C; --soon:#E6CC93; --soon-tint:#30271A;
  --band:#3A1221; --band-deep:#240A14; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --page:#151013; --sheet:#1F181C; --sunk:#1A1417; --ink:#F3EEE6; --muted:#C2B5BA; --line:#3A2D33; --line-strong:#56444C;
  --link:#E7C88A; --accent-ink:#E2BE79; --focus:#D5AD62; --btn-line:#7A6670; --btn-ink:#F3EEE6; --btn-hover:#2A2025;
  --ok:#86D1A8; --ok-tint:#173226; --warn:#E8C273; --warn-tint:#352A14; --bad:#F29C92; --bad-tint:#3A1C1C; --soon:#E6CC93; --soon-tint:#30271A;
  --band:#3A1221; --band-deep:#240A14; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box} html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.on-band,.top,.foot{--focus:#D5AD62;--btn-line:rgba(213,173,98,.8);--btn-ink:#FAF7F0;--btn-hover:rgba(250,247,240,.08);--link:#EBD6A8}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 15px/1.2 var(--sans);letter-spacing:.005em;padding:12px 20px;border-radius:var(--r-sm);
  border:1.5px solid var(--btn-line);background:transparent;color:var(--btn-ink);text-decoration:none;cursor:pointer;white-space:nowrap;min-height:44px}
.btn:hover{background:var(--btn-hover);text-decoration:none}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--night)}
.btn.primary:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn.dark{background:var(--burgundy);border-color:var(--burgundy);color:var(--ivory)}
.btn.dark:hover{background:var(--burgundy-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.arrow{display:inline-flex} .arrow svg{width:17px;height:17px} .btn .arrow{transition:transform .2s} .btn:hover .arrow{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){.btn .arrow{transition:none} .btn:hover .arrow{transform:none}}

/* status chips */
.chip,.status{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;white-space:nowrap;
  background:var(--sunk);color:var(--muted)}
.status::before,.chip.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.on,.chip.good{background:var(--ok-tint);color:var(--ok)}
.status.soon{background:var(--soon-tint);color:var(--soon)}
.chip.warn{background:var(--warn-tint);color:var(--warn)} .chip.bad{background:var(--bad-tint);color:var(--bad)}

/* the wordmark */
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--on-band);text-decoration:none;line-height:1}
.mark svg{width:30px;height:30px;color:var(--gold);flex:0 0 auto}
.mark b{font:400 26px/1 var(--display);letter-spacing:.005em}
.mark small{display:block;font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:5px}