/* Shared brand geometry and white light-mode surfaces. Load after page styles. */
:root:not([data-theme=dark]) {
  --bg:#fff !important;
  --surface:#fff !important;
  --cream:#fff;
  --text:#111614;
  --muted:#535b51;
  --line:#d4d4d4;
  color-scheme:light;
  background-color:#fff;
}
html:not([data-theme=dark]) body {
  background-color:#fff !important;
  background-image:none !important;
  color:var(--text);
}
html:not([data-theme=dark]) :is(.utility,.header,.hero,.hero-text,.trust-strip,.plants,.join-strip,.footer,.footer-bottom,.bm-main,.story-main,.connection-main,.matriarchy-main) {
  background-color:#fff !important;
}
html:not([data-theme=dark]) :is(.plant-card,.profile-card,.connection-panel,.matriarchy-art,.mother-card,.mother-empty,dialog) {
  background-color:#fff !important;
}
/* The emblem hangs from the navigation into the page, with no extra header height. */
.header { overflow:visible; z-index:30; }
.header .brand { position:relative; overflow:visible; z-index:2; }
.header .brand>.native-moth {
  position:absolute;
  left:0;
  top:6px;
  width:clamp(200px,16vw,260px);
  height:auto;
  max-width:none;
  display:block !important;
  background:none;
  object-fit:contain;
}
.header nav,.header-actions,.header .menu-toggle { position:relative; z-index:3; }
.hero-text { padding-top:clamp(30px,2.7vw,44px); }
/* Crop the photographic panel independently of the adjacent brand's height. */
.hero-art>.fragment { container-type:size; }
.hero-art>.fragment>img {
  width:max(188.92989cqw,295.10086cqh);
  height:auto;
  left:calc(50% - max(138.92989cqw,217.00288cqh));
  top:calc(50% - max(51.38376cqw,80.25937cqh));
}
html:not([data-theme=dark]) .hero-brand-art { mix-blend-mode:multiply; }
[data-theme=dark] .hero-brand-art { mix-blend-mode:screen; }
/* Keep secondary page titles below the hanging emblem. */
:is(.bm-main,.story-main,.connection-main,.matriarchy-main) { padding-top:100px; }
@media(min-width:651px) and (max-width:1200px) {
  .header .brand>.native-moth { width:170px; top:0; }
  .hero-text { padding-top:20px; }
}
/* At widths with a second navigation row, hang the emblem below both rows. */
@media(min-width:651px) and (max-width:820px), (min-width:1001px) and (max-width:1200px) {
  .header .brand>.native-moth { top:82px; }
  .hero-text { padding-top:70px; }
}
@media(max-width:650px) {
  .header .brand>.native-moth { width:160px; top:30px; left:-4px; }
  .hero-text { padding-top:30px; }
  .header nav.open { background:var(--bg); }
  :is(.bm-main,.story-main,.connection-main,.matriarchy-main) { padding-top:100px; }
}
@media(max-width:360px) {
  .header-inner { padding-inline:10px; gap:3px; }
  .header .brand { width:64px; flex-shrink:0; }
  .header-actions .icon-button:not(.theme-toggle),.header .menu-toggle { width:32px; min-width:32px; padding:4px; }
  .header .brand>.native-moth { width:145px; }
}