/* ==========================================================================
   Roadmap V2 only (roadmap-v2.html): "Open Codex" design #6, tab t4
   (burgundy frame / blue title) from the boss's FINAL desktop/tablet/mobile
   switcher file, 2026-10-13.
   --------------------------------------------------------------------------
   Same rules as prophecy.css: the first :root block holds every setting the
   ?edit=1 panel can change, with phone/desktop pixel pairs. These names all
   contain "journey" so they never affect other pages. Load this file AFTER
   prophecy.css and BEFORE settings.css (saved values must win).
   Values match what the boss's file rendered at 390 / 820 / 1440 wide.
   ========================================================================== */

:root {
  /* Progress: which prophecy is out now (1-21). Drives the progress bar, its
     number, "N of 21 studies published", the top photo and caption, and the
     filled line. Set it in the ?edit=1 panel ("Current prophecy") and Save. */
  --count-journey-current: 1;

  /* Fonts */
  --font-journey-heading: "Lora", Georgia, serif;
  --font-journey-body: "Lato", Arial, sans-serif;
  --font-journey-codex: "Cormorant Garamond", Georgia, serif;

  /* Type sizes, in pixels: phone / desktop */
  --type-journey-title-phone: 35;
  --type-journey-title-desktop: 64;
  --type-journey-desc-phone: 15;
  --type-journey-desc-desktop: 16;
  --type-journey-codex-phone: 36;
  --type-journey-codex-desktop: 83;
  --type-journey-season-phone: 34;
  --type-journey-season-desktop: 45;
  --type-journey-card-title-phone: 23;
  --type-journey-card-title-desktop: 30;
  --type-journey-number-phone: 14;
  --type-journey-number-desktop: 19;
  --type-journey-label: 11px;
  --type-journey-small: 10px;
  --type-journey-button: 13px;
  --type-journey-season-desc: 14px;
  --type-journey-ornament: 36px;
  --type-journey-codex-foot: 9px;
  --type-journey-date: 15px;

  /* Sizes and spacing: phone / desktop */
  --layout-journey-max: 1080px;
  --layout-journey-hero-photo: 36%;
  --layout-journey-hero-height: 510px;
  --layout-journey-hero-photo-phone: 238px;
  --layout-journey-card-image-phone: 190;
  --layout-journey-card-image-desktop: 230;
  --layout-journey-number-phone: 37;
  --layout-journey-number-desktop: 50;
  --layout-journey-number-top-phone: 66px;   /* phones: circle's distance below the card's top edge */
  --layout-journey-rail-gap-phone: 28;
  --layout-journey-rail-gap-desktop: 60;
  --layout-journey-card-gap-phone: 29;
  --layout-journey-card-gap-desktop: 42;
  --layout-journey-track: 4px;
  --layout-journey-frame: 20px;
  --layout-journey-radius: 5px;

  /* Colors */
  --color-journey-ink: #211d20;
  --color-journey-muted: #716970;
  --color-journey-accent: #772f68;
  --color-journey-accent-dark: #42183a;
  --color-journey-hero-bg: #f8f4ee;
  --color-journey-hero-title: #4b1d34;
  --color-journey-hero-kicker: #983f63;
  --color-journey-codex-frame: #742c4f;
  --color-journey-codex-title: #245b91;
  --color-journey-codex-paper: #eee3cf;
  --color-journey-rail: #e8dce5;
  --color-journey-card-border: #e9e0e6;

  /* Progress dates and bar (top banner) */
  --type-journey-progress-date: 11px;
  --type-journey-progress-arrow: 20px;
  --type-journey-progress-note: 10px;
  --type-journey-marker-phone: 16;
  --type-journey-marker-desktop: 17;
  --layout-journey-marker-phone: 32;
  --layout-journey-marker-desktop: 34;
  --layout-journey-meter-height: 6px;
  --color-journey-progress-date: #672644;
  --color-journey-progress-arrow: #ba899b;
  --color-journey-progress-note: #755f6b;
  --color-journey-meter-track: #e8dfe0;
  --color-journey-meter-fill: #772f68;
  --color-journey-marker: #772f68;
  --color-journey-marker-text: #ffffff;
}

