/* The timetable (/timetable): the site's content set as the booklet a station hands out, in daylight after the first
   train. One colour of ink, as the real one is printed (the cover alone has its photograph). On screen the sheets lie on
   a desk one under another; printed, each is an A4 page. Sizes inside a sheet follow its width (cqw), so the screen and
   the paper keep the same set. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@400;600&display=swap');
:root{color-scheme:light;--desk:#e4e4df;--paper:#fcfcf9;--ink:#141414;--rule:#14141470;--hair:#1414142e;--soft:#5b5b5b;--faint:#9a9a9a;--accent:#c5ff58;--sans:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;--mincho:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;--num:'Barlow Condensed','Arial Narrow',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--gutter:max(16px,4vw)}
*{box-sizing:border-box}
html{background:var(--desk)}
body{margin:0;background:var(--desk);color:var(--ink);font:15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
::selection{background:#141414;color:#fcfcf9}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
table{border-collapse:collapse;width:100%}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-90px;z-index:100;background:var(--ink);color:var(--paper);padding:12px}
.skip:focus{top:12px}
/* English waits hidden until /i18n.js has put it in (2.5 s at most), as on the site */
.lang-wait .t-shell{opacity:0;animation:lang-wait 0s 2.5s forwards}
@keyframes lang-wait{to{opacity:1}}
html:not(.lang-ready) .lang-switch{visibility:hidden}

/* The cut, as on the site and /making: the page as it was holds still while the new one is uncovered from the left
   behind the scan line. From the site's dark footer it is the night giving way to the paper. */
.cut-line{position:fixed;top:0;bottom:0;left:0;z-index:90;width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 5px color-mix(in srgb,var(--accent) 85%,transparent),0 0 24px 2px color-mix(in srgb,var(--accent) 28%,transparent);pointer-events:none;opacity:0;view-transition-name:cut-line}
html.is-cutting .cut-line{opacity:1;left:100vw}
::view-transition-group(root),::view-transition-old(root){animation:none}
::view-transition-new(root){animation:cut-wipe .62s cubic-bezier(.65,0,.35,1) both}
::view-transition-group(cut-line){animation:none}
::view-transition-old(cut-line){display:none}
::view-transition-new(cut-line){animation:cut-line .62s cubic-bezier(.65,0,.35,1) both}
@keyframes cut-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes cut-line{from{left:-100vw}to{left:0}}

/* the header: the site's, in ink */
.t-header{display:flex;align-items:center;gap:22px;padding:22px var(--gutter)}
.brand>span{font:600 18px/1 var(--mono);letter-spacing:-.03em}
.brand b{font-weight:600}
.caret{animation:caret-blink 1.2s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}
.t-crumb{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--soft);padding-left:22px;border-left:1px solid var(--rule)}
.t-print{margin-left:auto;border:1px solid var(--ink);background:none;color:var(--ink);font:600 12px/1 var(--mono);letter-spacing:.08em;padding:9px 12px}
.lang-switch{display:flex;align-items:center;margin:0 -7px 0 0;font:500 12px/1 var(--mono);letter-spacing:.06em}
.lang-switch button{position:relative;padding:9px 7px;border:0;background:none;color:var(--faint);font:inherit;letter-spacing:inherit;transition:color .25s}
.lang-switch button+button:before{content:'';position:absolute;left:0;top:50%;width:1px;height:11px;margin-top:-5.5px;background:var(--rule)}
.lang-switch button[aria-pressed=true]{color:var(--ink)}
.lang-switch button:after{content:'';position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .3s}
.lang-switch button[aria-pressed=true]:after{opacity:1}
@media(hover:hover) and (pointer:fine){.t-print:hover{background:var(--ink);color:var(--paper)}.lang-switch button:hover{color:var(--ink)}.t-foot a:hover,.t-back:hover{opacity:.6}}

