/* ===================================================================
   TRAVEL JOURNAL  ·  /journal/  (page 9706, template page-journal.php)

   Loaded automatically by inc/pages.php for the page whose slug is
   `journal`, after ds.css. This file replaces the journal half of
   discover.css entirely — page-journal.php no longer enqueues that
   stylesheet, so nothing here is fighting a rule in a file this page
   cannot edit.

   THE IDEA
   --------
   The archive is a matrix, not a feed: one subject written up once per
   country. So the page is an index. Typography carries it and the whole
   decoration budget is spent on ONE gesture — a gold hairline that draws
   itself along a thread row on hover or focus. Everything else is paper,
   rules and space.

   BANDS (contract §4 — must alternate, two of a colour read as one slab)
     1  cover     full-bleed photograph   (neither white nor cream)
     2  index     --cream
     3  parks     --ac-dark               (neither, so no adjacency)
     4  archive   --white

   COLOUR FLOORS, measured against the actual composite background:
     --body  #5F564E on --cream  6.51:1   ✓  (used for all small text here)
     --muted #7A6F66 on --cream  4.45:1   ✗  — which is why --muted is not
                                              used anywhere on the cream band
     --ink   #3A2E25 on white   13.1:1    ✓
     --ac    #124933 on white   10.5:1    ✓ · on --ac-soft 8.83:1 ✓
     --cream on --ac-dark       12.5:1    ✓
     --gold  #EAB924 on --ac-dark 7.52:1  ✓  (gold is only ever text on dark)
   =================================================================== */

/* ------------------------------------------------------------ shared */

.ts-jr{
  /* the gold hairline's travel time, shared by the index and the run-on */
  --ts-draw:.55s;
}

.ts-jr-kicker{
  display:inline-block;margin:0 0 var(--oh-s2);
  font-family:var(--sans);font-size:var(--oh-fs-eyebrow);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ac);
}

.ts-jr-head{max-width:64ch;margin:0 0 var(--oh-s6)}
.ts-jr-head__lede{
  margin:var(--oh-s3) 0 0;max-width:58ch;
  font-family:var(--sans);font-size:var(--oh-fs-lead);line-height:1.75;color:var(--body);
}
.ts-jr-head__lede strong{color:var(--ink);font-weight:600}

/* The house heading pattern is .h2 with a .sf span in the serif on the
   second line (style.css). That file also sets `.sf{color:var(--gold)}`,
   which measures 1.8:1 on white and 1.7:1 on cream and fails even the 3:1
   floor for large text. Kept as the pattern, re-coloured per surface. */
.ts-jr-h2{margin:0}
.ts-jr-h2 .sf{color:var(--ac)}

/* ============================================================ 1. COVER */

.ts-jr-cover{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:clamp(560px,86vh,920px);
  padding-block:var(--oh-s8) var(--oh-s6);
  background:var(--ac-dark);color:var(--cream);
}
.ts-jr-cover__art{position:absolute;inset:0;z-index:-2}
.ts-jr-cover__art img{width:100%;height:100%;object-fit:cover;display:block}

/* Text sits in the bottom 45%, where the scrim is at least .88 — a mid-tone
   frame composites to about 9.6:1 against --cream there, a blown-out sky to
   about 7.1:1, so the cover cannot be undone by a different photograph. */
.ts-jr-cover::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(12,51,35,.56) 0%,
      rgba(12,51,35,.22) 26%,
      rgba(12,51,35,.88) 62%,
      rgba(12,51,35,.96) 100%),
    linear-gradient(90deg,rgba(12,51,35,.46) 0%,rgba(12,51,35,0) 64%);
}
.ts-jr-cover:not(.has-art){min-height:auto;padding-block:var(--oh-s7)}
.ts-jr-cover:not(.has-art)::after{background:none}

.ts-jr-cover__in{
  position:relative;width:100%;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--oh-s6) var(--oh-s7);align-items:end;
}
.ts-jr-cover .ts-jr-kicker{color:var(--gold)}

