/* ==========================================================================
   article.css — the single-article template. Owned by the article agent.

   Loads on single posts only, after ds.css, and is enqueued from single.php
   itself (functions.php is not this agent's file to edit and the enqueue hook
   has already fired by the time a template runs).

   It defines NO new card. The itinerary cards are `.lg` from style.css §12,
   reused element for element from template-parts/home-packages.php; the only
   thing touched here is the track count of the `.lgrid` around them, because
   four across does not fit a 744px reading column. `.page-content` is reused
   for prose typography with its own layout switched off, so the body copy
   matches every other long-form page on the site without forking a rule.

   Brand: --ac #124933  --ac-dark #0C3323  --ac-mid #1B6146  --ac-soft #E6EDE9
          --gold #EAB924 (flourish only)   --ink #3A2E25   --muted #7A6F66
          --cream #F7F3EE  --line #E6E0D8  --sans Outfit  --serif Cormorant
   Radii: buttons 12px, cards 18px, large surfaces 22px. Nothing square.
   ========================================================================== */

.ts-art{
  --ts-art-shell:1200px;
  --ts-art-aside:clamp(290px,25vw,352px);
  --ts-art-stick:calc(var(--header-height) - 42px);
  --ts-art-navh:60px;
}

/* The article shell is narrower than the 1300px site shell on purpose: with a
   352px aside beside it, 1300 would leave a 105-character measure. */
.ts-art .wrap{max-width:var(--ts-art-shell)}

/* Anchors from the contents strip must clear the fixed header AND the strip. */
.ts-art [id]{scroll-margin-top:calc(var(--ts-art-stick) + var(--ts-art-navh) + 16px)}

/* ==========================================================================
   1. MASTHEAD
   Text left, featured image right. Not a hero: the image is a 4:3 panel that
   caps at 300px tall, so the owner's first paragraph is on the first screen at
   1440 and at 768.
   ========================================================================== */
.ts-art-head{background:var(--cream);padding:clamp(26px,3.4vw,46px) 0 clamp(26px,3.4vw,44px);
  border-bottom:1px solid var(--line)}
.ts-art-head__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(22px,3vw,48px);align-items:center}
.ts-art-head.is-textonly .ts-art-head__in{grid-template-columns:minmax(0,1fr)}
.ts-art-head__txt{min-width:0}

.ts-art-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px}
.ts-art-crumb a{color:var(--muted);text-decoration:none;border-radius:6px}
.ts-art-crumb a:hover{color:var(--ac)}
.ts-art-crumb span{opacity:.5}

.ts-art-h1{font-weight:700;line-height:1.08;color:var(--ink);
  font-size:clamp(30px,3.9vw,50px);margin:0;overflow-wrap:break-word}
.ts-art-head .rule{margin-top:18px}

.ts-art-jump{margin-top:22px}
.ts-art-jump__go{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:0 20px;border-radius:12px;background:var(--ac);color:#fff;
  font-size:14px;font-weight:600;text-decoration:none;transition:background .2s}
.ts-art-jump__go svg{width:17px;height:17px;flex:none}
.ts-art-jump__go:hover{background:var(--ac-dark);color:#fff}

.ts-art-head__img{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);
  aspect-ratio:4/3;max-height:300px;background:var(--ac-soft)}
.ts-art-head__img img{width:100%;height:100%;object-fit:cover;display:block;margin:0;
  border-radius:0;box-shadow:none}

/* ==========================================================================
   2. STICKY CONTENTS STRIP
   Real in-page anchors, built from the headings that are in the markup. Long
   lists scroll sideways inside the strip rather than wrapping into a wall —
   the strip itself is the only thing that scrolls, never the page.
   ========================================================================== */
.ts-art-nav{position:sticky;top:var(--ts-art-stick);z-index:calc(var(--oh-z-sticky,60) - 1);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.ts-art-nav__in{display:flex;align-items:center;gap:18px;justify-content:space-between}

.ts-art-nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;min-width:0}
.ts-art-nav__list::-webkit-scrollbar{display:none}
.ts-art-nav__list li{margin:0}
.ts-art-nav__list a{display:inline-flex;align-items:center;min-height:var(--ts-art-navh);
  padding:0 13px;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;max-width:30ch;overflow:hidden;
  text-overflow:ellipsis}
.ts-art-nav__list a:hover{color:var(--ink)}

.ts-art-nav__cta{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;
  border-radius:999px;background:var(--ac);color:#fff;font-size:13.5px;font-weight:600;
  white-space:nowrap;flex:0 0 auto;text-decoration:none;transition:background .2s}
.ts-art-nav__cta svg{width:16px;height:16px}
.ts-art-nav__cta:hover{background:var(--ac-dark);color:#fff}

/* ==========================================================================
   3. BODY GRID
   Same proportions as the itinerary pages: one flexible reading column and a
   fixed aside. minmax(0,1fr), never plain 1fr — a 1fr track floors at
   min-content and a wide legacy table inside the prose would push the aside
   off the page.
   ========================================================================== */
.ts-art-body{padding:clamp(30px,4vw,58px) 0 clamp(36px,4.6vw,72px)}
.ts-art-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--ts-art-aside);
  gap:clamp(26px,3.2vw,56px);align-items:start}
.ts-art-body.is-solo .ts-art-grid{grid-template-columns:minmax(0,1fr)}
.ts-art-main{min-width:0}

/* ==========================================================================
   4. PROSE
   `.page-content` supplies the approved long-form typography (headings, lists,
   links, blockquotes, tables, images). Only its page-level layout is undone
   here, so no typographic rule is forked or duplicated.
   ========================================================================== */
