/* vhrd.tech site layer, on top of the brand's tokens.css and vhrd.css (both pulled from vhrd_brand by `just brand`,
   never edited here). Colours only through tokens. The look: a faint drawing grid, a framed column with crosshair
   marks where the section rules meet it, mono caps labels, FIG. captions with the datasheet's corner marks, and PCB
   traces in the signal colours between sections. */

:root {
  --grid: 24px;
  --grid-line: color-mix(in oklch, var(--text) 4%, transparent);
  --frame-line: var(--line);
  --mark: color-mix(in oklch, var(--text) 35%, transparent);
  --header-h: 3.5rem;
  /* Arrows drawn as masks, not characters: an arrow glyph would pull in a whole extra font subset per face. */
  --arrow-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 4.25h11.2L7.9 1 9 0l5 5-5 5-1.1-1 3.3-3.25H0z'/%3E%3C/svg%3E");
  --arrow-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 0h8v8H8.5V2.6L1 10 0 9l7.4-7.5H2z'/%3E%3C/svg%3E");
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* The toggle's choice also steers light-dark(), which the code highlighting uses. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.giallo-l { display: inline-block; min-height: 1lh; width: 100%; }

/* The drawing grid: a fine line every --grid, fixed to the page so sections slide over it. */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  background-position: center top;
  overflow-x: clip;
}

img, svg { max-width: 100%; }
img { height: auto; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}
.skip:focus { top: 0.5rem; }

/* The column: hairline sides like the brand's .v-page, on the page background so the grid stays behind. */
.frame {
  max-width: var(--page);
  margin-inline: auto;
  border-inline: 1px solid var(--frame-line);
  position: relative;
}
main.frame { background: color-mix(in oklch, var(--bg) 70%, transparent); }

/* Sections: hairline on top, a crosshair where it meets each side of the frame. */
.section {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
  border-top: 1px solid var(--line);
}
.section::before, .section::after, .bus::before, .bus::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--mark), var(--mark)) center / 1px 100% no-repeat,
    linear-gradient(var(--mark), var(--mark)) center / 100% 1px no-repeat;
  pointer-events: none;
}
.section::before, .bus::before { left: -6px; }
.section::after, .bus::after { right: -6px; }
main > .section:first-child { border-top: 0; }
main > .section:first-child::before, main > .section:first-child::after { display: none; }

/* Labels: "01 · PRODUCTS" with the number boxed. */
.sec-label { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1rem; }
.sec-no {
  display: inline-block;
  padding: 0.15em 0.4em;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--text);
}

/* Header: sticky, hairline below, the frame continues through it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.wordmark { height: 1rem; width: auto; display: block; }
.wordmark .wm-word { fill: var(--accent); }
.wordmark .wm-dot { fill: var(--muted); }
.nav ul, .menu-panel ul, .footer-col ul { list-style: none; margin: 0; padding: 0; }
.nav ul { display: flex; gap: 1.5rem; }
.nav a, .menu-panel a {
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.5rem;
}
.nav a:hover, .menu-panel a:hover, .nav a[aria-current="page"], .menu-panel a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--accent); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.theme-toggle, .menu summary {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.theme-toggle:hover, .menu summary:hover { color: var(--text); border-color: var(--accent); }
.notify-btn { white-space: nowrap; }

/* Small screens: the links fold into a menu (a <details>, no script). */
.menu { position: relative; display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -5px; }
.menu-bars::after { top: 5px; }
.menu[open] .menu-bars { background: transparent; }
.menu[open] .menu-bars::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu-bars::after { top: 0; transform: rotate(-45deg); }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 12rem;
  padding: 0.5rem 1rem;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.menu-panel a { display: block; padding-block: 0.75rem; }

@media (max-width: 52rem) {
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 26rem) {
  .header-row { gap: 0.75rem; }
  .notify-btn { padding-inline: 0.65rem; }
  .wordmark { height: 0.8rem; }
}

/* Hero: text left, FIG. 1 right; stacked on a phone. */
.hero { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
/* The headline in the text colour; red only on the one word that carries it, as an accent. */
.hero h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); color: var(--text); }
.hero h1 .hl { color: var(--accent); }
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
@media (max-width: 52rem) { .hero { grid-template-columns: minmax(0, 1fr); } }

.draft-note { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); }

