/* assets/css/journeys-collection.css
 *
 * The Journeys Collection surface — Fable art direction.
 *
 * ── THE ROOM ─────────────────────────────────────────────────────────────────
 * Journeys is the room of the institution where understanding becomes going.
 * Atlas explains the world; Experience lets you witness it; a Collection page
 * is the ledger of ways to actually go — so it borrows the grammar of a great
 * travel ledger: an ink opening, a contents page, a selection, then chapters.
 *
 * One stylesheet serves six collections because they are one product at
 * different subjects. Difference between them is carried by COMPOSITION
 * (opening variants, chapter densities, alternation), never by forked CSS.
 *
 * ── THE DENSITY SYSTEM ───────────────────────────────────────────────────────
 * Sixty-one entries cannot be sixty-one identical cards. Every chapter renders
 * in one of six densities, chosen editorially per collection:
 *
 *   lead    one member at editorial scale, the rest as cards; leads alternate
 *           left/right down the page so long collections breathe
 *   grid    the plain three-column card grid — used deliberately, not by default
 *   band    one or two members full-width; a chapter this small is a statement,
 *           not a grid
 *   ledger  compact name-forward rows for directories of operators and lines —
 *           this is how a cruise LINE reads as a different object from a
 *           Richseen JOURNEY without inventing any new data
 *   cal     season-calendar rows for fixture chapters (Formula 1, MotoGP):
 *           sixteen rounds are a calendar, and a calendar is how they read
 *   portal  entrances to sibling collections — visibly doors, not products
 *
 * Everything is built from the tokens in global.css. No new palette, no new
 * families. No body{overflow-x} here — global.css owns that (see the previous
 * pass's incident record).
 */

/* ── Opening ─────────────────────────────────────────────────────────────── */
.jc-open{position:relative;margin-top:60px;height:auto;min-height:clamp(480px,66vh,720px);display:flex;align-items:flex-end;
  /* height:auto — global.css sizes bare <header> for the site chrome; this
     header is a page opening, and the chrome height must not cap it. */
  background-color:var(--ink);background-size:cover;background-position:center;overflow:hidden;color:#fff}
.jc-open-vign{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,5,.94) 0%,rgba(8,7,5,.55) 44%,rgba(8,7,5,.22) 78%,rgba(8,7,5,.38) 100%)}
.jc-open-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:120px 80px 72px}

.jc-crumb{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,242,236,.6);margin-bottom:28px}
.jc-crumb a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.jc-crumb a:hover{border-color:var(--gold-light)}
.jc-crumb a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.jc-kicker{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;
  display:flex;align-items:center;gap:14px}
.jc-kicker::before{content:'';width:34px;height:1px;background:var(--gold);flex-shrink:0}
.jc-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,6vw,86px);line-height:1.02;
  letter-spacing:.01em;color:#fff;margin-bottom:22px;text-shadow:0 2px 30px rgba(0,0,0,.55);max-width:14em}
.jc-lede{font-size:15.5px;line-height:1.95;letter-spacing:.03em;color:rgba(245,242,236,.88);max-width:640px}

/* The breadth line — the one sentence that tells a cold visitor how deep this
   goes before they have scrolled at all. */
.jc-count{margin-top:26px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,242,236,.72);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.jc-count b{font-weight:400;color:var(--gold-light)}
.jc-count .jc-dot{width:3px;height:3px;border-radius:50%;background:rgba(184,154,106,.7);flex-shrink:0}

.jc-open-act{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.jc-open-cta{display:inline-flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;text-decoration:none;border:1px solid rgba(184,154,106,.65);padding:15px 34px;background:rgba(8,7,5,.25);
  transition:background .3s,border-color .3s}
.jc-open-cta:hover{background:rgba(184,154,106,.16);border-color:var(--gold)}
.jc-open-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.jc-open-alt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,242,236,.66);text-decoration:none;
  border-bottom:1px solid rgba(245,242,236,.28);padding-bottom:3px;transition:color .25s,border-color .25s}
.jc-open-alt:hover{color:var(--gold-light);border-color:var(--gold-light)}
.jc-open-alt:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Variants — same bones, different posture. */
.jc-open--phenomenon{min-height:clamp(540px,80vh,860px)}
.jc-open--phenomenon .jc-title{font-size:clamp(48px,6.8vw,100px)}
.jc-open--encounter{min-height:clamp(520px,74vh,800px)}
.jc-open--encounter .jc-open-vign{background:
  linear-gradient(to right,rgba(8,7,5,.62) 0%,rgba(8,7,5,.3) 42%,rgba(8,7,5,0) 66%),
  linear-gradient(to top,rgba(8,7,5,.9) 0%,rgba(8,7,5,.3) 40%,rgba(8,7,5,.12) 66%,rgba(8,7,5,.4) 100%)}
