/* Orchestiq.
 *
 * The company is the frame and the product is the picture, so this page has no
 * accent colour of its own. The only colour anywhere on it lives inside the
 * Reclaim block, which makes the hierarchy true rather than asserted: a
 * one-person business whose whole claim is one finished product should not
 * out-dress the product.
 *
 * Reclaim's own brand is deliberately not borrowed. Its mark, its hue and its
 * type roles belong to it, and a company page wearing them reads as a second
 * product page for the same thing.
 */

:root {
  color-scheme: dark;

  --ground: #0b0b0c;
  --text-bright: #f2f2f3;
  --text-body: #c2c2c6;
  --text-dim: #93939a;
  --line: rgb(255 255 255 / 0.09);
  --line-soft: rgb(255 255 255 / 0.055);

  /* Borrowed for one element only, and named so that nobody reaches for it
     elsewhere by accident. */
  --reclaim-signal: #4fbbdb;
  --reclaim-free: #5fae79;
  --reclaim-rebuild: #c9a63c;
  --reclaim-yours: #d4854a;
  --reclaim-keep: #c25f57;

  /* No webfont. A page this small should not wait on a third party to render
     its first line, and self-hosting a face for four hundred words is weight
     without a reason. */
  --sans: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* A page this short would otherwise stop a third of the way down and leave the
   rest of the window empty, which reads as a page that failed to finish rather
   than as one that had little to say. The colophon is pushed to the bottom of
   the viewport instead, and simply follows the content once there is more of
   it. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--ground);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'tnum';
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 6vw, 2rem);
}

/* ── Type ───────────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  color: var(--text-bright);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-weight: 640;
  letter-spacing: -0.032em;
  line-height: 1.08;
  font-size: clamp(2.1rem, 6vw, 2.9rem);
}

h2 {
  font-weight: 640;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
}

h3 {
  font-weight: 620;
  letter-spacing: -0.015em;
  font-size: 1rem;
}

p {
  margin: 0;
}

p + p {
  margin-top: 1.15rem;
}

a {
  color: var(--text-bright);
  text-decoration-color: rgb(255 255 255 / 0.3);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--text-bright);
}

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

strong {
  color: var(--text-bright);
  font-weight: 600;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
}

.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin: 0;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text-body);
  margin-top: 1.15rem;
}

.dim {
  color: var(--text-dim);
}

/* ── Frame ──────────────────────────────────────────────────────────────── */

header {
  padding-block: 2.5rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-bright);
  font-weight: 640;
  letter-spacing: -0.01em;
}

.brand svg {
  width: 17px;
  height: 17px;
  display: block;
}

main {
  flex: 1;
  padding-block: clamp(3rem, 10vw, 4.5rem) clamp(3rem, 8vw, 4rem);
}

h1 + .product {
  margin-top: clamp(2rem, 5vw, 2.75rem);
}

/* Where the page stops. Place and a way to write, set quietly enough that it
   reads as the end of the sheet rather than as a third section. */
.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  justify-content: space-between;
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-dim);
}

.colophon a {
  font-family: var(--mono);
  color: var(--text-dim);
}

.colophon a:hover {
  color: var(--text-bright);
}

/* ── The product ────────────────────────────────────────────────────────────
   The one place on this site with colour in it. */

.product {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.018);
}

.product-body {
  padding: 1.5rem;
}

.product-name {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.product-name .n {
  color: var(--text-bright);
  font-weight: 640;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}

.product-name .t {
  color: var(--reclaim-signal);
  font-size: 0.9375rem;
}

.product p {
  margin-top: 0.7rem;
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* The finding, in the product's own grammar: mono, tabular, the claim struck
   through and the measurement in its accent. It is the only number on this
   site and it was measured on a real disk. */
.finding {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.finding .claimed {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-size: 1.0625rem;
}

.finding .arrow {
  color: var(--text-dim);
}

.finding .real {
  color: var(--reclaim-signal);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.finding .note {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin-left: auto;
}

/* Once the row wraps, `margin-left: auto` strands the provenance on its own
   line against the right edge, which reads as a caption for nothing. Below the
   wrap it lines up with everything else instead. */
@media (max-width: 30rem) {
  .finding .note {
    margin-left: 0;
    width: 100%;
  }
}

.product-link {
  display: inline-block;
  margin-top: 1.35rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--reclaim-signal);
  text-decoration-color: rgb(79 187 219 / 0.35);
}

.product-link:hover {
  text-decoration-color: var(--reclaim-signal);
}

/* Four tiers, broken once. Reclaim's own device, and the reason the card ends
   rather than simply stopping. */
.tierbar {
  display: flex;
  height: 3px;
}

.tierbar span {
  display: block;
  height: 100%;
}

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact {
  font-family: var(--mono);
  font-size: 0.9375rem;
  margin-top: 1.15rem;
  display: block;
}

/* ── Legal pages ────────────────────────────────────────────────────────── */

.legal h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
}

.legal h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.7rem;
}

.legal address {
  font-style: normal;
  margin-top: 0.7rem;
  line-height: 1.75;
}

.legal ul {
  margin: 0.7rem 0 0;
  padding-left: 1.15rem;
}

.legal li {
  margin-top: 0.35rem;
}

.legal .stand {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-dim);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* The rule above the colophon is drawn by .colophon itself, so that it stops
   where the text does rather than running the full width of the window. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}