/* Figures: corner marks in the brand red like the datasheet frame, the caption in mono caps. */
.fig { margin: 0; }
.fig-frame {
  position: relative;
  padding: 0.75rem;
  --c: 14px;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / var(--c) 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1px var(--c) no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / var(--c) 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 1px var(--c) no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / var(--c) 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 1px var(--c) no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / var(--c) 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1px var(--c) no-repeat;
}
.fig-frame img { display: block; width: 100%; }
.fig-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-strong);
  background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--line) 9px 10px);
  color: var(--muted);
  font: 500 0.75rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.fig-placeholder span { background: var(--bg); padding: 0.25em 0.5em; }
.fig figcaption {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.6rem;
  font: 500 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fig-no { padding: 0.15em 0.45em; border: 1px solid var(--line-strong); color: var(--text); white-space: nowrap; }

/* Cards in a ruled grid; each card's top edge is wired in its signal colour. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2rem;
}
.card { background: var(--bg); display: flex; flex-direction: column; box-shadow: inset 0 2px 0 var(--sig); }
.card .fig { padding: 1rem 1rem 0; }
.card .fig-placeholder { aspect-ratio: 16 / 10; }
.card-body { padding: 1rem 1.25rem 1.25rem; }
.card h3 { font-size: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.card h3 a { text-decoration: none; }
.card h3 a::after { background-color: var(--sig); }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--sig); }

/* Spec list: mono, hairline rows, the key muted. */
.specs { margin: 0.75rem 0 0; font: 400 0.8125rem/1.4 var(--font-mono); }
.specs > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.specs dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; padding-top: 0.15em; }
.specs dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

/* Code panel with tabs. Without the script every panel shows under its own title. */
.code-tabs { margin-top: 2rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--raised); }
.code-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--line);
  min-height: 2.75rem;
}
.tablist { display: flex; gap: 0.25rem; }
.tablist [role="tab"] {
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.9rem 0.6rem;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}
.tablist [role="tab"]:hover { color: var(--text); }
.tablist [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tabpanel pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 1rem 1.25rem; }
.tabpanel-title { margin: 0; padding: 0.75rem 1.25rem 0; }
.code-tabs.js-tabs .tabpanel-title { display: none; }

/* Traces between sections, routed like PCB tracks: only vertical and horizontal runs, 45° corners, a via at each
   end and the net name on the run. Built from plain boxes positioned in percent of the frame width (an SVG
   stretched to the width would skew the corners); --y is the height of the run, --c the corner's leg. */
.trace {
  --y: 46px;
  --c: 14px;
  --w: 2px;
  position: relative;
  height: 96px;
  color: var(--sig);
}
.trace-wire { position: absolute; inset: 0; }
.tr { position: absolute; background: var(--sig); }
.tr-a { left: var(--from); top: 0; width: var(--w); margin-left: calc(var(--w) / -2); height: calc(var(--y) - var(--c)); }
.tr-b { left: var(--to); top: calc(var(--y) + var(--c)); bottom: 0; width: var(--w); margin-left: calc(var(--w) / -2); }
.trace-s .tr-a { height: 100%; }
.trace-s .tr-b { display: none; }
.tr-run { top: var(--y); height: var(--w); margin-top: calc(var(--w) / -2); left: calc(var(--lo) + var(--c)); right: calc(100% - var(--hi) + var(--c)); }
/* A corner is a bar the length of the diagonal, a little longer so its ends overlap the runs it joins, turned 45°
   about its start. */
