/* Shared page frame: top bar, two-column layout, sidebar cards, mobile tab bar. Edit here, not per page. */
:root{
    --gutter:16px;   /* side margin on phones (700px and under); also in site.css. Every phone rule uses it so all edges line up. */
    --bg:#10131A; --bg-elevated:#171B24; --line:#262B36; --grey-mid:#7C8494; --grey-light:#C7CDD6; --white:#F3F5F7;
    --ember:#E2A54D; --ember-dim:#8A6B3A; --frost:#6FC6E8; --c-tripqa:#A08FD6;
    --c-hokkaido:#6FC6E8; --c-northern:#E2A54D; --c-central:#8FA37A;
    --display:'Big Shoulders Display',sans-serif; --display-condensed:sans-serif; --body:'IBM Plex Sans',sans-serif;
  }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--grey-light); font-family:var(--body); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:rgba(16,19,26,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); gap:28px; }
.topbar-left{ display:flex; align-items:center; gap:10px; }
.wordmark{ font-family:var(--display); font-weight:700; font-size:32px; letter-spacing:-0.02em; color:var(--white); text-decoration:none; display:flex; opacity:0; transition:opacity 0.15s ease; }
.fonts-loaded .wordmark{ opacity:1; }
.wordmark .powder{ color:var(--white); }
.wordmark .zone{ color:var(--frost); }
.topbar-buttons{ display:flex; align-items:stretch; gap:10px; margin-left:auto; }
.topbar-cta{ display:flex; align-items:center; justify-content:center; text-align:center; background:var(--ember); color:var(--bg); font-size:13px; font-weight:600; padding:9px 18px; border-radius:6px; text-decoration:none; white-space:nowrap; }
.topbar-cta--trip{ background:var(--c-tripqa); }
.topbar-cta--live{ background:var(--frost); flex-direction:row; gap:9px; padding:7px 16px; line-height:1.2; }
/* Comes after .topbar-cta so its own background/border win the cascade, not the amber default.
   Desktop only - below 700px the bottom tab bar's own "Map" tab is already the way back, so this
   would just be a second, redundant home button competing for the same tight width budget that
   keeps Trip Advice/LIVE! fitting on one line at narrow widths. */
.topbar-cta--home{ display:flex; align-items:center; gap:6px; background:var(--bg-elevated); border:1px solid var(--line); color:var(--white); }
.topbar-cta--home:hover{ border-color:var(--frost); color:var(--frost); }
@media (max-width: 700px){
  .topbar-cta--home{ display:none; }
}
.topbar-cta-title{ font-family:var(--display-condensed); font-weight:700; font-size:15px; }
.topbar-cta-sub{ font-size:10px; font-weight:500; opacity:0.85; text-align:left; }
/* Same overflow fix as the map page: without a shrink step, Trip
     Advice + LIVE! push past the topbar's width before 700px and get
     pushed off-screen rather than hiding, which reads as the buttons
     vanishing early. */
@media (max-width: 900px){
  .topbar{ padding:14px 20px; 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; }
}
/* Trip Advice and LIVE! stay in the topbar at every width - see
     index.html for why. The bottom tab bar is a
     separate, additional way in, not a replacement for these. */
.cta-text-short{ display:none; }
@media (max-width: 480px){
  .topbar{ padding:12px 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{ padding-left:var(--gutter); padding-right:var(--gutter); }
}
.mobile-tabbar{ display:none; }
@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)); }
  body{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.layout{ display:grid; grid-template-columns: 1fr 280px; max-width:900px; margin:0 auto; align-items:start; }
@media (max-width: 700px){
  .layout{ display:block; }
}
.main-col{ padding:24px 20px; max-width:560px; }
/* The 560px cap keeps the Q&A column at the same width as LIVE!'s
     feed alongside the sidebar - at single-column mobile there's no
     sidebar to share space with, so the cap just leaves dead space on
     one side instead of using the full screen. */
@media (max-width: 700px){
  .main-col{ max-width:none; }
}
.sidebar-right{ padding:28px 20px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:20px; position:sticky; top:65px; }
@media (max-width: 700px){
  .sidebar-right{ position:static; border-left:none; border-top:1px solid var(--line); }
}
.label{ font-family:var(--display-condensed); font-weight:600; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--grey-mid); }
.aside-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px; padding:16px; }
.aside-card.newsletter{ border-color:var(--ember-dim); }
/* Same list-of-links card as japan-live.html/index.html's own "Japan Trip Advice" and
   "Find a resort by" boxes - centralised here since this is the one shared file both of the
   other pages that need it (trip-advice.html, and any future site-frame.css page) load. */
.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; }
.newsletter-form{ display:flex; gap:8px; padding-top:10px; }
.newsletter-form input{ flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); color:var(--white); padding:9px 10px; border-radius:6px; font-size:12.5px; }
.newsletter-btn{ background:var(--ember); color:var(--bg); border:none; border-radius:6px; padding:9px 14px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.newsletter-sub{ font-size:11.5px; color:var(--grey-mid); margin:4px 0 0; }
/* Small illustrative map teaser - not the live map, just a route back
     to it, since the Q&A column no longer needs to compete for space. */
.map-teaser{ text-decoration:none; color:inherit; display:block; }
.map-teaser:hover{ border-color:var(--frost); }
.map-teaser-svg{ display:block; width:100%; height:auto; margin-bottom:10px; }
.map-teaser-caption{ font-size:13px; color:var(--white); font-weight:600; }
.map-teaser-sub{ font-size:11.5px; color:var(--grey-mid); margin-top:2px; }

/* Anti-spam trap field in the newsletter form: must never be visible */
.newsletter-form .signup-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }