/* Home: the front door to Japan's rail. Kyushu is the one open module; the rest is visible and greyed.
   Everything uses the site's tokens, so it follows the light and dark themes. */

/* Hero */
.world{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"copy map" "key map";column-gap:clamp(1.5rem,5vw,4.5rem);row-gap:0;align-items:center;padding-block:clamp(1.25rem,4vw,3rem) clamp(1rem,3vw,2rem)}
.world-copy{grid-area:copy;align-self:end;min-width:0}
.world-map{grid-area:map}
/* A quiet headline: the lightest weight we ship, open tracking, modest size and a softened tone. */
.world-title{margin:0;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.2;font-weight:400;letter-spacing:.018em;text-wrap:balance;color:color-mix(in srgb,var(--ink) 90%,transparent);font-synthesis:none}
html:is(:lang(ja),:lang(zh),:lang(ko),:lang(th),:lang(ne),:lang(my)) .world-title{font-weight:300;letter-spacing:.07em;line-height:1.55}
.world-copy .reading{margin:.6rem 0 0;font-size:1.1rem}
.world-copy .lede{margin:1.25rem 0 .25rem;max-width:30rem;color:var(--ink);text-wrap:balance}
.world-copy .search{margin:1.4rem 0 .9rem;max-width:34rem}
/* The key: three ruled groups, items on an even grid so the swatches and names line up. It sits under the copy beside the map,
   and under the map on narrow screens. */
.world-key{grid-area:key;align-self:start;display:grid;gap:1.1em;margin:clamp(1.25rem,2.4vw,1.9rem) 0 0;max-width:34rem;font-size:clamp(.875rem,.8rem + .25vw,1rem);color:var(--muted)}
.key-group{display:grid;gap:.55em}
.key-state{display:flex;align-items:center;gap:.7em;font-size:.88em;font-weight:600;color:var(--muted)}
.key-state::after{content:"";flex:1;height:1px;background:var(--rule)}
.key-group.is-open .key-state{color:var(--ink)}
.key-group ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:.4em 1.1em;margin:0;padding:0;list-style:none}
.key-group li{display:flex;align-items:center;gap:.6em;min-height:1.6em;line-height:1.4;transition:color 90ms}
.key-group i{flex:none;display:block;width:1.35em;min-width:18px;height:.28em;min-height:4px;border-radius:3px;background:var(--c)}
.key-group li:hover{color:var(--ink)}
.key-group.is-building i{background:repeating-linear-gradient(90deg,var(--c) 0 5px,transparent 5px 8px)}
/* Hovering a key entry dims the other lines on the map, so each line can be found by its name */
.net-line{transition:opacity 110ms}
.world:has(.key-group li:hover) .net-line{opacity:.2}
.world:has(li[data-line=kyushu]:hover) .net-line.net-kyushu,.world:has(li[data-line=nishikyushu]:hover) .net-line.net-nishikyushu,.world:has(li[data-line=hokkaido]:hover) .net-line.net-hokkaido,.world:has(li[data-line=tohoku]:hover) .net-line.net-tohoku,.world:has(li[data-line=akita]:hover) .net-line.net-akita,.world:has(li[data-line=yamagata]:hover) .net-line.net-yamagata,.world:has(li[data-line=sapporo]:hover) .net-line.net-sapporo,.world:has(li[data-line=joetsu]:hover) .net-line.net-joetsu,.world:has(li[data-line=hokuriku]:hover) .net-line.net-hokuriku,.world:has(li[data-line=tokaido]:hover) .net-line.net-tokaido,.world:has(li[data-line=sanyo]:hover) .net-line.net-sanyo{opacity:1}
/* The network drawing: stippled stations and density contours (two CSS masks, so they take the theme colours) sit
   exactly under the Shinkansen routes. The stage keeps the drawing's aspect ratio so the layers stay registered. */
.world-map{margin:0;color:var(--ink);justify-self:center;width:100%;max-width:min(40rem,calc(82vh * .91))}
.net-stage{position:relative;container-type:inline-size}
/* Place names: fixed readable size over the scaling drawing, a soft paper halo so they stay legible on terrain and lines */
.net-place{position:absolute;left:var(--x);top:var(--y);z-index:1;font-size:.8125rem;font-weight:600;line-height:1.25;white-space:nowrap;color:var(--ink);pointer-events:none;
  text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 0 5px var(--paper),0 0 8px var(--paper)}
