/* lynix.ca stylesheet. Plain CSS: edit and reload, no build step. */

/* ---------- Colours and fonts ---------- */

:root {
  --night: #0b0814;        /* page background */
  --text: #e9e4f2;         /* main text */
  --soft: #cfc6dd;         /* intro paragraphs, nav links */
  --muted: #a99bbd;        /* secondary text */
  --dim: #8d7fa3;          /* dates, small labels */
  --faint: #6f6386;        /* footer */
  --rule: #2a2238;         /* borders and dividers */
  --purple: #a855f7;       /* brand colour */
  --purple-light: #c084fc; /* links */
  --moon: #b8c7e6;         /* Moon Line transfer badge */
  --advisory: #fcd34d;     /* service advisory yellow */

  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Space Grotesk", var(--body-font);
  --logo-font: "Unbounded", var(--heading-font);
}

@font-face {
  font-family: "Space Grotesk";
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Unbounded";
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/unbounded-latin-wght-normal.woff2") format("woff2");
}

/* ---------- Basics ---------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 17px/1.65 var(--body-font);
}

h1, h2, h3 {
  margin: 0 0 16px;
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: 1.15;
}
h1 { font-size: 40px; letter-spacing: -0.02em; }
h2 { font-size: 26px; }

p { margin: 0 0 16px; }
img { max-width: 100%; height: auto; }
code { font: 13px Consolas, Menlo, monospace; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

a { color: var(--purple-light); text-decoration: none; }
a:hover { color: white; }
a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Centred column used by the header, main content and footer */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Small helpers */
.purple { color: var(--purple); }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* Larger intro paragraph under a heading */
.lede {
  max-width: 34em;
  font-size: 19px;
  color: var(--soft);
}

/* Small uppercase labels like "LNX 01" */
.label {
  margin: 0 0 6px;
  font-family: var(--heading-font);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

/* A station name that plays its announcement: looks like the label, with a note icon */
.chime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0;
  padding: 6px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chime:hover,
.chime[aria-pressed="true"] { color: var(--purple-light); }
.chime:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.chime-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  letter-spacing: 0;
}
.chime[aria-pressed="true"] .chime-icon {
  background: var(--purple);
  border-color: var(--purple);
  color: white;
  animation: chime-pulse 1s ease-in-out infinite;
}
@keyframes chime-pulse {
  50% { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0); }
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .chime[aria-pressed="true"] .chime-icon { animation: none; }
}

/* Pill badge naming a line, in that line's colour: a round letter, then the name.
   Set --line (and --line-ink for the letter) to recolour it. */
.line-pill {
  --line: var(--purple);
  --line-ink: white;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--line);
  font-size: 11px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  vertical-align: middle;
}
.line-pill-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line);
  color: var(--line-ink);
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--line) 55%, transparent);
}
.line-pill.moon { --line: var(--moon); --line-ink: var(--night); }

/* The Lynix Line pill at the top of the home page is a bit larger */
.line-pill.hero-line { padding: 3px 12px 3px 3px; font-size: 12px; }
.line-pill.hero-line .line-pill-dot { width: 22px; height: 22px; font-size: 12px; }

/* A transfer pill sits after a station name */
.transfer { margin-left: 8px; }

/* Star field behind everything: tiny repeating dots plus a purple glow at the top */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--night);
  background-image:
    radial-gradient(1px 1px at 20px 30px, white, transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 90px 160px, var(--purple-light), transparent),
    radial-gradient(1px 1px at 230px 40px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 300px 200px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 360px 120px, var(--purple), transparent),
    radial-gradient(ellipse at 50% -10%, rgba(168, 85, 247, 0.22), transparent 60%);
  background-size: 400px 260px, 400px 260px, 400px 260px, 400px 260px, 400px 260px, 400px 260px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
}

/* ---------- Header and footer ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
}

/* Wordmark */
.logo {
  color: white;
  font-family: var(--logo-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.logo:hover { color: var(--purple-light); }

.site-nav {
  display: flex;
  gap: 28px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Links get a short purple track underneath that grows on hover and stays on the current page */
.site-nav a {
  position: relative;
  padding: 6px 0;
  color: var(--muted);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--purple);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: white;
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 13px;
  color: var(--faint);
}
.site-footer a { color: var(--dim); }

/* Small purple diamond before "In memory of Linx" */
.star {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--purple);
  transform: rotate(45deg);
  vertical-align: middle;
}

/* ---------- Page sections ---------- */

/* Top of the home page */
.hero {
  padding: 72px 0 48px;
}
.hero h1 {
  font-size: 52px;
}
.hero .label {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Every other page */
.page {
  padding: 56px 0 24px;
}

/* ---------- Home page: the train line ---------- */

.line {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  Each stop draws its own piece of track (::after) and a station dot (::before).
  Both are centred on the same point, 17px from the left, so the dots always sit on the line.
*/
.stop {
  position: relative;
  padding: 0 0 64px 52px;
}

/* The track: a 4px rail from the top of this stop to the top of the next */
.stop::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 4px;
  border-radius: 2px;
  background: var(--purple);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
}
.stop:first-child::after { top: 10px; } /* start at the first dot, not above it */

/* The station dot, lined up with the stop's label */
.stop::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 17px;
  width: 20px;
  height: 20px;
  border: 4px solid var(--purple);
  border-radius: 50%;
  background: white;
  transform: translateX(-50%);
}

/* The last stop: no track after it, and a bigger filled dot */
.stop.terminus { padding-bottom: 0; }
.stop.terminus::after { display: none; }
.stop.terminus::before {
  top: -4px;
  width: 28px;
  height: 28px;
  border: 5px solid white;
  background: var(--purple);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.8);
}

