/* SELF-HOSTED FONTS.
   Google Fonts cost two preconnects plus a render-blocking stylesheet on fonts.googleapis.com,
   which then fetched the woff2 from fonts.gstatic.com: four network trips to two third-party
   origins before a heading could paint. The same swap on coppercrest took LCP from 3.15s to 1.38s.

   Archivo keeps all three axes. The design needs them: the wordmark is weight 900 italic at width
   125%% and the display headings sit at 110%%, so dropping ital or wdth would change the design
   rather than just the loading. Archivo is one variable file per subset per style; IBM Plex Mono is
   not variable at these weights, so 400 and 500 are separate files.

   Only latin and latin-ext are shipped. German's umlauts and sharp s are all in latin.

   Licences: Archivo and IBM Plex Mono are both SIL Open Font License, which permits self-hosting.
   font-display:swap preserves the previous behaviour: text paints in the fallback immediately and
   is repainted when the webfont arrives. */
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Nova Peptid — design system, taken from the logo sheet ("Logo 3b · Speed cut").
 *
 * THE MOTIF IS A CUT, NOT A TILT.
 * The logo is a black block sheared 12 degrees with a signal-orange bar cut in beside it, and
 * the "NP" inside is counter-sheared so the letters stay upright. That is the whole system: a
 * hard diagonal edge against square, and text that never leans.
 *
 * So the 12 degrees is spent only on things that are not text: the mark, accent bars, buttons,
 * badges, section markers, the underline that travels on hover. Cards, tables and paragraphs
 * stay square. Skewing a card of German product copy would make it look like a cheap promo
 * banner, and the identity would be doing the opposite of what a research supplier needs, which
 * is to look exact.
 *
 * Tokens, verbatim from the sheet:
 *   Ink    #0E0F12    Signal #FF4D1F    Paper  #F4F3EF
 * plus the sheet's own page ground #E6E5E1 and its label grey #55575E.
 *
 * Type is Archivo variable, because the wordmark needs width 125% and weight 900 in italic and
 * a static cut cannot give that. IBM Plex Mono carries every number, size, SKU and label: this
 * is a catalogue where "10 mg" and "100 mg" must never be misread at a glance, and a monospace
 * figure is the cheapest guard against that.
 *
 * House rule: no em dashes.
 */

:root {
  --ink: #0e0f12;
  --signal: #ff4d1f;
  --paper: #f4f3ef;
  --ground: #e6e5e1;
  --muted: #55575e;

  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 26%, transparent);
  --card: #fbfaf8;

  /* the shear, in one place, so the whole identity can be dialled from here */
  --cut: -12deg;
  --uncut: 12deg;

  --r: 4px;                     /* the sheet's radius: present, but nearly square */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --wrap: 1180px;
  --gap: clamp(16px, 3vw, 28px);
}

/* The inverse of the sheet's second lockup: ink ground, paper text. Used for contrast bands and
   for the whole page when the reader asks for dark. */
:root:not([data-theme='light']) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0e0f12;
    --ground: #15171b;
    --ink: #f4f3ef;
    --muted: #a3a5ad;
    --card: #15171b;
    --line: color-mix(in srgb, var(--ink) 16%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #0e0f12;
  --ground: #15171b;
  --ink: #f4f3ef;
  --muted: #a3a5ad;
  --card: #15171b;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.band { padding-block: clamp(44px, 7vw, 84px); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ground { background: var(--ground); }
.band--tight { padding-block: clamp(28px, 4vw, 44px); }

/* ---------------------------------------------------------------- type */
/* Display type is Archivo at the wordmark's own settings: 900, italic, width 125%, tracked in.
   Upright, never sheared: the cut lives on the bars beside it. */
.d1, .d2, .d3 {
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -0.022em;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}
.d1 { font-size: clamp(38px, 7vw, 76px); }
.d2 { font-size: clamp(28px, 4.2vw, 46px); }
.d3 { font-size: clamp(22px, 2.6vw, 30px); }

/* A heading that is a sentence rather than a shout: still Archivo, still italic, but roman case
   and normal width, because German compound words at 125% width and all caps become unreadable
   ("BAKTERIOSTATISCHES WASSER" is 26 characters before it says anything). */
.h-sentence {
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-transform: none;
  font-style: normal;
  font-size: clamp(22px, 2.6vw, 32px);
  text-wrap: balance;
}

.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 62ch; }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--signal); }

