/* ==================================================
   SS REPOSITORY — CATEGORY + ARTICLE PAGES

   Load after style.css and repository.css.
   This file intentionally contains only the reusable layout needed by
   Repository categories and long-form guide/article pages.
   ================================================== */

.repository-guide-page {
  --guide-forest: #173120;
  --guide-forest-deep: #0c2115;
  --guide-gold: #d1b365;
  --guide-paper: #f3ede1;
  --guide-paper-deep: #eadcc5;
  --guide-ink: #172119;
  --guide-muted: #5c625b;
}

/* Compact the Repository identity banner slightly on subpages so the
   category hero/article content remains the visual focus. */
.repository-guide-page .repository-hero--compact,
.repository-guide-page .repository-hero--compact .repository-hero-inner,
.repository-guide-page .repository-hero--compact .repository-identity {
  min-height: 116px;
}

.repository-guide-page .repository-kicker {
  margin: 0 0 6px;
  color: #d9c17f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.repository-guide-page .repository-identity-copy h1,
.repository-guide-page .repository-subsection-title {
  margin: 0;
  color: #fff9e9;
  font-size: clamp(31px, 3.3vw, 43px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.42);
  text-transform: uppercase;
}

.repository-guide-page .repository-identity-copy p:last-child {
  margin-top: 8px;
  font-size: clamp(11px, 1.15vw, 15px);
}


/* ==================================================
   STICKY ARTICLE NAVIGATION SUPPORT

   The shared site stylesheet uses `overflow: hidden` on `.site-shell` to
   contain decorative artwork. That also creates a non-scrolling overflow
   ancestor, which prevents `position: sticky` from tracking the browser
   viewport. On Repository guide pages we use `overflow: clip` instead.

   `clip` still prevents decorative content from producing horizontal page
   overflow, but unlike `hidden` it does not create a scrolling container,
   so the On This Page sidebar can remain sticky while the article scrolls.
   ================================================== */

.repository-guide-page .site-shell {
  overflow: clip;
}

/* ==================================================
   BACKPACKING CATEGORY HERO
   ================================================== */

.guide-category-hero {
  position: relative;
  min-height: 338px;
  overflow: hidden;
  color: #fff;
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.guide-category-hero--backpacking {
  background-image: url("../images/ui/repository/backpacking/backpacking-hero.webp");
  background-position: center 48%;
}

.guide-category-hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 18, 11, 0.87) 0%, rgba(5, 18, 11, 0.69) 34%, rgba(5, 18, 11, 0.22) 64%, rgba(5, 18, 11, 0.06) 100%),
    linear-gradient(180deg, rgba(4, 14, 9, 0.08), rgba(3, 12, 7, 0.37));
}

.guide-category-hero__content {
  width: min(calc(100% - 72px), 1120px);
  margin-inline: auto;
  padding: 44px 0 47px;
}

.guide-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.guide-breadcrumbs a {
  text-decoration: none;
}

.guide-breadcrumbs a:hover,
.guide-breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.guide-breadcrumbs--light {
  color: rgba(255, 248, 229, 0.82);
}

.guide-category-hero__eyebrow {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 12px;
  color: #e6cf8a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-category-hero__eyebrow img {
  width: 38px;
  height: auto;
}

.guide-category-hero h1,
.guide-category-hero h2 {
  max-width: 690px;
  margin: 0 0 15px;
  color: #fffdf5;
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow: 0 3px 13px rgba(0, 0, 0, 0.38);
}

.guide-category-hero__content > p {
  max-width: 580px;
  margin: 0 0 23px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.guide-hero-button,
.guide-back-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: #fff8e8;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.guide-hero-button {
  min-height: 43px;
  padding: 9px 14px;
  background: rgba(18, 47, 28, 0.88);
  border: 1px solid var(--guide-gold);
  border-radius: 5px;
  box-shadow: 0 4px 13px rgba(0, 0, 0, 0.22);
  font-size: 13px;
  transition: background-color 170ms ease, color 170ms ease, transform 170ms ease;
}

.guide-hero-button svg,
.guide-index-card__link svg,
.guide-back-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.guide-hero-button:hover,
.guide-hero-button:focus-visible {
  color: #162217;
  background: #e1c77f;
  transform: translateY(-2px);
}