.portrait {
  float: right;
  width: 160px;
  height: 160px;
  margin: 0 0 16px 24px;
  border: 3px solid var(--purple);
  border-radius: 50%;
}

/* Fur colour chips */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.swatches li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
}
.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* Suit photo gallery: photos keep their shape and flow into columns */
.gallery {
  columns: 2;
  column-gap: 12px;
  margin: 8px 0 0;
}
.gallery a {
  display: block;
  margin-bottom: 12px;
  break-inside: avoid;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.gallery img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}
.gallery a:hover img { transform: scale(1.03); }

/* ---------- Card lists (blog posts and socials) ---------- */

.cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cards a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(11, 8, 20, 0.6);
  color: var(--text);
}
.cards a:hover {
  background: rgba(168, 85, 247, 0.1);
  color: var(--text);
}

/* Blog post card */
.cards .date { width: 170px; font-size: 14px; color: var(--dim); }
.cards a:hover .title { color: var(--purple-light); }

/* Con card: name and dates on the left, staff badge on the right */
.cards .con { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cards .when { font-size: 14px; color: var(--muted); }

/* Shield icon for cons where I'm on staff */
.shield {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-left: auto;
  fill: var(--purple-light);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.6));
}
.staff-key { white-space: nowrap; font-size: 15px; color: var(--muted); }
.staff-key .shield { width: 16px; height: 16px; margin: 0 2px 0 8px; vertical-align: -2px; }

