/*
  The blog on codexleo.com.

  The articles are about writing books, so they are set like a page of one: a
  single serif column at a readable measure, with the furniture around it - header,
  contents, footer - in the interface sans that the rest of the site uses. Georgia
  rather than a web font, because it was drawn for screen reading, sits on every
  device, and costs no request on a page whose job is to load fast for a reader who
  arrived from a search result.

  Colours are the landing page's own, so a visitor who clicks through to the
  product does not feel they changed sites.
*/

:root {
    --ink: hsl(224, 71%, 4%);
    --ink-soft: hsl(220, 9%, 46%);
    --rule: hsl(220, 13%, 91%);
    --paper: hsl(0, 0%, 100%);
    --tint: hsl(221, 83%, 97%);
    --blue: hsl(221, 83%, 53%);
    --violet: hsl(250, 95%, 65%);

    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* The column. Everything on the page is measured against it. */
.wrap {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 24px;
}

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

/* ---------------------------------------------------------------- furniture */

.masthead {
    border-bottom: 1px solid var(--rule);
    font-family: var(--sans);
}
.masthead .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
}
.wordmark {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}
.masthead nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 0.94rem;
}
.masthead nav a { color: var(--ink-soft); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a.start { color: var(--blue); font-weight: 600; }

footer {
    margin-top: 72px;
    border-top: 1px solid var(--rule);
    padding: 28px 0 56px;
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--ink-soft);
}
footer a { color: var(--ink-soft); }
footer p { margin: 0 0 6px; }

/* ---------------------------------------------------------------- headings */

h1, h2, h3 {
    font-family: var(--serif);
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-wrap: balance;
}
h1 { font-size: 2.6rem; font-weight: 700; margin: 0 0 14px; }
h2 { font-size: 1.6rem; font-weight: 700; margin: 56px 0 14px; }
h3 { font-size: 1.2rem; font-weight: 700; margin: 36px 0 10px; }

.dateline {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0 0 36px;
}

/* ---------------------------------------------------------------- the figure */

.figure {
    margin: 0 0 44px;
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 18px;
    background: var(--paper);
}
.figure img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- the contents */

/*
  Every article opens with its own chapters, because that is how the product
  works: you see the outline and fix it before a word is written.
*/
.contents {
    background: var(--tint);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 0 0 48px;
    font-family: var(--sans);
}
.contents h2 {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    margin: 0 0 12px;
}
.contents ol {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.97rem;
    line-height: 1.6;
}
.contents li + li { margin-top: 7px; }
.contents a { color: var(--ink); text-decoration: none; }
.contents a:hover { color: var(--blue); text-decoration: underline; }

/* ---------------------------------------------------------------- the prose */

article p, article li { max-width: 38em; }
article p { margin: 0 0 1.25em; }
article ul, article ol { margin: 0 0 1.25em; padding-left: 1.3em; }
article li { margin-bottom: 0.5em; }
article strong { font-weight: 700; }

/* --------------------------------------------------------------- the ending */

/*
  Each article closes with its own invitation to try the product, so the page does
  not add a second one. What it adds is the way on: the next thing worth reading.
*/
.next {
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}
.next .label {
    display: block;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
.next h2 {
    font-size: 1.35rem;
    margin: 0 0 6px;
}
.next h2 a { color: var(--ink); text-decoration: none; }
.next h2 a:hover { color: var(--blue); }
.next p { margin: 0; color: var(--ink-soft); font-size: 1rem; max-width: 36em; }

/* ------------------------------------------------------------- the contents page */

.lede {
    font-size: 1.12rem;
    color: var(--ink-soft);
    max-width: 34em;
    margin: 0 0 56px;
}

.toc { list-style: none; margin: 0; padding: 0; }
.toc li { padding: 26px 0; border-top: 1px solid var(--rule); }
.toc li:last-child { border-bottom: 1px solid var(--rule); }

/* Title on the left, reading time on the right, as a book's contents page. */
.toc .line { display: flex; justify-content: space-between; align-items: baseline; gap: 28px; }
.toc .line h2 { margin: 0; font-size: 1.45rem; }
.toc .line a { color: var(--ink); text-decoration: none; }
.toc .line a:hover { color: var(--blue); }
.toc .minutes {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--ink-soft);
    white-space: nowrap;
}
.toc p { margin: 8px 0 0; color: var(--ink-soft); font-size: 1rem; max-width: 36em; }

@media (max-width: 600px) {
    body { font-size: 18px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.4rem; }
    .toc .line { flex-wrap: wrap; gap: 4px; }
    .contents { padding: 20px; }
}