/*
  Japan Pro Journal — block and template styles.

  Ported from the prototype (WordPress/prototype/hub.css and article.css).
  Every rule sits under .jpj so nothing leaks into ordinary blog posts, and so
  the theme's own .btn / .badge (fixed 40px height, its own letter-spacing)
  cannot reshape ours. Header, footer, fonts and the page reset are the
  theme's.
*/

/* ── Tokens ─────────────────────────────────────────────────────────────── */

/* The theme defines the same values; repeated so the blocks still look right
   under another theme. */
.jpj {
  --primary:       #ca3617;
  --primary-dark:  #b02e13;
  --primary-light: #ffe9e4;
  --dark:          #121212;
  --muted:         #747474;
  --border:        #d9d9d9;
  --surface:       #f2f2f2;
  --white:         #ffffff;

  --max-width:   1440px;
  --px:          50px;
  /* Headings in Acumin Pro, as the rest of the site (client review, 12 Oct);
     the token keeps its name so every heading rule follows it. */
  --serif:       'Acumin Pro', system-ui, -apple-system, sans-serif;
  --sans:        'Acumin Pro', system-ui, -apple-system, sans-serif;
  --radius:      12px;
  --radius-sm:   8px;
  --radius-pill: 999px;

  font-family: var(--sans);
  color: var(--dark);
  line-height: 1.6;
}

.jpj *, .jpj *::before, .jpj *::after { box-sizing: border-box; }
.jpj :where(h1, h2, h3, h4, p, dl, dd, figure, ul, ol) { margin: 0; }
.jpj :where(h1, h2, h3, h4) { font-family: var(--serif); font-weight: 700; line-height: 1.15; color: var(--dark); }
.jpj img { max-width: 100%; height: auto; display: block; }

/* Photos as on the Japan Pro site. Loading (images.js): the grey shimmer of
   its .skeleton, then a 0.3s fade-in. Hover (its listing gallery): the photo
   darkens by 15% over 0.2s — no zoom. */
@keyframes jpj-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes jpj-img-in { from { opacity: 0; } }
.jpj img.jpj-img-loading {
  background: linear-gradient(90deg, #ebebeb 25%, #d6d6d6 50%, #ebebeb 75%);
  background-size: 200% 100%; animation: jpj-shimmer 1.6s ease-in-out infinite;
  color: transparent; /* no alt text over the shimmer */
}
.jpj img.jpj-img-in { animation: jpj-img-in .3s cubic-bezier(.4, 0, .2, 1); }
.jpj :is(a, .card, .rail-card) img { transition: filter .2s cubic-bezier(.4, 0, .2, 1); }
.jpj :is(a, .card, .rail-card):hover img { filter: brightness(.85); }
@media (prefers-reduced-motion: reduce) {
  .jpj img.jpj-img-loading, .jpj img.jpj-img-in { animation: none; }
}
.jpj a { color: inherit; text-decoration: none; }

.jpj .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.jpj .wrap { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--px); }

/* Blocks follow one another down the article; 32px above and below each
   section keeps the prototype's 64px between them. */
.jpj .section { padding-block: 32px; }

.jpj .section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
}
.jpj .section-head h2 { font-size: clamp(26px, 3vw, 34px); }
.jpj .section-head p { color: var(--muted); font-size: 15px; margin-top: 6px; }

.jpj .more {
  color: var(--primary); font-weight: 700; font-size: 15px;
  white-space: nowrap; border-bottom: 1px solid transparent;
}
.jpj .more:hover { border-bottom-color: var(--primary); }

/* ── Buttons, labels ────────────────────────────────────────────────────── */

/* Height is never fixed: a translated label must be free to grow. */
.jpj .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; padding: 15px 20px; border: 0; border-radius: var(--radius-pill);
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: 0; text-transform: none; white-space: normal; text-align: center;
  transition: background .2s, border-color .2s, color .2s;
}
.jpj .btn-primary { background: var(--primary); color: var(--white); }
.jpj .btn-primary:hover { background: var(--primary-dark); }
.jpj .btn-light { background: var(--white); color: var(--dark); font-size: 13px; padding: 10px 16px; }
.jpj .btn-light:hover { background: var(--surface); }

.jpj .kicker {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--primary-dark); color: var(--white);
  padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.jpj .kicker-plain { background: none; color: var(--primary); padding: 0; margin-bottom: 8px; }

.jpj .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.jpj .badge {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--primary-light); color: var(--primary);
}
.jpj .badge-quiet { background: var(--surface); color: var(--muted); }

.jpj .pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--muted); white-space: nowrap;
}

/* ── Article head ───────────────────────────────────────────────────────── */

.jpj .article-head { padding-block: 40px 0; }
.jpj .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.jpj .breadcrumb a:hover { color: var(--primary); }
.jpj .breadcrumb span[aria-hidden] { color: var(--border); }

.jpj .article-title { font-size: clamp(30px, 4.2vw, 50px); max-width: 34ch; }

.jpj .byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 20px; padding-block: 18px; border-block: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
}
.jpj .byline strong { color: var(--dark); font-weight: 700; }
.jpj .byline .verified { display: inline-flex; align-items: center; gap: 6px; }
.jpj .byline .verified svg { width: 15px; height: 15px; color: var(--primary); }

.jpj .article-hero { margin-top: 28px; }
.jpj .article-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
.jpj .article-hero figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* ── Body copy ──────────────────────────────────────────────────────────── */

/* The author's own paragraphs, headings and lists sit between the blocks,
   left-aligned with the page edge and held to a reading width. */
.jpj-content { padding-top: 32px; }
.jpj-content > :not(.jpj-block) {
  max-width: 780px;
  margin-left: max(var(--px), calc((100% - var(--max-width)) / 2 + var(--px)));
  margin-right: var(--px);
}
.jpj-content > :not(.jpj-block) + :not(.jpj-block) { margin-top: 20px; }
.jpj-content > p { font-size: 17px; line-height: 1.75; }
.jpj-content > h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 32px; }
.jpj-content > h3 { font-size: 21px; margin-top: 28px; }
/* Links in written text only — paragraphs and lists typed into the post, not
   the lists the blocks draw (Festivals, the ticker…), which stay as designed. */
