/* Pipesmith site. The colours are the Aurora design: a deep blue ground with blue, turquoise
   and violet. Token names follow the shared scheme
   of the product family. The ribbon, bit and aurora tokens are decoration only.
   tools/check_site.py measures the contrast of the text colours. The dark --primary is one
   step lighter than the Aurora primary (#3D7BFF), which stands only 4.37 to 1 on --surface-2. */

:root {
  --bg: #F5F7FC;
  --bg-alt: #EBEFF8;
  --surface: #FFFFFF;
  --surface-2: #EEF2FA;
  --text: #0A1020;
  --text-muted: #46526E;
  --border: rgba(10, 16, 40, 0.14);
  --primary: #1D4FE0;
  --accent: #086F87;
  --link: #1D4FE0;
  --on-primary: #FFFFFF;
  --ribbon-1: #2B62F0;
  --ribbon-2: #7A52F0;
  --ribbon-3: #12B5D6;
  --bit: #1D4FE0;
  --aurora-1: #7FA8FF;
  --aurora-2: #7FE9F5;
  --aurora-3: #B9A2FF;
  --lift: 0 1px 2px rgba(10, 16, 40, 0.05), 0 14px 34px rgba(10, 16, 40, 0.07);
  color-scheme: light;
}

/* The dark theme: picked, or the page as it starts and as it is without JavaScript. */
:root:not([data-theme]), :root[data-theme="dark"] {
  --bg: #05070D;
  --bg-alt: #080C16;
  --surface: #0D1322;
  --surface-2: #151D31;
  --text: #F2F6FF;
  --text-muted: #A6B3CF;
  --border: rgba(150, 180, 255, 0.16);
  --primary: #4D8DFF;
  --accent: #22E6FF;
  --link: #8DB8FF;
  --on-primary: #03060C;
  --ribbon-1: #3D7BFF;
  --ribbon-2: #8A5CFF;
  --ribbon-3: #22E6FF;
  --bit: #9FD4FF;
  --aurora-1: #2B6BFF;
  --aurora-2: #22E6FF;
  --aurora-3: #8A5CFF;
  --lift: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.8rem, 7vw, 4.7rem); font-weight: 760; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); font-weight: 720; letter-spacing: -0.03em; }
h3 { font-size: 1.3rem; font-weight: 680; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 4px; text-decoration-thickness: 1px; }
ul { margin: 0; padding-left: 1.1em; }
li + li { margin-top: 0.3em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: 8px;
}
.skip:focus { top: 12px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  padding: 11px max(20px, calc((100vw - 1040px) / 2));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em;
}
.brand img { display: block; }
.top nav { display: flex; gap: 24px; margin-left: auto; }
.top nav a { color: var(--text-muted); text-decoration: none; font-weight: 520; font-size: 0.93rem; }
.top nav a:hover { color: var(--text); }
.toggle, .chooser button {
  font: inherit; font-size: 0.88rem; font-weight: 580; cursor: pointer;
  color: var(--text); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; min-height: 34px;
  transition: border-color 0.15s ease;
}
.toggle:hover, .chooser button:hover { border-color: var(--ribbon-1); }

main { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
section { padding: 88px 0 8px; }

/* Hero */
.hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px; align-items: center; padding-top: 76px;
}
/* A faint field of dots behind the hero, fading out towards the edges. */
.hero::before {
  content: ""; position: absolute; inset: -30px 0; z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 74% 46%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 78% at 74% 46%, #000 0%, transparent 78%);
}
/* A still aurora behind the hero: three soft lights that fade out inside the box. */
.hero::after {
  content: ""; position: absolute; inset: -60px 0 -40px; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 52% at 72% 36%, color-mix(in srgb, var(--aurora-2) 20%, transparent), transparent 74%),
    radial-gradient(ellipse 40% 46% at 62% 62%, color-mix(in srgb, var(--aurora-3) 22%, transparent), transparent 74%),
    radial-gradient(ellipse 40% 46% at 30% 30%, color-mix(in srgb, var(--aurora-1) 16%, transparent), transparent 74%);
}
.state {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.86rem; font-weight: 560; color: var(--text-muted); letter-spacing: 0.01em;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; margin-bottom: 26px;
}
.dot { width: 7px; height: 7px; border-radius: 1px; background: var(--accent); }
.lead { font-size: 1.17rem; line-height: 1.62; color: var(--text-muted); max-width: 34em; margin-top: 24px; }
.state + .lead { margin-top: 0; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.button {
  display: inline-block; background: var(--primary); color: var(--on-primary); text-decoration: none;
  font-weight: 620; font-size: 0.98rem; padding: 11px 22px; border-radius: 999px;
  transition: filter 0.15s ease;
}
.button:hover { filter: brightness(1.1); }
.plain { font-weight: 560; font-size: 0.98rem; }
.hero-text { grid-column: 1; grid-row: 1; }

/* The logo: the symbol with the word as text below it. The word is sized in shares of the
   symbol, so both scale together. The letter sits 4.07 % of the image width right of
   the image centre (letter.centre_x in brand/logo/logo.json), so the image moves left by that
   much and the word is centred on the letter. */
.lockup { grid-column: 2; grid-row: 1; container-type: inline-size; width: 100%; max-width: 400px; margin: 0 auto; }
.lockup img {
  display: block; width: 100%; height: auto; transform: translateX(-4.07%);
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.26));
}
/* The last letter carries its letter spacing too, which puts the ink half of it off the centre
   of the box. The padding takes that back. */
.lockup h1 { font-size: 21.5cqw; text-align: center; margin-top: -4cqw; padding-right: 0.04em; }

.intro { color: var(--text-muted); max-width: 38em; margin-top: 14px; font-size: 1.06rem; }

/* The pipeline: a thin rail down the left. Bits travel along it in both directions.
   The rail is a grid item that runs from the middle of the first station to the middle of the
   last one. For that each station spans two rows. The grid gives the two rows of a card the
   same height, so the line between them, with half a row gap on each side, is its middle. */
.run { margin-top: 44px; }

.stations {
  list-style: none; margin: 0; padding: 0 0 0 56px;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 22px;
}
.stations > li { margin: 0; position: relative; }
.stations > li > * + * { margin-top: 10px; }

.stations > .pipe {
  grid-column: 1; grid-row: 2 / 7; justify-self: start;
  width: 14px; margin: -11px 0 -11px -47px; overflow: hidden;
  background: linear-gradient(color-mix(in srgb, var(--ribbon-1) 60%, transparent), color-mix(in srgb, var(--ribbon-2) 60%, transparent), color-mix(in srgb, var(--ribbon-3) 60%, transparent)) center / 2px 100% no-repeat;
}
.pipe i { position: absolute; display: block; margin: 0; }
.pipe .down {
  left: 5px; width: 4px; top: -36px; bottom: 0;
  background: repeating-linear-gradient(to bottom, var(--bit) 0 4px, transparent 4px 36px);
  animation: bits-down 2s linear infinite;
}
.pipe .up {
  left: 6px; width: 2px; top: 0; bottom: -58px;
  background: repeating-linear-gradient(to bottom, var(--ribbon-3) 0 2px, transparent 2px 58px);
  animation: bits-up 3.4s linear infinite;
}
@keyframes bits-down { to { transform: translateY(36px); } }
@keyframes bits-up { to { transform: translateY(-58px); } }
@media (prefers-reduced-motion: reduce) {
  .pipe i { animation: none; }
  html { scroll-behavior: auto; }
}

.station, .suite-head { grid-column: 1; }
.source { grid-row: 1 / 3; }
.suite-head { grid-row: 3; padding: 6px 24px 0; }
.ci { grid-row: 4 / 6; }
.registry { grid-row: 6 / 8; }

.station {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px 22px; box-shadow: var(--lift);
}
/* The node where a station sits on the rail, in the vertical middle of its card. Its left
   offset counts from inside the 1px border of the card, so it is one pixel less than the rail's. */
