/* V# (V-Sharp) — website styles.
   Traditional, lightweight, documentation-oriented layout: one centred column,
   a parchment background, a flat navigation row and a dark footer. */

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

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

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

body {
  margin: 0;
  font-family: "Fira Sans", "Segoe UI", Cantarell, Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #3f3b3b;
  background: #f5f5ed;

  /* Sticky footer: the main region grows, the footer stays at the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

main.container {
  padding-top: 40px;
  padding-bottom: 60px;
}

/* --------------------------------------------------------- typography --- */

h1,
h2,
h3,
h4 {
  color: #2f2c2c;
  font-weight: 500;
}

h1 {
  font-size: 2.1em;
  line-height: 1.3;
  font-weight: 300;
  margin: 0 0 0.6em;
}

h2 {
  font-size: 1.8em;
  line-height: 1.3;
  font-weight: 500;
  margin: 1.8em 0 0.6em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #ded6c2;
}

h3 {
  font-size: 1.25em;
  margin: 1.8em 0 0.6em;
}

h4 {
  font-size: 1.05em;
  margin: 1.5em 0 0.5em;
}

p {
  margin: 0 0 1.2em;
}

ul,
ol {
  margin: 0 0 1.2em;
  padding-left: 40px;
}

ul {
  list-style: square;
}

li {
  margin-bottom: 10px;
}

li > ul,
li > ol {
  margin-top: 10px;
}

strong,
b {
  font-weight: 600;
}

em {
  font-style: italic;
}

hr {
  height: 0;
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid #ded6c2;
}

.lead {
  font-size: 1.15em;
}

.note {
  margin: 0 0 1.2em;
  padding: 12px 16px;
  background: #f0ebde;
  border-left: 4px solid #d4cbb6;
}

.note :last-child {
  margin-bottom: 0;
}

.muted {
  color: #6b6560;
}

/* -------------------------------------------------------------- links --- */

a {
  color: #0754b5;
  text-decoration: underline;
}

a:hover {
  color: #001e77;
}

a:focus-visible,
:focus-visible {
  outline: 2px solid #0754b5;
  outline-offset: 2px;
}

/* --------------------------------------------------------------- code --- */

pre,
code,
kbd,
samp,
tt {
  font-family: "DejaVu Sans Mono", "Liberation Mono", Consolas, Menlo, monospace;
}

code,
kbd,
tt {
  padding: 2px 6px;
  font-size: 0.9em;
  background: #efeadc;
  border: 1px solid #ccc;
  border-radius: 4px;
}

pre {
  margin: 0 0 1.5em;
  padding: 12px 14px;
  font-size: 0.85em;
  line-height: 1.45;
  background: #efeadc;
  border: 1px solid #ccc;
  border-radius: 6px;

  /* Long commands and source lines scroll instead of breaking the layout. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre code {
  padding: 0;
  font-size: 1em;
  background: none;
  border: 0;
  border-radius: 0;
  white-space: pre;
}

/* ------------------------------------------------------------- tables --- */

.table-wrap {
  margin: 0 0 1.5em;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

caption {
  margin-bottom: 0.5em;
  color: #6b6560;
  font-size: 0.9em;
  text-align: left;
}

th,
td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #ded6c2;
}

thead th {
  background: #ede6d5;
  font-weight: 600;
}

tbody tr:nth-child(even) {
  background: #f0ebde;
}

/* ------------------------------------------------------------- header --- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  background: #f2efe4;
  border: 1px solid #d4cbb6;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.site-header {
  background: linear-gradient(#ede6d5, #f5f5ed);
}

.site-nav {
  background: #f2efe4;
  border-bottom: 1px solid #d4cbb6;
  font-size: 0.9em;
}

.site-nav ul {
  margin: 0;
  padding: 8px 20px;
  list-style: none;
  text-align: center;
}

.site-nav li {
  display: inline-block;
  margin: 0;
}

.site-nav a {
  display: inline-block;
  padding: 6px 10px;
  color: #3f3d32;
  text-decoration: none;
}

.site-nav a:hover {
  color: #3f3d32;
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  color: #0754b5;
  font-weight: 600;
  text-decoration: underline;
}

.masthead {
  padding: 36px 20px 40px;
  text-align: center;
}

/* Interior pages carry the same mark at the same size; only the surrounding
   air is tightened, because a page title follows immediately below it. */
.masthead.compact {
  padding: 22px 20px 26px;
}

/* The logo is itself the wordmark: the blue ribbon is the V and the hash is
   drawn into the artwork. The masthead therefore shows the mark alone and does
   not repeat the name as text beside it.

   The hash is pure white with a near-white (#fefefe) keyline around the whole
   silhouette, so the mark is drawn to sit on a dark field. Measured against the
   parchment the white parts reach only 1.07:1, which is why the hash vanished
   there; on this ink plate they reach 15.9:1 and the mark reads whole. */
.masthead .logo {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  background: #2f2c2c;
  border-radius: 6px;
  line-height: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.masthead a.logo {
  text-decoration: none;
  transition: background 0.2s ease-in;
}

.masthead a.logo:hover {
  background: #3f3b3b;
}

.masthead .logo img {
  display: block;
  width: 168px;
  height: auto;
  /* The artwork's transparent margins are uneven -- 41px above the mark and 23px
     below it on a 171px canvas -- which leaves the mark sitting 5.3% of its own
     height below the optical centre of the plate. This lifts it back. */
  transform: translateY(-5.26%);
}

.masthead .tagline {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 1.5em;
  line-height: 1.35;
  font-weight: 300;
  color: #3f3b3b;
}

.masthead .facts {
  margin: 14px 0 0;
  font-size: 0.95em;
  color: #6b6560;
}

.masthead .facts code {
  font-size: 0.9em;
}

/* Row of primary links under the masthead, as on the reference site. */
.actions {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.actions li {
  display: inline-block;
  margin: 6px 5px;
}

.actions a {
  display: inline-block;
  padding: 9px 18px;
  color: #0754b5;
  background: #f2efe4;
  border: 1px solid #d4cbb6;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}

.actions a:hover {
  color: #001e77;
  background: #ede6d5;
  text-decoration: underline;
}

/* ---------------------------------------------------------- page body --- */

.page-title {
  margin-bottom: 0.4em;
}

.subtitle {
  margin-top: -0.2em;
  margin-bottom: 1.6em;
  font-size: 1.1em;
  color: #6b6560;
}

/* Two-column link/summary grid used on the home and resources pages. */
.cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
}

.cols > * {
  flex: 1 1 260px;
  min-width: 0;
}

.output {
  color: #6b6560;
}

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

.site-footer {
  margin-top: auto;
  padding: 24px 0 32px;
  background: #434342;
  border-top: 4px solid #333;
  color: #d8d8d2;
  text-align: center;
  font-size: 0.9em;
}

.site-footer nav ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.site-footer nav li {
  display: inline-block;
  margin: 4px 0;
}

.site-footer nav a::after {
  content: " \276F";
  color: #8d8d86;
}

.site-footer nav li:last-child a::after {
  content: none;
}

.site-footer a {
  padding: 0 10px;
  color: #a8cdf5;
  text-decoration: none;
}

.site-footer a:hover {
  color: #cfe3fb;
  text-decoration: underline;
}

.site-footer p {
  margin: 6px 0;
}

.site-footer .colophon a {
  padding: 0;
  text-decoration: underline;
}

/* --------------------------------------------------------- responsive --- */

@media screen and (max-width: 840px) {
  .masthead .logo img {
    width: 148px;
  }

  .masthead .tagline {
    font-size: 1.3em;
  }
}

@media screen and (max-width: 639px) {
  body {
    font-size: 16px;
  }

  .masthead {
    padding-top: 28px;
  }

  .masthead .logo {
    padding: 5px 10px;
  }

  .masthead .logo img {
    width: 120px;
  }

  .masthead .tagline {
    font-size: 1.15em;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.5em;
  }

  ul,
  ol {
    padding-left: 24px;
  }

  .site-nav ul {
    padding: 6px 10px;
  }

  .cols {
    gap: 0;
  }
}

@media print {
  .site-nav,
  .actions {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}