:root {
  color-scheme: dark;
  --background: #141414;
  --ink: #f5f5f0;
  --blue: #0073b1;
  --orange: #f7941d;
  --silver: #a7a9ac;
}

* { box-sizing: border-box; }
html { min-width: 280px; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--orange); color: var(--background); }
.page {
  --gutter: clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.header {
  display: flex;
  justify-content: flex-end;
  padding-block: 24px;
}
.links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.station-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 7px;
}
.direction { font-size: 28px; transform: rotate(-45deg); }
.station-link:hover { color: var(--orange); text-decoration: underline; }
.station-link:active { transform: translateY(1px); }
.station-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
main {
  display: flex;
  align-items: center;
  padding-block: 40px 88px;
}
.identity { --name-size: clamp(76px, 10vw, 140px); }
h1 {
  margin: 0;
  font-size: var(--name-size);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.name-line { display: flex; align-items: center; gap: .25em; }
.line-badge {
  display: grid;
  place-items: center;
  flex: 0 0 .6em;
  width: .6em;
  height: .6em;
  border-radius: 50%;
  letter-spacing: 0;
}
.line-badge > span { font-size: .4em; font-weight: 700; line-height: 1; }
.blue { background: var(--blue); color: var(--ink); }
.orange { background: var(--orange); color: var(--background); }
.silver { background: var(--silver); color: var(--background); }
p {
  margin: 34px 0 0;
  padding-left: calc(.85 * var(--name-size));
  color: #bfc0bd;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -.015em;
}

@media (max-width: 767px) {
  .header { padding-block: 20px; }
  .station-link { font-size: 17px; }
  main { padding-block: 32px 80px; }
  .identity { --name-size: clamp(43px, 14.5vw, 90px); }
  p { margin-top: 28px; padding-left: 0; font-size: 18px; max-width: 310px; }
  .desktop-break { display: none; }
}