.jpj-content > p a, .jpj-content > :is(ul, ol) li a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.jpj-content > :is(ul, ol) { padding-left: 22px; display: grid; gap: 8px; }
.jpj-content li { font-size: 17px; line-height: 1.7; }
.jpj-content > blockquote {
  border-left: 3px solid var(--primary); padding: 4px 0 4px 20px;
  font-family: var(--serif); font-size: 20px; line-height: 1.5;
}

/* ── Key figures ────────────────────────────────────────────────────────── */

.jpj-facts { margin-block: 32px; }
.jpj .facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.jpj .fact { background: var(--white); padding: 20px 22px; }
.jpj .fact .value { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.1; }
.jpj .fact .label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── Month accordion ────────────────────────────────────────────────────── */

.jpj .months { display: grid; gap: 10px; }
.jpj .month { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.jpj .month[open] { border-color: var(--primary); }
.jpj .month summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  display: grid; grid-template-columns: 148px 96px 1fr 24px; gap: 16px; align-items: center;
}
.jpj .month summary::-webkit-details-marker { display: none; }
.jpj .month summary:hover, .jpj .month[open] summary { background: var(--surface); }
.jpj .month .name { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.jpj .month .events { font-size: 13px; color: var(--primary); font-weight: 700; }
.jpj .month .note { font-size: 14px; color: var(--muted); }
.jpj .month .chev { justify-self: end; color: var(--muted); transition: transform .2s; }
.jpj .month[open] .chev { transform: rotate(180deg); }
.jpj .month .empty { padding: 18px 22px; font-size: 14px; color: var(--muted); }

/* ── Schedule table ─────────────────────────────────────────────────────── */

.jpj .table-scroll { overflow-x: auto; }
.jpj table.schedule { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; margin: 0; }
.jpj table.schedule th, .jpj table.schedule td { padding: 13px 16px; text-align: left; border: 0; border-top: 1px solid var(--border); }
.jpj table.schedule thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-top: none; background: var(--white);
}
.jpj table.schedule tbody tr:hover { background: var(--primary-light); }
.jpj table.schedule td a:not(.book):hover { color: var(--primary); }
.jpj table.schedule .date { white-space: nowrap; font-weight: 700; }
.jpj table.schedule .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jpj table.schedule .book {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary);
  border: 1px solid var(--primary); border-radius: var(--radius-pill); padding: 6px 14px; white-space: nowrap;
}
.jpj table.schedule .book:hover { background: var(--primary); color: var(--white); }
.jpj table.schedule tr.is-cancelled td { color: var(--muted); text-decoration: line-through; }
.jpj table.schedule tr.is-cancelled .pill { text-decoration: none; }

/* ── Map ────────────────────────────────────────────────────────────────── */

.jpj .mapcard { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.jpj .mapcard-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; background: var(--primary);
}
.jpj .mapcard-head h2 { color: var(--white); font-size: 21px; margin-right: auto; }
.jpj .mapcard-body { display: block; width: 100%; height: 420px; background: var(--surface); z-index: 0; }
.jpj .mapcard-body .leaflet-popup-content a { color: var(--primary); font-weight: 700; }

/* ── The selected month, in full ────────────────────────────────────────── */

.jpj .month-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.jpj .month-head h2 { font-size: clamp(26px, 3vw, 32px); }
.jpj .month-head .change {
  margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary); white-space: nowrap;
}
.jpj .month-intro { font-size: 15px; color: var(--muted); margin: 10px 0 0; max-width: 90ch; }
.jpj .month-intro:empty { display: none; }

.jpj .entries { display: grid; gap: 0; margin-top: 24px; }
.jpj .entries[hidden] { display: none; }

/* Copy on the left, everything bookable on the right. */
.jpj .entry {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start;
  padding: 28px 0; border-top: 1px solid var(--border); scroll-margin-top: 24px;
}
.jpj .entry.is-cancelled .entry-title h3 { color: var(--muted); }
.jpj .entry-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.jpj .entry-title h3 { font-size: clamp(22px, 2.6vw, 28px); }
.jpj .entry-main > p { font-size: 16px; line-height: 1.6; margin: 12px 0 16px; }
.jpj .entry-main > .entry-title + .fact-list { margin-top: 14px; }

.jpj .fact-list { display: grid; grid-template-columns: 150px 1fr; gap: 0; border-top: 1px solid var(--border); }
.jpj .fact-list dt, .jpj .fact-list dd { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; margin: 0; }
.jpj .fact-list dt { color: var(--muted); }
.jpj .fact-list dd { font-weight: 700; }
.jpj .fact-list a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.jpj .nearby { border-left: 3px solid var(--primary); padding-left: 16px; margin-top: 18px; }
.jpj .nearby p, .jpj .tips p { font-size: 15px; line-height: 1.5; }
.jpj .tips { background: var(--surface); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 14px; }

