/* Model Citizens brand layer for the Passport (27 Oct 2026): the light shop look (warm cream, ink, Gloock headlines,
   coral) with the MC monogram, matching meetmodelcitizens.com. Each product keeps its own accent colours. */
:root { --bg: #F7F2E9; --card: #FFFDF8; --ink: #16151B; --muted: #5E5A55; --line: #E6DCCB; --soft: #F1EADD;
  --cover: #0A0B0F; --cover-2: #161922; --on-cover: #F5EFE4; --display: "Gloock", Georgia, serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E0F14; --card: #161922; --ink: #F2F0EB; --muted: #A3A7B4; --line: #262A36; --soft: #1C1F29; } }
:root[data-theme="dark"] { --bg: #0E0F14; --card: #161922; --ink: #F2F0EB; --muted: #A3A7B4; --line: #262A36; --soft: #1C1F29; }
h1, h2, h3 { font-family: var(--display) !important; font-stretch: normal !important; font-weight: 400 !important; text-transform: none !important; line-height: 1.04 !important; }
nav.site-bar a, .site-bar a { background: none !important; padding: 0 !important; gap: 12px; color: var(--muted) !important; }
.site-bar a::before { content: ""; width: 154px; height: 36px; background: url(/images/brand/logo-light.svg) left center / contain no-repeat; }
.site-bar a span[aria-hidden] { display: none; }
.site-bar:has(+ .pp-cover) a::before { display: none; }   /* the hub's cover already carries the logo */
.pp-brand .logo-img { height: 44px; width: auto; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-bar a::before { background-image: url(/images/brand/logo-dark.svg); } }
:root[data-theme="dark"] .site-bar a::before { background-image: url(/images/brand/logo-dark.svg); }
.pp-site .pp-brand { display: none; }   /* the Passport home has the site's top bar (tools/site/chrome.py), so the cover doesn't repeat the logo */
.pp-site .mc-header ~ .app .pp-cover { margin-top: 16px; }
.pp-site .overlay { z-index: 45; }   /* a session opened from the hub covers the shared top bar */
/* The Passport home's big buttons ("Add to my Passport") in the site's own button style (brand.css .mc-btn): sans, sentence
   case, a pill. Scoped to the home so the product apps keep their own look. */
.pp-site .btn.big { font: 600 1.05rem/1 var(--mc-sans, "Instrument Sans", system-ui, sans-serif); font-stretch: normal; text-transform: none; letter-spacing: 0; border-radius: 999px; }
.pp-site .btn.primary.big:not(.danger):not(:disabled) { background: var(--mc-button, #E2472A); border-color: var(--mc-button, #E2472A); color: #fff; }
.pp-site .field input[type=email] { width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; }   /* "Portraits and storybooks" email, like the key box */