/* Jipangu first-trip site. */
:root { --ink: #121826; --sea: #cfdfff; --yellow: #ffd23f; --soft: #5a6478; --line: rgba(18, 24, 38, 0.14); --round: Fredoka, "Hiragino Maru Gothic ProN", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--ink); font-family: Outfit, "Hiragino Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.45; }
h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
a { color: inherit; text-decoration: none; }
.ft { color: var(--ink); }
.ft h1, .ft h2 { color: inherit; }
/* The old site's global stylesheet loads after this one, so links are scoped to win over its pink. */
.ft a { color: inherit; text-decoration: none; }
.ft a.card { color: #fff; }
.ft .hero > p a { text-decoration: underline; text-underline-offset: 3px; }
.ft ul { margin: 0; }
:focus-visible { outline: 3px solid #2f5bff; outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

#map { position: sticky; top: 0; height: 52vh; z-index: 1; background: var(--sea); }
.top { position: fixed; z-index: 8; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; pointer-events: none; }
.top > * { pointer-events: auto; }
.wm { font: 700 25px/1.3 var(--round); background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 0 14px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg); text-decoration: none; }
.pill { background: #fff; border: 2.5px solid var(--ink); border-radius: 30px; padding: 5px 13px; font-weight: 600; font-size: 14.5px; box-shadow: 3px 3px 0 var(--ink); text-align: center; white-space: nowrap; }
.pill[aria-pressed="true"] { background: var(--yellow); }
.pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Home */
.below { position: relative; z-index: 2; background: #fff; border-radius: 24px 24px 0 0; margin-top: -18px; padding-bottom: 30px; }
.hero { padding: 22px 16px 0; }
.hero .title { font: 700 48px/0.95 var(--round); letter-spacing: -0.5px; }
.hero > p { margin-top: 10px; font-size: 17px; color: #2b3447; max-width: 27em; }
.hero > p a { font-weight: 600; text-underline-offset: 3px; }
.filters { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.set { display: flex; flex-wrap: wrap; gap: 8px; }
.season { margin-top: 12px; font-size: 15px; color: var(--soft); max-width: 28em; }

.railhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 16px 0; }
@media (hover: none) { .arrow { display: none; } }
.count { font: 600 18px/1.2 var(--round); margin-right: 4px; }
.menu { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.arrow { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; }
.arrow svg { width: 20px; height: 20px; stroke-width: 2.8; }
.arrow:disabled { opacity: 0.3; cursor: default; }
.fold { display: flex; align-items: center; gap: 4px; }
.fold svg { width: 16px; height: 16px; stroke-width: 2.8; transition: transform 0.2s; }
.folded .fold svg { transform: rotate(180deg); }
.folded .rail, .folded .arrow { display: none; }
.rail { display: flex; gap: 18px; overflow-x: auto; padding: 26px 16px 14px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.card { color: #fff; flex: none; scroll-snap-align: start; width: 268px; height: 204px; border-radius: 24px; padding: 16px 18px 16px; color: #fff; background: var(--c); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.15s; }
.card:hover { transform: translateY(-5px) rotate(-1deg); }
/* Plan cards: the plan's own sticker sits on the top right corner, overlapping the edge. */
.card { position: relative; }
.card h3 { padding-right: 74px; }
.tpic { position: absolute; top: -18px; right: -12px; width: 96px; height: 96px; transform: rotate(6deg); transition: transform 0.2s; }
.tpic img { width: 100%; height: 100%; }
.card:hover .tpic { transform: rotate(-4deg) scale(1.08); }
.mostpop { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(-6deg); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: 0 7px 0 5px; font: 600 11px/1.6 var(--round); }
.mostpop svg { width: 11px; height: 11px; fill: var(--ink); stroke-width: 1.5; }
.card .via small { font-size: 11.5px; opacity: 0.8; }
.card .via i { font-style: normal; opacity: 0.7; padding: 0 1px; }
.band.withtrip { position: relative; padding-right: 128px; }
.bandpic { position: absolute; top: 14px; right: 14px; width: 104px; height: 104px; transform: rotate(5deg); }
.card h3 { font: 700 23px/1.08 var(--round); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--ink); border-radius: 12px; padding: 2px 9px 2px 6px; font-weight: 600; font-size: 12.5px; line-height: 1.35; }
.chip svg { width: 14px; height: 14px; stroke-width: 2.4; }
.card .who { margin-top: auto; font-weight: 600; font-size: 13.5px; }
.card .via { font-size: 13px; opacity: 0.92; margin-top: 3px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Panel */
.sheet { display: none; position: relative; }
.open .sheet { display: block; }
.open .hero, .open .railwrap { display: none; }
.x { position: absolute; z-index: 5; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; }
.x::before, .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 19px; height: 3.5px; margin: -1.75px 0 0 -9.5px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.x::after { transform: rotate(-45deg); }
.x { transition: transform 0.1s, box-shadow 0.1s; }
.x:hover { transform: translate(1.5px, 1.5px); box-shadow: 1.5px 1.5px 0 var(--ink); }
.band { background: var(--c, var(--yellow)); color: var(--bt, var(--ink)); padding: 20px 66px 22px 18px; border-radius: 24px 24px 0 0; }
.band .chips { margin-top: 0; }
.band h1 { font: 700 33px/1.05 var(--round); margin-top: 10px; }
.band h1.withpic { display: flex; align-items: center; gap: 10px; }
.band h1 img { width: 64px; height: 64px; }
.band .why { margin-top: 8px; font-size: 15.5px; }
.band .who { margin-top: 8px; font-weight: 600; font-size: 14px; }
.body { padding: 4px 18px 22px; }
.nums { display: flex; gap: 28px; padding: 16px 0 4px; }
.nums b { display: block; font: 700 26px/1.1 var(--round); }
.nums span { font-size: 13px; color: var(--soft); }
.sw { margin-top: 14px; }
.note { margin-top: 10px; font-size: 14px; color: var(--soft); }
.h { font: 700 23px var(--round); margin-top: 26px; padding-bottom: 8px; border-bottom: 2.5px solid var(--ink); }
.tl li { display: grid; grid-template-columns: 88px 1fr; column-gap: 12px; }
.tl .day > div, .hop p { border-left: 4px solid var(--c); padding-left: 18px; }
.tl .day > div { padding-top: 12px; padding-bottom: 6px; }
.when { font-weight: 600; font-size: 14px; color: var(--soft); padding-top: 24px; }
.city { display: flex; align-items: center; gap: 10px; }
.city img { width: 58px; height: 58px; }
.day h4 { font: 700 25px/1.1 var(--round); }
.city:hover h4 { text-decoration: underline; text-underline-offset: 4px; }
.day p { margin-top: 6px; font-size: 15px; }
.day .g { color: #0b8a63; font-weight: 600; }
.day .r { color: #e0402a; font-weight: 600; }
.hop p { border-left-style: dotted; padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; color: var(--soft); }
.offb > div { border-left-style: dashed !important; }
.tag2 { display: inline-block; background: var(--ink); color: #fff; border-radius: 10px; padding: 1px 9px; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.more { display: inline-block; margin-top: 6px; font-weight: 600; font-size: 14.5px; }
.exits { display: grid; gap: 14px; margin-top: 16px; }
.exits a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; border: 2.5px solid var(--ink); border-radius: 20px; padding: 14px 16px; box-shadow: 4px 4px 0 var(--ink); }
.exits a:first-child { background: var(--yellow); }
.exits b { font: 600 18px/1.15 var(--round); }
.exits span { font-size: 14px; color: #3c4659; }
.exits i { font-style: normal; font-weight: 600; font-size: 14px; margin-top: auto; padding-top: 6px; }
.facts { padding-top: 14px; font-size: 15px; }
.facts .row { display: grid; grid-template-columns: 4.6em 1fr; gap: 8px; padding: 4px 0; }
.facts dt { font-weight: 600; }
.facts .go dt { color: #0b8a63; }
.facts .no dt { color: #e0402a; }
.spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 16px; }
.spots button { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px solid var(--ink); border-radius: 16px; padding: 8px 6px 9px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.spots img { width: 54px; height: 54px; }
.spots button:hover { background: var(--yellow); }
.group { margin-top: 22px; font: 600 17px var(--round); padding-bottom: 6px; border-bottom: 2.5px solid var(--ink); }
.rows li { border-bottom: 1px solid var(--line); }
.rowbtn { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 6px 0; }
.rowbtn img { width: 40px; height: 40px; }
.rowbtn b { font: 600 18px var(--round); }
.rowbtn span { font-size: 14px; color: var(--soft); }
.rowbtn:hover b { text-decoration: underline; text-underline-offset: 4px; }
.mini { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; width: 100%; padding: 8px 0; }
.mini img { width: 44px; height: 44px; }
.mini b { display: block; font: 600 17px var(--round); }
.mini span { font-size: 13.5px; color: var(--soft); }
.basics li { padding: 14px 0 15px; border-bottom: 1px solid var(--line); }
.basics h2 { font: 600 20px var(--round); }
.sightlist { margin-top: 16px; font-size: 14.5px; }
.sightlist li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.sightlist span { color: var(--soft); font-size: 13px; white-space: nowrap; }
.basics p { margin-top: 3px; font-size: 15px; }
.foot { padding: 18px 16px 0; font-size: 12.5px; color: var(--soft); }

/* Legend and sight cards */
.spots.few { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 10px; }
.spots.few button { font-size: 12px; padding: 6px 4px 7px; border-width: 1.5px; }
.spots.few img { width: 42px; height: 42px; }
.card-pop .maplibregl-popup-content { padding: 0; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.card-pop .maplibregl-popup-tip { display: none; }
.pop { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 14px 14px 10px; font-family: Outfit, sans-serif; }
.pop img { width: 64px; height: 64px; }
.pop b { display: block; font: 700 18px/1.15 var(--round); }
.pop p { margin: 4px 0 8px; font-size: 14px; line-height: 1.4; color: #2b3447; }
.pop .chip { border: 2px solid var(--ink); }

/* Map settings: a switch on the map itself, apart from the navigation */
.maptools { position: absolute; z-index: 3; right: 52px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.layer { display: flex; align-items: center; gap: 8px; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 6px 8px 6px 9px; font-weight: 600; font-size: 14px; }
.layer svg { width: 20px; height: 20px; }
.switch { position: relative; width: 32px; height: 19px; border-radius: 10px; border: 2px solid var(--ink); background: #e3e7ef; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform 0.2s; }
.layer[aria-pressed="true"] .switch { background: var(--yellow); }
.layer[aria-pressed="true"] .switch::after { transform: translateX(12px); }
.layer:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.legend { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
.legend[hidden] { display: none; }
.legend span { display: grid; grid-template-columns: 30px auto; align-items: center; }
.k { display: block; width: 26px; height: 0; }
.k-shin { height: 5px; background: repeating-linear-gradient(90deg, #fff 0 5px, #33405a 5px 10px); border: 1.5px solid #33405a; border-radius: 3px; }
.k-rail { border-top: 2.5px solid #8a94a8; }
.k-bus { border-top: 3px dashed #f08a00; }
.k-ferry { border-top: 3px dashed #2f6fd6; }
.k-cable { border-top: 3px dashed #7a5cff; }
.k-walk { border-top: 3px dotted #5a6478; }
.pop .how { margin: 8px 0 0; font-size: 13px; color: #33405a; }
.sightlist em { display: block; font-style: normal; font-size: 13px; color: var(--soft); margin-top: 2px; }

/* Map controls */
.maplibregl-ctrl-group { border-radius: 14px !important; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink) !important; overflow: hidden; }

@media (min-width: 900px) {
  body { overflow: hidden; }
  #map { position: fixed; inset: 0; height: auto; }
  .top { padding: 18px 24px; }
  .wm { font-size: 30px; }
  .below { display: contents; }
  .hero { position: fixed; z-index: 4; left: 28px; top: 92px; width: 480px; padding: 0; }
  .hero .title { font-size: 72px; -webkit-text-stroke: 12px var(--sea); paint-order: stroke fill; }
  .hero > p, .season { font-weight: 500; -webkit-text-stroke: 5px var(--sea); paint-order: stroke fill; }
  .season { color: #33405a; }
  .railwrap { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; padding-bottom: 12px; }
  .railhead { padding: 0 28px; }
  .count { -webkit-text-stroke: 6px var(--sea); paint-order: stroke fill; font-size: 20px; }
  .rail { padding: 26px 28px 14px; scroll-padding-inline: 28px; }
  .sheet { position: fixed; z-index: 6; left: 24px; top: 84px; bottom: 24px; width: 440px; background: #fff; border: 3px solid var(--ink); border-radius: 28px; box-shadow: 7px 7px 0 var(--ink); }
  .sheetin { border-radius: 25px; }
  .x { top: -4px; right: -64px; width: 50px; height: 50px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-4deg); }
  .x::before, .x::after { width: 21px; margin-left: -10.5px; }
  .x:hover { transform: rotate(-4deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
  .sheet.page { width: min(620px, 46vw); }
  .sheetin { height: 100%; overflow-y: auto; scrollbar-width: none; }
  .sheetin::-webkit-scrollbar { display: none; }
  .thumb { position: absolute; z-index: 6; top: 0; right: 5px; width: 6px; border-radius: 6px; background: rgba(18, 24, 38, 0.45); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); opacity: 0; transition: opacity 0.3s, width 0.15s, right 0.15s; cursor: grab; }
  .thumb.moving, .sheet:hover .thumb { opacity: 1; }
  .thumb:hover, .thumb.drag { width: 9px; right: 3.5px; background: rgba(18, 24, 38, 0.7); }
  .band { border-radius: 0; padding: 22px 70px 24px 24px; }
  .body { padding: 4px 24px 28px; }
  .exits { grid-template-columns: repeat(3, 1fr); }
  .foot { display: none; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .hero > p, .season { display: none; }
  .hero .title { font-size: 56px; }
  .hero { top: 80px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }