@charset "utf-8";
/* ==========================================================================
   fieldwork.css
   THE PATHFINDER LABS CORPORATION LIMITED
   Naming universe: fieldwork / survey. beacon, transect, sighting, ladder,
   traverse, logbook, datum, helm, hail, cairn, charter.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Surfaces */
  --paper: #FBF8F3;
  --card: #FFFFFF;
  --mist: #EFEAE1;
  --sage: #E4EBE3;

  /* Ink */
  --ink: #1A1D1A;
  --ink-soft: #4E554D;

  /* Brand */
  --moss: #2F5D45;
  --moss-deep: #26503B;

  /* Accent */
  --clay: #B4532A;
  --clay-deep: #9C4522;

  /* Hairline. Kept at or above 3:1 against every surface it is drawn on,
     because table and list rules do carry structure. */
  --line: #8E8471;

  /* Type */
  --face-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --face-text: "Figtree", "Helvetica Neue", Arial, system-ui, sans-serif;

  --t-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --t-h2: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --t-h3: 1.5rem;
  --t-lead: 1.375rem;
  --t-body: 1.125rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* Radius system. Base unit 8px, no steps between. */
  --r-1: 8px;
  --r-2: 16px;
  --r-3: 28px;
  --r-4: 40px;
  --r-pill: 999px;

  /* Shadow ceiling */
  --lift-rest: 0 2px 12px rgba(26, 29, 26, .06);
  --lift-hover: 0 10px 28px rgba(26, 29, 26, .10);

  /* Measure */
  --measure-body: 34em;
  --measure-hero: 18em;

  /* Rhythm */
  --gutter: clamp(1.5rem, 4vw, 4.5rem);
  --pad-x: 1.5rem;
  --span-max: 1200px;
  --band-y: clamp(4rem, 8vw, 7.5rem);
}

/* --- 2. Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol, dl, table, figure { margin: 0; }

a { color: inherit; }

/* --- 3. Accessibility utilities ---------------------------------------- */

.jump-ahead {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 200;
  background: var(--moss);
  color: #FFFFFF;
  padding: .875rem 1.5rem;
  border-radius: var(--r-2);
  font-weight: 600;
  text-decoration: none;
  transition: top 140ms ease-out;
}
.jump-ahead:focus { top: 1rem; }

.mute-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--clay-deep);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Numbers, versions, code-ish labels. No monospace anywhere on this site. */
.figures {
  font-family: var(--face-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Unknown facts are marked, never invented. */
.tbc {
  display: inline;
  background: var(--sage);
  color: var(--ink);
  border-radius: var(--r-1);
  padding: .1em .45em;
  font-size: .9em;
  font-weight: 500;
  letter-spacing: .01em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- 4. Type roles ------------------------------------------------------ */

.tier-1 {
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: var(--measure-hero);
}

.tier-2 {
  font-size: var(--t-h2);
  line-height: 1.10;
  letter-spacing: -0.02em;
}

.tier-3 {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.throughline {
  font-family: var(--face-display);
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: 1.55;
  letter-spacing: -0.01em;
  max-width: var(--measure-body);
}

.bearing {
  display: inline-block;
  font-size: var(--t-label);
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--moss-deep);
}

.prose { max-width: var(--measure-body); }
.prose + .prose { margin-top: 1.25rem; }

.aside-note {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure-body);
}

/* Body links: quiet at rest, unmistakable on hover. */
.underscore {
  position: relative;
  color: var(--clay-deep);
  text-decoration: none;
  font-weight: 500;
}
.underscore::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--clay-deep);
  transform: scaleX(0);
  transform-origin: left;
}
.underscore:hover::after,
.underscore:focus-visible::after { transform: scaleX(1); }

/* Inline links inside long prose stay underlined at rest for legibility. */
.charter__body a,
.prose a:not(.trail):not(.underscore) {
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
  font-weight: 500;
}
.charter__body a:hover,
.prose a:not(.trail):not(.underscore):hover { color: var(--moss-deep); }

/* --- 5. Layout scaffolding --------------------------------------------- */