.jc-open--encounter .jc-title{font-size:clamp(40px,5vw,72px)}
.jc-open--encounter .jc-lede{max-width:520px}
.jc-open--occasion .jc-open-vign{background:linear-gradient(to top,rgba(8,7,5,.94) 0%,rgba(8,7,5,.68) 40%,rgba(8,7,5,.58) 70%,rgba(8,7,5,.74) 100%)}
.jc-open--occasion .jc-open-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.jc-open--occasion .jc-kicker{justify-content:center}
.jc-open--occasion .jc-kicker::before{display:none}
.jc-open--occasion .jc-kicker::after{content:'';display:none}
.jc-open--occasion .jc-title{max-width:12em}
.jc-open--occasion .jc-lede{margin:0 auto}
.jc-open--occasion .jc-count{justify-content:center}
.jc-open--occasion .jc-open-act{justify-content:center}

/* veil — the trains opening: an ink panel beside the window, not text over it. */
.jc-open--veil{display:grid;grid-template-columns:minmax(400px,44%) 1fr;align-items:stretch;background-image:none !important;
  min-height:clamp(500px,72vh,780px)}
.jc-open--veil .jc-open-vign{display:none}
.jc-open--veil .jc-open-inner{grid-column:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px 56px 64px 80px;max-width:none;margin:0}
.jc-open--veil .jc-title{font-size:clamp(40px,4.6vw,68px);text-shadow:none}
.jc-veil-img{grid-column:2;position:relative;background-color:var(--ink);background-size:cover;background-position:center;min-height:320px}
.jc-veil-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(8,7,5,.55) 0%,rgba(8,7,5,0) 34%)}

/* ── Contents (chapter index) ────────────────────────────────────────────── */
.jc-index{display:block;max-width:1240px;margin:0 auto;padding:64px 80px 8px}
/* ^ explicit display: global.css styles bare <nav> as flex for the header;
   this nav is a contents page, not a menu bar. */
.jc-index-head{display:flex;align-items:baseline;gap:22px;border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:8px}
.jc-index-t{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;letter-spacing:.06em;color:var(--ink)}
.jc-index-n{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-grey)}
.jc-index-list{list-style:none;margin:0;padding:0;columns:2;column-gap:64px}
.jc-index-list li{break-inside:avoid}
.jc-index-a{display:flex;align-items:baseline;gap:16px;padding:13px 2px;text-decoration:none;color:inherit;
  border-bottom:1px solid rgba(212,207,198,.55);transition:background .25s}
.jc-index-a:hover{background:rgba(184,154,106,.06)}
.jc-index-a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jc-index-no{font-size:10px;letter-spacing:.14em;color:var(--gold);width:2.4em;flex-shrink:0;font-variant-numeric:tabular-nums}
.jc-index-label{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:18px;letter-spacing:.02em;color:var(--ink);flex:1;line-height:1.35}
.jc-index-c{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-grey);white-space:nowrap}
.jc-index-note{margin-top:22px;font-size:12.5px;line-height:1.85;letter-spacing:.03em;color:var(--warm-grey);max-width:640px}

/* ── The Selection ───────────────────────────────────────────────────────── */
.jc-feat{max-width:1240px;margin:0 auto;padding:72px 80px 8px}
.jc-feat-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;margin-bottom:34px}
.jc-feat-eye{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.jc-feat-eye::before{content:'';width:28px;height:1px;background:var(--gold)}
.jc-feat-note{font-size:12.5px;letter-spacing:.03em;color:var(--warm-grey)}

.jc-feat-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;margin-bottom:30px;
  background:var(--paper);border:1px solid rgba(212,207,198,.7);text-decoration:none;color:inherit}
.jc-feat-lead:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.jc-feat-lead .jc-plate{aspect-ratio:16/10;height:100%}
.jc-feat-lead-body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
.jc-feat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px}

/* ── Chapters ────────────────────────────────────────────────────────────── */
.jc-body{max-width:1240px;margin:0 auto;padding:0 80px}
.jc-ch{padding:84px 0 0}
.jc-ch-head{border-top:1px solid var(--rule);padding-top:28px;margin-bottom:38px;
  display:grid;grid-template-columns:auto 1fr auto;gap:8px 26px;align-items:baseline}
.jc-ch-no{font-size:11px;letter-spacing:.22em;color:var(--gold);font-variant-numeric:tabular-nums}
.jc-ch-t{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(26px,3vw,40px);
  letter-spacing:.02em;color:var(--ink);line-height:1.15}
