@font-face {
  font-family: "Song A Day Apercu";
  src: local("Aperçu Regular"), local("Apercu Regular"), local("Aperçu");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Song A Day Apercu";
  src: local("Aperçu Bold"), local("Apercu Bold");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #080808;
  --white: #ffffff;
  --white-muted: rgba(255, 255, 255, .72);
  --hairline: rgba(255, 255, 255, .2);
  --ink: #000000;
  --red: #ff2445;
  --red-deep: #e6203f;
  --red-button: var(--red-deep);
  --offset: 8px;
  --type-display: 3.5rem;
  --type-body: 1rem;
  --type-meta: .875rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --wrap: min(calc(100% - 2 * var(--gutter)), 1200px);
  --header-clearance: 84px;
  --wrap-edge: max(var(--gutter), calc((100% - 1200px) / 2));
  --font: "Song A Day Apercu", "Aperçu", "Apercu", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); min-height: 68px; padding: .5rem var(--wrap-edge); border-bottom: 4px solid var(--red); background: var(--ink); color: var(--white); }
.brand { display: flex; flex: none; align-items: center; gap: .7rem; margin-right: auto; font-size: var(--type-body); font-weight: 700; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 44px; height: 44px; object-fit: contain; transform: rotate(-5deg); }
.brand-dot { color: var(--red); }
.site-sections { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); }
.site-sections a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; font-size: var(--type-meta); font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-sections a:hover, .site-sections a[aria-current="page"] { border-bottom-color: var(--red); }
.nav-out { margin-left: .25em; font-weight: 400; opacity: .6; }
.nav-donate { flex: none; padding: .8rem 1.15rem; background: var(--red-button); color: var(--white); font-size: var(--type-meta); font-weight: 700; letter-spacing: .06em; line-height: 1; text-decoration: none; text-transform: uppercase; }
.nav-donate:hover { background: var(--white); color: var(--ink); }

/* Compact navigation: links scroll above the logo before the full header would overflow. */
@media (max-width: 1100px) {
  :root { --header-clearance: 72px; }
  .site-header { top: -41px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sections sections" "brand donate"; gap: 0 .75rem; min-height: 0; padding: 0 var(--gutter) .55rem; }
  .site-header:focus-within { top: 0; }
  /* Six sections don't fit across a phone, so the row scrolls sideways. */
  .site-sections { grid-area: sections; gap: 1.1rem; height: 41px; margin: 0 calc(-1 * var(--gutter)) .55rem; padding: 0 var(--gutter); border-bottom: 1px solid #2a2a2a; overflow-x: auto; scrollbar-width: none; }
  .site-sections::-webkit-scrollbar { display: none; }
  .site-sections a { flex: none; min-height: 40px; font-size: var(--type-meta); letter-spacing: .05em; }
  .brand { grid-area: brand; min-width: 0; gap: .55rem; font-size: var(--type-meta); }
  .brand-mark { width: 34px; height: 34px; }
  .nav-donate { grid-area: donate; align-self: center; padding: .75rem .95rem; font-size: var(--type-meta); }
}

/* Leave the wall and its controls in the space below the shared Studio header. */
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

body > .site-header {
  flex: none;
  top: 0;
  font-family: var(--font);
  line-height: 1.5;
}

html.embed body > .site-header { display: none; }

body > #app {
  flex: 1;
  min-height: 0;
  height: auto;
}

body #top-bar {
  background: #111;
  padding-inline: var(--wrap-edge);
}

@media (max-width: 639px) {
  body #top-bar { padding-inline: 12px; }
}