@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&family=Noto+Serif+TC:wght@600;700;900&display=swap');

:root {
  --ink: #172921;
  --ink-soft: #354840;
  --orange: #d95e19;
  --orange-deep: #a9420e;
  --cream: #f5f1e8;
  --paper: #fbfaf6;
  --line: #d8d8cb;
  --muted: #7b837b;
  --blue: #d8eaf2;
  --serif: 'Noto Serif TC', 'PMingLiU', serif;
  --sans: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.topline { height: 5px; background: var(--orange); }
.site-header { width: min(1240px, calc(100% - 64px)); margin: 0 auto; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .12em; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--orange); color: var(--orange); font-family: var(--serif); font-weight: 900; font-size: 19px; transform: rotate(-8deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 12px; letter-spacing: .16em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .28em; }
.main-nav { display: flex; gap: 38px; color: var(--ink-soft); font-size: 13px; }
.main-nav a, .back-top { transition: color .2s ease; }
.main-nav a:hover, .back-top:hover { color: var(--orange); }
.header-date { color: var(--orange-deep); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.header-date span { padding-left: 8px; font-size: 17px; }
.hero { width: min(1240px, calc(100% - 64px)); margin: 0 auto; min-height: 610px; display: grid; grid-template-columns: minmax(320px, .78fr) minmax(500px, 1.22fr); grid-template-rows: 1fr auto; column-gap: clamp(30px, 7vw, 112px); padding: 86px 0 42px; }
.hero-copy { align-self: center; padding-bottom: 35px; }
.eyebrow { margin: 0 0 21px; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.eyebrow span { width: 21px; height: 2px; display: inline-block; vertical-align: middle; margin-right: 7px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 27px; color: var(--ink); font-family: var(--serif); font-size: clamp(65px, 8.5vw, 118px); font-weight: 900; line-height: .99; letter-spacing: -.08em; }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-lede { margin-bottom: 40px; color: var(--ink-soft); font-size: 16px; line-height: 2; }
.text-link { display: inline-flex; align-items: center; gap: 14px; color: var(--orange-deep); font-size: 13px; font-weight: 800; border-bottom: 1px solid currentColor; padding-bottom: 8px; }
.text-link span { font-size: 19px; transition: transform .2s ease; }
.text-link:hover span { transform: translateY(4px); }
.hero-art { position: relative; min-height: 440px; overflow: hidden; background: #d3d6c5; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 92%); }
.hero-art::before { content: ''; position: absolute; inset: 0; opacity: .23; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 11px 11px; mix-blend-mode: soft-light; }
.sun { position: absolute; width: 190px; height: 190px; border-radius: 50%; top: 54px; right: 110px; background: #ef9b4c; box-shadow: 0 0 0 18px rgba(239,155,76,.12), 0 0 0 40px rgba(239,155,76,.08); }
.mountain { position: absolute; left: -5%; width: 112%; transform: rotate(-4deg); }
.mountain-back { bottom: 124px; height: 230px; background: #a6b5a0; clip-path: polygon(0 100%, 0 57%, 20% 26%, 35% 57%, 50% 5%, 67% 55%, 80% 25%, 100% 65%, 100% 100%); }
.mountain-front { bottom: 65px; height: 205px; background: #446253; clip-path: polygon(0 100%, 0 63%, 16% 38%, 29% 64%, 46% 17%, 60% 59%, 76% 31%, 100% 69%, 100% 100%); }
.lake { position: absolute; right: -5%; bottom: -14px; width: 110%; height: 144px; background: #9bb7b3; clip-path: polygon(0 33%, 19% 15%, 35% 31%, 53% 3%, 72% 26%, 100% 12%, 100% 100%, 0 100%); }
.road { position: absolute; bottom: -22px; left: 38%; width: 22%; height: 190px; background: #2f473d; transform: rotate(22deg); clip-path: polygon(42% 0, 62% 0, 94% 100%, 6% 100%); }
.road span { display: block; width: 3px; height: 26px; margin: 11px auto 0; background: #e9c780; }
.art-caption { position: absolute; bottom: 29px; left: 30px; right: 30px; display: flex; justify-content: space-between; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; letter-spacing: .25em; }
.art-stamp { position: absolute; top: 30px; left: 32px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); color: rgba(255,255,255,.85); font-family: var(--serif); font-size: 27px; transform: rotate(-12deg); }
.hero-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(32px, 8vw, 120px); padding-top: 27px; border-top: 1px solid var(--line); }
.hero-meta div { display: flex; align-items: baseline; gap: 9px; }
.hero-meta b { color: var(--orange); font-family: var(--serif); font-size: 31px; letter-spacing: -.05em; }
.hero-meta span { color: var(--muted); font-size: 11px; }
.section { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.route-section { padding: 122px 0 118px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: center; }
h2 { margin-bottom: 22px; font-family: var(--serif); font-size: clamp(34px, 4.2vw, 57px); line-height: 1.22; letter-spacing: -.07em; }
.section-intro > p:last-child { max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.95; }
.route-visual { position: relative; min-height: 230px; margin-top: 20px; }
.route-line { position: absolute; top: 66px; left: 8%; right: 5%; height: 2px; background: var(--orange); transform: rotate(-7deg); transform-origin: left; }
.route-line::after { content: ''; position: absolute; right: -1px; top: -5px; width: 10px; height: 10px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); transform: rotate(40deg); }
.route-stop { position: absolute; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.route-stop i { width: 37px; height: 37px; display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 50%; background: var(--paper); color: var(--orange); font-size: 10px; font-style: normal; font-weight: 800; }
.route-stop strong { margin-top: 10px; font-family: var(--serif); font-size: 18px; }
.route-stop small { color: var(--muted); font-size: 11px; }
.stop-1 { top: 29px; left: 0; }.stop-2 { top: 83px; left: 29%; }.stop-3 { top: 10px; left: 57%; }.stop-4 { top: 111px; right: 0; }
.route-car { position: absolute; top: 38px; left: 42%; color: var(--orange); font-size: 24px; transform: rotate(-23deg); }
.itinerary-section { padding: 120px 0 136px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 58px; }
.section-heading h2 { margin-bottom: 0; }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.filter-button { cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px; background: transparent; color: var(--muted); font-size: 12px; transition: all .2s ease; }
.filter-button:hover, .filter-button.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.segment-label { display: grid; grid-template-columns: max-content max-content 1fr; gap: 16px; align-items: baseline; margin: 0 0 24px; color: var(--orange); }
.segment-label span { font-size: 10px; font-weight: 800; letter-spacing: .18em; }.segment-label strong { font-family: var(--serif); font-size: 24px; letter-spacing: -.04em; }.segment-label small { color: var(--muted); font-size: 12px; }
.south-label { margin-top: 98px; }
.day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.day-card { position: relative; min-height: 465px; padding: 31px 31px 27px; border: 1px solid var(--line); background: rgba(255,255,255,.5); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.day-card::before { content: ''; display: block; height: 132px; margin: -31px -31px 25px; background-position: center; background-size: cover; background-repeat: no-repeat; filter: saturate(.88); }
.day-grid:not(.south-grid) .day-card:nth-child(1)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.2), transparent), url('images/day-01-hayabusa.jpg'); background-position: center 55%; }
.day-grid:not(.south-grid) .day-card:nth-child(2)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.15), transparent), url('images/day-02-kabushima.jpg'); background-position: center 54%; }
.day-grid:not(.south-grid) .day-card:nth-child(3)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.18), transparent), url('images/day-03-towada-art.jpg'); background-position: center 48%; }
.day-grid:not(.south-grid) .day-card:nth-child(4)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.16), transparent), url('images/day-04-oirase.jpg'); background-position: center 52%; }
.day-grid:not(.south-grid) .day-card:nth-child(5)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.2), transparent), url('https://upload.wikimedia.org/wikipedia/commons/b/bc/Nebuta_Museum_Wa_Rasse_20200621.jpg'); background-position: center 50%; }
.day-grid:not(.south-grid) .day-card:nth-child(6)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.15), transparent), url('https://upload.wikimedia.org/wikipedia/commons/f/ff/Hirosaki_Castle_Keep_Tower_20220508.jpg'); background-position: center 50%; }
.day-grid:not(.south-grid) .day-card:nth-child(7)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.18), transparent), url('https://upload.wikimedia.org/wikipedia/commons/e/e6/140913_Aomori_Museum_of_Art_Japan02bs3.jpg'); background-position: center 50%; }
.south-grid .day-card:nth-child(1)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.2), transparent), url('images/day-08-sendai-station.jpg'); background-position: center 50%; }
.south-grid .day-card:nth-child(2)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.15), transparent), url('https://upload.wikimedia.org/wikipedia/commons/e/e9/Matsushima_miyagi_z.JPG'); background-position: center 50%; }
.south-grid .day-card:nth-child(3)::before { background-image: linear-gradient(90deg, rgba(23,41,33,.15), transparent), url('images/day-10-flight.jpg'); background-position: center 55%; }
.day-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(23,41,33,.07); }
.featured-day { background: #eef1e8; border-color: #c5cec0; }
.day-number { float: right; color: var(--orange); font-family: var(--serif); font-size: 32px; line-height: 1; }
.day-date { color: var(--orange-deep); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.day-card h3 { clear: both; margin: 13px 0 18px; font-family: var(--serif); font-size: 25px; letter-spacing: -.06em; }
.day-card h3 a { transition: color .2s ease; }.day-card h3 a:hover { color: var(--orange); }
.drive-note { margin: 0 0 21px; padding: 8px 11px; background: var(--blue); color: #17628b; font-size: 11px; line-height: 1.5; }
.drive-note.is-transit { background: #f9ead9; color: var(--orange-deep); }
.timeline { border-top: 1px solid rgba(216,216,203,.85); }
.timeline > div { display: grid; grid-template-columns: 54px 1fr; gap: 7px; padding: 12px 0 10px; border-bottom: 1px dotted #deded5; }
.timeline time { color: var(--muted); font-size: 12px; font-weight: 700; padding-top: 2px; }
.timeline p { margin: 0; }.timeline b, .timeline span { display: block; }.timeline b { font-size: 13px; line-height: 1.45; }.timeline span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.stay { display: inline-block; margin-top: 22px; padding: 8px 11px; background: #fff0e0; color: var(--orange-deep); font-size: 11px; font-weight: 700; }
.day-card-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--orange-deep); font-size: 11px; font-weight: 800; letter-spacing: .04em; }.day-card-link span { font-size: 16px; transition: transform .2s ease; }.day-card-link:hover span { transform: translate(3px, -3px); }
.empty-state { margin: 30px 0; color: var(--muted); text-align: center; }
.day-card.is-hidden, .segment-label.is-hidden { display: none; }
.notes-section { padding: 118px 0 134px; border-top: 1px solid var(--line); }
.notes-heading > p { max-width: 255px; margin-bottom: 4px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.note-card { min-height: 268px; padding: 27px 29px; color: var(--paper); }.note-sea { background: #b65a32; }.note-forest { background: var(--ink); }.note-road { background: #8f9a72; }
.note-icon { float: right; font-family: var(--serif); font-size: 32px; line-height: .8; opacity: .75; }.note-card p { margin: 0 0 23px; font-size: 10px; font-weight: 800; letter-spacing: .18em; opacity: .7; }.note-card h3 { margin-bottom: 15px; font-family: var(--serif); font-size: 27px; letter-spacing: -.06em; }.note-card span { display: block; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.85; }
.essentials-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-top: 72px; padding: 26px 0 0; border-top: 1px solid var(--line); }.essentials-strip div { display: flex; flex-direction: column; gap: 5px; }.essentials-strip span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .2em; }.essentials-strip strong { font-size: 13px; }.essentials-strip small { color: var(--muted); font-size: 11px; }
.photo-credits { margin: 28px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.address-hero { padding: 80px 0 70px; border-bottom: 1px solid var(--line); }.address-hero h1 { margin-bottom: 27px; font-size: clamp(58px, 8vw, 98px); }.address-hero p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 15px; line-height: 2; }.address-section { padding: 42px 0 120px; }.address-note { display: flex; gap: 17px; align-items: baseline; margin-bottom: 55px; padding: 17px 19px; border-left: 3px solid var(--orange); background: #f9ead9; }.address-note strong { color: var(--orange-deep); font-size: 12px; white-space: nowrap; }.address-note span { color: var(--ink-soft); font-size: 12px; line-height: 1.7; }.address-day + .address-day { margin-top: 78px; }.address-day-title { display: flex; align-items: baseline; gap: 15px; margin-bottom: 22px; }.address-day-title span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .18em; }.address-day-title strong { font-family: var(--serif); font-size: 25px; letter-spacing: -.05em; }.location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.location-card { min-height: 185px; padding: 21px 22px 20px; border: 1px solid var(--line); background: rgba(255,255,255,.6); }.location-card span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.location-card h3 { margin: 13px 0 9px; font-family: var(--serif); font-size: 18px; line-height: 1.35; }.location-card p { min-height: 42px; margin-bottom: 15px; color: var(--muted); font-size: 11px; line-height: 1.7; }.location-card a { color: var(--orange-deep); font-size: 11px; font-weight: 800; }.rental-card { background: #eef1e8; border-color: #c5cec0; }.stay-card { background: #f9ead9; border-color: #e6c7aa; }.address-footnote { margin-top: 58px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.site-footer { min-height: 265px; padding: 55px max(32px, calc((100% - 1240px) / 2)); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; background: var(--ink); color: var(--paper); }.footer-mark { font-family: var(--serif); font-size: 42px; font-weight: 900; line-height: 1.1; letter-spacing: -.08em; }.footer-mark em { color: #e97932; font-style: normal; }.site-footer p { margin: 0 0 7px; color: #df7430; font-size: 10px; font-weight: 800; letter-spacing: .18em; }.site-footer span { color: #a9b2a9; font-size: 11px; }.back-top { color: #d9dfd6; font-size: 12px; }

@media (max-width: 820px) {
  .site-header, .hero, .section { width: min(100% - 36px, 620px); }.site-header { min-height: 72px; }.main-nav { display: none; }.header-date { font-size: 10px; }
  .hero { display: flex; flex-direction: column; min-height: auto; padding: 63px 0 34px; gap: 32px; }.hero-copy { padding-bottom: 0; }.hero-art { min-height: 330px; width: 100%; clip-path: polygon(4% 0, 100% 0, 95% 100%, 0 94%); }.sun { width: 130px; height: 130px; right: 70px; top: 40px; }.mountain-back { bottom: 90px; }.mountain-front { bottom: 48px; }.lake { height: 105px; }.road { height: 145px; }.hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 22px; }.hero-meta div { display: block; }.hero-meta b { display: block; font-size: 26px; }.hero-meta span { display: block; margin-top: 3px; font-size: 10px; }
  .route-section { display: block; padding: 76px 0 82px; }.route-visual { margin-top: 55px; min-height: 280px; }.route-line { top: 58px; left: 8%; right: 6%; }.stop-1 { top: 20px; }.stop-2 { top: 90px; left: 27%; }.stop-3 { top: 25px; left: 55%; }.stop-4 { top: 125px; }.route-car { top: 45px; left: 42%; }
  .itinerary-section, .notes-section { padding: 78px 0 86px; }.section-heading { display: block; margin-bottom: 40px; }.filter-group { margin-top: 25px; justify-content: flex-start; }.segment-label { grid-template-columns: 1fr; gap: 3px; margin-bottom: 18px; }.segment-label strong { font-size: 21px; }.segment-label small { line-height: 1.6; }.day-grid { display: block; }.day-card { min-height: 0; margin-bottom: 14px; padding: 25px 21px 22px; }.day-card h3 { font-size: 23px; }.south-label { margin-top: 70px; }.notes-heading > p { margin-top: 20px; }.note-grid { display: block; }.note-card { min-height: 0; margin-bottom: 14px; }.essentials-strip { display: block; margin-top: 50px; }.essentials-strip div { padding: 17px 0; border-bottom: 1px solid var(--line); }.site-footer { min-height: 235px; padding: 42px 18px; align-items: flex-start; flex-wrap: wrap; }.site-footer > div:nth-child(2) { margin-top: 7px; }.back-top { width: 100%; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.day-card, .text-link span { transition: none; } }

@media (max-width: 820px) { .detail-addresses { margin-top: 58px; padding-top: 40px; }.detail-address-heading { display: block; }.detail-address-heading h2 { font-size: 26px; }.detail-address-heading > p { max-width: none; margin-top: 15px; }.detail-address-grid { grid-template-columns: 1fr; } }

/* Full route page */
.route-page-hero { min-height: 440px; display: grid; grid-template-columns: 1fr 300px; gap: 80px; align-items: center; padding: 88px 0 78px; border-bottom: 1px solid var(--line); }.route-page-hero h1 { margin-bottom: 28px; font-size: clamp(57px, 7vw, 92px); }.route-page-hero p:not(.eyebrow) { max-width: 480px; color: var(--muted); font-size: 15px; line-height: 2; }.route-compass { position: relative; width: 270px; height: 270px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--orange); font-family: var(--serif); font-size: 20px; text-align: center; transform: rotate(-8deg); }.route-compass::before, .route-compass::after { content: ''; position: absolute; width: 100%; height: 1px; background: var(--line); }.route-compass::after { transform: rotate(90deg); }.route-compass span { position: absolute; top: 28px; font-family: var(--sans); font-size: 12px; font-weight: 800; }.route-compass i { position: absolute; width: 14px; height: 14px; top: 36px; border-left: 2px solid var(--orange); border-top: 2px solid var(--orange); transform: rotate(45deg); }.route-compass b { z-index: 1; font-size: 22px; line-height: 1.1; }.route-compass small { position: absolute; bottom: 30px; font-family: var(--sans); font-size: 9px; letter-spacing: .2em; }.route-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 36px 0 100px; }.summary-card { min-height: 190px; padding: 29px; color: var(--paper); }.summary-card span { font-size: 10px; font-weight: 800; letter-spacing: .18em; opacity: .7; }.summary-card strong, .summary-card p, .summary-card small { display: block; }.summary-card strong { margin: 20px 0 4px; font-family: var(--serif); font-size: 27px; }.summary-card p { margin-bottom: 17px; font-size: 12px; }.summary-card small { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; }.summary-north { background: var(--orange); }.summary-south { background: var(--ink); }.route-map-section { padding: 0 0 112px; }.route-map-section .section-heading > p, .route-days-heading > p { max-width: 285px; margin: 0 0 3px; color: var(--muted); font-size: 13px; line-height: 1.8; }.big-route-map { position: relative; height: 490px; overflow: hidden; border: 1px solid #cdd3c4; background: #dfe8e0; }.map-ocean { position: absolute; inset: 0; opacity: .9; background: repeating-linear-gradient(9deg, transparent 0 36px, rgba(255,255,255,.32) 37px 38px); }.map-land { position: absolute; background: #b5c8ac; opacity: .78; }.land-1 { width: 61%; height: 94%; top: -27%; right: -8%; transform: rotate(23deg); border-radius: 45% 53% 28% 40%; }.land-2 { width: 49%; height: 73%; bottom: -38%; left: 20%; transform: rotate(-28deg); border-radius: 55% 32% 50% 43%; background: #9eb69f; }.land-3 { width: 22%; height: 47%; top: 27%; left: 3%; transform: rotate(23deg); border-radius: 53% 47% 45% 42%; background: #c6d5bd; }.map-line { position: absolute; height: 4px; background: var(--orange); transform-origin: left center; border-radius: 8px; box-shadow: 0 0 0 5px rgba(217,94,25,.12); }.north-line { width: 58%; top: 30%; left: 12%; transform: rotate(-9deg); }.south-line { width: 49%; top: 64%; left: 45%; transform: rotate(24deg); background: var(--ink); box-shadow: 0 0 0 5px rgba(23,41,33,.11); }.map-line span { position: absolute; top: -7px; width: 17px; height: 17px; border: 4px solid var(--paper); border-radius: 50%; background: currentColor; }.north-line span:nth-child(1) { left: -3px; }.north-line span:nth-child(2) { left: 34%; }.north-line span:nth-child(3) { left: 67%; }.north-line span:nth-child(4) { right: -3px; }.south-line span:nth-child(1) { left: -3px; }.south-line span:nth-child(2) { left: 54%; }.south-line span:nth-child(3) { right: -3px; }.map-stop { position: absolute; display: flex; flex-direction: column; gap: 2px; }.map-stop b { width: 33px; height: 33px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; background: var(--paper); font-size: 10px; }.map-stop strong { margin-top: 4px; font-family: var(--serif); font-size: 16px; }.map-stop small { color: var(--muted); font-size: 10px; }.map-hachinohe { top: 26%; left: 9%; color: var(--orange); }.map-oirase { top: 15%; left: 39%; color: var(--orange); }.map-aomori { top: 26%; right: 13%; color: var(--orange); }.map-sendai { bottom: 25%; left: 42%; color: var(--ink); }.map-matsushima { bottom: 12%; right: 12%; color: var(--ink); }.map-label { position: absolute; padding: 8px 11px; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.6); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.north-map-label { top: 8%; left: 42%; color: var(--orange-deep); }.south-map-label { bottom: 8%; left: 45%; color: var(--ink); }.train-bridge { position: absolute; top: 47%; left: 44%; color: var(--ink); font-size: 12px; transform: rotate(18deg); }.route-days { padding: 0 0 112px; }.route-block + .route-block { margin-top: 96px; }.route-block-title { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }.route-block-title > span { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 11px; font-weight: 800; }.route-block-title strong, .route-block-title small { display: block; }.route-block-title strong { font-family: var(--serif); font-size: 25px; }.route-block-title small { margin-top: 3px; color: var(--muted); font-size: 11px; }.route-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }.route-card { min-height: 250px; padding: 24px 25px 23px; border: 1px solid var(--line); background: rgba(255,255,255,.5); }.route-card-wide { grid-column: 1 / -1; }.route-card-top { display: flex; justify-content: space-between; gap: 12px; color: var(--orange-deep); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.route-card-top b { color: #17628b; font-weight: 700; letter-spacing: 0; }.route-card h3 { margin: 18px 0 13px; font-family: var(--serif); font-size: 22px; }.route-sequence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.7; }.route-sequence a { color: var(--ink); border-bottom: 1px solid var(--orange); font-size: 12px; font-weight: 700; }.route-sequence span { color: var(--ink-soft); font-size: 12px; }.route-sequence i { color: var(--orange); font-size: 13px; font-style: normal; }.route-card > p { margin: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }.route-card > p.route-alert { padding: 9px 11px; background: #f9ead9; color: var(--orange-deep); }.route-tips { padding: 0 0 120px; }.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.tips-grid > div { min-height: 170px; padding: 24px 24px 10px 0; border-right: 1px solid var(--line); }.tips-grid > div + div { padding-left: 24px; }.tips-grid > div:last-child { border-right: 0; }.tips-grid b, .tips-grid strong, .tips-grid span { display: block; }.tips-grid b { color: var(--orange); font-family: var(--serif); font-size: 25px; }.tips-grid strong { margin: 15px 0 9px; font-family: var(--serif); font-size: 18px; }.tips-grid span { color: var(--muted); font-size: 11px; line-height: 1.8; }

/* Individual day pages */
.day-detail { padding: 75px 0 120px; }.day-detail-hero { padding-bottom: 58px; border-bottom: 1px solid var(--line); }.day-detail-heading { display: flex; align-items: flex-start; gap: 25px; }.day-detail-number { color: var(--orange); font-family: var(--serif); font-size: clamp(74px, 10vw, 130px); font-weight: 900; line-height: .82; letter-spacing: -.12em; }.day-detail-date { margin: 8px 0 10px; color: var(--orange-deep); font-size: 12px; font-weight: 800; letter-spacing: .09em; }.day-detail-heading h1 { margin: 0; font-size: clamp(44px, 6vw, 78px); }.day-detail-intro { max-width: 660px; margin: 35px 0 28px 158px; color: var(--ink-soft); font-size: 16px; line-height: 2; }.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 158px; }.detail-tags span { padding: 9px 12px; background: #e2edf0; color: #17628b; font-size: 11px; }.detail-tags span:first-child { background: #f9ead9; color: var(--orange-deep); }.detail-layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(250px, .62fr); gap: 90px; padding-top: 62px; }.detail-main h2 { margin-bottom: 32px; font-size: 31px; }.detail-timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.detail-timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 25px; padding: 24px 0; border-bottom: 1px solid var(--line); }.detail-timeline time { color: var(--orange); font-family: var(--serif); font-size: 19px; font-weight: 700; }.detail-timeline strong, .detail-timeline p { display: block; }.detail-timeline strong { margin-bottom: 7px; font-family: var(--serif); font-size: 20px; }.detail-timeline p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }.detail-side { padding-top: 7px; }.detail-side-card { padding: 24px; margin-bottom: 14px; background: var(--ink); color: var(--paper); }.detail-side-card.orange { background: var(--orange); }.detail-side-card span, .detail-side-card strong, .detail-side-card p { display: block; }.detail-side-card span { margin-bottom: 14px; font-size: 10px; font-weight: 800; letter-spacing: .17em; opacity: .7; }.detail-side-card strong { font-family: var(--serif); font-size: 22px; }.detail-side-card p { margin: 8px 0 0; color: rgba(255,255,255,.75); font-size: 12px; line-height: 1.7; }.detail-note { padding: 20px 22px; border: 1px solid var(--orange); background: #fffaf3; }.detail-note b { color: var(--orange-deep); font-size: 11px; }.detail-note p { margin: 10px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }.day-nav { display: flex; justify-content: space-between; gap: 15px; margin-top: 78px; padding-top: 28px; border-top: 1px solid var(--line); }.day-nav a { display: flex; flex-direction: column; gap: 7px; color: var(--orange-deep); font-size: 12px; font-weight: 700; }.day-nav a:last-child { text-align: right; }.day-nav small { color: var(--muted); font-size: 10px; font-weight: 400; }

.detail-addresses { margin-top: 74px; padding-top: 52px; border-top: 1px solid var(--line); }.detail-address-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 25px; }.detail-address-heading h2 { margin: 0; font-size: 31px; }.detail-address-heading > p { max-width: 280px; margin: 0 0 3px; color: var(--muted); font-size: 12px; line-height: 1.8; }.detail-address-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.detail-address-card { min-height: 185px; padding: 18px 19px 17px; border: 1px solid var(--line); background: rgba(255,255,255,.6); }.detail-address-card.is-note { background: #f9ead9; border-color: #e6c7aa; }.detail-address-card > span, .detail-address-card > strong, .detail-address-card > p, .detail-address-card > a { display: block; }.detail-address-card > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.detail-address-card > strong { margin: 10px 0 8px; font-family: var(--serif); font-size: 17px; line-height: 1.35; }.detail-address-card > p { min-height: 42px; margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.7; }.detail-address-card > a { color: var(--orange-deep); font-size: 11px; font-weight: 800; }

@media (max-width: 820px) { .route-page-hero { display: block; min-height: 0; padding: 62px 0 55px; }.route-page-hero h1 { font-size: 58px; }.route-page-hero p:not(.eyebrow) { font-size: 14px; }.route-compass { width: 190px; height: 190px; margin: 43px auto 0; }.route-compass b { font-size: 16px; }.route-compass small { bottom: 20px; font-size: 8px; }.route-summary { display: block; padding: 20px 0 70px; }.summary-card { min-height: 0; margin-bottom: 14px; padding: 23px; }.big-route-map { height: 380px; }.map-stop strong { font-size: 13px; }.map-stop small { font-size: 9px; }.map-hachinohe { left: 5%; }.map-oirase { left: 30%; }.map-aomori { right: 7%; }.map-sendai { left: 30%; }.map-matsushima { right: 6%; }.north-line { width: 66%; left: 9%; }.south-line { width: 59%; left: 34%; }.north-map-label { left: 32%; }.south-map-label { left: 35%; }.train-bridge { left: 35%; }.route-map-section { padding-bottom: 78px; }.route-card-grid { display: block; }.route-card, .route-card-wide { min-height: 0; margin-bottom: 14px; }.route-block + .route-block { margin-top: 65px; }.tips-grid { display: block; }.tips-grid > div, .tips-grid > div + div { min-height: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }.tips-grid > div:last-child { border-bottom: 0; }.route-tips { padding-bottom: 75px; }.day-detail { padding: 58px 0 80px; }.day-detail-heading { gap: 15px; }.day-detail-number { font-size: 70px; }.day-detail-heading h1 { font-size: 43px; }.day-detail-intro, .detail-tags { margin-left: 0; }.day-detail-intro { margin-top: 27px; font-size: 14px; }.detail-layout { display: block; padding-top: 48px; }.detail-main h2 { font-size: 26px; }.detail-timeline li { grid-template-columns: 65px 1fr; gap: 13px; padding: 20px 0; }.detail-timeline strong { font-size: 17px; }.detail-timeline p { font-size: 12px; }.detail-side { margin-top: 45px; }.day-nav { margin-top: 55px; } }