/* Midplane Designs App Theme v0.11.8 — M1B local candidate; not approved
   Exact five brand colors sampled from owner's Squarespace palette.
   Original transparent logo PNG is included at logo/Midplane_Logo.png.
   Licensed font files are bundled locally; see fonts/PROVENANCE.json.
   Existing apps: map these tokens into your current architecture; do not
   blindly replace functioning application CSS. */

:root {
  /* Brand palette: verified from supplied screenshot */
  --md-off-white: #F5F5F5;
  --md-warm-beige: #EAE6E1;
  --md-red: #A74D4A;
  --md-sage: #818B7E;
  --md-near-black: #121212;

  /* Application roles */
  --md-canvas: var(--md-warm-beige);
  --md-surface: var(--md-off-white);
  --md-header: var(--md-warm-beige);
  --md-text: var(--md-near-black);
  --md-primary: var(--md-red);
  --md-on-primary: #FFFFFF;
  --md-border: #CCC7C1;       /* supporting neutral; not a website swatch */
  --md-muted-text: #55504C;   /* supporting neutral; not a website swatch */
  --md-field-border: #8C8781; /* supporting neutral; not a website swatch */
  --md-focus-ring: #121212;
  --md-success: #26704A;      /* functional color, not brand sage */
  --md-warning: #885500;
  --md-danger: #B42318;

  --md-heading-font: "Midplane Young Serif", Georgia, "Times New Roman", serif;
  --md-ui-font: "Midplane Roboto", Arial, Helvetica, sans-serif;
  --md-radius-control: 5px;
  --md-radius-panel: 8px;
  --md-space-1: 4px;
  --md-space-2: 8px;
  --md-space-3: 16px;
  --md-space-4: 24px;
  --md-space-5: 32px;
}

/* Locally bundled, unmodified Google Fonts; source/license details in fonts/PROVENANCE.json.
   Project-specific CSS family aliases prevent installed font versions taking precedence. */
