/* =============================================================================
   Plainlyst — public site

   The palette, the two typographic laws and the font are the product's own,
   taken token-for-token from the application's stylesheet so the two surfaces
   are one product rather than two that happen to share a name.

     1. Mono is provenance. Anything quoted from a policy is monospaced, and
        nothing else on this page is. The counts are deliberately NOT mono —
        when four things on a page are monospaced the typeface stops meaning
        anything, and here it has exactly one job.

     2. Brass is the only attention colour, and it is never red. It marks the
        rule above a company's own sentence and nothing else.

   Set as a document rather than a dashboard: one column, left aligned, hairline
   rules between sections, one raised surface. Mobile-first — every block below
   40rem is the primary case.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

/* Newsreader, self-hosted, copied from the application bundle. Licence: SIL OFL
   1.1, assets/fonts/OFL.txt. No external font host, in any form — this page
   makes no third-party request at all.

   One cut, not the two the application ships. Every serif element here is a
   heading at weight 600; a network trace of the built page shows the 400 file
   was never requested, because nothing asks for it. An unused 22KB in the
   bundle is a file somebody later has to work out the purpose of. If serif body
   copy is ever wanted, the 400 cut comes back with it. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-600.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;
}

/* ----------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  --field: #faf8f5;
  --paper: #ffffff;
  --veil: #f5f2ec;
  --veil-2: #efe9df;
  --rule: #e9e2d8;
  --rule-strong: #d2c8ba;

  --ink: #141110;
  --ink-2: #463f38;
  --ink-3: #5c534a;
  --ink-4: #665c52;

  --pine: #0d4a43;
  --pine-hover: #10594f;
  --pine-wash: #e3efec;
  --pine-line: #b4d1ca;

  --brass: #7a5716;
  --brass-wash: #f8f0de;
  --brass-line: #e2cda3;

  --sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', Times, serif;

  /* 8px spine. */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4rem;
}

/* ------------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--field);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0 0 var(--s2);
  max-width: 68ch;
}

b {
  color: var(--ink);
  font-weight: 600;
}

/* One shared gutter, set once, on the side axis only so a vertical override
   cannot quietly zero it. */
.shell {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--s3);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--pine);
  color: #fff;
  padding: var(--s1) var(--s2);
  border-radius: 0 0 4px 0;
}

.skip:focus {
  left: 0;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 2px;
}

.link {
  color: var(--pine);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.link:hover {
  color: var(--pine-hover);
}

/* --------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--field);
}

.masthead__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  padding-block: var(--s3);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.wordmark__mark {
  display: inline-flex;
  /* Optically seated against the baseline of the name beside it. */
  transform: translateY(0.18em);
}

.wordmark__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.masthead__note {
  margin: 0;
  color: var(--ink-4);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------- hero */

.hero {
  border-bottom: 1px solid var(--rule);
}

.hero__in {
  padding-block: var(--s5) var(--s6);
  display: grid;
  gap: var(--s5);
}

.hero__title {
  margin: 0 0 var(--s3);
  font-family: var(--serif);
  font-weight: 600;
  /* Set from the measure rather than from the viewport alone, so the line
     breaks where the sentence does at every width. */
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* `balance` fights the hard break between the two sentences: the browser
     evens out the lines it is given and the result was a four-line stack with
     one orphaned word. `pretty` leaves the authored break alone and only takes
     care of the last line. */
  text-wrap: pretty;
}

/* The second clause carries its own colour. The first sentence is the reader's
   own knowledge; the second is the question the product answers. */
.hero__ask {
  color: var(--pine);
}

.hero__sub {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 46ch;
}

.hero__stage {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-4);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  max-width: 46ch;
}

/* --------------------------------------------------------------- findings */

/* The one raised surface on the page, and it earns it: this is the product's
   actual output, not a decorative card. */
.finding {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--s3);
  /* A column, so that when two of these sit side by side and the grid stretches
     them to a common height, the quote block can be pushed to the foot of the
     panel rather than stopping wherever its own text ran out and leaving a bare
     strip under the tint. */
  display: flex;
  flex-direction: column;
}

.finding__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  margin-bottom: var(--s2);
}