.net-place small{display:block;font-size:.6875rem;font-weight:400;letter-spacing:.01em;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.net-place.is-open{color:var(--accent)}
.net-place.p-e{transform:translate(11px,-50%)}
.net-place.p-w{transform:translate(calc(-100% - 11px),-50%);text-align:end}
.net-place.p-n{transform:translate(-16px,calc(-100% - 10px))}
.net-place.p-sw{transform:translate(calc(-100% + 6px),9px);text-align:end}
.net-place.p-s{transform:translate(-50%,10px);text-align:center}
@container (max-width:24rem){.net-place.is-minor small{display:none}.net-place.is-minor{font-size:.75rem;font-weight:500;color:color-mix(in srgb,var(--ink) 80%,transparent)}.net-place{letter-spacing:.02em}}
.net-stage .net{position:relative}
/* One colour per Shinkansen line (conventional, livery-inspired; not an official palette), lighter on the dark theme */
.world{--line-hokkaido:#7456c4;--line-akita:#d1492f;--line-yamagata:#b04a9c;--line-tohoku:#2d8f5b;--line-joetsu:#c48a14;--line-hokuriku:#b0603a;--line-tokaido:#1f63c2;--line-sanyo:#0e8794}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .world{--line-hokkaido:#a99be8;--line-akita:#f2806a;--line-yamagata:#d98bc8;--line-tohoku:#62c58f;--line-joetsu:#e8b948;--line-hokuriku:#dc946d;--line-tokaido:#6aa3f2;--line-sanyo:#4cc1cc}}
:root[data-theme=dark] .world{--line-hokkaido:#a99be8;--line-akita:#f2806a;--line-yamagata:#d98bc8;--line-tohoku:#62c58f;--line-joetsu:#e8b948;--line-hokuriku:#dc946d;--line-tokaido:#6aa3f2;--line-sanyo:#4cc1cc}
.relief{position:absolute;inset:0;pointer-events:none;background:currentColor;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
/* A halo of tint around the coast (fading to nothing), sea-depth lines that fade out with it, hillshade, coast and land
   contours, and the open module's lines in the accent colour: static masks, theme-aware, no panel edges anywhere */
.relief-sea{--m:url(/assets/japan-halo.png);background:var(--ink);opacity:.075}
.relief-depth{background:var(--ink);opacity:.9;-webkit-mask:url(/assets/japan-depth.svg) center/100% 100% no-repeat,url(/assets/japan-halo.png) center/100% 100% no-repeat;-webkit-mask-composite:source-in;mask:url(/assets/japan-depth.svg) center/100% 100% no-repeat,url(/assets/japan-halo.png) center/100% 100% no-repeat;mask-composite:intersect}
.relief-shade{--m:url(/assets/japan-shade.png);background:var(--ink);opacity:.2}
.relief-lines{--m:url(/assets/japan-lines.svg);opacity:.62}
.relief-open{--m:url(/assets/japan-lines-kyushu.svg);background:var(--accent);transition:opacity 110ms}
.world-map figcaption{margin-top:.4rem;font-size:.625rem;color:color-mix(in srgb,var(--muted) 68%,transparent);text-align:end;letter-spacing:.02em;transition:color 110ms}
.world-map figcaption:hover{color:var(--muted)}

/* The site caps direct sections of main at 70ch; the front door's modules use the full width */
html main>section.regions,html main>section.fleet,html main>section.ways{max-width:none}

/* Section headers share one quiet editorial rule */
.regions>header,.fleet>h2,.ways>h2,.module-flag{border-top:1px solid var(--rule);padding-top:1.1rem}
.regions,.fleet,.ways{margin-top:clamp(2.75rem,7vw,5rem)}
.regions>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.5rem;margin-bottom:1.25rem}
.regions h2,.fleet>h2,.ways>h2{margin:0;font-size:clamp(1.35rem,2.4vw,1.75rem)}
.regions>header p{margin:0;color:var(--muted);font-size:.95rem}
.fleet>h2,.ways>h2{margin-bottom:1.25rem}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:.6875rem;font-weight:600;line-height:1.2;white-space:nowrap}
.chip.is-open{color:var(--accent)}
.chip.is-open::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.is-soon{color:var(--muted)}
.chip.is-soon::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}

/* Region modules */
.region-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.region[data-state=open]{grid-column:span 2}
.region[data-state=open] .region-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"top route" "chips route" "foot route";column-gap:1.6rem;row-gap:.8rem;align-content:space-between}
.region[data-state=open] .region-top{grid-area:top}
.region[data-state=open] .region-lines{grid-area:chips;align-self:start}
.region[data-state=open] .region-foot{grid-area:foot;margin-top:0;align-self:end}
.region-card{position:relative;display:flex;flex-direction:column;gap:.8rem;min-height:9.75rem;height:100%;box-sizing:border-box;padding:1rem 1.05rem;border:1px solid var(--rule);border-radius:8px;background:transparent;color:var(--ink);text-decoration:none;transition:none}
.region-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem}
.region-name{font-size:1.2rem;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.region-jp{color:var(--muted);font-size:.8125rem}
.region-lines{display:flex;flex-wrap:wrap;gap:.1rem .5rem;margin:0;padding:0;list-style:none}
.region-lines li{color:var(--muted);font-size:.78rem;line-height:1.5}
.region-lines li+li::before{content:"·";margin-inline-end:.5rem;opacity:.7}
.region-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem;margin-top:auto}
.region-count{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.region-count b{color:var(--ink);font-weight:650}
.region-count i{font-style:normal;opacity:.6}
.region[data-state=open] .region-card{border-color:color-mix(in srgb,var(--accent) 55%,var(--rule))}
.region[data-state=open] .region-top::after{content:"";position:absolute;top:1rem;right:1rem;width:1.1em;height:1.1em;background:var(--accent);-webkit-mask:var(--arw-e) center/contain no-repeat;mask:var(--arw-e) center/contain no-repeat;transition:transform 110ms}
.region[data-state=soon] .region-card{border-color:color-mix(in srgb,var(--rule) 65%,transparent);color:var(--muted);cursor:default}
.region[data-state=soon] .region-name{font-weight:600}
@media(hover:hover) and (pointer:fine){
 .region[data-state=open] .region-card:hover{border-color:var(--accent)}
 .region[data-state=open] .region-card:hover .region-top::after{transform:translateX(3px)}
}
.region-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* While the open card is hovered or focused, the open line in the drawing glows */
main:has(.region[data-state=open] .region-card:is(:hover,:focus-visible)) @supports not (width:1cqw){.net-line.net-kyushu{stroke-width:7}}
main:has(.region[data-state=open] .region-card:is(:hover,:focus-visible)) .relief-open{opacity:1}
.relief-open{opacity:.8}
.net-kyushu{transition:stroke-width 110ms}

/* Fleet timeline */
.fleet-line{display:flex;gap:.75rem;margin:0;padding:.25rem .25rem 1.1rem;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:.25rem;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;overscroll-behavior-x:contain}
.fleet-line:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:14px}
.fleet-item{position:relative;flex:none;width:min(15.5rem,72vw);scroll-snap-align:start}
.fleet-item::before{content:"";position:absolute;top:1.4rem;inset-inline:-.75rem;border-top:1px solid var(--rule)}
.fleet-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:.15rem;box-sizing:border-box;height:100%;padding:2.6rem .95rem 1rem;border:1px solid var(--rule);border-radius:8px;background:transparent;color:var(--ink);text-decoration:none;transition:none}
.fc-year{position:absolute;top:.8rem;inset-inline-start:.95rem;font-size:.8125rem;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted)}
.fleet-card .chip{position:absolute;top:.6rem;inset-inline-end:.7rem}
.fleet-card img{display:block;width:100%;height:auto;margin:.2rem 0 .6rem}
.fc-series{font-size:1.15rem;font-weight:650;line-height:1.25}
.fc-context{font-size:.8125rem;line-height:1.4;color:var(--muted)}
.fc-speed{margin-top:.35rem;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fc-speed b{color:var(--ink);font-weight:650}
.fleet-item[data-kyushu] .fleet-card{border-color:color-mix(in srgb,var(--accent) 55%,var(--rule))}
.fleet-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Ways in */
.ways-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.door-card{position:relative;display:flex;flex-direction:column;gap:.4rem;box-sizing:border-box;height:100%;min-height:6.5rem;padding:1rem 2.6rem 1rem 1.05rem;border:1px solid var(--rule);border-radius:8px;background:transparent;color:var(--ink);text-decoration:none;transition:none}
.door-name{font-size:1.0625rem;font-weight:650;line-height:1.3}
.door-note{font-size:.875rem;line-height:1.5;color:var(--muted)}
a.door-card::after{content:"";position:absolute;top:1.05rem;inset-inline-end:1rem;width:1.1em;height:1.1em;background:var(--muted);-webkit-mask:var(--arw-e) center/contain no-repeat;mask:var(--arw-e) center/contain no-repeat;transition:transform 110ms,background-color 90ms}
@media(hover:hover) and (pointer:fine){a.door-card:hover::after{transform:translateX(2px);background:var(--accent)}}
a.door-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.door[data-state=soon] .door-card{border-color:color-mix(in srgb,var(--rule) 65%,transparent);color:var(--muted);cursor:default;justify-content:space-between;align-items:flex-start}
.door[data-state=soon] .door-name{font-weight:600}

/* The open module: Kyushu, below the front door */
.module-flag{display:flex;align-items:center;gap:.7rem;margin:clamp(2.75rem,7vw,5rem) 0 0;font-size:1.35rem;font-weight:650;letter-spacing:-.01em}
.module-flag .chip{font-weight:600}
.hero .module-title{margin:0 0 .5rem;font-size:clamp(2.1rem,4.4vw,3.1rem)}
.module-flag+.hero{border-bottom:0;padding-top:1.25rem;align-items:start}
html main>p.module-flag{max-width:none}

@media(max-width:900px){
 .world{grid-template-columns:1fr;grid-template-areas:"copy" "map" "key";row-gap:1.5rem}
 .world-copy{align-self:start}
 .world-key{margin-top:0;max-width:none}
 .world-map{max-width:30rem}
 .region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .ways-grid{grid-template-columns:1fr}
 .region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .region[data-state=open]{grid-column:1/-1}
 .region[data-state=soon] .region-lines{display:none}
 .region[data-state=soon] .region-card{min-height:0;gap:.6rem;padding:.85rem .9rem}
 .region[data-state=soon] .region-top{flex-direction:column;gap:0}
 .region[data-state=soon] .region-name{font-size:1.05rem}
 .region[data-state=open] .region-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "chips" "route" "foot"}
  .region-card{min-height:0}
 .fleet-item{width:min(14rem,68vw)}
}
@media print{.world-map,.fleet,.ways{display:none}}
/* Large screens: the map grows. The copy stays on the page's content column; the hero extends into the right margin
   (never past 2rem from the viewport edge) and the map takes the wider share, capped so it still fits the window's height. */
