/* usa-by-rail.com: timetable paper, ticket stubs and signal colours */
@font-face{font-family:"Source Serif 4";src:url(/static/fonts/sourceserif4-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/static/fonts/sourceserif4-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/static/fonts/barlowcond-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/static/fonts/barlowcond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/static/fonts/barlowcond-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/static/fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#f4ecd8;--paper-2:#fbf6ea;--paper-3:#efe3c6;--ink:#1f1a14;--ink-2:#4a4136;--ink-3:#6d6150;--rule:#cdbd9a;
  --red:#b3261e;--green:#1f6b43;--amber:#d89a1c;--blue:#23466d;--link:#8f1d17;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --w:1180px;--r:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.08rem/1.62 var(--serif);
  background-image:linear-gradient(transparent 31px,rgba(205,189,154,.22) 32px);background-size:100% 32px}
img,svg{max-width:100%;height:auto}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--red);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}
.skip:focus{left:8px}
h1,h2,h3,.kicker,.foot-h,.foot-brand{font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em;line-height:1.08}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700;margin:.2em 0 .25em}
h2{font-size:clamp(1.45rem,3vw,1.9rem);font-weight:700;margin:1.8em 0 .55em;padding-bottom:.18em;border-bottom:3px double var(--ink)}
h3{font-size:1.28rem;font-weight:600;margin:1.3em 0 .35em}
p{margin:.65em 0}
.small,small{font-size:.86rem;color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:.88em;letter-spacing:-.01em}

/* header */
.topline{background:var(--ink);color:var(--paper);font:500 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.topline .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:7px;padding-bottom:7px}
.topline span:last-child{color:#e9c97a}
.site-head{background:var(--paper);border-bottom:4px double var(--ink)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand .logo-mark{width:46px;height:46px;flex:none}
.brand b{display:block;font:700 1.7rem/1 var(--cond);text-transform:uppercase;letter-spacing:.04em}
.brand small{display:block;font:500 .72rem/1.3 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 4px}
.nav a{display:block;padding:6px 9px;font:600 1.02rem/1.1 var(--cond);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:none;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--amber);color:var(--ink)}
.nav a[aria-current=page]{border-bottom-color:var(--red)}
.nav-toggle{display:none;font:600 1rem var(--cond);text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--paper);border:0;border-radius:var(--r);padding:8px 14px;cursor:pointer}

