/* ==========================================================================
   Site 1992 — Мега төслүүд (forum.mn sub-site) — brand layer
   Loaded after the extra files (style · header · item-element · form-button).
   Editorial look (serif headlines, kickers, thin rules) inspired by
   bid.webtei.com, in forum.mn blue. Never edit extra; override here only.
   ========================================================================== */


/* ===== BRAND COLOUR — forum.mn blue (#0054a8) ===== */
:root,
[data-bs-theme="light"] {
  /* Read from the MP palette (one source); the two subtle tones have no step of their own and stay as they were */
  --bs-primary: var(--mp-primary-500);
  --bs-primary-rgb: var(--mp-primary-500-rgb);
  --bs-primary-bg-subtle: #ccddee;
  --bs-primary-border-subtle: #99bbdc;
  --bs-primary-text-emphasis: var(--mp-primary-900);

  --bs-link-color: var(--mp-primary-500);
  --bs-link-color-rgb: var(--mp-primary-500-rgb);
  --bs-link-hover-color: var(--mp-primary-600);
  --bs-link-hover-color-rgb: var(--mp-primary-600-rgb);
}

/* Dark parts (footer, dark blocks — the site has no theme switch): a soft sand yellow for primary and links, no bright yellow (user) */
[data-bs-theme="dark"] {
  --bs-primary: #e8d6ad;
  --bs-primary-rgb: 232, 214, 173;
  --bs-primary-bg-subtle: #2a2414;
  --bs-primary-border-subtle: #4e4227;
  --bs-primary-text-emphasis: #e8d6ad;

  --bs-link-color: #e8d6ad;
  --bs-link-color-rgb: 232, 214, 173;
  --bs-link-hover-color: #f3ead6;
  --bs-link-hover-color-rgb: 243, 234, 214;

  /* rules and borders: the same sandy line as the light parts, at half strength (user) */
  --bs-border-color: rgba(var(--mp-sand-200-rgb), .5);
  --bs-border-color-translucent: rgba(var(--mp-sand-200-rgb), .5);

  /* Dark = pure black (was Bootstrap #212529) — dark blocks (bg-body) and .bg-dark */
  --bs-body-bg: #000;
  --bs-body-bg-rgb: 0, 0, 0;
}
/* sand button on a dark part: black text (white on the light sand is unreadable) */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-active-color: #000;
}
:root {
  --bs-dark: #000;
  --bs-dark-rgb: 0, 0, 0;
}

/* Brand choice: uppercase buttons. Padding comes from extra (form-button.css). */
.btn {
  text-transform: uppercase;
  letter-spacing: .025rem;
}
/* Button text .75rem (the default and the small size; btn-lg keeps extra's 1rem) */
.btn:not(.btn-lg) {
  --bs-btn-font-size: .75rem;
}
/* the text link button too — extra pins it to .875rem inside items (!important) */
.btn.btn-link,
.item-action > .btn.btn-link {
  font-size: .75rem !important;
}


/* ===== MP COLOURS — the Mega Projects palette: --mp-primary (forum.mn blue) and --mp-sand (the paper tones) =====
   10 steps each, 500 = the base (--mp-primary / --mp-sand). On the paper (#fbfaf6): 600 and darker pass 4.5:1 for text
   (primary 500 too, 7.1:1); 50-200 are backgrounds and rules. sand 50/100/200 = the PRINT paper, tertiary and rule tokens;
   primary 600 = the link hover, 900 = the text emphasis.
   Utilities: .text-mp-* · .bg-mp-* · .border-mp-* (step or base, e.g. .bg-mp-sand-100, .text-mp-primary);
   they work with Bootstrap's .text-opacity-* / .bg-opacity-* / .border-opacity-*. */
