/* Elexius — plimsoll.apps.elexius.com
 *
 * The palette and the type rules are not invented for the web. They are
 * PonqTheme.h, which is the plugin's own visual vocabulary, so the site and the
 * thing it sells are set in one language: near-black ground, cream ink, one
 * oxide red, uppercase mono at small sizes with wide tracking, hairline boxes
 * that outline rather than fill, and nothing rounded anywhere.
 *
 * There is no light mode, for the same reason the plugin has none by default:
 * every picture on this site is a screenshot of a dark panel, and a white page
 * around them would be a frame nobody asked for.
 *
 * Two rules carried over from the panel and worth naming because they are easy
 * to undo:
 *   - a control is DRAWN, not filled. Off is an outline in --edge, hover lifts
 *     the outline to --line, and pressed/current inverts to a solid ink fill.
 *     Nothing "lights up".
 *   - tracking IS the identity. Uppercase mono set tight reads like a terminal;
 *     set wide it reads like a front panel. The wide setting is the one we want.
 */

:root {
  --page:   #07060B;
  --tile:   #121316;
  --raised: #16191E;
  --hair:   #1E2126;
  --edge:   #2B2E35;
  --line:   #54585D;
  --ink:    #E4E1D9;
  --dim:    #6A6E74;
  --body:   #9B9890;   /* between ink and dim: long copy at full cream glares */
  --accent: #CE6047;   /* the mark's red, lifted to 4.8:1 so a hairline is findable */
  --brand:  #A03E29;   /* the sea under the load line */

  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* the words in Instrument Sans, the front-panel labels and the numbers in Azeret Mono (Leon,
     2026-10-18: "mach die schrift ueberall ... ausser bei plugin sachen") - both served from here */
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(20px, 5vw, 64px);
  --max: 1240px;
}

@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Variable.ttf") format("truetype"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("fonts/AzeretMono-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }

html {
  background: var(--page);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--page); }

:focus-visible { outline: 1px solid var(--line); outline-offset: 3px; }

/* ── the small type ──────────────────────────────────────────────────────
   9.5-10.5px at 0.16-0.22em in the plugin. On a screen at arm's length that
   is a point too small, so the sizes move up and the tracking does not:
   tracking is what makes it read as a front panel. */
.lab {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.6;
}
.lab--ink { color: var(--ink); }
.lab--accent { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }

/* ── nav ─────────────────────────────────────────────────────────────────
   Sticky, because the page is long and the way back out of it should not be
   a scroll to the top. */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 0 var(--gut);
  height: 56px;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.nav__home {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}
.nav__mark { width: 26px; height: 19px; flex: none; }
.nav__mark line, .nav__mark circle { stroke: var(--ink); }
.nav__word {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__links::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
  .nav__links {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
}
.nav__links a {
  text-decoration: none;
  white-space: nowrap;
  transition: color .1s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); }

/* ── layout ──────────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 860px; }

section { position: relative; }

/* The page rhythm: a lot of air, and the air is the ground itself rather than
   a band of a different shade. */
.band { padding: clamp(90px, 15vh, 190px) 0; }
.band--tight { padding: clamp(56px, 8vh, 96px) 0; }
.band + .band { border-top: 1px solid var(--hair); }

.center { text-align: center; }

/* ── headings ────────────────────────────────────────────────────────────
   Lowercase, and German, which is the shop's own language. They are set as
   statements with a full stop, not as labels. */
h1, h2, h3 { font-weight: 400; margin: 0; }

/* Sizes are set for MONO, which is roughly a third wider per character than the
   sans these proportions were sketched against. A headline that looks right in
   Helvetica at 100px is a headline that runs off the page here at 70. */
