/* edvardi.com, the system map. Tokens and components follow the portfolio
   (portfolio.edvardi.com, SPEC section 5); map rules are SPEC.md 5.2 and 5.6 here. */

@view-transition { navigation: auto; }

:root {
  --sign-black: #000000; --sign-white: #FFFFFF; --sign-muted: #B3B3B3;
  --paper: #FFFFFF; --ink: #1F1F1F; --ink-muted: #5C5C5C;
  --line-s: #A0A5A9; --line-j: #EE352E; --line-k: #35CE8D; --line-b: #E27EA6;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --band: var(--s7); --gutter: var(--s5); --rule: 10px; --measure: 62ch;
  --display: 'Inter Tight', 'Inter Tight Fallback', Arial, sans-serif;
  --text: 'Inter', 'Inter Fallback', Arial, sans-serif;
  --row: 156px;
  --tt: 60px; /* track center, from the top of each map row */
}
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 105.57%; ascent-override: 91.76%; descent-override: 22.85%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700 800; size-adjust: 96%; ascent-override: 100.9%; descent-override: 25.1%; line-gap-override: 0%; }
@media (max-width: 599px) { :root { --band: var(--s6); --gutter: var(--s4); --rule: 6px; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.62 var(--text); overflow-x: clip; }
::selection { background: var(--line-k); color: #000; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.topbar :focus-visible, .cover :focus-visible, .map-band :focus-visible, .sign :focus-visible, .site-footer :focus-visible, .stop-sign:focus-visible { outline-color: var(--sign-white); }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: var(--s4); z-index: 10; padding: var(--s2) var(--s3); background: #000; color: #fff; font: 700 16px/1.3 var(--display); transform: translateY(-200%); }
.skip:focus { transform: none; outline: 2px solid #fff; }

.bullet { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: var(--ink, #000); font: 800 13px/1 var(--display); vertical-align: middle; print-color-adjust: exact; }
.bullet.b40 { width: 40px; height: 40px; font-size: 22px; }
.bullet.sm { width: 18px; height: 18px; font-size: 10px; }
.rule { height: var(--rule); background: #fff; }

/* Header: the editor's way around, on every page (5.6). */
.topbar { background: #000; color: #fff; }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); padding-block: var(--s3); }
.topbar a { text-decoration: none; font: 700 16px/1.301 var(--display); }
.topbar a:hover { text-decoration: underline; }
.topbar nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.topbar nav a { display: inline-block; padding-block: var(--s1); }

/* Cover */
.cover, .sign, .map-band, .site-footer { background: #000; color: #fff; }
.cover { padding-block: var(--s6) var(--band); }
.cover h1 { margin: var(--s5) 0 0; font: 800 clamp(44px, 7vw, 88px)/0.95 var(--display); letter-spacing: -0.02em; }
.cover .sub { margin: var(--s3) 0 0; font: 800 clamp(22px, 3vw, 32px)/1.15 var(--display); color: var(--sign-muted); }
.quick { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: var(--s6) 0 0; padding: 0; list-style: none; }
.quick a { font: 800 clamp(20px, 2.4vw, 26px)/1.25 var(--display); text-decoration-thickness: 3px; text-underline-offset: 0.2em; text-decoration-color: var(--line-k); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s6) 0 0; padding: 0; list-style: none; font: 700 16px/1.3 var(--display); }
.legend li { display: flex; align-items: center; gap: var(--s2); }
.legend a { text-decoration: none; }
.legend a:hover { text-decoration: underline; }

/* The system map (5.2, 5.6) */
.map-band { padding-block: 0 var(--band); }
.map-band h2 { margin: 0; padding-top: var(--s6); font: 800 32px/1.15 var(--display); }
.map-legend { margin: var(--s2) 0 var(--s6); color: var(--sign-muted); font-size: 16px; }
.skip-map { margin-left: var(--s3); color: #fff; font: 700 16px/1.3 var(--display); }

.sysmap { display: grid; grid-template-columns: 96px repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(4, var(--row)); position: relative; }
.line-head { grid-column: 1; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding-top: calc(var(--tt) - 12px); text-decoration: none; font: 700 14px/1.3 var(--display); }
.line-head:hover .line-name { text-decoration: underline; }
.track { align-self: start; margin-top: calc(var(--tt) - 3px); height: 6px; margin-inline: calc(100% / var(--span) / 2); background: var(--c); }
.st { position: relative; z-index: 1; align-self: start; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: calc(var(--tt) - 12px) 0 0; text-align: center; text-decoration: none; }
.st .mark { display: block; flex: none; }
.st.stop .mark { width: 5px; height: 24px; margin-top: 0; background: #fff; }
.st.xfer .mark, .st.hub .mark { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #fff; outline: 3px solid #000; outline-offset: -3px; box-shadow: none; }
.st.hub .mark { width: 30px; height: 30px; margin-top: -3px; }
.st-label { display: block; width: max-content; max-width: 104px; margin-top: var(--s2); font: 700 14px/1.25 var(--display); }
/* Labels placed above the track (5.6): transfers and hubs, and stops next to a stop labeled below. */
.st.above .st-label { position: absolute; bottom: calc(100% - var(--tt) + 20px); left: 50%; margin: 0; transform: translateX(-50%); }
.st.hub .st-label { font-size: 17px; }
.st:hover .st-label, .st:focus-visible .st-label { text-decoration: underline; text-decoration-thickness: 2px; }
.outlets { display: flex; justify-content: center; gap: 2px; margin-top: var(--s1); }
.link { justify-self: center; align-self: start; margin-top: var(--tt); width: 8px; height: calc(var(--n) * var(--row)); background: #fff; }
.hub-link { width: 12px; }
/* Focus a line to read it: the others step back (5.6). */
.sysmap :is(.track, .st, .line-head) { transition: opacity 150ms ease; }
.sysmap:has([data-line="s"]:is(:hover, :focus-visible)) [data-line]:not([data-line="s"]),
.sysmap:has([data-line="j"]:is(:hover, :focus-visible)) [data-line]:not([data-line="j"]),
.sysmap:has([data-line="k"]:is(:hover, :focus-visible)) [data-line]:not([data-line="k"]),
.sysmap:has([data-line="b"]:is(:hover, :focus-visible)) [data-line]:not([data-line="b"]) { opacity: 0.35; }

/* Line view: the map as lists (mobile, /work, 404) */
.lv { margin-top: var(--s6); }
.lv h2 { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); padding: 0; font: 800 24px/1.2 var(--display); }
.lv h2 a { text-decoration: none; }
.lv h2 a:hover { text-decoration: underline; }
.lv ol { position: relative; margin: 0; padding: 0 0 0 var(--s6); list-style: none; }
.lv ol::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 6px; background: var(--c); }
.lv li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-block: var(--s2); font: 700 18px/1.3 var(--display); }
.lv li::before { content: ''; position: absolute; left: calc(var(--s6) * -1 + 5px); top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; }
.lv li a { text-decoration: none; }
.lv li a:hover { text-decoration: underline; }
.also { display: inline-flex; align-items: center; gap: 3px; }
.lineview-wrap { display: none; }
@media (max-width: 899px) {
  .sysmap { display: none; }
  .lineview-wrap { display: block; }
  .skip-map { display: none; }
}

/* Signs and pages */
.sign { padding-block: var(--s5) var(--band); }
.sign h1 { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 0; font: 800 clamp(30px, 4.4vw, 48px)/1.1 var(--display); }
.lede { margin: var(--s3) 0 0; max-width: var(--measure); color: var(--sign-muted); font: 700 18px/1.4 var(--display); }
.lede a { color: #fff; }
.strip { display: flex; justify-content: space-between; max-width: 720px; margin: var(--s5) 0 0; padding: 0; list-style: none; position: relative; }
.strip::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; background: #fff; }
.strip a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.strip .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.paper { padding-block: var(--band); }
.paper p { max-width: var(--measure); margin: 0 0 0.85em; }
.actions, .big-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s5) 0 0; padding: 0; list-style: none; font: 700 18px/1.3 var(--display); }
.big-links { flex-direction: column; font: 800 clamp(22px, 3vw, 30px)/1.3 var(--display); margin-bottom: var(--s5); }

.entries { padding-block: var(--s6) var(--band); }
.entry { max-width: var(--measure); padding-block: var(--s5); }
.entry + .entry { border-top: 0; }
.entry h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s2); font: 800 26px/1.2 var(--display); }
.entry h2::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.also-label { margin-right: var(--s1); color: var(--ink-muted); font: 400 14px/1.45 var(--text); }
.item { margin-top: var(--s4); }
.item h3 { margin: 0; font: 700 19px/1.3 var(--display); }
.meta { margin: var(--s1) 0 0; color: var(--ink-muted); font-size: 15px; line-height: 1.45; }
.item p { margin: var(--s1) 0 0; }
.go a { font: 700 16px/1.3 var(--display); }

.stops { display: grid; grid-template-columns: 2fr 3fr; gap: var(--s3); padding-block: 0 var(--band); }
.stop-sign { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); padding: var(--s5); background: #000; color: #fff; text-decoration: none; }
.stop-sign .label { color: var(--sign-muted); font: 700 16px/1.3 var(--display); }
.stop-sign .to { display: flex; align-items: center; gap: var(--s3); font: 700 21px/1.3 var(--display); }
.stop-sign.next .to { font: 800 26px/1.3 var(--display); }
.stop-sign:hover .to span:last-child { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--c, #fff); }
@media (max-width: 699px) { .stops { grid-template-columns: 1fr; } .stop-sign.next { order: -1; } }

.bio { padding-block: var(--band); }
.bio p { max-width: var(--measure); margin: 0 0 0.85em; }
.site-footer { padding-block: var(--band); }
.site-footer .name { margin: 0; font: 800 21px/1.3 var(--display); }
.site-footer .name a { text-decoration: none; }
.site-footer .contact { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s2) 0 var(--s4); padding: 0; list-style: none; font: 700 16px/1.3 var(--display); }
.site-footer .contact a { display: inline-block; padding-block: var(--s1); }
.site-footer .note { margin: 0; color: var(--sign-muted); font-size: 14px; }
.site-footer .note a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sysmap :is(.track, .st, .line-head) { transition: none; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
}
@media print {
  .topbar, .map-band .sysmap, .stops, .skip { display: none !important; }
  .cover, .sign, .map-band, .site-footer { background: none; color: #000; }
  .rule { background: #000; }
}