/* The photo, the booking button and the extras stack as one card. */
.jpj .entry-side > .entry-photo {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.jpj .entry-side > :first-child:not(.entry-photo) { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.jpj .entry-side > :last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

.jpj .book-block {
  display: flex; align-items: center; gap: 14px;
  background: var(--primary); color: var(--white); padding: 16px 18px;
  transition: background .2s ease;
}
.jpj .book-block:hover { background: var(--primary-dark); }
.jpj .book-block > span:first-child { flex: 1; }
.jpj .book-block strong { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.jpj .book-block .sub { display: block; font-size: 13px; margin-top: 3px; }
.jpj .book-block .fine {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-top: 6px; opacity: .85;
}
.jpj .book-block .arrow { font-size: 24px; font-weight: 700; }
/* The organiser's own site gets the same red block as a Japan Pro booking
   (Arun, 11 Oct): the label ("Official site") says where it goes. */

.jpj .around { border: 1px solid var(--border); border-top: 0; overflow: hidden; }
.jpj .around-head {
  padding: 10px 14px; background: var(--dark); color: var(--white);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.jpj .around a { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--border); }
.jpj .around a:hover { background: var(--primary-light); }
.jpj .around .price, .jpj .booknow .price { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.jpj .around .kind { flex: 0 0 74px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.jpj .around .title { flex: 1; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.jpj .around .go { color: var(--primary); font-weight: 700; }
/* The header rail and the calendar's month rail take turns in the same row
   (calendar.js); the theme's `display: flex` would otherwise beat [hidden]. */
.section-nav ul[hidden] { display: none; }
/* A bundle (seat + stay + dinner) stands out from the single listings, as in the design. */
.jpj .around .bundle { background: var(--primary-light); }
.jpj .around .bundle .price { color: var(--primary); }

/* ── Know before you go ─────────────────────────────────────────────────── */

.jpj-tips { margin-block: 32px; }
.jpj .know { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.jpj .know-head {
  padding: 14px 20px; background: var(--dark); color: var(--white);
  font-family: var(--serif); font-size: 19px; font-weight: 700;
}
.jpj .know-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.jpj .know-grid > div { background: var(--white); padding: 18px 20px; }
.jpj .know-grid p:last-child { font-size: 14px; line-height: 1.5; }

/* ── AI panel ───────────────────────────────────────────────────────────── */

/* One centred column: eyebrow, heading, a single composer that holds the
   voice and image tools, then suggestions. */
.jpj .ai {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 56px 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.jpj .ai-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary-dark); background: var(--primary-light);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.jpj .ai-eyebrow svg { width: 14px; height: 14px; }
.jpj .ai h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 16px; }
.jpj .ai > p { color: var(--muted); margin: 12px auto 0; max-width: 56ch; }
.jpj .ai-form {
  width: 100%; max-width: 780px; margin-top: 32px; text-align: left;
  display: flex; flex-direction: column; gap: 14px; background: var(--white);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 20px 16px 16px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.jpj .ai-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light), 0 10px 30px rgba(0, 0, 0, .06); }
.jpj .ai-form input { width: 100%; border: none; outline: none; font: inherit; font-size: 18px; color: var(--dark); background: none; padding: 4px 0; }
.jpj .ai-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jpj .ai-tools .btn-primary { margin-left: auto; padding: 14px 26px; }
.jpj .ai-tools .btn-primary svg { width: 18px; height: 18px; }
.jpj .ai-mode {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1; color: var(--primary-dark);
  background: var(--primary-light); border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 12px 18px; transition: background .2s, border-color .2s, color .2s;
}
.jpj .ai-mode:hover { background: var(--primary); color: var(--white); }
.jpj .ai-mode svg { width: 18px; height: 18px; }
.jpj .ai-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; max-width: 780px; }
.jpj .ai-chips span, .jpj .ai-chips button {
  font: inherit; font-size: 13px; font-weight: 600; line-height: normal; color: var(--primary);
  border: 1px solid var(--primary); border-radius: var(--radius-pill); padding: 7px 14px;
  background: none; cursor: pointer; transition: background .2s;
}
.jpj .ai-chips span:hover, .jpj .ai-chips button:hover { background: var(--primary-light); }
.jpj .ai-chips .ai-chips-label,
.jpj .ai-chips .ai-chips-label:hover { border: 0; padding-inline: 4px; color: var(--muted); cursor: default; background: none; }

/* ── Closing call to action ─────────────────────────────────────────────── */

.jpj-cta { margin-block: 32px; }
.jpj .cta {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 44px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.jpj .cta h2 { font-size: clamp(24px, 3vw, 32px); }
.jpj .cta p { color: var(--muted); margin-top: 10px; max-width: 52ch; }

/* ── Rails ──────────────────────────────────────────────────────────────── */

/* Cards are at most a quarter of the row, so a row with only two or three
   stories keeps normal-sized cards instead of stretching them across it. */
.jpj .rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, calc((100% - 60px) / 4));
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: none;
}
.jpj .rail::-webkit-scrollbar { display: none; }
.jpj .rail > * { scroll-snap-align: start; }
.jpj .rail-card figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.jpj .rail-card img { width: 100%; height: 100%; object-fit: cover; }
.jpj .rail-card h3 { font-size: 17px; margin-top: 12px; }
.jpj .rail-card:hover h3 { color: var(--primary); }
.jpj .rail-card .meta { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── Location guide: orientation ────────────────────────────────────────── */

.jpj-orientation { margin-block: 32px; }
.jpj .orient { display: grid; grid-template-columns: 150px 1fr; gap: 0; border-top: 1px solid var(--border); }
.jpj .orient dt, .jpj .orient dd { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px; margin: 0; }
.jpj .orient dt {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-top: 16px;
}
.jpj .orient dd { color: var(--muted); }
.jpj .orient dd strong { color: var(--dark); }

/* ── Location guide: index, map, places ─────────────────────────────────── */

.jpj .toc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 24px;
}
.jpj .toc > div { background: var(--white); padding: 16px 18px; }
.jpj .toc-head { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.jpj .toc a { display: block; font-size: 14px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.jpj .toc a:hover { color: var(--primary); }

.jpj .mapcard-note { font-size: 13px; color: rgba(255,255,255,.85); }

/* Numbered pins, matching the index and the entries. */
.jpj .jpj-pin span {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--primary); color: var(--white); border: 2px solid var(--white);
  font: 700 12px/1 var(--sans); box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.jpj .places { display: grid; gap: 0; }
.jpj .place {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--border); scroll-margin-top: 24px;
}
.jpj .place > img, .jpj .place-photo-empty {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
}
.jpj .place-photo-empty { background: var(--surface); }
.jpj .place-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.jpj .place-title h3 { font-size: clamp(20px, 2.4vw, 25px); }
.jpj .place-title .ja { font-size: 15px; color: var(--muted); }
.jpj .place-sum { font-size: 14px; font-weight: 700; color: var(--primary); margin-top: 5px; }
.jpj .place-body > p:not(.place-sum) { font-size: 16px; line-height: 1.55; margin: 12px 0 0; }
.jpj .place .fact-list { margin-top: 16px; }

/* One bookable line per place, in the light brand wash. */
.jpj .booknow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid var(--primary-light);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 14px;
  transition: border-color .2s ease;
}
.jpj .booknow:hover { border-color: var(--primary); }
.jpj .booknow .kind { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.jpj .booknow .title { flex: 1; font-size: 14px; font-weight: 700; }
/* Not bookable here — the business's own site; never the brand-pink CTA. */
.jpj .booknow.is-external { background: var(--white); border-color: var(--border); }
.jpj .booknow.is-external:hover { border-color: var(--dark); }
.jpj .booknow.is-external .kind { color: var(--muted); }

/* ── Location guide: routes ─────────────────────────────────────────────── */

.jpj .routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jpj .route { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.jpj .route-head { padding: 18px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.jpj .route-head h3 { font-size: 20px; }
.jpj .route-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.jpj .steps { list-style: none; padding: 6px 20px 0; margin: 0; }
.jpj .steps li { padding: 10px 0; }
.jpj .steps li + li { border-top: 1px solid var(--border); }
.jpj .steps a, .jpj .steps .stop { display: block; font-size: 14.5px; line-height: 1.4; }
.jpj .steps a:hover { color: var(--primary); }
/* The walking time belongs to the gap between stops, not to a stop. */
.jpj .steps .walk { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.jpj .route-book { margin: auto 20px 20px; }
.jpj .route .steps { margin-bottom: 16px; }

/* ── Location guide: related guides, about note ─────────────────────────── */

.jpj .stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jpj .station {
  display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  transition: border-color .2s ease, transform .2s ease;
}
.jpj .station:hover { border-color: var(--primary); transform: translateY(-2px); }
.jpj .station h3 { font-size: 19px; margin-top: 2px; }
.jpj .station .meta { font-size: 13px; color: var(--muted); margin-top: 10px; }

.jpj-about { margin-block: 32px; }
.jpj .about-note { border-left: 3px solid var(--border); padding-left: 20px; max-width: 780px; }
.jpj .about-note p + p { margin-top: 10px; }
.jpj .about-note p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.jpj .about-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* ── Onsen directory ────────────────────────────────────────────────────── */

.jpj .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; }
.jpj .filter-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.jpj .chip {
  font-size: 13px; font-weight: 700; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.jpj .chip:hover { border-color: var(--primary); color: var(--primary); }
.jpj .chip.is-on { background: var(--dark); border-color: var(--dark); color: var(--white); }

.jpj .prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); gap: 1px; background: var(--border); }
.jpj .pref { display: block; background: var(--white); padding: 15px 18px; transition: background .2s ease; }
.jpj .pref:hover, .jpj .pref.is-on { background: var(--primary-light); }
.jpj .pref-name { display: block; font-size: 16px; font-weight: 700; }
.jpj .pref-name .ja { font-weight: 400; font-size: 13.5px; color: var(--muted); margin-left: 6px; }
.jpj .pref-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

.jpj .listbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 14px; }
.jpj .input {
  flex: 1 1 340px; min-width: 0; font: inherit; font-size: 14px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--white); color: var(--dark);
}
.jpj .input:focus { outline: none; border-color: var(--primary); }
.jpj .listbar .count { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* Every town by name, so the page answers "is mine in here?" first. */
.jpj .onames { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 24px; }
.jpj .oname { font-size: 13px; font-weight: 700; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.jpj a.oname:hover { border-color: var(--primary); color: var(--primary); }
.jpj .oname.is-plain { font-weight: 400; color: var(--muted); }

.jpj .towns { display: grid; gap: 18px; }
.jpj .town {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 24px;
}
.jpj .town[hidden] { display: none; }
.jpj .town-main { padding: 20px 24px 22px; border-right: 1px solid var(--border); }
.jpj .town-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.jpj .town-title h3 { font-size: clamp(20px, 2.4vw, 25px); }
.jpj .town-title .ja { font-size: 15px; color: var(--muted); }
.jpj .town-main > p { font-size: 15.5px; line-height: 1.55; margin: 10px 0 14px; }

.jpj .town-side { display: flex; flex-direction: column; }
.jpj .town-side > img { width: 100%; height: 175px; object-fit: cover; }
.jpj .town-side .around { border: 0; border-radius: 0; }
.jpj .town-side .book-block { border-radius: 0; }
.jpj .town-links { display: flex; margin-top: auto; border-top: 1px solid var(--border); }
.jpj .town-links a {
  flex: 1; padding: 11px 14px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.jpj .town-links a + a { border-left: 1px solid var(--border); }
.jpj .town-links a:hover { background: var(--primary-light); color: var(--primary); }

.jpj .listfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.jpj .listfoot p { font-size: 14px; color: var(--muted); margin-right: auto; }

/* ── Homepage ───────────────────────────────────────────────────────────── */

/* The homepage starts with the ticker straight under the header. */
.jpj-page .jpj-content { padding-top: 0; }
.jpj .section-head h2 .badge { vertical-align: middle; margin-left: 10px; }
.jpj .no-photo { display: block; width: 100%; height: 100%; min-height: 72px; background: var(--surface); }
/* On the grey band the placeholder would vanish; give it the page white. */
.jpj .band .no-photo, .jpj .band figure { background: var(--white); }

.jpj .band { background: var(--surface); padding-block: 64px; margin-block: 32px; }
.jpj-block:first-child .band { margin-top: 0; }

/* On now */
.jpj .ticker { background: var(--primary-light); color: var(--dark); border-bottom: 1px solid var(--border); }
.jpj .ticker .wrap { display: flex; align-items: stretch; gap: 0; }
.jpj .ticker .label {
  align-self: center; margin-right: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); background: var(--primary-dark); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* Phones only (below): "live" as a red dot with a ring that keeps pulsing out
   of it, like a recording light — no word, so the headlines have the room. */
.jpj .ticker .live-dot {
  display: none; position: relative; flex-shrink: 0; align-self: center; width: 10px; height: 10px; margin-right: 14px;
  border-radius: 50%; background: var(--primary);
}
.jpj .ticker .live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--primary);
  animation: jpj-live 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes jpj-live { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jpj .ticker .live-dot::after { animation: none; } }
/* The moving strip. The track holds the headlines twice; sliding it left by
   half its width (one copy) and repeating gives an endless loop. It stops
   while the reader points at it or tabs into it, and stays still for anyone
   who has asked their device for less motion. */
.jpj .ticker-viewport {
  flex: 1 1 0; min-width: 0; overflow: hidden; margin-right: 20px;
  /* Headlines fade in and out at the edges rather than being cut. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.jpj .ticker-track { display: flex; width: max-content; animation: jpj-ticker var(--ticker-duration, 30s) linear infinite; }
.jpj .ticker-viewport:hover .ticker-track,
.jpj .ticker-viewport:focus-within .ticker-track { animation-play-state: paused; }
@keyframes jpj-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.jpj .ticker ul { display: flex; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.jpj .ticker li { font-size: 14px; font-weight: 700; white-space: nowrap; padding: 12px 22px; border-left: 1px solid rgba(202,54,23,.25); }
@media (prefers-reduced-motion: reduce) {
  .jpj .ticker-track { animation: none; }
  .jpj .ticker-viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .jpj .ticker-track > ul[aria-hidden] { display: none; }
}
/* Every headline in black — no red "latest" (Arun, 11 Oct); red on hover. */
.jpj .ticker li { color: var(--dark); }
.jpj .ticker li a:hover { color: var(--primary); }
/* Pinned to the right end of the strip, whatever the headlines' length. */
.jpj .ticker .ticker-book {
  flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  /* 10.5px + 15px text + 10.5px = 36px, the header's Ask Japan Pro AI height. */
  margin-left: auto; padding: 10.5px 22px; border-radius: var(--radius-pill);
  background: var(--dark); color: var(--white);
  font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background .2s;
}
.jpj .ticker .ticker-book:hover { background: var(--primary); }

/* Lead story */
.jpj .hero { padding-block: 44px 32px; }
.jpj .hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; }
.jpj .feature { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 460px; display: flex; background: var(--dark); }
.jpj .feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jpj .feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,.05) 35%, rgba(18,18,18,.82) 100%); }
.jpj .feature-body { position: relative; z-index: 1; margin-top: auto; padding: 32px; color: var(--white); }
/* Smaller than before (was up to 44px) so the title sits at the foot of the
   picture instead of covering it (client review 14 Oct). */
.jpj .feature-body h1 { font-size: clamp(24px, 2.3vw, 32px); color: var(--white); max-width: 22ch; }
.jpj .feature:hover h1 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.jpj .feature-body p { margin-top: 12px; color: rgba(255,255,255,.86); max-width: 52ch; }
.jpj .feature-body .btn { margin-top: 20px; }
.jpj .side-stack { display: grid; grid-template-rows: repeat(var(--rows, 4), 1fr); gap: 20px; }
.jpj .side-card { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: center; }
.jpj .side-card > img, .jpj .side-card > .no-photo { width: 116px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); }
.jpj .side-card h3 { font-size: 18px; }
.jpj .side-card:hover h3 { color: var(--primary); }
.jpj .side-card .meta { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Browse every section */
.jpj .sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.jpj .sec {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 13px;
  padding: 15px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.jpj .sec:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); }
.jpj .sec svg { width: 22px; height: 22px; display: block; fill: none; stroke: var(--primary); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.jpj .sec .lbl { font-size: 15px; font-weight: 700; line-height: 1.2; }
.jpj .sec .n { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.jpj .sec:hover .n { color: var(--primary); }

/* Story cards */
.jpj .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.jpj .card figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--surface); }
.jpj .card img { width: 100%; height: 100%; object-fit: cover; }
.jpj .card h3 { font-size: 20px; margin-top: 14px; }
.jpj .card:hover h3 { color: var(--primary); }
.jpj .card p:not(.eyebrow) { color: var(--muted); font-size: 15px; margin-top: 8px; }
.jpj .eyebrow {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary);
}
.jpj .eyebrow .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.jpj .eyebrow .read { color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Numbered picks */
.jpj .picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.jpj .pick {
  display: grid; grid-template-columns: 144px 1fr; gap: 20px; align-items: center;
  padding: 16px 14px; margin-inline: -14px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border);
  transition: background .2s ease;
}
.jpj .pick:hover { background: var(--surface); }
/* The photo, 4:3, with its rank on the bottom-right corner over a dark fade. */
.jpj .pick-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); }
.jpj .pick-media img, .jpj .pick-media .no-photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.jpj .pick-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);
}
.jpj .pick .num {
  position: absolute; right: 10px; bottom: 7px; z-index: 1;
  font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.jpj .pick h3 { font-size: 17px; }
.jpj .pick:hover h3 { color: var(--primary); }
.jpj .pick .meta { font-size: 13px; color: var(--muted); margin-top: 5px; }

/* Tiles (Trending) */
.jpj .trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jpj .book-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--white); }
.jpj .book-card figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.jpj .book-card img { width: 100%; height: 100%; object-fit: cover; }
.jpj .book-card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jpj .tag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-light); padding: 4px 10px; border-radius: var(--radius-pill);
}
.jpj .book-card h3 { font-size: 17px; }
.jpj .book-card:hover h3 { color: var(--primary); }
.jpj .book-card .meta { margin-top: auto; font-size: 13px; color: var(--muted); }

