/* Forecast Japan — highway signage design system, Japanese cut
 *
 * Sibling to Forecast Norway, Canada, Britain, Italy, Euro and weather.city, and
 * deliberately readable as one network: the same warm paper ground, the same
 * Overpass / Overpass Mono, the same guide-sign panel, exit chips, card grid
 * and timeline. What changes is the colour and the roadway vocabulary.
 *
 * What Japan's signs actually are, and why this one is red anyway
 * ---------------------------------------------------------------
 * Britain's guide sign is motorway blue, Canada's Trans-Canada red, Norway's the
 * black-on-yellow of a gult skilt, Italy's autostrada green. Japan's guide signs
 * are **green** on the expressways and **blue** on ordinary roads — and both of
 * those are already taken by siblings in this network.
 *
 * So the panel here is the other unmistakably Japanese colour: **Hinomaru
 * crimson**, #BC002D, the red of the flag. It is not a road colour and does not
 * pretend to be. Everything around it is, and is used exactly where the roadway
 * puts it:
 *
 *   - the guide-sign panel is crimson with white lettering and a white keyline
 *   - the route marker is the **onigiri** — Japan's blue inverted-triangle
 *     national-route shield, the one every driver reads as a 国道 number. It
 *     sits *on* the panel, which is what a real sign does: the board is the
 *     destination, the shield is the road it names.
 *   - exit chips are labelled 出口, because that is what a Japanese sign says
 *   - expressway green is the working accent: the timeline, the section rules,
 *     the card heads and the controls. On the ground it is the other class of
 *     road, and here it is the other class of information.
 *   - amber is the live badge and the warning colour, and nothing else — the
 *     colour of a 注意 plate, used sparingly for that reason.
 *   - the temperature scale is Celsius and the wind scale **metres per second**,
 *     as JMA, the prefectural bulletins and the marine warnings state them. A
 *     typhoon is described in Japan by its metres per second, not by a category.
 *
 * The page is light paper throughout. Model imagery sits in a dark inset panel,
 * the same way weather.city frames its national outlook figures.
 */

:root {
  --paper: #e6e2da;
  --card: #ffffff;
  --ink: #161616;
  --ink2: #46443e;

  /* Hinomaru crimson — the guide-sign panel, and the site's primary note.
     White lettering on it and a white keyline. Not a road colour: the national
     one, chosen because both of Japan's real sign colours are already worn by
     siblings in this network. See the note at the top. */
  --sign: #bc002d;
  --sign-dk: #96001f;
  --sign-tx: #ffffff;
  --sign-sub: rgba(255, 255, 255, .74);
  --sign-line: #ffffff;

  /* The onigiri — Japan's blue national-route shield, on the panel and in
     the masthead. Blue on white is what a 国道 marker actually is. */
  --eroad: #10559a;
  --eroad-dk: #0b3f76;
  --eroad-sub: #c3d9f0;

  /* Amber — the live badge, the warning state, and nothing else. The colour
     of a Japanese 注意 plate; deliberately not crimson, which is the panel. */
  --flag: #e8820c;
  --flag-dk: #b3630a;

  /* Expressway green — every working accent: the timeline, the section rules,
     the card heads and the controls. The colour of a Japanese 高速道路 board. */
  --motorway: #0b6e4f;
  --motorway-dk: #084f39;
  --motorway-sub: #c6e6d6;

  /* Deeper blue for the secondary card head and controls — the onigiri blue. */
  --blue: #10559a;
  --navy: #082f5c;
  --blue-sub: #d2e4f7;

  --line: #c9c5bc;
  --line2: #e4e1d9;
  --mut: #8a867c;
  --amber: #e8a013;

  /* Dark inset used for model imagery panels */
  --figure: #0a0e14;
  --figure-line: #223142;

  --font: 'Overpass', Helvetica, Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, monospace;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 18px; }

