/*
Theme Name: SWELL CHILD (Japan Travel Notes)
Template: swell
Version: 3.0.0
Description: Japan Travel Utility x Contemporary Editorial. Design spec: docs/デザイン設計書_v2_2026-09-18.md (Phase 1-3 CSS).
Text Domain: swell-child-jtn
*/

/* ---------- 1. Design tokens (--travel-*). --jtn-* are aliases kept for the Python-side markup. ---------- */
:root {
  --travel-color-bg: #ffffff;
  --travel-color-panel: #f3f4f1;
  --travel-color-text: #17212b;
  --travel-color-muted: #5f6b76;
  --travel-color-primary: #1f3a5f;
  --travel-color-primary-dark: #172d4a;
  --travel-color-accent: #b7282e;
  --travel-color-good: #3e6b54;
  --travel-color-bad: #9b4a50;
  --travel-color-sky: #dce8ec;
  --travel-color-border: #e4e2dc;
  --travel-color-focus: #2f6fbb;
  --travel-space-1: 4px; --travel-space-2: 8px; --travel-space-3: 12px; --travel-space-4: 16px;
  --travel-space-5: 24px; --travel-space-6: 32px; --travel-space-7: 48px; --travel-space-8: 64px;
  --travel-radius-sm: 4px; --travel-radius-md: 8px; --travel-radius-lg: 12px;
  --travel-font-heading: "Newsreader", Georgia, serif;
  --travel-font-body: "DM Sans", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --travel-measure: 68ch;

  --jtn-indigo: var(--travel-color-primary);
  --jtn-indigo-dark: var(--travel-color-primary-dark);
  --jtn-vermilion: var(--travel-color-accent);
  --jtn-paper: var(--travel-color-bg);
  --jtn-white: #fff;
  --jtn-ink: var(--travel-color-text);
  --jtn-muted: var(--travel-color-muted);
  --jtn-dim: var(--travel-color-muted);
  --jtn-line: var(--travel-color-border);
  --jtn-fill: var(--travel-color-panel);
  --jtn-good: var(--travel-color-good);
  --jtn-bad: var(--travel-color-bad);
  --jtn-focus: var(--travel-color-focus);
  --jtn-serif: var(--travel-font-heading);
  --jtn-sans: var(--travel-font-body);
}

