/* Chaplain Journey in the Gravitas site system (site-system.css). */
body.gx-journey { color: var(--gx-ink); }

/* hero card: the night band becomes the ivory hero card, as on Gravitas */
body.gx-journey .journey-hero.gx-hero { color: var(--gx-ink); gap: clamp(28px, 5vw, 64px); }
body.gx-journey .journey-hero .eyebrow { color: var(--gx-gold) !important; }
body.gx-journey .journey-hero h1 { font-size: var(--gx-h1) !important; margin: 0 0 22px; }
body.gx-journey .journey-hero h1 em { color: var(--gx-gold); font-style: italic; }
body.gx-journey .journey-hero .lead { font-size: var(--gx-lead); line-height: 1.4; margin: 0 0 18px; }
body.gx-journey .journey-hero p:not(.eyebrow):not(.lead) { font-size: var(--gx-body); line-height: 1.55; margin: 0 0 22px; }
body.gx-journey .journey-hero img { border-radius: var(--gx-r); box-shadow: var(--gx-raise); }
body.gx-journey :is(.start, .share-actions button, #reset-progress) { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; font: 600 .8125rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--gx-ink); background: var(--gx-ground); border: 1px solid var(--gx-border); border-radius: var(--gx-r); box-shadow: var(--gx-raise-sm); transition: box-shadow .15s, color .15s; }
body.gx-journey :is(.start, .share-actions button, #reset-progress):hover { color: var(--gx-gold-deep); }
body.gx-journey :is(.start, .share-actions button, #reset-progress):active { box-shadow: var(--gx-inset); }
body.gx-journey .start { margin-top: 4px; }

/* panels share the frame */
body.gx-journey .journey-width { box-sizing: border-box; width: var(--gx-frame); max-width: none; margin-inline: auto; padding: 0; }
body.gx-journey .journey-width h2 { font-size: var(--gx-h2); }

/* how it works: a raised panel; the chaplain's note is an inset well */
body.gx-journey .orientation { margin-top: 28px; padding: clamp(28px, 4.5vw, 60px); border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-raise); scroll-margin-top: 100px; }
body.gx-journey .orientation h2 { margin: 0 0 20px; }
body.gx-journey .orientation > p { font-size: var(--gx-body); line-height: 1.55; max-width: 62ch; }
body.gx-journey .orientation details { margin: 26px 0; padding: 0; border: 0; border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-inset); }
body.gx-journey .orientation summary { padding: 20px 26px; font: 600 .8125rem/1.5 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gx-ink); }
body.gx-journey .orientation details > p { margin: 0; padding: 0 26px 20px; font-size: var(--gx-body); line-height: 1.55; max-width: 64ch; }
body.gx-journey #share-status { font: 600 .75rem/1.5 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gx-slate); }