/* the desk and its sheets */
/* one column as wide as a sheet, so a sheet's own padding (in %) follows its width as the sizes inside it (cqw) do */
.t-desk{display:grid;grid-template-columns:minmax(0,860px);justify-content:center;gap:clamp(28px,4vw,48px);padding:clamp(4px,1.5vw,20px) var(--gutter) 64px}
.trains{display:contents}
.sheet{position:relative;width:100%;aspect-ratio:210/297;background:var(--paper);box-shadow:0 1px 2px #00000014,0 18px 40px -18px #00000047;padding:6.4% 6.4% 4.4%;display:flex;flex-direction:column;gap:clamp(14px,2.4vw,22px);container-type:inline-size;scroll-margin-top:16px}
.sh-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4cqw 2cqw;border-bottom:.42cqw solid var(--ink);padding-bottom:.9cqw}
.sh-head h2{font:900 max(19px,3.1cqw)/1.2 var(--sans);letter-spacing:.04em}
.sh-line{font:500 max(11px,1.55cqw)/1.4 var(--sans);letter-spacing:.08em}
.sh-sub{margin-top:1.6cqw}
.sh-foot{margin-top:auto;display:flex;justify-content:center;padding-top:1.2cqw;border-top:1px solid var(--hair);font:600 max(12px,1.7cqw)/1 var(--num);letter-spacing:.08em}
.fn{font:400 max(11px,1.5cqw)/1.75 var(--mincho);color:#2b2b2b;display:grid;gap:.2cqw}

/* 1. the cover: the masthead, the issue, the photograph, the features and the contents */
.cover{gap:clamp(12px,2vw,19px)}
.cv-band{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:.8cqw solid var(--ink);padding-bottom:1cqw}
.cv-brand{font:800 max(20px,4.4cqw)/1 var(--num);letter-spacing:.08em}
.cv-issue{display:flex;align-items:baseline;gap:.8cqw;font:700 max(14px,2.4cqw)/1 var(--num)}
.cv-month{font:800 max(52px,13.5cqw)/.78 var(--num);letter-spacing:-.02em}
.cv-issue small{font:700 max(12px,2cqw)/1 var(--sans)}
.cv-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 2.4cqw;margin-top:.6cqw}
.cv-ja{font:900 max(52px,15.6cqw)/1 var(--sans);letter-spacing:.06em}
.cv-en{font:700 max(16px,4cqw)/1 var(--num);letter-spacing:.34em}
.cv-sub{font:700 max(15px,2.7cqw)/1.4 var(--sans)}
.cv-times{margin-left:.8em;font:700 1.12em var(--num);letter-spacing:.04em}
.cv-photo img{display:block;width:100%;height:auto;aspect-ratio:1280/536;object-fit:cover;background:#2a2a35}
.cv-photo figcaption{font:400 max(11px,1.45cqw)/1.6 var(--mincho);margin-top:.8cqw}
.cv-feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2cqw;align-items:start}
.cv-tag{background:var(--ink);color:var(--paper);font:900 max(13px,2cqw)/1 var(--sans);padding:1.2cqw 1cqw;writing-mode:vertical-rl;letter-spacing:.3em}
:lang(en) .cv-tag{writing-mode:horizontal-tb;letter-spacing:.14em;font-size:max(11px,1.5cqw)}
.cv-feat ul{list-style:none;padding:0;display:grid;gap:.9cqw}
.cv-feat li{font:500 max(12px,1.75cqw)/1.5 var(--sans)}
.cv-feat li b{display:block;font:900 max(16px,3cqw)/1.3 var(--sans)}
.cv-toc{border-top:2px solid var(--ink);padding-top:1.2cqw;display:grid;gap:.6cqw}
.cv-toc h2{font:700 max(11px,1.5cqw)/1 var(--mono);letter-spacing:.2em}
.cv-toc ol{list-style:none;padding:0;display:grid;gap:.3cqw}
.cv-toc a{display:flex;align-items:baseline;gap:1cqw;font:500 max(13px,1.9cqw)/1.6 var(--sans)}
.cv-toc a:after{content:'';flex:1;order:1;border-bottom:1.5px dotted var(--ink);transform:translateY(-.3em)}
.cv-toc .ref{order:2;font:700 1.15em var(--num);font-style:normal;min-width:2.4em;text-align:right}
.cv-price{align-self:flex-end;font:700 max(12px,1.6cqw)/1 var(--sans);border:1.5px solid var(--ink);padding:.7cqw 1.4cqw;letter-spacing:.1em}

