/*
  The Sciometrics demo server's landing page.

  A stylesheet rather than a <style> block: the host sets a Content-Security-Policy with no
  unsafe-inline, so an inline style or script on this page is dropped by the browser and works
  perfectly under any static server that sets no CSP. The same rule is why the
  logo is an <img> pointing at a file in this folder rather than an inlined <svg>: the artwork
  carries a <style> block of its own, which is fine inside an image document and would be
  dropped the moment it became part of this one. img-src is 'self', so the file has to be served
  from here and cannot be hot-linked from www.sciometrics.com.
*/

:root {
  color-scheme: light dark;

  --ink: #1b1b1f;
  --ink-soft: #55555f;
  /* White, and only the LIGHT palette is: the dark block below carries its own ground, so a
     visitor whose OS asks for dark gets the dark page, and color-scheme above advertises both. */
  --paper: #ffffff;
  --rule: #d9d2c7;
  /* The two stops of the logo's own gradient, so links and rules read as part of the mark
     rather than beside it. */
  --accent: #14315a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece8e2;
    --ink-soft: #a7a29a;
    --paper: #1a1917;
    --rule: #3a3733;
    --accent: #32bfed;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.page-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

/*
  The wordmark is a very wide lockup - roughly 10:1 - so it is sized by width and left to find
  its own height. The width/height attributes on the element are the artwork's own viewBox, which
  is what stops the page reflowing once the SVG has loaded.
*/
.logo {
  display: block;
  width: min(17rem, 70%);
  height: auto;
  margin: 0 0 1.75rem;
}

/* The mark is navy on transparent, which disappears into a dark background. Lifting it onto its
   own light plate is the least destructive fix: no recolouring, and the gradient survives. */
@media (prefers-color-scheme: dark) {
  .logo {
    background: #f6f1eb;
    border-radius: .5rem;
    padding: .75rem 1rem;
  }
}

.eyebrow {
  margin: 0 0 .5rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.2;
}

h2 {
  margin: 2rem 0 .75rem;
  font-size: 1.1rem;
}

.lede {
  margin: 0;
  color: var(--ink-soft);
}

code {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: .25rem;
  padding: .1em .35em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: .9em;
}

.links {
  margin: 0;
  padding-left: 1.25rem;
}

.links li {
  margin-bottom: .5rem;
}

a {
  color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.corporate-link {
  font-weight: 600;
  text-underline-offset: .2em;
}