.tr-c1, .tr-c2 {
  width: calc(var(--c) * 1.4142 + var(--w));
  height: var(--w);
  margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  transform-origin: calc(var(--w) / 2) 50%;
}
.tr-c1 { left: var(--from); top: calc(var(--y) - var(--c)); }
.trace-r .tr-c1 { transform: rotate(45deg); }
.trace-l .tr-c1 { transform: rotate(135deg); }
.trace-r .tr-c2 { left: calc(var(--to) - var(--c)); top: var(--y); transform: rotate(45deg); }
.trace-l .tr-c2 { left: calc(var(--to) + var(--c)); top: var(--y); transform: rotate(135deg); }
/* Vias: a copper ring with the drill hole showing the page through it. */
.via {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 3px solid var(--sig);
  border-radius: 50%;
  background: var(--bg);
}
.via-top { left: var(--from); top: -6px; }
.via-bottom { left: var(--to); bottom: -6px; }
/* The net name sits on the run, the track broken under it like silkscreen beside copper. */
.trace-label {
  position: absolute;
  top: var(--y);
  left: calc((var(--lo) + var(--hi)) / 2);
  transform: translate(-50%, -50%);
  padding: 0.2em 0.6em;
  background: var(--bg);
  border: 1px solid var(--sig);
  border-radius: 2px;
  font: 500 0.625rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted); /* the signal colours are too light for small text on the light background */
  white-space: nowrap;
}
.trace-s .trace-label { left: var(--from); transform: translate(1rem, -50%); }
.trace + .section { border-top-color: transparent; }
.trace + .section::before, .trace + .section::after { display: none; }
.trace-line {
  fill: none;
  stroke: var(--sig, currentColor);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The bus over the footer: the four signal colours side by side. */
.bus { position: relative; height: 48px; border-top: 1px solid var(--line); }
.bus-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Drawn in as they scroll into view, with CSS scroll-driven animations (no script): the track is uncovered from
   its top pad down. Browsers without them, and everyone who asks for reduced motion, see the traces already drawn. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .trace-wire, .bus-lines {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 50%;
    }
    .bus-lines { animation-name: draw-across; }
    .via-bottom, .trace-label { animation: fade linear both; animation-timeline: view(); animation-range: cover 40% cover 50%; }
  }
}
@keyframes draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw-across { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Pages and prose. */
.page h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); color: var(--text); }
.prose { max-width: 42rem; margin-top: 1.5rem; }
.prose h2 { margin-top: 2.5rem; }
.prose ul { padding-left: 1.25rem; }
.post-list { list-style: none; padding: 0; margin-top: 2rem; }
.post-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }

/* Footer: columns of links, the build stamp like the one on our PDFs. */
.site-footer { border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding: 2.5rem var(--gutter);
}
.footer-brand .wordmark { height: 0.9rem; margin-bottom: 1rem; }
.footer-col .v-label { margin-bottom: 0.75rem; }
.footer-col li { margin-bottom: 0.5rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.footer-stamp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--line);
  font: 400 0.75rem/1.4 var(--font-mono);
}
.footer-stamp code { font-size: 1em; color: var(--text); }
@media (max-width: 52rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
.section .section { padding-inline: 0; }
.section .section::before, .section .section::after { display: none; }

/* Highlighted code: giallo pins color-scheme inline; follow the page (and so the theme toggle) instead, on the
   page's own surface. */
pre.giallo { color-scheme: inherit !important; background-color: var(--surface) !important; }
.tabpanel pre.giallo { background-color: transparent !important; }

/* Links with an arrow after them: "go" leads on within the site, "ext" leaves it. */
.go::after, .ext::after, .card h3 a::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.6em;
  margin-left: 0.35em;
  background-color: currentColor;
  -webkit-mask: var(--arrow-go) center / contain no-repeat;
  mask: var(--arrow-go) center / contain no-repeat;
}
.ext::after { width: 0.6em; -webkit-mask-image: var(--arrow-ext); mask-image: var(--arrow-ext); }

/* Landing page sections. */
.section-lead { max-width: 42rem; }
.more { margin-top: 1.5rem; font: 500 0.8125rem/1.4 var(--font-mono); letter-spacing: 0.04em; }
.hero-fig .fig-placeholder { aspect-ratio: 3 / 2; }