/* ── thin utility bar ─────────────────────────────────── */
.util {
  background: var(--ink); color: #cfccc4; border-bottom: 3px solid var(--sign);
  position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .22);
}
.util .bar {
  max-width: 1560px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; flex-wrap: wrap;
}
.util .mono { font-size: 11px; letter-spacing: .06em; }
.util .lnks { display: flex; gap: 16px; flex-wrap: wrap; }
.util a { color: #e9e7e0; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.util a:hover { color: var(--sign); text-decoration: none; }
.util a[aria-current="page"] { color: var(--sign); }

/* ── macro-area strip ─────────────────────────────────────
   A second tier of the top navigation, because a place is a destination people
   return to and a model is not — you look up the Nord-Est far more often than
   you choose between ICON-2I and MOLOCH. Sits directly under the utility bar
   and shares its geometry so the two read as one masthead.

   The eight regions rather than the 47 prefectures, because that is how the
   country is divided in a national bulletin: "al Nord-Ovest, nubi sparse".
   The prefectures are in the explorer's own place picker, where a long list is
   fine and a strip of twenty would wrap on any laptop. */
.provbar {
  background: var(--sign); color: var(--sign-tx);
  border-bottom: 2px solid var(--sign-line);
}
.provbar .bar {
  max-width: 1560px; margin: 0 auto; padding: 5px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.provbar .lbl {
  font: 700 9px var(--mono-font); letter-spacing: .14em;
  color: rgba(0, 0, 0, .55); white-space: nowrap;
}
.provbar .lnks { display: flex; gap: 4px; flex-wrap: wrap; }
.provbar a {
  font: 800 11px var(--font); letter-spacing: .02em; color: #fff;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.provbar a:hover { background: rgba(0, 0, 0, .12); text-decoration: none; }
.provbar a[aria-current="page"] { background: var(--sign-line); color: var(--sign); }

/* ── guide sign panel ─────────────────────────────────── */
.sign {
  background: var(--sign); border-radius: 10px; color: var(--sign-tx);
  padding: 26px 24px 24px; position: relative;
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 7px var(--sign-line),
              0 10px 30px rgba(0, 0, 0, .16);
}
.sign a { color: var(--sign-tx); }
.signhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signhead img { width: 62px; height: 62px; flex: none; display: block; }
.word {
  font-weight: 900; font-size: clamp(28px, 5.4vw, 50px); line-height: .92;
  letter-spacing: -.02em; margin: 0;
}
.word .yl { color: var(--flag); }
.tag {
  margin: 8px 0 0; font-weight: 700; font-size: clamp(13px, 2.2vw, 16px);
  color: var(--sign-sub); letter-spacing: .01em;
}

/* The onigiri — Japan's national-route shield.
   A 国道 marker is a blue inverted triangle with a white keyline and the route
   number in white; drivers call it the onigiri for its shape. It is rendered
   here as a rounded plate rather than a true triangle because it has to hold
   three lines of type, but it keeps the blue, the white keyline and the
   proportions. It sits on the crimson panel with white between them, which is
   what a real Japanese direction sign does: the board is the destination, the
   shield is the road. Expressway green is the *other* class of road and does
   the working accent instead, which is also where the roadway puts it. */
.shield {
  background: var(--eroad); color: #fff; border: 2.5px solid #fff;
  border-radius: 6px; padding: 5px 11px 6px; text-align: center; line-height: 1;
  flex: none; display: inline-block; box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.shield .a { font-size: 8px; font-weight: 700; letter-spacing: .16em; color: var(--eroad-sub); display: block; }
.shield .b { font-size: 20px; font-weight: 900; letter-spacing: .04em; display: block; color: #fff; }
.shield .c { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--eroad-sub); display: block; }

/* Exit chips — 出口 (deguchi) is what a Japanese sign calls one.
   White keyline and white lettering, because the chips sit on the crimson panel
   and that is the contrast a real guide board uses. */
.exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.exits .lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: rgba(0, 0, 0, .6); }
.mm {
  background: rgba(255, 255, 255, .34); border: 1.5px solid rgba(0, 0, 0, .55);
  border-radius: 5px; padding: 6px 12px; font-family: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: .03em; cursor: pointer; color: var(--sign-tx);
}
.mm:hover { background: var(--sign-line); color: var(--sign); border-color: var(--sign-line); text-decoration: none; }

/* ── section rule header ──────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule .ln {
  height: 3px; flex: 1;
  background: repeating-linear-gradient(90deg, var(--motorway) 0 18px, transparent 18px 34px);
}
.rule h2 {
  margin: 0; color: var(--motorway); font-size: 15px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.rule .sub { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* ── cards ────────────────────────────────────────────── */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0; overflow: hidden; display: block; color: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08); transition: transform .14s, box-shadow .14s;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); text-decoration: none; }