@media(min-width:1100px){
  .world{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin-inline-end:calc(-1 * clamp(0px,(100vw - 100%) / 2 - 2rem,12rem))}
  .world-map{max-width:min(50rem,calc((100vh - 8rem) / 1.13))}
}
@media(min-width:1400px){
  .world{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);margin-inline-end:calc(-1 * clamp(0px,(100vw - 100%) / 2 - 2rem,22rem))}
  .world-map{max-width:min(54rem,calc((100vh - 8rem) / 1.13))}
}

/* Open places are links. Hovering or focusing one: a ring appears at the station, its name shows, and the other lines recede.
   Places in regions that are not open yet stay plain text. */
.net-place.is-link{pointer-events:auto;text-decoration:none;transition:color 90ms}
.net-place.is-link::before{content:"";position:absolute;inset:-10px -8px}
.net-place.is-link:is(:hover,:focus-visible){color:var(--ink)}
.net-hit{position:absolute;left:var(--x);top:var(--y);z-index:2;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.net-hit::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;transform:scale(.55);transition:opacity 110ms,transform 110ms}
.net-hit span{position:absolute;left:100%;top:50%;transform:translate(4px,-50%);font-size:.8125rem;font-weight:600;line-height:1.25;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 110ms;
  text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 0 5px var(--paper),0 0 8px var(--paper)}
