@font-face {
  font-family: 'Lutik Header Sofia';
  src: url('/fonts/SofiaSansSemiCondensed-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Lutik Header Severina';
  src: url('/fonts/Severina.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
.case-header {
  --header-paper: #fffdf4;
  --header-ink: #042d50;
  --header-red: #ac1414;
  --header-line: rgba(4, 45, 80, .18);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-paper);
  border-bottom: 1.5px solid var(--header-line);
  color: var(--header-ink);
  font: 400 16px/1.5 'Lutik Header Sofia', 'Arial Narrow', Arial, sans-serif;
}
.case-header *, .case-header *::before { box-sizing: border-box; }
.case-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}
.case-header a { color: inherit; text-decoration: none; }
.case-header__logo { display: flex; align-items: center; gap: 8px; line-height: 1; }
.case-header__logo img { display: block; width: 36px; height: 36px; }
.case-header__name { font: 400 24px/1 'Lutik Header Severina', Impact, sans-serif; letter-spacing: -.01em; }
.case-header__nav { display: flex; gap: 20px; align-items: center; }
.case-header__nav a { font-size: 16.8px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.case-header a:hover, .case-header a[aria-current] { color: var(--header-red); }
.case-header__actions { display: flex; align-items: center; gap: 12px; }
.case-header button { color: inherit; cursor: pointer; background: transparent; font: inherit; padding: 0; }
.case-header .case-header__theme {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--header-line);
  border-radius: 4px;
  font-size: 14.4px;
}
.case-header__burger, .case-header__tag, .case-header__num, .case-header .case-header__cta { display: none; }
.case-header .case-header__burger { border: 0; padding: 8px; flex-direction: column; gap: 6px; }
.case-header__burger span { width: 20px; height: 1px; background: currentColor; }
.case-header__panel {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  color: var(--header-ink);
  background: var(--header-paper);
}
.case-header__panel[open] { display: flex; flex-direction: column; }
.case-header__panel .case-header__row { width: 100%; flex: 0 0 57px; border-bottom: 1px solid var(--header-line); }
.case-header .case-header__close { width: 32px; height: 32px; border: 0; font-size: 18px; }
.case-header__panel nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  padding: 16px 32px;
  margin-block: auto;
  font-size: 28.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.case-local-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 14px;
  font: 500 14px/1.5 'Lutik Header Sofia', Arial, sans-serif;
}
.case-local-nav a { text-decoration: underline; text-underline-offset: .18em; }
main :target { scroll-margin-top: 80px; }
@media (min-width: 1024px) {
  .case-header__row { padding-inline: 32px; }
  .case-header__nav { gap: 28px; }
}
@media (max-width: 767px) {
  .case-header__row { height: 56px; padding-inline: 16px; }
  .case-header__logo img { width: 32px; height: 32px; }
  .case-header__nav { display: none; }
  .case-header .case-header__burger { display: flex; }
}