.card .chead {
  background: var(--motorway); color: #fff; padding: 9px 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card .chead.blue { background: var(--blue); }
.card .chead.red { background: var(--flag); }
.card .chead .k { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--motorway-sub); }
.card .chead.blue .k { color: var(--blue-sub); }
.card .chead.red .k { color: #f2c9d2; }
.card .cbody { padding: 14px; }
.card h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}

/* ── controls ─────────────────────────────────────────── */
.btn {
  cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink2);
  border-radius: 3px; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 7px 12px; line-height: 1.3;
}
.btn:hover { border-color: var(--motorway); color: var(--ink); }
.btn.on, .btn[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: #08488a; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-go { background: var(--blue); color: #fff; border-color: #08488a; font-weight: 900; letter-spacing: .06em; }
.btn-go:hover { background: #0b6bc4; color: #fff; }

select, input[type="text"], input[type="search"] {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 6px 9px; font-family: var(--font);
  font-weight: 700; font-size: 12px;
}
select:focus, input:focus, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* The `hidden` attribute is a promise the HTML makes, and a layout rule as ordinary
   as `.toolbar .group > div { display: flex }` outranks it on specificity and quietly
   breaks it — which is how the wind options first shipped visible while switched off.
   Restore it once, globally, rather than re-winning the argument per component. */
[hidden] { display: none !important; }

label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* ── timeline ─────────────────────────────────────────────
   Transport, scrubber and a UTC tick strip, in one card under the map. Shared by
   every model viewer, because a forecast loop is a forecast loop whether the frames
   are HRDPS hours or GDPS days.

   The range is index-based, so every frame gets equal width and the thumb always
   lands on one, and ticks are drawn on frames rather than at arbitrary clock times.
   Labels therefore thin out across a run exactly where its cadence coarsens. */
.timeline {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px 9px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.tl-side { display: flex; flex-direction: column; gap: 5px; }
.tl-lab { font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut); }
.tl-transport { display: flex; align-items: center; gap: 5px; }
.tl-track { flex: 1 1 340px; min-width: 240px; display: flex; flex-direction: column; }
.tl-track input[type="range"] { width: 100%; margin: 0; accent-color: var(--motorway); }
/* Inset by half a thumb so the first and last ticks sit under the thumb's travel,
   not under the ends of the groove the thumb never reaches. */
.tl-ticks { position: relative; height: 23px; margin: 3px 9px 0; pointer-events: none; }
.tl-ticks .tk { position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; }
.tl-ticks .tk.at-start { transform: translateX(-2px); align-items: flex-start; }
.tl-ticks .tk.at-end { transform: translateX(calc(-100% + 2px)); align-items: flex-end; }
.tl-ticks .tk i { width: 1px; height: 5px; background: var(--line); display: block; }
.tl-ticks .tk span { font: 700 8.5px var(--mono-font); color: var(--mut);
  white-space: nowrap; line-height: 1; margin-top: 3px; letter-spacing: .02em; }
/* The tick that opens each forecast day carries the date and the accent green;
   the hours within that day are hairlines. */
.tl-ticks .tk.day i { height: 9px; width: 2px; background: var(--motorway); }
.tl-ticks .tk.day span { color: var(--ink2); font-weight: 800; }
/* Buffer fill. Sits between the scrubber and the tick strip, so the thing that says
   "the loop is ready" is directly under the thing you drag. It fades out once full
   rather than staying as chrome nobody needs. */
.tl-buffer { height: 2px; margin: 2px 9px 0; border-radius: 2px; background: var(--line2);
  overflow: hidden; transition: opacity .4s ease .3s; }
.tl-buffer::before { content: ""; display: block; height: 100%; width: var(--pct, 0%);
  background: var(--motorway); transition: width .15s linear; }
.tl-buffer.is-full { opacity: 0; }
.tl-ends { display: flex; justify-content: space-between; gap: 10px;
  font: 700 9.5px var(--mono-font); color: var(--mut); letter-spacing: .02em; }
.tl-count { font: 900 13px var(--mono-font); color: var(--ink); }
.tl-hint { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }

/* ── buffer policy chrome ──────────────────────────────────
   New with the converged maptimeline.js. The buffer bar's dashed tail is the part of
   the run deliberately not fetched (see Timeline.buffer); LOAD ALL beside the frame
   counter fetches it, and says what that costs. The button is created by the module,
   so there is no markup for it here — only these rules. */
.tl-buffer { position: relative; }
.tl-buffer.is-held::after {
  content: ""; position: absolute; right: 0; top: 0; height: 100%; width: var(--held, 0%);
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.tl-load { font-size: 10px; padding: 4px 8px; margin-top: 4px; letter-spacing: .06em;
           font-family: var(--mono-font); white-space: nowrap; }
.tl-load:hover { border-color: var(--motorway); color: var(--motorway); }


/* Segmented control — the speed menu, and anything else that is one choice of a few */
.seg { display: flex; }
.seg button { font: 700 11px var(--mono-font); background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); border-left-width: 0; padding: 5px 8px; cursor: pointer; }
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--motorway); color: #fff; border-color: var(--motorway); }
.seg button:disabled { cursor: not-allowed; }
/* A segment the active model or cycle cannot drive at all. Greyed as a block rather
   than hidden: a control that quietly vanishes reads as a bug, one that is greyed out
   reads as an answer, and a control strip that changes length as you switch models is
   disorienting. */
.seg.unavailable { opacity: .35; }
.seg.unavailable button { cursor: not-allowed; text-decoration: line-through;
  text-decoration-thickness: 1px; }

/* Breadcrumbs and drill chips are anchors now, not buttons, so places can be
   middle-clicked into a new tab and right-click-copied. They still have to look
   exactly like the controls they replaced — an underline on hover is the browser's
   idea, not ours. */
a.crumb, a.chip { text-decoration: none; display: inline-block; }
a.crumb:hover, a.chip:hover { text-decoration: none; }
.crumb.on { color: var(--ink); text-decoration: underline;
            text-decoration-color: var(--motorway); text-underline-offset: 3px;
            text-decoration-thickness: 2px; }

/* Unit toggle — a segmented control, but a primary one, so it is a touch larger
   than the speed menu and uses the flag red rather than the accent green. Two
   buttons rather than a menu: it is a binary people flip back and forth, and a
   select turns one click into two. */
#units button { font: 800 12px var(--mono-font); padding: 6px 11px; }
#units button.on { background: var(--ink); border-color: var(--ink); color: var(--sign); }

/* The wind overlay sits above the map and takes no pointer events — the map still
   drags and the value probe still reads through it. */
#wind-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
#wind-mode button { font: 700 10.5px var(--mono-font); padding: 5px 8px; }
#wind-mode button.on { background: var(--motorway); border-color: var(--motorway); color: #fff; }

/* ── misc ─────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.badge-live { background: var(--flag); color: #fff; }
.badge-new { background: var(--flag); color: #fff; }
.badge-soon { background: #efece5; color: var(--mut); border: 1px solid var(--line); }

.dim { color: var(--ink2); }
.faint { color: var(--mut); }

.site-footer {
  border-top: 3px solid var(--sign); margin-top: 44px; padding: 18px 0 34px;
  color: var(--ink2); font-size: 12px; font-weight: 600; background: #ddd8ce;
}
.site-footer a { color: var(--navy); font-weight: 800; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--sign);
  padding: 9px 14px; z-index: 200; font-weight: 800;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── wind options ─────────────────────────────────────────
   Sub-controls of the wind mode segment, and styled to read as subordinate to it:
   indented under a rule, smaller labels, and hidden outright when the active mode
   has nothing for them to change. */
.wind-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
             padding-left: 9px; border-left: 2px solid var(--line2); }