/* Derived values: computed from the settings above. Do not edit by hand. */
:root {
  --_journey-total: 21;
  --_journey-done: clamp(1, var(--count-journey-current), var(--_journey-total));
  --_journey-marker:      clamp(calc(min(var(--layout-journey-marker-phone), var(--layout-journey-marker-desktop)) * 1px), calc(var(--layout-journey-marker-phone) * 1px + (var(--layout-journey-marker-desktop) - var(--layout-journey-marker-phone)) * var(--_t)), calc(max(var(--layout-journey-marker-phone), var(--layout-journey-marker-desktop)) * 1px));
  --_journey-marker-type: clamp(calc(min(var(--type-journey-marker-phone), var(--type-journey-marker-desktop)) * 1px), calc(var(--type-journey-marker-phone) * 1px + (var(--type-journey-marker-desktop) - var(--type-journey-marker-phone)) * var(--_t)), calc(max(var(--type-journey-marker-phone), var(--type-journey-marker-desktop)) * 1px));
  --_journey-title:      clamp(calc(min(var(--type-journey-title-phone), var(--type-journey-title-desktop)) * 1px), calc(var(--type-journey-title-phone) * 1px + (var(--type-journey-title-desktop) - var(--type-journey-title-phone)) * var(--_t)), calc(max(var(--type-journey-title-phone), var(--type-journey-title-desktop)) * 1px));
  --_journey-desc:       clamp(calc(min(var(--type-journey-desc-phone), var(--type-journey-desc-desktop)) * 1px), calc(var(--type-journey-desc-phone) * 1px + (var(--type-journey-desc-desktop) - var(--type-journey-desc-phone)) * var(--_t)), calc(max(var(--type-journey-desc-phone), var(--type-journey-desc-desktop)) * 1px));
  --_journey-codex:      clamp(calc(min(var(--type-journey-codex-phone), var(--type-journey-codex-desktop)) * 1px), calc(var(--type-journey-codex-phone) * 1px + (var(--type-journey-codex-desktop) - var(--type-journey-codex-phone)) * var(--_t)), calc(max(var(--type-journey-codex-phone), var(--type-journey-codex-desktop)) * 1px));
  --_journey-season:     clamp(calc(min(var(--type-journey-season-phone), var(--type-journey-season-desktop)) * 1px), calc(var(--type-journey-season-phone) * 1px + (var(--type-journey-season-desktop) - var(--type-journey-season-phone)) * var(--_t)), calc(max(var(--type-journey-season-phone), var(--type-journey-season-desktop)) * 1px));
  --_journey-card-title: clamp(calc(min(var(--type-journey-card-title-phone), var(--type-journey-card-title-desktop)) * 1px), calc(var(--type-journey-card-title-phone) * 1px + (var(--type-journey-card-title-desktop) - var(--type-journey-card-title-phone)) * var(--_t)), calc(max(var(--type-journey-card-title-phone), var(--type-journey-card-title-desktop)) * 1px));
  --_journey-number-type: clamp(calc(min(var(--type-journey-number-phone), var(--type-journey-number-desktop)) * 1px), calc(var(--type-journey-number-phone) * 1px + (var(--type-journey-number-desktop) - var(--type-journey-number-phone)) * var(--_t)), calc(max(var(--type-journey-number-phone), var(--type-journey-number-desktop)) * 1px));
  --_journey-card-image: clamp(calc(min(var(--layout-journey-card-image-phone), var(--layout-journey-card-image-desktop)) * 1px), calc(var(--layout-journey-card-image-phone) * 1px + (var(--layout-journey-card-image-desktop) - var(--layout-journey-card-image-phone)) * var(--_t)), calc(max(var(--layout-journey-card-image-phone), var(--layout-journey-card-image-desktop)) * 1px));
  --_journey-number:     clamp(calc(min(var(--layout-journey-number-phone), var(--layout-journey-number-desktop)) * 1px), calc(var(--layout-journey-number-phone) * 1px + (var(--layout-journey-number-desktop) - var(--layout-journey-number-phone)) * var(--_t)), calc(max(var(--layout-journey-number-phone), var(--layout-journey-number-desktop)) * 1px));
  --_journey-rail-gap:   clamp(calc(min(var(--layout-journey-rail-gap-phone), var(--layout-journey-rail-gap-desktop)) * 1px), calc(var(--layout-journey-rail-gap-phone) * 1px + (var(--layout-journey-rail-gap-desktop) - var(--layout-journey-rail-gap-phone)) * var(--_t)), calc(max(var(--layout-journey-rail-gap-phone), var(--layout-journey-rail-gap-desktop)) * 1px));
  --_journey-card-gap:   clamp(calc(min(var(--layout-journey-card-gap-phone), var(--layout-journey-card-gap-desktop)) * 1px), calc(var(--layout-journey-card-gap-phone) * 1px + (var(--layout-journey-card-gap-desktop) - var(--layout-journey-card-gap-phone)) * var(--_t)), calc(max(var(--layout-journey-card-gap-phone), var(--layout-journey-card-gap-desktop)) * 1px));
}