html[data-look="concept"] #kc-dot { display: none; }
html[data-look="concept"] .case-header {
  --header-paper: #f1ece0;
  --header-ink: #171616;
  --header-red: #d2281e;
  background: rgba(241, 236, 224, .86);
  backdrop-filter: blur(12px);
}
html[data-look="concept"] .case-header__row { max-width: none; padding-inline: clamp(18px, 4.6vw, 76px); }
html[data-look="concept"] .case-header__logo { display: grid; gap: 4px; }
html[data-look="concept"] .case-header__logo img { display: none; }
html[data-look="concept"] .case-header__name { font-size: 26px; }
html[data-look="concept"] .case-header__tag { display: block; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
html[data-look="concept"] .case-header__nav { gap: clamp(14px, 2vw, 30px); }
html[data-look="concept"] .case-header__nav a { font-size: 15px; text-transform: none; letter-spacing: .04em; }
html[data-look="concept"] .case-header__num { display: inline; font-size: 10px; margin-right: 6px; vertical-align: 4px; }
html[data-look="concept"] .case-header__nav a:nth-child(2) { order: 2; }
html[data-look="concept"] .case-header__nav a:nth-child(n+4) { order: 3; }
html[data-look="concept"] .case-header .case-header__cta { display: inline-flex; padding: 10px 18px; border-radius: 999px; background: var(--header-ink); color: var(--header-paper); font-size: 14px; white-space: nowrap; text-transform: uppercase; }
html[data-look="concept"] .case-header .case-header__theme { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--header-ink); color: #f2b400; font-size: 22px; }
@media (max-width: 980px) {
  html[data-look="concept"] .case-header__nav, html[data-look="concept"] .case-header .case-header__cta { display: none; }
  html[data-look="concept"] .case-header .case-header__burger { display: flex; }
}

.case-header__actions { min-width: 32px; }
.case-byline {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font: 400 14px/1.5 'Lutik Header Sofia', Arial, sans-serif;
  margin: .5rem 0 .85rem;
  color: var(--muted, #536b87);
}
.case-byline a { color: inherit; }
.case-footer-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: left;
}
.case-footer-groups strong { display: block; margin-bottom: .45rem; }
.case-footer-groups ul { padding: 0; margin: 0; list-style: none; }
.case-footer-groups li + li { margin-top: .25rem; }
.case-footer-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--border, #d1d5db);
  padding-top: .8rem;
}
@media (max-width: 650px) {
  .case-footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared notebook margin for every case page. Keep the original container's left edge. */
@media (min-width: 641px) {
  html:not([data-look="concept"]) body:has(.case-header) { --field-inset: 3vw; --field-pad: 16px; }
  html:not([data-look="concept"]) body:has(.case-header) :is(.wrap, .m3d) {
    padding-right: max(var(--field-pad), calc(var(--field-inset) + 16px - max(0px, (100vw - 1200px) / 2)));
  }
  html:not([data-look="concept"]) .case-header__row {
    padding-right: max(24px, calc(var(--field-inset) + 16px - max(0px, (100vw - 1280px) / 2)));
  }
  html:not([data-look="concept"]) body:has(.case-header) .aibtn--foot {
    right: calc(var(--field-inset) + 16px);
  }
}
@media (min-width: 1024px) {
  html:not([data-look="concept"]) body:has(.case-header) { --field-inset: 9.375vw; --field-pad: 32px; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  html:not([data-look="concept"]) .case-header__nav { display: none; }
  html:not([data-look="concept"]) .case-header .case-header__burger { display: flex; }
}

/* The same active red as the studio's main buttons, including legacy cases. */
body:has(.case-header) :is(.btn, .case-public-budget__link, .vnav button, .arrows button, .snd):hover {
  background: #ac1414;
  border-color: #ac1414;
  color: #fffdf4;
}

/* Match the notebook grid and mobile margin on the studio pages. */
html:not([data-look="concept"]) body:has(.case-header) {
  --grid: rgba(57, 99, 168, .12);
}
@media (max-width: 640px) {
  html:not([data-look="concept"]) body:has(.case-header)::before { display: none; }
}

/* Approved Lutik wordmark, shared by case headers and their mobile menus. */
.case-header__logo img.case-header__wordmark { display: block; width: 134px; height: 36px; object-fit: contain; }
html[data-look="concept"] .case-header__logo img.case-header__wordmark { display: block; }
.case-header__logo .case-header__wordmark--dark { display: none !important; }
html.dark .case-header { --header-paper: #042d50; --header-ink: #fffdf4; --header-line: rgba(255,253,244,.2); }
html.dark .case-header__logo .case-header__wordmark--light { display: none !important; }
html.dark .case-header__logo img.case-header__wordmark--dark { display: block !important; }
.case-footer-brand { display: inline-block; line-height: 1; }
.case-footer-brand img { display: block; width: 160px; height: 43px; object-fit: contain; }
@media (max-width: 767px) {
 .case-header__logo img.case-header__wordmark { width: 119px; height: 32px; }
}