/* Category feature (Festivals) */
.jpj .fest { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: stretch; }
.jpj .fest-feature { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.jpj .fest-feature figure { flex: 1; min-height: 260px; overflow: hidden; background: var(--surface); }
.jpj .fest-feature img { width: 100%; height: 100%; object-fit: cover; }
.jpj .fest-body { padding: 24px 28px 28px; }
.jpj .fest-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jpj .fest-tags span { font-size: 13px; font-weight: 600; color: var(--dark); padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.jpj .fest-tags span.is-on { color: var(--primary); border-color: var(--primary); }
.jpj .fest-body h3 { font-size: clamp(24px, 2.6vw, 34px); }
.jpj .fest-feature:hover h3 { color: var(--primary); }
.jpj .fest-body p { margin-top: 10px; color: var(--muted); font-size: 16px; max-width: 60ch; }
/* Each headline takes its own height and the list sits at the top beside the
   big card — three headlines stay compact, eight reach about the card's height. */
.jpj .fest-list {
  list-style: none; margin: 0; padding: 0; display: grid; align-self: start;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.jpj .fest-list li + li { border-top: 1px solid var(--border); }
.jpj .fest-list a { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; padding: 18px 22px; transition: background .2s ease; }
.jpj .fest-list a:hover { background: var(--primary-light); }
.jpj .fest-list .region { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.jpj .fest-list h3 { font-size: 16px; line-height: 1.3; }
.jpj .fest-list a:hover h3 { color: var(--primary); }

/* Areas, Stay, Seasons, Tags, Promos */
.jpj .pill-links { display: flex; flex-wrap: wrap; gap: 8px; }
.jpj .pill-links a {
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--primary);
  border: 1px solid var(--primary); border-radius: var(--radius-pill); padding: 8px 14px; white-space: nowrap; transition: background .2s;
}
.jpj .pill-links a[href]:hover { background: var(--primary-light); }
.jpj .area-rail { grid-auto-columns: minmax(290px, calc((100% - 60px) / 4)); }
.jpj .area-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.jpj .area-card h3 { font-size: 24px; }
.jpj .area-card .n { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0 18px; }

.jpj .stay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jpj .stay-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; transition: background .2s, border-color .2s;
}
.jpj a.stay-card:hover { background: var(--primary-light); border-color: var(--primary); }
.jpj .stay-card h3 { font-size: 22px; }
.jpj a.stay-card:hover h3 { color: var(--primary); }
.jpj .stay-card p { color: var(--muted); font-size: 15px; margin-top: 10px; }

.jpj .seasons-note { color: var(--muted); font-size: 14px; max-width: 28ch; text-align: right; flex-shrink: 0; }
.jpj .season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.jpj .season-card { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color .2s; }
.jpj a.season-card:hover { border-color: var(--primary); }
.jpj a.season-card:hover h3 { color: var(--primary); }
.jpj .season-card h3 { font-size: 22px; }
.jpj .season-card p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.jpj .season-card .n { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 14px; color: var(--primary); }

.jpj .tags-title { font-size: clamp(26px, 3vw, 34px); margin-bottom: 28px; }
.jpj .tag-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.jpj .tag-group h3 {
  font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--dark);
}

.jpj .promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Promo panels, as the guest landing page's tiles: the photo fills the
   panel, a dark chip at the top left, a warm dark glass box at the foot
   with the title, one line and a white button (red on hover). */
.jpj .promo-tile {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: #2a2a2a; color: var(--white);
}
.jpj .promo-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jpj a.promo-tile:hover > img { transform: scale(1.04); }
.jpj .promo-chip {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center;
  padding: 7px 12px; border-radius: 999px; background: rgba(12, 12, 12, .5); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
}
.jpj .promo-panel {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 16px;
  min-height: 118px; padding: 16px 16px 16px 20px; border-radius: 14px;
  background: radial-gradient(120% 140% at 85% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), rgba(20, 14, 10, .42);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.jpj .promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jpj .promo-text strong { font-size: 20px; line-height: 26px; font-weight: 700; }
.jpj .promo-text span { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .9); }
.jpj .promo-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
  background: var(--white); color: var(--dark); font-size: 14px; font-weight: 700; white-space: nowrap; text-shadow: none;
  transition: background .2s, color .2s;
}
.jpj .promo-cta svg { width: 15px; height: 15px; }
.jpj a.promo-tile:hover .promo-cta { background: var(--primary); color: var(--white); }
.jpj .btn-ghost { background: var(--white); color: var(--dark); border: 1px solid var(--border); }
.jpj .btn-ghost:hover { border-color: var(--dark); }