.crumbs ol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px;font:500 .76rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.crumbs li+li::before{content:"›";margin-right:4px;color:var(--rule)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* page */
main{padding-bottom:40px}
.page{padding-top:6px}
.page.narrow{max-width:820px}
.page-head{margin:10px 0 18px;max-width:900px}
.kicker{font:600 .92rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin:14px 0 0}
.lede{font-size:1.24rem;line-height:1.5;font-style:italic;color:var(--ink-2);margin:.4em 0}
.meta{font:500 .76rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.meta a{color:var(--ink-2)}
.prose{max-width:780px}
.prose ul{padding-left:1.2em}
.split{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:22px;align-items:start;margin:10px 0 8px}
.map-card{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--rule);padding:6px;margin:14px 0}
.map-card.wide{margin:16px 0 8px}
.map-card svg{display:block;width:100%}
svg .lbl{font:600 17px var(--cond);fill:var(--ink);paint-order:stroke;stroke:#fffaf0;stroke-width:4px;stroke-linejoin:round;text-transform:uppercase;letter-spacing:.03em}
svg .clbl{font:600 12.5px var(--cond);fill:var(--ink);paint-order:stroke;stroke:#fffaf0;stroke-width:3.5px;stroke-linejoin:round;text-transform:uppercase}
svg .note{font:500 10px var(--mono);fill:var(--ink-3)}
svg a .lbl,svg a .clbl{fill:var(--link)}
svg a:hover .lbl,svg a:hover .clbl{text-decoration:underline}
svg a.rt:hover path:last-child{stroke-width:6}
.legend{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.legend .sw{display:inline-block;width:22px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* timetable style spec list */
dl.spec{margin:14px 0;background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--r);padding:6px 14px;box-shadow:6px 6px 0 var(--rule)}
dl.spec>div{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--rule)}
dl.spec>div:last-child{border-bottom:0}
dl.spec dt{flex:none;width:9.5em;font:500 .74rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
dl.spec dd{margin:0;font-size:.98rem;line-height:1.4}
dl.spec.wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
dl.spec.wide>div:nth-last-child(2){border-bottom:0}
.status{background:#fff3d6;border-left:6px solid var(--amber);padding:10px 14px;margin:14px 0;max-width:900px;border-radius:0 var(--r) var(--r) 0}
.status .mono{font-weight:500;color:var(--red);margin-right:6px}

/* ticket stubs */
.tickets{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ticket a{position:relative;display:flex;flex-direction:column;gap:3px;height:100%;padding:14px 16px 12px;color:var(--ink);text-decoration:none;
  background:radial-gradient(circle at 0 58%,var(--paper) 9px,transparent 10px),radial-gradient(circle at 100% 58%,var(--paper) 9px,transparent 10px),var(--paper-2);
  border:1.5px solid var(--ink);border-top:7px solid var(--rc,var(--red));border-radius:var(--r);transition:transform .12s ease,box-shadow .12s ease}
.ticket a:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--rule)}
.tk-kind{font:500 .7rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.tk-name{font:700 1.4rem/1.05 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.tk-ends{font-size:.92rem;color:var(--ink-2);line-height:1.35}
.tk-time{font:500 .78rem/1.3 var(--mono);color:var(--ink-2);border-top:1px dashed var(--rule);padding-top:6px;margin-top:auto}
.ticket .mini{width:100%;height:30px;margin:4px 0}

/* departure board tables */
.tablewrap{overflow-x:auto;margin:12px 0;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper-2)}
table.board{border-collapse:collapse;width:100%;font-size:.95rem}
table.board th{background:var(--ink);color:var(--paper);font:500 .74rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:9px 10px;white-space:nowrap}
table.board td{padding:8px 10px;border-top:1px solid var(--rule);vertical-align:top}
table.board tbody tr:nth-child(even){background:var(--paper-3)}
table.board td:first-child{font-weight:600}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle;border:1.5px solid var(--ink)}

/* stops strip */
ol.stops{list-style:none;margin:10px 0 18px;padding:0 0 0 4px;columns:2;column-gap:36px}
ol.stops li{break-inside:avoid;position:relative;display:grid;grid-template-columns:3.2em 1fr;gap:2px 8px;padding:4px 0 4px 22px}
ol.stops li::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:4px;background:var(--red)}
ol.stops li::after{content:"";position:absolute;left:1px;top:11px;width:9px;height:9px;border-radius:50%;background:#fffaf0;border:2px solid var(--ink)}
ol.stops li.major::after{width:12px;height:12px;left:-1px;top:9px;border-width:2.5px}
ol.stops li.major .sname{font-weight:700}
ol.stops .code{color:var(--ink-3);font-size:.78rem;padding-top:3px}
ol.stops .sname small{margin-left:6px;font:500 .72rem var(--mono)}
ol.stops .chips{grid-column:2;display:flex;flex-wrap:wrap;gap:4px}
.chip{font:500 .68rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.03em;padding:2px 6px;border:1px solid var(--rule);border-radius:20px;color:var(--ink-2);text-decoration:none;background:var(--paper-2)}
.chip:hover{border-color:var(--ink)}
h3.branch{font-size:1.05rem;color:var(--blue)}
ul.classes{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
ul.classes li{background:var(--paper-2);border:1px solid var(--ink);border-radius:var(--r);padding:4px 10px;font-size:.92rem}

/* lists */
.ticklist{list-style:none;padding:0;max-width:820px}
.ticklist li{position:relative;padding:5px 0 5px 28px;border-bottom:1px dotted var(--rule)}
.ticklist li::before{content:"";position:absolute;left:2px;top:13px;width:12px;height:12px;background:var(--green);clip-path:polygon(0 0,100% 50%,0 100%)}
.linklist{list-style:none;padding:0;margin:10px 0}
.linklist li{padding:6px 0;border-bottom:1px dashed var(--rule);break-inside:avoid}
.linklist li a{font-weight:600}
.linklist li span{display:block;font-size:.86rem;color:var(--ink-3)}
.linklist.cols{columns:3 240px;column-gap:28px}
.count{font:500 .9rem var(--mono);color:var(--ink-3);vertical-align:middle}

.faq details{background:var(--paper-2);border:1.5px solid var(--ink);border-radius:var(--r);margin:8px 0;max-width:860px}
.faq summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:1.1em;font-family:var(--mono);color:var(--red)}
.faq details[open] summary::before{content:"−"}
.faq details>div{padding:0 14px 8px 32px}
.notice{margin:26px 0 8px;padding:12px 16px;border:2px dashed var(--ink-2);border-radius:var(--r);background:var(--paper-2);font-size:.94rem;max-width:900px}
.glance{max-width:900px}

/* pair ticket */
.ticket-big{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:10px 0 14px;padding:16px 20px;max-width:820px;
  background:radial-gradient(circle at 50% 0,var(--paper) 12px,transparent 13px),radial-gradient(circle at 50% 100%,var(--paper) 12px,transparent 13px),var(--paper-2);
  border:2px solid var(--ink);border-left:10px solid var(--red);border-radius:var(--r)}
.ticket-big span{display:block;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.ticket-big b{display:block;font:700 1.8rem/1.05 var(--cond);text-transform:uppercase}
.ticket-big b a{color:var(--ink);text-decoration:none}
.ticket-big b a:hover{color:var(--red)}
.ticket-big small{display:block;line-height:1.3}
.tb-arrow{font:700 2rem var(--cond);color:var(--red)}
.tb-to{text-align:right}

/* home */
.hero{border-bottom:3px double var(--ink);background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;padding-top:12px;padding-bottom:22px}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem)}
.hero-pic svg{display:block;width:100%;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper-2);box-shadow:6px 6px 0 var(--rule)}
.cta{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:9px 16px;font:700 1.08rem/1 var(--cond);text-transform:uppercase;letter-spacing:.05em;background:var(--red);color:#fffaf0;text-decoration:none;border:2px solid var(--ink);border-radius:var(--r);box-shadow:3px 3px 0 var(--ink)}
.btn:hover{color:#fffaf0;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn.ghost{background:var(--paper-2);color:var(--ink)}
.btn.ghost:hover{color:var(--ink)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.three>div{background:var(--paper-2);border:1.5px solid var(--ink);border-top:6px solid var(--blue);border-radius:var(--r);padding:4px 16px 10px}
.three>div:nth-child(2){border-top-color:var(--green)}
.three>div:nth-child(3){border-top-color:var(--amber)}
.three h3{margin-top:.7em}

dl.glossary{max-width:860px}
dl.glossary>div{padding:9px 0;border-bottom:1px dashed var(--rule)}
dl.glossary dt{font:700 1.15rem var(--cond);text-transform:uppercase;letter-spacing:.02em}
dl.glossary dd{margin:2px 0 0}

/* footer */
.site-foot{margin-top:40px;background:var(--ink);color:#e9dfc6;font-size:.94rem}
.site-foot a{color:#f2d68f}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:30px 0 16px}
.foot-brand{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .3em}
.foot-h{font:500 .78rem var(--mono);letter-spacing:.08em;color:#cdbd9a;margin:4px 0 8px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{padding:3px 0}
.site-foot .small{color:#cdbd9a}
.foot-legal{border-top:1px solid #4a4136;padding:14px 0 22px;font:500 .74rem/1.5 var(--mono);color:#b9ab8c}

@media (max-width:900px){
  .split,.hero-grid,.three{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  ol.stops{columns:1}
  dl.spec.wide{grid-template-columns:1fr}
  dl.spec.wide>div:nth-last-child(2){border-bottom:1px dashed var(--rule)}
}
@media (max-width:720px){
  body{font-size:1.02rem}
  .topline .wrap{flex-direction:column;gap:3px}
  .nav-toggle{display:block}
  .nav{width:100%;display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column}
  .nav a{padding:10px 4px;border-bottom:1px dashed var(--rule)}
  dl.spec dt{width:7.5em}
  .ticket-big{grid-template-columns:1fr;text-align:left}
  .tb-to{text-align:left}
  .tb-arrow{transform:rotate(90deg);width:max-content}
  .foot-grid{grid-template-columns:1fr}
  table.board{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.site-head,.topline,.site-foot,.nav-toggle{display:none}body{background:#fff}}