@font-face {
  font-family: "Midplane Young Serif";
  src: url("fonts/YoungSerif-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Midplane Roboto";
  src: url("fonts/Roboto-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Opt-in scope avoids unexpectedly altering existing apps. */
.md-themed {
  box-sizing: border-box;
  min-height: 100%;
  color: var(--md-text);
  background: var(--md-canvas);
  font-family: var(--md-ui-font);
  font-size: 15px;
  line-height: 1.5;
}
.md-themed *, .md-themed *::before, .md-themed *::after { box-sizing: border-box; }
.md-themed .md-brand-name,
.md-themed .md-page-title,
.md-themed .md-section-heading {
  font-family: var(--md-heading-font);
  font-weight: 400;
  letter-spacing: normal;
}
.md-themed .md-brand-name { font-size: 24px; line-height: 1.25; }
.md-themed .md-page-title { font-size: 28px; line-height: 1.25; }
.md-themed .md-section-heading { font-size: 21px; line-height: 1.35; }
.md-themed .md-subheading { font: 700 16px/1.35 var(--md-ui-font); }
.md-themed .md-muted { color: var(--md-muted-text); }

.md-themed .md-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--md-header);
  border-bottom: 1px solid var(--md-border);
}
.md-themed .md-logo {
  display: block;
  width: auto;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
}
.md-themed .md-panel {
  padding: 24px;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-panel);
}
.md-themed .md-section-band {
  padding: 12px 16px;
  background: var(--md-canvas);
  border: 1px solid var(--md-border);
  border-radius: 5px;
}
.md-themed .md-button,
.md-themed .md-input,
.md-themed .md-select,
.md-themed .md-textarea {
  font-family: var(--md-ui-font);
  font-size: 14px;
  border-radius: var(--md-radius-control);
}
.md-themed .md-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  min-height: 40px;
  background: var(--md-surface);
  color: var(--md-text);
  border: 1px solid var(--md-border);
  font-weight: 500;
  cursor: pointer;
}
.md-themed .md-button--primary {
  color: var(--md-on-primary);
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.md-themed .md-button--primary:hover { background: #923D3A; border-color: #923D3A; }
.md-themed .md-button--outline { border-color: var(--md-red); color: var(--md-text); }
.md-themed .md-button--outline:hover { background: #EFE8E5; }
.md-themed .md-button--danger { background: var(--md-danger); color: #FFFFFF; border-color: var(--md-danger); }
.md-themed .md-button:disabled { opacity: .56; cursor: not-allowed; }
.md-themed .md-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.md-themed .md-input,
.md-themed .md-select,
.md-themed .md-textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  background: var(--md-surface);
  color: var(--md-text);
  border: 1px solid var(--md-field-border);
}
.md-themed :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--md-focus-ring);
  outline-offset: 2px;
}
.md-themed .md-state--success { color: var(--md-success); }
.md-themed .md-state--warning { color: var(--md-warning); }
.md-themed .md-state--danger { color: var(--md-danger); }
@media (max-width: 640px) {
  .md-themed .md-header { padding: 12px 16px; }
  .md-themed .md-logo { height: 35px; }
  .md-themed .md-page-title { font-size: 24px; }
  .md-themed .md-section-heading { font-size: 20px; }
  .md-themed .md-panel { padding: 16px; }
  .md-themed .md-button { min-height: 44px; }
  .md-themed .md-input, .md-themed .md-select { min-height: 44px; }
}

/* M1B website shell. No Squarespace scripts/styles or remote assets.
   Verified dimensions: logo 51px/30px; header padding .9vw/6vw; gutter 4vw.
   768px header switch, wordmark size, menu/footer spacing and shadow opacity
   are PoC estimates from references, not complete computed website CSS.
   Local fonts are bundled with relative URLs and included OFL licenses. */
.mp-preview {
  margin: 0;
  min-height: 100vh;
  color: var(--md-text);
  background: var(--md-canvas);
  font-family: var(--md-ui-font);
  --mp-header-height: calc(60px + 1.8vw);
}
.mp-header, .mp-header *, .mp-footer, .mp-footer *, .mp-workspace { box-sizing: border-box; }
.mp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--md-warm-beige);
  box-shadow: 0 12px 12px rgb(18 18 18 / 16%);
  color: var(--md-near-black);
  font: 400 16px/1.5 var(--md-ui-font);
}
.mp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--mp-header-height);
  padding: .9vw 4vw;
}
.mp-header a { color: inherit; text-decoration: none; }
.mp-brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.mp-brand img { display: block; width: auto; height: 51px; object-fit: contain; }
.mp-brand span { font: 400 24px/1.2 var(--md-heading-font); white-space: nowrap; }
.mp-desktop-nav { display: flex; align-items: center; gap: 40px; }
.mp-header .mp-contact {
  --mp-cta-red: #A34946;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 14px 32px;
  border: 1px solid var(--mp-cta-red);
  border-radius: 5px;
  color: var(--mp-cta-red);
  text-align: center;
}
.mp-header .mp-contact:is(:hover, :focus-visible, :active) { background: var(--mp-cta-red); color: var(--md-off-white); border-color: var(--mp-cta-red); }
.mp-desktop-nav > a:not(.mp-contact):hover, .mp-menu-links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.mp-menu-toggle { display: none; }
.mp-header [hidden] { display: none !important; }
.mp-preview :is(.mp-header a, .mp-header button, .mp-footer a, .mp-skip):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}
.mp-skip {
  position: fixed;
  left: 16px;
  top: 12px;
  transform: translateY(-200%);
  z-index: 50;
  padding: 12px 16px;
  color: var(--md-near-black);
  background: var(--md-off-white);
}
.mp-skip:focus { transform: none; }
.mp-workspace { min-height: 65vh; }
.mp-workspace-inner { max-width: 1000px; margin: 0 auto; padding: 84px 4vw 112px; }
.mp-workspace .mp-candidate-label { margin: 0 0 20px; font-size: 13px; color: var(--md-muted-text); }
.mp-workspace .md-page-title { margin: 0 0 24px; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; }
.mp-workspace .mp-intro { max-width: 650px; margin: 0 0 32px; font-size: 16px; line-height: 1.65; }
.mp-workspace .mp-example { max-width: 600px; }
.mp-example-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.mp-workspace .mp-example-note { margin: 16px 0 0; font-size: 13px; color: var(--md-muted-text); }
.mp-footer { color: var(--md-off-white); font: 400 16px/1.5 var(--md-ui-font); }
.mp-footer-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--md-red);
}
.mp-footer-content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 24px; min-height: 72px; padding: 12px 6vw; text-align: center; background: var(--md-near-black); }
.mp-footer p { margin: 0; }
.mp-footer p + p { margin-top: 0; }
.mp-footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; overflow-wrap: anywhere; }
.mp-footer a:hover { text-decoration-thickness: 2px; }
@media (max-width: 799px) {
  .mp-preview { --mp-header-height: calc(30px + 12vw); }
  .mp-header-inner { padding: 6vw; gap: 12px; }
  .mp-brand { gap: 9px; }
  .mp-brand img { height: 30px; }
  .mp-desktop-nav { gap: 14px; flex-wrap: wrap; font-size: 15px; }
  .mp-header .mp-desktop-nav .mp-contact { min-height: 44px; padding: 8px 14px; }
  /* Without JS, the ordinary navigation stays available below the lockup. */
  html:not(.mp-nav-ready) .mp-header-inner { flex-wrap: wrap; }
  html:not(.mp-nav-ready) .mp-desktop-nav { width: 100%; }
  .mp-nav-ready .mp-desktop-nav { display: none; }
  .mp-nav-ready .mp-menu-toggle {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 7px;
    border: 0;
    background: transparent;
    color: inherit;
    position: relative;
    cursor: pointer;
    margin-block: -7px;
  }
  .mp-menu-toggle span {
    position: absolute;
    width: 30px;
    height: 1px;
    background: currentColor;
    top: calc(50% - 5px);
    left: 7px;
  }
  .mp-menu-toggle span + span { top: calc(50% + 5px); }
  .mp-menu-open .mp-menu-toggle span { top: 50%; transform: rotate(45deg); }
  .mp-menu-open .mp-menu-toggle span + span { transform: rotate(-45deg); }
  .mp-menu-open { box-shadow: none; }
  .mp-menu-is-open { overflow: hidden; }
  .mp-mobile-menu {
    position: fixed;
    inset: var(--mp-header-height) 0 0;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    padding: 0 6vw max(40px, 10dvh);
    background: var(--md-warm-beige);
    overflow-y: auto;
  }
  .mp-menu-links { display: flex; flex-direction: column; gap: 16px; align-items: center; align-self: center; padding-block: 32px; }
  .mp-menu-links a { font-size: 32px; line-height: 1.25; padding: 2px 12px; }
  .mp-mobile-menu .mp-contact { width: 210px; max-width: 100%; min-height: 58px; font-size: 16px; }
}
@media (max-width: 767px) {
  .mp-brand span { font-size: 18px; }
  .mp-workspace-inner { padding: 48px 6vw 80px; }
  .mp-workspace .mp-intro { font-size: 16px; }
  .mp-footer-content { flex-direction: column; padding: 12px 6vw; }
  .mp-footer p + p { margin-top: 0; }
}
@media (max-width: 350px) {
  .mp-brand span { font-size: 18px; }
  .mp-brand { gap: 7px; }
}

