/*
 * mestral.studio, in one stylesheet.
 *
 * ## Sibling, not copy
 *
 * The design brief asks for "same type, same spacing scale, same accent, light
 * background" — a page somebody can arrive at from lithos.software without
 * wondering whether they are still on the same site, and without mistaking it
 * for a second marketing page for the product.
 *
 * What that means concretely: the tokens below are the *light* half of the same
 * `@lithos/ui-design-tokens` set that `lithos-parked` copies the dark half of.
 * Not a light theme invented for this page — the same values, the other side.
 * Lithos is pinned dark because its backdrop is an editor graph; this page has
 * no such reason, and the contrast earns its keep: the studio is the plain,
 * calm, factual thing, and the product is the dark tool.
 *
 * ## Why there is no build step, again
 *
 * Same reason as the holding page, and more so: this site has no behaviour at
 * all. No JavaScript, no functions, no storage, no analytics. The entire
 * interactive surface is two links and a `mailto:`. A toolchain to ship that
 * would cost more than the file it produced.
 */

/*
 * Inter and JetBrains Mono, self-hosted, identical files to lithos-parked.
 *
 * Copied rather than shared: two repositories that deploy independently should
 * not have one reaching into the other's `public/`, and 185 KB is a cheap price
 * for the two sites being separately deployable. If the typefaces are ever
 * updated, both need it — there is no mechanism here that will remind anyone.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-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;
}

:root {
  color-scheme: light;

  --bg-base: #edeef1;
  --bg-elevated: #ffffff;
  --border: #d9dde3;
  --border-strong: #b7bfc9;

  --text-primary: #171a1f;
  --text-secondary: #59616d;
  --text-muted: #6e7682;

  --accent: #45709b;

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* The same gutter expression as the holding page, so the wordmarks on the two
     sites land on the same left edge at every width. That shared left edge is
     most of what makes them read as siblings — more than the typeface does. */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
}

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/*
 * One column, left-aligned, 34rem — the measure of the Lithos hero.
 *
 * Left at the gutter rather than centred, which is the layout in the brief and
 * looks, on a wide screen, like a page with a lot of room to its right. That is
 * the intended reading: this page is a record, and a record does not need to
 * fill the viewport. Centring it would also break the one alignment the two
 * sites share.
 */
.page {
  max-width: 1680px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter);
}

.col { max-width: 34rem; }

/*
 * The lockup: mark and wordmark, optically matched.
 *
 * 32px against a 21px wordmark is not arbitrary — it is the ratio the mark was
 * tested at, and it matters because the mark's ring is a hairline. Below about
 * 28px the two gaps in the ring, which are the whole point of the drawing,
 * start closing up. If the wordmark ever grows, the mark grows with it.
 */
.lockup {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  margin: 0;
}
.lockup__mark {
  flex: none;
  width: 32px;
  height: 32px;
  display: block;
}

.wordmark {
  color: var(--text-primary);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: 0.019em;
}

/* Rules carry the structure on this page, so they are elements rather than
   borders on whatever happens to be next to them. */
.rule {
  height: 1px;
  margin: 2.75rem 0 0;
  border: 0;
  background: var(--border);
}

.lede {
  margin: 2rem 0 0;
  color: var(--text-primary);
  font-size: clamp(1.375rem, 3vw, 1.625rem);
  line-height: 1.34;
  font-weight: 600;
}

/* -- products -------------------------------------------------------------- */

/*
 * A list of one.
 *
 * Built as a list because the brief asks for exactly one thing to be designed
 * for: a second product should be a new row, not a rewrite. Written as a
 * sentence it would have to be rewritten the day there are two, and the whole
 * block re-thought; as an `<li>` it is a copy-paste.
 */
.products {
  margin: 2.125rem 0 0;
  padding: 0;
  list-style: none;
}
.products li + li { margin-top: 1.5rem; }

.product__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.product__name {
  color: var(--text-primary);
  font-size: 1.0625rem;
  font-weight: 600;
}
.product__note {
  margin: 0.4375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* -- sections -------------------------------------------------------------- */

/*
 * A section heading is a label and a rule that runs to the end of the measure.
 * Same monospace, uppercase, tracked treatment as the legal block at the foot,
 * and as the Lithos footer — on both sites that treatment means "this is a
 * label on a record", never body text.
 */
.head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3.375rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: 400;
  letter-spacing: 0.122em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.about { margin: 1.625rem 0 0; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
}

.contact {
  margin: 1.5rem 0 0;
  font-size: 1.0625rem;
}

/* -- links ----------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* An outbound arrow, drawn in CSS rather than fetched or inlined twelve times.
   `currentColor` matters: the arrow is part of the link, so it has to follow it
   into the hover and focus states rather than sitting there in the old colour. */
.out {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.out::after {
  content: "";
  width: 0.8125em;
  height: 0.8125em;
  background: currentColor;
  /* arrow-up-right, lucide */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M7 7h10v10"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M7 7h10v10"/></svg>') center / contain no-repeat;
}

/* -- the legal block ------------------------------------------------------- */

/*
 * Margin data, not fine print.
 *
 * UK trading disclosure rules require all four of these on a company website —
 * registered name, place of registration, company number, registered office —
 * so the design question is only how they are set, and the answer is: like a
 * record. Monospace, uppercase, low contrast, present tense, no `©`. Small
 * enough to read as a stamp, never smaller than it can be read at.
 *
 * `text-wrap: pretty` rather than a hard line break: on a phone this becomes
 * three or four lines, and it should break at a sensible place rather than
 * leaving "NO. 12345678" alone on the last one.
 */
.legal {
  margin: 1.375rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  line-height: 1.7;
  letter-spacing: 0.122em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-wrap: pretty;
}
.legal p { margin: 0; }
.legal p + p { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}