/* 2. the index map and the night's times */
.map-svg{display:block;width:100%;height:auto;overflow:visible}
.map-line{fill:none;stroke:var(--ink);stroke-width:6}
.map-dir{fill:var(--ink)}
.stop circle{fill:var(--paper);stroke:var(--ink);stroke-width:2.6}
.stop.term circle.end{fill:var(--paper);stroke-width:3}
.stop.term circle:not(.end){fill:var(--ink);stroke:none}
.stop .st{font:700 15px var(--sans);fill:var(--ink);text-anchor:middle}
.stop .tm{font:700 16px var(--num);fill:var(--ink);text-anchor:middle;letter-spacing:.04em}
.map-stops a:focus-visible{outline:none}
.map-stops a:focus-visible .st,.map-stops a:hover .st{text-decoration:underline}
.night th,.night td{border-bottom:1px solid var(--hair);padding:1.1cqw 1.4cqw 1.1cqw 0;vertical-align:top;text-align:left;font:400 max(12px,1.7cqw)/1.6 var(--sans)}
.night thead th{font:500 max(10px,1.3cqw)/1.4 var(--mono);letter-spacing:.14em;border-bottom:2px solid var(--ink);padding-top:0}
.night .t{font:700 max(18px,3cqw)/1.1 var(--num);white-space:nowrap;letter-spacing:.02em}
.night th,.night td{word-break:keep-all;overflow-wrap:anywhere}
.ref:empty{display:none}
.night th[scope=row]{width:22%}
.night th[scope=row] a{display:block;font:700 max(14px,2.1cqw)/1.3 var(--sans)}
.night th[scope=row] small,.legend th small{display:block;font:500 max(9px,1.15cqw)/1.4 var(--mono);letter-spacing:.1em;color:var(--soft);margin-top:.2em}
.night tr.end .t,.night tr.end th a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.night .sub{list-style:none;padding:0;margin-top:.7cqw;display:grid;gap:.35cqw}
.night .sub li{display:grid;grid-template-columns:minmax(0,13.5em) minmax(0,1fr);gap:1.4cqw}
.night .sub b{font:600 max(10px,1.4cqw)/1.75 var(--mono);letter-spacing:.02em}
.night .aside{font:400 max(11px,1.45cqw)/1.6 var(--mincho);color:var(--soft);margin-top:.5cqw}
.night .aside a{border-bottom:1px solid var(--soft)}
.night .mail{font:700 max(15px,2.3cqw)/1.3 var(--num);letter-spacing:.04em;border-bottom:2px solid var(--ink)}

/* 3. first departures: a station's timetable board (hours down the side, the minutes along) and its key */
.poster{border:2px solid var(--ink)}
.po-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4cqw 2.4cqw;background:var(--ink);color:var(--paper);padding:1.1cqw 2cqw}
.po-st{font:900 max(17px,2.8cqw)/1.2 var(--sans);letter-spacing:.24em}
.po-dir{font:700 max(12px,1.8cqw)/1.2 var(--sans)}
.po-days{margin-left:auto;font:500 max(11px,1.45cqw)/1.2 var(--sans)}
.po-row{display:flex;border-top:1.5px solid var(--ink)}
.po-h{flex:0 0 max(48px,9cqw);display:grid;place-items:center;border-right:2px solid var(--ink);font:800 max(32px,7cqw)/1 var(--num)}
.po-mins{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 max(10px,2.2cqw);padding:1.3cqw 2cqw}
.po-m{display:grid;justify-items:center;gap:.3cqw;font:700 max(28px,5.4cqw)/1 var(--num);letter-spacing:.02em;padding:.4cqw .2cqw}
.po-m i{font:600 max(8px,1.05cqw)/1 var(--mono);font-style:normal;letter-spacing:.06em}
.po-m.first{outline:2px solid var(--ink);outline-offset:.2cqw}
.legend th,.legend td{border-bottom:1px solid var(--hair);padding:1cqw 1.6cqw 1cqw 0;text-align:left;vertical-align:baseline;font:500 max(12px,1.65cqw)/1.55 var(--sans)}
.legend thead th{font:500 max(10px,1.3cqw)/1.4 var(--mono);letter-spacing:.14em;border-bottom:2px solid var(--ink);padding-top:0}
.legend .t{font:700 max(16px,2.4cqw)/1.2 var(--num);white-space:nowrap}
.legend tbody th{font:600 max(10px,1.35cqw)/1.6 var(--mono);letter-spacing:.06em;white-space:nowrap}
.legend tr.first .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.legend .stops{font:400 max(11px,1.5cqw)/1.6 var(--mincho)}
.legend .stops span span+span:before{content:'、'}
:lang(en) .legend .stops span span+span:before{content:', '}

/* 4. the production trains: trains across, the page's places down, the day each stop was made in the cells */
.tt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tt{min-width:640px;font-variant-numeric:tabular-nums}
.tt th,.tt td{border:1px solid var(--rule);padding:.55cqw .45cqw;text-align:center;font:600 max(12px,1.66cqw)/1.25 var(--num);letter-spacing:.02em;white-space:nowrap}
.tt td i{font-style:normal;opacity:.5}
.tt th[scope=row]{text-align:left;font:500 max(11px,1.55cqw)/1.25 var(--sans);padding-right:1.2cqw;position:sticky;left:0;z-index:1;background:var(--paper);box-shadow:1px 0 var(--rule)}
.tt th[scope=row] small{font:500 .7em/1 var(--mono);letter-spacing:.04em;color:var(--soft);margin-left:.6em}
.tt thead tr:last-child>*{border-bottom:2px solid var(--ink)}
.tt .kind{font:500 max(11px,1.5cqw)/1.25 var(--sans)}
/* a long English type or name breaks inside its cell rather than pushing the table past the sheet */
.tt .kind,.tt .nm{white-space:normal}
.tt .kind.ltd{font-weight:900}
.tt .nm{font:700 max(11px,1.55cqw)/1.25 var(--sans)}
.tt .cars small{font:500 .72em var(--sans);margin-left:.1em}
.tt .pass{font:500 max(11px,1.5cqw)/1.25 var(--sans)}
.tt .off{color:var(--faint);font-weight:400}
.tt tr.door th{color:var(--soft)}
.tt tr.arr>*{border-top:2px solid var(--ink)}