.wind-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wind-opt label { font-size: 9px; letter-spacing: .09em; }
.wind-opt select { padding: 3px 5px; font-size: 11px; font-weight: 700; min-width: 92px; }

/* ══════════════════════════════════════════════════════════════════════════
   Place pages — /<prefecture> and /<prefecture>/<city>
   ------------------------------------------------------------------------
   The explorer is the site's model side; these are its place side. Not built
   yet on this member of the network — the routes serve the explorer framed on
   the place — but the styles come with the shared sheet and are kept so a point
   forecast can be added without a second stylesheet. Same paper, same crimson
   guide-sign panel, same expressway green for anything that does work; the only
   new colour is the amber already in the palette, used for a watch, and the
   onigiri blue re-used for a route reference.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── breadcrumb + compass row above the sign ───────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono-font, 'Overpass Mono', monospace);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mut); margin: 0 0 12px; }
.crumbs a { color: var(--motorway); }
.crumbs .sep { color: var(--line); }

/* ── the live conditions headline on a city page ───────────────────────── */
.nowcard { display: grid; gap: 18px; grid-template-columns: minmax(210px, 300px) 1fr;
  align-items: center; }
@media (max-width: 660px) { .nowcard { grid-template-columns: 1fr; } }
.nowtemp { display: flex; align-items: baseline; gap: 10px; }
.nowtemp .deg { font-size: clamp(52px, 11vw, 78px); font-weight: 900; line-height: .95;
  letter-spacing: -.03em; color: var(--ink); }