.transect {
  width: 100%;
  max-width: var(--span-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
/* Figure wrappers. They carry the frame and the caption, and must be allowed
   to shrink inside their grid track. */
.sighting__media,
.logbook__media,
.helm__media,
.split__media { margin: 0; min-width: 0; }

/* Spacing utilities. The Content-Security-Policy on this site has no
   'unsafe-inline' for styles, so nothing may use a style attribute. The class
   is doubled so a utility still beats the two-class rhythm rules below it. */
.gap-sm.gap-sm { margin-top: 1rem; }
.gap-md.gap-md { margin-top: 1.25rem; }
.gap-lg.gap-lg { margin-top: 1.5rem; }
.gap-xl.gap-xl { margin-top: 2rem; }
.gap-2xl.gap-2xl { margin-top: 2.5rem; }
.gap-under.gap-under { margin-bottom: 1rem; }
.hold-46.hold-46 { max-width: 46rem; }

/* Grid and flex children default to min-width:auto, which lets a wide table
   push the whole page sideways. Every grid track on this site opts out. */
.charter > *,
.sighting__inner > *,
.logbook > *,
.helm > *,
.split > *,
.datum__prose > *,
.traverse > *,
.ladder__rung > *,
.cairn__cols > *,
.hail__reply > *,
.register > * {
  min-width: 0;
}

.expanse { padding-block: var(--band-y); }
.expanse--mist { background: var(--mist); }
.expanse--sage { background: var(--sage); }
.expanse--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.expanse__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.expanse__head .bearing { margin-bottom: 1rem; }
.expanse__head .tier-2 + p { margin-top: 1.25rem; }

/* --- 6. Trails (buttons) ------------------------------------------------ */

.trail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--face-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--r-pill);
  padding: .9375rem 1.5rem;
  border: 0;
  cursor: pointer;
}

.trail--filled {
  background: var(--moss);
  color: #FFFFFF;
}
.trail--filled:hover { background: var(--moss-deep); }

.trail--quiet {
  background: transparent;
  color: var(--moss-deep);
  box-shadow: inset 0 0 0 2px var(--moss);
}
.trail--quiet:hover { background: var(--sage); }

.trail--slim { padding: .6875rem 1.125rem; font-size: var(--t-small); }

.trail-set {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}

/* --- 7. Beacon (header) ------------------------------------------------- */

