/* ==========================================================================
   Northing Labs — pages-about-faq.css
   Styles specific to about.html and faq.html. Tokens only. Band-scoped vars
   (--bg, --panel, --fg, --fg-2, --rule, --ln) come from .band--dark/.band--light.
   Shared page-hero / legend live in pages.css.
   ========================================================================== */

/* ==========================================================================
   ABOUT
   ========================================================================== */

/* hero aside: the compass, centred on its own square */
.about-compass { width: 100%; max-width: 340px; margin-inline: auto; aspect-ratio: 1; }
@media (min-width: 1024px) { .about-compass { max-width: 400px; margin-inline: auto 0; } }

/* ---------- Story (origin) ---------- */
.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(56px, 8vw, 96px);
}
.story__copy .section-title { margin-bottom: 32px; }
.story__copy p:not(.sheet-label) {
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg-2);
}
.story__copy p:not(.sheet-label) + p { margin-top: 20px; }

.pullquote {
  position: relative;
  align-self: start;
  padding-top: 28px;
  border-top: 1px solid var(--ln);
}
.pullquote::before {            /* drafting tick on the rule */
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal-ink);
}
.pullquote__label {
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pullquote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(46px, 6.2vw, 92px);
  line-height: .98;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.pullquote__text em { color: var(--signal-ink); }
@media (min-width: 1024px) {
  .story__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: start; }
  .pullquote { position: sticky; top: 140px; margin-top: 72px; }
}

/* ---------- Local: survey-stations plot ---------- */
.local__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.local__head { margin-bottom: 0; }
/* the map needs ~600px of width to keep its labels at 9px+, so the side-by-side layout starts at 1280 */
@media (min-width: 1280px) {
  .local__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head fig" "table fig";
    column-gap: 80px;
    row-gap: 56px;
    align-items: start;
  }
  .local__head { grid-area: head; }
  .stations-fig { grid-area: fig; align-self: center; }
  .local__table { grid-area: table; }
}
.stations-fig { margin: 0 auto; min-width: 0; width: 100%; max-width: 780px; }
@media (min-width: 1280px) { .stations-fig { margin: 0; max-width: none; } }
.stations-fig .fig-caption { margin-top: 16px; }

.stations {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ln);
  overflow: visible;
}
/* two arrangements of the same figure: map + inset side by side (wide), or inset stacked below the map (tall, phones) */
.stations--tall { display: none; max-width: 440px; margin-inline: auto; }
@media (max-width: 719px) {
  .stations--wide { display: none; }
  .stations--tall { display: block; }
}
.stations__line {
  fill: none;
  stroke: var(--ln);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* every drawn element is whole by default; the inline script arms the draw-on only when GSAP is present */
.stations__grid { stroke-opacity: .2; }
.stations__state { stroke-linejoin: round; }
.stations__statefill { fill: var(--ink-2); stroke: none; }
.stations__panel { fill: var(--ink); stroke: none; }
.stations__frame { stroke-opacity: .6; }
.stations__dashed,
.stations__traverse {
  fill: none;
  stroke: var(--ln);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.stations__detc { stroke-dasharray: 4 4; }
.stations__leader { stroke-opacity: .8; }
.stations__mini { fill: var(--ln); stroke: none; }
.stations__mini--base { fill: var(--signal); }
.stations__pulse { fill: none; stroke: var(--signal); stroke-width: 1.5; opacity: 0; vector-effect: non-scaling-stroke; }
.stations text {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  fill: var(--fg-2);
}
.stations__ticks text { opacity: .85; }
.stations__lake { font-size: 12.5px; letter-spacing: .2em; opacity: .7; }
.stations__title { font-size: 13px; letter-spacing: .12em; fill: var(--fg); }
.stations__n { font-size: 16px; fill: var(--fg); }
.stations__name { font-size: 14.5px; fill: var(--fg); letter-spacing: .06em; }
.stations__base { font-size: 12.5px; fill: var(--signal); letter-spacing: .12em; }
.stations__dot { fill: var(--ln); }
.stations__station--base .stations__line { stroke: var(--signal); }
.stations__station--base .stations__ring { stroke-opacity: .45; }
.stations__station--base .stations__dot { fill: var(--signal); }
.stations__station--base .stations__name { fill: var(--text-on-dark); }

/* stacked (phone) arrangement renders at ~0.95x, so its labels stay close to their natural size */
.stations--tall text { font-size: 10.5px; letter-spacing: .06em; }
.stations--tall .stations__lake { font-size: 10px; letter-spacing: .14em; }
.stations--tall .stations__title { font-size: 11px; letter-spacing: .1em; }
.stations--tall .stations__n { font-size: 14px; }
.stations--tall .stations__name { font-size: 12.5px; letter-spacing: .06em; }
.stations--tall .stations__base { font-size: 10.5px; letter-spacing: .1em; }

/* coordinates table */
.coord-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ln);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.coord-table th,
.coord-table td {
  padding: 18px 10px 18px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--rule);
}
.coord-table td:last-child,
.coord-table thead th:last-child { padding-right: 0; }
.coord-table thead th { padding-block: 12px; font-size: 11px; letter-spacing: .16em; color: var(--fg-2); }
.coord-table tbody th { color: var(--fg); }
.coord-table tbody td { color: var(--fg); }
.coord-table tbody td:first-child { color: var(--fg-2); }
.coord-table tbody th span {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--signal);
}
.coord-table .is-base td:first-child { color: var(--signal); }
.local__note {
  max-width: 44ch;
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
}
@media (max-width: 479px) {
  .coord-table { font-size: 11.5px; letter-spacing: .04em; }
  .coord-table th, .coord-table td { padding-right: 6px; }
}