:root {
  --mp-primary-50: #edf3f9;
  --mp-primary-100: #d9e5f2;
  --mp-primary-200: #b2cce5;
  --mp-primary-300: #80aad4;
  --mp-primary-400: #407fbe;
  --mp-primary-500: #0054a8;
  --mp-primary-600: #00478f;
  --mp-primary-700: #003b76;
  --mp-primary-800: #002e5c;
  --mp-primary-900: #002243;
  --mp-primary-50-rgb: 237, 243, 249;
  --mp-primary-100-rgb: 217, 229, 242;
  --mp-primary-200-rgb: 178, 204, 229;
  --mp-primary-300-rgb: 128, 170, 212;
  --mp-primary-400-rgb: 64, 127, 190;
  --mp-primary-500-rgb: 0, 84, 168;
  --mp-primary-600-rgb: 0, 71, 143;
  --mp-primary-700-rgb: 0, 59, 118;
  --mp-primary-800-rgb: 0, 46, 92;
  --mp-primary-900-rgb: 0, 34, 67;
  --mp-primary: var(--mp-primary-500);
  --mp-primary-rgb: var(--mp-primary-500-rgb);

  --mp-sand-50: #fbfaf6;
  --mp-sand-100: #f3f0e8;
  --mp-sand-200: #e2ddd3;
  --mp-sand-300: #c9bfad;
  --mp-sand-400: #b5a88e;
  --mp-sand-500: #a39373;
  --mp-sand-600: #7d7058;
  --mp-sand-700: #645a46;
  --mp-sand-800: #4b4335;
  --mp-sand-900: #352f25;
  --mp-sand-50-rgb: 251, 250, 246;
  --mp-sand-100-rgb: 243, 240, 232;
  --mp-sand-200-rgb: 226, 221, 211;
  --mp-sand-300-rgb: 201, 191, 173;
  --mp-sand-400-rgb: 181, 168, 142;
  --mp-sand-500-rgb: 163, 147, 115;
  --mp-sand-600-rgb: 125, 112, 88;
  --mp-sand-700-rgb: 100, 90, 70;
  --mp-sand-800-rgb: 75, 67, 53;
  --mp-sand-900-rgb: 53, 47, 37;
  --mp-sand: var(--mp-sand-500);
  --mp-sand-rgb: var(--mp-sand-500-rgb);
}

/* The opacity variable is read with a fallback, not set here: this file loads after Bootstrap,
   so setting it to 1 would cancel a .bg-opacity-* on the same element */