.beacon {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: .75rem;
  background: rgba(251, 248, 243, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.beacon__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.beacon__lockup {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
}

.beacon__glyph { width: 30px; height: 30px; flex: none; }

.beacon__word {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.beacon__ways { display: flex; align-items: center; gap: .25rem; }
.beacon__ways ul {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.beacon__ways a {
  display: inline-block;
  padding: .625rem .875rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
}
.beacon__ways a:hover { background: var(--mist); }
.beacon__ways a[aria-current="page"] { color: var(--moss-deep); font-weight: 600; }

.beacon__hatch {
  display: none;
  width: 46px; height: 46px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--mist);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.beacon__bar {
  display: block;
  width: 18px; height: 2px;
  border-radius: var(--r-1);
  background: var(--ink);
}

@media (max-width: 859px) {
  .beacon__hatch { display: flex; }
  .beacon__ways {
    position: absolute;
    top: calc(100% + .5rem);
    left: var(--pad-x);
    right: var(--pad-x);
    display: none;
    background: var(--card);
    border-radius: var(--r-3);
    padding: 1rem;
    box-shadow: var(--lift-rest);
  }
  .beacon__ways[data-open="true"] { display: block; }
  .beacon__ways ul { flex-direction: column; align-items: stretch; gap: .125rem; }
  .beacon__ways a { padding: .875rem 1rem; font-size: 1rem; }
  .beacon__ways .trail { margin-top: .75rem; justify-content: center; }
}

/* --- 8. Sighting (hero, asymmetric 7/5) --------------------------------- */

.sighting {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3.5rem, 6vw, 6rem);
}

.sighting__inner {
  display: grid;
  gap: var(--gutter);
  align-items: center;
}

@media (min-width: 860px) {
  .sighting__inner {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }
}

.sighting__geo {
  display: block;
  margin-bottom: 1.25rem;
}

.sighting__copy .tier-1 { margin-bottom: 1.75rem; }

.sighting__frame {
  border-radius: var(--r-4);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 5;
}
.sighting__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sighting__caption {
  margin-top: .875rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* --- 9. Ladder (offset stack, not a three-column grid) ------------------ */

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.ladder__rung {
  background: var(--card);
  border-radius: var(--r-3);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--lift-rest);
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .ladder__rung {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  /* Offset ladder: each rung steps in and narrows. Never an equal 3-up grid. */
  .ladder__rung:nth-child(1) { width: 100%; }
  .ladder__rung:nth-child(2) { width: calc(100% - 5rem); margin-left: 5rem; }
  .ladder__rung:nth-child(3) { width: calc(100% - 10rem); margin-left: 10rem; }
}

.ladder__disc {
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--sage);
  display: grid;
  place-items: center;
  flex: none;
}
.ladder__disc svg { width: 26px; height: 26px; }

.ladder__title { margin-bottom: .75rem; }
.ladder__note { max-width: var(--measure-body); }

.ladder__tag {
  display: inline-block;
  margin-bottom: .875rem;
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* --- 10. Traverse (four-step method band) ------------------------------- */

.traverse {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: waypoint;
}

@media (min-width: 900px) {
  .traverse { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}

.traverse__step {
  background: var(--paper);
  border-radius: var(--r-3);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.traverse__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  background: var(--sage);
  color: var(--moss-deep);
  border-radius: var(--r-2);
  padding: .4375rem .75rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.traverse__name { font-size: 1.25rem; }
.traverse__detail { font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }

.traverse__coda {
  margin-top: 2rem;
  background: var(--paper);
  border-radius: var(--r-3);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 44rem;
}
.traverse__coda h3 { margin-bottom: .875rem; }

/* A heading immediately followed by prose always gets air. */
.tier-2 + .prose,
.tier-3 + .prose,
.hail .tier-2 + .hail__address { margin-top: 1rem; }

/* --- 11. Logbook (open experiments) ------------------------------------- */

.logbook {
  display: grid;
  gap: var(--gutter);
  align-items: start;
}

@media (min-width: 900px) {
  .logbook { grid-template-columns: 5fr 6fr; }
}

.logbook__frame {
  border-radius: var(--r-4);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 3;
}
.logbook__shot { width: 100%; height: 100%; object-fit: cover; }

.logbook__state {
  background: var(--card);
  border-radius: var(--r-3);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--lift-rest);
}

.logbook__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--mist);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: .4375rem .875rem;
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1.25rem;
}
.logbook__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--clay-deep);
  flex: none;
}

.logbook__schema {
  margin: 1.5rem 0 0;
  display: grid;
  gap: .875rem;
}
.logbook__schema > div {
  display: grid;
  gap: .25rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--line);
}
.logbook__schema > div:last-child { border-bottom: 0; padding-bottom: 0; }
.logbook__schema dt {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--moss-deep);
}
.logbook__schema dd { margin: 0; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.55; }

/* --- 12. Datum (principles, full-bleed sage) ---------------------------- */

.datum__pull {
  font-size: var(--t-h2);
  line-height: 1.10;
  letter-spacing: -0.02em;
  max-width: 22em;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--ink);
}
.datum__pull b { color: var(--clay-deep); font-weight: 600; }

.datum__prose {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem) var(--gutter);
}
@media (min-width: 860px) {
  .datum__prose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.datum__prose h3 { margin-bottom: .625rem; }
.datum__prose p { font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); }

/* --- 13. Helm (who you work with) --------------------------------------- */

.helm {
  display: grid;
  gap: var(--gutter);
  align-items: center;
}
@media (min-width: 900px) {
  .helm { grid-template-columns: 6fr 5fr; }
}

.helm__frame {
  border-radius: var(--r-4);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 16 / 10;
}
.helm__shot { width: 100%; height: 100%; object-fit: cover; }
.helm__bio p + p { margin-top: 1.125rem; }
.helm__caption { margin-top: .875rem; font-size: var(--t-small); color: var(--ink-soft); }

