/* topfueldragbike: timing-tower stylesheet. Graphite on cool concrete, one lime accent. */
:root {
  --ntb-ink: #191b1c;
  --ntb-page: #ececea;
  --ntb-rule: #b8bcbe;
  --ntb-lime: #c7f04a;
  --ntb-dim: #55595b;
  --ntb-head: ui-sans-serif, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ntb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ntb-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html { box-sizing: border-box; background: var(--ntb-page); color: var(--ntb-ink); }
*, ::before, ::after { box-sizing: inherit; }
.ntb-body { margin: 0; font: 1.0625rem/1.62 var(--ntb-body); }
.ntb-skip { position: absolute; left: -9999px; }
.ntb-skip:focus { left: 1rem; top: 1rem; background: var(--ntb-lime); padding: .3rem .6rem; }
a { color: var(--ntb-ink); text-decoration-color: var(--ntb-lime); text-decoration-thickness: .2em; text-underline-offset: .16em; }
a:hover, a:focus-visible { background: var(--ntb-lime); }

.ntb-head { border-bottom: 1px solid var(--ntb-rule); padding: 1.1rem 1.25rem .9rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; }
.ntb-mark { text-decoration: none; display: flex; flex-direction: column; line-height: 1.05; }
.ntb-mark:hover { background: none; }
.ntb-mark__word { font: 700 1.9rem/1 var(--ntb-head); font-stretch: condensed; letter-spacing: -.01em; }
.ntb-mark__desc { font: .74rem/1.4 var(--ntb-mono); color: var(--ntb-dim); margin-top: .3rem; }
.ntb-nav { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font: 600 .82rem/1.8 var(--ntb-head); text-transform: uppercase; letter-spacing: .06em; }
.ntb-nav a { text-decoration: none; padding: 0 .15rem; }
.ntb-nav a[aria-current="page"] { box-shadow: inset 0 -.32em 0 var(--ntb-lime); }

.ntb-tower { display: grid; grid-template-columns: 9rem minmax(0, 68ch); gap: 0 2.25rem; padding: 2rem 1.25rem 3rem; }
.ntb-rail { border-right: 3px solid var(--ntb-lime); padding-right: 1rem; text-align: right; font-family: var(--ntb-mono); }
.ntb-rail__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ntb-dim); }
.ntb-rail__no { display: block; font-size: 2.6rem; line-height: 1.1; font-weight: 700; }
.ntb-col { min-width: 0; }

.ntb-kicker { font: .75rem/1.4 var(--ntb-mono); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .6rem; display: flex; gap: 1rem; color: var(--ntb-dim); }
.ntb-h1, .ntb-prose h2, .ntb-prose h3, .ntb-sources h2 { font-family: var(--ntb-head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; }
.ntb-h1 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); margin: 0 0 .8rem; }
.ntb-prose h2 { font-size: 1.32rem; margin: 2.2rem 0 .6rem; border-top: 1px solid var(--ntb-rule); padding-top: .9rem; }
.ntb-prose h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
.ntb-meta { font: .8rem/1.5 var(--ntb-mono); color: var(--ntb-dim); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; border-bottom: 1px solid var(--ntb-rule); padding-bottom: .9rem; margin-bottom: 1.4rem; }
.ntb-prose p, .ntb-prose ul, .ntb-prose ol { margin: 0 0 1.05rem; }
.ntb-prose li { margin-bottom: .35rem; }
.ntb-prose blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--ntb-ink); }
.ntb-prose code, .ntb-prose kbd { font-family: var(--ntb-mono); font-size: .9em; }
.ntb-lead { font-size: 1.16rem; }
.ntb-archline { font: 600 1.02rem/1.55 var(--ntb-body); border: 1px solid var(--ntb-ink); padding: .9rem 1.1rem; background: #f7f7f5; }

.ntb-fig { margin: 1.6rem 0; }
.ntb-fig svg { width: 100%; height: auto; display: block; border: 1px solid var(--ntb-rule); background: #f7f7f5; }
.ntb-fig figcaption, .ntb-slip figcaption { font: .76rem/1.5 var(--ntb-mono); color: var(--ntb-dim); margin-top: .45rem; }

.ntb-spec { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; border-bottom: 1px dotted var(--ntb-rule); padding: .35rem 0; }
.ntb-spec__k { font: .78rem/1.6 var(--ntb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ntb-dim); }

.ntb-slip { margin: 1.6rem 0; border: 2px solid var(--ntb-ink); padding: .9rem 1rem; background: #fbfbf9; max-width: 30rem; }
.ntb-slip table { width: 100%; border-collapse: collapse; font: .86rem/1.5 var(--ntb-mono); }
.ntb-slip th, .ntb-slip td { text-align: right; padding: .12rem .3rem; }
.ntb-slip th[scope="row"] { text-align: left; font-weight: 400; color: var(--ntb-dim); }
.ntb-slip thead th { border-bottom: 1px dashed var(--ntb-ink); font-weight: 700; }

.ntb-sheet { list-style: none; margin: 1rem 0 2rem; padding: 0; border-top: 2px solid var(--ntb-ink); }
.ntb-sheet__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 7.5rem 6rem; gap: .2rem 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--ntb-rule); }
.ntb-sheet__no, .ntb-sheet__date, .ntb-sheet__hub { font: .8rem/1.4 var(--ntb-mono); color: var(--ntb-dim); }
.ntb-sheet__no { font-weight: 700; color: var(--ntb-ink); }
.ntb-sheet__title { font-weight: 600; }
.ntb-hubs { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.ntb-hubs li { padding: .5rem 0; border-bottom: 1px solid var(--ntb-rule); }
.ntb-hubs a { font: 700 1rem/1.3 var(--ntb-head); text-transform: uppercase; letter-spacing: .04em; }
.ntb-hubs span { display: block; font-size: .93rem; color: var(--ntb-dim); }

.ntb-timeline { list-style: none; padding: 0; margin: 1.2rem 0 2rem; }
.ntb-timeline li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--ntb-rule); }
.ntb-timeline b { font: 700 .86rem/1.6 var(--ntb-mono); }

.ntb-sources { margin-top: 2.4rem; border-top: 2px solid var(--ntb-ink); padding-top: .4rem; font-size: .95rem; }
.ntb-sources h2 { font-size: 1rem; }
.ntb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.4rem; }
.ntb-pager a { display: block; border: 1px solid var(--ntb-rule); padding: .7rem .8rem; text-decoration: none; font-weight: 600; }
.ntb-pager span { display: block; font: .7rem/1.4 var(--ntb-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ntb-dim); }

.ntb-foot { border-top: 1px solid var(--ntb-rule); padding: 1.2rem 1.25rem 2.2rem; font: .8rem/1.6 var(--ntb-mono); color: var(--ntb-dim); }
.ntb-foot p { margin: 0 0 .3rem; }
.ntb-foot__links a { margin-right: 1rem; }

@media (max-width: 760px) {
  .ntb-tower { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1rem 2.4rem; }
  .ntb-rail { border-right: 0; border-bottom: 3px solid var(--ntb-lime); text-align: left; display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 .3rem; margin-bottom: 1.2rem; }
  .ntb-rail__no { font-size: 1.6rem; }
  .ntb-sheet__row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ntb-sheet__date, .ntb-sheet__hub { grid-column: 2; }
  .ntb-spec { grid-template-columns: 1fr; gap: 0; }
  .ntb-timeline li { grid-template-columns: 1fr; gap: 0; }
}