/* levolve.net — one stylesheet for every page.

   The look is plain and businesslike: one typeface (Jost, from the logo), text in a
   readable column, thin rules, and no decoration that is not doing a job.

   Colors are taken from the logo (site/assets/levolve-midnight-mark-*.png).
   The dark set applies when the visitor's device is set to dark. */

/* Jost: the typeface of the Levolve wordmark, used for all text on the site.
   The file is served from this site (site/assets/fonts/), so no visitor's
   browser is sent to a font company. One file holds every weight and every
   letter the site uses, accented Latin letters such as the long "a" in "levare"
   included, so all of a word arrives together. Licence: SIL Open Font License,
   in site/assets/fonts/jost-license.txt. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/jost.woff2?v=387897bc5e") format("woff2");
}

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --page: var(--bg);       /* the background of the page being shown */
  --surface: #f4f5f7;
  --text: #14161b;         /* logo outline ink */
  --text-muted: #636971;   /* darkest logo slate */
  --link: #382e6d;         /* logo indigo petals */
  --link-hover: #715cd0;   /* shaded edge of the logo's violet orb */
  --button: #3a3f47;       /* charcoal, a darker step of the logo slate */
  --button-text: #cfd4d8;  /* logo silver */
  --button-hover: #382e6d; /* logo indigo */
  --button-hover-text: #ffffff;
  --honeycomb: url("/assets/honeycomb-light.svg?v=2924fc2799");
  --border: #cfd4d8;       /* logo silver */
  --rule: #a9afb5;         /* thin lines on the page */
  --quote: #3a3f47;        /* a client's words on the home page */

  /* The header and footer are midnight in both light and dark, so these do not change. */
  --bar: #1c1a3a;                /* the logo indigo, darkened */
  --bar-text: #a9afb5;           /* logo silver */
  --bar-line: #382e6d;           /* logo indigo; the thin line edging the header and footer */
  --bar-link: #a9afb5;           /* logo silver; header links */
  --bar-link-on: #ffffff;        /* a header link that is hovered or is the current page */
  --marker: #8c78e0;             /* logo violet orb; the hexagon under the current page */
  --marker-hover: #8a9096;       /* logo slate; the hexagon under a hovered link */
  --bar-focus: #cfd4d8;          /* logo silver; the keyboard focus outline on the bar */

  /* Type and spacing, used everywhere so the pages share one rhythm. */
  --sans: "Jost", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 36rem;        /* the width of a column of reading text, about 65 characters */
  --hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161b;
    --surface: #1c1f26;
    --text: #cfd4d8;
    --text-muted: #8a9096;
    --link: #9481e5;       /* highlight of the logo's violet orb */
    --link-hover: #8c78e0; /* logo violet orb */
    --button: #cfd4d8;
    --button-text: #3a3f47;
    --button-hover: #8c78e0; /* logo violet orb */
    --button-hover-text: #14161b;
    --honeycomb: url("/assets/honeycomb-dark.svg?v=608d2904d5");
    --border: #6e747b;
    --rule: #6e747b;
    --quote: #a9afb5;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Leaves room for the header, which stays at the top, when jumping to a
     place on the page (the "Skip to content" link, for one). */
  scroll-padding-top: 6.5rem;
  /* The scroll bar is always shown, whether or not the page is long enough to
     need it. Without this, a long page is a few pixels narrower than a short
     one, and everything centered (the background included) shifts sideways when
     moving between them. */
  overflow-y: scroll;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* A faint honeycomb behind the content of every page. It recedes toward the
   middle of the page (cells shrink, lines thin) and breaks apart on the way,
   whole cells at a time, down to a small clear spot at the very centre. The
   drawing itself is in site/assets/honeycomb-light.svg?v=2924fc2799 and honeycomb-dark.svg. */
body::before {
  content: "";
  /* Fixed to the window, not to the page. Every page then shows the same part
     of the drawing, however long the page is, and it stays put while the page
     scrolls over it. */
  position: fixed;
  z-index: -1;
  inset: 0;
  /* Drawn at one fixed size, so the pattern is the same whatever the size of
     the window. 3250px puts the cells at the size the first version had in a
     half-width window. Only stretched on screens wider than the drawing. */
  background: var(--honeycomb) center / max(3250px, 100vw) auto no-repeat;
}

/* Headings use the wordmark's light weight, with the letters slightly opened up. */
h1,
h2 {
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

p {
  margin: 0 0 1.5rem;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--link-hover);
}

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

