/* Trail journal page: hero, fresh strip, challenge picker with map, challenge journal. */
.jx { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 5vw, 3.6rem); }
.jx > * { min-width: 0; }

/* Hero */
.jxhero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem;
  margin-top: -0.6rem; padding: clamp(2.2rem, 5vw, 4rem) clamp(1.3rem, 4vw, 3rem); border-radius: 28px;
  background:
    radial-gradient(600px 380px at 78% 45%, hsl(22 100% 52% / 0.32), transparent 70%),
    radial-gradient(500px 300px at 8% 100%, hsl(140 30% 40% / 0.18), transparent 70%),
    linear-gradient(115deg, rgb(13 14 11 / 0.96) 35%, rgb(13 14 11 / 0.7)), url(img/cp-twotrack.jpg) center 55% / cover;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 40px 80px -40px rgb(0 0 0 / 0.9);
  --topo-o: 0.32; --topo-color: hsl(30 70% 72%); --topo-at: 70% 50%; --topo-size: 1700px auto; --topo-spread: 80% 90%; }
.jxhero h1 { margin-top: 0.7rem; font: 900 clamp(3.4rem, 2rem + 6vw, 6.6rem)/0.84 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em; text-shadow: 0 6px 40px rgb(0 0 0 / 0.5); }
.jxhero h1 span { display: block; color: var(--accent); }
.jxhero__sub { margin-top: 1rem; max-width: 46ch; color: hsl(40 20% 86%); font-size: 1.05rem; line-height: 1.55; }
.jxstats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.jxstats:empty { display: none; }
.jxstats > div { display: flex; flex-direction: column-reverse; gap: 0.3rem; padding: 0.7rem 1rem; border-radius: 16px; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jxstats dt { font: 700 0.6rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.jxstats dd { margin: 0; font: 900 1.7rem/1 var(--font-display); color: var(--fg); }
.jxhero__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

/* Snapshot prints */
.jxhero__stack { position: relative; height: clamp(300px, 34vw, 420px); }
.jxsnap { position: absolute; margin: 0; width: 62%; padding: 0.55rem 0.55rem 0; border-radius: 10px; background: hsl(40 22% 92%); box-shadow: 0 30px 50px -20px rgb(0 0 0 / 0.85), 0 2px 0 rgb(0 0 0 / 0.2);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), z-index 0s; }
.jxsnap img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 5px; }
.jxsnap figcaption { padding: 0.55rem 0.2rem 0.65rem; font: 700 0.62rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: hsl(60 8% 22%); }
.jxsnap--a { top: 2%; left: 2%; transform: rotate(-7deg); z-index: 1; }
.jxsnap--b { top: 18%; right: 0; transform: rotate(5deg); z-index: 3; }
.jxsnap--c { bottom: 0; left: 18%; transform: rotate(-2deg); z-index: 2; width: 56%; }
.jxhero__stack:hover .jxsnap--a { transform: rotate(-9deg) translate(-10px, -6px); }
.jxhero__stack:hover .jxsnap--b { transform: rotate(7deg) translate(10px, -4px); }
.jxhero__stack:hover .jxsnap--c { transform: rotate(0deg) translateY(8px); }
.jxsnap--b::before { content: ""; position: absolute; top: -12px; left: 50%; width: 70px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: hsl(40 30% 80% / 0.7); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); }

/* Section heads */
.jxhead { display: grid; gap: 0.45rem; margin-bottom: 1.1rem; }
.jxhead h2 { font: 900 clamp(2rem, 1.4rem + 2.6vw, 3.2rem)/0.92 var(--font-display); text-transform: uppercase; }
.jxhead p:not(.eyebrow) { color: var(--muted); max-width: 60ch; }
.jxempty { color: var(--muted); padding: 1rem 0; }

/* Fresh off the trail */
.jxfeed { list-style: none; margin: 0; padding: 0.2rem 0.2rem 0.9rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 0.9rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.jxfeed > li { scroll-snap-align: start; min-width: 0; }
.jxf { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; text-align: left; color: inherit; cursor: pointer;
  background: linear-gradient(180deg, hsl(60 7% 15% / 0.9), hsl(60 7% 11% / 0.9)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 18px 40px -26px rgb(0 0 0 / 0.9); transition: transform 0.2s, box-shadow 0.2s; }
.jxf:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 24px 44px -24px rgb(0 0 0 / 0.9); }
.jxf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.jxf.is-newest { box-shadow: inset 0 0 0 1.5px hsl(22 100% 52% / 0.75), 0 24px 50px -26px hsl(22 100% 52% / 0.6); }
.jxf__img { display: block; aspect-ratio: 16 / 10; background: hsl(60 6% 16%) center / cover; }
.jxf__img.is-blur { filter: blur(16px) saturate(1.2) brightness(0.8); transform: scale(1.3); }
.jxf.is-locked .jxf__img { clip-path: inset(0); }
.jxf__new { position: absolute; top: 0.7rem; left: 0.7rem; padding: 0.38rem 0.65rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 0.58rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.jxf__lock { position: absolute; top: 0.7rem; right: 0.7rem; width: 34px; height: 34px; border-radius: 50%;
  background: rgb(15 16 13 / 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0ebe0' stroke-width='2.2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.jxf__body { display: grid; gap: 0.45rem; padding: 0.85rem 1rem 1rem; }
.jxf__chal { font: 700 0.62rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.jxf__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; font-size: 0.95rem; }
.jxf__text.is-blur { filter: blur(5px); color: var(--muted); user-select: none; }
.jxf__who { font-size: 0.8rem; color: var(--faint); }
.jxf__who b { color: var(--fg); font-weight: 700; }

/* Picker: map + list */
.jxpick__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.jxmap { position: relative; isolation: isolate; overflow: hidden; padding: 1rem 1rem 0.8rem; border-radius: 26px; min-height: 260px;
  background: linear-gradient(180deg, hsl(75 8% 11%), hsl(75 8% 8%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.jxmap.is-off { display: none; }
.jxmap__load { display: grid; place-items: center; min-height: 240px; color: var(--faint); }
.jxmap__note { margin: 0.2rem 0.4rem 0; font: 700 0.6rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.usmap { display: block; width: 100%; height: auto; overflow: visible; }
.usmap .st { fill: hsl(75 6% 15%); stroke: none; transition: fill 0.2s; }
.usmap .st--on { fill: hsl(22 45% 22%); }
.usmap .st__mesh { fill: none; stroke: hsl(60 6% 30%); stroke-width: 0.8; stroke-linejoin: round; }
.mpin { cursor: pointer; outline: none; }
.mpin__dot { fill: var(--accent); stroke: hsl(75 8% 8%); stroke-width: 2.5; transition: r 0.2s; }
.mpin__halo { fill: hsl(22 100% 52% / 0.22); transition: fill 0.2s; }
.mpin__pulse { fill: none; stroke: var(--accent); stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: mpulse 2.2s ease-out infinite; }
@keyframes mpulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
.mpin__n { fill: #15140f; font: 900 14px/1 var(--font-display); text-anchor: middle; pointer-events: none; }
.mpin__lab text { fill: hsl(40 20% 94%); font: 800 22px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; paint-order: stroke; stroke: hsl(75 8% 8%); stroke-width: 4px; stroke-linejoin: round; }
.mpin__lab .mpin__sub { fill: hsl(40 10% 70%); font: 700 13px/1 var(--font-mono); letter-spacing: 0.08em; }
.mpin.is-empty .mpin__dot { fill: hsl(60 6% 30%); stroke: var(--accent); stroke-width: 2; }
.mpin.is-empty .mpin__n { fill: var(--fg); }
.mpin:hover .mpin__halo, .mpin:focus-visible .mpin__halo { fill: hsl(22 100% 52% / 0.4); }
.mpin.is-on .mpin__halo { fill: hsl(0 0% 100% / 0.16); stroke: #fff; stroke-width: 2; }
.mpin:focus-visible .mpin__dot { stroke: #fff; }
@media (prefers-reduced-motion: reduce) { .mpin__pulse { animation: none; opacity: 0; } .jxsnap, .jxf { transition: none; } }

.jxlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ctile { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: stretch; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; text-align: left; color: inherit; cursor: pointer;
  background: linear-gradient(180deg, hsl(60 7% 15% / 0.9), hsl(60 7% 11% / 0.9)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); transition: box-shadow 0.2s, transform 0.2s; }
.ctile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.ctile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ctile.is-on { box-shadow: inset 0 0 0 2px var(--accent), 0 18px 40px -22px hsl(22 100% 52% / 0.6); background: linear-gradient(100deg, hsl(22 100% 52% / 0.16), hsl(60 7% 12% / 0.92) 60%); }
.ctile__img { background: center / cover; min-height: 112px; }
.ctile__body { display: grid; align-content: center; gap: 0.35rem; padding: 0.85rem 0.9rem; min-width: 0; }
.ctile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font: 700 0.6rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.ctile__meta em { font-style: normal; padding: 0.2rem 0.45rem; border-radius: 999px; background: hsl(22 100% 52% / 0.18); color: var(--accent); }
.ctile__name { font: 800 1.2rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.ctile__stats { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.82rem; color: var(--muted); }
.ctile__stats > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ctile__stats svg { color: var(--accent); }
.ctile__when { font-size: 0.76rem; color: var(--faint); }
.ctile__go { display: grid; place-items: center; padding: 0 0.9rem; color: var(--faint); transition: color 0.2s, transform 0.2s; }
.ctile:hover .ctile__go, .ctile.is-on .ctile__go { color: var(--accent); }
.ctile.is-on .ctile__go { transform: translateX(2px); }

/* Selected challenge */
.jxchal { scroll-margin-top: 90px; }
.jxchal:empty { display: none; }
.jxch { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; min-height: 300px; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgb(13 14 11 / 0.15), rgb(13 14 11 / 0.92) 78%), var(--img) center 55% / cover;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 80px -40px rgb(0 0 0 / 0.9); }
.jxch__in { display: grid; gap: 0.7rem; justify-items: start; width: 100%; padding: clamp(1.3rem, 3vw, 2.2rem); }
.jxch__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font: 700 0.66rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: hsl(40 20% 86%); }
.jxch__meta svg { color: var(--accent); }
.jxch__meta em { font-style: normal; padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.jxch h2 { font: 900 clamp(2.2rem, 1.5rem + 3.4vw, 4rem)/0.9 var(--font-display); text-transform: uppercase; text-shadow: 0 4px 30px rgb(0 0 0 / 0.6); }
.jxch__sum { max-width: 56ch; color: hsl(40 20% 88%); }
.jxch__stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0.2rem 0 0.4rem; }
.jxch__stats > div { display: flex; flex-direction: column-reverse; gap: 0.25rem; }
.jxch__stats dt { font: 700 0.58rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: hsl(40 10% 72%); }
.jxch__stats dd { margin: 0; font: 900 1.8rem/1 var(--font-display); }
.jxch__entries { margin-top: 0.4rem; }
.jxnone { position: relative; isolation: isolate; overflow: hidden; margin-top: 1rem; padding: 2rem 1.6rem; border-radius: 24px; text-align: center; background: hsl(60 7% 12% / 0.9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); --topo-o: 0.14; }
.jxnone h3 { font: 900 1.8rem/1 var(--font-display); text-transform: uppercase; }
.jxnone p { margin: 0.6rem auto 1rem; max-width: 44ch; color: var(--muted); }

/* Entries in a challenge: wide rows */
.jfeed--tl { grid-template-columns: 1fr; gap: 1rem; }
.jfeed--tl > .jcard { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.jfeed--tl > .jcard .jcard__media { aspect-ratio: auto; min-height: 260px; }
.jfeed--tl > .jcard .jcard__body { align-content: center; padding: 1.4rem 1.6rem; gap: 0.7rem; }
.jfeed--tl > .jcard .jcard__text { font-size: 1.08rem; }
.jfeed--tl > .jcard.is-first .jcard__media { min-height: 340px; }
.jlocked.is-all > .jgate { top: 40px; }

@media (max-width: 980px) {
  .jxpick__grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .jxhero { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 1.6rem; }
  .jxhero__stack { order: -1; height: 200px; margin: 0 -0.4rem; }
  .jxsnap { width: 48%; padding: 0.4rem 0.4rem 0; }
  .jxsnap figcaption { padding: 0.4rem 0.1rem 0.5rem; font-size: 0.52rem; }
  .jxsnap--a { left: 0; top: 6%; }
  .jxsnap--b { right: 0; top: 0; }
  .jxsnap--c { left: 26%; bottom: 0; width: 44%; }
  .jxsnap--b::before { width: 50px; height: 16px; top: -9px; }
  .jxstats dd { font-size: 1.4rem; }
  .jfeed--tl > .jcard { display: flex; }
  .jfeed--tl > .jcard .jcard__media, .jfeed--tl > .jcard.is-first .jcard__media { aspect-ratio: 4 / 3; min-height: 0; }
  .jfeed--tl > .jcard .jcard__body { padding: 1rem 1.1rem 1.15rem; }
  .jfeed--tl > .jcard .jcard__text { font-size: 1rem; }
  .jxch { min-height: 260px; }
}
@media (max-width: 560px) {
  .jxfeed { grid-auto-columns: 78%; }
  .ctile { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .ctile__go { padding: 0 0.6rem; }
  .jxmap { padding: 0.6rem 0.4rem 0.6rem; border-radius: 22px; }
  .mpin__lab text { font-size: 24px; }
  .mpin__lab .mpin__sub { font-size: 15px; }
  .jxch__stats { gap: 1.1rem; }
  .jxch__stats dd { font-size: 1.5rem; }
}
.journal-page .mem { max-width: 1240px; }
.jfeed--tl .jcard__chal { display: none; }
.jfeed--tl .jcard__media::after { background: linear-gradient(180deg, transparent 70%, rgb(15 16 13 / 0.5)); }