/* Camp Compass variables for this site. Taken from this site's own
   stylesheet: the network shares no tokens, and assuming otherwise is
   how nine unstyled declarations shipped earlier. */
.camp-compass, .cc-promo {
  --cc-accent: var(--coral);
  --cc-dark: var(--navy);
  --cc-warm: var(--sun);
  --cc-paper: var(--paper);
  --cc-cream: var(--cream);
  --cc-line: var(--line);
  --cc-display: var(--serif);
}

/* Camp Compass
 * ============
 * One stylesheet, nine sites. The network shares no design tokens, no button
 * classes and no type scale, so this file inherits nothing: it declares its own
 * buttons, its own spacing and its own type, and reads six variables that each
 * site sets in the block above this comment. Porting a change means editing
 * this file once, not nine times.
 *
 * Variables expected on .camp-compass and .cc-promo:
 *   --cc-accent  the site's action colour
 *   --cc-dark    the dark panel background
 *   --cc-warm    a warm label colour that reads on --cc-dark
 *   --cc-paper   card background on light ground
 *   --cc-cream   page background, used for hover states
 *   --cc-line    hairline rule
 *   --cc-serif   display face for the big numerals (optional)
 */

.camp-compass,
.cc-promo {
  --cc-serif: var(--cc-display, Georgia, "Times New Roman", serif);
  max-width: 1320px;
  margin: 0 auto;
  padding: 70px 32px;
  box-sizing: border-box;
}

.camp-compass *,
.cc-promo * { box-sizing: border-box; }

/* Anchor target has to clear whatever sticky header the host site uses. */
.camp-compass { scroll-margin-top: 96px; }

.cc-head { margin-bottom: 26px; }

.cc-eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: .72rem;
  margin: 0 0 14px;
}

/* The claim, and it is accurate about what the tool does. It is never rendered
   alone: the paragraph beneath it says the page has to be loaded while there
   are still bars. An overstated badge is worse than no badge, because somebody
   would ride out on it. */
.cc-badge {
  display: inline-block;
  background: var(--cc-accent);
  color: #fff;
  padding: .35rem .6rem;
  margin-right: .55rem;
  letter-spacing: .12em;
}

.cc-title {
  font-family: var(--cc-serif);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.02;
  font-weight: 400;
  margin: 0 0 14px;
}

.cc-lede { max-width: 68ch; margin: 0; }

/* The three-step habit is the whole point, so it is an ordered list above the
   tool rather than a caption beside it. */
.cc-steps {
  counter-reset: cc;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 26px 0;
  padding: 0;
}

.cc-steps li {
  counter-increment: cc;
  padding-left: 48px;
  position: relative;
  font-size: .95rem;
}

.cc-steps li::before {
  content: counter(cc);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--cc-accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}

.cc-intro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cc-line);
  border: 1px solid var(--cc-line);
  margin-bottom: 26px;
}

.cc-intro p {
  background: var(--cc-paper);
  margin: 0;
  padding: 24px 26px;
  font-size: .95rem;
  line-height: 1.55;
}

.cc-tool { background: var(--cc-dark); color: #fff; padding: 30px; }

.cc-name { margin-bottom: 18px; display: grid; gap: 8px; max-width: 26rem; }

.cc-name label {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  font-size: .66rem;
  color: var(--cc-warm);
}

.cc-name input {
  font-family: var(--cc-serif);
  font-size: 1.15rem;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  width: 100%;
}

.cc-name input:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 1px; }

.cc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

/* Own buttons on purpose. Four sites in this network use four different button
   systems, and inheriting any of them is how a port breaks quietly. */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.2rem;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  /* Longhands, not the `font` shorthand. `font: 700 .75rem/1 inherit` is
     invalid, because the family slot cannot take `inherit`, and the browser
     drops the whole declaration: buttons silently render at the UA default
     weight and size. */
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
}

.cc-btn.is-primary { background: var(--cc-accent); color: #fff; }
.cc-btn.is-ghost { border-color: currentColor; }
.cc-btn.is-light { background: #fff; color: var(--cc-dark); }
.cc-btn:hover { filter: brightness(1.08); }
.cc-btn:focus-visible { outline: 3px solid var(--cc-warm); outline-offset: 2px; }

/* Destructive, so it is pushed away from the two buttons people actually want
   and kept visually quieter. */
.cc-clear { margin-left: auto; opacity: .7; font-size: .68rem; }
.cc-clear:hover { opacity: 1; }

.cc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .2);
}