.wrap {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Only visible when reached with the keyboard. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
}

.skip-link:focus {
  top: 0.5rem;
}

/* Header */

/* Stays at the top of the window while the page scrolls beneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;   /* above the page, so the hexagon markers sit over it */
  background: var(--bar);
  border-bottom: 1px solid var(--bar-line);
}

.site-header :focus-visible {
  outline-color: var(--bar-focus);
}

/* Logo on the left, page links centered. On a narrow screen the links drop to
   their own centered row under the logo. */
.site-header .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.3rem;
}

/* The logo with its greys and purples swapped, shown on hover or keyboard focus. */
.brand-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.brand:hover .brand-hover,
.brand:focus-visible .brand-hover {
  opacity: 1;
}

.brand img {
  display: block;
}

@media (min-width: 40rem) {
  .site-header .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
  }

  .brand {
    justify-self: start;
    align-self: center;
    margin-top: 0;
  }
}

.site-nav ul {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spaced capitals on the bar. One small hexagon sits on the bar's bottom edge
   under a link: violet under the current page, grey under a link being hovered. */
.site-nav a {
  position: relative;
  display: block;
  padding: 0.95rem 0.9rem;
  color: var(--bar-link);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;   /* half its height, so it straddles the bar's edge */
  left: 50%;
  width: 0.866rem;
  height: 1rem;
  margin-left: -0.433rem;
  clip-path: var(--hexagon);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--bar-link-on);
}

.site-nav a:hover::after {
  background: var(--marker-hover);
}

.site-nav a[aria-current="page"]::after {
  background: var(--marker);
}