/* ---------- Leadership ---------- */
.leadership__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}
.leadership .section-head { margin-bottom: 0; }
.leadership .founders { min-width: 0; }
.leadership .founder {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  padding-block: 36px;
  border-top: 1px solid var(--rule);
}
.leadership .founder:last-child { padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
.leadership .founder__bubble { width: 88px; height: 88px; }
.leadership .founder__bubble circle,
.leadership .founder__bubble path { transition: stroke .4s var(--ease-out); }
.leadership .founder:hover .founder__bubble circle,
.leadership .founder:hover .founder__bubble path { stroke: var(--signal-ink); }
.leadership .founder h3 { margin-top: 4px; font-size: clamp(26px, 2.6vw, 34px); }
.leadership .founder p:not(.founder__role) { max-width: 52ch; font-size: 17px; line-height: 1.6; }
@media (max-width: 479px) {
  .leadership .founder { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  .leadership .founder__bubble { width: 64px; height: 64px; }
}
@media (min-width: 1024px) {
  .leadership__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .leadership .section-head { position: sticky; top: 120px; }
}

/* ---------- Principles (dark band: re-tint the light-band base rules) ---------- */
.about-principles .principles {
  gap: 0 clamp(28px, 3.5vw, 56px);
  padding-top: 0;
  border-top: 0;
}
.about-principles .principles li {
  padding: 28px 0 44px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
}
.about-principles .principles strong { color: var(--fg); font-size: clamp(19px, 1.7vw, 22px); margin-bottom: 8px; }
.about-principles .principles__no { color: var(--ln); margin-bottom: 18px; }
@media (max-width: 639px) { .about-principles .principles li { padding-bottom: 32px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
main { counter-reset: grp; }
.faq-group {
  padding-block: clamp(72px, 8vw, 120px);
  counter-increment: grp;
}
.faq-group .section-title {
  margin-bottom: 0;
  font-size: clamp(32px, 3.4vw, 48px);
}
.faq-group .faq__list { counter-reset: q; min-width: 0; }

/* re-tint base's light-band-only rules with band variables so groups work on dark too */
.faq-group details {
  counter-increment: q;
  border-top: 1px solid var(--rule);
}
.faq-group details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq-group summary {
  padding-left: 44px;
  color: var(--fg);
}
.faq-group summary:hover { color: var(--ln); }
.faq-group summary::before {     /* note number, like a numbered general note: 3.2 */
  content: counter(grp) "." counter(q);
  position: absolute;
  left: 0; top: 33px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--fg-2);
  transition: color .3s var(--ease-out);
}
.faq-group details[open] summary::before { color: var(--signal); }
.band--light.faq-group details[open] summary::before { color: var(--signal-ink); }
.faq-group details[open] summary::after { color: var(--signal); }
.band--light.faq-group details[open] summary::after { color: var(--signal-ink); }
.faq-group details p {
  padding-left: 44px;
  padding-bottom: 32px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
}
.faq-group .faq__list .section-more { margin-top: 36px; }
@media (min-width: 768px) {
  .faq-group summary,
  .faq-group details p { padding-left: 60px; }
}
@media (max-width: 479px) {
  .faq-group summary { padding-right: 36px; }
}