.cc-cell {
  background: var(--cc-dark);
  padding: 22px 24px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.cc-cell span {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  font-size: .66rem;
  color: var(--cc-warm);
}

.cc-cell strong {
  font-family: var(--cc-serif);
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 400;
  word-break: break-word;
}

/* The two answers somebody actually reads when they are turned around. Sized to
   be legible at arm's length, in sun, with sand on the screen. */
#fcDistance, #fcBearing { font-size: 2.4rem; }

.cc-cell small { color: rgba(255, 255, 255, .74); font-size: .76rem; }

/* A pointer, not a compass rose. One direction, nothing to misread. */
.cc-arrow {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  transition: transform .25s ease;
}

.cc-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cc-accent);
  clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
}

.camp-compass:not(.has-camp) .cc-arrow,
.camp-compass:not(.has-fix) .cc-arrow { display: none; }

.cc-status {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: .88rem;
  min-height: 2.6em;
}

#fcDrive { margin-top: 18px; }

/* Given its own weight, because the failure mode of a tool like this is
   somebody trusting it instead of carrying real equipment. */
.cc-warning {
  margin-top: 26px;
  padding: 22px 26px;
  background: var(--cc-cream);
  border-left: 5px solid var(--cc-accent);
  font-size: .92rem;
}

.camp-compass.is-unavailable .cc-actions,
.camp-compass.is-unavailable .cc-grid,
.camp-compass.is-unavailable .cc-name { display: none; }

/* ---- homepage promotion ------------------------------------------------- */

.cc-promo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: center; }

.cc-promo h2 {
  font-family: var(--cc-serif);
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 10px 0 16px;
}

.cc-promo h2 em { font-style: italic; color: var(--cc-accent); }
.cc-promo > div > p:not(.cc-eyebrow) { max-width: 62ch; margin: 0 0 24px; }

.cc-promo-steps {
  counter-reset: p;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--cc-line);
  border: 1px solid var(--cc-line);
}

.cc-promo-steps li {
  counter-increment: p;
  background: var(--cc-paper);
  padding: 20px 22px 20px 62px;
  position: relative;
  font-size: .95rem;
}

.cc-promo-steps li::before {
  content: counter(p);
  position: absolute;
  left: 22px;
  top: 18px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--cc-accent);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
}

@media (max-width: 1000px) {
  .cc-intro, .cc-steps { grid-template-columns: 1fr; }
  .cc-steps { gap: 12px; }
  .cc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cc-promo { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 760px) {
  .camp-compass, .cc-promo { padding: 45px 20px; }
  .cc-tool { padding: 22px 18px; }
  .cc-grid { grid-template-columns: 1fr; }
  .cc-actions .cc-btn { flex: 1 1 100%; }
  .cc-clear { margin-left: 0; }
  #fcDistance, #fcBearing { font-size: 2.9rem; }
}

/* Sharing camp is meaningless before a spot exists, so the button stays out of
   the way until there is one. */
.camp-compass:not(.has-camp) .cc-share-camp { display: none; }

/* Link into the hub explainer. Real internal linking across the network, in
   the section itself rather than buried in a footer. */
.cc-more { margin: 22px 0 0; }
.cc-more a { font-weight: 700; font-size: .85rem; color: var(--cc-accent); text-underline-offset: 6px; }

/* The Camp Compass mark. Sits beside the heading on the light page ground, and
   deliberately never on the dark tool panel, where its navy ring would vanish.
   It keeps its own brand colours on every site: the tool chrome adopts local
   tokens, a brand mark should not. */
.cc-has-mark {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: start;
}

.cc-mark { grid-row: 1 / span 3; width: 72px; height: 72px; }

@media (max-width: 620px) {
  .cc-has-mark { grid-template-columns: 1fr; row-gap: 12px; }
  .cc-mark { grid-row: auto; width: 56px; height: 56px; }
}

/* The three functions, stated once, above the teaching steps. Somebody
   scanning the steps would otherwise never learn that sharing exists. */
.cc-does {
  margin: 0 0 26px;
  padding: 18px 22px;
  background: var(--cc-paper);
  border-left: 5px solid var(--cc-accent);
  max-width: 88ch;
  font-size: .96rem;
}