/* Tighter on a narrow phone so all four fit on one row. */
@media (max-width: 26rem) {
  .site-nav ul {
    gap: 0;
  }

  .site-nav a {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
}

/* Page content */

main {
  flex: 1;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

/* A page's title, set like the wordmark: light capitals, wide apart. The space
   added after the last letter is balanced on the left so it still sits centered. */
main > h1,
.prose h1,
.page-center h1 {
  padding-left: 0.3em;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
}

/* The home headline is a full sentence, so it stays in ordinary case. */
.hero h1 {
  text-align: center;
}

/* A page with only a few lines (page not found, message sent): the lines sit in
   the middle of the space between header and footer, in the clear spot where
   the honeycomb thins out, instead of at the top with empty space below. */
main:has(.page-center) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-center p {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  text-align: center;
}

/* The single "Confirm" button on the page reached from the confirmation email. */
.confirm-form {
  margin-top: 2rem;
  text-align: center;
}

/* Text placed straight on a page (the pages not yet written). */
main > p {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  text-align: center;
}

/* A button: one solid rectangle. Grey at rest, purple on hover. */
.button {
  display: inline-block;
  padding: 0.8rem 2.5rem;
  border-radius: 3px;
  background: var(--button);
  color: var(--button-text);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}

.button:hover {
  background: var(--button-hover);
  color: var(--button-hover-text);
}

/* The same button when it is a real <button>, as in the contact form. */
button.button {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Contact form: one narrow column, each box under its label. */
.contact-form {
  max-width: 30rem;
  margin: 1.5rem auto 0;
}

.contact-form p {
  margin: 0 0 1.25rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--text-muted);
  border-radius: 3px;
  background: var(--page);
  color: var(--text);
  font: inherit;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .form-note {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.contact-form p:last-child {
  margin: 2rem 0 0;
  text-align: center;
}

/* A box people never see or reach. Robots fill it in, and the server drops
   anything that arrives with it filled. */
.form-trap {
  position: absolute;
  left: -9999px;
}

/* Home page: logo, headline, one sentence, the button, and links to the other
   pages. It sits in the middle of the space between header and footer. */
main:has(.hero) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.hero-logo img {
  display: block;
  width: clamp(7rem, 16vh, 12rem);
  height: auto;
  margin: 0 auto clamp(1rem, 3vh, 2rem);
}

.hero h1 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.15;
}

.lead {
  max-width: var(--measure);
  margin: 0 auto clamp(1.25rem, 3.5vh, 2.25rem);
  font-size: 1.25rem;
  text-wrap: balance;
}

/* The kinds of work, on its own line under the lead, smaller and quieter. */
.lead-detail {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 1rem;
}

/* A client's words, just above the button. */
.review {
  max-width: 32rem;
  margin: 0 auto clamp(1.25rem, 3.5vh, 2.25rem);
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--rule);
}

.review blockquote {
  margin: 0;
}

.review blockquote p {
  margin: 0;
  color: var(--quote);
  font-size: 1.05rem;
  line-height: 1.6;
  text-wrap: balance;   /* even lines, so one word is not left alone on the last */
}

.review figcaption {
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.review figcaption::before {
  content: "\2014\00a0";   /* an em dash and a space before the name */
}

.hero p:has(.button) {
  margin-bottom: 0.75rem;
}

/* The line under the button saying what it leads to. */
.hero-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Three plain links to the other pages, in a row with thin dividers. */
.hero-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: clamp(1.25rem, 4vh, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.hero-links li {
  padding: 0 1.25rem;
}

.hero-links li + li {
  border-left: 1px solid var(--rule);
}

.hero-links a {
  color: var(--text);
  text-decoration: none;
}

.hero-links a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Stacked on a phone, where three across will not fit. */
@media (max-width: 30rem) {
  .hero-links {
    flex-direction: column;
    gap: 0.5rem;
  }

  .hero-links li + li {
    border-left: 0;
  }
}

/* About page: the person first, then the name.

   This page has a lot of reading text, so it is set on a plain sheet: a column
   of the page color, edged with thin rules, running from the header to the
   footer. The honeycomb shows on either side of it, never behind the words. */
main:has(.about-person),
main:has(.prose) {
  background: var(--page);
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  main:has(.about-person),
  main:has(.prose) {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}

main > .about-title {
  margin-bottom: 2rem;
}

/* The two section headings share one size. */
.about-person h2,
.about-levolve h2 {
  font-size: 1.75rem;
  text-align: center;
}

/* The paragraph about the person, centered in a column the width of a
   paragraph. There is no photo for now; the photo-beside-text layout that was
   here is in the git history for when one is added back. */
.about-person {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
}

.about-person h2 {
  margin-bottom: 1rem;
}

.about-details {
  font-size: 1.15rem;
  line-height: 1.7;
}

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

/* The name, the two words it comes from, and what it stands for. Everything
   here sits on one column the width of a paragraph, centered on the page,
   under a thin rule that separates it from the section above. */
.about-levolve {
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.about-levolve h2 {
  margin-bottom: 0.5rem;
}

.about-levolve p:last-child {
  margin: 2.5rem 0 0;
}

/* The line under the heading. */
.about-backbone {
  color: var(--text-muted);
}

.about-levolve .about-what {
  text-align: left;
}

/* Two dictionary entries: the word in bold, its type beneath, and numbered
   meanings, all on one left edge. */
.word-pair {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  text-align: left;
}

.entry-word {
  margin: 0 0 0.35rem;
}

.entry-word dfn {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

/* The word's type, on its own line under the word. */
.entry-kind {
  display: block;
  color: var(--text-muted);
  font-style: italic;
}

.word-pair ol {
  margin: 0;
  padding-left: 1.4rem;
}

.about-levolve .word-plus {
  align-self: center;
  margin: 0;
  font-size: 2.25rem;
  line-height: 1;
  text-align: center;
}

@media (min-width: 40rem) {
  .word-pair {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* A page of plain reading text, such as the privacy policy: one left-aligned
   column, on the same plain sheet as the About page. */
.prose {
  max-width: var(--measure);
  margin: 0 auto;
}

.prose h1 {
  padding-left: 0;
  text-align: left;
}

.prose-date {
  margin-top: 0.25rem;
  color: var(--text-muted);
}

.prose h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.3rem;
}

.prose p,
.prose ul {
  margin: 0 0 1rem;
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

/* Footer */

.site-footer {
  background: var(--bar);
  border-top: 1px solid var(--bar-line);
  color: var(--bar-text);
  font-size: 0.9rem;
  text-align: center;
}

.site-footer .wrap {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* On a large screen the footer stays at the bottom of the window, as the header
   stays at the top, so the page is always framed by the two bars. Phones and
   short windows are left alone: they cannot spare the room. */
@media (min-width: 48rem) and (min-height: 40rem) {
  .site-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

  /* Keeps whatever is being tabbed to clear of the footer. */
  html {
    scroll-padding-bottom: 4.5rem;
  }
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--bar-text);
}

.site-footer a:hover {
  color: var(--bar-link-on);
}