/* ===== Easy-to-read layer for japan-trips.html (Sept 2026) =====
Bigger Thai text for older family members + phone / tablet layout.
Loaded last, so it overrides the older styles above it. */
/* ---------- 1. Base: slightly bigger, not-so-thin text ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-weight: 400; line-height: 1.7; }
/* body copy */
.dd-lead, .ds-lead { font-size: 1.3rem; line-height: 1.7; }
.dd-step p, .ds-body p, .fm-day-sub, .fm-note p, .fm-notes-head p,
.day-act-body, .chapter-card-body p, .theme li { font-size: 1.18rem; line-height: 1.8; }
.dd-card-sub { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.dd-time li { font-size: 1.18rem; }
.dd-stop span { font-size: 1.15rem; }
.ds-hotel-name { font-size: 1.35rem; }
/* captions & small notes: never below ~16px */
.dd-video figcaption, .ds-day figcaption, .ds-map figcaption, figcaption,
.dd-lb-cap { font-size: 1.02rem; line-height: 1.55; }
.dd-route-note, .dd-time-note, .ds-note, .ds-meals, .fm-tl-by,
.dd-map-legend, .fm-note-by, .fm-empty, li.fm-tl-empty, .dd-stop-ph { font-size: 1rem; }
.ds-note { line-height: 1.6; }
/* labels in capitals: bigger, and much less letter-spacing (wide spacing breaks up Thai words) */
.eyebrow, .ds-eyebrow, .dd-card-top, .dd-step-time, .stat-lbl, .ds-hotel-lbl,
.fm-notes-kicker, .fm-family-title, .footer-meta, .footer-credit {
font-size: 0.98rem !important; letter-spacing: 0.08em !important; line-height: 1.5;
}
.dd-step-time { font-size: 1.05rem !important; }
.stat-num { font-size: 3.2rem; }
/* top menu */
.nav-link { font-size: 1rem; letter-spacing: 0.06em; }
/* tabs */
.dd-tab-day { font-size: 1rem; font-weight: 600; }
.dd-tab-place { font-size: 1.1rem; }
.dd-tab { padding: 0.75rem 0.4rem 0.7rem; }
.dd-tab.is-soon { opacity: 0.7; }
/* buttons */
.fm-add { font-size: 1.08rem; padding: 0.8rem 1.4rem; }
.fm-tl-edit { font-size: 1.02rem; padding: 0.5rem 1.1rem; }
.dd-stop-edit { font-size: 0.92rem; padding: 0.4rem 0.8rem; }
.ds-link { font-size: 1.08rem; }
.ds-chips a { font-size: 1rem; min-width: 2.8rem; min-height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; }
.dd-time .n { width: 1.55rem; height: 1.55rem; font-size: 0.85rem; }
/* map labels & pins */
.fm-label { font-size: 13.5px; }
.fm-pin { width: 32px; height: 32px; font-size: 15px; }
.leaflet-control-attribution { font-size: 11px !important; }
/* pop-up windows */
.fm-box p.fm-help { font-size: 1.08rem; }
.fm-field span { font-size: 1rem; }
.fm-row .fm-info { font-size: 0.95rem; }
.fm-note-by { font-size: 1rem; }
/* ---------- 2. Tablet (up to 1100px): all 16 tabs visible in 2 rows ---------- */
@media (max-width: 1100px) {
.dd-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); overflow-x: visible; padding-bottom: 0.5rem; }
.dd-tab:hover { transform: none; }
}
/* ---------- 3. Phone (up to 600px) ---------- */
@media (max-width: 600px) {
.wrap { padding: 0 16px; }
.dd { padding-bottom: 4rem; }
/* tabs: 4 per row, every day visible without sideways swiping */
.dd-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.dd-tab { padding: 0.6rem 0.2rem 0.55rem; }
.dd-tab-day { font-size: 0.98rem; }
.dd-tab-place { font-size: 1rem; }
/* day card: use the full phone width */
.dd-card { padding: 1.5rem 1.1rem; border-radius: 6px; }
.dd-card h3 { font-size: 2.1rem; line-height: 1.2; }
.dd-stops { gap: 0.7rem !important; }
.dd-stop span { font-size: 1.05rem; }
.dd-stop-edit { font-size: 0.85rem; padding: 0.3rem 0.6rem; top: 0.35rem; right: 0.35rem; }
/* timetable: narrow time column, larger text */
.dd-time li { grid-template-columns: 4.9rem 1fr; gap: 0.7rem; font-size: 1.1rem; padding: 0.6rem 0; }
.dd-time .t { font-size: 1.02rem; overflow-wrap: anywhere; }
.dd-map { height: 300px; }
/* story sections */
.dd-flow { margin-top: 3rem; }
.dd-step { padding-left: 1.9rem; }
.dd-step h4 { font-size: 1.75rem; line-height: 1.3; }
.dd-step p, .ds-body p, .fm-note p { font-size: 1.12rem; }
.dd-grid { gap: 0.5rem; }
/* summary */
.ds-title { font-size: 1.85rem; line-height: 1.3; }
.ds-map { margin-left: -16px; margin-right: -16px; }
.ds-map-btn, .ds-map img { border-radius: 0; }
.stat-num { font-size: 2.8rem; }
/* notes */
.fm-notes-head h4 { font-size: 1.7rem; }
.fm-notes-head .fm-add { width: 100%; justify-content: center; }
.fm-notes-list { grid-template-columns: 1fr; }
.fm-note { padding: 1rem 2.6rem 0.9rem 1rem; }
/* floating add button: smaller, out of the way */
.fm-fab { right: 0.8rem; bottom: 0.8rem; padding: 0.7rem 1.1rem; font-size: 1rem; }
/* pop-ups take the whole screen width */
.fm-modal { padding: 2vh 0.5rem; }
.fm-box { padding: 1.3rem 1rem 1.4rem; }
.fm-box h3 { font-size: 1.6rem; padding-right: 2.5rem; }
.fm-actions .fm-btn { flex: 1 1 auto; }
}
/* very narrow phones */
@media (max-width: 360px) {
.dd-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dd-time li { grid-template-columns: 4.3rem 1fr; }
}
/* "Summary" must fit in its tab; empty-state labels also big enough */
.dd-tab-day { letter-spacing: 0; }
@media (max-width: 1100px) {
.dd-tab { padding-left: 0.1rem; padding-right: 0.1rem; }
.dd-tab[data-day="0"] .dd-tab-day { font-size: 0.9rem; }
}
.dd-time li.fm-tl-empty { font-size: 1rem; }
.dd-stop.is-empty .dd-stop-ph { font-size: 1rem; }
/* wide screens: 16 tabs in one row — keep place names (e.g. Kussharo) inside their tab */
@media (min-width: 1101px) {
/* 2 rows of 8: Summary + Day 1–7, then Day 8–15 */
.dd-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.6rem; overflow-x: visible; padding-bottom: 0.5rem; }
.dd-tab { padding: 0.8rem 0.4rem 0.75rem; }
.dd-tab-day { font-size: 1.05rem; }
.dd-tab-place { font-size: 1.2rem; }
}
/* video rows: never stretch a landscape clip to match a tall phone clip */
.dd-videos { align-items: start; }
/* ===== Compact top (Sept 2026): heading + tabs + Summary intro fit above the fold ===== */
.dd { padding-top: 5.6rem !important; }
.dd-head { margin: 0 auto 1.1rem; }
.dd-head .eyebrow { margin-bottom: 0.3rem; }
.dd-head .section-title { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.15; }
.dd-head .rule { margin: 0.7rem auto; }
.dd-lead { font-size: 1.1rem !important; line-height: 1.5; margin: 0; }
.dd-tabs { gap: 0.4rem !important; padding: 0.2rem 0.2rem 0.3rem !important; }
.dd-tab { padding: 0.4rem 0.3rem 0.35rem !important; line-height: 1.2; }
.dd-tab-place { margin-top: 0; min-height: 1.1em; }
.dd-panel { margin-top: 1rem; }
.dd-summary { padding: 1.2rem clamp(1rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.5rem); }
.ds-intro { padding: 0.4rem 0 1rem !important; gap: 1.5rem 2.5rem !important; align-items: center !important; }
.ds-intro .eyebrow { margin-bottom: 0.2rem; }
.ds-intro .section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; margin-top: 0.1rem; }
.ds-intro .section-title br { display: none; }
.ds-intro .rule { margin: 0.6rem 0; }
.ds-lead { font-size: 1.08rem !important; line-height: 1.55; }
.ds-stats { gap: 0.8rem 1.5rem !important; }
.ds-stats .stat-num { font-size: 2.4rem; }
.ds-stats .stat-lbl { margin-top: 0.15rem; }
@media (max-width: 900px) {
.dd { padding-top: 4.8rem !important; }
.ds-stats { grid-template-columns: repeat(4, 1fr) !important; }
.ds-stats .stat-num { font-size: 2rem; }
.ds-stats .stat-lbl { font-size: 0.85rem !important; letter-spacing: 0.04em !important; }
}
@media (max-width: 600px) {
.dd-head .section-title { font-size: 1.9rem; }
.dd-lead { font-size: 1rem !important; }
.ds-intro .section-title br { display: inline; }
}
.dd-tab-place:empty { display: none; }
@media (max-width: 600px) {
.dd { padding-top: 5.3rem !important; }
.dd-head { margin-bottom: 0.7rem; }
.dd-head .eyebrow { font-size: 0.85rem !important; }
.dd-head .section-title { font-size: 1.7rem; }
.dd-head .rule { display: none; }
.dd-lead { display: none; }
.dd-tabs { gap: 0.3rem !important; }
.dd-tab { padding: 0.35rem 0.15rem 0.3rem !important; }
.dd-summary { padding: 0.8rem 0.9rem 1.5rem; }
.ds-intro { gap: 0.8rem !important; }
.ds-intro .section-title { font-size: 1.7rem; }
.ds-intro .section-title br { display: none; }
.ds-intro .rule { display: none; }
.ds-lead { font-size: 1rem !important; }
}