/* the journey: progress as a raised panel with an inset meter; each stop a raised card */
body.gx-journey #journey { margin-top: 28px; }
body.gx-journey .progress-panel { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-raise); }
body.gx-journey #progress-text { font: 600 .75rem/1.6 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gx-slate); margin-top: 8px; }
body.gx-journey progress { -webkit-appearance: none; appearance: none; height: 16px; border: 0; border-radius: 999px; background: var(--gx-ground); box-shadow: var(--gx-inset); overflow: hidden; }
body.gx-journey progress::-webkit-progress-bar { background: transparent; }
body.gx-journey progress::-webkit-progress-value { background: var(--gx-gold); border-radius: 999px; }
body.gx-journey progress::-moz-progress-bar { background: var(--gx-gold); border-radius: 999px; }
body.gx-journey #next-stop { justify-self: start; font: 600 .8125rem/1.5 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--gx-ink); border-bottom: 1px solid var(--gx-gold); padding-bottom: 3px; }
body.gx-journey .save-note { font: italic 400 1.0625rem/1.5 var(--gx-serif); color: var(--gx-slate); margin: 18px 6px 0; }
body.gx-journey .stage-title { font: 700 .8125rem/1.6 var(--gx-sans) !important; letter-spacing: .14em !important; color: var(--gx-gold) !important; margin: 52px 6px 18px; }
body.gx-journey .journey-stop { margin: 0 0 28px; padding: clamp(24px, 4vw, 48px); border: 0; border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-raise); grid-template-columns: 84px minmax(0, 1fr); }
body.gx-journey .stop-number { font: 500 3rem/1 var(--gx-serif); color: var(--gx-gold); }
body.gx-journey .stop-copy { max-width: 74ch; }
body.gx-journey .resource-name { font: 700 .75rem/1.6 var(--gx-sans); letter-spacing: .12em; color: var(--gx-gold-deep); }
body.gx-journey .stop-copy h3 { font-size: var(--gx-h3) !important; margin: 10px 0 14px; }
body.gx-journey .stop-copy > p:not(.resource-name) { font-size: var(--gx-body); line-height: 1.55; }
body.gx-journey .resource-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 .8125rem/1.5 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--gx-ink); }
body.gx-journey .resource-link > span[aria-hidden] { color: var(--gx-gold); }
body.gx-journey .resource-link:hover { color: var(--gx-gold-deep); }
body.gx-journey .journey-video { font: 500 1.1875rem/1.4 var(--gx-serif); color: var(--gx-ink); background: var(--gx-ground); border: 1px solid var(--gx-border); border-radius: var(--gx-r); box-shadow: var(--gx-raise-sm); padding: 16px 22px; transition: box-shadow .15s, color .15s; }
body.gx-journey .journey-video:hover { color: var(--gx-gold-deep); }
body.gx-journey .journey-video:active { box-shadow: var(--gx-inset); }
body.gx-journey .reflection { margin: 20px 0; padding: 20px 24px; border: 0; border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-inset); }
body.gx-journey .reflection h4 { font: 700 .6875rem/1.6 var(--gx-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gx-gold); }
body.gx-journey .reflection p { font-size: var(--gx-body); line-height: 1.5; font-style: italic; }
body.gx-journey .complete { font: 600 1.125rem/1.4 var(--gx-serif); }
body.gx-journey .complete input { accent-color: var(--gx-gold-deep); }
body.gx-journey .journey-stop.is-complete { box-shadow: var(--gx-inset); }
body.gx-journey .journey-stop.is-complete .stop-number { color: var(--gx-gold-deep); }

/* the bigger picture: a raised panel */
body.gx-journey .why-it-matters { margin-top: 52px; padding: clamp(28px, 4.5vw, 60px); border: 0; border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-raise); scroll-margin-top: 100px; }
body.gx-journey .why-it-matters h2 { margin: 0; }
body.gx-journey .why-it-matters h2 span { font: 500 var(--gx-h3)/1.2 var(--gx-serif); color: var(--gx-gold); margin-top: 10px; }
body.gx-journey .why-matters-prose { max-width: 66ch; }
body.gx-journey .why-matters-prose p { font-size: var(--gx-body); line-height: 1.6; }
body.gx-journey .why-matters-prose .lead { font-size: var(--gx-lead); line-height: 1.4; }
body.gx-journey .why-matters-prose .statement { font: 500 var(--gx-h3)/1.25 var(--gx-serif); color: var(--gx-gold-deep); }
body.gx-journey .why-matters-prose .statement.is-turn { color: var(--gx-ink); }
body.gx-journey .why-matters-prose .emphasis { border-left: 0; padding: 20px 24px; border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-inset); }
body.gx-journey .why-matters-prose .emphasis strong { color: var(--gx-gold-deep); font-weight: 700; }
body.gx-journey .why-matters-closing { border-top-color: var(--gx-border); }
body.gx-journey .why-matters-closing p { font: italic 500 var(--gx-lead)/1.4 var(--gx-serif); color: var(--gx-gold-deep); }
body.gx-journey .why-matters-closing img { border-radius: var(--gx-r); box-shadow: var(--gx-raise); }