/* Every label, number, size, SKU and price. Mono is not decoration here: it is so that 10 mg and
   100 mg cannot be confused in a list of forty of them. */
.mono, .eyebrow, .spec, .price, .sku { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* the logo's cut, reduced to a marker */
.eyebrow::before {
  content: '';
  width: 10px;
  height: 1em;
  background: var(--signal);
  transform: skewX(var(--cut));
  flex: none;
}
.band--ink .eyebrow { color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* ---------------------------------------------------------------- the mark */
/* The logo, rebuilt in CSS rather than shipped as an image, so it is sharp at any size, follows
   the surrounding colour, and costs no request. Same construction as the sheet: sheared block,
   counter-sheared letters, signal bar cut in beside it. */
.mark { display: inline-flex; align-items: center; gap: 12px; }
.mark__lock { display: flex; gap: 5px; height: 34px; }
.mark__np {
  width: 46px;
  background: var(--ink);
  transform: skewX(var(--cut));
  display: grid;
  place-items: center;
}
.mark__np span {
  transform: skewX(var(--uncut));
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 110%;
  font-size: 19px;
  letter-spacing: -0.05em;
}
.mark__bar { width: 7px; background: var(--signal); transform: skewX(var(--cut)); }
.mark__word {
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -0.02em;
  font-size: 21px;
  line-height: 1;
  white-space: nowrap;
}
.mark__word i { font-weight: 400; font-style: italic; }
.band--ink .mark__np, .site-head--ink .mark__np { background: var(--paper); }
.band--ink .mark__np span, .site-head--ink .mark__np span { color: var(--ink); }

/* ---------------------------------------------------------------- buttons */
/* Sheared container, upright label. The hover state deepens the cut's bar rather than moving the
   button, so a pointer never has to chase it. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  transform: skewX(var(--cut));
  transition: background 0.15s, color 0.15s;
}
.btn > * { transform: skewX(var(--uncut)); }
.btn::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: -9px;
  width: 6px;
  background: var(--signal);
  transition: width 0.15s ease, inset-inline-end 0.15s ease;
}
.btn:hover::after { width: 12px; inset-inline-end: -15px; }
.btn--signal { --btn-bg: var(--signal); --btn-fg: #fff; }
.btn--signal::after { background: var(--ink); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn--wide { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- badges */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  transform: skewX(var(--cut));
}
.tag > span { display: inline-block; transform: skewX(var(--uncut)); }
.tag--signal { background: var(--signal); color: #fff; }
.tag--ruo { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head__row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  min-height: 68px;
}
/* Nine top-level items plus the logo and the cart do not fit on one line at 1180px, and a
   wrapped nav pushes the header to two rows and shunts the page down. The items never wrap; below
   the point where they stop fitting the row scrolls sideways instead, which is what a phone does
   with a tab bar and what a reader already understands. */
.site-nav { display: flex; gap: clamp(9px, 1.4vw, 18px); margin-inline-start: auto;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; font-size: 14.5px; }
.site-nav a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  padding-block: 6px;
}
/* the cut, as a travelling underline */
.site-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--signal);
  transform: skewX(var(--cut)) scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: skewX(var(--cut)) scaleX(1); }
.site-head__acts { display: flex; align-items: center; gap: 10px; }
@media (max-width: 860px) {
  .site-nav { display: none; }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; background: var(--ground); }