/* --- 14. Hail (contact well) -------------------------------------------- */

.hail {
  background: var(--card);
  border-radius: var(--r-4);
  padding: clamp(2rem, 5vw, 4rem);
  box-shadow: var(--lift-rest);
}

.hail__address {
  display: inline-block;
  font-family: var(--face-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--moss-deep);
  text-decoration: none;
  margin-block: 1.25rem;
  word-break: break-word;
}
.hail__address:hover { text-decoration: underline; text-underline-offset: .12em; }

.hail__reply {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .hail__reply { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hail__reply div {
  background: var(--paper);
  border-radius: var(--r-2);
  padding: 1.25rem 1.375rem;
}
.hail__reply dt {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--moss-deep);
  margin-bottom: .375rem;
}
.hail__reply dd { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }

/* --- 15. Plainly (denial and honesty statements) ------------------------ */

.plainly {
  background: var(--mist);
  border-radius: var(--r-3);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46rem;
}
.plainly .bearing { margin-bottom: .75rem; }
.plainly p { font-size: var(--t-small); line-height: 1.6; }
.plainly p + p { margin-top: .875rem; }

/* --- 16. Cairn (footer) ------------------------------------------------- */

.cairn {
  background: var(--mist);
  color: var(--ink);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2.5rem;
}

.cairn__cols {
  display: grid;
  gap: 2.5rem var(--gutter);
}
@media (min-width: 780px) {
  .cairn__cols { grid-template-columns: 1.4fr 1fr 1fr; }
}

.cairn__word {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  margin-bottom: .75rem;
  display: block;
}

.cairn__line { font-size: var(--t-small); color: var(--ink-soft); max-width: 30rem; }

.cairn__group h2 {
  font-family: var(--face-text);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--moss-deep);
  margin-bottom: .875rem;
}
.cairn__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cairn__group a {
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--r-1);
}
.cairn__group a:hover { color: var(--moss-deep); text-decoration: underline; text-underline-offset: .18em; }

.cairn__statutory {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60rem;
}
.cairn__statutory p + p { margin-top: .625rem; }

/* --- 17. Charter (legal documents) -------------------------------------- */

.charter {
  display: grid;
  gap: var(--gutter);
  align-items: start;
}
@media (min-width: 1000px) {
  .charter { grid-template-columns: 20rem minmax(0, 1fr); }
}

.charter__index {
  background: var(--card);
  border-radius: var(--r-3);
  padding: 1.75rem;
  box-shadow: var(--lift-rest);
}
@media (min-width: 1000px) {
  .charter__index {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}
.charter__index h2 {
  font-family: var(--face-text);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--moss-deep);
  margin-bottom: 1rem;
}
/* Numbers live in the link text, so the list must not add its own. */
.charter__index ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: .4375rem; }
.charter__index ol ol { margin-top: .4375rem; padding-left: .875rem; }
.charter__index li { font-size: .875rem; line-height: 1.4; }
.charter__index a {
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-1);
}
.charter__index a:hover { color: var(--clay-deep); text-decoration: underline; text-underline-offset: .16em; }

.charter__body { max-width: 46rem; }
.charter__body h2 {
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: 3rem;
  margin-bottom: 1rem;
  scroll-margin-top: 6.5rem;
}
.charter__body h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: .75rem;
  scroll-margin-top: 6.5rem;
}
.charter__body p, .charter__body ul, .charter__body ol { margin-bottom: 1.125rem; }
.charter__body ul, .charter__body ol { padding-left: 1.375rem; }
.charter__body li { margin-bottom: .5rem; }
.charter__body p:last-child { margin-bottom: 0; }

.charter__part {
  background: var(--sage);
  border-radius: var(--r-3);
  padding: 1.5rem 1.75rem;
  margin-top: 3.5rem;
  scroll-margin-top: 6.5rem;
}
.charter__part h2 { margin: 0; font-size: 1.375rem; }
.charter__part p { margin: .5rem 0 0; font-size: var(--t-small); color: var(--ink-soft); }