/* Donguru spotlight: the pitch and features beside the block diagram. */
.spotlight { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 60rem) { .spotlight { grid-template-columns: minmax(0, 1fr); } }
.features { list-style: none; padding: 0; margin: 1.75rem 0; counter-reset: f; }
.features li { counter-increment: f; position: relative; padding: 0.9rem 0 0.9rem 2.75rem; border-top: 1px solid var(--line); }
.features li::before {
  content: counter(f, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1rem;
  font: 500 0.75rem/1 var(--font-mono);
  color: var(--signal-usb);
}
.features h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.features p { margin: 0; color: var(--muted); }

/* Block diagram: hairline blocks, the MCU in red, nets in their signal colours. */
.bd { display: block; width: 100%; height: auto; font-family: var(--font-mono); }
.bd-box rect { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.25; }
.bd-mcu { fill: color-mix(in oklch, var(--accent) 10%, var(--raised)); stroke: var(--accent); stroke-width: 1.5; }
.bd-net path { fill: none; stroke: var(--sig); stroke-width: 2.5; stroke-linejoin: round; }
.bd-ctrl path { stroke-width: 1.5; stroke-dasharray: 5 4; }
.bd-text text { fill: var(--text); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; }
.bd-text .bd-sub { fill: var(--muted); font-size: 10px; }
.bd-text .bd-mcu-t { fill: var(--accent); }
.bd-text .bd-net-t { fill: var(--muted); font-size: 9.5px; letter-spacing: 0.1em; }
.spotlight-fig figcaption .v-badge { margin-left: auto; }

/* Software: a figure inside a tab, and three short columns under the panel. */
.tab-fig { padding: 1rem; }
.tab-fig .fig-placeholder { aspect-ratio: 16 / 9; }
.cols { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 2rem; background: var(--line); border: 1px solid var(--line); }
.col { background: var(--bg); padding: 1.25rem; box-shadow: inset 0 2px 0 var(--sig); }
.col h3 { font-size: 1.125rem; display: flex; align-items: center; gap: 0.5rem; }
.col p { margin: 0.5rem 0 0; color: var(--muted); }

/* Lab cards: four in a row, two on a tablet, one on a phone; photos of different shapes cut to one. */
#lab .cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { #lab .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { #lab .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#lab .card .fig-frame img { aspect-ratio: 4 / 3; object-fit: cover; }
/* A small app icon before a card title. */
.card-icon { width: 32px; height: 32px; flex: none; }

/* The open-source stack: layers top to bottom, wired down the left side in each layer's signal colour. */
.stack { list-style: none; margin: 2rem 0 0; padding: 0; }
.stack-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--raised);
}
.stack-products { font: 500 0.875rem/1.4 var(--font-mono); }
.layer { position: relative; padding: 1.75rem 0 0 1.75rem; }
/* The track: down the left edge from the layer above, into this layer's via. */
.layer::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--sig); }
.layer:last-child::before { bottom: auto; height: 2.4rem; }
.layer-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.layer-head .via { position: absolute; left: calc(-1.75rem + 2px); top: 0.15rem; width: 12px; height: 12px; border: 3px solid var(--sig); border-radius: 50%; background: var(--bg); }
.layer-head h3 { margin: 0; color: var(--text); }
.layer-head p { margin: 0; font-size: 0.875rem; }
.crate-ver { font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }
.crate-git { font-style: italic; }
.crate-text > p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--muted); }
.crate-code pre { margin: 0; font-size: 0.75rem; line-height: 1.5; padding: 0.75rem 0.9rem; overflow-x: auto; border-radius: var(--radius); }
.crate-links { font: 500 0.75rem/1.4 var(--font-mono); }

/* Notify and contact. */
.contact { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 52rem) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact-card { padding: 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--raised); }
.contact-card p { margin: 0.5rem 0 0; }
.contact-card .v-label { margin: 0; }
/* On a phone the diagram keeps a readable size and scrolls sideways inside its frame. */
.bd-scroll { overflow-x: auto; }
.bd-scroll .bd { min-width: 34rem; }

/* Crate cards in the stack: text and logo beside the code on a wide screen, stacked on a narrow one. The logo
   comes in a dark and a light variant; the one for the current theme shows (hidden lazy images are not fetched). */
.layer > .crate { background: var(--bg); border: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--sig); padding: 1rem 1.25rem 1.1rem; }
.crate-head { display: flex; }
.crate-code { min-width: 0; }
.crate { display: grid; gap: 0.75rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .crate { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.crate-text { display: flex; flex-direction: column; min-width: 0; }
.crate-text .crate-links { margin-top: auto; padding-top: 0.75rem; }
.crate-head { justify-content: flex-start; flex-wrap: nowrap; align-items: center; gap: 1rem; }
.crate h3 { margin: 0; font: 500 1.0625rem/1.3 var(--font-mono); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crate h3 a { text-decoration: none; }
.crate h3 a:hover { text-decoration: underline; text-decoration-color: var(--sig); }
.crate .crate-code { margin-top: 0; }
.crate-logo { flex: none; display: grid; place-items: center; height: 56px; }
.crate-logo img { height: 56px; width: auto; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-light { display: block; }
  :root:not([data-theme="dark"]) .logo-dark { display: none; }
}