/* ==========================================================================
   Page
   ========================================================================== */

.journey {
  font-family: var(--font-journey-body);
  color: var(--color-journey-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.journey h1, .journey h2, .journey h3 { margin: 0; text-wrap: wrap; }
:where(.journey) p { margin: 0; }   /* low specificity so each class below can set its own margin */

/* ---------- Top banner: photo left, title and progress right ---------- */
.jr-hero {
  display: grid;
  grid-template-columns: var(--layout-journey-hero-photo) minmax(0, 1fr);
  min-height: var(--layout-journey-hero-height);
  background: var(--color-journey-hero-bg);
}
.jr-hero-photo {
  min-height: var(--layout-journey-hero-height);
  background-image: linear-gradient(0deg, rgba(35, 15, 27, 0.58), rgba(35, 15, 27, 0.02) 55%), var(--_jr-hero-photo, url("../images/roadmap-v2/hero-01.jpg"));   /* journey.js sets the current prophecy's photo */
  background-position: center, center 43%;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  padding: 31px;
}
.jr-hero-caption {
  --_jr-follows: var(--_journey-done);   /* text follows "Current prophecy" (set by journey.js) */
  font: 900 var(--type-journey-small)/1.5 var(--font-journey-body);
  letter-spacing: 0.14em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.jr-hero-copy {
  min-width: 0;
  padding: 57px 55px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jr-hero-kicker {
  font: 900 var(--type-journey-small)/1.4 var(--font-journey-body);
  letter-spacing: 0.16em;
  color: var(--color-journey-hero-kicker);
  margin-bottom: 19px;
}
.journey .jr-hero-title {
  font: 600 var(--_journey-title)/1.065 var(--font-journey-heading);
  letter-spacing: -0.045em;
  color: var(--color-journey-hero-title);
}
.journey .jr-hero-desc {
  margin-top: 23px;
  max-width: 790px;
  font: 400 var(--_journey-desc)/1.65 var(--font-journey-body);
  color: #5a5154;
}
.jr-progress { margin-top: 30px; padding-top: 23px; border-top: 1px solid #dac9cd; }
.jr-progress-dates {
  display: flex;
  gap: 16px;
  align-items: center;
  font: 900 var(--type-journey-progress-date) var(--font-journey-body);
  letter-spacing: 0.05em;
  color: var(--color-journey-progress-date);
}
/* Own rules so the edit panel offers size and color when a date is clicked */
.jr-date-start, .jr-date-end { font-size: var(--type-journey-progress-date); color: var(--color-journey-progress-date); }
.jr-date-arrow { font-size: var(--type-journey-progress-arrow); font-style: normal; color: var(--color-journey-progress-arrow); }
.jr-meter {
  position: relative;
  height: var(--layout-journey-meter-height);
  margin: 20px 0 30px;
  background: var(--color-journey-meter-track);
  border-radius: 9px;
}
.jr-meter-fill {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100% * var(--_journey-done) / var(--_journey-total));
  height: 100%;
  background: var(--color-journey-meter-fill);
  border-radius: 9px;
}
.jr-meter-marker {
  --_jr-follows: var(--_journey-done);   /* number follows "Current prophecy" (set by journey.js) */
  position: absolute;
  left: calc(100% * var(--_journey-done) / var(--_journey-total));
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_journey-marker);
  height: var(--_journey-marker);
  border-radius: 50%;
  color: var(--color-journey-marker-text);
  background: var(--color-journey-marker);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px var(--color-journey-marker);
  font: 700 var(--_journey-marker-type)/1 var(--font-journey-heading);
}
/* Edit mode only: taller invisible strips so the thin bar and its filled part are easy to click */
.tw-editing .jr-meter::before, .tw-editing .jr-meter-fill::after { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.journey .jr-progress-note {
  --_jr-follows: var(--_journey-done);   /* number follows "Current prophecy" (set by journey.js) */
  display: block;
  margin-top: 9px;
  font: 800 var(--type-journey-progress-note) var(--font-journey-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-journey-progress-note);
}

/* ---------- "The Publishing Journey" open book panel ---------- */
.jr-codex {
  position: relative;
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 340px;
  margin: 0 0 42px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-journey-codex-paper);
  border: var(--layout-journey-frame) solid var(--color-journey-codex-frame);
  box-shadow: inset 0 0 30px #b5a48b;
  color: var(--color-journey-codex-frame);
}
.jr-codex-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  width: 26px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(93, 60, 55, 0.1), rgba(70, 49, 44, 0.3), rgba(95, 65, 49, 0.04));
}
.jr-codex-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px 14px 4px 22px;
  background: linear-gradient(135deg, #f2e9d9, #e9dec9);
  border-right: 2px solid #b8a487;
}
.jr-codex-bible {
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 330px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(2px 6px 4px rgba(72, 50, 40, 0.09));
}
.jr-codex-right {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 60px 33px;
  background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(92, 59, 43, 0.025) 45px);
}
.jr-codex-kicker {
  margin-bottom: 20px;
  font-size: var(--type-journey-label);
  font-weight: 900;
  letter-spacing: 0.2em;
  opacity: 0.85;
}
.journey .jr-codex-title {
  font: 400 var(--_journey-codex)/0.98 var(--font-journey-codex);
  letter-spacing: -0.02em;
  color: var(--color-journey-codex-title);
}
.jr-codex-flourish { margin-top: 22px; font: var(--type-journey-ornament) Georgia, serif; }
.jr-codex-foot { margin-top: 10px; font-size: var(--type-journey-codex-foot); letter-spacing: 0.15em; }

