/* Ten Sushi · Locations (店舗). Builds on site.css. Short on purpose: a title, the Ten Line (three station plates and a little train that rides to the one you
   pick), a map, and one shopfront card for the picked kitchen: the noren parts and the lantern glows when it is open, the flag says 営業中 or 準備中, and the shutter
   is down when it is closed. Every class here starts with lx- (site.css has .eki, .lamp, .rail and more). See Extra/menu-page-design.md. */
.lnk{ background:none; border:0; padding:0; font:inherit; color:var(--beni); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ---------- hero ---------- */
.lx-hero{ position:relative; padding:28px 0 6px; }
.lx-hero::before{ content:""; position:absolute; left:0; right:0; top:0; height:16px; background:repeating-linear-gradient(90deg,var(--shiro) 0 14px,var(--beni) 14px 28px); border-bottom:4px solid var(--sumi); }
.lx-hero-in{ max-width:1180px; margin:0 auto; padding:34px var(--pad) 0; }
.lx-tag{ display:flex; align-items:center; gap:12px; margin:0 0 14px; font:900 12px/1.2 var(--f-sans); letter-spacing:.16em; text-transform:uppercase; }
.lx-tag .no{ font:800 15px/1 var(--f-mincho); letter-spacing:.06em; background:var(--beni); color:var(--shiro); padding:8px 10px; border:3px solid var(--sumi); box-shadow:3px 3px 0 var(--sumi); }
.lx-hero h1{ margin:0 0 12px; font:400 clamp(34px,5vw,62px)/1 var(--f-marquee); text-transform:uppercase; color:var(--h1,var(--sumi)); }
.lx-lede{ margin:0 0 20px; max-width:64ch; font:500 clamp(15px,1.3vw,17px)/1.65 var(--f-sans); }
.lx-acts{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- the Ten Line ---------- */
.lx-line{ padding:26px 0 8px; }
.lx-line-in{ position:relative; max-width:1180px; margin:0 auto; padding:0 var(--pad); }
.lx-track{ position:absolute; left:var(--pad); right:var(--pad); top:18px; height:34px; pointer-events:none; z-index:2; }
.lx-rail{ position:absolute; left:16.67%; right:16.67%; top:26px; height:10px; background:var(--sumi); border-radius:5px; }
.lx-rail::after{ content:""; position:absolute; left:0; right:0; top:3px; height:4px; background:repeating-linear-gradient(90deg,var(--shiro) 0 14px,transparent 14px 28px); }
.lx-train{ position:absolute; top:-6px; left:calc(16.67% + var(--p,0) * 33.33%); width:64px; height:34px; translate:-50% 0; transition:left .75s cubic-bezier(.5,0,.2,1); }
.lx-train svg{ width:64px; height:34px; fill:var(--beni); stroke:var(--sumi); stroke-width:2.6; stroke-linejoin:round; overflow:visible; }
.lx-train svg rect:nth-of-type(n+2){ fill:var(--shiro); }
.lx-train svg path{ fill:none; stroke:var(--yamabuki); stroke-width:3; }
.lx-train svg circle{ fill:var(--sumi); }
.lx-train.go{ animation:lxrattle .15s linear 5; }
@keyframes lxrattle{ 50%{ transform:translateY(1.5px); } }
.lx-stns{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,2vw,22px); padding-top:48px; }
/* a station nameplate (駅名標): the code in a circle, the name, the next station and how far, and an open lamp */
.lx-stn{ position:relative; display:grid; justify-items:center; gap:6px; padding:12px 8px 12px; background:var(--shiro); border:3px solid var(--sumi); box-shadow:4px 4px 0 var(--sumi); cursor:pointer; color:var(--sumi); text-align:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:translate .12s, box-shadow .12s; }
.lx-stn::before{ content:""; position:absolute; left:50%; top:-22px; width:6px; height:22px; translate:-50% 0; background:var(--sumi); }
.lx-stn .cd{ display:grid; place-items:center; min-width:46px; height:46px; padding:0 4px; border-radius:50%; background:var(--shiro); color:var(--beni); border:4px solid var(--beni); font:400 15px/1 var(--f-dot); }
.lx-stn .nm{ font:900 clamp(15px,1.8vw,22px)/1.1 var(--f-sans); }
.lx-stn .nx{ font:700 11.5px/1.3 var(--f-sans); color:var(--sumi-usu); letter-spacing:.04em; }
.lx-stn .st{ display:inline-flex; align-items:center; gap:7px; font:900 11px/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; }
.lx-stn .st i{ width:12px; height:12px; border-radius:50%; background:var(--nezumi); border:2px solid var(--sumi); }
.lx-stn[data-open="true"] .st i{ background:var(--rokusho); } .lx-stn[data-open="false"] .st i{ background:var(--sumi-usu); }
.lx-stn[aria-checked="true"]{ background:var(--sumi); color:var(--shiro); box-shadow:4px 4px 0 var(--beni); translate:0 2px; }
.lx-stn[aria-checked="true"] .nx{ color:var(--nezumi); }
.lx-stn[aria-checked="true"] .cd{ background:var(--beni); color:var(--shiro); border-color:var(--shiro); }
.lx-stn[aria-checked="true"]::before{ background:var(--beni); }
.lx-stn[aria-checked="true"][data-open="true"] .st i{ background:var(--yamabuki); }
.lx-stn.ding .cd{ animation:r-jelly .5s ease-out; }
@media (hover:hover){ .lx-stn:hover{ translate:-1px -1px; box-shadow:6px 6px 0 var(--sumi); } .lx-stn[aria-checked="true"]:hover{ translate:0 1px; box-shadow:5px 5px 0 var(--beni); } }
.lx-stn:focus-visible{ outline:3px solid var(--beni); outline-offset:3px; }

/* ---------- map and card ---------- */
.lx-main{ max-width:1180px; margin:0 auto; padding:34px var(--pad) 40px; }
.lx-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,470px); gap:clamp(18px,3vw,38px); align-items:stretch; }
.lx-mapwrap{ display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:520px; }
.lx-map{ position:relative; isolation:isolate; min-height:480px; border:4px solid var(--sumi); box-shadow:8px 8px 0 var(--sumi); background:#24201C; overflow:hidden; }
.lx-map .leaflet-tile-pane{ filter:sepia(.32) saturate(1.15) hue-rotate(-10deg) brightness(1.06); }
.lx-map.leaflet-container{ background:#24201C; font:500 12px/1.4 var(--f-sans); }
.lx-map .leaflet-bar{ border:3px solid var(--sumi); border-radius:0; box-shadow:3px 3px 0 var(--sumi); }
.lx-map .leaflet-bar a{ border-radius:0 !important; color:var(--sumi); font:900 18px/30px var(--f-sans); width:32px; height:32px; }
.lx-map .leaflet-control-attribution{ background:rgba(247,244,236,.88); color:var(--sumi); font:500 11px/1.4 var(--f-sans); }
.lx-map .leaflet-control-attribution a{ color:var(--beni); }
.lx-mapnote{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:12px 0 0; font:500 12.5px/1.5 var(--f-sans); color:var(--sumi-usu); }
.lx-mapnote .lnk{ font-weight:700; }
.lx-pinw{ background:none; border:0; }
.lx-pin{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--beni); color:var(--shiro); border:3px solid var(--sumi); box-shadow:2px 3px 0 var(--sumi); font:800 22px/1 var(--f-mincho); cursor:pointer; transition:scale .25s cubic-bezier(.3,1.6,.5,1); }
.lx-pin.sel{ scale:1.3; background:var(--yamabuki); color:var(--sumi); box-shadow:0 0 0 4px var(--beni), 2px 3px 0 4px var(--sumi); }
.lx-pin.off{ background:var(--sumi-usu); }
.lx-lbl{ background:var(--shiro); color:var(--sumi); border:2px solid var(--sumi); border-radius:0; box-shadow:2px 2px 0 var(--sumi); font:900 11px/1.2 var(--f-sans); letter-spacing:.06em; padding:4px 7px; }
.lx-lbl::before{ display:none; }
.lx-map svg.fb{ position:absolute; inset:0; width:100%; height:100%; }
.fb .street{ stroke:#4A423B; stroke-linecap:round; fill:none; }
.fb .lxp{ cursor:pointer; }
.fb .lxp circle{ fill:var(--beni); stroke:var(--sumi); stroke-width:3; transition:r .25s; }
.fb .lxp.sel circle{ fill:var(--yamabuki); stroke:var(--beni); stroke-width:5; }
.fb .lxp .g{ fill:var(--shiro); font:800 21px/1 var(--f-mincho); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.fb .lxp.sel .g{ fill:var(--sumi); }
.fb .lxp .lxl{ fill:var(--shiro); font:900 12px/1 var(--f-sans); letter-spacing:.06em; text-anchor:start; paint-order:stroke; stroke:#131211; stroke-width:4px; stroke-linejoin:round; pointer-events:none; }

.lx-card{ position:relative; background:var(--shiro) url("../img/paper.png"); border:4px solid var(--sumi); box-shadow:8px 8px 0 var(--beni); display:flex; flex-direction:column; }
/* the shopfront: a sign, the noren, a lantern, a flag, and a shutter */
.lx-front{ position:relative; padding:14px 14px 0; background:#E9E1CD; border-bottom:4px solid var(--sumi); }
.lx-sign{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:max-content; max-width:88%; margin:0 auto -8px; padding:7px 16px 7px 8px; background:var(--sumi); color:var(--shiro); border:3px solid var(--sumi); box-shadow:0 0 0 3px var(--hinoki); z-index:4; font:400 clamp(14px,2vw,19px)/1 var(--f-marquee); letter-spacing:.04em; }
.lx-sign b{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--beni); font:800 17px/1 var(--f-mincho); }
.lx-shop{ position:relative; height:150px; background:#2A2420; border:4px solid var(--sumi); border-bottom:0; overflow:hidden; }
.lx-shop::before{ content:""; position:absolute; left:8%; right:8%; bottom:0; height:34px; background:var(--hinoki); border:3px solid var(--sumi); border-bottom:0; z-index:1; }
.lx-glow{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 78%,rgba(255,198,26,.65),transparent 62%); opacity:0; transition:opacity .5s; z-index:0; }
.lx-front[data-open="true"] .lx-glow{ opacity:1; }
.lx-noren{ position:absolute; left:0; right:0; top:0; height:92px; display:flex; gap:3px; z-index:2; cursor:pointer; }
.lx-noren i{ flex:1; background:var(--ai); border-bottom:4px solid var(--sumi); transform-origin:50% 0; transition:rotate .5s cubic-bezier(.3,1.5,.5,1), scale .5s cubic-bezier(.3,1.5,.5,1); position:relative; }
.lx-noren i:nth-child(2)::after{ content:"天"; position:absolute; left:50%; top:20px; translate:-50% 0; width:34px; height:34px; border-radius:50%; background:var(--beni); color:var(--shiro); display:grid; place-items:center; font:800 20px/1 var(--f-mincho); }
.lx-front[data-open="true"] .lx-noren i:nth-child(1){ rotate:15deg; } .lx-front[data-open="true"] .lx-noren i:nth-child(3){ rotate:-15deg; } .lx-front[data-open="true"] .lx-noren i:nth-child(2){ scale:1 .6; }
.lx-noren.sway i{ animation:lxsway .8s ease-out; }
@keyframes lxsway{ 30%{ rotate:7deg; } 60%{ rotate:-5deg; } }
.lx-lantern{ position:absolute; right:12px; top:14px; width:40px; height:56px; padding:0; border:3px solid var(--sumi); border-radius:16px; background:#5B4636; z-index:6; cursor:pointer; transform-origin:50% -10px; }
.lx-lantern i{ position:absolute; left:50%; top:-14px; width:3px; height:12px; translate:-50% 0; background:var(--sumi); }
.lx-lantern::after{ content:""; position:absolute; left:6px; right:6px; top:50%; height:3px; background:rgba(19,18,17,.5); box-shadow:0 -12px 0 rgba(19,18,17,.5), 0 12px 0 rgba(19,18,17,.5); }
.lx-front[data-open="true"] .lx-lantern, .lx-lantern.lit{ background:var(--shu); box-shadow:0 0 0 6px rgba(255,110,50,.32); }
.lx-lantern.swing{ animation:lxswing 1.1s ease-out; }
@keyframes lxswing{ 20%{ rotate:14deg; } 45%{ rotate:-10deg; } 70%{ rotate:5deg; } }
.lx-flag{ position:absolute; left:12px; top:12px; width:34px; height:104px; padding:0; border:3px solid var(--sumi); background:var(--beni); color:var(--shiro); writing-mode:vertical-rl; font:800 18px/1 var(--f-mincho); letter-spacing:.2em; z-index:6; cursor:pointer; transform-origin:50% 0; }
.lx-flag span{ display:block; padding-top:6px; }
.lx-front[data-open="false"] .lx-flag{ background:var(--ai); }
.lx-front[data-open="unknown"] .lx-flag{ background:var(--nezumi); color:var(--sumi); }
.lx-flag.flap{ animation:lxflap .7s ease-out; }
@keyframes lxflap{ 25%{ rotate:-9deg; } 55%{ rotate:6deg; } 80%{ rotate:-3deg; } }
/* the shutter: ribbed steel, down when the kitchen is closed, rolled up when open */
.lx-shutter{ position:absolute; left:0; right:0; top:0; bottom:0; padding:0; border:0; z-index:5; cursor:pointer; background:repeating-linear-gradient(180deg,#8A9399 0 9px,#6F787E 9px 11px); border-bottom:6px solid var(--sumi); translate:0 -100%; transition:translate .9s cubic-bezier(.5,0,.2,1); }
.lx-shutter i{ position:absolute; left:50%; bottom:8px; width:34px; height:8px; translate:-50% 0; background:var(--sumi); border-radius:4px; }
.lx-front[data-open="false"] .lx-shutter{ translate:0 0; }
.lx-shutter.rattle{ animation:r-shake .45s; }
.lx-front[data-open="false"] .lx-shutter.peek{ translate:0 -26%; }
.lx-body{ padding:18px clamp(16px,3vw,26px) 22px; display:grid; gap:10px; }
.lx-code{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0; }
.lx-code b{ font:400 15px/1 var(--f-dot); background:var(--beni); color:var(--shiro); padding:7px 9px 6px; border:3px solid var(--sumi); letter-spacing:.06em; }
.lx-state{ display:inline-flex; align-items:center; gap:8px; font:900 12.5px/1.2 var(--f-sans); letter-spacing:.1em; text-transform:uppercase; }
.lx-state i{ width:14px; height:14px; border-radius:50%; background:var(--nezumi); border:3px solid var(--sumi); }
.lx-front[data-open="true"] ~ .lx-body .lx-state i{ background:var(--rokusho); }
.lx-front[data-open="false"] ~ .lx-body .lx-state i{ background:var(--sumi-usu); }
.lx-body h2{ margin:0; font:400 clamp(26px,3.2vw,36px)/1.05 var(--f-marquee); text-transform:uppercase; }
.lx-tagline{ margin:-4px 0 0; font:700 13px/1.4 var(--f-sans); color:var(--sumi-usu); letter-spacing:.04em; }
.lx-last{ display:inline-flex; align-items:center; gap:10px; width:max-content; margin:0; padding:7px 12px; background:var(--sumi); color:var(--yamabuki); font:400 14px/1 var(--f-dot); letter-spacing:.06em; }
.lx-last[hidden]{ display:none; }
.lx-last b{ font-weight:400; letter-spacing:.1em; }
.lx-addr{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:var(--kinari); border:3px solid var(--sumi); box-shadow:3px 3px 0 var(--sumi); text-align:left; font:700 15px/1.4 var(--f-sans); cursor:pointer; color:var(--sumi); touch-action:manipulation; }
.lx-addr svg{ width:22px; height:22px; flex:none; fill:var(--beni); stroke:var(--sumi); stroke-width:1.8; margin-top:1px; }
.lx-addr:active{ translate:2px 2px; box-shadow:1px 1px 0 var(--sumi); }
/* hours: a bar from 10 am to midnight with the open stretch and a "now" tick, then the week */
.lx-hours{ display:grid; gap:10px; margin-top:2px; }
.lx-bar{ position:relative; height:26px; border:3px solid var(--sumi); background:repeating-linear-gradient(90deg,var(--kinari) 0 calc(100% / 14 - 1px),#D9D0B7 calc(100% / 14 - 1px) calc(100% / 14)); }
.lx-seg{ position:absolute; top:0; bottom:0; left:var(--a,0%); width:var(--w,0%); background:var(--rokusho); border-left:3px solid var(--sumi); border-right:3px solid var(--sumi); transition:left .35s, width .35s; }
.lx-now{ position:absolute; top:-7px; bottom:-7px; width:5px; left:var(--n,0%); translate:-50% 0; background:var(--beni); border:2px solid var(--sumi); display:none; z-index:2; }
.lx-now.on{ display:block; }
.lx-bar span{ position:absolute; top:100%; margin-top:4px; font:700 10.5px/1 var(--f-sans); color:var(--sumi-usu); }
.lx-t0{ left:0; } .lx-t1{ right:0; }
.lx-week{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.lx-week li{ display:contents; }
.lx-week button{ display:flex; justify-content:space-between; gap:8px; padding:7px 4px; background:none; border:0; border-bottom:1px dashed rgba(19,18,17,.28); font:500 13.5px/1.2 var(--f-sans); color:var(--sumi); cursor:pointer; text-align:left; touch-action:manipulation; }
.lx-week button b{ font:400 13px/1.2 var(--f-dot); white-space:nowrap; }
.lx-week button[aria-pressed="true"]{ background:var(--yamabuki); }
.lx-week button.today span::after{ content:"TODAY"; margin-left:7px; padding:2px 5px 1px; background:var(--beni); color:var(--shiro); font:400 10.5px/1 var(--f-dot); letter-spacing:.06em; }
.lx-week button:focus-visible{ outline:3px solid var(--sumi); outline-offset:1px; }
.lx-prep{ margin:0; font:500 13px/1.45 var(--f-sans); color:var(--sumi-usu); }
.lx-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.lx-btns .btn{ flex:0 1 auto; }

@media (max-width:980px){
  .lx-grid{ grid-template-columns:minmax(0,1fr); }
  .lx-mapwrap{ min-height:0; }
  .lx-map{ min-height:320px; height:46vh; max-height:420px; box-shadow:5px 5px 0 var(--sumi); }
}
@media (max-width:560px){
  .lx-stns{ gap:7px; padding-top:44px; }
  .lx-stn{ padding:10px 4px; box-shadow:3px 3px 0 var(--sumi); }
  .lx-stn .cd{ min-width:38px; height:38px; font-size:12.5px; border-width:3px; }
  .lx-stn .nx{ display:none; }
  .lx-stn .st{ font-size:10px; letter-spacing:.08em; }
  .lx-train{ scale:.8; }
  .lx-week{ grid-template-columns:minmax(0,1fr); }
  .lx-shop{ height:132px; }
  .lx-noren{ height:80px; }
  .lx-btns .btn:not(.btn-sm){ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ .lx-train,.lx-shutter,.lx-noren i,.lx-seg,.lx-pin,.lx-glow{ transition:none !important; } .lx-train.go,.lx-noren.sway i,.lx-lantern.swing,.lx-flag.flap,.lx-shutter.rattle,.lx-stn.ding .cd{ animation:none !important; } }
html.rm .lx-train,html.rm .lx-shutter,html.rm .lx-noren i,html.rm .lx-seg,html.rm .lx-pin,html.rm .lx-glow{ transition:none !important; }
html.rm .lx-train.go,html.rm .lx-noren.sway i,html.rm .lx-lantern.swing,html.rm .lx-flag.flap,html.rm .lx-shutter.rattle,html.rm .lx-stn.ding .cd{ animation:none !important; }