/* One nav across the record, "How might we" and the app page (/product), which loads this file on its own. */
/* the same box on every page: full width, the same height and side gutters */
.site-nav, nav.site-nav { box-sizing: border-box; width: 100%; min-height: 50px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 4px 28px; flex-wrap: wrap; }   /* 50px at the usual text size; with larger text the links drop to a second row instead of running off */
.cs-mark { display: inline-flex; align-items: center; gap: 3px; font: 900 22px/1 "Big Shoulders Display", sans-serif; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: inherit; }
.cs-mark .circ { position: relative; display: inline-block; padding: 0 9px; }
.cs-mark .circ svg { position: absolute; inset: -9px -4px -13px; width: calc(100% + 8px); height: calc(100% + 22px); overflow: visible; color: #ffd23f; pointer-events: none; }
.cs-mark .bang { display: inline-block; width: 8px; height: 22px; color: #ffd23f; transform: rotate(9deg); }
.cs-mark .bang svg { width: 100%; height: 100%; overflow: visible; }
.site-links { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.site-links li { display: flex; align-items: center; }
/* a hand-drawn arrow from each part to the next */
.site-links li + li::before { content: ""; flex: none; width: 34px; height: 16px; margin: 0 8px; opacity: .7; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cpath d='M2 9.5C9 7 17 10.5 30 8M24.5 3.2C26.5 5 28.6 6.6 31 8.1 28.8 9.6 26.6 11.2 24.8 13' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cpath d='M2 9.5C9 7 17 10.5 30 8M24.5 3.2C26.5 5 28.6 6.6 31 8.1 28.8 9.6 26.6 11.2 24.8 13' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.site-links a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; color: inherit; text-decoration: none; }
.site-links b { position: relative; font: 700 12px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; padding: 3px 0; }
/* the part you're on gets a hand-drawn underline */
.site-links b::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -3px; height: 6px; background: currentColor; opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4C14 2.2 30 3.6 59 2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4C14 2.2 30 3.6 59 2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.site-links a[aria-current] b::after, .site-links a:hover b::after { opacity: 1; }

/* on blue or dark ground: white wordmark, pale-blue links, the current one white */
.site-nav.on-dark { color: #fff; }
.site-nav.on-dark .site-links a, .site-nav.on-dark .site-links li + li::before { color: #bcd3ff; }
.site-nav.on-dark .site-links a:hover, .site-nav.on-dark .site-links a[aria-current] { color: #fff; }

/* the record's map pages: a header across the very top, the year ruler under it */
.site-head { position: fixed; z-index: 8; top: 0; left: 0; right: 0; min-height: var(--head-min, 50px); padding: env(safe-area-inset-top, 0px) 0 0; display: flex; align-items: center; background: var(--ground); color: var(--blue); }
.site-head .site-nav { min-height: var(--head-min, 50px); }

/* in the blue bar of straight pages and "How might we" */
.ask-bar:has(.site-nav) { padding: 0; }

@media (max-width: 760px) {
  .cs-mark { font-size: 19px; }
    .site-links b { font-size: 11px; letter-spacing: .08em; }
  .site-links li + li::before { width: 20px; margin: 0 4px; }
  .site-nav, nav.site-nav { min-height: 46px; padding: 0 16px; }
  .site-head .cs-mark { font-size: 17px; }
}

@media (max-width: 760px) {
  .site-nav, nav.site-nav { gap: 2px 12px; }
  .cs-mark { font-size: 17px; }
}
@media (max-width: 480px) {
  .cs-mark { font-size: 16px; }
  .site-links b { font-size: 10px; letter-spacing: .04em; }
  .site-links li + li::before { width: 16px; margin: 0 2px; }
}

/* the part you're on: a yellow marker stroke behind it, as if highlighted by hand */
.site-links a[aria-current] b { color: #1c3582; z-index: 0; }
.site-links a[aria-current] b::before { content: ""; position: absolute; z-index: -1; inset: -3px -7px -2px -6px; background: #ffd23f; transform: rotate(-1.5deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3 6C25 3 60 4 97 2 98 10 96 20 98 28 70 27 35 29 2 27 3 19 1 12 3 6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3 6C25 3 60 4 97 2 98 10 96 20 98 28 70 27 35 29 2 27 3 19 1 12 3 6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.site-links a[aria-current] b::after { opacity: 0; }
.site-nav.on-dark .site-links a[aria-current] { color: #1c3582; }

/* only the narrowest phones drop THAT'S */
@media (max-width: 340px) { .cs-mark .lead-word { display: none; } }

/* touch screens pinch to zoom, so the map's + and - buttons only show with a mouse or keyboard-sized pointer, at any width */
@media (pointer: coarse) { .zoom { display: none !important; } }
/* on a narrow screen the home card covers the map, so there is nothing for the buttons to do there */
@media (max-width: 760px) { body:not(.has-sheet) .zoom { display: none; } }

/* short laptop screens: Trace's card tightens so it always fits under the header */
@media (min-width: 761px) and (max-height: 820px) {
  .card { --cpb: 14px; }
  .card-in { gap: 7px; padding-top: 14px; }
  .card h1 { font-size: 29px; }
  .card .areas a { padding-top: 3px; padding-bottom: 3px; }
}