.nowtemp .un { font-size: 17px; font-weight: 900; color: var(--mut); }
.nowcond { font-size: 17px; font-weight: 800; margin: 6px 0 0; }
.nowmeta { display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.nowmeta div { border-left: 3px solid var(--motorway); padding-left: 10px; }
.nowmeta .k { display: block; font-family: 'Overpass Mono', monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nowmeta .v { display: block; font-size: 17px; font-weight: 800; }

/* ── metro / city tiles carrying a live reading ────────────────────────── */
.placegrid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); }
.placetile { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 13px; display: block; color: inherit;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .07); transition: transform .14s, box-shadow .14s; }
a.placetile:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(0, 0, 0, .12);
  text-decoration: none; }
.placetile .nm { font-size: 15px; font-weight: 900; letter-spacing: -.01em; display: block; }
.placetile .sub { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.placetile .row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 9px; }
.placetile .tm { font-size: 27px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.placetile .gl { font-size: 21px; line-height: 1; }
.placetile .cd { font-size: 12px; font-weight: 700; color: var(--ink2); margin-top: 4px;
  min-height: 1.2em; }

/* ── the seven-day column set ──────────────────────────────────────────── */
.fcstrip { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.fcday { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 12px; }
.fcday .d { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--motorway); }
.fcday .g { font-size: 25px; line-height: 1.15; }
.fcday .t { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.fcday .t .lo { color: var(--blue); }
.fcday .c { font-size: 12px; font-weight: 600; color: var(--ink2); line-height: 1.35; }
.fcday .p { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  color: var(--blue); letter-spacing: .05em; }

/* ── the 24-hour scroller ──────────────────────────────────────────────── */
.hrscroll { overflow-x: auto; padding-bottom: 4px; }
.hrrow { display: flex; gap: 8px; min-width: max-content; }
.hrcell { flex: 0 0 auto; width: 74px; text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 4px; }
.hrcell .h { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--mut); letter-spacing: .05em; }
.hrcell .g { font-size: 17px; line-height: 1.3; }
.hrcell .t { font-size: 16px; font-weight: 900; }
.hrcell .p { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--blue); }