.net-hit small{display:block;font-size:.6875rem;font-weight:400;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.net-hit:is(:hover,:focus-visible)::before,.world:has(.net-place.is-link:hover) .net-hit[tabindex="-1"]::before{opacity:1;transform:none}
.net-hit:is(:hover,:focus-visible) span{opacity:1}
.net-hit:focus-visible,.net-place.is-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.net-hit:focus-visible{border-radius:50%}
.world:has(a.net-hit:is(:hover,:focus-visible),.net-place.is-link:is(:hover,:focus-visible)) .net-line:not(.net-kyushu):not(.net-nishikyushu){opacity:.3}
/* hover needs a pointer that can hover: off on touch screens (a tap on a tiny dot would be a mis-tap), on at every map size otherwise */
@media(hover:none),(pointer:coarse){.net-hit{display:none}}

/* Stations whose pages are not built yet: the same ring and name on hover, no link, and a quiet "coming soon" line */
.net-hit.is-soon{width:18px;height:18px;margin:-9px 0 0 -9px;cursor:default}
.net-hit.is-soon::before{inset:2px;border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
.net-hit.is-soon:hover{z-index:3}
.net-hit .soon{margin-top:.1rem;font-size:.625rem;font-weight:500;letter-spacing:.01em;color:var(--muted)}

/* The headline sits at the top of the hero, level with the map's first land, instead of floating at mid-height: copy and key
   are top-aligned, the spare height goes below them (row 2 takes the slack), and the top padding follows the viewport in one
   smooth clamp so the headline's distance from the header scales with the screen. */
.world{align-items:start;grid-template-rows:auto 1fr;padding-block-start:clamp(.75rem,2.2vw,2rem)}
.world-copy{align-self:start;padding-top:clamp(.25rem,1.4vw,1.75rem)}
.world-key{align-self:start}
@media(max-width:900px){.world{grid-template-rows:none;padding-block-start:clamp(.5rem,2.5vw,1.25rem)}.world-copy{padding-top:0}}

/* Small screens. The drawing's strokes keep a screen size instead of shrinking with the map, so lines, casings and station dots stay
   legible on a phone and grow smoothly to the large-screen weight. One width variable drives them all (container-relative, clamped). */
@supports (width:1cqw){
 .net{--w:clamp(2.1px,.5cqw,4.2px)}
 .net-line,.net-case,.net-stop,.net-stop-core{vector-effect:non-scaling-stroke}
 .net-line{stroke-width:var(--w)}
 .net-line.net-kyushu{stroke-width:calc(var(--w) * 1.3)}
 .net-line.net-nishikyushu{stroke-width:calc(var(--w) * 1.1)}
 .net-line.net-akita,.net-line.net-yamagata{stroke-width:calc(var(--w) * .85)}
 .net-line.net-sapporo{stroke-width:calc(var(--w) * .9);stroke-dasharray:calc(var(--w) * 1.5) calc(var(--w) * 2.2)}
 .net-case{stroke-width:calc(var(--w) * 2 + 1.5px)}
 .net-case.net-kyushu{stroke-width:calc(var(--w) * 2.6 + 1.5px)}
 .net-stop{stroke-width:calc(var(--w) * 1.35)}
 .net-stop-core{stroke-width:calc(var(--w) * .6)}
 .net-stop.net-open{stroke-width:calc(var(--w) * 1.8)}
 .net-stop-core.net-open-core{stroke-width:calc(var(--w) * .9)}
 main:has(.region[data-state=open] .region-card:is(:hover,:focus-visible)) .net-line.net-kyushu{stroke-width:calc(var(--w) * 1.7)}
}
/* On phones the map runs edge to edge (the page gutter is about 5% of the width) and stays centred under the headline */
@media(max-width:600px){.world-map{width:111.1%;max-width:none}.world-map figcaption{padding-inline:4.5%}}
@media(min-width:601px) and (max-width:900px){.world-map{max-width:34rem}}
.net-hit.is-flip span{left:auto;right:100%;transform:translate(-4px,-50%);text-align:end}

/* The open line's route strip, drawn as a piece of railway: twin rails, sleepers and ballast along the real alignment's curve, stops
   marked by platform bars. Terminals and Kumamoto are ringed and named; other stops show their name on hover. */

/* Region cards: one quiet motif each, drawn from our own elevation and station data (editorial/make_regions.py), painted in the text
   colour at a few percent and faded out toward the text so type is never touched. The open card carries the accent. */
.region-card{isolation:isolate}
.region-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--ink);opacity:.14;
  -webkit-mask:var(--m) right bottom/cover no-repeat,linear-gradient(90deg,rgba(0,0,0,.34),#000 52%),linear-gradient(180deg,transparent 2%,#000 20%,#000 80%,transparent 98%);-webkit-mask-composite:source-in,source-in;
  mask:var(--m) right bottom/cover no-repeat,linear-gradient(90deg,rgba(0,0,0,.34),#000 52%),linear-gradient(180deg,transparent 2%,#000 20%,#000 80%,transparent 98%);mask-composite:intersect,intersect;transition:opacity 110ms}
.region[data-state=open] .region-card::before{background:var(--accent);opacity:.2}
.region[data-state=soon] .region-card::before{opacity:.12}
@media(hover:hover) and (pointer:fine){.region[data-state=open] .region-card:hover::before{opacity:.24}}
/* On hover the same scene gains its finer engraving (hatching, coursing, stipple; the -fine files, same geometry), fading in over the base
   drawing. Pointer devices only; with reduced motion it simply appears. */
.region-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--ink);opacity:0;
  -webkit-mask:var(--mf) right bottom/cover no-repeat,linear-gradient(90deg,rgba(0,0,0,.34),#000 52%),linear-gradient(180deg,transparent 2%,#000 20%,#000 80%,transparent 98%);-webkit-mask-composite:source-in,source-in;
  mask:var(--mf) right bottom/cover no-repeat,linear-gradient(90deg,rgba(0,0,0,.34),#000 52%),linear-gradient(180deg,transparent 2%,#000 20%,#000 80%,transparent 98%);mask-composite:intersect,intersect;transition:opacity 180ms ease}
.region[data-state=open] .region-card::after{background:var(--accent)}
@media(hover:hover) and (pointer:fine){
 .region-card:hover::after{opacity:.22}
 .region[data-state=soon] .region-card:hover::after{opacity:.18}
}
.region[data-state=open] .region-card:focus-visible::after{opacity:.22}
@media(prefers-reduced-motion:reduce){.region-card::after{transition:none}}
.region[data-region=kyushu]{--m:url(/assets/region-kyushu.svg);--mf:url(/assets/region-kyushu-fine.svg)}
.region[data-region=hokkaido]{--m:url(/assets/region-hokkaido.svg);--mf:url(/assets/region-hokkaido-fine.svg)}
.region[data-region=tohoku]{--m:url(/assets/region-tohoku.svg);--mf:url(/assets/region-tohoku-fine.svg)}
.region[data-region=kanto]{--m:url(/assets/region-kanto.svg);--mf:url(/assets/region-kanto-fine.svg)}
.region[data-region=chubu]{--m:url(/assets/region-chubu.svg);--mf:url(/assets/region-chubu-fine.svg)}
.region[data-region=kansai]{--m:url(/assets/region-kansai.svg);--mf:url(/assets/region-kansai-fine.svg)}
.region[data-region=chugoku]{--m:url(/assets/region-chugoku.svg);--mf:url(/assets/region-chugoku-fine.svg)}
.region[data-region=shikoku]{--m:url(/assets/region-shikoku.svg);--mf:url(/assets/region-shikoku-fine.svg)}


/* Every region card is one design: name, lines, status, and the region's symbol. The open card is the same, only wider. */
.region[data-state=open] .region-card{display:flex;flex-direction:column;gap:.8rem}
.region[data-state=open] .region-foot{justify-content:flex-start;gap:.4rem 1.4rem}
.region[data-state=open] .region-foot{align-self:stretch;margin-top:auto}

/* Map labels grow with the map: readable on a phone, a little larger on large screens (sized from the map's own width). */
@supports (width:1cqw){
 .net-place,.net-hit span{font-size:clamp(.8125rem,1.95cqw,1.0625rem)}
 .net-place small,.net-hit small{font-size:.8em}
 .net-place.p-e{transform:translate(.85em,-50%)}
 .net-place.p-w{transform:translate(calc(-100% - .85em),-50%)}
 .net-place.p-n{transform:translate(-1.2em,calc(-100% - .75em))}
 .net-place.p-sw{transform:translate(calc(-100% + .45em),.7em)}
 .net-place.p-s{transform:translate(-50%,.8em)}
 .net-place.is-minor{font-size:clamp(.75rem,1.75cqw,.9375rem)}
}
@container (max-width:24rem){.net-place.is-minor{font-size:.75rem}}