/*
  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 `python -m http.server`, which sets no CSP at all. 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;
  --paper: #f6f1eb;
  --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;
}