.ts-art-prose.page-content{max-width:none;margin:0;padding:0}
.ts-art-prose{min-width:0;overflow-wrap:break-word}

/* The articles carry legacy Elementor markup. These are containment guards, not
   fixes: nothing is restyled, it is only stopped from escaping the column. */
.ts-art-prose img,
.ts-art-prose video,
.ts-art-prose iframe,
.ts-art-prose svg{max-width:100%;height:auto}
.ts-art-prose iframe{display:block}
.ts-art-prose pre{overflow-x:auto}
.ts-art-prose table{display:block;width:100%;max-width:100%;overflow-x:auto}
.ts-art-prose figure{max-width:100%;margin-left:0;margin-right:0}
.ts-art-prose [style*="width"]{max-width:100%}

.ts-art-prose > h2:first-child,
.ts-art-prose > h3:first-child{margin-top:0}

.ts-art-pages{margin-top:28px}
.ts-art-postnav{max-width:var(--ts-art-shell)}

/* ==========================================================================
   5. THE ITINERARY RAIL
   A tinted band inside the reading column, 22px corners, sitting exactly where
   the owner's own baked Post Grid sat.
   ========================================================================== */
.ts-art-rail{margin:clamp(30px,3.6vw,52px) 0;border-radius:22px;background:var(--ac-soft);
  border:1px solid rgba(18,73,51,.10)}
.ts-art-rail__in{padding:clamp(22px,2.6vw,34px)}

.ts-art-rail__head{margin-bottom:clamp(18px,2.2vw,26px)}
.ts-art-rail__k{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ac-mid);margin:0 0 8px}
.ts-art-rail__h{font-size:clamp(23px,2.3vw,31px);font-weight:700;line-height:1.16;
  color:var(--ac-dark);margin:0}

/* The honest sentence. It is said BEFORE any card, and it is the one line on
   this page that is allowed to be about an absence. */
.ts-art-rail__none{margin:10px 0 0;font-size:15.5px;font-weight:600;color:var(--ink);
  line-height:1.6;padding-left:14px;border-left:3px solid var(--gold);border-radius:2px}
.ts-art-rail__lead{margin:10px 0 0;font-size:15px;color:var(--muted);line-height:1.65}
.ts-art-rail__h + .ts-art-rail__none,
.ts-art-rail__h + .ts-art-rail__lead{margin-top:12px}

/* `.lg` itself is untouched; only the track count changes. */
.ts-art-rail .lgrid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:clamp(14px,1.6vw,22px)}

.ts-art-rail__more{list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 14px}
.ts-art-rail__more li{margin:0}
.ts-art-rail__more a{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:0 18px;border-radius:12px;background:#fff;border:1px solid rgba(18,73,51,.16);
  color:var(--ac-dark);font-size:13.5px;font-weight:600;text-decoration:none;
  line-height:1.3;transition:background .2s,border-color .2s}
.ts-art-rail__more a svg{width:15px;height:15px;flex:none}
.ts-art-rail__more a:hover{background:var(--ac);border-color:var(--ac);color:#fff}

/* ==========================================================================
   6. STICKY ASIDE
   Text, not a second set of cards. Hidden below 1080px, where the rail is
   already in the flow and there is no second column to put it in.
   ========================================================================== */
.ts-art-aside{position:sticky;top:calc(var(--ts-art-stick) + var(--ts-art-navh) + 16px);
  min-width:0}
.ts-art-aside__card{background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:22px 20px;box-shadow:var(--shadow-sm)}
.ts-art-aside__k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px}
.ts-art-aside__h{font-size:18px;font-weight:700;line-height:1.25;color:var(--ink);margin:0 0 14px}

.ts-art-aside__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ts-art-aside__list li{margin:0}
.ts-art-aside__list a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;
  min-height:44px;transition:background .2s}
.ts-art-aside__list a:hover{background:var(--ac-soft)}
.ts-art-aside__t{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.ts-art-aside__d{display:block;font-size:12px;color:var(--muted);margin-top:3px}

.ts-art-aside__all{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  min-height:44px;padding:0 16px;border-radius:12px;background:var(--ac);color:#fff;
  font-size:13px;font-weight:600;text-decoration:none;transition:background .2s}
.ts-art-aside__all svg{width:15px;height:15px}
.ts-art-aside__all:hover{background:var(--ac-dark);color:#fff}

/* ==========================================================================
   7. FOCUS
   ========================================================================== */
.ts-art a:focus-visible,
.ts-art button:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:8px}
.ts-art-nav__list a:focus-visible{outline-offset:-3px}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width:1079px){
  .ts-art-grid{grid-template-columns:minmax(0,1fr)}
  .ts-art-aside{display:none}
}

@media (max-width:860px){
  .ts-art{--ts-art-stick:var(--header-height)}
  .ts-art-head__in{grid-template-columns:minmax(0,1fr)}
  .ts-art-head__img{max-height:240px;order:-1}
  .ts-art-nav__in{gap:12px}
  .ts-art-nav__list a{padding:0 11px;font-size:13px}
}

@media (max-width:560px){
  .ts-art-rail__in{padding:18px 14px}
  .ts-art-rail .lgrid{grid-template-columns:minmax(0,1fr)}
  .ts-art-nav__cta{padding:0 14px;font-size:12.5px}
  .ts-art-head__img{max-height:200px}
}

@media (prefers-reduced-motion:reduce){
  .ts-art *,.ts-art *::before,.ts-art *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important}
  .ts-art .lg:hover{transform:none}
  .ts-art{scroll-behavior:auto}
}