.ts-jr-cover__h{
  margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(46px,7.6vw,104px);line-height:.92;letter-spacing:-.02em;
  color:#fff;text-wrap:balance;
}
.ts-jr-cover__sub{
  margin:var(--oh-s3) 0 0;max-width:40ch;
  font-family:var(--sans);font-size:var(--oh-fs-lead);line-height:1.75;
  color:rgba(247,243,238,.9);
}
.ts-jr-cover__sub strong{color:#fff;font-weight:600}

.ts-jr-cover__jump{
  display:flex;flex-wrap:wrap;gap:var(--oh-s4);margin:var(--oh-s4) 0 0;
}
.ts-jr-cover__jump a{
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  text-decoration:none;padding-bottom:5px;
  border-bottom:1px solid rgba(234,185,36,.7);
  transition:border-color var(--oh-dur) var(--oh-ease),color var(--oh-dur) var(--oh-ease);
}
.ts-jr-cover__jump a:hover{color:#fff;border-bottom-color:var(--gold)}

/* One gesture, not a glass box: the cover story hangs off a gold rule. */
.ts-jr-cover__lead{
  max-width:48ch;padding-left:var(--oh-s4);
  border-left:2px solid var(--gold);
}
.ts-jr-cover__flag{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--oh-s2);margin:0;
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
.ts-jr-cover__latest{color:var(--gold)}
.ts-jr-cover__flag a{color:rgba(247,243,238,.92);text-decoration:none}
.ts-jr-cover__flag a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

.ts-jr-cover__title{
  margin:var(--oh-s2) 0 0;font-family:var(--serif);font-weight:500;
  font-size:clamp(25px,2.7vw,40px);line-height:1.18;text-wrap:balance;
}
.ts-jr-cover__title a{color:#fff;text-decoration:none}
.ts-jr-cover__title a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold)}

.ts-jr-cover__dek{
  margin:var(--oh-s2) 0 0;font-family:var(--sans);font-size:var(--oh-fs-base);
  line-height:1.75;color:rgba(247,243,238,.86);
}
.ts-jr-cover__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--oh-s3);
  margin:var(--oh-s3) 0 0;
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,243,238,.8);
}

/* ------------------------------------------------ bookmark flag (both) */

.ts-jr-bm{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--oh-radius-pill);cursor:pointer;
  transition:background-color var(--oh-dur) var(--oh-ease),
             color var(--oh-dur) var(--oh-ease),
             border-color var(--oh-dur) var(--oh-ease),
             opacity var(--oh-dur) var(--oh-ease);
}
.ts-jr-bm svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.ts-jr-bm.is-saved svg{fill:currentColor}

.ts-jr-bm--inline{
  font-size:var(--oh-fs-micro);padding:8px 16px;
  background:transparent;color:var(--cream);border:1px solid rgba(247,243,238,.45);
}
.ts-jr-bm--inline:hover{background:rgba(247,243,238,.14);border-color:var(--cream)}
.ts-jr-bm--inline.is-saved{background:var(--cream);color:var(--ac-dark);border-color:var(--cream)}

/* ============================================================ 2. INDEX */

.ts-jr-index{background:var(--cream);padding-block:var(--oh-s8)}

.ts-jr-threads{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);
}
/* MEASURED at 1440px: with a 16rem name column, seven of the eighteen names
   ("Golden monkey trekking", "Honeymoons & romance", "Photography safaris" …)
   broke into two lines and those rows stood 130px against the others' 93px,
   which read as an accident rather than as an index. Counted line boxes, not
   row tops: 22rem holds the longest name on one line at the capped size. */
.ts-jr-thread{
  position:relative;
  display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:var(--oh-s2) var(--oh-s6);align-items:baseline;
  padding:var(--oh-s4) 0;
  border-bottom:1px solid var(--line);
}
/* THE gesture. Decorative only — every link in the row is reachable and
   readable without it, and it is switched off under reduced motion. */
.ts-jr-thread::after{
  content:"";position:absolute;left:0;right:auto;bottom:-1px;height:1px;width:0;
  background:var(--gold-ink);pointer-events:none;
  transition:width var(--ts-draw) var(--oh-ease);
}
.ts-jr-thread:hover::after,
.ts-jr-thread:focus-within::after{width:100%}

.ts-jr-thread__name{
  margin:0;display:flex;align-items:baseline;gap:.55em;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,2.05vw,30px);line-height:1.1;letter-spacing:-.005em;
  color:var(--ink);text-wrap:balance;
}
.ts-jr-thread__n{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--body);flex:none;
}

.ts-jr-thread__links{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--oh-s1) var(--oh-s4);
}
.ts-jr-thread__links a{
  display:inline-block;
  font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--body);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--oh-dur) var(--oh-ease),border-color var(--oh-dur) var(--oh-ease);
}
.ts-jr-thread__links a:hover{color:var(--ac);border-bottom-color:var(--gold)}

/* A thread whose stories all sit under the same country falls back to full
   titles, which need a column rather than a row. */