/* ---------- Seasons and article cards ---------- */
.jr-timeline { max-width: var(--layout-journey-max); margin: auto; padding: 0 28px; }
.jr-season { margin: 0 0 60px; }
.jr-season-head { padding-left: 88px; margin: 5px 0 34px; }
.jr-eyebrow {
  margin-bottom: 7px;
  font: 900 var(--type-journey-label)/1.4 var(--font-journey-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-journey-accent);
}
.journey .jr-season-head h2 {
  font: 600 var(--_journey-season)/1.12 var(--font-journey-heading);
  letter-spacing: -0.028em;
  color: var(--color-journey-accent-dark);
}
.journey .jr-season-desc {
  max-width: 760px;
  margin-top: 8px;
  font: 400 var(--type-journey-season-desc)/1.55 var(--font-journey-body);
  color: var(--color-journey-muted);
}

/* The rail: a line down the left with a numbered circle per article.
   It is filled in accent color down to the next unpublished article's circle. */
.jr-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--_journey-card-gap);
  margin-left: 28px;
  padding-left: var(--_journey-rail-gap);
  border-left: var(--layout-journey-track) solid var(--color-journey-rail);
  --_jr-num-y: 50%;   /* where the circle's center sits on the card */
}
.jr-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(195px, 34%) 1fr;
  align-items: stretch;
  min-height: var(--_journey-card-image);
  background: #ffffff;
  border: 1px solid var(--color-journey-card-border);
  border-radius: var(--layout-journey-radius);
  box-shadow: 0 10px 30px rgba(62, 30, 54, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.jr-card:hover { box-shadow: 0 18px 36px rgba(62, 30, 54, 0.12); transform: translateY(-2px); }
.jr-number {
  position: absolute;
  z-index: 5;
  left: calc(-1px - var(--_journey-rail-gap) - var(--layout-journey-track) / 2 - var(--_journey-number) / 2);
  top: calc(var(--_jr-num-y) - var(--_journey-number) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_journey-number);
  height: var(--_journey-number);
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--color-journey-accent);
  color: var(--color-journey-accent);
  font: 700 var(--_journey-number-type)/1 var(--font-journey-heading);
  box-shadow: 0 0 0 8px #ffffff;
}
.jr-card.is-published .jr-number { background: var(--color-journey-accent); color: #ffffff; }
/* Accent rail: each published card fills its stretch plus the gap below it,
   and the next unpublished card fills down to its circle. */
.jr-card.is-published::before,
.jr-card.is-published + .jr-card:not(.is-published)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: calc(-1px - var(--_journey-rail-gap) - var(--layout-journey-track));
  width: var(--layout-journey-track);
  background: var(--color-journey-accent);
  pointer-events: none;
}
.jr-card.is-published::before { bottom: calc(-1px - var(--_journey-card-gap)); }
.jr-card.is-published:last-child::before { bottom: -1px; }
.jr-card.is-published + .jr-card:not(.is-published)::before { height: calc(1px + var(--_jr-num-y)); }

