:root{
    --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-news:#6FB8D9; --c-video:#C97B84; --c-gear:#6FA79E;
    --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; }
  }

  .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)); }
    /* On body, not whichever column happens to be last - 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)); }
  }

  /* Two real columns, but the feed itself keeps the real site's own
     narrow, single-file mobile-app width (560px, same as index.html) -
     the earlier version stretched the cards to fill the whole 1fr track,
     which is exactly the "wide desktop feed" look the real site doesn't
     have. The sidebar sits in the space that opens up alongside it. */
  .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 feed at the real site's narrow desktop
     width 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; } }

  .hero-eyebrow{ font-family:var(--display-condensed); font-weight:700; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--frost); margin-bottom:8px; }
  .main-col h1{ font-family:var(--display); font-weight:800; font-size:27px; color:var(--white); margin:0 0 8px; }
  .main-col > p{ font-size:14px; line-height:1.55; color:var(--grey-mid); margin:0 0 20px; }

  .region-filter-banner{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--grey-mid); background:var(--bg-elevated); border:1px solid var(--line); border-radius:7px; padding:10px 14px; margin:0 0 16px; }
  .region-filter-banner strong{ color:var(--white); }
  .region-filter-banner a{ color:var(--frost); text-decoration:none; margin-left:auto; }
  .region-filter-banner a:hover{ text-decoration:underline; }
  .pz-region-hidden{ display:none !important; }

  .chip-row{ display:flex; gap:8px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:4px; border-bottom:1px solid var(--line); }
  .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{ border-color:transparent; }
  .chip[data-cat="all"].active{ background:rgba(111,198,232,0.14); color:var(--frost); }
  .chip[data-cat="news"].active{ background:rgba(111,184,217,0.16); color:var(--c-news); }
  .chip[data-cat="video"].active{ background:rgba(201,123,132,0.16); color:var(--c-video); }
  .chip[data-cat="gear"].active{ background:rgba(111,167,158,0.16); color:var(--c-gear); }

  /* ---- feed cards: the real index.html pattern, not a side-thumbnail
     card - full-width image/video on top, then a meta line (type ·
     resort · date · source credit), title, summary, outbound link. ---- */
  .feed{ padding-top:14px; }
  .card{ border-bottom:1px solid var(--line); padding:22px 0; display:flex; gap:14px; position:relative; transition:opacity 0.12s ease; }
  .card:last-child{ border-bottom:none; }
  .card-link::after{ content:''; position:absolute; inset:0; }
  .card:hover .card-title{ color:var(--ember); }
  .card-title{ transition:color 0.12s; }
  .card-bar{ flex:0 0 3px; border-radius:2px; margin-top:3px; }
  .card-body{ flex:1; min-width:0; }
  .card-image{ aspect-ratio:3/2; border-radius:3px; margin-bottom:12px; border:1px solid var(--line); overflow:hidden; background:var(--bg-elevated); }
  .card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
  .video-frame{ position:relative; width:100%; aspect-ratio:16/9; margin-bottom:12px; border-radius:3px; border:1px solid var(--line); background:#000; overflow:hidden; }
  .video-frame img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0.85; }
  .play-button{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; background:rgba(16,19,26,0.72); border:1px solid rgba(243,245,247,0.35); display:flex; align-items:center; justify-content:center; }
  .play-button::after{ content:''; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--white); margin-left:3px; }
  .card-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--grey-mid); margin-bottom:6px; }
  .card-meta .dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
  .meta-right{ margin-left:auto; display:flex; align-items:center; gap:8px; white-space:nowrap; }
  .card-date{ color:var(--grey-mid); white-space:nowrap; }
  .img-credit{ position:relative; z-index:1; color:var(--grey-mid); text-decoration:none; opacity:0.75; }
  .img-credit:hover{ opacity:1; text-decoration:underline; }
  .card-title{ font-family:var(--display); font-weight:700; font-size:20px; line-height:1.15; color:var(--white); margin:0 0 6px; }
  .card-summary{ font-size:14px; line-height:1.55; color:var(--grey-light); margin:0 0 10px; }
  .card-link{ position:relative; z-index:1; font-size:13px; font-weight:600; color:var(--ember); text-decoration:none; border-bottom:1px solid var(--ember-dim); }
  .card-link:hover{ border-color:var(--ember); }
  .gear-price{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--white); margin:0 0 6px; }
  .gear-price .rrp{ font-family:var(--body); font-weight:400; font-size:13px; color:var(--grey-mid); text-decoration:line-through; }
  .gear-shot{ position:relative; aspect-ratio:3/2; border-radius:3px; margin-bottom:12px; border:1px solid var(--line); overflow:hidden; background:var(--bg-elevated); }
  .gear-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .gear-shot.has-carousel{ cursor:pointer; }
  .gear-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; z-index:1; }
  .gear-dots button{ width:7px; height:7px; padding:0; border-radius:50%; border:none; background:rgba(16,19,26,0.4); cursor:pointer; }
  .gear-dots button[aria-current="true"]{ background:var(--c-gear); }

  .sidebar-right{ padding:24px 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); }
  .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(--c-tripqa); }
  .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; }

  .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; }

/* The carousel hides pictures with the hidden attribute; display:block above would override it, leaving them all showing */
.gear-shot img[hidden]{ display:none; }

/* A link to one card (japan-live.html#<anchor>, as used by Facebook posts and the news feed) lands with the
   card clear of the fixed top bar, and the card is outlined so the reader sees which one was meant. */
#feed .card{ scroll-margin-top:96px; }
#feed .card:target{ box-shadow:0 0 0 2px var(--frost); }

/* Japan LIVE archive (japan-live-archive-<season>.html): an ended offer
   carries a label with its end date; the intro and the links between Japan LIVE and the season pages. */
.card-ended{ display:inline-block; font-size:12px; font-weight:600; color:var(--ember); border:1px solid var(--ember-dim); border-radius:4px; padding:2px 8px; margin:0 0 8px; }
.archive-intro{ color:var(--grey-light); max-width:62ch; margin:-4px 0 16px; font-size:15px; line-height:1.5; }
.archive-intro a, .hero-eyebrow a{ color:inherit; }
.live-archive-links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:28px 0 8px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; }
.live-archive-links a{ color:var(--frost); text-decoration:none; }
.live-archive-links a:hover{ text-decoration:underline; }