/* Trail journal cards: the public journal page and the homepage strip. */
.jhero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2rem, 5vw, 3.2rem) clamp(1.2rem, 4vw, 2.4rem);
  background: radial-gradient(700px 300px at 85% 20%, hsl(22 100% 52% / 0.28), transparent 70%), linear-gradient(110deg, rgb(15 16 13 / 0.95), rgb(15 16 13 / 0.55)), url(img/cp-shore.jpg) center 60% / cover;
  --topo-o: 0.3; --topo-color: hsl(30 60% 75%); --topo-at: 80% 40%; --topo-size: 1800px auto; --topo-spread: 70% 80%; }
.jhero h1 { margin-top: 0.7rem; font: 900 clamp(3rem, 2rem + 5vw, 5.4rem)/0.88 var(--font-display); text-transform: uppercase; text-shadow: 0 4px 30px rgb(0 0 0 / 0.5); }
.jhero h1 span { color: var(--accent); }
.jhero__sub { margin-top: 0.9rem; max-width: 52ch; color: hsl(40 20% 86%); }
.jhero__count { margin-top: 1rem; font: 700 0.68rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.jhero__count:empty { display: none; }
.journal-page .footer { padding-bottom: calc(1.5rem + 90px); }
@media (min-width: 821px) { .journal-page .footer { padding-bottom: 1.5rem; } }

.jfeed { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.jcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 20px;
  background: linear-gradient(180deg, hsl(60 7% 15% / 0.88), hsl(60 7% 11% / 0.88)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.075), 0 18px 40px -24px rgb(0 0 0 / 0.8); }
.jcard.is-mine { box-shadow: inset 0 0 0 1.5px hsl(22 100% 52% / 0.8), 0 18px 40px -24px rgb(0 0 0 / 0.8); }
.jcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: hsl(60 6% 16%); }
.jcard__img { display: block; width: 100%; height: 100%; object-fit: cover; background: center / cover; }
.jcard__img.is-blur { transform: scale(1.25); filter: blur(18px) saturate(1.2) brightness(0.8); }
.jcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(15 16 13 / 0.85)); pointer-events: none; }
.jcard__chal { position: absolute; z-index: 1; left: 0.8rem; right: 0.8rem; bottom: 0.7rem; display: flex; flex-direction: column; gap: 0.2rem; font: 700 0.62rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: hsl(40 15% 82%); }
.jcard__chal b { font: 800 1.05rem/1.05 var(--font-display); letter-spacing: 0.03em; color: #fff; }
.jcard__body { padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.55rem; }
.jcard__who { display: flex; align-items: center; gap: 0.65rem; }
.jcard__who .avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: hsl(60 6% 18%); box-shadow: 0 0 0 2px hsl(22 100% 52% / 0.6); font: 900 0.95rem/1 var(--font-display); color: var(--fg); }
.jcard__who > span:last-child { display: grid; gap: 0.15rem; min-width: 0; }
.jcard__who strong { font-weight: 700; }
.jcard__who small { font: 600 0.68rem/1.2 var(--font-mono); letter-spacing: 0.04em; color: var(--faint); }
.jcard__cp { font: 700 0.62rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.jcard__text { line-height: 1.55; color: var(--fg); overflow-wrap: anywhere; }
.jcard__text.is-blur { filter: blur(6px); user-select: none; color: var(--muted); }
.jcard__act { display: flex; gap: 1rem; padding-top: 0.2rem; }
.jcard__act > button { background: none; border: 0; padding: 0.2rem 0; color: var(--muted); font: 700 0.66rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.jcard__act > button:hover { color: var(--fg); }
.jcard__mine, .jcard__note { font-size: 0.78rem; color: var(--faint); }
.jcard__mine { color: var(--accent); font: 700 0.64rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.jcard.is-first, .jcard.is-newest { box-shadow: inset 0 0 0 1.5px hsl(22 100% 52% / 0.7), 0 24px 50px -24px hsl(22 100% 52% / 0.55); }
.jcard.is-first::before, .jcard.is-newest::before { content: "Newest entry"; position: absolute; z-index: 2; top: 0.8rem; left: 0.8rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 0.6rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.jcard.is-locked { pointer-events: none; user-select: none; }
.jcard.is-locked .jcard__who strong, .jcard.is-locked .jcard__chal b { filter: blur(0); }

/* Blurred section and the sign-up gate */
.jlocked { position: relative; margin-top: 1rem; }
.jlocked > .jfeed { margin-top: 0; max-height: 820px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 92%); }
.jlocked > .jgate { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); width: min(560px, calc(100% - 1rem)); }
.jgate { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 2rem 1.6rem; border-radius: 24px;
  background: linear-gradient(180deg, hsl(60 7% 14% / 0.92), hsl(60 7% 10% / 0.95)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.13), 0 30px 70px -20px rgb(0 0 0 / 0.85); --topo-o: 0.14; --topo-at: 50% 30%; --topo-size: 1400px auto; --topo-spread: 80% 90%; margin-top: 1.4rem; }
.jgate .eyebrow { justify-content: center; }
.jgate h2 { margin-top: 0.6rem; font: 900 clamp(1.8rem, 1.3rem + 2vw, 2.5rem)/1 var(--font-display); text-transform: uppercase; }
.jgate p:not(.eyebrow) { margin: 0.7rem auto 0; max-width: 42ch; color: var(--muted); }
.jgate__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.3rem; }
.journal-page .btn { clip-path: none; border-radius: 999px; }
.jmore { display: flex; justify-content: center; margin-top: 1.6rem; }
.jflag { display: grid; gap: 0.4rem; font-size: 0.85rem; }
.jflag .jgate__row { justify-content: flex-start; margin-top: 0.5rem; }

/* Homepage strip */
.jfeed--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jfeed--strip .jcard.is-locked .jcard__media::before { content: ""; position: absolute; z-index: 2; inset: 0; margin: auto; width: 46px; height: 46px; 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 / 20px no-repeat; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.jstrip__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.jstrip__loading { margin-top: 1.4rem; color: var(--faint); }
@media (max-width: 900px) {
  .jfeed--strip { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .jfeed--strip > li:first-child { grid-column: 1 / -1; }
  .jfeed--strip > li:not(:first-child) .jcard__body { padding: 0.75rem 0.8rem 0.9rem; }
  .jfeed--strip > li:not(:first-child) .jcard__chal { display: none; }
  .jfeed--strip > li:not(:first-child) .jcard__media { aspect-ratio: 16 / 10; }
  .jfeed--strip > li:not(:first-child) .jcard__text { max-height: 4.6em; overflow: hidden; font-size: 0.9rem; }
  .jfeed--strip > li:not(:first-child) .jcard__who small { display: none; }
}
@media (max-width: 600px) {
  .jfeed:not(.jfeed--strip) { grid-template-columns: 1fr; }
  .jlocked > .jgate { top: 60px; }
}

/* Newest entry as a wide feature card */
.jfeed > .jcard.is-first { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.jfeed > .jcard.is-first .jcard__media { aspect-ratio: auto; min-height: 340px; }
.jfeed > .jcard.is-first .jcard__body { align-content: center; padding: 1.8rem 2rem; gap: 0.8rem; }
.jfeed > .jcard.is-first .jcard__text { font-size: 1.25rem; line-height: 1.5; }
.jfeed > .jcard.is-first .jcard__who .avatar { width: 46px; height: 46px; font-size: 1.1rem; }
@media (max-width: 760px) {
  .jfeed > .jcard.is-first { display: flex; }
  .jfeed > .jcard.is-first .jcard__media { aspect-ratio: 4 / 3; min-height: 0; }
  .jfeed > .jcard.is-first .jcard__body { padding: 1rem 1.1rem 1.15rem; }
  .jfeed > .jcard.is-first .jcard__text { font-size: 1.05rem; }
}
.jhero { --topo-pos: 25% 30%; --topo-size: 2000px auto; }