/* ==================================================
   CATEGORY INDEX
   ================================================== */

.guide-category-body,
.guide-article-surface {
  color: var(--guide-ink);
  background-color: var(--guide-paper);
  background-image: url("../images/ui/paper-texture.png");
  background-repeat: repeat;
  background-size: 256px 256px;
}

.guide-category-body {
  padding: 42px 0 48px;
}

.guide-content-width {
  width: min(calc(100% - 72px), 1120px);
  margin-inline: auto;
}

.guide-category-intro {
  max-width: 680px;
  margin-bottom: 28px;
}

.guide-section-label,
.guide-article-hero-label {
  margin: 0 0 7px;
  color: #8a6e30;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.guide-category-intro h2 {
  margin: 0;
  color: #17251a;
  font-size: clamp(31px, 3.5vw, 45px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-transform: uppercase;
}

.guide-category-intro > p:last-child {
  margin: 12px 0 0;
  color: #444a44;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.guide-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.guide-index-card {
  position: relative;
  display: flex;
  min-height: 245px;
  flex-direction: column;
  padding: 23px 22px 19px;
  color: #172219;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.34), rgba(226, 207, 174, 0.07)),
    #ede0ca;
  border: 1px solid #c7b48e;
  border-radius: 8px;
  box-shadow: 0 3px 7px rgba(74, 55, 31, 0.09);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.guide-index-card--featured {
  border-color: #aa8c48;
  box-shadow: inset 0 3px 0 #b3944a, 0 5px 11px rgba(74, 55, 31, 0.12);
}

.guide-index-card--pending {
  opacity: 0.76;
}

.guide-index-card__number {
  color: rgba(37, 57, 40, 0.35);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.guide-index-card__status {
  position: absolute;
  top: 22px;
  right: 20px;
  color: #876b2d;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-index-card h3 {
  margin: 23px 0 9px;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1;
}

.guide-index-card p {
  margin: 0 0 20px;
  color: #454b45;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.48;
}

.guide-index-card__link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  color: #24442b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-index-card:not(.guide-index-card--pending):hover,
.guide-index-card:not(.guide-index-card--pending):focus-visible {
  border-color: #8d7135;
  box-shadow: 0 11px 20px rgba(74, 55, 31, 0.16);
  transform: translateY(-4px);
}

.guide-category-note {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  margin-top: 26px;
  padding: 17px 20px;
  color: #344036;
  background: rgba(225, 212, 185, 0.45);
  border-left: 4px solid #9c8041;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.guide-category-note strong {
  color: #26372a;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 17px;
  text-transform: uppercase;
}

.guide-category-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.52;
}

/* ==================================================
   ARTICLE HERO + BODY
   ================================================== */

.guide-category-hero--article {
  min-height: 246px;
  background-position: center 52%;
}

.guide-category-hero--article .guide-category-hero__content {
  padding-top: 30px;
  padding-bottom: 34px;
}

.guide-category-hero--article h1 {
  margin-bottom: 10px;
  font-size: clamp(35px, 4.4vw, 54px);
}

.guide-category-hero--article .guide-category-hero__content > p:last-child {
  max-width: 650px;
  margin-bottom: 0;
}

.guide-article-surface {
  padding: 42px 0 52px;
}

.guide-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 42px;
  width: min(calc(100% - 72px), 1120px);
  margin-inline: auto;
  align-items: start;
}

.guide-article {
  min-width: 0;
  color: #252b26;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.68;
}

.guide-article-header {
  margin-bottom: 31px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(93, 78, 53, 0.36);
}

.guide-article-lead {
  max-width: 760px;
  margin: 16px 0 0;
  color: #3e463f;
  font-size: 18px;
  line-height: 1.64;
}

.guide-article h2 {
  scroll-margin-top: 28px;
  margin: 42px 0 12px;
  padding-bottom: 8px;
  color: #1c2d20;
  border-bottom: 1px solid rgba(127, 104, 57, 0.32);
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: clamp(25px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-transform: uppercase;
}

.guide-article p {
  margin-bottom: 18px;
}

.guide-article ul {
  padding-left: 1.25rem;
}

.guide-article li + li {
  margin-top: 9px;
}

.guide-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
}

.guide-mini-grid > div {
  padding: 15px 16px;
  background: rgba(229, 214, 184, 0.48);
  border: 1px solid rgba(169, 143, 89, 0.42);
  border-radius: 5px;
}

.guide-mini-grid strong,
.guide-mini-grid span {
  display: block;
}

.guide-mini-grid strong {
  margin-bottom: 4px;
  color: #2d432f;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 17px;
  text-transform: uppercase;
}

.guide-mini-grid span {
  color: #4f564f;
  font-size: 13px;
  line-height: 1.48;
}

.guide-check-list {
  margin: 18px 0 25px;
  padding: 18px 21px 18px 39px !important;
  background: rgba(231, 217, 189, 0.42);
  border: 1px solid rgba(161, 133, 76, 0.4);
  border-radius: 6px;
}

.guide-article-callout {
  margin: 22px 0;
  padding: 16px 18px;
  background: rgba(226, 211, 180, 0.44);
  border-left: 4px solid #9b7e3f;
}

.guide-article-callout strong {
  display: block;
  margin-bottom: 5px;
  color: #203423;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.guide-article-callout p:last-child,
.guide-article-callout ul:last-child {
  margin-bottom: 0;
}

.guide-article-callout--check {
  background: rgba(221, 229, 208, 0.5);
  border-left-color: #537047;
}

.guide-article-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid rgba(93, 78, 53, 0.36);
}

.guide-back-link {
  color: #2a4a30;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 13px;
}

.guide-article-footer p {
  margin: 0;
  color: #62675f;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.guide-article-footer code {
  color: #394a3c;
  background: rgba(221, 210, 188, 0.55);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ==================================================
   ARTICLE SIDEBAR + AUTOMATIC TABLE OF CONTENTS
   ================================================== */

.guide-article-sidebar {
  /*
    Sticky positioning now works because `.site-shell` is overridden to
    `overflow: clip` above instead of the shared `overflow: hidden`.
    `align-self: start` prevents the grid item from stretching to the full
    article height, leaving room for it to move as the viewport scrolls.
  */
  position: -webkit-sticky;
  position: sticky;
  top: 18px;
  align-self: start;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 36px);
}

.guide-sidebar-panel {
  overflow: hidden;
  background: rgba(232, 218, 190, 0.52);
  border: 1px solid rgba(151, 126, 77, 0.44);
  border-radius: 6px;
}

.guide-sidebar-panel summary {
  padding: 13px 14px;
  color: #223529;
  cursor: pointer;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  list-style: none;
  text-transform: uppercase;
}

.guide-sidebar-panel summary::-webkit-details-marker {
  display: none;
}

.guide-sidebar-panel summary::after {
  content: "+";
  float: right;
  color: #8b6e30;
}

.guide-sidebar-panel[open] summary::after {
  content: "−";
}

.guide-sidebar-panel nav {
  display: grid;
  padding: 0 13px 13px;
}

.guide-sidebar-panel nav > a,
.guide-sidebar-panel nav > span {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 7px;
  padding: 8px 6px;
  color: #455048;
  border-top: 1px solid rgba(123, 103, 68, 0.18);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
}

.guide-sidebar-panel nav > a:hover,
.guide-sidebar-panel nav > a:focus-visible,
.guide-sidebar-panel nav > a.is-current {
  color: #75591c;
}

.guide-sidebar-panel nav > span.is-pending {
  color: #8a8c86;
}

.guide-sidebar-panel nav > a > span,
.guide-sidebar-panel nav > span > span {
  color: #9b814a;
  font-weight: 700;
}

.guide-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-toc li {
  border-top: 1px solid rgba(123, 103, 68, 0.18);
}

.guide-toc a {
  display: block;
  padding: 7px 6px;
  color: #4a524c;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
  color: #765b20;
  text-decoration: underline;
}

/* ==================================================
   RESPONSIVE GUIDE LAYOUT
   ================================================== */

@media (max-width: 940px) {
  .guide-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-article-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 28px;
  }

  .guide-category-hero__content,
  .guide-content-width,
  .guide-article-layout {
    width: min(calc(100% - 48px), 880px);
  }
}

