/* Homepage (index.html) styles, moved out of the page on 2026-09-25 with no change to how it renders
* (checked: every element's computed style matches the old inline block).
*
* Shared rules (aside cards, sign-up, mobile tab bar and so on) now come from assets/site-frame.css, which the
* homepage loads first; this file holds only what is the homepage's own. The homepage's top bar and three-column
* layout differ from the shared frame, so the block at the end of this file undoes what the frame adds there.
* Future hook: if the homepage is ever brought fully into the shared frame, delete that block.
* map.html carries its own inline copy of the top bar and layout rules too (to be centralised with the map work).
*/
:root{
--bg: #10131A;
--bg-elevated: #171B24;
--line: #262B36;
--grey-mid: #7C8494;
--grey-light: #C7CDD6;
--white: #F3F5F7;
--ember: #E2A54D;
--ember-dim: #8A6B3A;
--frost: #6FC6E8;
--c-news: #6FB8D9;
--c-guides: #E2A54D;
--c-area: #8FA37A;
--c-tripqa: #A08FD6;
--display: 'Big Shoulders Display', sans-serif;
--display-condensed: sans-serif;
--body: 'IBM Plex Sans', sans-serif;
}
.devnote{ background:var(--bg-elevated); border-bottom:1px solid var(--line); color:var(--grey-mid); font-size:12.5px; line-height:1.6; padding:10px 20px; text-align:center; }
.devnote strong{ color:var(--grey-light); }
/* ---- top bar ----
The bar itself spans full width (so its background/border reach
the viewport edges), but its content sits in an inner box matched
to .layout's own max-width and edge padding (20px, same as
.map-col/.sidebar-right) - otherwise the topbar and the map below
it are two independently-centred boxes that only line up by
coincidence at some widths. */
.topbar{
position: sticky; top:0; z-index:20;
padding:16px 0; background:rgba(16,19,26,0.92); backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
.topbar-inner{
display:flex; align-items:center; justify-content:space-between;
max-width:1400px; margin:0 auto; padding:0 20px; gap:28px;
}
.topbar-left{ display:flex; align-items:center; gap:32px; }
.wordmark{ font-family:var(--display); font-weight:700; font-size:32px; letter-spacing:-0.02em; color:var(--white); text-decoration:none; display:flex; flex:0 0 auto; opacity:0; transition:opacity 0.15s ease; }
.topbar-buttons{ display:flex; align-items:stretch; gap:10px; }
.topbar-cta--live{
background:var(--frost); flex-direction:row; align-items:center; justify-content:center;
gap:9px; padding:7px 16px; line-height:1.2;
}
.topbar-cta-title{ font-family:var(--display-condensed); font-weight:700; font-size:15px; letter-spacing:0.01em; white-space:nowrap; }
.topbar-cta-sub{ font-size:10px; font-weight:500; text-transform:none; opacity:0.85; text-align:left; }
/* Trip Advice + LIVE! were fitting on content width alone, with no
shrink step - fine down to ~900px, then they'd overflow the topbar
and get pushed off-screen to the right before the 700px breakpoint
ever kicked in, which just looked like the buttons vanishing. This
buys them room: tighter paddings/gaps and the LIVE! subtitle
dropped, so both buttons still fit down to 700px. */
@media (max-width: 900px){
.topbar{ padding:14px 0; }
.topbar-inner{ gap:14px; }
.wordmark{ font-size:26px; }
.topbar-cta{ padding:8px 12px; font-size:12px; }
.topbar-cta--live{ padding:6px 12px; gap:6px; }
.topbar-cta-sub{ display:none; }
}
@media (max-width: 480px){
.topbar-inner{ padding:0 14px; gap:8px; }
.wordmark{ font-size:22px; }
.topbar-cta{ padding:7px 10px; font-size:11.5px; }
.cta-text-full{ display:none; }
.cta-text-short{ display:inline; }
}
@media (max-width: 700px){
.topbar-inner{ padding:0 var(--gutter); } /* the homepage has its own top bar rules; same shared margin */
}
@media (max-width: 700px){
.mobile-tabbar{
display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
background:rgba(16,19,26,0.95); backdrop-filter:blur(8px);
border-top:1px solid var(--line);
padding:7px 6px calc(7px + env(safe-area-inset-bottom));
}
.mobile-tab{
flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
text-decoration:none; color:var(--grey-mid); font-size:10.5px; font-weight:600; padding:4px; border-radius:8px;
}
.mobile-tab svg{ display:block; }
.mobile-tab.active{ color:var(--mobile-tab-color, var(--white)); }
/* On body, not whichever column happens to be last - the mobile
stack's last visible block changes with stage (sidebar, an
article, ...), and the fixed tab bar covers whatever's actually
at the bottom of the page regardless of which element that is.
Matches the tab bar's own safe-area-aware height so it's never
short on notched phones. */
body{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* ---- layout ----
Two even columns (map, feed) on the left, a fixed sidebar on the
right - a CSS grid rather than flex-with-fixed-pixel-widths, so
resizing the window scales each column's content proportionally
instead of leaving one column oddly stranded mid-shrink. Stage 3 on
a standalone resort (no map needed at all - see #mapCol.minimized)
is the one deliberate exception: the map column drops out entirely
and the feed column takes its place, driven purely by CSS via
:has() so the JS that already toggles #mapCol.minimized doesn't
need to know about the grid at all. */
.layout{
display:grid; grid-template-columns: 1fr 1fr 280px;
align-items:start; max-width:1400px; margin:0 auto;
}
.layout:has(#mapCol.minimized){ grid-template-columns: 1fr 280px; }
@media (max-width: 1000px){
.layout{ grid-template-columns: 1fr 1fr; }
.layout:has(#mapCol.minimized){ grid-template-columns: 1fr; }
}
/* Mobile stack order: content first, map second - flex instead of
block so `order` can actually move the map below the feed column
(the region cards, or the guide list) without touching the DOM. */
@media (max-width: 700px){
/* align-items:start carries over from the desktop grid rule above
(this only overrides display/flex-direction) - in a column flex
container that means each child shrink-wraps to its OWN content
width instead of filling the row, so the map, the region cards
and the sidebar cards all ended up different widths. stretch
makes all three columns the full row width, THEN their matched
padding below lines up their actual content edges. */
.layout{ display:flex; flex-direction:column; align-items:stretch; }
.map-col{ order:2; }
.feed-col{ order:1; }
.sidebar-right{ order:3; }
/* .map-col/.feed-col/.sidebar-right use different side padding at
full width (20/28/20px) - each column matched its own desktop
neighbour, but stacked full-width they need to share one value or
their content edges (map frame vs region cards vs aside cards)
don't line up. */
.map-col, .feed-col, .sidebar-right{ padding-left:var(--gutter); padding-right:var(--gutter); }
}
/* ---- left: the map IS the region/resort selector ----
.map-col's padding-top matches .feed-col/.sidebar-right's (24px) so
all three columns' content starts at the same height - the map-frame
header bar, the "What region..." heading, and the Trip Advice label
all sit on one line. */
.map-col{
min-width:0; border-right:1px solid var(--line); padding:24px 20px;
display:flex; flex-direction:column; position:sticky; top:65px;
}
/* Stage 3, standalone resort: no map needed at all - not shrunk, gone
entirely, so the feed column can take the full width instead. */
.map-col.minimized{ display:none; }
@media (max-width: 700px){ .map-col{ position:static; border-right:none; border-bottom:1px solid var(--line); } }
/* Mobile never shows this inline - "Explore map" (in the nav widget)
is its only entry point there now. It used to also show at the top
level as a locked, non-interactive region picker, but that was just
doing the exact job the region cards below it already do (see
.region-card-map) - redundant weight, not a second way to browse.
#mapCol.fullscreen's own higher-specificity rule still wins this
when "Explore map" is open (that's the real, interactive map). */
@media (max-width: 700px){ .map-col{ display:none; } }
/* The bordered card wrapping both the header bar and the map itself -
the header reads as part of the map's own frame, not a separate
floating breadcrumb above it. */
.map-frame{
display:flex; flex-direction:column; flex:1 1 auto;
border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg-elevated);
}
.map-frame-header{
display:flex; align-items:center; gap:10px; padding:10px 12px;
border-bottom:1px solid var(--line); flex:0 0 auto;
}
/* Minimised state has its own single "Back to map" button below (see
.expand-btn) - the header bar (crumb + its own back button) would
just be a second, redundant way to do the same thing, so it's
dropped entirely rather than shown half-empty. */
.map-col.minimized .map-frame-header{ display:none; }
.map-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:12.5px; min-width:0; }
/* Minimised (stage-3 standalone resort): the map itself is pointless
at ~90px wide, so it's hidden outright rather than squeezed - this
button is the entire column's content instead. */
.map-col.minimized .map-wrap{ display:none; }
.expand-btn{
display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px;
background:var(--bg-elevated); border:1px solid var(--line); color:var(--grey-light);
font-size:11.5px; font-weight:600; padding:14px 6px; border-radius:8px; cursor:pointer;
text-align:center; flex:1 1 auto;
}
.map-col.minimized .expand-btn{ display:flex; }
.expand-btn:hover{ border-color:var(--frost); color:var(--frost); }
.map-wrap{ position:relative; overflow:hidden; flex:1 1 auto; min-height:220px; }
#mapFrame{ width:100%; height:100%; min-height:220px; border:0; display:block; }
.map-col:not(.minimized) .map-wrap{ height:520px; }
@media (max-width: 700px){ .map-col:not(.minimized) .map-wrap{ height:340px; } }
.map-loading{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:var(--grey-mid); font-size:13px; pointer-events:none; transition:opacity 0.2s;
}
/* ---- "Explore map" full-screen escape hatch (mobile only) ----
On mobile the map sits BELOW the content (see .layout's 700px
order rule), so tapping a region on it updates the feed column
off-screen, above wherever the user was scrolled to - it looked
like nothing happened. This lets the map take over the whole
viewport on demand instead of having to share scroll space with
the content at all. !important overrides .map-col.minimized's
display:none - a standalone resort still has a real map position
worth seeing full-screen, minimised just means it's not worth the
normal column's width. */
#mapCol.fullscreen{
display:flex !important; position:fixed; inset:0; z-index:50;
width:100%; height:100%; border:none; padding:0; background:var(--bg);
}
#mapCol.fullscreen .map-frame{ height:100%; border-radius:0; border:none; }
#mapCol.fullscreen .map-frame-header{ display:flex; }
#mapCol.fullscreen .map-wrap{ display:block; height:auto; }
body.map-fullscreen-active{ overflow:hidden; }
.map-fullscreen-close{ display:none; }
#mapCol.fullscreen .map-fullscreen-close{
display:flex; align-items:center; gap:4px; margin-left:auto; flex:0 0 auto;
background:none; border:none; color:var(--grey-mid); font-size:13px; font-weight:600;
padding:4px; cursor:pointer; font-family:inherit;
}
#mapCol.fullscreen .map-fullscreen-close:hover{ color:var(--frost); }
/* Desktop-only fullscreen trigger, living in the map's own header - the
inline map has room to spare there at every stage, unlike mobile,
which already has a dedicated "Explore map" widget pinned above the
content instead (see .mobile-nav-widget). Same button styling as
map-fullscreen-close (it's the same control, just the other state),
hidden the instant fullscreen is actually entered so the two never
show together. */
.map-fullscreen-open{ display:none; }
@media (min-width: 701px){
#mapCol:not(.fullscreen) .map-fullscreen-open{
display:flex; align-items:center; gap:4px; margin-left:auto; flex:0 0 auto;
background:none; border:none; color:var(--grey-mid); font-size:13px; font-weight:600;
padding:4px; cursor:pointer; font-family:inherit;
}
#mapCol:not(.fullscreen) .map-fullscreen-open:hover{ color:var(--frost); }
}
/* ---- mobile nav widget: paper trail + back button + "Explore map",
pinned above the stage content (order:0, ahead of .feed-col's
order:1) so it's reachable the instant the content updates,
instead of relying on the map's own header/back button, which is
buried wherever the map ends up in the stack below. ---- */
.mobile-nav-widget{ display:none; }
@media (max-width: 700px){
.mobile-nav-widget{
display:flex; align-items:center; gap:10px; order:0;
padding:12px var(--gutter); border-bottom:1px solid var(--line);
/* The topbar is position:sticky - scrollIntoView({block:'start'})
otherwise lines this widget's top edge up with the viewport's
actual top edge, which puts it straight underneath the sticky
topbar, hidden behind it. Visually that looked exactly like
landing scrolled past the nav, anchored on the title below it
instead. This reserves that space so the scroll target sits
BELOW the topbar instead of behind it. */
scroll-margin-top: 64px;
}
.explore-map-btn{
flex:0 0 auto; display:flex; align-items:center; gap:5px;
background:var(--bg-elevated); border:1px solid var(--line); color:var(--frost);
font-size:11px; font-weight:600; padding:6px 10px; border-radius:6px; cursor:pointer;
font-family:inherit; white-space:nowrap;
}
.explore-map-btn:hover{ border-color:var(--frost); }
}
/* ---- center: feed / stage content ---- */
.feed-col{ min-width:0; padding:24px 28px; border-right:1px solid var(--line); }
@media (max-width: 1000px){ .feed-col{ border-right:none; } }
@media (max-width: 700px){ .feed-col{ padding-left:var(--gutter); padding-right:var(--gutter); } } /* after the base rule above, so it wins */
.explore-map-cta{ display:none; }
.on-phone{ display:none; } /* wording that only makes sense on a phone (there is no map on the phone homepage) */
@media (max-width: 700px){
.on-desktop{ display:none; } .on-phone{ display:inline; }
/* the big Explore map button above the heading; at the top level the small one in the strip steps aside */
.explore-map-cta{
display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:0 0 20px; padding:14px 16px;
background:var(--bg-elevated); border:1px solid var(--frost); border-radius:10px; color:var(--frost);
font-size:15px; font-weight:600; line-height:1.3; text-align:center; font-family:inherit; cursor:pointer; text-decoration:none; box-sizing:border-box;
}
.explore-map-cta:hover{ background:var(--frost); color:var(--bg); }
.home-top .mobile-nav-widget .explore-map-btn{ display:none; }
}
.breadcrumb{ font-size:13px; color:var(--grey-mid); margin-bottom:10px; }
.breadcrumb button{ background:none; border:none; padding:0; font:inherit; color:var(--grey-mid); cursor:pointer; }
.breadcrumb button:hover{ color:var(--grey-light); text-decoration:underline; }
.feed-heading{ font-family:var(--display); font-weight:800; font-size:30px; color:var(--white); margin:0 0 6px; }
.feed-sub{ font-size:14.5px; line-height:1.55; color:var(--grey-mid); max-width:56ch; margin:0 0 18px; }
/* Landing intro: let it use the full column width so it doesn't wrap
to two lines needlessly, but still wrap normally (never nowrap) so
it can never overflow past the column as the window narrows. */
.feed-sub--wide{ max-width:none; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.chip{ padding:7px 14px; border-radius:7px; font-size:13px; font-weight:500; color:var(--grey-light); border:1px solid var(--line); text-decoration:none; white-space:nowrap; background:none; cursor:pointer; font-family:inherit; }
.chip.active{ background:var(--bg-elevated); color:var(--chip-c, var(--ember)); border-color:var(--chip-c, var(--ember)); }
/* region cards (stage 1 companion content) - full width of the feed
column now that the column itself is a sane, even grid track rather
than a flex item with an ad hoc pixel cap. */
.region-cards{ display:flex; flex-direction:column; gap:8px; }
.region-card{
display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line);
border-radius:10px; padding:11px; text-decoration:none; color:inherit; cursor:pointer;
transition:border-color 0.12s;
/* Tint set inline per-card (region.color at low alpha) so the card
itself reads as "that region's colour", not just a small dot. */
background:var(--region-tint, var(--bg-elevated));
}
.region-card:hover{ border-color:var(--region-color, var(--frost)); }
.region-card-image{ flex:0 0 102px; width:102px; aspect-ratio:1/1; border-radius:7px; overflow:hidden; }
.region-card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.region-card-body{ flex:1; min-width:0; }
.region-card-title{
font-family:var(--display); font-weight:700; font-size:16px; margin:0 0 4px;
color:var(--region-color, var(--white));
}
.region-card-desc, .region-card-desc-short{ font-size:12.5px; line-height:1.5; color:var(--grey-light); margin:0; }
/* The mobile card (see the map-alignment rule below) needs its own
shorter text to keep the mini-map sized against a 2-3 line block -
the desktop thumbnail card keeps the fuller region.desc unshortened,
so both versions render and CSS picks one per breakpoint rather
than JS guessing the viewport at render time. */
.region-card-desc-short{ display:none; }
/* Desktop keeps the small square thumbnail + text row (the real map
sits right there in its own column, so a second, smaller map per
card would be redundant) - the mini-map only appears in the mobile
layout below, where there's no map on screen otherwise. */
.region-card-map{ display:none; }
/* Mobile: photo full-width on top (the map-col above this used to be
a real map on desktop's terms - drag/zoom - but on mobile it was
always locked into a flat, non-interactive picker doing the exact
job these cards already do below it; removed here in favour of a
mini-map on each card instead - see #mapCol's own mobile rule).
Region name + mini-map now sit together below the photo, the map
scaled and nudged to match the design. */
@media (max-width: 700px){
.region-card{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; }
.region-card-image{ flex:none; width:100%; height:104px; aspect-ratio:auto; border-radius:0; }
.region-card-body{ display:flex; align-items:center; gap:8px; padding:12px 15px 13px; }
.region-card-map{
display:flex; flex:0 0 auto; height:85px; align-items:center; justify-content:center;
margin-top:-9px; margin-left:-4px;
}
.region-card-map svg{ height:100%; width:auto; display:block; }
.region-card-text{ flex:1 1 auto; min-width:0; margin-left:-2px; }
.region-card-desc{ display:none; }
.region-card-desc-short{ display:block; }
}
/* Wider than a phone but still under the 700px desktop switch (a
tablet in portrait, or a phone's own landscape width) - one card per
row here just leaves them stretched thin either side of the photo,
with a lot of spare width doing nothing. Two up top, two below
(Central Honshu paired with a Trip Advice tile, rather than left
alone stretched to match) - same card internals either way, just
narrower. The Trip Advice tile only exists for this grid - the
single-column phone layout and desktop both already show the real
Trip Advice content in the sidebar. */
.trip-advice-tile{ display:none; }
@media (min-width: 480px) and (max-width: 700px){
.region-cards{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.trip-advice-tile{ display:block; }
/* The sidebar's own Trip Advice card (rendered separately, below
this grid on mobile) would otherwise duplicate this tile exactly -
hidden only for this width, where the tile covers it; the
newsletter signup below it stays. Single-column phone still needs
the sidebar's own version since there's no tile there. */
#sidebarContextual{ display:none !important; }
}
/* A third band within the 2-up grid itself: right at 480px each half-
width column is too narrow for the map badge alongside the text
without squeezing it, so it's dropped there and text gets the room
back - but by ~600px each column has widened enough that the map
fits comfortably again, same as it does at both the narrower single-
column phone width and the wider edge of this same grid. */
@media (min-width: 480px) and (max-width: 600px){
.region-card-map{ display:none; }
.region-card-text{ margin-left:0; }
}
/* article-style feed cards (stage 2) */
.card{ border-bottom:1px solid var(--line); padding:20px 0; display:flex; gap:14px; position:relative; text-decoration:none; color:inherit; transition:opacity 0.12s ease; }
.card:last-child{ border-bottom:none; }
.card:hover .card-title{ color:var(--ember); }
.card-bar{ flex:0 0 3px; border-radius:2px; margin-top:3px; }
.card-body{ flex:1; min-width:0; display:flex; gap:14px; }
.card-image{ flex:0 0 140px; aspect-ratio:3/2; border-radius:3px; border:1px solid var(--line); overflow:hidden; background:linear-gradient(135deg,var(--bg-elevated),#1F2530 60%,#262c38); }
.card-image img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.card-text{ flex:1; min-width:0; }
.card-kicker{ font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px; }
.card-title{ font-family:var(--display); font-weight:700; font-size:18px; line-height:1.18; color:var(--white); margin:0 0 6px; transition:color 0.12s; }
.card-summary{ font-size:13.5px; line-height:1.5; color:var(--grey-light); margin:0; }
@media (max-width: 600px){ .card-body{ flex-direction:column; } .card-image{ flex-basis:auto; width:100%; } }
.unreviewed-row{ display:flex; align-items:center; gap:8px; padding:8px 0; font-size:13px; color:var(--grey-mid); border-bottom:1px solid var(--line); }
.unreviewed-row .dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.unreviewed-row:last-child{ border-bottom:none; }
/* article stub (stage 3) */
.article-stub-image{ width:100%; aspect-ratio:16/8; border-radius:10px; border:1px solid var(--line); overflow:hidden; margin-bottom:18px; }
.article-stub-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-stub-cta{ display:inline-block; margin-top:16px; background:var(--ember); color:var(--bg); font-size:13.5px; font-weight:600; padding:11px 20px; border-radius:7px; text-decoration:none; }
.article-stub-cta:hover{ background:#ecb567; }
.article-loading{ padding:40px 0; text-align:center; color:var(--grey-mid); font-size:13.5px; }
.injected-article{ margin:0; }
/* The guide page's own map, pulled into this preview panel (see
loadRealArticle) - the map lives in its own map-col on the real
page, outside , so it never rode along with the injected
article fragment on its own; this rebuilds it as a plain inline
card instead, sized for this narrower column rather than a full
sticky side-by-side layout. */
.preview-map{
border:1px solid var(--line); border-radius:10px; overflow:hidden;
background:var(--bg-elevated); margin:0 0 20px;
}
.preview-map-header{
display:flex; align-items:center; gap:10px; padding:10px 12px;
border-bottom:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--white);
}
.preview-map-wrap{ position:relative; }
.preview-map-wrap iframe{ width:100%; height:340px; border:0; display:block; }
@media (max-width: 700px){ .preview-map-wrap iframe{ height:260px; } }
.preview-kicker{ font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--c-guides); margin-bottom:6px; }
.preview-lead{ font-size:16px; line-height:1.6; color:var(--grey-light); max-width:64ch; margin:0 0 6px; }
.hub-members{ display:flex; flex-direction:column; gap:1px; margin-top:16px; }
.hub-member{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; text-decoration:none; color:var(--grey-light); font-size:13.5px; }
.hub-member:hover{ background:var(--bg-elevated); color:var(--white); }
.hub-member .dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.hub-member .tag{ margin-left:auto; font-size:10.5px; color:var(--grey-mid); }
.hub-member-plain{ display:flex; align-items:flex-start; gap:8px; padding:4px 10px; color:var(--grey-light); font-size:13.5px; }
.hub-member-plain .dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; margin-top:7px; }
.hub-member-plain .name{ display:block; color:var(--white); font-weight:600; }
.hub-member-plain .desc{ display:block; margin-top:1px; font-size:12px; line-height:1.4; color:var(--grey-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---- right: sidebar ---- */
.sidebar-right{ flex:0 0 280px; width:280px; padding:24px 20px; display:flex; flex-direction:column; gap:20px; position:sticky; top:65px; }
@media (max-width: 700px){ .sidebar-right, .map-col{ padding-left:var(--gutter); padding-right:var(--gutter); } } /* after their base rules, so it wins */
/* Tablet width: genuinely not enough room for 3 columns, so it drops
out. But it was ALSO disappearing on phones, where the layout has
already gone to a single stacked column and there's plenty of room
underneath - that was lost content (Trip Advice links, newsletter),
not a deliberate simplification. Below 700px it now stacks at the
bottom instead, matching how the Japan LIVE!/Trip Advice pages
already handle their own sidebar. */
@media (max-width: 1000px){ .sidebar-right{ display:none; } }
@media (max-width: 700px){ .sidebar-right{ display:flex; position:static; width:auto; border-top:1px solid var(--line); } }
.aside-list{ display:flex; flex-direction:column; gap:9px; padding-top:8px; }
.aside-list a{ font-size:13px; color:var(--grey-light); text-decoration:none; line-height:1.4; }
.aside-list a:hover{ color:var(--frost); }
.aside-more{
display:inline-flex; align-items:center; gap:4px; margin-top:11px;
font-size:12.5px; font-weight:600; color:var(--c-tripqa); text-decoration:none;
}
.aside-more:hover{ text-decoration:underline; }
#sidebarContextual{ display:flex; flex-direction:column; gap:20px; }
.aside-live{ text-decoration:none; display:block; border-color:var(--frost); transition:border-color 0.12s; }
.aside-live:hover{ border-color:var(--white); }
.aside-live .label{ display:flex; align-items:center; gap:6px; }
.aside-live-sub{ font-size:12px; color:var(--grey-mid); margin-top:6px; line-height:1.4; }
/* Where the homepage differs from the shared frame (assets/site-frame.css, loaded first): the homepage has its own
two-level top bar and a three-column layout, and no line down the sidebar. Undo here anything the shared frame sets
that the homepage never had. If the homepage is ever brought fully into the shared frame, delete this block. */
.topbar{ display:block; align-items:normal; justify-content:normal; gap:normal; }
.topbar-buttons{ margin-left:0; }
.sidebar-right{ border-left:none; }