/* /travel/tokyo/: the guide. Palette and type come from site.css (PT Sans, #0060c0 links, orange hover);
   this file only adds the guide's own layout: 44px map header, sticky section tabs, notes, facts, lightbox. */

/* header: the 44px Google-Maps strip fading to white (overrides site.css's 70px wallpaper) */
#topheader.travel{height:44px; background:#fff url("travel_bg_little.jpg") repeat-x center bottom / 4096px 44px}
#topheader.travel .navbar{flex-wrap:nowrap; padding-top:8px; padding-bottom:0; min-width:0}
h1.large{font-size:clamp(30px, 6vw, 53px); font-weight:bold; line-height:1.15; text-align:center; margin-top:18px; text-wrap:balance}

/* content column */
.main{max-width:920px; margin:0 auto; padding:14px calc(var(--gutter) + var(--safe-r)) 60px calc(var(--gutter) + var(--safe-l)); text-align:left; line-height:1.5}
.lede{margin-top:6px}
/* dashed underline = acts on this page (the blog's fast_link convention) */
.pager button.link, ol.top a{border-bottom-style:dashed}
.topbox{margin-top:18px; padding:11px 16px 13px; background:#fff; border:1px solid #ddd; border-top:3px solid #ff8f00; border-radius:6px}
.tophead{display:block; margin:0; font-weight:bold; color:#c96a00; font-size:18px}
.tophead .ic{width:20px; height:20px}
ol.top{margin:4px 0 0; padding-left:1.4em}
ol.top li{margin-top:3px; font-size:18px}
ol.top li::marker{color:#ff8f00; font-weight:bold}

/* section menu, kept in view while scrolling: one rule drawn as the bar's background; tabs sit on it with a transparent
   bottom edge, the active tab paints that edge white and so cuts a gap in the rule */
.navbar.sections{position:sticky; top:0; z-index:5; background:linear-gradient(#ccc,#ccc) left calc(100% - 1px) / 100% 1px no-repeat #fff; margin-top:24px; padding:10px 0 0; gap:0; align-items:stretch; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.navbar.sections::-webkit-scrollbar{display:none}
.navbar.sections .navbar-item{font:inherit; padding:4px 10px 6px; margin:0 6px 0 0; border:1px solid transparent; border-bottom-width:2px; border-radius:4px 4px 0 0; background:none; color:#0060c0; cursor:pointer; text-decoration:underline dashed; text-decoration-color:rgba(0,96,192,.27); text-decoration-thickness:1px; text-underline-offset:3px; line-height:22px; white-space:nowrap}
.navbar.sections .navbar-item:hover{color:#ff8f00; text-decoration-color:rgba(255,143,0,.27)}
.navbar.sections .navbar-item[aria-selected=true]{font-weight:bold; color:#111; text-decoration:none; background:#fff; border-color:#ccc #ccc #fff; background-clip:padding-box}
section h2{font-size:30px; font-weight:bold; line-height:1.2; margin-top:28px}

/* notes: thumbnail column + text */
.note{display:grid; grid-template-columns:150px 1fr; gap:22px; margin-top:26px}
.note.no-photo{grid-template-columns:1fr}
.note h3{font-size:24px; font-weight:normal; line-height:1.2; text-wrap:balance}
.note h3 strong{font-weight:bold}
.thumbs{display:grid; gap:8px; align-content:start; padding-top:5px}
.thumb{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:8px; overflow:hidden}
.thumb img{display:block; width:100%; height:auto}
.text{min-width:0; max-width:62ch}
/* Where / Why / When: one quiet block under the text, labels coloured by meaning */
.facts{display:grid; grid-template-columns:max-content 1fr; gap:3px 14px; align-items:start; margin:14px 0 0; padding:9px 13px 10px; background:#fff; border:1px solid #ddd; border-radius:6px; font-size:17px; line-height:1.45}
.facts dt{font-weight:bold; white-space:nowrap; line-height:inherit}
.facts dd{margin:0; min-width:0}
.facts dt[data-k=where]{color:#2a6db5}
.facts dt[data-k=why]{color:#c96a00}
.facts dt[data-k=when]{color:#2e7d32}
.facts dt[data-k=what]{color:#6a1b9a}
.guide ul{list-style:none; margin:6px 0 0; padding:0}
.guide li::before{content:"— "}
.guide em{font-style:italic}

/* icons: 24-unit line glyphs, coloured by the label they sit in */
.ic{width:18px; height:18px; margin-right:7px; display:inline-block; vertical-align:middle; position:relative; top:-1px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; shape-rendering:geometricPrecision}

/* map tab: Google My Maps embed */
.gmap{margin-top:12px; border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#f4f5f6}
.gmap iframe{display:block; width:100%; height:min(72vh, 560px)}

/* prev / next as plain links */
.pager{display:flex; justify-content:space-between; gap:20px; margin-top:40px; padding-top:12px; border-top:1px solid #ddd; font-size:14pt}
.pager button{font:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:left; color:#0060c0}
.pager button:hover{color:#ff8f00}
.pager button.link{border-bottom:1px solid rgba(0,96,192,.27)}
.pager button[disabled]{visibility:hidden}
.pager .k{color:#000}

/* lightbox */
dialog.lb{border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; margin:0}
dialog.lb[open]{display:block; position:fixed; inset:0; z-index:1000}
dialog.lb::backdrop{background:transparent}
dialog.lb .frame{width:100%; height:100%; display:grid; place-items:center; padding:24px 16px 48px; cursor:zoom-out; margin:0; background:rgba(0,0,0,.88)}
dialog.lb img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px}
dialog.lb figcaption{position:absolute; left:0; right:0; bottom:14px; text-align:center; color:#fff; font-size:14px; padding-inline:16px}

@media (max-width:560px){
  /* the 44px strip has no room: keep the site name and the active section only */
  #topheader.travel .navbar-item:not(.first):not(.active){display:none}
  .main{padding-top:10px}
  .note{grid-template-columns:96px 1fr; gap:12px}
  section h2{font-size:24px}
  .note h3{font-size:20px}
  .facts{font-size:16px; padding:8px 10px 9px}
  .pager{font-size:16px}
}