@media (max-width: 760px) {
  .repository-guide-page .repository-hero--compact,
  .repository-guide-page .repository-hero--compact .repository-hero-inner,
  .repository-guide-page .repository-hero--compact .repository-identity {
    min-height: 144px;
  }

  .guide-category-hero {
    min-height: 360px;
    background-position: 63% center;
  }

  .guide-category-hero--article {
    min-height: 265px;
  }

  .guide-category-hero__shade {
    background: linear-gradient(90deg, rgba(5, 18, 11, 0.91), rgba(5, 18, 11, 0.64) 62%, rgba(5, 18, 11, 0.24));
  }

  .guide-category-hero__content,
  .guide-content-width,
  .guide-article-layout {
    width: min(calc(100% - 36px), 680px);
  }

  .guide-category-hero__content {
    padding-top: 36px;
  }

  .guide-card-grid {
    grid-template-columns: 1fr;
  }

  .guide-index-card {
    min-height: 220px;
  }

  .guide-category-note {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .guide-article-layout {
    display: flex;
    flex-direction: column;
  }

  .guide-article-sidebar {
    position: static;
    order: -1;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-sidebar-panel:not([open]) nav {
    display: none;
  }

  .guide-article-footer {
    grid-template-columns: 1fr;
  }

  .guide-article-footer p {
    text-align: left;
  }
}

@media (max-width: 500px) {
  .guide-category-hero h2 {
    font-size: 38px;
  }

  .guide-mini-grid,
  .guide-article-sidebar {
    grid-template-columns: 1fr;
  }

  .guide-article {
    font-size: 15px;
  }

  .guide-article-lead {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-index-card,
  .guide-hero-button {
    transition: none;
  }
}

/* ==================================================
   BACKPACKING LAYOUT V2 — LIGHTER SUBPAGE HEADER

   Repository subpages no longer repeat the large Repository identity banner.
   Their page order is now:

   global navigation -> short category hero -> Repository navigation
   -> breadcrumbs -> category/article content
   ================================================== */

/* The category hero is intentionally about half the original 338px height. */
.repository-guide-page .guide-category-hero {
  min-height: 170px;
}

.repository-guide-page .guide-category-hero--backpacking {
  background-position: center 50%;
}

/* Because the supplied image places the backpack on the right, keep the title
   on the left and use only enough shading to maintain readable contrast. */
.repository-guide-page .guide-category-hero__shade {
  background:
    linear-gradient(90deg, rgba(5, 18, 11, 0.76) 0%, rgba(5, 18, 11, 0.48) 32%, rgba(5, 18, 11, 0.08) 64%, transparent 100%),
    linear-gradient(180deg, rgba(4, 14, 9, 0.04), rgba(3, 12, 7, 0.2));
}

.repository-guide-page .guide-category-hero__content {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  justify-content: center;
  width: min(calc(100% - 72px), 1120px);
  padding: 16px 0;
}

.repository-guide-page .guide-category-hero h1,
.repository-guide-page .guide-category-hero__title {
  margin: 0;
  color: #fffdf5;
  font-family: "Arial Narrow", "Liberation Sans Narrow", "PT Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
  font-size: clamp(34px, 4.2vw, 50px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.38);
  text-transform: uppercase;
}

.repository-guide-page .guide-category-hero__tagline {
  max-width: 520px;
  margin: 9px 0 0;
  color: #f4e7c4;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

/* The Repository category navigation now sits directly under the photo hero. */
.repository-guide-page .repository-section-navigation {
  z-index: 9;
}

/* Breadcrumbs move to a slim paper-colored row beneath the Repository nav. */
.guide-breadcrumb-bar {
  background-color: var(--guide-paper);
  background-image: url("../images/ui/paper-texture.png");
  background-repeat: repeat;
  background-size: 256px 256px;
  border-bottom: 1px solid rgba(123, 103, 68, 0.18);
}

.guide-breadcrumb-bar .guide-breadcrumbs {
  margin: 0;
  padding: 12px 0 11px;
  color: #716751;
}

.guide-breadcrumb-bar .guide-breadcrumbs a {
  color: #35503b;
}

/* Category body begins closer to the breadcrumbs now that the hero is shorter. */
.repository-guide-page .guide-category-body {
  padding-top: 30px;
}

/* Article pages use the same category hero height instead of a separate tall
   article hero. The actual article title moves into the paper content below. */
.repository-guide-page .guide-category-hero--article {
  min-height: 150px;
}

.repository-guide-page .guide-category-hero--article .guide-category-hero__content {
  min-height: 150px;
  padding: 14px 0;
}

.guide-article-title {
  margin: 3px 0 15px;
  color: #1b2c20;
  font-family: "Arial Narrow", "Liberation Sans Narrow", "PT Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .repository-guide-page .guide-category-hero,
  .repository-guide-page .guide-category-hero__content {
    min-height: 165px;
  }

  .repository-guide-page .guide-category-hero--article,
  .repository-guide-page .guide-category-hero--article .guide-category-hero__content {
    min-height: 145px;
  }

  .repository-guide-page .guide-category-hero {
    background-position: 62% center;
  }

  .repository-guide-page .guide-category-hero__content,
  .guide-breadcrumb-bar .guide-content-width {
    width: min(calc(100% - 36px), 680px);
  }

  .repository-guide-page .guide-category-hero__tagline {
    max-width: 330px;
  }
}

@media (max-width: 500px) {
  .repository-guide-page .guide-category-hero h1,
  .repository-guide-page .guide-category-hero__title {
    font-size: 34px;
  }

  .repository-guide-page .guide-category-hero__tagline {
    font-size: 14px;
  }
}

/* ==================================================
   BACKPACKING LAYOUT V3 — BRIGHTER HERO + CLEAN ARTICLE NAV

   - The supplied Backpacking hero now renders without a dark overlay.
   - Category and article pages use exactly the same hero height.
   - Backpacking's article list moved into a hover/focus dropdown attached to
     the Repository navigation bar on desktop.
   - The article sidebar now contains only the sticky "On This Page" list.
   ================================================== */

/* Match the shared Venture Crew desktop hero height. */
.repository-guide-page .guide-category-hero,
.repository-guide-page .guide-category-hero--article {
  min-height: var(--section-hero-height, 258px);
}

.repository-guide-page .guide-category-hero__content,
.repository-guide-page .guide-category-hero--article .guide-category-hero__content {
  min-height: var(--section-hero-height, 258px);
  padding-top: 18px;
  padding-bottom: 18px;
}

/* The darkening in earlier versions came from this overlay, not the WebP.
   It is disabled so the original photograph keeps its natural brightness. */
.repository-guide-page .guide-category-hero__shade {
  display: none;
  background: none;
}

/* A stronger text shadow replaces the image-wide dark overlay and affects
   only the lettering rather than dimming the photograph. */
.repository-guide-page .guide-category-hero h1,
.repository-guide-page .guide-category-hero__title {
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.72),
    0 4px 14px rgba(0, 0, 0, 0.42);
}

.repository-guide-page .guide-category-hero__tagline {
  color: #fff6df;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.82),
    0 3px 10px rgba(0, 0, 0, 0.42);
}

/* ==================================================
   BACKPACKING ARTICLE DROPDOWN IN REPOSITORY NAV
   ================================================== */

.repository-guide-page .repository-section-menu {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}

/* Match the existing Repository navigation anchors exactly. */
.repository-guide-page .repository-section-menu__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #f4eedf;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.repository-guide-page .repository-section-menu__trigger::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 2px;
  background: var(--repository-gold, #d2b468);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.repository-guide-page .repository-section-menu__trigger:hover,
.repository-guide-page .repository-section-menu__trigger:focus-visible,
.repository-guide-page .repository-section-menu__trigger.is-current {
  color: var(--repository-gold, #d2b468);
  background: rgba(255, 255, 255, 0.035);
}

.repository-guide-page .repository-section-menu__trigger:hover::after,
.repository-guide-page .repository-section-menu__trigger:focus-visible::after,
.repository-guide-page .repository-section-menu__trigger.is-current::after {
  transform: scaleX(1);
}

.repository-section-menu__dropdown {
  position: absolute;
  z-index: 50;
  top: calc(100% - 1px);
  left: 0;
  display: none;
  width: 244px;
  padding: 8px;
  color: #26342a;
  background: #f1e7d6 url("../images/ui/paper-texture.png") repeat;
  background-size: 256px 256px;
  border: 1px solid rgba(143, 117, 67, 0.62);
  border-top: 2px solid var(--repository-gold, #d2b468);
  border-radius: 0 0 7px 7px;
  box-shadow: 0 12px 24px rgba(19, 25, 20, 0.28);
}

/* Mouse users get the requested hover behavior; keyboard users receive the
   same menu through :focus-within as they tab through the navigation. */
.repository-section-menu:hover .repository-section-menu__dropdown,
.repository-section-menu:focus-within .repository-section-menu__dropdown {
  display: grid;
}

.repository-section-menu__dropdown > a,
.repository-section-menu__dropdown > span {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: #344238;
  border-radius: 4px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-transform: none;
}

.repository-section-menu__dropdown > a:hover,
.repository-section-menu__dropdown > a:focus-visible,
.repository-section-menu__dropdown > a.is-current {
  color: #1d3424;
  background: rgba(190, 160, 96, 0.22);
}

.repository-section-menu__dropdown > span.is-pending {
  color: #7d807a;
}

.repository-section-menu__dropdown small {
  color: #9a8761;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ==================================================
   ARTICLE SIDEBAR — STICKY ON THIS PAGE ONLY
   ================================================== */

.repository-guide-page .guide-article-layout {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 38px;
}

.repository-guide-page .guide-article-sidebar {
  position: sticky;
  top: 18px;
  display: block;
  align-self: start;
}

.repository-guide-page .guide-sidebar-panel--toc {
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: rgba(232, 218, 190, 0.58);
  box-shadow: 0 5px 13px rgba(78, 59, 31, 0.08);
}

.repository-guide-page .guide-toc a.is-current {
  color: #725619;
  background: rgba(191, 160, 94, 0.16);
  font-weight: 700;
  text-decoration: none;
}

/* The Repository navigation switches to its existing horizontal-scroll mode
   on smaller screens. Hover menus are a desktop enhancement, so hide the
   dropdown there; tapping Backpacking still opens the category landing page. */
@media (max-width: 940px) {
  .repository-section-menu__dropdown {
    display: none !important;
  }

  .repository-guide-page .repository-section-menu__trigger {
    min-height: 50px;
    padding-inline: 20px;
  }

  .repository-guide-page .guide-article-layout {
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 26px;
  }
}

@media (max-width: 760px) {
  /* Category landing page and every Backpacking article remain identical. */
  .repository-guide-page .guide-category-hero,
  .repository-guide-page .guide-category-hero--article,
  .repository-guide-page .guide-category-hero__content,
  .repository-guide-page .guide-category-hero--article .guide-category-hero__content {
    min-height: 200px;
  }

  .repository-guide-page .guide-article-sidebar {
    position: static;
    order: -1;
    width: 100%;
  }

  .repository-guide-page .guide-sidebar-panel--toc {
    max-height: none;
  }
}
/* ==================================================
   REUSABLE ARTICLE DATA TABLES
   ================================================== */

.guide-table-wrap {
  max-width: 100%;
  margin: 20px 0 25px;
  overflow-x: auto;
  border: 1px solid rgba(151, 126, 77, 0.48);
  border-radius: 6px;
  background: rgba(238, 225, 205, 0.5);
  box-shadow: 0 4px 11px rgba(78, 59, 31, 0.07);
}

.guide-table-wrap:focus-visible {
  outline: 3px solid rgba(155, 126, 63, 0.46);
  outline-offset: 3px;
}

.guide-data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  color: #303730;
  font-size: 13px;
  line-height: 1.45;
}

.guide-data-table th,
.guide-data-table td {
  padding: 11px 12px;
  border-right: 1px solid rgba(151, 126, 77, 0.34);
  border-bottom: 1px solid rgba(151, 126, 77, 0.34);
  text-align: left;
  vertical-align: top;
}

.guide-data-table th:last-child,
.guide-data-table td:last-child {
  border-right: 0;
}

.guide-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.guide-data-table th {
  color: #f8f1df;
  background: #304936;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.guide-data-table tbody tr:nth-child(even) td {
  background: rgba(221, 208, 181, 0.3);
}

.repository-guide-page .repository-section-menu__dropdown {
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

@media (max-width: 760px) {
  .guide-data-table {
    min-width: 560px;
    font-size: 12px;
  }

  .guide-data-table th,
  .guide-data-table td {
    padding: 9px 10px;
  }
}

/* ==================================================
   FIRE, KNIFE & AXE CATEGORY HERO

   Shared by the category landing page and all Fire, Knife & Axe articles.
   The supplied hero remains at natural brightness; readability comes from
   the existing Repository guide text-shadow treatment.
   ================================================== */

.repository-guide-page .guide-category-hero--fire-knife-axe {
  background-image: url("../images/ui/repository/fire-knife-axe/fire-knife-axe-hero.png");
  background-position: center 50%;
}

@media (max-width: 760px) {
  .repository-guide-page .guide-category-hero--fire-knife-axe {
    background-position: center 50%;
  }
}

/* ==================================================
   FIRST AID CATEGORY HERO

   Shared by the First Aid landing page and every First Aid article. The
   supplied photograph remains at natural brightness; the established guide
   text-shadow treatment provides title/tagline contrast without darkening the
   entire image.
   ================================================== */

.repository-guide-page .guide-category-hero--first-aid {
  background-image: url("../images/ui/repository/first-aid/first-aid-hero.png");
  background-position: center 50%;
}

@media (max-width: 760px) {
  .repository-guide-page .guide-category-hero--first-aid {
    background-position: 60% center;
  }
}

/* ==================================================
   ORIENTEERING CATEGORY HERO

   Shared by the Orienteering landing page and every Orienteering article.
   The supplied photograph remains at natural brightness and uses the same
   213px desktop / 200px mobile Repository guide hero treatment.
   ================================================== */

.repository-guide-page .guide-category-hero--orienteering {
  background-image: url("../images/ui/repository/orienteering/orienteering-hero.png");
  background-position: center 50%;
}

@media (max-width: 760px) {
  .repository-guide-page .guide-category-hero--orienteering {
    background-position: 62% center;
  }
}



/* ==================================================
   TUTORIALS CATEGORY HERO

   Shared by the Tutorials landing page and every Tutorials article. The
   supplied photograph remains at natural brightness and uses the established
   213px desktop / 200px mobile Repository guide hero treatment.
   ================================================== */

.repository-guide-page .guide-category-hero--tutorials {
  background-image: url("../images/ui/repository/tutorials/tutorials-hero.png");
  background-position: center 50%;
}

@media (max-width: 760px) {
  .repository-guide-page .guide-category-hero--tutorials {
    background-position: 58% center;
  }
}

/* ==================================================
   RIGHT-ALIGNED REPOSITORY ARTICLE DROPDOWN

   Categories placed at the far-right end of the Repository navigation (such
   as Tutorials) align their article dropdown to the trigger's right edge.
   This keeps the menu inside the site shell instead of allowing it to extend
   past the right boundary and become clipped.
   ================================================== */

.repository-guide-page .repository-section-menu--align-right .repository-section-menu__dropdown {
  right: 0;
  left: auto;
}

/* ==================================================
   TUTORIALS DROPDOWN — DESKTOP EDGE-CLAMP FIX V2

   Tutorials is the final item in the Repository navigation. On desktop its
   article menu must open inward (to the left) so the site-shell edge cannot
   clip the dropdown. The :last-child selector is a fallback in case a page
   does not carry the explicit --align-right helper class.
   ================================================== */

@media (min-width: 941px) {
  .repository-guide-page .repository-section-navigation,
  .repository-guide-page .repository-section-navigation-inner {
    overflow: visible;
  }

  .repository-guide-page .repository-section-menu--align-right .repository-section-menu__dropdown,
  .repository-guide-page .repository-section-navigation-inner > .repository-section-menu:last-child .repository-section-menu__dropdown {
    right: 0 !important;
    left: auto !important;
    width: min(320px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    transform: none !important;
  }
}

/* ==================================================
   MOBILE ARTICLE TABLE CONTAINMENT FIX

   Prevent wide data tables from increasing the page's intrinsic width on
   phones/tablets. Tables stay inside the article column and reflow to the
   available width instead of forcing the entire page to scroll horizontally.
   This also suppresses mobile browser text inflation that can occur when a
   wide table makes the layout appear desktop-sized.
   ================================================== */

.repository-guide-page {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.repository-guide-page .guide-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

@media (max-width: 760px) {
  /* Keep the article column inset from the viewport. The previous table fix
     accidentally overrode the established guide-layout width with 100%, which
     removed the left/right breathing room on phones. */
  .repository-guide-page .guide-article-layout {
    width: min(calc(100% - 40px), 680px);
    min-width: 0;
    max-width: 680px;
    margin-inline: auto;
  }

  .repository-guide-page .guide-article,
  .repository-guide-page .guide-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Override the older 560px mobile minimum. On a phone the table now fits
     the article column and wraps cell copy rather than widening the page. */
  .repository-guide-page .guide-data-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 12px;
    line-height: 1.4;
  }

  .repository-guide-page .guide-data-table th,
  .repository-guide-page .guide-data-table td {
    min-width: 0;
    padding: 8px 7px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}

@media (max-width: 430px) {
  .repository-guide-page .guide-data-table {
    font-size: 11px;
  }

  .repository-guide-page .guide-data-table th,
  .repository-guide-page .guide-data-table td {
    padding: 7px 6px;
  }
}


/* ==================================================
   PIONEERING CATEGORY HERO

   Shared by the Pioneering landing page and every Pioneering article. The
   supplied photograph remains at natural brightness and uses the established
   213px desktop / 200px mobile Repository guide hero treatment.
   ================================================== */

.repository-guide-page .guide-category-hero--pioneering {
  background-image: url("../images/ui/repository/pioneering/pioneering-hero.png");
  background-position: center 50%;
}

@media (max-width: 760px) {
  .repository-guide-page .guide-category-hero--pioneering {
    background-position: 68% center;
  }
}

/* ==================================================
   REUSABLE ARTICLE SUBHEADINGS + CHECKLISTS
   ================================================== */

.repository-guide-page .guide-article h3 {
  margin: 27px 0 9px;
  color: #263a2b;
  font-family: "Arial Narrow", "Liberation Sans Narrow", "PT Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: uppercase;
}

.repository-guide-page .guide-article ol {
  padding-left: 1.4rem;
}

.repository-guide-page .guide-checklist {
  margin: 18px 0 25px;
  padding: 17px 20px !important;
  list-style: none;
  background: rgba(231, 217, 189, 0.42);
  border: 1px solid rgba(161, 133, 76, 0.4);
  border-radius: 6px;
}

.repository-guide-page .guide-checklist li {
  position: relative;
  padding-left: 1.55rem;
}

.repository-guide-page .guide-checklist li::before {
  content: "☐";
  position: absolute;
  left: 0;
  top: 0;
  color: #6f5a2d;
  font-weight: 700;
}

/* ==================================================
   SS TRACKER CATEGORY HERO + HIKE DIRECTORY

   The Tracker landing page uses the same Repository category shell as the
   other guide libraries. Hike cards are populated from js/ss-tracker-hikes.js
   so future trails can be added in one central data file.
   ================================================== */

.repository-guide-page .guide-category-hero--ss-tracker {
  background-image: url("../images/ui/repository/ss-tracker/ss-tracker-hero.png");
  background-position: center 50%;
}

.ss-tracker-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 14px;
  color: #5a625b;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
}

.ss-tracker-library-meta strong {
  color: #35503b;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ss-tracker-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: -2px 0 14px;
  color: #5d635d;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
}

.ss-tracker-card-meta span {
  position: relative;
}

.ss-tracker-card-meta span + span::before {
  content: "•";
  margin-right: 12px;
  color: #9a814a;
}

.ss-tracker-empty-state {
  grid-column: 1 / -1;
  padding: 26px;
  color: #414941;
  background: rgba(232, 218, 190, 0.52);
  border: 1px solid rgba(151, 126, 77, 0.44);
  border-radius: 7px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.ss-tracker-empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: #223529;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
}

.ss-tracker-empty-state p {
  margin: 0;
}

@media (max-width: 760px) {
  .repository-guide-page .guide-category-hero--ss-tracker {
    background-position: 66% center;
  }

  .ss-tracker-card-meta {
    gap: 5px 9px;
  }

  .ss-tracker-card-meta span + span::before {
    margin-right: 9px;
  }
}