.finding__co {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.finding__cat {
  font-size: 0.78rem;
  color: var(--pine);
  background: var(--pine-wash);
  border: 1px solid var(--pine-line);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.finding__t {
  margin: 0 0 var(--s2);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.finding--lead .finding__t {
  font-size: 1.6rem;
}

.finding__why {
  font-size: 0.95rem;
  color: var(--ink-3);
  margin-bottom: var(--s3);
}

/* The company's own sentence. Monospaced, under the one brass rule on the page.
   This is the whole epistemic position of the product: a finding is a reading of
   a published claim, and the claim is printed underneath so a reader can check
   the reading rather than take it. */
.finding__q {
  margin: 0;
  /* Takes up the slack in the flex column, so the tint always meets the bottom
     edge of the panel. */
  margin-top: auto;
  /* The tint is pulled out to the panel edge so the quote reads as a different
     kind of material from the sentence above it. Written as one shorthand each
     for margin and padding — an earlier draft set `padding-top` and then a
     `padding` shorthand below it, which is exactly the cancelling pair this
     stylesheet should not contain. */
  margin-inline: calc(var(--s3) * -1);
  margin-bottom: calc(var(--s3) * -1);
  padding: var(--s2) var(--s3) var(--s3);
  border-top: 2px solid var(--brass-line);
  background: var(--brass-wash);
  border-radius: 0 0 5px 5px;
}

.finding__q p {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 var(--s2);
  max-width: none;
}

.finding__q cite {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--brass);
}

/* ------------------------------------------------------------------ bands */

.band {
  border-bottom: 1px solid var(--rule);
}

.band .shell {
  padding-block: var(--s5);
}

.band--tint {
  background: var(--veil);
}

.h-lg {
  margin: 0 0 var(--s3);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.h-sm {
  margin: 0 0 var(--s2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-4);
}

.h-xs {
  margin: 0 0 var(--s1);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.lede {
  font-size: 1.05rem;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}

/* ----------------------------------------------------------------- counts */

.counts {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.count {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s1);
}

/* Sans, not mono. These are counted from the catalogue, but mono on this page
   means one thing and this is not it. */
.count__n {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--pine);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.count__l {
  font-size: 0.9rem;
  color: var(--ink-3);
}

.counts__note {
  font-size: 0.9rem;
  color: var(--ink-4);
  margin: 0;
}

/* ----------------------------------------------------------------- layout */

.cols {
  display: grid;
  gap: var(--s4);
}

.col p {
  font-size: 0.95rem;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}

.col p:last-child {
  margin-bottom: 0;
}

.pair {
  display: grid;
  gap: var(--s3);
}

/* ------------------------------------------------------------------ steps */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--s3);
}

.step {
  counter-increment: step;
  padding-left: 2.6rem;
  position: relative;
}

.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--pine-line);
  background: var(--pine-wash);
  color: var(--pine);
  font-size: 0.85rem;
  font-weight: 600;
}

.step__t {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.step p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ rules */

.rules {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.rule p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-3);
}

.method {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s3);
}

.method p {
  font-size: 0.95rem;
  color: var(--ink-3);
}

.method p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ plans */

.plan {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--s3);
}

.plan--premium {
  border-color: var(--pine-line);
}

.plan__n {
  margin: 0 0 var(--s1);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
}

.plan__p {
  margin: 0 0 0.2rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pine);
  line-height: 1.1;
}

.plan__cad {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-4);
  letter-spacing: 0;
}

.plan__note,
.plan__alt {
  margin: 0 0 var(--s2);
  font-size: 0.85rem;
  color: var(--ink-4);
}

.plan__promise {
  margin: 0 0 var(--s2);
  font-size: 0.95rem;
  color: var(--ink-2);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}

.plan__list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.plan__later {
  margin: var(--s3) 0 0;
  font-size: 0.85rem;
  color: var(--ink-4);
}

/* ----------------------------------------------------------------- footer */

.foot {
  background: var(--field);
}

.foot__in {
  padding-block: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  justify-content: space-between;
  align-items: baseline;
}

.foot__legal,
.foot__contact {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-4);
}

/* ------------------------------------------------------------------ wider */

@media (min-width: 48rem) {
  .counts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
  }

  .count {
    display: block;
  }

  .count__n {
    display: block;
    font-size: 2rem;
  }

  .cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pair {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
  }

  .rules {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
  }

  .finding {
    padding: var(--s4);
  }

  .finding__q {
    margin-inline: calc(var(--s4) * -1);
    margin-bottom: calc(var(--s4) * -1);
    padding: var(--s3) var(--s4) var(--s4);
  }
}

@media (min-width: 62rem) {
  /* The headline needs the wider half. The finding beside it is a fixed block of
     small text and does not. */
  .hero__in {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    gap: var(--s5);
    padding-block: var(--s6) calc(var(--s6) + var(--s3));
  }

  /* The steps stay two across even here. Four columns inside a 64rem measure
     gives each step about 14rem, which broke the fourth one over five ragged
     lines — a row of four that nobody can read is not better structure than a
     square of four that they can. `.rules` does go four across, because those
     four are one short sentence each and genuinely fit. */
  .rules {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* The page has no motion of its own. This covers the focus and colour
   transitions a browser may interpolate, and anything a future edit adds. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}