.jc-ch-c{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-grey);white-space:nowrap;justify-self:end}
.jc-ch-n{grid-column:2/4;font-size:14px;line-height:1.85;letter-spacing:.02em;color:#4a4743;max-width:660px}

/* ── Entry bones (shared by every density) ───────────────────────────────── */
.jc-plate{display:block;width:100%;aspect-ratio:3/2;position:relative;
  background-color:var(--ink);
  background-image:linear-gradient(160deg,#141210 0%,#0e0d0b 58%,#1a1512 100%);
  background-size:cover;background-position:center;overflow:hidden}
.jc-plate::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,7,5,.18),rgba(8,7,5,0) 40%);
  opacity:0;transition:opacity .5s}
a:hover .jc-plate::after{opacity:1}
.jc-plate-img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .9s cubic-bezier(.25,.46,.45,.94);will-change:transform}
a:hover .jc-plate-img{transform:scale(1.035)}

.jc-e-kick{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.jc-e-t{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:21px;line-height:1.28;letter-spacing:.02em;color:var(--ink)}
.jc-e-sub{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--warm-grey);line-height:1.7}
.jc-e-d{font-size:13.5px;line-height:1.8;letter-spacing:.02em;color:#4a4743}
.jc-e-cr{font-size:10.5px;line-height:1.6;letter-spacing:.04em;color:var(--warm-grey)}

/* Two actions, two registers. A canonical journey opens; an editorial entry
   begins a conversation. The enquiry action is styled as a deliberate door —
   gold, ruled, unmistakably intentional — never as a missing link. */
.jc-act{margin-top:auto;padding-top:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;color:var(--gold)}
a:hover .jc-act{color:#8f7038}
.jc-act--enq{color:#8f7038}
.jc-act--enq .jc-act-rule{display:inline-block;width:22px;height:1px;background:rgba(184,154,106,.75)}

/* card — the grid unit */
.jc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:40px 30px}
.jc-card{min-width:0;content-visibility:auto;contain-intrinsic-size:auto 430px}
.jc-card-a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.jc-card-a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.jc-card-body{display:flex;flex-direction:column;gap:8px;padding-top:18px;flex:1}

/* lead — one member at editorial scale */
.jc-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;margin-bottom:44px;
  text-decoration:none;color:inherit;background:var(--paper);border:1px solid rgba(212,207,198,.7)}
.jc-lead:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.jc-lead .jc-plate{height:100%;aspect-ratio:16/10}
.jc-lead-body{padding:42px 48px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.jc-lead-body .jc-e-t{font-size:clamp(25px,2.5vw,34px);line-height:1.2}
.jc-lead-body .jc-e-d{font-size:14px;line-height:1.9;max-width:46ch}
.jc-lead--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.jc-lead--flip .jc-plate{order:2}
.jc-lead--flip .jc-lead-body{order:1}

/* band — a chapter of one or two is a statement */
.jc-band{display:grid;gap:30px}
.jc-band .jc-lead{margin-bottom:0}

/* ledger — directories of lines and operators; the name leads, the image
   accompanies. Visibly a different object from a journey card. */
.jc-ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid rgba(212,207,198,.55)}
.jc-lrow{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:start;padding:24px 2px;
  border-bottom:1px solid rgba(212,207,198,.55);text-decoration:none;color:inherit;transition:background .25s;
  content-visibility:auto;contain-intrinsic-size:auto 150px}
.jc-lrow:hover{background:rgba(184,154,106,.05)}
.jc-lrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jc-lrow .jc-plate{aspect-ratio:4/3}
.jc-lrow-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.jc-lrow-body .jc-e-t{font-size:19px}
.jc-lrow-body .jc-e-d{font-size:12.5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jc-lrow-body .jc-act{padding-top:8px}

/* cal — fixture chapters read as a season calendar */
.jc-cal{border-top:1px solid rgba(212,207,198,.55)}
.jc-crow{display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;padding:19px 2px;
  border-bottom:1px solid rgba(212,207,198,.55);text-decoration:none;color:inherit;transition:background .25s;
  content-visibility:auto;contain-intrinsic-size:auto 110px}
.jc-crow:hover{background:rgba(184,154,106,.05)}
.jc-crow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jc-crow .jc-plate{aspect-ratio:16/10}
.jc-crow-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.jc-crow-body .jc-e-t{font-size:19px;line-height:1.25}
.jc-crow-body .jc-e-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-crow .jc-act{padding-top:0}

/* portal — a door into a sibling collection */
.jc-portalgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.jc-portal{display:flex;flex-direction:column;gap:10px;padding:30px 32px 26px;text-decoration:none;color:inherit;
  border:1px solid rgba(184,154,106,.4);background:var(--paper);transition:border-color .3s,background .3s;
  content-visibility:auto;contain-intrinsic-size:auto 220px}
.jc-portal:hover{border-color:var(--gold);background:rgba(184,154,106,.06)}
.jc-portal:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.jc-portal-eye{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.jc-portal .jc-e-t{font-size:22px}
.jc-portal .jc-e-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jc-portal .jc-act{padding-top:10px}

/* ── Continuation ────────────────────────────────────────────────────────── */
.jc-cont{margin-top:96px;background:var(--ink);color:#f5f2ec}
.jc-cont-inner{max-width:1240px;margin:0 auto;padding:88px 80px 84px}
.jc-cont-eye{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;
  display:flex;align-items:center;gap:14px}
.jc-cont-eye::before{content:'';width:28px;height:1px;background:var(--gold)}
.jc-cont-h{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(30px,3.6vw,52px);
  letter-spacing:.02em;color:#fff;margin-bottom:18px;max-width:16em}
.jc-cont-p{font-size:15px;line-height:1.95;letter-spacing:.03em;color:rgba(245,242,236,.78);max-width:640px;margin-bottom:34px}
.jc-cta{display:inline-flex;align-items:center;gap:14px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;text-decoration:none;border:1px solid rgba(184,154,106,.6);padding:17px 44px;
  transition:background .3s,gap .3s}
.jc-cta:hover{background:rgba(184,154,106,.14);gap:20px}
.jc-cta:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.jc-related{margin-top:52px;display:flex;flex-wrap:wrap;gap:14px 36px;border-top:1px solid rgba(245,242,236,.14);padding-top:28px}
.jc-related a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.6);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.jc-related a:hover{color:var(--gold-light);border-color:rgba(184,154,106,.5)}
.jc-related a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .jc-open-inner{padding:110px 48px 56px}
  .jc-open--veil .jc-open-inner{padding:110px 40px 52px 48px}
  .jc-index{padding:52px 48px 6px}
  .jc-feat{padding:60px 48px 6px}
  .jc-body{padding:0 48px}
  .jc-cont-inner{padding:72px 48px 68px}
  .jc-grid{gap:34px 24px}
  .jc-ch{padding-top:68px}
  .jc-ledger{grid-template-columns:1fr}
  .jc-lead-body,.jc-feat-lead-body{padding:34px 36px}
}
@media(max-width:860px){
  /* Stacked veil is plain block flow — a grid with min-height under overflow:hidden
     mis-sized its own height in Chromium and clipped the lede and actions. */
  .jc-open--veil{display:block;min-height:0}
  .jc-veil-img{min-height:46vh}
  .jc-veil-img::after{background:linear-gradient(to top,rgba(8,7,5,.5),rgba(8,7,5,0) 45%)}
  .jc-open--veil .jc-open-inner{display:block;padding:40px 24px 48px;background:var(--ink)}
  .jc-lead,.jc-lead--flip,.jc-feat-lead{grid-template-columns:1fr}
  .jc-lead--flip .jc-plate{order:0}
  .jc-lead--flip .jc-lead-body{order:1}
  .jc-lead .jc-plate,.jc-feat-lead .jc-plate{aspect-ratio:3/2;height:auto}
  .jc-index-list{columns:1}
}
@media(max-width:767px){
  .jc-open{margin-top:56px;min-height:clamp(400px,62vh,560px)}
  .jc-open--phenomenon,.jc-open--encounter{min-height:clamp(440px,68vh,600px)}
  .jc-open-inner{padding:96px 22px 42px}
  .jc-index{padding:42px 22px 4px}
  .jc-feat{padding:48px 22px 4px}
  .jc-body{padding:0 22px}
  .jc-cont-inner{padding:60px 22px 58px}
  .jc-ch{padding-top:54px}
  .jc-ch-head{grid-template-columns:auto 1fr;margin-bottom:28px}
  .jc-ch-c{grid-column:1/3;justify-self:start;margin-top:2px}
  .jc-ch-n{grid-column:1/3}
  .jc-grid{grid-template-columns:1fr;gap:36px}
  .jc-feat-row{grid-template-columns:1fr;gap:34px}
  .jc-lead-body,.jc-feat-lead-body{padding:26px 22px 30px}
  .jc-lrow{grid-template-columns:96px 1fr;gap:16px}
  .jc-crow{grid-template-columns:72px 1fr;gap:14px}
  .jc-crow .jc-act{display:none}
  .jc-open-cta{padding:14px 26px;letter-spacing:.2em}
  .jc-cta{padding:15px 30px;letter-spacing:.2em}
  .jc-open--occasion .jc-open-inner{text-align:left;align-items:flex-start}
  .jc-open--occasion .jc-kicker{justify-content:flex-start}
  .jc-open--occasion .jc-count,.jc-open--occasion .jc-open-act{justify-content:flex-start}
}

@media(prefers-reduced-motion:reduce){
  .jc-plate-img,a:hover .jc-plate-img{transition:none;transform:none}
  .jc-plate::after{transition:none}
  .jc-open-cta,.jc-cta,.jc-lrow,.jc-crow,.jc-portal,.jc-index-a{transition:none}
}