/* Status page: green or red light, then the result on the right */
.status-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.status-dot.up { background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.7); }
.status-dot.down { background: #f87171; box-shadow: 0 0 10px rgba(248, 113, 113, 0.7); }
.status-text { margin-left: auto; font-size: 14px; }
.status-text.up { color: #4ade80; }
.status-text.down { color: #f87171; }

/* Social card */
.cards .name { min-width: 120px; font-family: var(--heading-font); font-weight: 700; }
.cards .handle { font-size: 15px; color: var(--muted); }
.cards .go { margin-left: auto; font-size: 14px; color: var(--purple-light); }

/* ---------- Blog post ---------- */

.post-meta {
  font-size: 14px;
  color: var(--dim);
}

/* Text rendered from markdown */
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose h2 { margin-top: 40px; font-size: 24px; }
.prose h3 { margin-top: 32px; font-size: 20px; }
.prose img { display: block; margin: 24px 0; border-radius: 6px; }
.prose blockquote { margin: 24px 0; padding-left: 16px; border-left: 3px solid var(--purple); color: var(--soft); }
.prose strong { color: white; }

/* ---------- In memory of Linx ---------- */

.memorial { text-align: center; }
.memorial img { margin-bottom: 8px; border-radius: 8px; }
.memorial .lede { margin-left: auto; margin-right: auto; }
/* Photos of Linx and Lynix, from static/img/linx/ */
.memorial-photos { margin-top: 48px; }
.memorial .gallery { margin-bottom: 32px; text-align: left; }
.memorial .gallery img { margin-bottom: 0; border-radius: 0; }

/* ---------- Hotel page ---------- */

.notice {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-left: 3px solid #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  font-size: 15px;
}
.notice.error {
  border-left-color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

/* Booking details in a two-column grid */
.keycard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 24px 0 0;
  border: 1px solid var(--purple);
}
.keycard div { padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.keycard dt { font-family: var(--heading-font); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); }
.keycard dd { margin: 2px 0 0; font-weight: 700; }
.keycard dd.price { font-size: 20px; color: var(--purple); }
.keycard small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }

/* ---------- 404 page: a broken stretch of track ---------- */

.broken-track {
  position: relative;
  height: 90px;
  margin: 32px 0 32px 8px;
  border-left: 2px dashed var(--purple);
}
.broken-track span {
  position: absolute;
  top: 0;
  left: -9px; /* centres the 16px dot on the 2px track */
  width: 16px;
  height: 16px;
  border: 3px solid var(--purple);
  border-radius: 50%;
  background: var(--night);
}
.broken-track span:last-child {
  top: auto;
  bottom: 0;
  background: var(--purple);
}

.button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 4px;
  background: var(--purple);
  color: white;
  font-family: var(--heading-font);
  font-weight: 700;
}
.button:hover {
  background: var(--purple-light);
  color: var(--night);
}

/* ---------- Site map: the transit map at /sitemap ---------- */

/*
  Phones get both lines running down the page, the Moon Line carrying on from Nebula.
  Wider screens (below) run the Lynix Line across the top and drop the Moon Line down from Nebula.
  Each stop draws the track to the next stop (::before) and its station dot (::after).
*/
.tmap { margin-top: 32px; }

/* TTC-style service advisory: yellow header strip, plain text underneath */
.advisory {
  margin: 8px 0 8px;
  border: 1px solid var(--advisory);
  border-radius: 6px;
  overflow: hidden;
}
.advisory-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  background: var(--advisory);
  color: var(--night);
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.advisory-head svg { flex: none; fill: var(--night); stroke: var(--advisory); }
.advisory-body {
  padding: 14px 16px 2px;
  background: rgba(252, 211, 77, 0.06);
  color: var(--soft);
  font-size: 15px;
}
.advisory-body p { margin-bottom: 12px; }

/* Small yellow tag on a station affected by the advisory */
.tmap-alert {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--advisory);
  color: var(--night);
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.tmap-line {
  --line: var(--purple);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tmap-line.moon { --line: var(--moon); }

.tmap-stop {
  position: relative;
  min-height: 72px;
  padding: 4px 0 24px 48px;
}

.tmap-stop a {
  display: block;
  color: var(--text);
}
.tmap-name {
  display: block;
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.tmap-name::after { content: " Station"; }
.tmap-what {
  display: block;
  font-size: 14px;
  color: var(--muted);
}
.tmap-stop a:hover .tmap-name { color: var(--purple-light); }
.tmap-line.moon .tmap-stop a:hover .tmap-name { color: var(--moon); }

/* Track to the next stop */
.tmap-stop::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: var(--line);
}
.tmap-stop:last-child::before { display: none; }

/* Station dot: white with a ring in the line's colour */
.tmap-stop::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
  border: 4px solid var(--line);
  border-radius: 50%;
  background: white;
  transform: translate(-50%, -50%);
}

/* End of a line: bigger filled dot */
.tmap-stop.terminus::after {
  width: 24px;
  height: 24px;
  border-color: white;
  background: var(--line);
  box-shadow: 0 0 14px color-mix(in srgb, var(--line) 70%, transparent);
}

/* Interchange: a big white ring, and the Moon Line track leaving it.
   Extra room underneath so the next station's dot stays well clear of the ring. */
.tmap-stop.interchange { padding-bottom: 48px; }
.tmap-stop.interchange::before {
  display: block;
  background: var(--moon);
}
.tmap-stop.interchange::after {
  width: 30px;
  height: 30px;
  border: 5px solid var(--night);
  background: white;
  box-shadow: 0 0 0 3px white, 0 0 18px rgba(184, 199, 230, 0.6);
}

@media (min-width: 601px) {
  /* Lynix Line runs across, names above the track */
  .tmap-line.lynix { display: flex; }
  .tmap-line.lynix .tmap-stop {
    flex: 1;
    min-height: 0;
    padding: 0 8px 44px;
    text-align: center;
  }
  .tmap-line.lynix .tmap-stop::before {
    left: 50%;
    top: calc(100% - 20px);
    width: 100%;
    height: 8px;
  }
  .tmap-line.lynix .tmap-stop::after {
    left: 50%;
    top: calc(100% - 16px);
  }
  /* From Nebula the Moon Line drops straight down, with a clear stretch of track
     before Cons so the two stations don't merge into one blob.
     Height = Nebula's dot (16px up) + the gap + Cons' dot (16px down). */
  .tmap-line.lynix .tmap-stop.interchange::before {
    left: calc(50% - 4px);
    top: calc(100% - 16px);
    width: 8px;
    height: calc(32px + var(--tmap-drop));
  }

  /* Moon Line hangs under Nebula (the middle of the last third), names to its left */
  .tmap { --tmap-drop: 64px; }
  .tmap-line.moon {
    width: calc(100% * 5 / 6);
    margin-top: var(--tmap-drop);
  }
  .tmap-line.moon .tmap-stop {
    padding: 4px 48px 24px 0;
    text-align: right;
  }
  .tmap-line.moon .tmap-stop::before { left: calc(100% - 4px); }
  .tmap-line.moon .tmap-stop::after { left: 100%; }
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 32px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 38px; }

  /* Nav drops to its own full-width row under the logo so it never overflows,
     with links spread evenly and tall enough to tap comfortably */
  .site-header {
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 12px;
  }
  .logo { font-size: 16px; }
  .site-nav {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  /* Keep the underline inside the link's padding */
  .site-nav a::after { left: 4px; right: 4px; bottom: -1px; }
  .gallery { columns: 1; }

  .portrait { float: none; display: block; width: 120px; height: 120px; margin: 0 0 20px; }

  .cards .date { width: auto; flex-basis: 100%; }
  .cards .name { min-width: 0; }
  .cards .handle { order: 1; flex-basis: 100%; padding-left: 34px; }

  .keycard { grid-template-columns: 1fr; }

  /* Transfer badge gets its own line under the station name instead of wrapping awkwardly */
  .line-pill.transfer {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 3px 12px 3px 3px;
    white-space: normal;
  }
  .transfer .line-pill-dot { flex: none; width: 20px; height: 20px; }
}