/* the next step: a raised night panel, centred, with the star */
body.gx-journey .journey-finish { margin: 28px 0 56px; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px); border-radius: var(--gx-r); background: var(--gx-ink); box-shadow: var(--gx-raise); color: #e8deca; text-align: center; scroll-margin-top: 100px; }
body.gx-journey .journey-finish::before { content: "✦"; display: block; font-size: 1.75rem; line-height: 1; color: #d2b575; margin-bottom: 22px; }
body.gx-journey .journey-finish .eyebrow { color: #d2b575 !important; }
body.gx-journey .journey-finish h2 { font-size: var(--gx-h2) !important; color: #f3ecdd !important; margin: 0 0 20px; }
body.gx-journey .journey-finish p { font-size: var(--gx-body); line-height: 1.55; max-width: 52ch; margin-inline: auto; color: #e8deca; }
body.gx-journey .journey-finish #reset-progress { background: var(--gx-ink); color: #e8deca; border-color: #ffffff26; box-shadow: 4px 4px 9px #050f19, -3px -3px 8px #1d3a52; }
body.gx-journey .journey-finish #reset-progress:hover { color: #e5cf9d; }
body.gx-journey .journey-finish #reset-progress:active { box-shadow: inset 3px 3px 7px #050f19, inset -3px -3px 7px #1d3a52; }

/* player and footer */
body.gx-journey .journey-player { background: var(--gx-ink); border-color: #ffffff26; }
body.gx-journey .journey-player h2 { font: 500 1.75rem/1.2 var(--gx-serif); color: #f3ecdd; }
body.gx-journey .journey-player #player-frame { border-radius: 14px; overflow: hidden; }
body.gx-journey .journey-player p a { font: 600 .75rem/1.5 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; color: #e5cf9d; }
body.gx-journey #close-player { font: 600 .75rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase; }
body.gx-journey > footer { box-sizing: border-box; width: var(--gx-frame); margin-inline: auto; border-top: 1px solid var(--gx-border); font: 600 .75rem/1.5 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; }
body.gx-journey > footer a { color: var(--gx-slate); text-decoration: none; }

@media (max-width: 700px) {
  body.gx-journey .journey-hero.gx-hero { grid-template-columns: 1fr; }
  body.gx-journey .journey-stop { grid-template-columns: 1fr; gap: 6px; padding: 24px 20px; }
  body.gx-journey .stop-number { font-size: 2.25rem; }
  body.gx-journey .reflection { padding: 18px; }
}
@media print {
  body.gx-journey .journey-hero.gx-hero { box-shadow: none; width: auto !important; margin: 0 !important; padding: 0 !important; }
  body.gx-journey .gx-subnav { display: none; }
  body.gx-journey :is(.orientation, .progress-panel, .journey-stop, .why-it-matters, .reflection, .orientation details, .why-matters-prose .emphasis) { box-shadow: none; border: 1px solid #aaa; }
  body.gx-journey .journey-finish { box-shadow: none; background: #fff; color: #000; }
  body.gx-journey .journey-finish :is(h2, p, .eyebrow) { color: #000 !important; }
}

/* the stops read as one centred column inside the frame */
body.gx-journey :is(.journey-stop, .stage-title, .save-note) { box-sizing: border-box; max-width: 1040px; margin-inline: auto; }

/* Oct 20 2026 · sunset photo tops the section; the diner photo runs the full width of the card */
body.gx-journey .why-it-matters { overflow: hidden; }
body.gx-journey .why-matters-hero { margin: calc(clamp(28px, 4.5vw, 60px) * -1) calc(clamp(28px, 4.5vw, 60px) * -1) clamp(26px, 3.5vw, 44px); }
body.gx-journey .why-matters-hero img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
body.gx-journey .why-matters-closing { margin-inline: calc(clamp(28px, 4.5vw, 60px) * -1); margin-bottom: calc(clamp(28px, 4.5vw, 60px) * -1); }
body.gx-journey .why-matters-closing p { padding-inline: clamp(28px, 4.5vw, 60px); max-width: 760px; }
body.gx-journey .why-matters-closing img { display: block; width: 100%; max-width: none; height: auto; border-radius: 0; box-shadow: none; margin-top: clamp(22px, 3vw, 36px); }
body.gx-journey .why-matters-closing { display: block !important; grid-template-columns: none !important; padding-bottom: 0; }
body.gx-journey .why-matters-closing p { margin: 0 0 4px; max-width: 820px; }