.ts-jr-thread.is-wide .ts-jr-thread__links{flex-direction:column;gap:var(--oh-s1)}
.ts-jr-thread.is-wide .ts-jr-thread__links a{font-size:15px}

/* ============================================================ 3. PARKS */

.ts-jr-parks{background:var(--ac-dark);color:var(--cream);padding-block:var(--oh-s8)}
.ts-jr-parks .ts-jr-kicker{color:var(--gold)}
.ts-jr-parks .h2{color:var(--cream)}
.ts-jr-parks .ts-jr-h2 .sf{color:var(--gold)}
.ts-jr-parks .ts-jr-head__lede{color:rgba(247,243,238,.86)}
.ts-jr-parks .ts-jr-head__lede strong{color:#fff}

.ts-jr-run{
  list-style:none;margin:0;padding:0;max-width:1040px;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(25px,3.4vw,46px);line-height:1.32;letter-spacing:-.01em;
  overflow-wrap:break-word;
}
.ts-jr-run li{display:inline}
.ts-jr-run li + li::before{
  content:"·";margin:0 .4em;color:var(--gold);font-family:var(--sans);
}
.ts-jr-run a{
  color:var(--cream);text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size var(--ts-draw) var(--oh-ease);
}
.ts-jr-run a:hover{background-size:100% 1px}

/* ========================================================== 4. ARCHIVE */

.ts-jr-archive{background:var(--white);padding-block:var(--oh-s8)}

.ts-jr-head--row{
  max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:var(--oh-s3) var(--oh-s5);
  margin-bottom:var(--oh-s4);
}
.ts-jr-more__status{
  margin:0;font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--body);
}
.ts-jr-more__status strong{color:var(--ink);font-weight:600}

.ts-jr-chips{margin:0 0 var(--oh-s6)}
.ts-jr-chip__n{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--oh-radius-pill);background:var(--ac-soft);color:var(--ac);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
}
.oh-chip--active .ts-jr-chip__n,
.oh-chip[aria-pressed="true"] .ts-jr-chip__n{background:rgba(247,243,238,.22);color:var(--cream)}

.ts-jr-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--oh-s6) var(--oh-s4);
}

/* discover.js gates. `is-out` is only ever set by script, so it may hide
   unconditionally; `is-beyond` is printed by PHP and must not bite until
   ds.js has put `oh-js` on <html>, or a visitor without JS would see 12
   stories out of 100 and no way to reach the rest. */
.ts-jr-card.is-out{display:none!important}
.oh-js .ts-jr-card.is-beyond{display:none!important}

.ts-jr-card{position:relative;display:flex;flex-direction:column}

.ts-jr-card__media{
  position:relative;border-radius:var(--oh-radius);overflow:hidden;
  background:var(--ac-soft);
}
.ts-jr-card__shot{display:block;aspect-ratio:3/2;overflow:hidden}
.ts-jr-card__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--oh-dur-slow) var(--oh-ease);
}
.ts-jr-card:hover .ts-jr-card__shot img{transform:scale(1.045)}

/* MEASURED: exactly one story of the 100 has no featured image. It gets a
   set plate carrying its own category, so a missing photograph costs the
   row nothing — no collapsed box, no gradient blob standing in for a
   picture that does not exist. */
.ts-jr-card__shot--none{
  display:grid;place-items:center;text-align:center;padding:var(--oh-s4);
  background:var(--ac-soft);box-shadow:inset 0 0 0 1px var(--line);
}
.ts-jr-card__plate{
  font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);
  line-height:1.2;color:var(--ac);padding-bottom:10px;
  border-bottom:2px solid var(--gold);
}

.ts-jr-card__bm{
  position:absolute;top:10px;right:10px;width:38px;height:38px;padding:0;
  border:1px solid rgba(247,243,238,.5);background:rgba(12,51,35,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--cream);
}
.ts-jr-card__bm:hover{background:var(--ac-dark);border-color:var(--cream)}
.ts-jr-card__bm.is-saved{background:var(--cream);color:var(--ac-dark);border-color:var(--cream)}
/* Hidden until hover ONLY where hover exists. On a touch screen there is no
   hover state to reveal it, so it stays on screen. */
@media (hover:hover) and (pointer:fine){
  .ts-jr-card__bm{opacity:0}
  .ts-jr-card:hover .ts-jr-card__bm,
  .ts-jr-card__bm:focus-visible,
  .ts-jr-card__bm.is-saved{opacity:1}
}