/* ── warnings. Red is the flag red doing double duty here,
      which is right: on this site red already means "the sign is talking". ── */
.alerts { display: grid; gap: 9px; }
.alert { border-radius: 7px; padding: 11px 14px; border: 1px solid transparent;
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.alert .lv { font-family: 'Overpass Mono', monospace; font-size: 10px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; }
.alert .tx { font-size: 14.5px; font-weight: 800; }
.alert.warning { background: #fdeceb; border-color: var(--flag); color: var(--flag-dk); }
.alert.watch { background: #fdf4e0; border-color: var(--amber); color: #7a5405; }
.alert.statement, .alert.advisory { background: var(--card); border-color: var(--line); color: var(--ink2); }
.alert-none { font-size: 14px; font-weight: 700; color: var(--motorway-dk);
  background: #eef7f2; border: 1px solid var(--motorway-sub); border-radius: 7px; padding: 11px 14px; }

/* ── the prefecture outline map ────────────────────────────────────────── */
.provmap { background: linear-gradient(180deg, #eef1f2 0%, #dfe4e5 100%);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
/* Japan is an extreme case of this: the archipelago spans 23 degrees of latitude
   and its prefectures range from a compact Kagawa to a Hokkaido larger than
   Kyushu and Shikoku together, while Okinawa is a chain 1,000 km long and almost
   no width at all. Left alone those render as a tall column or a thread, so the
   frame is capped and the outline letterboxes inside it — the shape stays
   honest, which a squashed viewBox would not. */
.provmap svg { display: block; width: 100%; height: auto; max-height: 620px; }
.provmap .ghost { fill: #d8d3c8; stroke: #c2bcae; stroke-width: 1.4; }
.provmap .home { fill: #fdf1c8; stroke: var(--sign-dk); stroke-width: 2.4; stroke-linejoin: round; }
.provmap .dot { fill: var(--motorway); stroke: #fff; stroke-width: 2; cursor: pointer; }
.provmap .dot.big { stroke-width: 2.4; }
.provmap text.lb { font-family: 'Overpass', sans-serif; font-weight: 800; fill: #fff;
  paint-order: stroke; stroke: rgba(12, 16, 20, .9); stroke-width: 4.5;
  stroke-linejoin: round; pointer-events: none; }

/* ── unit toggle, sitting where the explorer's own one does ────────────── */
.unitrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unitrow .lbl { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mut); }

/* ── neighbour compass, the prefecture-to-prefecture step ─────────────── */
.compass { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.compass .nb { display: inline-flex; align-items: center; gap: 7px; background: var(--card);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 13px;
  font-size: 13.5px; font-weight: 800; color: inherit; }
.compass .nb:hover { border-color: var(--motorway); text-decoration: none; }
.compass .nb .ar { color: var(--motorway); font-weight: 900; }

.stamp { font-family: 'Overpass Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }

/* ══════════════════════════════════════════════════════════════════════════
   The national hero map
   ------------------------------------------------------------------------
   Flat colour, not terrain. The explorer carries shaded relief; the front
   page is the guide sign, and the whole point of this map is that a prefecture
   and a city are things you click, which a photographic basemap would fight.
   Land is the paper one step warmer, water is the onigiri blue at low
   saturation, the roads are expressway green, and crimson is reserved for the
   two things that are live: a hovered prefecture and a place dot.
   ══════════════════════════════════════════════════════════════════════════ */

.herostage { position: relative; margin: 16px auto 0; max-width: 1000px;
  background: linear-gradient(180deg, #dfe6ea 0%, #cdd9df 55%, #bcccd4 100%);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 10px 28px rgba(0, 0, 0, .10); }
.herostage svg { display: block; width: 100%; height: auto;
  opacity: 0; transition: opacity .5s ease; }
.herostage svg.in { opacity: 1; }

/* The neighbours — the Korean peninsula, the Primorye and Sakhalin coasts, and
   the Chinese seaboard: darkened over the relief rather than filled flat, so the
   terrain still reads next door but Japan is plainly the lit part of the map. */
#heroMap .nb path { fill: rgba(46, 43, 36, .46); stroke: rgba(255, 255, 255, .32);
  stroke-width: 1; pointer-events: none; }

/* The prefectures are the click targets, and they carry no fill of their own — the
   relief underneath is the fill. A white keyline lifts the border off the terrain,
   the way a guide sign's edge does, and hover washes the prefecture in crimson
   without hiding the ground under it. */
#heroMap .prov path { fill: transparent; stroke: rgba(255, 255, 255, .78);
  stroke-width: 1.5; stroke-linejoin: round; transition: fill .13s ease; cursor: pointer; }
#heroMap .prov a:hover path, #heroMap .prov path.on {
  fill: rgba(213, 43, 30, .28); stroke: #fff; stroke-width: 2.4; }
#heroMap .prov a:focus path { outline: none; fill: rgba(213, 43, 30, .28);
  stroke: #fff; stroke-width: 2.4; }

#heroMap .lake path { fill: rgba(150, 185, 208, .72); stroke: rgba(255, 255, 255, .45);
  stroke-width: .8; pointer-events: none; }

/* the autostrade and the primary strade statali, cased in white so they
   read across both the land fill and the ghosted neighbours */
#heroMap .road { pointer-events: none; }
#heroMap .road .casing { fill: none; stroke: #fff; stroke-width: 3.4; opacity: .85;
  stroke-linecap: round; stroke-linejoin: round; }
#heroMap .road .ink { fill: none; stroke: url(#tch); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

#heroMap .plabel text { font-family: var(--mono-font); font-size: 15px;
  font-weight: 700; letter-spacing: .12em; fill: rgba(255, 255, 255, .96);
  paint-order: stroke; stroke: rgba(24, 28, 32, .55); stroke-width: 3;
  stroke-linejoin: round; pointer-events: none; text-transform: uppercase; }

#heroMap .city .dot { fill: var(--flag); stroke: #fff; stroke-width: 1.8; cursor: pointer; }
#heroMap .city .dot.big { stroke-width: 2.2; }
/* a capital gets a ring, so the map reads in two tiers without a second colour */
#heroMap .city .dot.cap { stroke: #fff; stroke-width: 2.2;
  filter: drop-shadow(0 0 0 var(--flag)); }
#heroMap .city .dot.cap + text, #heroMap .city .dot.cap ~ text.lb { font-weight: 900; }
#heroMap .city a:hover .dot { fill: var(--flag-dk); stroke-width: 3; }
#heroMap .city .lead { stroke: rgba(20, 24, 28, .55); stroke-width: 1.1;
  pointer-events: none; }
#heroMap .city text.lb { font-family: var(--font); font-weight: 800;
  font-size: 15px; fill: #fff; paint-order: stroke; stroke: rgba(14, 18, 22, .82);
  stroke-width: 3.2; stroke-linejoin: round; pointer-events: none; }
#heroMap .city text.tp { font-family: var(--mono-font); font-weight: 700;
  font-size: 13px; fill: #c9d7f2; paint-order: stroke; stroke: rgba(14, 18, 22, .82);
  stroke-width: 3; stroke-linejoin: round; pointer-events: none; }

.herohint { position: absolute; transform: translate(-50%, -190%); pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 5px; padding: 5px 10px;
  font-family: var(--mono-font); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity .12s ease; }
.herohint.show { opacity: 1; }

.herolegend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  justify-content: center; margin-top: 11px; }
.herolegend .lg { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono-font); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.herolegend .sw { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }

@media (max-width: 620px) {
  #heroMap .city text.lb { font-size: 20px; }
  #heroMap .city text.tp { font-size: 18px; }
  #heroMap .plabel text { font-size: 19px; }
}