/* Newsletter sign-ups: the red banner between sections, the grey panel. */
.jpj-subscribe { margin-block: 32px; }
.jpj .subscribe-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--primary); color: var(--white); border-radius: var(--radius); padding: 36px 48px;
}
.jpj .subscribe-banner h2 { color: var(--white); font-size: clamp(22px, 2.6vw, 28px); }
.jpj .subscribe-banner p { color: rgba(255,255,255,.88); margin-top: 6px; font-size: 15px; }
.jpj .subscribe-form { flex: 0 1 460px; }
.jpj .subscribe-banner form, .jpj .newsletter form { display: flex; gap: 10px; }
.jpj .subscribe-banner input {
  flex: 1; min-width: 0; border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 14px 20px; font: inherit; font-size: 15px; background: var(--white); color: var(--dark); outline: none;
}
.jpj .subscribe-banner input:focus { border-color: var(--dark); }
.jpj .subscribe-banner .btn { background: var(--dark); color: var(--white); flex-shrink: 0; }
.jpj .subscribe-banner .btn:hover { background: #000; }
.jpj .subscribe-banner [data-jpj-subscribe-msg] { color: var(--white); }
.jpj .newsletter { background: var(--surface); border-radius: var(--radius); padding: 48px; text-align: center; }
.jpj .newsletter h2 { font-size: clamp(24px, 3vw, 32px); }
.jpj .newsletter > p:not([data-jpj-subscribe-msg]) { color: var(--muted); margin: 12px auto 24px; max-width: 54ch; }
.jpj .newsletter form { max-width: 460px; margin-inline: auto; }
.jpj .newsletter input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 12px 20px; font: inherit; font-size: 15px; background: var(--white); outline: none;
}
.jpj .newsletter input:focus { border-color: var(--primary); }
.jpj [data-jpj-subscribe-msg]:empty { display: none; }

