/* The one Flaptown header and footer, in Flaptown Design v5 (2026-11-08). Self-contained: it resets itself and carries
   its own tokens, so it sits the same on pages with or without /v5/flaptown-v5.css. Markup: tools/site_nav.py. */
@font-face { font-family: "Syne Mono"; src: url("/SyneMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
.ftn, .ftn *, .ftn-sub, .ftn-sub *, .ftf, .ftf * { all: unset; box-sizing: border-box; }
.ftn, .ftn-sub, .ftf { --plate: #161818; --pocket: #080909; --mocha: #412828; --clay: #a46f67; --rose: #b7958c; --oak: #c9bab0; --dusty: #937f6d; --dim: #737078;
  --carve: 0 -1px 1px #000000f2, -1px -1px 1px #000000a6, 0 1px 0 #c9bab052; --font: "Syne Mono", ui-monospace, monospace; --page: 1200px; --gutter: 30px; }
.ftn small, .ftn span, .ftf span { display: inline; }
.ftn a, .ftn-sub a, .ftf a { cursor: pointer; }
.ftn img, .ftf img { display: block; }
/* ---------- the one header: an instrument bar ---------- */
.ftn { position: relative; z-index: 5; display: flex; align-items: center; gap: 15px; width: 100%; min-height: 72px; margin: 0; padding: 10px max(var(--gutter), calc((100% - var(--page)) / 2));
  background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px); color: var(--oak);
  font: 400 13px/20px var(--font); text-shadow: var(--carve); border: 0;
  box-shadow: inset 0 1px 0 #c9bab00f, inset 0 -1px 0 #000, 0 1px 0 var(--mocha), 0 6px 18px #000000b3; }
.ftn a { color: var(--oak); text-decoration: none; }
.ftn-mark { display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 52px; padding: 6px 16px 6px 8px; border-radius: 12px; background: var(--pocket);
  box-shadow: inset 0 4px 10px -3px #000000e6, inset 0 2px 0 #000, inset 0 -1px 0 var(--mocha); font-size: 15px; letter-spacing: 0; }
.ftn-mark img { display: block; width: 36px; height: 36px; filter: drop-shadow(0 -1px 1px #000000f2) drop-shadow(0 1px 0 #c9bab052); }
.ftn-mark span { display: grid; line-height: 18px; }
.ftn-mark small { font-size: 9px; line-height: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--dusty); }
.ftn-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px; border-radius: 10px; background: var(--pocket);
  box-shadow: inset 0 3px 8px -3px #000000e6, inset 0 1px 0 #000, inset 0 -1px 0 var(--mocha); }
.ftn-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 6px; font-size: 12px; line-height: 16px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rose); white-space: nowrap; transition: background-color .12s ease, color .12s ease; }
.ftn-nav a:hover { color: var(--oak); background: #161818; }
.ftn-nav a[aria-current] { color: var(--oak); background: var(--plate); box-shadow: 0 1px 0 #000, 0 2px 4px #000000b3, inset 0 1px 0 #c9bab012; }
.ftn-nav a[aria-current]::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: radial-gradient(circle at 35% 35%, #f6c9b8, #e07a62 55%, #a46f67); box-shadow: 0 0 5px 1px #e07a6280; }
.ftn-acct { --c: var(--rose); display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 18px; border-radius: 6px; background: #b7958c26;
  border: 1.5px solid #b7958cb3; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 3px 0 #000, 0 6px 14px #00000099, inset 0 1px 0 #c9bab00f; transition: transform .08s ease, box-shadow .08s ease; white-space: nowrap; }
.ftn-acct:hover { border-color: var(--rose); }
.ftn-acct:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.ftn a:focus-visible, .ftn-sub a:focus-visible, .ftf a:focus-visible { outline: 2px solid var(--oak); outline-offset: 2px; }
/* a section's own few links, under the bar */
.ftn-sub { display: flex; flex-wrap: wrap; gap: 5px 20px; width: min(var(--page), calc(100% - 2 * var(--gutter))); margin: 15px auto 0; font: 400 12px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.ftn-sub a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dusty); text-decoration: none; }
.ftn-sub a:hover, .ftn-sub a[aria-current] { color: var(--oak); }
.ftn-sub a[aria-current] { box-shadow: 0 -1px 0 var(--clay) inset; }

/* ---------- the one footer ---------- */
.ftf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px 30px; width: 100%; margin: 60px 0 0;
  padding: 30px max(var(--gutter), calc((100% - var(--page)) / 2)) 40px; background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 #c9bab00f, 0 -1px 0 var(--mocha), 0 -6px 18px #00000080; font: 400 12px/20px var(--font); color: var(--dusty); text-shadow: var(--carve); }
.ftf a { color: var(--rose); text-decoration: none; }
.ftf a:hover { color: var(--oak); }
.ftf-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--oak) !important; }
.ftf-mark img { width: 28px; height: 28px; }
.ftf p { margin: 0; }
.ftf-nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ftf-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.ftf-c { grid-column: 1 / -1; font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: var(--dim); }


@media (max-width: 1100px) {
  .ftn, .ftn-sub, .ftf { --gutter: 16px; }
  .ftn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .ftn-mark { justify-self: start; }
  .ftn-nav { grid-column: 1 / -1; grid-row: 2; margin: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .ftn-nav a:last-child { margin-right: 28px; }
  .ftn-nav::-webkit-scrollbar { display: none; }
  .ftn-acct { grid-column: 2; grid-row: 1; padding: 0 14px; }
  .ftf { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .ftn-mark small { display: none; } .ftn-acct { font-size: 11px; padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .ftn *, .ftf * { transition: none !important; } }