/* styles/journey-family.css
   ============================================================================================
   THE JOURNEY FAMILY'S SHARED PRESENTATION, AND THE ONLY DEFINITION OF IT.

   These rules used to live inline: the sixteen jn-* families in the hub's third <style> block,
   and .showcase-kicker duplicated across the three example journey pages. That was fine while
   the hub and the detail pages never shared a document - but a persistent content swap leaves
   the SOURCE page's <head> alive, so whichever page you arrive from has to already style the
   page you arrive at. Measured before this file existed: hub -> detail lost .showcase-kicker,
   and detail -> hub lost all sixteen jn-* families, which is most of the hub.

   MOVED VERBATIM, NOT REWRITTEN. Declaration order, @media wrappers, :hover and
   :focus-visible states, the prefers-reduced-motion block and .jn-card-img's aspect-ratio are
   all exactly as they were. The families are disjoint from every other rule on these pages and
   are defined in no other file, so moving them cannot change the cascade for anything else -
   that disjointness was proven against the built pages before a byte was touched.

   LINKED WHERE THE INLINE BLOCK STOOD, so the moved rules keep the same document position
   they had. Every journey page carries this and no other stylesheet.

   Owned by the four surfaces in PERSISTENCE_ROUTES' journey cluster. Adding a fifth means
   proving its head can style these families too - the build's head-CSS gate enforces that.
   ============================================================================================ */

/* ---- from journeys/index.html, third inline <style> block ---- */

/* ---- gallery-only: heading block + card grid ---- */
.jn-head{ text-align:center; margin:8px 0 26px; }
.jn-h1{
  font-size:38px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#fff;
  margin:0 0 10px;
  line-height:1.1;
}
.jn-tagline{
  font-size:15px;
  font-style:italic;
  color:rgba(255,255,255,0.72);
  margin:0 0 12px;
  line-height:1.5;
}
.jn-kicker{
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(255,255,255,0.55);
  margin:0 0 14px;
  line-height:1.5;
}
.jn-intro{
  font-size:14px;
  color:rgba(255,255,255,0.6);
  margin:0;
  line-height:1.55;
}

.jn-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:0 0 8px;
}
@media (min-width:440px){
  .jn-grid{ grid-template-columns:repeat(2,1fr); }
}

.jn-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  overflow:hidden;
  transition:transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.jn-card:hover,
.jn-card:focus-visible{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(244,196,48,0.45);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  outline:none;
}
.jn-card-img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  background:rgba(255,255,255,0.04);
}
.jn-card-body{ padding:14px 14px 16px; }
.jn-card-title{
  font-size:16px;
  font-weight:800;
  color:#f4c430;
  margin:0 0 6px;
  letter-spacing:-0.01em;
}
.jn-card-hook{
  font-size:13px;
  color:rgba(255,255,255,0.68);
  margin:0;
  line-height:1.5;
}
@media (prefers-reduced-motion:reduce){
  .jn-card{ transition:none; }
  .jn-card:hover, .jn-card:focus-visible{ transform:none; }
}
/* ---- Journeys V1 SEO content layer (static, no scripts) ---- */
.jn-seo{ max-width:70ch; margin:34px auto 0; text-align:left; }
.jn-seo h2{ font-size:21px; font-weight:800; letter-spacing:-0.02em; color:#fff; margin:26px 0 10px; }
.jn-seo h2:first-child{ margin-top:0; }
.jn-seo p{ font-size:15px; line-height:1.65; color:rgba(255,255,255,0.74); margin:0 0 12px; }
.jn-seo strong{ color:#f4c430; font-weight:700; }
.jn-showcase-h2{ max-width:70ch; margin:38px auto 6px; text-align:left; font-size:21px; font-weight:800; letter-spacing:-0.02em; color:#fff; }
.jn-showcase-intro{ max-width:70ch; margin:0 auto 18px; text-align:left; font-size:15px; line-height:1.6; color:rgba(255,255,255,0.74); }
.jn-faq-wrap{ max-width:70ch; margin:30px auto 0; text-align:left; }
.jn-faq{ border-top:1px solid rgba(255,255,255,0.09); padding:12px 0; }
.jn-faq summary{ cursor:pointer; list-style:none; font-size:16px; font-weight:700; color:#fff; padding:4px 0; }
.jn-faq summary::-webkit-details-marker{ display:none; }
.jn-faq summary::after{ content:' +'; color:#f4c430; font-weight:800; }
.jn-faq[open] summary::after{ content:' \2212'; }
.jn-faq summary:hover{ color:#f4c430; }
.jn-faq p{ font-size:15px; line-height:1.65; color:rgba(255,255,255,0.74); margin:10px 0 4px; }

/* ---- from the three example journey pages, deduplicated ---- */

/* showcase-only: subhead under the id, matches .journey-subtitle tone */
.showcase-kicker{
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(255,255,255,0.55);
  text-align:center;
  margin:10px 0 2px;
  line-height:1.5;
}

/* DECLARED AGAINST A FEDERATED DOCUMENT, NOT AGAINST THIS FILE. On a persistent arrival the
   surface that booted keeps its own head styles, and /ducks carries a broad mascot rule -
   img[alt*="Duck"] and friends - that strips an image background. Its specificity is (0,1,1)
   and .jn-card-img above is (0,1,0), so on a swap it won the third journey card: alt="Doctor
   Duck" matches the substring. Only that card, only from /ducks, which is why it read as a
   loading artefact until the rule was found. Re-declaring the same value at (0,1,1) ties the
   specificity and this file is appended later, so it wins on order. A direct load computes the
   identical value it always did - the rule below changes nothing on its own.

   THE !important IS ANSWERING ONE, NOT STARTING ONE. /ducks marks its mascot images
   background:transparent !important, and an important author declaration beats a normal one
   whatever the specificity or order - so tying the specificity was not enough and the first
   attempt at this rule lost. Scoped to background-color alone, on a selector that only ever
   matches this image, and computing the value the direct load already computes. */
img.jn-card-img{ background-color:rgba(255,255,255,0.04) !important; }