.station::before {
  content: ""; position: absolute; left: -48px; top: calc(50% - 7px); width: 14px; height: 14px;
  border: 2px solid var(--ribbon-1); border-radius: 50%; background: var(--bg); z-index: 1;
}

/* The small picture of a station: at the right of its card, in the vertical middle. The card
   keeps a column free for it. */
.icon { position: absolute; right: 18px; top: 50%; width: 72px; height: 72px; transform: translateY(-50%); }
.station, .suite-head { display: flow-root; padding-right: 110px; }

.kicker {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.descriptor { font-weight: 580; }
.station ul { color: var(--text-muted); }

.badge {
  display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 999px; padding: 2px 11px; margin-top: 16px;
  border: 1px solid var(--border); color: var(--text-muted); background: transparent;
}
.badge.building { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }

/* The suite is the frame around the two product stations and their stretch of the rail. */
.stations > .suite-frame {
  grid-column: 1; grid-row: 3 / 8; pointer-events: none;
  margin: -10px -14px -16px -56px;
  border: 1px dashed color-mix(in srgb, var(--text-muted) 55%, var(--border));
  border-radius: 20px;
}

/* The registry is where the line ends: a filled node and an edge in the last ribbon colour. */
.registry {
  border-color: color-mix(in srgb, var(--ribbon-3) 60%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ribbon-3) 8%, var(--surface)), var(--surface) 60%);
}
.registry::before { background: var(--ribbon-3); border-color: var(--ribbon-3); border-radius: 4px; }

.more a { font-weight: 560; font-size: 0.95rem; }

/* The sections of the products: a few points, then pictures. */
.points { margin-top: 18px; max-width: 44em; color: var(--text-muted); }
.note { margin-top: 22px; max-width: 44em; font-size: 0.92rem; color: var(--text-muted); }

/* A figure holds a light and a dark file and shows the one of the theme. The other one is not
   displayed, so a lazy picture of it is never requested. A click opens the picture in full size. */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: 28px; }
.shot { margin: 0; }
.shot.wide { grid-column: 1 / -1; }
.frame {
  display: block; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--lift);
  transition: border-color 0.15s ease;
}
.frame:hover { border-color: var(--ribbon-1); }
.frame img { display: block; width: 100%; height: auto; }
.on-dark { display: none; }
:root:not([data-theme]) .on-light, :root[data-theme="dark"] .on-light { display: none; }
:root:not([data-theme]) .on-dark, :root[data-theme="dark"] .on-dark { display: block; }
figcaption { margin-top: 12px; font-size: 0.93rem; color: var(--text-muted); }
.shot-title { font-weight: 640; color: var(--text); margin-right: 8px; }
.shot-text { display: block; margin-top: 3px; }
/* A picture is small on a narrow screen. The line below its caption says that it opens. */
.shot-open { display: block; margin-top: 5px; font-size: 0.88rem; font-weight: 560; }
.tag {
  display: inline-block; white-space: nowrap; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px;
}