/* Listings: booking cards sit in the scrolling row; price in bold. */
.jpj .book-card .price { font-weight: 700; color: var(--dark); }

/* Events & tickets — a ticket table: date, event, city, price, one action. */
.jpj .event-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.jpj .event-filters button {
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--primary); cursor: pointer;
  background: none; border: 1px solid var(--primary); border-radius: var(--radius-pill); padding: 8px 14px;
  transition: background .2s, color .2s;
}
.jpj .event-filters button:hover { background: var(--primary-light); }
.jpj .event-filters button[aria-pressed="true"] { background: var(--primary); color: var(--white); }
.jpj .event-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--dark); margin: 0; }
.jpj .event-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 14px 16px 12px; border: 0; border-bottom: 1px solid var(--border); background: none;
}
.jpj .event-table td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 15px; }
.jpj .event-table th:first-child, .jpj .event-table td:first-child { padding-left: 0; }
.jpj .event-table th:last-child, .jpj .event-table td:last-child { padding-right: 0; text-align: right; }
.jpj .event-table tr[hidden] { display: none; }
.jpj .ev-date { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; padding-right: 40px !important; }
.jpj .ev-name { font-weight: 700; font-size: 16px !important; }
.jpj .ev-name a { display: flex; align-items: center; gap: 16px; }
.jpj .ev-name a:hover { color: var(--primary); }
.jpj .ev-name img, .jpj .ev-thumb { flex-shrink: 0; width: 64px; height: 48px; min-height: 0; object-fit: cover; border-radius: var(--radius-sm); }
.jpj .ev-city { color: var(--muted); white-space: nowrap; }
.jpj .ev-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jpj .ev-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: var(--radius-pill); background: var(--primary); color: var(--white);
  font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.jpj .ev-btn:hover { background: var(--primary-dark); }