.text-mp-primary { color: rgba(var(--mp-primary-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary { background-color: rgba(var(--mp-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary { border-color: rgba(var(--mp-primary-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-50 { color: rgba(var(--mp-primary-50-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-50 { background-color: rgba(var(--mp-primary-50-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-50 { border-color: rgba(var(--mp-primary-50-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-100 { color: rgba(var(--mp-primary-100-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-100 { background-color: rgba(var(--mp-primary-100-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-100 { border-color: rgba(var(--mp-primary-100-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-200 { color: rgba(var(--mp-primary-200-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-200 { background-color: rgba(var(--mp-primary-200-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-200 { border-color: rgba(var(--mp-primary-200-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-300 { color: rgba(var(--mp-primary-300-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-300 { background-color: rgba(var(--mp-primary-300-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-300 { border-color: rgba(var(--mp-primary-300-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-400 { color: rgba(var(--mp-primary-400-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-400 { background-color: rgba(var(--mp-primary-400-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-400 { border-color: rgba(var(--mp-primary-400-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-500 { color: rgba(var(--mp-primary-500-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-500 { background-color: rgba(var(--mp-primary-500-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-500 { border-color: rgba(var(--mp-primary-500-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-600 { color: rgba(var(--mp-primary-600-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-600 { background-color: rgba(var(--mp-primary-600-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-600 { border-color: rgba(var(--mp-primary-600-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-700 { color: rgba(var(--mp-primary-700-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-700 { background-color: rgba(var(--mp-primary-700-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-700 { border-color: rgba(var(--mp-primary-700-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-800 { color: rgba(var(--mp-primary-800-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-800 { background-color: rgba(var(--mp-primary-800-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-800 { border-color: rgba(var(--mp-primary-800-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-primary-900 { color: rgba(var(--mp-primary-900-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-primary-900 { background-color: rgba(var(--mp-primary-900-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-primary-900 { border-color: rgba(var(--mp-primary-900-rgb), var(--bs-border-opacity, 1)) !important; }

.text-mp-sand { color: rgba(var(--mp-sand-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand { background-color: rgba(var(--mp-sand-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand { border-color: rgba(var(--mp-sand-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-50 { color: rgba(var(--mp-sand-50-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-50 { background-color: rgba(var(--mp-sand-50-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-50 { border-color: rgba(var(--mp-sand-50-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-100 { color: rgba(var(--mp-sand-100-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-100 { background-color: rgba(var(--mp-sand-100-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-100 { border-color: rgba(var(--mp-sand-100-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-200 { color: rgba(var(--mp-sand-200-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-200 { background-color: rgba(var(--mp-sand-200-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-200 { border-color: rgba(var(--mp-sand-200-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-300 { color: rgba(var(--mp-sand-300-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-300 { background-color: rgba(var(--mp-sand-300-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-300 { border-color: rgba(var(--mp-sand-300-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-400 { color: rgba(var(--mp-sand-400-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-400 { background-color: rgba(var(--mp-sand-400-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-400 { border-color: rgba(var(--mp-sand-400-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-500 { color: rgba(var(--mp-sand-500-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-500 { background-color: rgba(var(--mp-sand-500-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-500 { border-color: rgba(var(--mp-sand-500-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-600 { color: rgba(var(--mp-sand-600-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-600 { background-color: rgba(var(--mp-sand-600-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-600 { border-color: rgba(var(--mp-sand-600-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-700 { color: rgba(var(--mp-sand-700-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-700 { background-color: rgba(var(--mp-sand-700-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-700 { border-color: rgba(var(--mp-sand-700-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-800 { color: rgba(var(--mp-sand-800-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-800 { background-color: rgba(var(--mp-sand-800-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-800 { border-color: rgba(var(--mp-sand-800-rgb), var(--bs-border-opacity, 1)) !important; }
.text-mp-sand-900 { color: rgba(var(--mp-sand-900-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-mp-sand-900 { background-color: rgba(var(--mp-sand-900-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-mp-sand-900 { border-color: rgba(var(--mp-sand-900-rgb), var(--bs-border-opacity, 1)) !important; }


/* ===== LAYOUT — a narrower page: the container stops at 1100px (Bootstrap's own widths below xl are smaller) ===== */
@media (min-width: 1200px) {
  .container {
    max-width: 1100px;
  }
}


/* ===== FLAT — square corners and no elevation, site-wide ===== */
:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;

  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
}

/* extra sets the radius again on the controls themselves */
.btn,
.form-control,
.form-select,
.input-group-text,
.form-option {
  --bs-border-radius-sm: 0;
  --bs-border-radius: 0;
  --bs-border-radius-lg: 0;
}
.btn,
.btn-sm,
.btn-lg {
  --bs-btn-border-radius: 0;
}

/* extra's rounded-* utilities are fixed rem values, not tokens; true circles stay round */
[class*="rounded"]:not(.rounded-circle) {
  border-radius: 0 !important;
}

/* extra's style.css gives the fields a fixed radius */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
  border-radius: 0;
}

/* Cards with a fixed radius in item-element.css */
.item-element,
.item-element .item-image {
  border-radius: 0 !important;
}

/* Article images (extra rounds them inside .typography) */
.typography img {
  border-radius: 0;
}

/* White cards that relied on a shadow get a hairline border instead (extra's product-item var-2 pattern) */
.item-var-2,
.feature-item.item-element.item-var-4 {
  box-shadow: none;
  border: 1px solid var(--bs-border-color);
}

/* Buttons: no shadow and no lift on hover; the keyboard focus ring is left alone */
.btn,
.btn:hover:not(:focus-visible),
.btn:active:not(:focus-visible) {
  box-shadow: none;
  transform: none;
}


/* ===== OVERLAYS — item-var-3 cards keep the extra's original gradient (client); only the hero scrim is lighter ===== */
.bg-overlay {
  background: rgba(var(--bs-body-bg-rgb), .15);
}


/* ===== PRINT — a little newspaper feel, kept modern: ink text, warm paper, light hairline rules ===== */
:root,
[data-bs-theme="light"] {
  --bs-body-color: #1a1a1a;
  --bs-body-color-rgb: 26, 26, 26;
  --bs-emphasis-color: #111111;
  --bs-emphasis-color-rgb: 17, 17, 17;
  --bs-body-bg: var(--mp-sand-50);   /* paper */
  --bs-body-bg-rgb: var(--mp-sand-50-rgb);
  --bs-tertiary-bg: var(--mp-sand-100);
  --bs-tertiary-bg-rgb: var(--mp-sand-100-rgb);
  --bs-border-color: var(--mp-sand-200);   /* light warm grey for dividers and cards */
}

/* Form fields: 1px (extra uses 2px), labels set like a byline */
.btn,
.form-control,
.form-select,
.input-group-text,
.form-option {
  --bs-border-width: 1px;
}
/* Field borders stay darker than the dividers: 3.4:1 on the paper, enough to see the field (WCAG 3:1) */
.form-control,
.form-select,
.input-group-text,
.form-option {
  --bs-border-color: #8c877e;
}
.form-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Article: drop cap on the first paragraph, quotes set as pull quotes between rules */
.post-page .typography > p:first-child::first-letter {
  float: left;
  font-family: "Nocturne Serif", Georgia, serif;
  font-size: 3.6em;
  font-weight: 700;
  line-height: .82;
  padding: .06em .1em 0 0;
}
.post-page .typography blockquote {
  margin: .75rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.post-page .typography blockquote p {
  font-family: "Nocturne Serif", Georgia, serif;
  font-size: 1.375rem;
  line-height: 1.35;
}


/* ===== TYPOGRAPHY — TikTok Sans 18pt for text, Nocturne Serif for headings (self-hosted in fonts/, Ө/Ү included) ===== */
@font-face {
  font-family: "TikTok Sans 18pt";
  src: url("fonts/tiktok-sans-18pt/tiktok-sans-18pt-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TikTok Sans 18pt";
  src: url("fonts/tiktok-sans-18pt/tiktok-sans-18pt-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TikTok Sans 18pt";
  src: url("fonts/tiktok-sans-18pt/tiktok-sans-18pt-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nocturne Serif";
  src: url("fonts/nocturne-serif/nocturne-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nocturne Serif";
  src: url("fonts/nocturne-serif/nocturne-serif-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nocturne Serif";
  src: url("fonts/nocturne-serif/nocturne-serif-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nocturne Serif";
  src: url("fonts/nocturne-serif/nocturne-serif-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nocturne Serif";
  src: url("fonts/nocturne-serif/nocturne-serif-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Body text in Nocturne Serif too (was "TikTok Sans 18pt", system-ui, sans-serif) */
body {
  --bs-body-font-family: "Nocturne Serif", Georgia, serif;
  font-family: var(--bs-body-font-family);
}

/* Nocturne Serif for every heading, item and widget title — uppercase, medium weight */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.item-title,
.widget-title {
  font-family: "Nocturne Serif", Georgia, serif;
  font-weight: 500;
  text-transform: uppercase;
}

/* extra sets heavier weights with stronger selectors (heading-row, rich text) — same weight there */
.heading-row > .heading-main > h1,
.heading-row > .heading-main > h2,
.heading-row.heading-row-page > .heading-main > h1,
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  font-weight: 500;
}

/* Heading description: regular weight (extra sets 500) */
.heading-row > .heading-desc > p {
  font-weight: 400;
}

/* Centred section title: a little tracking */
.heading-row.heading-centered h2 {
  letter-spacing: .02em;
}

/* Meta separator (·): a tight line box so the dot sits level with the small text beside it */
.item-meta > span {
  line-height: 1;
}

/* Heading label (badge above a section title): plain primary text, no box */
.heading-row > .heading-main > .badge {
  padding: 0;
  background-color: transparent;
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Kicker — the category line above a headline; the date beside it is set the same way */
.item-meta .item-category a,
.item-meta .item-date {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* On the overlay cards (item-var-3) the extra paints every link body-coloured; the category keeps the primary (sand on dark) */
.post-item.item-var-3 .item-meta .item-category a {
  color: var(--bs-primary) !important;
}


/* ===== HEADER — masthead and centred menu ===== */
.header-v1 .header-masthead-title {
  font-family: "Nocturne Serif", Georgia, serif;
  font-size: clamp(2rem, 6vw, 4rem); /* was clamp(2.375rem, 7vw, 4.75rem) */
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.02em;
}
/* Single light rule under the masthead */
.header-v1 .header-masthead {
  border-bottom: 1px solid var(--bs-border-color);
}
.header-v1 .header-masthead-tagline {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.header-v1 .navbar-brand-text {
  font-family: "Nocturne Serif", Georgia, serif;
  font-size: 1.625rem;
  font-weight: 500;
  text-transform: uppercase;
}
.header-v1 .navbar-nav .nav-link {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* Breadcrumb — space before the "/" divider (extra sets its padding to 0) */
.breadcrumb-item + .breadcrumb-item::before {
  padding-left: .5rem;
}


/* ===== PRINT OUTPUT — a news article as a clean A4 page («PDF татах» = the browser's Save as PDF) ===== */
@media print {
  /* empty margin boxes replace the browser's own header and footer (date, title, URL, page number) */
  @page {
    size: A4;
    margin: 16mm 15mm;
    @top-left { content: ""; }
    @top-center { content: ""; }
    @top-right { content: ""; }
    @bottom-left { content: ""; }
    @bottom-center { content: ""; }
    @bottom-right { content: ""; }
  }

  /* white paper instead of the warm screen tone */
  :root,
  [data-bs-theme] {
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg: #fff;
  }
  body {
    background: #fff !important;
    color: #1a1a1a;
  }

  /* Only the masthead stays from the header; menus, breadcrumb, sidebar, sharing and the footer are left out */
  .header-v1 {
    position: static !important;
  }
  .header-v1 .header-masthead {
    display: block !important;
    padding-bottom: 1rem;
  }
  .header-v1 .header-masthead-title {
    font-size: 26pt;
  }
  .header-v1 .header-masthead-tagline {
    font-size: 7pt;
  }
  .header-v1 .navbar,
  .offcanvas,
  .footer-v1,
  section:has(> .container > .breadcrumb-v1),
  .post-page .col-sidebar,
  .post-page .post-share {
    display: none !important;
  }

  /* The article takes the whole page width */
  .post-page > .container {
    max-width: none;
    padding: 1.5rem 0 0 !important;
  }
  .post-page .col-main {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .post-page .heading-row h1 {
    font-size: 22pt;
    break-after: avoid;
  }
  .post-page .post-cover img {
    max-height: 110mm;
  }
  .post-page img,
  .post-page blockquote {
    break-inside: avoid;
  }
  .post-page .typography p {
    orphans: 3;
    widows: 3;
  }
  .post-page a {
    color: inherit;
    text-decoration: none;
  }
}