/* 5. the train guide (the works) and the line guide (Kanazawa to Tokyo) */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw}
.work{border:1.5px solid var(--ink);padding:1.6cqw 1.8cqw;display:flex;flex-direction:column;gap:1cqw}
.work.next{border-style:dashed}
.w-type{font:600 max(10px,1.3cqw)/1.4 var(--mono);letter-spacing:.08em}
.work h3{font:900 max(15px,2.3cqw)/1.3 var(--sans)}
.work h3 small{display:block;font:600 max(11px,1.45cqw)/1.3 var(--num);letter-spacing:.16em}
.work p{font:400 max(12px,1.55cqw)/1.7 var(--sans)}
.work dl{margin-top:auto;display:grid;gap:.4cqw;border-top:1px solid var(--hair);padding-top:.8cqw}
.work dl div{display:grid;grid-template-columns:3.6em minmax(0,1fr);gap:.8cqw;font:400 max(11px,1.4cqw)/1.55 var(--sans)}
:lang(en) .work dl div{grid-template-columns:5.6em minmax(0,1fr)}
.work dt{font-weight:700}
.work dd a{border-bottom:1px solid var(--ink);overflow-wrap:anywhere}
.journey{list-style:none;padding:0;display:grid}
.journey li{display:grid;grid-template-columns:3.2em 10.5em minmax(0,1fr);gap:.2cqw 1.6cqw;padding:1.2cqw 0;border-bottom:1px solid var(--hair);align-items:baseline}
.j-no{font:700 max(16px,2.4cqw)/1 var(--num)}
.j-tag{font:600 max(10px,1.3cqw)/1.4 var(--mono);letter-spacing:.1em}
.journey b{font:700 max(13px,1.85cqw)/1.5 var(--sans)}
.journey p{grid-column:3;font:400 max(12px,1.5cqw)/1.75 var(--sans)}
.journey .next b{font-weight:900}
.j-dep{font:600 max(11px,1.4cqw)/1.4 var(--mono)!important;letter-spacing:.1em}
.j-dep span{font:700 1.4em var(--num);margin-left:.4em}

/* 6. the colophon */
.imprint{border-top:2px solid var(--ink)}
.imprint div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:2cqw;padding:1.1cqw 0;border-bottom:1px solid var(--hair);font:400 max(12px,1.65cqw)/1.7 var(--sans)}
.imprint dt{font-weight:700}
.t-back{align-self:flex-start;margin-top:2cqw;font:700 max(20px,3.2cqw)/1.2 var(--num);letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:.3em}
.t-foot{display:flex;justify-content:space-between;gap:16px;padding:18px var(--gutter) 22px;border-top:1px solid var(--rule);font:12px var(--mono);color:var(--soft)}

@media screen and (max-width:760px){
  .t-header{gap:14px}
  .t-crumb{padding-left:14px}
  .sheet{aspect-ratio:auto;padding:22px 16px 18px;gap:16px}
  .works{grid-template-columns:minmax(0,1fr)}
  .journey li{grid-template-columns:2.6em minmax(0,1fr)}
  .journey li b,.journey p{grid-column:2}
  .night .sub li{grid-template-columns:minmax(0,1fr);gap:0}
  .imprint div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media screen and (max-width:370px){.t-print{padding:9px 8px}.t-crumb{display:none}}

/* printed: no desk, no header; a sheet to a page */
@page{size:A4 portrait;margin:11mm}
@media print{
  html,body{background:#fff}
  .t-header,.t-foot,.skip,.cut-line{display:none!important}
  .t-desk{display:block;padding:0}
  .sheet{width:auto;aspect-ratio:auto;min-height:272mm;box-shadow:none;padding:0;gap:4.5mm;break-after:page;break-inside:avoid}
  .sheet:last-of-type{break-after:auto}
  .tt-wrap{overflow:visible}
  .tt{min-width:0}
  .cv-photo img,.po-head,.cv-tag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .t-back{display:none}
  .lang-wait .t-shell{opacity:1;animation:none}
}
@media(prefers-reduced-motion:reduce){.caret{animation:none}}