.charter__stamp {
  background: var(--mist);
  border-radius: var(--r-2);
  padding: 1rem 1.25rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-bottom: 2rem;
  font-variant-numeric: tabular-nums;
}

.charter__role {
  display: inline-block;
  background: var(--sage);
  color: var(--moss-deep);
  border-radius: var(--r-1);
  padding: .25rem .625rem;
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .875rem;
}

.charter__callout {
  background: var(--card);
  border-radius: var(--r-2);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--lift-rest);
}
.charter__callout p:last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own container. */
.charter__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border-radius: var(--r-2);
  background: var(--card);
  max-width: 100%;
}
.charter__scroll:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 2px; }

.charter__scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 42rem;
  font-size: var(--t-small);
}
.charter__scroll--wide table { min-width: 56rem; }

.charter__scroll th, .charter__scroll td {
  text-align: left;
  vertical-align: top;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.charter__scroll thead th {
  background: var(--mist);
  font-family: var(--face-text);
  font-weight: 600;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
}
.charter__scroll tbody tr:last-child td { border-bottom: 0; }

.charter__hint {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-bottom: .5rem;
}

/* --- 18. Page opener for inner pages ------------------------------------ */

.opener {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.opener .bearing { margin-bottom: 1rem; }
.opener .tier-1 { max-width: 16em; }
.opener .throughline { margin-top: 1.5rem; }

/* --- 19. Assorted structures ------------------------------------------- */

.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.roster li {
  background: var(--card);
  border-radius: var(--r-2);
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: .25rem;
}
.roster b { font-weight: 600; }
.roster span { font-size: var(--t-small); color: var(--ink-soft); }

.register {
  display: grid;
  gap: 0;
  margin: 0;
  background: var(--card);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--lift-rest);
}
.register > div {
  display: grid;
  gap: .25rem 2rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) {
  .register > div { grid-template-columns: 14rem minmax(0, 1fr); align-items: baseline; }
}
.register > div:last-child { border-bottom: 0; }
.register dt {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--moss-deep);
}
.register dd { margin: 0; font-variant-numeric: tabular-nums; }

.split {
  display: grid;
  gap: var(--gutter);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 6fr; }
  .split--flip > *:first-child { order: 2; }
}
.split__frame {
  border-radius: var(--r-4);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 3;
}
.split__shot { width: 100%; height: 100%; object-fit: cover; }

.tally {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.tally li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .875rem;
  align-items: start;
  font-size: var(--t-small);
  line-height: 1.6;
}
.tally svg { width: 1.75rem; height: 1.75rem; margin-top: .05rem; }

/* --- 20. Motion. All CSS, all opt-in. ----------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* 1. Section reveal */
  @keyframes fw-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .expanse, .sighting__copy {
    animation: fw-rise 520ms cubic-bezier(.22,.61,.36,1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
  /* 2. Hero photograph settle */
  @keyframes fw-settle { from { transform: scale(1.03); } to { transform: scale(1); } }
  .sighting__shot { animation: fw-settle 900ms cubic-bezier(.22,.61,.36,1) both; }
  /* 3. Card lift */
  .ladder__rung, .logbook__state { transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
  .ladder__rung:hover, .logbook__state:hover { transform: translateY(-4px); box-shadow: var(--lift-hover); }
  /* 4. Button fill wipe */
  .trail { transition: background-color 160ms linear, color 160ms linear; }
  /* 5. Underline draw */
  .underscore::after { transition: transform 200ms ease; }
  /* 6. Process-step counter stagger */
  @keyframes fw-chip { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .traverse__step { animation: fw-chip 420ms cubic-bezier(.22,.61,.36,1) both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
  .traverse__step:nth-child(2) { animation-delay: 80ms; }
  .traverse__step:nth-child(3) { animation-delay: 160ms; }
  .traverse__step:nth-child(4) { animation-delay: 240ms; }
}

/* --- 21. Print ---------------------------------------------------------- */

@media print {
  .beacon, .jump-ahead, .charter__index { display: none; }
  body { background: #FFFFFF; font-size: 11pt; }
  .charter__scroll { overflow: visible; }
  .charter__scroll table { min-width: 0; }
}