/* Gallery: the dialog that a click on a picture opens, made by gallery.js. */
.frame { cursor: zoom-in; }
html.gallery-open { overflow: hidden; scrollbar-gutter: stable; }
.gallery {
  box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; color: var(--text);
  background: var(--bg); background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  grid-template-columns: 44px minmax(0, 1240px) 44px; grid-template-areas: "prev panel next";
  gap: 16px; justify-content: center; align-content: center; align-items: center;
}
.gallery[open] { display: grid; }
.gallery::backdrop { background: transparent; }
.gallery-panel {
  grid-area: panel; display: flex; flex-direction: column; min-width: 0; overflow: auto;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--lift);
}
.gallery[open] .gallery-panel { animation: gallery-in 0.2s ease; }
@keyframes gallery-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.gallery-bar { display: flex; flex: none; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--border); }
.gallery-count { margin-right: auto; font-size: 0.88rem; font-weight: 560; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gallery-file { font-size: 0.88rem; font-weight: 560; }
.gallery-stage { flex: none; background: var(--bg-alt); }
.gallery-img {
  display: block; width: 100%; height: auto; object-fit: contain;
  max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px);
  opacity: 0; transition: opacity 0.18s ease;
}
.gallery-img.is-ready { opacity: 1; }
.gallery-caption { flex: none; margin: 0; padding: 12px 18px 16px; font-size: 0.93rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.gallery-step, .gallery-close {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color 0.15s ease;
}
.gallery-step:hover, .gallery-close:hover { border-color: var(--ribbon-1); }
.gallery-step:focus-visible, .gallery-close:focus-visible { border-radius: 50%; }
.gallery-prev { grid-area: prev; }
.gallery-next { grid-area: next; }
.gallery-step::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.gallery-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.gallery-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.gallery-close { border-color: transparent; background: transparent; }
.gallery-close::before, .gallery-close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor;
}
.gallery-close::before { transform: rotate(45deg); }
.gallery-close::after { transform: rotate(-45deg); }
/* A narrow window: the two step buttons sit in a row at the lower edge, where they stay
   from picture to picture, and the panel is centred in the room above them. */
@media (max-width: 720px) {
  .gallery {
    padding: 12px; gap: 12px; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "panel panel" "prev next"; align-content: stretch;
  }
  .gallery-panel { align-self: center; max-height: 100%; }
  .gallery-img { max-height: calc(100vh - 270px); max-height: calc(100dvh - 270px); }
  .gallery-prev { justify-self: end; }
  .gallery-next { justify-self: start; }
}
/* A short window, as a phone held sideways: the caption gives its room to the picture. */
@media (max-height: 520px) {
  .gallery-caption { display: none; }
  .gallery-img { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
}
@media (max-height: 520px) and (max-width: 720px) {
  .gallery-img { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery[open] .gallery-panel { animation: none; }
  .gallery-img { transition: none; }
}

/* Download */
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 28px 0 0; max-width: 46em; }
.facts dt { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Status */
.table-wrap {
  margin-top: 30px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--lift);
}
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; vertical-align: top; padding: 15px 22px; border-bottom: 1px solid var(--border); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
tbody th { font-weight: 640; white-space: nowrap; }
tbody td { color: var(--text-muted); }

/* Footer */
.foot {
  max-width: 1040px; margin: 104px auto 0; padding: 28px 20px 96px;
  border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.9rem;
}
.foot p + p { margin-top: 6px; }

/* First visit: pick a theme. */
.chooser {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 25;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 9px 7px 18px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  font-size: 0.9rem; font-weight: 560; white-space: nowrap;
}
.chooser[hidden] { display: none; }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 44px; }
  .hero-text, .lockup { grid-column: 1; grid-row: auto; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .lockup { max-width: 280px; }
  section { padding-top: 64px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { gap: 12px; padding: 10px 16px; }
  .top nav { gap: 14px; }
  .top nav a { font-size: 0.88rem; }
  .brand span { display: none; }
  main { padding: 0 16px; }
  .stations { padding-left: 34px; }
  .stations > .pipe { margin-left: -31px; }
  .station { padding: 18px 18px 20px; }
  .station::before { left: -32px; }
  .suite-head { padding: 6px 18px 0; }
  /* A narrow card has no room for a column: the picture floats at the top right. */
  .icon { position: static; float: right; transform: none; width: 56px; height: 56px; margin: -4px -4px 4px 12px; }
  .stations > .suite-frame { margin: -10px -8px -14px -40px; border-radius: 18px; }

  /* The status table as blocks: each product with its two entries below it, no sideways scroll. */
  .table-wrap { overflow-x: visible; }
  table { min-width: 0; display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  tbody { display: block; }
  tbody tr { display: block; padding: 16px 18px 18px; border-bottom: 1px solid var(--border); }
  tbody tr:last-child { border-bottom: 0; }
  tbody th, tbody td { display: block; padding: 0; border: 0; white-space: normal; }
  tbody td { margin-top: 10px; }
  tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  }
  tbody td { color: var(--text); }
}