/*
 * Studio Boris Maas — shared visual foundation.
 * Used by the public website and /admin. Change shared typography, colour,
 * spacing and logo metrics here; theme.php supplies published editor values.
 */
@font-face {
  font-family: 'Neuzeit S';
  src: url('/fonts/neuzeits-book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neuzeit S';
  src: url('/fonts/neuzeits-bookheavy.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --sbm-font-family: 'Neuzeit S', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --sbm-font-weight: 400;
  --sbm-heading-weight: 600;
  --sbm-bg: #f4f2ee;
  --sbm-fg: #333333;
  --sbm-content-bg: #ffeeed;
  --sbm-title-color: var(--sbm-fg);
  --sbm-body-color: var(--sbm-fg);
  --sbm-muted: var(--sbm-fg);
  --sbm-rule-color: color-mix(in srgb, var(--sbm-fg) 55%, transparent);
  --sbm-logo-size: 19px;
  --sbm-logo-aspect: calc(202.3 / 20.2);
  --sbm-logo-height: calc(var(--sbm-logo-size) * 0.945);
  /* Match the SVG's 19.3-unit capital height to Neuzeit S's 801/1024 em. */
  --sbm-brand-word-scale: 1.222;
  /* Flat SVG letter baseline is y=19.7 in its 20.2-unit viewBox. */
  --sbm-logo-baseline-inset: 0.024752475247525;
  --sbm-brand-gap: 8px;
  --sbm-brand-gap-small: 6px;
  --sbm-base-size: 15px;
  --sbm-title-size: 38px;
  --sbm-body-size: 16px;
  --sbm-menu-size: 16px;
  --sbm-small-size: 13px;
  --sbm-footer-size: 13px;
  --sbm-intro-size: 38px;
  --sbm-line-height: 1.45;
  --sbm-reading-line-height: calc(var(--sbm-line-height) * 1.103448275862069);
  --sbm-title-line-height: 1.15;
  --sbm-control-line-height: 1.3;
  --sbm-page-width: 775px;
  --sbm-pad-desktop: clamp(20px, 3vw, 40px);
  --sbm-pad-mobile: 10px;
  --sbm-pad: var(--sbm-pad-desktop);
  --sbm-header-height: 64px;
  --sbm-control-height: 44px;
  --sbm-space-control: 16px;
  --sbm-content-edge: max(var(--sbm-pad), calc((100% - var(--sbm-page-width)) / 2));
  --sbm-space-small: 8px;
  --sbm-space-medium: 24px;
  --sbm-space-section: 52px;
  --sbm-space-large: 72px;
  --sbm-overlay-content-offset: clamp(44px, 7.5vh, 86px);
}
/* Keep mobile orientation from inflating type independently of the shared scale.
   Browser zoom and the user's text zoom remain available. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.sbm-page-edge { padding-inline: var(--sbm-pad); }
.sbm-content-edge { padding-inline: var(--sbm-content-edge); }
@media (max-width: 640px) {
  :root { --sbm-pad: var(--sbm-pad-mobile); }
}
@media (max-width: 360px) {
  :root { --sbm-brand-gap: var(--sbm-brand-gap-small); }
}

/* Shared lockup: align the real text baseline to the SVG letter baseline.
   The image keeps its original centred position in the header. */
.sbm-brand-lockup {
  --brand-logo-height: min(var(--sbm-logo-height), calc(50vw / var(--sbm-logo-aspect)));
  --brand-word-size: calc(var(--brand-logo-height) * var(--sbm-brand-word-scale));
  --brand-row-height: max(var(--sbm-control-height), calc(var(--brand-logo-height) * 1.25));
  display: flex;
  align-items: baseline;
  height: var(--brand-row-height);
  gap: var(--sbm-brand-gap);
  min-width: 0;
}
.sbm-brand-symbol {
  display: block;
  flex: 0 0 auto;
  width: calc(var(--brand-logo-height) * var(--sbm-logo-aspect));
  height: var(--brand-logo-height);
  margin-top: calc((var(--brand-row-height) - var(--brand-logo-height)) / 2);
}
.sbm-brand-image { display: block; width: 100%; height: 100%; }
/* Custom raster logos can still be uploaded; their original ratio is preserved. */
img.sbm-brand-image { object-fit: contain; object-position: left center; }
.sbm-brand-word {
  display: grid;
  align-items: baseline;
  align-self: baseline;
  flex: 0 0 auto;
  min-height: 0;
  position: relative;
  top: calc(var(--brand-logo-height) * var(--sbm-logo-baseline-inset) * -1);
  font-size: var(--brand-word-size);
  line-height: 1;
}
.sbm-brand-word > span { grid-area: 1 / 1; }
/* A text logo already supplies a real baseline and has no SVG bottom inset. */
.sbm-brand-lockup > .brand-logo-text,
.sbm-brand-lockup > .logo--text {
  width: auto;
  height: auto;
  margin-top: calc((var(--brand-row-height) - var(--sbm-logo-size)) / 2);
}
.brand-logo-text + .sbm-brand-word,
.logo--text + .sbm-brand-word { top: 0; }

/* The public site's header menu, shared verbatim in layout and typography. */
.sbm-navigation-icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.sbm-menu-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sbm-menu-toggle:hover { background: none; }
.sbm-menu-panel {
  position: fixed;
  top: calc(var(--sbm-header-height) - 4px);
  right: var(--sbm-pad);
  z-index: 260;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding: 3px 16px 12px;
  margin-right: -16px;
  max-height: calc(100dvh - var(--sbm-header-height));
  overflow-y: auto;
  background: transparent;
  transition: background-color .35s ease;
}
.sbm-menu-links { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sbm-menu-links button,
.sbm-menu-links a {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--sbm-fg);
  font: inherit;
  font-size: var(--sbm-menu-size);
  line-height: var(--sbm-control-line-height);
  text-align: right;
  cursor: pointer;
}
.sbm-menu-links button,
.sbm-menu-links a.sbm-menu-internal {
  transition: text-decoration-color .16s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}
.sbm-menu-links button:hover,
.sbm-menu-links button.is-active,
.sbm-menu-links a.sbm-menu-internal:hover,
.sbm-menu-links a.sbm-menu-internal.is-active { background: none; color: var(--sbm-fg); text-decoration: underline; text-decoration-color: currentColor; }
.sbm-menu-links a { text-decoration: none; }
.sbm-menu-links a:hover { background: none; text-decoration: underline; }
@media (max-width: 1023px) {
  .sbm-menu-panel { background: var(--bar-bg, transparent); }
}