.hed {
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
.hed--big {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  letter-spacing: -.04em;
}
.hed--sm {
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  letter-spacing: -.025em;
}

.eyebrow { margin: 0 0 clamp(20px, 4vh, 34px); }
.hed + .lede { margin-top: clamp(22px, 4vh, 38px); }

.lede {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--body);
  max-width: 60ch;
}
.center .lede { margin-inline: auto; }
.lede + .lede { margin-top: 1.4em; }
.lede b, .lede strong { color: var(--ink); font-weight: 500; }
/* Emphasis lifts to full ink and stays upright. Azeret Mono has no italic, so an
   <em> here would be a synthesised oblique — a slanted mono is a smear, not a
   voice, and brightness is the axis this palette already uses for weight. */
em { font-style: normal; color: var(--ink); }

/* ── figures ─────────────────────────────────────────────────────────────
   Every picture here is the real editor, rendered headless by the plugin's own
   snapshot target, or a plot drawn from the model it depicts. Nothing is a
   mockup, which is why they are allowed to be this large. */
figure { margin: 0; }
.fig { margin-top: clamp(44px, 8vh, 88px); }
.fig__frame {
  border: 1px solid var(--edge);
  background: var(--tile);
  overflow: hidden;
}
.fig__frame img, .fig__frame svg { width: 100%; }

/* The shut window is a PORTRAIT panel, 300 px wide as it opens. Stretched to the
   width of a 1200 px column it is two thousand pixels tall and reads as a poster
   of a plugin rather than as a plugin, so it stands near its own size in a field
   of ground. The open window is landscape and does fill the column.
   400 px, not 300: the sources are 2x renders, so this is still downscaling in
   device pixels and stays sharp. */
.fig--panel .fig__frame {
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 76px);
  background: var(--page);
}
.fig--panel img { width: min(400px, 100%); }
figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 13px;
}
figcaption span:last-child { text-align: right; }

/* A picture that has to stay wide: the open window is 1020 px of panel and
   shrinking it past a point makes its own 10 px type unreadable, so below that
   it scrolls sideways inside its frame rather than becoming a grey smear. */
.fig--wide .fig__frame { overflow-x: auto; }
.fig--wide img { min-width: 720px; }

/* ── pull quote: the plugin's own admission, in the plugin's own words ── */
.say {
  margin: clamp(56px, 9vh, 110px) auto 0;
  max-width: 30ch;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: center;
}
.say__rule {
  width: 1px;
  height: 46px;
  background: var(--edge);
  margin: 0 auto clamp(26px, 4vh, 40px);
}

/* ── the grid of three ──────────────────────────────────────────────── */
.cols {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  margin-top: clamp(44px, 7vh, 76px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .cols--2 { grid-template-columns: repeat(2, 1fr); } }
/* Left-aligned whatever they sit in. Several of these grids live inside a
   `.center` band, and a centred paragraph of body copy in a 300 px column is a
   ragged block on both edges with nothing to read down. */
.cols > * {
  background: var(--page);
  padding: clamp(24px, 3.4vw, 38px);
  text-align: left;
}
.cell__title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}
.cell__from {
  display: block;
  margin-bottom: 18px;
}
.cell p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--body);
}
.cell p + p { margin-top: 1.2em; }

/* ── the spec list, one per line, the way a front panel legend reads ── */
.list {
  margin: clamp(40px, 7vh, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.list li {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 2.5;
}
.list li[data-soon] { color: var(--dim); }
.list li[data-soon]::after {
  content: " · " attr(data-soon);
  color: var(--brand);
  letter-spacing: .19em;
}

/* ── tables: this is the part of the product that is actually the pitch ── */
.tbl-scroll { overflow-x: auto; margin-top: clamp(40px, 6vh, 68px); }
table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 12.5px;
}
/* Nine columns of percentages do not fit in 560. Set the floor per table rather
   than raising it for all of them, or the four-row CPU table scrolls for nothing. */
table[data-cols="9"] { min-width: 860px; }
caption {
  text-align: left;
  padding-bottom: 16px;
}
th, td {
  text-align: left;
  padding: 12px 20px 12px 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: baseline;
  white-space: nowrap;
}
th {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom-color: var(--edge);
}
td { color: var(--body); font-variant-numeric: tabular-nums; }
td:first-child { color: var(--ink); }
tr[data-hi] td { color: var(--ink); }
tr:last-child td { border-bottom: 0; }
/* Numeric columns are right-aligned, so their gutter has to sit on the LEFT.
   Padding them on the right instead butts one column's digits against the next
   as soon as the table is near its min-width, which is exactly where a reader on
   a phone meets it. */
td[data-n], th[data-n] { text-align: right; padding-right: 0; padding-left: 22px; }

/* Definition rows, for the things that are one line each. */
.defs { margin: clamp(36px, 6vh, 64px) 0 0; text-align: left; }
.def {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair);
}
@media (min-width: 620px) { .def { grid-template-columns: 200px 1fr; } }
.def:first-child { border-top: 1px solid var(--hair); }
.def dd { margin: 0; color: var(--body); font-size: 13.5px; }
.def dd b { color: var(--ink); font-weight: 500; }