/* One sheared plane of signal, bled off the edge. The logo's bar at page scale. */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  inset-inline-end: -12%;
  width: 42%;
  height: 140%;
  background: var(--signal);
  transform: skewX(var(--cut));
  opacity: 0.1;
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}
.hero__facts b { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- cards */
/* Square. The cut appears on the card only as a bar that grows on hover, so a grid of forty
   products reads as a catalogue and not as a stack of leaning tiles. */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--line-strong); }
.card::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 8px;
  height: 0;
  background: var(--signal);
  transform: skewX(var(--cut));
  transform-origin: top;
  transition: height 0.2s ease;
}
.card:hover::after { height: 100%; }
.card__img {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  display: grid;
  place-items: center;
  padding: 8%;
}
.card__img img { mix-blend-mode: normal; }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__name { font-weight: 700; font-size: 16.5px; line-height: 1.25; letter-spacing: -0.01em; }
.card__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.price { font-weight: 500; font-size: 18px; }
.price--request { font-size: 13px; color: var(--muted); }
.price s { color: var(--muted); font-size: 13px; margin-inline-end: 6px; }

/* ---------------------------------------------------------------- tables */
/* The specification table on a product page. Mono on the value side, so a column of doses lines
   up digit for digit. */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: start; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 42%; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.spec-table td { font-family: var(--mono); font-size: 14px; }

/* ---------------------------------------------------------------- pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.pill:hover { border-color: var(--ink); }
.pill[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------------------------------------------------------------- the size chooser */
/* A compound in four strengths. The chosen one takes the ink block and the cut, so the choice is
   legible at a glance from across the page. */
.sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.sizes input { position: absolute; opacity: 0; pointer-events: none; }
.sizes label {
  display: grid;
  gap: 2px;
  min-width: 96px;
  padding: 11px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.sizes label b { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.sizes label span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sizes label:hover { border-color: var(--ink); }
.sizes input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sizes input:checked + label span { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.sizes input:focus-visible + label { outline: 3px solid var(--signal); outline-offset: 3px; }

/* ---------------------------------------------------------------- notes */
.note {
  border-inline-start: 4px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 6%, transparent);
  padding: 14px 18px;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 15px;
}
.note--plain { border-inline-start-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 4%, transparent); }
/* A legal page whose details are not filled in yet. The value is marked field by field rather than
   the whole section being deleted, so a reader can see which details are outstanding instead of a
   page that simply says nothing. Mono, because it reads as a field name awaiting a value rather
   than as prose. */
.pending {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  padding: 1px 7px;
  white-space: nowrap;
}
.note__title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* ---------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '';
  flex: none;
  width: 9px;
  height: 20px;
  margin-top: 2px;
  background: var(--line-strong);
  transform: skewX(var(--cut));
  transition: background 0.15s;
}
.faq details[open] summary::before, .faq summary:hover::before { background: var(--signal); }
.faq__a { padding-bottom: 20px; max-width: 72ch; color: var(--muted); }
.faq__a > * + * { margin-top: 0.8em; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--ink); color: var(--paper); padding-block: clamp(40px, 6vw, 64px) 28px; }
.site-foot a { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.site-foot a:hover { color: var(--signal); }
.site-foot__cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-foot h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom: 12px; font-weight: 500; }
.site-foot li { list-style: none; margin-bottom: 7px; font-size: 14.5px; }
.site-foot__legal {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-size: 13px;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

/* ---------------------------------------------------------------- misc */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  background: var(--signal);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { inset-inline-start: 8px; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a:hover { color: var(--signal); }
.crumbs span[aria-hidden] { opacity: 0.5; }
.rule { height: 1px; background: var(--line); border: 0; }
/* a section marker: the logo's two shapes, at rule scale */
.cut-rule { display: flex; gap: 5px; height: 12px; margin-bottom: 18px; }
.cut-rule i { width: 34px; background: var(--ink); transform: skewX(var(--cut)); }
.cut-rule i + i { width: 9px; background: var(--signal); }