.ts-jr-card__body{padding:var(--oh-s3) 0 0}
.ts-jr-card__cat{margin:0}
.ts-jr-card__cat a{
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac);text-decoration:none;
}
.ts-jr-card__cat a:hover{color:var(--gold-ink)}

.ts-jr-card__title{
  margin:var(--oh-s1) 0 0;font-family:var(--serif);font-weight:500;
  font-size:clamp(20px,1.45vw,24px);line-height:1.22;letter-spacing:-.005em;
  text-wrap:balance;
}
.ts-jr-card__title a{
  color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size var(--oh-dur) var(--oh-ease),color var(--oh-dur) var(--oh-ease);
}
.ts-jr-card__title a:hover{color:var(--ac);background-size:100% 1px}

.ts-jr-card__meta{
  display:flex;flex-wrap:wrap;gap:var(--oh-s1) var(--oh-s3);margin:var(--oh-s2) 0 0;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);
}

.ts-jr-empty{margin-top:var(--oh-s4)}
.ts-jr-more{display:flex;justify-content:center;margin-top:var(--oh-s7)}
.ts-jr-noscript{
  margin:var(--oh-s4) 0 0;text-align:center;
  font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--body);
}

/* ============================================================== FOCUS */

/* ds.css gives .oh-btn / .oh-chip a ring already. Everything this page adds
   needs its own, and on the two dark bands the --ac ring is invisible, so
   those get gold instead. */
.ts-jr-thread__links a:focus-visible,
.ts-jr-card__title a:focus-visible,
.ts-jr-card__cat a:focus-visible{
  outline:none;box-shadow:var(--oh-focus-ring);border-radius:var(--oh-radius-xs);
}
.ts-jr-cover a:focus-visible,
.ts-jr-cover button:focus-visible,
.ts-jr-run a:focus-visible,
.ts-jr-card__bm:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;box-shadow:none;border-radius:4px;
}
.ts-jr-card__bm:focus-visible{border-radius:var(--oh-radius-pill)}

/* ========================================================= RESPONSIVE */

@media (max-width:1180px){
  .ts-jr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1000px){
  .ts-jr-cover__in{grid-template-columns:minmax(0,1fr);align-items:start}
  .ts-jr-cover{min-height:clamp(520px,80vh,760px)}
  .ts-jr-cover__lead{max-width:none}
}

/* MEASURED at 880 / 940 / 1024 / 1120px: side by side, the links column is
   434-659px, and the two longest threads (Birding's nine links need about
   804px, Walking safaris' eight) wrapped to a second line while the five-link
   threads did not — so the index came out in two heights, 69px and 103px, and
   stopped reading as an index. 1280px is the first width at which the longest
   row fits on one line beside the name (measured: 805.5px of 805px needed,
   all seventeen rows then 82px). Below it the name goes above its links,
   which gives them the full shell and restores one rhythm. */
@media (max-width:1279px){
  .ts-jr-thread{grid-template-columns:minmax(0,1fr);gap:var(--oh-s2)}
  .ts-jr-thread__links{gap:var(--oh-s1) var(--oh-s3)}
}

@media (max-width:760px){
  .ts-jr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--oh-s5) var(--oh-s3)}
  .ts-jr-card__title{font-size:18px}
  .ts-jr-head--row{align-items:flex-start;flex-direction:column}

  /* MEASURED at 360px: wrapped, the twelve country chips stand 260px tall and
     push every story below the fold. As a single scrolling row they are 44px.
     The page itself still has no horizontal overflow — this scrolls inside its
     own box — and every chip stays tabbable, because focus scrolls it in. The
     vertical padding keeps the focus ring off the clipping edge. */
  .ts-jr-chips{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding:4px 0 10px;scrollbar-width:thin;
  }
  .ts-jr-chips > li{scroll-snap-align:start;flex:none}
}

@media (max-width:520px){
  .ts-jr-grid{grid-template-columns:minmax(0,1fr)}
  .ts-jr-card__title{font-size:21px}
  .ts-jr-cover__jump{gap:var(--oh-s3)}
  .ts-jr-cover__lead{padding-left:var(--oh-s3)}
  .ts-jr-run{font-size:clamp(22px,6.4vw,30px)}
}

/* ==================================================== REDUCED MOTION */

@media (prefers-reduced-motion:reduce){
  .ts-jr *,
  .ts-jr *::before,
  .ts-jr *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
  }
  .ts-jr-card:hover .ts-jr-card__shot img{transform:none}
}