/* Shared navigation and footer treatment for the Atlas story pages. */
.masthead {
  align-items: center;
  flex-wrap: wrap;
}
.masthead .wordmark { flex: 0 1 auto; }

/* The Atlas bar (Joel, 13 October 2026): one bar on every page, a shade darker than the
   ground; a 40 px badge locked to a two-line wordmark (the Atlas name over the page's own
   name); the pages as short small caps with the current one in amber on a 2 px rule; the
   hub and sources links set apart on the right. tools/atlas-bar.mjs writes the markup. */
.masthead { margin: 0; padding: 0 4.5%; max-width: none; min-height: 72px; gap: 28px; background: #06121b; border-bottom: 1px solid var(--line); font-size: 11px; }
.masthead .wordmark { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 40px; padding: 12px 0 12px 54px; background: url("./atlas-schooner-star.svg") left center / 40px 40px no-repeat; line-height: 1; letter-spacing: 0; font-size: 12px; }
.masthead .wordmark > span { margin: 0; color: inherit; }
.masthead .wordmark-name { font-size: 12px; letter-spacing: .18em; color: #e6e9e1; }
.masthead .wordmark-here { font: normal 15px/1 Georgia, serif; letter-spacing: -.01em; color: #c6d4cf; white-space: nowrap; }
.masthead .wordmark-here em { font-style: italic; color: #e6e9e1; }
.masthead .wordmark-tag { margin-left: 8px; font: 10px/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6d878c; }
.masthead .wordmark-where { font-size: 11px; letter-spacing: .14em; color: #6d878c; }
.masthead:hover .wordmark-name { color: var(--amber, #e8ba7b); }
.masthead .masthead-menu { display: none; }
.masthead-menu .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.masthead nav[aria-label="Atlas pages"] {
  display: flex;
  flex: 1 1 610px;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
  min-width: 0;
  text-align: right;
  font-size: 12px;
}
.masthead nav[aria-label="Atlas pages"] { flex: 1 1 auto; gap: 0 22px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.masthead nav[aria-label="Atlas pages"] a { color: #b6c3c3; padding: 28px 0 26px; border-bottom: 2px solid transparent; white-space: nowrap; }
.masthead nav[aria-label="Atlas pages"] a:hover { color: #e6e9e1; }
.masthead nav[aria-label="Atlas pages"] a[aria-current="page"] { color: var(--amber, #e8ba7b); border-bottom-color: var(--amber, #e8ba7b); }
.masthead nav[aria-label="Atlas pages"] a.masthead-all { margin-left: 8px; padding-left: 22px; border-left: 1px solid var(--line); color: var(--amber, #e8ba7b); }
.masthead nav[aria-label="Atlas pages"] a.masthead-sources { color: var(--muted, #9bafb3); }
.masthead nav[aria-label="Atlas pages"] a:focus-visible,
.atlas-footer-nav a:focus-visible { outline: 2px solid #f4d19d; outline-offset: 4px; }

footer:has(> .atlas-footer-nav) { display: flex; flex-wrap: wrap; }
footer.atlas-method-footer { margin-top: 22px; }
footer.atlas-method-footer > p { flex: 1 0 100%; margin: 0; color: #93a9ae; font-size: 12px; letter-spacing: .12em; }
.atlas-footer-nav {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0;
  text-align: left;
}
.atlas-footer-nav a { color: #b6c3c3; text-decoration: none; }
.atlas-footer-nav a:hover,
.atlas-footer-nav a[aria-current="page"] { color: var(--amber, #e8ba7b); }

/* Below 1180 px the seven links no longer fit beside the lockup, so the menu button takes over. */
@media (max-width: 1180px) {
  .masthead { flex-wrap: wrap; }
  .masthead nav[aria-label="Atlas pages"] { flex: 1 0 100%; justify-content: flex-start; text-align: left; }
  .atlas-nav-js .masthead { position: relative; z-index: 20; flex-wrap: nowrap; }
  .atlas-nav-js .masthead .wordmark { flex: 1 1 auto; min-width: 0; }
  .atlas-nav-js .masthead .masthead-menu {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #0a1c25;
    color: #e6e9e1;
    cursor: pointer;
  }
  .masthead-menu-lines { position: relative; display: block; width: 20px; height: 14px; }
  .masthead-menu-lines i { position: absolute; left: 0; width: 20px; height: 1px; background: currentColor; transition: transform 160ms ease, top 160ms ease, opacity 120ms ease; }
  .masthead-menu-lines i:nth-child(1) { top: 0; }
  .masthead-menu-lines i:nth-child(2) { top: 6px; }
  .masthead-menu-lines i:nth-child(3) { top: 12px; }
  .masthead-menu[aria-expanded="true"] .masthead-menu-lines i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .masthead-menu[aria-expanded="true"] .masthead-menu-lines i:nth-child(2) { opacity: 0; }
  .masthead-menu[aria-expanded="true"] .masthead-menu-lines i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  .atlas-nav-js .masthead nav[aria-label="Atlas pages"] {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    width: min(330px, 100%);
    padding: 6px 16px 12px;
    border: 1px solid var(--line);
    background: #081820;
    box-shadow: 0 18px 28px rgba(0, 0, 0, .32);
    text-align: left;
  }
  .atlas-nav-js .masthead nav[aria-label="Atlas pages"].open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .atlas-nav-js .masthead nav[aria-label="Atlas pages"] a { display: block; min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--line); white-space: normal; }
  .atlas-nav-js .masthead nav[aria-label="Atlas pages"] a:last-child { border-bottom: 0; }
  .atlas-nav-js .masthead nav[aria-label="Atlas pages"] a.masthead-all { margin-left: 0; padding-left: 0; border-left: 0; }
  .atlas-nav-js .masthead { min-height: 64px; padding: 0 16px; gap: 14px; }
  .masthead .wordmark-where { display: none; }
  .masthead .wordmark-tag { display: none; }
  footer:has(> .atlas-footer-nav) { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead-menu-lines i { transition: none; }
}

/* "Reading this page" (#about): the head sits above the copy and the copy runs the
   full width of the content column, at every width (Joel, 13 October 2026). Each
   page's own stylesheet may still describe three columns; this comes after it. */
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 40px; }
.about > div { min-width: 0; height: auto; }
.about > div:first-child { height: auto; } /* the Shipwrecks stylesheet collapses it to 20 px below 850 px */
.about > div + div { margin-top: 0; }
.about p { max-width: none; }

/* The read-aloud control is inserted right after a section's title. In a section
   head it sits to the right of the title when the row has room, below it when not. */
main > section > div:has(> h2 + .atlas-listen) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 32px;
}
main > section > div:has(> h2 + .atlas-listen) > .eyebrow { flex: 1 0 100%; }
main > section > div:has(> h2 + .atlas-listen) > h2 { flex: 1 1 24ch; margin: 0; }
main > section > div:has(> h2 + .atlas-listen) > .atlas-listen { flex: 0 0 auto; margin: 2px 0 0; }
main > section > div:has(> h2 + .atlas-listen) > .atlas-listen ~ * { flex: 1 0 100%; }

/* A film's copy column is a section head too: the same rule, one level down (Joel, 13 October 2026). */
main .film-copy:has(> h2 + .atlas-listen) { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; }
main .film-copy:has(> h2 + .atlas-listen) > h2 { flex: 1 1 18ch; margin: 0; }
main .film-copy:has(> h2 + .atlas-listen) > .atlas-listen { flex: 0 0 auto; margin: 2px 0 0; }
main .film-copy:has(> h2 + .atlas-listen) > .atlas-listen ~ * { flex: 1 0 100%; margin-top: 0; }
main .film-copy:has(> h2 + .atlas-listen) > p { margin-bottom: 0; }
main .film-copy:has(> h2 + .atlas-listen) > a { flex: 0 0 auto; }