.jpj .ev-btn svg { width: 16px; height: 16px; margin-right: 7px; flex-shrink: 0; }
/* Sold out: an outline, so the one row you can't buy reads differently. */
.jpj .ev-btn.is-waitlist { background: none; color: var(--dark); border: 1px solid var(--border); }
.jpj .ev-btn.is-waitlist:hover { border-color: var(--dark); }
.jpj .event-foot { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.jpj .event-foot .btn { flex-shrink: 0; }
.jpj .event-foot p { color: var(--muted); font-size: 14px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .jpj { --px: 30px; }
  .jpj .facts { grid-template-columns: repeat(2, 1fr); }
  .jpj .know-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jpj .ai { padding: 44px 32px; }
  .jpj .hero-grid { grid-template-columns: 1fr; }
  .jpj .side-stack { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .jpj .cards { grid-template-columns: repeat(2, 1fr); }
  .jpj .trend-grid { grid-template-columns: repeat(2, 1fr); }
  .jpj .fest { grid-template-columns: 1fr; }
  .jpj .fest-feature figure { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
  .jpj .fest-list { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .jpj .fest-list li:nth-child(2) { border-top: 0; }
  .jpj .fest-list li:nth-child(even) { border-left: 1px solid var(--border); }
  .jpj .season-grid, .jpj .tag-groups { grid-template-columns: repeat(2, 1fr); }
  .jpj .routes { grid-template-columns: 1fr; }
  .jpj .stations { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .jpj { --px: 20px; }
  .jpj .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .jpj .article-head { padding-top: 26px; }
  .jpj .article-hero img { aspect-ratio: 4 / 3; }
  /* One column: the name and badge, then the photo and booking card, then
     the write-up. The copy column steps aside (display: contents) so its
     title and the card can be ordered around each other. */
  .jpj .entry { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .jpj .entry-main { display: contents; }
  .jpj .entry-main > * { order: 3; }
  .jpj .entry-title { order: 1; }
  .jpj .entry-side { order: 2; margin: 16px 0 4px; }
  .jpj .fact-list { grid-template-columns: 120px 1fr; }
  .jpj .know-grid { grid-template-columns: 1fr; }
  .jpj .month summary { grid-template-columns: 1fr 24px; gap: 6px; padding: 16px 18px; }
  .jpj .month .events, .jpj .month .note { grid-column: 1; }
  .jpj .month .chev { grid-row: 1; grid-column: 2; }
  .jpj .month .empty { padding: 16px 18px; }
  /* Schedule → one card per event, no sideways scrolling:
       Sat 14 Aug ................ Shimonoseki & Moji
       Kanmon Strait Fireworks
       Start 19:50 · Shells 15,000 · Shimonoseki · 20 min
       Seat from ¥5,000 ..................... [Details]  */
  .jpj table.schedule { min-width: 0; }
  .jpj table.schedule thead { display: none; }
  .jpj table.schedule, .jpj table.schedule tbody { display: block; }
  .jpj table.schedule tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px;
    padding: 14px 18px; border-top: 1px solid var(--border);
  }
  .jpj table.schedule td { padding: 0; border: 0; }
  .jpj table.schedule td:empty { display: none; }
  .jpj table.schedule .sc-date { order: 1; font-size: 13px; }
  .jpj table.schedule .sc-city { order: 2; margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; }
  .jpj table.schedule .sc-name { order: 3; flex-basis: 100%; font-size: 16px; font-weight: 700; line-height: 1.3; }
  .jpj table.schedule :is(.sc-start, .sc-shells, .sc-station) { order: 4; font-size: 13px; color: var(--muted); }
  .jpj table.schedule :is(.sc-start, .sc-shells, .sc-seat)::before { content: attr(data-label) " "; }
  .jpj table.schedule .sc-shells::before { content: "· " attr(data-label) " "; }
  .jpj table.schedule .sc-station::before { content: "· "; }
  .jpj table.schedule .sc-seat { order: 5; flex: 1; font-size: 14px; font-weight: 700; }
  .jpj table.schedule .sc-seat::before { font-weight: 400; color: var(--muted); }
  .jpj table.schedule .sc-action { order: 6; }
  .jpj table.schedule .book { padding: 8px 16px; }
  .jpj .mapcard-body { height: 300px; }
  .jpj .mapcard-head { padding: 12px 16px; }
  .jpj .fact { padding: 16px 18px; }
  .jpj .cta { grid-template-columns: 1fr; padding: 28px; }
  .jpj .ai { padding: 32px 20px; }
  .jpj .ai-form { margin-top: 24px; padding: 16px 12px 12px 16px; }
  .jpj .ai-tools { gap: 8px; }
  .jpj .ai-tools .btn-primary { padding: 12px 20px; }
  .jpj .ai-mode { padding: 10px 14px; }
  /* 16px so iOS does not zoom into the field. */
  .jpj .ai-form input { font-size: 16px; }
  .jpj .band { padding-block: 44px; }
  .jpj .hero { padding-block: 28px 22px; }
  .jpj .feature { min-height: 380px; }
  .jpj .feature-body { padding: 22px; }
  .jpj .side-stack { grid-template-columns: 1fr; }
  .jpj .side-card { grid-template-columns: 110px 1fr; }
  .jpj .side-card > img, .jpj .side-card > .no-photo { width: 110px; height: 84px; }
  .jpj .cards, .jpj .trend-grid, .jpj .picks { grid-template-columns: 1fr; }
  .jpj .fest-list { grid-template-columns: 1fr; }
  .jpj .fest-list li:nth-child(2) { border-top: 1px solid var(--border); }
  .jpj .fest-list li:nth-child(even) { border-left: 0; }
  .jpj .fest-list a { padding: 14px 18px; }
  .jpj .fest-body { padding: 20px; }
  .jpj .fest-feature figure { aspect-ratio: 4 / 3; }
  .jpj .stay-grid, .jpj .promo-pair { grid-template-columns: 1fr; }
  .jpj .seasons-note { text-align: left; max-width: none; }
  .jpj .area-rail { grid-auto-columns: minmax(260px, 1fr); }
  /* Phone: a taller panel; the button drops under the words. */
  .jpj .promo-tile { aspect-ratio: 4 / 4.4; }
  .jpj .promo-panel { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; min-height: 150px; padding: 14px; }
  .jpj .promo-text strong { font-size: 17px; line-height: 22px; }
  .jpj .promo-text span { font-size: 13px; line-height: 18px; }
  /* Events table → stacked rows: date and city on top, the event, then
     price beside the button. */
  .jpj .event-table thead { display: none; }
  .jpj .event-table, .jpj .event-table tbody { display: block; }
  /* Date · city on top; the photo on the left beside the title and, under
     the title, the price — with the button on the price's line, flush right. */
  .jpj .event-table tbody tr {
    display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
    column-gap: 14px; row-gap: 6px; padding-block: 16px; border-bottom: 1px solid var(--border);
  }
  .jpj .event-table tbody tr[hidden] { display: none; }
  .jpj .event-table td { padding: 0 !important; border: 0; text-align: left !important; }
  .jpj .ev-date { grid-column: 1 / 3; grid-row: 1; font-size: 13px; margin-bottom: 4px; }
  .jpj .ev-city { grid-column: 3; grid-row: 1; justify-self: end; font-size: 13px; margin-bottom: 4px; }
  /* The cell and its link step aside so the photo and title join the grid. */
  .jpj .ev-name, .jpj .ev-name a { display: contents; }
  .jpj .ev-name img, .jpj .ev-name .ev-thumb { grid-column: 1; grid-row: 2 / 4; align-self: center; width: 64px; height: 64px; }
  .jpj .ev-name a > span:last-child { grid-column: 2 / -1; grid-row: 2; align-self: end; }
  /* The price sits right next to its button, not across the row from it. */
  .jpj .ev-price { grid-column: 2; grid-row: 3; align-self: center; justify-self: end; }
  .jpj .ev-action { grid-column: 3; grid-row: 3; justify-self: end; }
  .jpj .event-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .jpj .subscribe-banner { flex-direction: column; align-items: stretch; padding: 28px 22px; gap: 20px; }
  .jpj .subscribe-form { flex-basis: auto; }
  .jpj .subscribe-banner form, .jpj .newsletter form { flex-direction: column; }
  .jpj .newsletter { padding: 32px 22px; }
  /* Stacked, flex: 1 would stretch the box's height instead of its width:
     box and button are one 48px pair. 16px stops iOS zooming in on focus. */
  .jpj .subscribe-banner input, .jpj .newsletter input { flex: none; height: 48px; padding-block: 0; font-size: 16px; }
  .jpj .subscribe-banner .btn, .jpj .newsletter .btn { height: 48px; padding-block: 0; }
  .jpj-content > p, .jpj-content li { font-size: 16px; }
  .jpj .place { grid-template-columns: 1fr; gap: 18px; }
  .jpj .orient { grid-template-columns: 1fr; }
  .jpj .orient dt { border-bottom: 0; padding-bottom: 0; }
  .jpj .stations { grid-template-columns: 1fr; }
  .jpj .town { grid-template-columns: 1fr; }
  .jpj .town-main { border-right: 0; border-bottom: 1px solid var(--border); padding: 18px 18px 20px; }
  .jpj .input { font-size: 16px; }
}

@media (max-width: 480px) {
  /* Phone: the live dot replaces the "On now" pill (kept for screen readers),
     and "Book it" loses its arrow, so the headlines get the room. */
  .jpj .ticker .live-dot { display: block; }
  .jpj .ticker .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jpj .ticker .ticker-book span[aria-hidden] { display: none; }
  .jpj .ticker .ticker-book { padding-inline: 18px; }
  .jpj .facts { grid-template-columns: 1fr; }
  .jpj .cta { padding: 24px 20px; }
  .jpj .fact-list { grid-template-columns: 104px 1fr; }
  .jpj .fact-list a { white-space: normal; }
  .jpj .around .kind { flex-basis: 64px; }
  .jpj .season-grid, .jpj .tag-groups { grid-template-columns: 1fr; }
  .jpj .pick { grid-template-columns: 112px 1fr; gap: 14px; }
  .jpj .pick .num { font-size: 22px; right: 8px; bottom: 6px; }
  /* Voice and image share a row when they fit; Ask takes the last row. */
  .jpj .ai-mode { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .jpj .ai-tools .btn-primary { flex-basis: 100%; margin-left: 0; }
}