.jr-card-image {
  position: relative;
  display: block;
  height: 100%;
  min-height: var(--_journey-card-image);
  overflow: hidden;
  border-radius: 4px 0 0 4px;
  background: #eee8ed;
}
.jr-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(34, 14, 27, 0.12), transparent 56%);
}
.jr-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--_journey-card-image);
  object-fit: cover;
  filter: saturate(0.85) contrast(0.98);
}
/* Card with no photo yet */
.jr-photo-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: var(--_journey-card-image);
  color: var(--color-journey-muted);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jr-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 36px 32px;
}
.jr-ref {
  margin-bottom: 13px;
  font-size: var(--type-journey-label);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-journey-accent);
}
.journey .jr-card h3 {
  max-width: 600px;
  font: 600 var(--_journey-card-title)/1.23 var(--font-journey-heading);
  letter-spacing: -0.018em;
  color: var(--color-journey-ink);
}
.journey .jr-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding: 15px 22px;
  border-radius: 3px;
  background: var(--color-journey-accent);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--type-journey-button);
  font-weight: 900;
  letter-spacing: 0.025em;
}
.jr-card:not(.is-published) .jr-button { display: none; }
.jr-card.is-published:has(.jr-button) .jr-status { display: none; }
.journey .jr-button:hover, .journey .jr-button:focus-visible { background: var(--color-journey-accent-dark); color: #ffffff; }
.jr-status { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: baseline; margin-top: 25px; }
.jr-status-label {
  font-size: var(--type-journey-small);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #867680;
}
.jr-status time {
  font: 900 var(--type-journey-date) var(--font-journey-body);
  letter-spacing: 0.015em;
  color: var(--color-journey-accent-dark);
}

.jr-end { height: 44px; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1024px) {
  .jr-hero-copy { padding: 39px 32px; }
  .jr-codex-right { padding: 32px 28px; }
}

/* ==========================================================================
   Phones and small tablets
   ========================================================================== */
@media (max-width: 760px) {
  .jr-timeline { padding: 0 18px; }
  .jr-season-head { padding-left: 62px; }
  .journey .jr-season-desc { font-size: calc(var(--type-journey-season-desc) - 1px); }
  .jr-items { margin-left: 24px; --_jr-num-y: calc(var(--layout-journey-number-top-phone) + 5px + var(--_journey-number) / 2); }
  .jr-number { box-shadow: 0 0 0 6px #ffffff; }
  .jr-card { grid-template-columns: 1fr; min-height: 0; }
  .jr-card-image { height: var(--_journey-card-image); min-height: 0; border-radius: 4px 4px 0 0; }
  .jr-card-image img { height: var(--_journey-card-image); }
  .jr-card-copy { min-height: 148px; padding: 24px 24px 29px; }
}

@media (max-width: 680px) {
  .jr-hero { display: flex; flex-direction: column; min-height: 0; }
  .jr-hero-photo {
    height: var(--layout-journey-hero-photo-phone);
    min-height: var(--layout-journey-hero-photo-phone);
    background-position: center, center 34%;
    padding: 18px 23px;
  }
  .jr-hero-copy { padding: 30px 23px 35px; }
  .journey .jr-hero-title { line-height: 1.09; }
  .journey .jr-hero-desc { margin-top: 18px; line-height: 1.6; }
  .jr-progress { margin-top: 22px; padding-top: 17px; }
  .jr-progress-dates { flex-wrap: wrap; row-gap: 5px; }
  .jr-meter { margin-bottom: 31px; }

  /* The book panel stacks: Bible on top, title underneath */
  .jr-codex {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    border-width: calc(var(--layout-journey-frame) / 2);
  }
  .jr-codex-spine { display: none; }
  .jr-codex-left {
    min-width: 0;
    min-height: 274px;
    padding: 15px 15px 8px;
    border-right: none;
    border-bottom: 1px solid #d8c8b2;
  }
  .jr-codex-bible { width: auto; max-width: 92%; height: 260px; max-height: 260px; margin: 0 auto; }
  .jr-codex-right { min-width: 0; min-height: 232px; padding: 24px 23px 29px; align-items: center; text-align: center; }
  .jr-codex-kicker { font-size: calc(var(--type-journey-label) - 1px); letter-spacing: 0.13em; margin-bottom: 12px; }
  .journey .jr-codex-title { line-height: 1.03; letter-spacing: -0.025em; }
  .jr-codex-flourish { font-size: calc(var(--type-journey-ornament) * 2 / 3); margin-top: 14px; }
  .jr-codex-foot { font-size: calc(var(--type-journey-codex-foot) - 1px); line-height: 1.6; letter-spacing: 0.11em; }

  .jr-timeline { padding: 0 12px; }
  .jr-season-head { margin-bottom: 27px; }
}

@media (max-width: 440px) {
  .jr-season-head { padding-left: 49px; }
  .jr-items { margin-left: 21px; --_jr-num-y: calc(var(--layout-journey-number-top-phone) + var(--_journey-number) / 2); }
  .jr-card-copy { padding: 23px 19px 26px; }
}

@media (max-width: 360px) {
  .jr-codex-left { min-height: 249px; padding: 11px 12px 7px; }
  .jr-codex-bible { height: 235px; max-height: 235px; }
  .jr-codex-right { padding: 22px 16px 26px; }
}