/* ---------- 2. Page frame ---------- */
html { overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--travel-color-bg); color: var(--travel-color-text); font-family: var(--travel-font-body); }
body, button, input, select, textarea { font-family: var(--travel-font-body); }
a { color: var(--travel-color-primary); text-decoration-color: #aab6c4; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--travel-color-primary-dark); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--travel-color-focus) !important; outline-offset: 3px; }

.l-header { background: var(--travel-color-bg); border-bottom: 1px solid var(--travel-color-border); box-shadow: none; }
.l-header__inner { min-height: 72px; }
.c-headLogo__link { color: var(--travel-color-primary-dark) !important; font-family: var(--travel-font-heading); font-size: clamp(1.45rem, 2vw, 1.8rem); font-weight: 500; letter-spacing: -.02em; }
.c-gnav > li > a { color: var(--travel-color-text); font-size: .9rem; font-weight: 500; }
.c-gnav > li > a::after { background: var(--travel-color-primary); height: 2px; }
.l-content { max-width: 1184px; }
.l-main { max-width: 760px; }
.l-sidebar { width: 300px; }

/* ---------- 3. Article typography (H in the spec) ---------- */
.post_content { color: var(--travel-color-text); font-size: 17px; line-height: 1.7; max-width: 720px; }
.post_content p { margin: 0 0 1em; }
.post_content > p:not([class]) { max-width: var(--travel-measure); }
.post_content > p:nth-of-type(-n+3):not([class]) { font-size: 18px; }
.c-pageTitle, .p-postList__title, .post_content h1, .post_content h2, .jtn-home h1, .jtn-home h2 {
  color: var(--travel-color-text) !important;
  font-family: var(--travel-font-heading) !important;
}
.c-pageTitle, .p-articleHead__title { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.post_content h2 {
  background: none !important; border: 0 !important; border-top: 1px solid var(--travel-color-border) !important;
  color: var(--travel-color-text) !important; font-size: 1.75rem; font-weight: 500; line-height: 1.2;
  margin: 52px 0 16px; padding: 28px 0 0;
}
.post_content h2::before, .post_content h2::after, .post_content h3::before, .post_content h3::after, .post_content h4::before, .post_content h4::after { display: none !important; }
.post_content h3 {
  background: none !important; border: 0 !important; color: var(--travel-color-text) !important;
  border-bottom: 0 !important; font-family: var(--travel-font-body) !important; font-size: 1.3rem; font-weight: 700; line-height: 1.3;
  margin: 36px 0 12px; padding: 0;
}
.post_content h4 { color: var(--travel-color-text); font-family: var(--travel-font-body); font-size: 1.05rem; font-weight: 700; margin: 28px 0 8px; }
.post_content ul, .post_content ol { margin: 0 0 1.2em; padding-left: 20px; }
.post_content li { line-height: 1.6; margin: 0 0 6px; }
.post_content ol > li::marker { color: var(--travel-color-primary); font-weight: 700; }
.post_content blockquote { border-left: 3px solid var(--travel-color-primary); color: var(--travel-color-text); font-style: normal; margin: 1.5em 0; padding: .2em 0 .2em 1em; }
.post_content hr { border: 0; border-top: 1px solid var(--travel-color-border); margin: 32px 0; }
.post_content dl { margin: 0 0 1.2em; }
.post_content dt { font-weight: 700; }
.post_content dd { color: var(--travel-color-muted); margin: 0 0 .5em; }
.post_content figure { margin: 24px 0; }
.post_content figure img, .jtn-article-image img { border-radius: var(--travel-radius-md); display: block; height: auto; width: 100%; }
.post_content figcaption, .jtn-image-caption { color: var(--travel-color-muted); font-size: 13px; line-height: 1.4; margin-top: 8px; text-align: left; }
.post_content iframe { border: 0; max-width: 100%; }
.c-postTimes, .c-prNotation, .ad-disclosure { color: var(--travel-color-muted); font-size: 14px; }
.c-prNotation { display: block !important; }
.swl-marker { background: none !important; color: inherit; font-weight: 700; padding: 0; }
.jtn-strong { font-weight: 700; }
.jtn-photo-credit { color: var(--travel-color-muted); font-size: 13px; margin: 24px 0 0; }

/* ---------- 4. Quick answer (opening box) and trust line ---------- */
.point-box, .quick-answer {
  background: transparent !important; border: 0 !important; border-left: 3px solid var(--travel-color-primary) !important;
  border-radius: 0 !important; margin: 28px 0 20px; padding: 4px 0 4px 20px;
}
.point-box .cap_box_ttl, .quick-answer__title {
  background: transparent !important; border: 0 !important; color: var(--travel-color-primary) !important;
  display: block; font-family: var(--travel-font-body); font-size: 14px; font-weight: 700; margin: 0 0 8px; padding: 0; text-align: left;
}
.point-box .cap_box_content { border: 0 !important; color: var(--travel-color-text); font-family: var(--travel-font-heading); font-size: 1.2rem; line-height: 1.45; padding: 0; }
.point-box .cap_box_content ul { margin: 0; padding-left: 1.1em; }
.point-box .cap_box_content li { margin: .3em 0; }
.jtn-meta { color: var(--travel-color-muted); display: flex; flex-wrap: wrap; font-size: 14px; gap: 4px 0; margin: 0 0 20px; }
.jtn-meta { column-gap: 20px; }
.jtn-meta__author::before { color: var(--travel-color-border); content: "|"; margin-right: 20px; }
.jtn-meta a { color: var(--travel-color-text); font-weight: 700; text-decoration: none; }
.jtn-author-line { border-top: 1px solid var(--travel-color-border); color: var(--travel-color-muted); font-size: 14px; line-height: 1.55; margin: 20px 0; padding-top: 12px; }
.jtn-author-label { color: var(--travel-color-primary); }

/* Quick facts strip: the signature element. <dl class="quick-facts"><dt>Time</dt><dd>3 days</dd>…</dl>
   Label / value rows like a spec sheet; reads the same on a phone and a desktop. */
.quick-facts, .jtn-facts {
  background: var(--travel-color-panel); border-radius: var(--travel-radius-md); display: grid;
  gap: 0 16px; grid-template-columns: max-content minmax(0, 1fr); margin: 20px 0 28px; padding: 6px 16px;
}
.quick-facts dt, .jtn-fact-label { color: var(--travel-color-muted); font-size: 14px; font-weight: 500; margin: 0; padding: 9px 0; }
.quick-facts dd, .jtn-fact-number { color: var(--travel-color-text); font-size: 16px; font-weight: 700; margin: 0; padding: 9px 0; }
.quick-facts dt + dd { border-top: 0; }
.quick-facts dd + dt, .quick-facts dd + dt + dd { border-top: 1px solid var(--travel-color-border); }
.jtn-fact { text-align: left; }
.jtn-fact-unit { color: var(--travel-color-muted); font-size: 13px; font-weight: 500; margin-left: 3px; }

/* ---------- 5. Notes (Travel tip / Good to know / Important) ---------- */
.note { border-left: 3px solid var(--travel-color-sky); margin: 20px 0; padding: 8px 0 8px 16px; }
.note--tip { border-left-color: var(--travel-color-good); }
.note--important { border-left-color: var(--travel-color-accent); }
.note::before { color: var(--travel-color-muted); display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.note--tip::before { content: "Travel tip"; }
.note--know::before { content: "Good to know"; }
.note--important::before { content: "Important"; }

/* ---------- 6. Rail: routes, steps, timelines, Start Here path share one look ---------- */
.route { list-style: none; margin: 20px 0 28px; padding: 0 0 0 26px; position: relative; }
.route::before { background: var(--travel-color-sky); bottom: 10px; content: ""; left: 7px; position: absolute; top: 10px; width: 3px; }
.route li { margin: 0; padding: 0 0 14px; position: relative; }
.route li:last-child { padding-bottom: 0; }
.route__stop { display: block; font-weight: 700; }
.route__stop::before { background: var(--travel-color-primary); border: 2px solid var(--travel-color-bg); border-radius: 50%; content: ""; height: 11px; left: -24px; position: absolute; top: 6px; width: 11px; }
.route__leg { color: var(--travel-color-muted); display: block; font-size: 15px; }

.auto-steps { margin: 28px 0; }
.auto-steps .step { display: flex; gap: 14px; }
.jtn-step-rail { align-items: center; align-self: stretch; display: flex; flex: 0 0 auto; flex-direction: column; }
.jtn-step-number { align-items: center; background: var(--travel-color-primary); border-radius: 50%; color: #fff; display: flex; font-size: 13px; font-weight: 700; height: 28px; justify-content: center; width: 28px; }
.jtn-step-line { border-left: 3px solid var(--travel-color-sky); flex: 1; margin: 4px 0; }
.step:last-child .jtn-step-line { border-left-color: transparent; }
.jtn-step-body { flex: 1; padding-bottom: 20px; }
.jtn-step-title, .jtn-timeline-title { color: var(--travel-color-text); font-size: 1.05rem; font-weight: 700; margin: 2px 0 4px; }
.jtn-timeline { margin: 28px 0; }
.jtn-timeline .tl-item { display: flex; gap: 14px; }
.jtn-timeline-rail { align-items: center; align-self: stretch; display: flex; flex: 0 0 16px; flex-direction: column; }
.jtn-timeline-dot { background: var(--travel-color-primary); border-radius: 50%; height: 11px; margin-top: 7px; width: 11px; }
.jtn-timeline-line { border-left: 3px solid var(--travel-color-sky); flex: 1; margin: 4px 0; }
.tl-item:last-child .jtn-timeline-line { border-left-color: transparent; }
.jtn-timeline-body { flex: 1; padding-bottom: 20px; }

/* ---------- 7. Checklist, pros/cons, FAQ ---------- */
.jtn-check-list { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); margin: 28px 0; padding: 16px 20px; }
.jtn-check-title { color: var(--travel-color-text); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.jtn-check-items { list-style: none; margin: 0; padding: 0; }
.jtn-check-item { align-items: flex-start; border-top: 1px solid var(--travel-color-border); display: flex; gap: 12px; padding: 10px 0; }
.jtn-check-box { border: 1.5px solid var(--travel-color-primary); border-radius: 3px; flex: 0 0 auto; height: 17px; margin-top: 4px; width: 17px; }
.jtn-compare-2col { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 28px 0; }
.jtn-compare-2col > div { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); padding: 16px; }
.jtn-compare-2col .col-bad { border-top: 3px solid var(--travel-color-bad); }
.jtn-compare-2col .col-good { border-top: 3px solid var(--travel-color-good); }
.jtn-compare-title { color: var(--travel-color-text); font-weight: 700; margin: 0 0 8px; }
.jtn-compare-list { list-style: none; margin: 0; padding: 0; }
.jtn-compare-item { border-top: 1px solid var(--travel-color-border); padding: 8px 0; }
.jtn-compare-icon { display: none; }
.post_content .jtn-faq-question { align-items: flex-start; border-top: 1px solid var(--travel-color-border); display: flex; gap: 10px; padding-top: 16px; }
.jtn-faq-q { color: var(--travel-color-primary); flex: 0 0 auto; font-family: var(--travel-font-heading); font-size: 1.2rem; font-weight: 500; }
.jtn-rule { border: 0; border-top: 1px solid var(--travel-color-border); color: transparent; font-size: 0; margin: 32px 0; }
.lesson-box { background: var(--travel-color-panel); border-radius: var(--travel-radius-md); margin: 28px 0; padding: 16px 20px; }
.jtn-lesson-label { color: var(--travel-color-muted); font-size: 13px; font-weight: 700; margin: 0 0 4px; }

/* ---------- 8. Tables ---------- */
.fm-tw { margin: 28px 0; }
.fm-tw__hint { color: var(--travel-color-muted); display: none; font-size: 13px; margin: 0 0 6px; }
.fm-tw__body { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); overflow-x: auto; }
.post_content .fm-tbl, .post_content table { background: #fff; border-collapse: separate; border-spacing: 0; font-size: 15px; width: 100%; }
.post_content .fm-tbl th, .post_content table th { background: var(--travel-color-panel); border: 0; border-bottom: 1px solid var(--travel-color-border); color: var(--travel-color-text); font-weight: 700; padding: 10px 12px; text-align: left; }
.post_content .fm-tbl th, .post_content .fm-tbl td { white-space: nowrap; } /* one line per cell; the wrapper scrolls sideways (藤本さん 2026-09-19) */
.post_content .fm-tbl td, .post_content table td { border: 0; border-bottom: 1px solid var(--travel-color-border); color: var(--travel-color-text); padding: 10px 12px; vertical-align: top; }
.post_content .fm-tbl tr:last-child td { border-bottom: 0; }
.fm-tbl td:not(:first-child):is([data-num], .num) { text-align: right; }
.fm-tw__body .fm-tbl th:first-child, .fm-tw__body .fm-tbl td:first-child { left: 0; position: sticky; z-index: 2; }
.fm-tw__body .fm-tbl td:first-child { background: #fff; box-shadow: 1px 0 var(--travel-color-border); }
.table-pick { border-left: 3px solid var(--travel-color-good); margin: -16px 0 28px; padding: 6px 0 6px 16px; }
.table-pick strong { color: var(--travel-color-good); }

/* ---------- 9. Booking components (I in the spec). Reason before CTA. ---------- */
.booking-card { background: var(--travel-color-panel); border-radius: var(--travel-radius-md); margin: 28px 0; padding: 20px; }
.booking-card__kicker { color: var(--travel-color-muted); font-size: 13px; margin: 0 0 4px; }
.booking-card__name { font-family: var(--travel-font-heading); font-size: 1.35rem; font-weight: 500; line-height: 1.2; margin: 0 0 8px; }
.booking-card__why { margin: 0 0 12px; }
.booking-card__facts { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 16px; }
.booking-card__facts dt { color: var(--travel-color-muted); font-size: 13px; font-weight: 500; }
.booking-card__facts dd { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 2px 0 10px; }
.booking-card__disclosure { color: var(--travel-color-muted); font-size: 13px; margin: 10px 0 0; }
.top-picks { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 0 0 28px; }
.top-picks__title { font-family: var(--travel-font-heading); font-size: 1.35rem; font-weight: 500; grid-column: 1 / -1; margin: 0; }
.top-picks .booking-card { margin: 0; }
.top-picks .booking-card__cta { width: 100%; }
.post_content .spot-facts { background: var(--travel-color-panel); border-radius: var(--travel-radius-md); list-style: none; margin: 12px 0 8px; padding: 6px 16px; }
.post_content .spot-facts li { border-top: 1px solid var(--travel-color-border); font-size: 15px; margin: 0; padding: 8px 0; }
.post_content .spot-facts li:first-child { border-top: 0; }
.quick-links { border-block: 1px solid var(--travel-color-border); margin: 24px 0; padding: 12px 0; }
.quick-links p { margin: 0 0 6px; }
.quick-links ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.quick-links a { font-weight: 700; }

.jtn-hub-link[data-spot="top"], .jtn-hub-link[data-spot="mid"], .jtn-related-link { border-left: 3px solid var(--travel-color-primary); margin: 20px 0 28px; padding: 6px 0 6px 16px; }
.jtn-hub-link a, .jtn-arrow-link { color: var(--travel-color-primary); font-weight: 700; }
.jtn-hub-link[data-spot="end"] { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); margin: 36px 0 24px; padding: 16px 20px; }
.jtn-hub-end__title { color: var(--travel-color-text); font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.jtn-hub-end__list { list-style: none; margin: 0; padding: 0; }
.jtn-hub-end__item { border-top: 1px solid var(--travel-color-border); padding: 10px 0; }
.jtn-hub-end__item a { text-decoration: none; }

/* Primary button: one per screen. Secondary (map): outlined. */
.jtn-primary-btn, .auto-cta-btn:not(.cta-btn--map) > a, .jtn-hotel-btn > a, .booking-card__cta {
  align-items: center; background: var(--travel-color-accent); border: 0; border-radius: var(--travel-radius-sm);
  box-sizing: border-box; color: #fff; display: inline-flex; font-weight: 700; justify-content: center;
  line-height: 1.35; min-height: 48px; padding: 12px 20px; text-decoration: none; width: min(100%, 420px);
}
.booking-card__cta.booking-card__cta--secondary { background: transparent; border: 1.5px solid var(--travel-color-primary); color: var(--travel-color-primary); }
.auto-cta-btn, .jtn-hotel-btn { margin: 24px 0 28px; text-align: left; }
.cta-btn--map { margin: 8px 0 24px; }
.cta-btn--map > a { border: 1.5px solid var(--travel-color-primary); border-radius: var(--travel-radius-sm); color: var(--travel-color-primary); display: inline-flex; font-weight: 700; min-height: 44px; padding: 10px 16px; text-decoration: none; }
.map-embed { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); margin: 16px 0 0; overflow: hidden; }
.map-embed iframe { display: block; height: 260px; width: 100%; }
.jtn-button-note, .jtn-cta-note { color: var(--travel-color-muted); font-size: 13px; margin: 8px 0 0; }
.auto-cta-lead { border-top: 1px solid var(--travel-color-border); color: var(--travel-color-muted); margin: 32px 0 0; padding-top: 16px; }

/* ---------- 10. Table of contents and related ---------- */
.p-toc { background: transparent !important; border: 1px solid var(--travel-color-border) !important; border-radius: var(--travel-radius-md); box-shadow: none !important; }
.p-toc__ttl { color: var(--travel-color-text); font-size: 1.05rem; font-weight: 700; }
.auto-related { margin: 36px 0 16px; }
.jtn-related-title { color: var(--travel-color-text); font-size: 1.05rem; font-weight: 700; }
.jtn-related-card { align-items: center; border-top: 1px solid var(--travel-color-border); display: flex; gap: 12px; padding: 12px 0; text-decoration: none; }
.jtn-related-card img { border-radius: var(--travel-radius-sm); flex: 0 0 auto; height: 69px; object-fit: cover; width: 92px; }
.jtn-related-card__body { color: var(--travel-color-text); flex: 1; font-size: 15px; line-height: 1.45; }
.jtn-related-card__more { color: var(--travel-color-primary); display: block; font-size: 13px; margin-top: 4px; }

/* ---------- 11. Sidebar (desktop only) ---------- */
.jtn-side-card { background: #fff; border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); margin: 0 0 20px; overflow: hidden; }
.jtn-side-card__title { border-bottom: 1px solid var(--travel-color-border); color: var(--travel-color-text); font-family: var(--travel-font-heading); font-size: 1.15rem; font-weight: 500; padding: 12px 14px; }
.jtn-side-card__body { padding: 14px; }
.jtn-side-intro { color: var(--travel-color-muted); font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.jtn-side-services { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.jtn-side-service { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-sm); display: flex; flex-direction: column; min-width: 0; padding: 8px; }
.jtn-side-service__type { color: var(--travel-color-muted); font-size: 12px; min-height: 2.2em; }
.jtn-side-btn { align-items: center; border: 1px solid var(--travel-color-primary); border-radius: var(--travel-radius-sm); color: var(--travel-color-primary); display: flex; font-size: 13px; font-weight: 700; justify-content: center; line-height: 1.2; min-height: 44px; padding: 8px; text-align: center; text-decoration: none; }
.jtn-side-btn--primary { background: var(--travel-color-accent); border-color: var(--travel-color-accent); color: #fff; }
.jtn-side-service__best { color: var(--travel-color-muted); display: block; font-size: 12px; line-height: 1.35; margin-top: 6px; }
.jtn-side-service__best strong { color: var(--travel-color-text); }
.jtn-side-disclosure { color: var(--travel-color-muted); font-size: 12px; line-height: 1.45; margin: 12px 0 0; }
.jtn-side-list { list-style: none; margin: 0; padding: 0; }
.jtn-side-list li { border-bottom: 1px solid var(--travel-color-border); padding: 10px 0; }
.jtn-side-list a { font-size: 14px; text-decoration: none; }
.jtn-side-about__photo, .jtn-author-line__photo { border-radius: 50%; display: block; height: 72px; object-fit: cover; width: 72px; }
.jtn-author-line { display: flex; gap: 14px; }
.jtn-author-line__photo { flex: 0 0 auto; height: 56px; width: 56px; }
.jtn-side-about { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.jtn-side-about__links { font-size: 13px; margin: 0; }
@media (min-width: 960px) { .l-sidebar .jtn-side-card:first-child { position: sticky; top: 90px; } }

/* ---------- 12. Hub, Start Here and Plan pages ---------- */
.jtn-hub { color: var(--travel-color-text); line-height: 1.7; }
.jtn-intro { border-left: 3px solid var(--travel-color-primary); color: var(--travel-color-text); margin: 0 0 32px; padding: 6px 0 6px 16px; }
.jtn-intro__lead, .jtn-intro__note { margin: 0 0 8px; }
.jtn-intro__note { color: var(--travel-color-muted); font-size: 14px; }
.jtn-path { counter-reset: jtn; list-style: none; margin: 0; padding: 0; }
.jtn-path li { border-left: 3px solid var(--travel-color-sky); margin-left: 14px; padding: 0 0 28px 40px; position: relative; }
.jtn-path li:last-child { border-left-color: transparent; }
.jtn-path li::before { align-items: center; background: var(--travel-color-primary); border-radius: 50%; color: #fff; content: counter(jtn); counter-increment: jtn; display: flex; font-size: 13px; font-weight: 700; height: 28px; justify-content: center; left: -15.5px; position: absolute; top: 0; width: 28px; }
.jtn-path h2 { border: 0 !important; font-family: var(--travel-font-body) !important; font-size: 1.2rem; margin: 0 0 6px; padding: 2px 0 0; }
.jtn-path p { font-size: 15px; margin: 0 0 10px; }
.jtn-go { border: 1px solid var(--travel-color-primary); border-radius: var(--travel-radius-sm); color: var(--travel-color-primary); display: inline-flex; font-size: 14px; font-weight: 700; min-height: 44px; padding: 10px 14px; text-decoration: none; }
.jtn-go--primary { background: var(--travel-color-accent); border-color: var(--travel-color-accent); color: #fff; }
.jtn-tools { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); margin: 28px 0; padding: 20px; }
.jtn-tools h2 { border: 0 !important; font-size: 1.5rem; margin: 0 0 6px; padding: 0; }
.jtn-tools__copy, .jtn-tools__action { margin: 0 0 10px; }
.jtn-note, .jtn-research-footer { border-top: 1px solid var(--travel-color-border); color: var(--travel-color-muted); font-size: 14px; margin-top: 32px; padding-top: 16px; }

.fm-db { color: var(--travel-color-text); }
.fm-intro { border-left: 3px solid var(--travel-color-primary); margin-bottom: 24px; padding: 6px 0 6px 16px; }
.fm-intro__lead { margin: 0 0 8px; }.fm-intro__note { color: var(--travel-color-muted); font-size: 14px; margin: 0; }
.fm-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.fm-tools button { background: #fff; border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-sm); color: var(--travel-color-text); cursor: pointer; min-height: 44px; padding: 8px 14px; }
.fm-tools button[aria-pressed="true"] { background: var(--travel-color-primary); border-color: var(--travel-color-primary); color: #fff; font-weight: 700; }
.fm-group__title { font-size: 1.6rem; }.fm-lead { color: var(--travel-color-muted); font-size: 15px; }
.fm-card { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); display: inline-flex; flex-direction: column; margin: 0 1% 16px 0; padding: 16px; vertical-align: top; width: 48.5%; }
.post_content .fm-name { color: var(--travel-color-text); font-size: 1.05rem; margin: 0; }.fm-best { font-size: 14px; margin: 6px 0; }.fm-best strong { color: var(--travel-color-good); }.fm-strength { color: var(--travel-color-muted); font-size: 14px; line-height: 1.6; }
.fm-cta { margin: auto 0 0; }.fm-cta a { border: 1px solid var(--travel-color-primary); border-radius: var(--travel-radius-sm); color: var(--travel-color-primary); display: flex; font-size: 14px; font-weight: 700; justify-content: center; min-height: 44px; padding: 10px; text-align: center; text-decoration: none; }
.fm-note { border-top: 1px solid var(--travel-color-border); color: var(--travel-color-muted); font-size: 13px; margin-top: 32px; padding-top: 16px; }

/* ---------- 13. Home (design spec v2 §L) ---------- */
.jtn-home-page .p-articleHead, .jtn-home-page .c-pageTitle { display: none; }
.home .l-content.l-container, .jtn-home-page .l-content.l-container { padding-top: 8px; }
.home .p-postSlider { display: none; } /* empty post slider left 56px of blank above the headline; turn it off in the Customizer too */
.page .jtn-home { margin-top: -16px; }
.jtn-home section { border-top: 1px solid var(--travel-color-border); padding: 36px 0; }
.jtn-home section:first-child { border-top: 0; padding-top: 24px; }
.post_content .jtn-home h2, .jtn-home h2 { border-top: 0 !important; font-size: 1.5rem; font-weight: 500; margin: 0 0 16px; padding: 0; }
.jtn-kicker { color: var(--travel-color-muted); font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.jtn-home h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; margin: 0; max-width: 820px; }
.jtn-home-promise { font-size: 1.1rem; line-height: 1.55; margin: 12px 0 20px; max-width: 620px; }
.jtn-home-search { display: flex; gap: 8px; max-width: 620px; }
.jtn-home-search input { border: 1px solid var(--travel-color-primary); border-radius: var(--travel-radius-sm); flex: 1; font-size: 16px; min-height: 48px; min-width: 0; padding: 0 14px; }
.jtn-home-search button { background: var(--travel-color-primary); border: 0; border-radius: var(--travel-radius-sm); color: #fff; font-weight: 700; min-height: 48px; padding: 0 18px; }
.jtn-home-start { color: var(--travel-color-muted); font-size: 15px; margin: 16px 0 0; }
.jtn-dest-grid { display: grid; gap: 16px 12px; grid-template-columns: repeat(3, 1fr); }
.jtn-dest { border-radius: var(--travel-radius-md); color: var(--travel-color-text); display: block; overflow: hidden; text-decoration: none; }
.jtn-dest img, .jtn-dest__blank { aspect-ratio: 4 / 3; background: var(--travel-color-panel); border-radius: var(--travel-radius-md); display: block; height: auto; object-fit: cover; width: 100%; }
.jtn-dest strong { display: block; font-family: var(--travel-font-heading); font-size: 1.2rem; font-weight: 500; margin: 8px 0 0; }
.jtn-dest em { color: var(--travel-color-muted); display: block; font-size: 13px; font-style: normal; }
.jtn-dest__credit { color: var(--travel-color-muted); display: block; font-size: 11px; line-height: 1.3; margin-top: 2px; }
.jtn-dest__credit a { color: inherit; }
.jtn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jtn-chip { border: 1px solid var(--travel-color-primary); border-radius: var(--travel-radius-sm); color: var(--travel-color-primary); display: inline-flex; font-size: 14px; font-weight: 700; min-height: 44px; align-items: center; padding: 0 14px; text-decoration: none; }
.jtn-chip.is-soon { border-color: var(--travel-color-border); color: var(--travel-color-muted); font-weight: 500; }
.jtn-tools-list { list-style: none; margin: 0 0 12px; padding: 0; }
.jtn-tools-list li { border-top: 1px solid var(--travel-color-border); display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; }
.jtn-tools-list li:first-child { border-top: 0; }
.jtn-tools-list span { color: var(--travel-color-muted); }
.jtn-tools-list a { font-weight: 700; }
.jtn-home-season p { max-width: 620px; }
.jtn-home-latest > div { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.jtn-home-latest__card { border: 1px solid var(--travel-color-border); border-radius: var(--travel-radius-md); padding: 16px; text-decoration: none; }
.jtn-home-latest__card span, .jtn-home-latest__card em { color: var(--travel-color-muted); display: block; font-size: 13px; font-style: normal; }
.jtn-home-latest__card strong { color: var(--travel-color-text); display: block; font-family: var(--travel-font-heading); font-size: 1.2rem; font-weight: 500; margin: 6px 0; }

/* ---------- 13b. Category intro (Phase 6) ---------- */
.jtn-cat { margin: 0 0 28px; }
.jtn-cat__hero { margin: 0 0 16px; }
.jtn-cat__hero img { aspect-ratio: 16 / 10; border-radius: var(--travel-radius-lg); display: block; height: auto; object-fit: cover; width: 100%; }
.jtn-cat__hero figcaption, .jtn-cat__credit { color: var(--travel-color-muted); display: block; font-size: 12px; line-height: 1.4; margin-top: 6px; }
.jtn-cat__credit a { color: inherit; }
.jtn-cat__summary { font-size: 1.1rem; line-height: 1.55; margin: 0 0 16px; max-width: 620px; }
.jtn-cat__roles, .post_content .jtn-cat__roles, .p-termContent .jtn-cat__roles { list-style: none; margin: 0 0 16px; padding: 0; }
.jtn-cat__roles li { border-top: 1px solid var(--travel-color-border); display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 0; }
.jtn-cat__roles li:last-child { border-bottom: 1px solid var(--travel-color-border); }
.jtn-cat__roles span { color: var(--travel-color-muted); flex: 0 0 200px; }
.jtn-cat__roles a { font-weight: 700; }
.jtn-cat__roles em { color: var(--travel-color-muted); font-style: normal; }
.jtn-cat__tools { color: var(--travel-color-muted); font-size: 15px; margin: 0; }
.p-termContent .jtn-cat p { margin-bottom: 0; }

/* ---------- 14. Footer and mobile bar ---------- */
.l-footer { background: var(--travel-color-primary-dark); color: #fff; }.l-footer a { color: #fff; }.l-footer__foot { border-top-color: rgba(255,255,255,.18); }
.jtn-sticky { display: none; }

@media (max-width: 959px) {
  body { overflow-x: clip; }
  .l-sidebar { display: none !important; }
  body.jtn-has-sticky { padding-bottom: 68px; }
  .l-header__inner { min-height: 56px; }
  .c-pageTitle, .p-articleHead__title { font-size: 2rem; line-height: 1.12; }
  .post_content { font-size: 17px; line-height: 1.7; max-width: 100%; }
  .post_content h2 { font-size: 1.6rem; margin-top: 48px; }
  .post_content h3 { font-size: 1.25rem; }
  .jtn-compare-2col { grid-template-columns: 1fr; }
  .fm-tw__hint { display: block; }.fm-card { display: flex; margin-right: 0; width: 100%; }
  .fm-tw__body { scroll-snap-type: x proximity; }
  .fm-tw__body .fm-tbl { animation: jtn-table-nudge 1.6s ease-in-out .6s 1 both; } /* a short sideways nudge shows the table scrolls */
  @keyframes jtn-table-nudge { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-28px); } 70% { transform: translateX(0); } }
  .jtn-cat__roles span { flex-basis: 100%; }
  .top-picks { grid-template-columns: 1fr; }
  .jtn-home section { padding: 28px 0; }.jtn-home h1 { font-size: 2rem; }.jtn-dest-grid { grid-template-columns: 1fr 1fr; }.jtn-home-latest > div { grid-template-columns: 1fr; }
  .jtn-path { max-width: 100%; }.jtn-path li { box-sizing: border-box; margin-left: 12px; padding-left: 32px; width: calc(100% - 12px); }.jtn-path h2, .jtn-path p { max-width: 100%; overflow-wrap: anywhere; }.jtn-go { max-width: 100%; }
  .jtn-primary-btn, .auto-cta-btn:not(.cta-btn--map) > a, .jtn-hotel-btn > a, .booking-card__cta { width: 100%; }
  .jtn-sticky { background: #fff; border-top: 1px solid var(--travel-color-border); bottom: 0; display: block; left: 0; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 9000; }
  .jtn-sticky a { align-items: center; background: transparent; color: var(--travel-color-text); display: flex; font-size: 14px; font-weight: 700; gap: 10px; justify-content: space-between; min-height: 52px; text-decoration: none; }
  .jtn-sticky.is-hidden { display: none; }
  .jtn-sticky__star { display: none; }.jtn-sticky__cta { background: var(--travel-color-accent); border-radius: var(--travel-radius-sm); color: #fff; flex: 0 0 auto; padding: 8px 12px; }
}
@media (min-width: 430px) and (max-width: 959px) { .l-content { padding-left: 20px; padding-right: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* --- Cookie consent bar (2026-10-02). Sits above the sticky bar, dismissed in one tap. --- */
.jtn-consent{position:fixed;left:0;right:0;bottom:0;z-index:9500;display:flex;flex-wrap:wrap;
  align-items:center;gap:.6em 1em;padding:.9em 1.1em;background:var(--travel-ink,#1f3a5f);
  color:#fff;font-size:.86rem;line-height:1.5;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
.jtn-consent[hidden]{display:none}
.jtn-consent__text{margin:0;flex:1 1 18em}
.jtn-consent__text a{color:#fff;text-decoration:underline}
.jtn-consent__buttons{margin:0;display:flex;gap:.6em;flex:0 0 auto}
.jtn-consent__btn{appearance:none;border:1px solid rgba(255,255,255,.55);background:transparent;
  color:#fff;border-radius:6px;padding:.55em 1.1em;min-height:44px;font:inherit;font-weight:600;
  cursor:pointer}
.jtn-consent__btn--yes{background:#fff;color:var(--travel-ink,#1f3a5f);border-color:#fff}
.jtn-consent__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* While the consent bar is up, lift the sticky CTA so the two do not overlap. */
.jtn-consent:not([hidden]) ~ .jtn-sticky{bottom:5.6rem}
@media (max-width:600px){
  .jtn-consent{font-size:.8rem;padding:.8em .9em}
  .jtn-consent__buttons{flex:1 1 100%;justify-content:flex-end}
}

/* --- 2026-10-04: category intro inside SWELL's term box ---------------------------------
   SWELL prints the category description inside <p class="p-termHead__desc"> and switches
   .p-termHead to a two-column flex row on wide screens (thumbnail | text). Our intro starts
   with a <div>, so the browser closes that <p> early: an empty <p> took the left column and
   the intro was squeezed into the right one. Show the intro as one full-width block. */
.p-termHead:has(.jtn-cat) { border: 0; display: block; margin-top: 1.5rem; }
.p-termHead > p:empty { display: none; }
.p-termHead .jtn-cat { width: 100%; }

/* --- 2026-10-04: home destination cards. The link wraps only the photo and the city name, so
   the photo credit (which has its own links) sits outside it. */
.jtn-dest__link { color: inherit; display: block; text-decoration: none; }
.jtn-dest__link:hover strong { text-decoration: underline; }