/* Shared typography pass: make reading and destinations easier to scan. */
html { font-size: 17px; }

body {
  font-size: 17px !important;
  line-height: 1.72;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

p, li, dd { line-height: 1.78; }

/* Links are clear, comfortably sized touch targets throughout the site. */
a[href] {
  font-size: clamp(15.5px, 1.03rem, 18px) !important;
  font-weight: 600;
  line-height: 1.45;
  text-underline-offset: .16em;
}

nav a[href], nav button, .brand, .navlink, .lang {
  font-size: 15px !important;
}

/* Raise the small inline labels used by the research and profile pages. */
[style*="font-size:8px"] { font-size: 10px !important; }
[style*="font-size:10px"], [style*="font-size:10.5px"] { font-size: 12px !important; }
[style*="font-size:11px"] { font-size: 12.5px !important; }
[style*="font-size:12px"] { font-size:13.5px !important; }
[style*="font-size:13px"], [style*="font-size:13.5px"] { font-size:14.5px !important; }
[style*="font-size:14px"], [style*="font-size:14.5px"] { font-size:15.5px !important; }
[style*="font-size:15px"] { font-size:16px !important; }

/* Home page: metadata remains secondary but no longer requires squinting. */
.gate-mark::after, .sea-mood span, .expedition .label, .treasure,
.port-coord span, .log-no, .log-tags span, .manifest-row .role,
.manifest-row .status, .port-nav-head, .port-nav-foot small, .sail-port {
  font-size: 10.5px !important;
}
.coordinates, .hero-log, .anchor-rule, .bearing-note, .bearing-sound,
.chapter, .compass-core, .direction, .route .num, .state-kicker,
.pill, footer {
  font-size: 12px !important;
}
.keel-links a, .port-links a { font-size: 14.5px !important; }
.navlink, .lang, .btn, .state-cta, .log-open, .bearing-tab, .bearing-start {
  font-size: 14.5px !important;
}
.route p, .expedition p, .state-desc, .anchor-copy p, .port-story p,
.log-card summary p, .log-detail p, .knowledge-keel p, .manifest-row p,
.port-card p, .bearing-display p, .section-head p {
  font-size: 16.5px !important;
}

/* Neurodeck retains its compact instrument-panel character without tiny text. */
.player-head, .scope-label, .scope-status, .mood small, .volume label,
.session, .credits, .play-label, .nav-actions a, .nav-actions button,
.kicker {
  font-size: 11.5px !important;
}
.hero p { font-size: 16.5px !important; }
.credits a { font-size: 13px !important; }
.anchor-epigraph {
  margin-top: 18px;
  max-width: 620px;
  color: var(--gold-2) !important;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.35 !important;
  letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}

/* Keep the shared site navigation visibly connected to the atlas mark. */
@media (min-width: 761px) {
  #nav .wrap {
    position: relative;
    justify-content: center;
  }
  #nav .brand { position: absolute; left: 0; }
  #nav .navlinks { gap: 15px; }
  body[class*="page-"] nav > div {
    position: relative;
    justify-content: center !important;
  }
  body[class*="page-"] nav > div > a:first-child { position: absolute; left: 0; }
  body[class*="page-"] nav > div > div { gap: 15px !important; }
}

/* Breathing lab: a restrained, physical control-panel treatment for active tabs. */
.bearing-tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(9px 0, calc(100% - 3px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 9px) 100%, 3px 100%, 0 calc(100% - 5px), 0 8px);
}
.bearing-tab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  opacity: 0;
  background: linear-gradient(180deg, rgba(245, 220, 153, .18), rgba(215, 174, 104, .05) 48%, rgba(24, 61, 74, .2));
  transition: opacity .25s ease;
}
.bearing-tab.active {
  border-color: rgba(240, 214, 156, .82);
  background: linear-gradient(180deg, rgba(215, 174, 104, .18), rgba(11, 33, 43, .72) 68%, rgba(5, 18, 27, .94));
  box-shadow: inset 0 1px 0 rgba(255, 240, 190, .34), inset 0 -1px 0 rgba(76, 181, 190, .18), 0 7px 18px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
}
.bearing-tab.active::before { opacity: 1; }
.bearing-tab:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* Compass labels: match each constellation route and shield text from map lines. */
#compass .route-nw { --route-color: #EA8A1F; }
#compass .route-ne { --route-color: #16A34A; }
#compass .route-sw { --route-color: #2E5FD0; }
#compass .route-se { --route-color: #74CAD0; }
#compass .route h3 {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  padding: 0;
  font-size: clamp(27px, 2.6vw, 34px) !important;
  line-height: 1.08 !important;
  color: var(--route-color);
  background: none;
  box-shadow: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .98), 0 0 16px rgba(5, 18, 27, .95);
}


@media (min-width: 901px) {
  #compass .route { width: min(300px, 30%); }
  #compass .route-nw { left: 8%; top: 11%; }
  #compass .route-ne { left: 92%; top: 11%; }
  #compass .route-sw { left: 8%; top: 89%; }
  #compass .route-se { left: 92%; top: 89%; }
}

@media (max-width: 620px) {
  html { font-size: 16px; }
  a[href] { font-size: 15.5px !important; }
  nav a[href], nav button, .brand, .navlink, .lang { font-size: 13px !important; }
  .bearing-tab { clip-path: polygon(7px 0, calc(100% - 2px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 7px) 100%, 2px 100%, 0 calc(100% - 4px), 0 6px); }
}