/* v0.11.8: user-confirmed website desktop CTA hover and equivalent keyboard focus.
   No new transition, scroll state, or mobile navigation styling. */
@media (min-width: 800px) {
  .mp-header .mp-desktop-nav .mp-contact:is(:hover, :focus-visible) {
    background: var(--mp-cta-red);
    color: var(--md-off-white);
    border-color: var(--mp-cta-red);
  }
  .mp-header .mp-desktop-nav .mp-contact:focus-visible {
    outline-color: var(--md-near-black);
  }
}
/* v0.11.8: user-confirmed removal of the gray header shadow over app titles.
   Keep default website header shadow for pages without the adjacent title bar. */
.mp-preview > .mp-header:has(+ .md-components > .mdc-app-titlebar) {
  box-shadow: none;
}
/* v0.11.8: separators belong to their respective scrolling owners.
   Header-owned ::after stays with the sticky header without adding layout height. */
.mp-preview > .mp-header {
  box-shadow: none;
}
.mp-preview > .mp-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--md-border);
  pointer-events: none;
  z-index: 1;
}
/* Navigation owns only this interaction boundary; it introduces no layout box. */
.mp-preview > [data-mp-nav-background] { display: contents; }

/* CTA keyboard focus stays visible independently of hover/text color. */
.mp-preview .mp-header .mp-contact:focus-visible { outline: 3px solid var(--md-near-black); outline-offset: 5px; }