/* ── drawn controls ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 26px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .1s, border-color .1s, background .1s;
}
.btn:hover { color: var(--ink); border-color: var(--line); }
/* Pressed inverts to a solid fill rather than lighting up. */
.btn--on { background: var(--ink); border-color: var(--ink); color: var(--page); }
.btn--on:hover { background: var(--ink); border-color: var(--ink); color: var(--page); }
.btn[aria-disabled="true"] {
  cursor: default;
  opacity: .45;
}
.btn[aria-disabled="true"]:hover { color: var(--dim); border-color: var(--edge); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(30px, 5vh, 46px); }
.center .btns { justify-content: center; }

/* ── status block ────────────────────────────────────────────────────── */
.status {
  border: 1px solid var(--edge);
  padding: clamp(26px, 4vw, 44px);
  margin-top: clamp(40px, 6vh, 68px);
  display: grid;
  gap: 22px;
  text-align: left;
}
@media (min-width: 780px) { .status { grid-template-columns: 1fr auto; align-items: center; } }
.status p:not(.lab) { margin: 10px 0 0; font-size: 13.5px; color: var(--body); max-width: 56ch; }
.status .btns { margin: 0; }

/* ── the product cards on the home page ──────────────────────────────── */
.card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--edge);
  background: var(--page);
  transition: border-color .12s;
}
a.card:hover { border-color: var(--line); }
.card__img {
  background: var(--tile);
  border-bottom: 1px solid var(--edge);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: clamp(18px, 3vw, 34px);
}
/* contain, not cover: one of these two windows is portrait and the other is
   landscape, and cropping a plugin's panel to fill a tile cuts off the controls
   that are the reason for showing it. */
.card__img img, .card__img svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card__body { padding: clamp(20px, 3vw, 30px); }
.card__name {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 4px;
}
/* :not(.lab) — an element+class rule outranks a plain class one, so a blanket
   `.card__body p` would quietly override the colour of any .lab line inside the
   card. It did, and the accent status line came out body grey. */
.card__body > p:not(.lab) { margin: 14px 0 0; font-size: 13.5px; color: var(--body); }
.cards {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  margin-top: clamp(44px, 7vh, 76px);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .cards { grid-template-columns: 1fr 1fr; } }

/* ── the hero mark ───────────────────────────────────────────────────── */
.mark-hero { width: min(360px, 62vw); margin: 0 auto clamp(30px, 5vh, 52px); }
.mark-hero line, .mark-hero circle { stroke: var(--ink); }
.mark-hero rect { fill: none; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--hair);
  padding: clamp(44px, 7vh, 72px) 0 clamp(40px, 6vh, 60px);
}
.foot {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .foot { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h3 { margin: 0 0 12px; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { line-height: 2.1; }
.foot a { text-decoration: none; transition: color .1s; }
.foot a:hover { color: var(--ink); }
.foot__note { margin: clamp(34px, 5vh, 54px) 0 0; }

/* ── in-page anchors clear the sticky bar ────────────────────────────── */
[id] { scroll-margin-top: 76px; }

/* the panel's own voice stays mono: labels, the nav word, cell titles, lists, tables, controls, numbers */
.lab, .nav__word, .cell__title, .list li, th, td, .btn, .num { font-family: var(--mono); }