/* Vector Grove - hand-written, no framework, no build step.
   One accent, one serif for headings, system sans for text. */

:root {
  --ink:        #16201c;
  --ink-soft:   #4a5a53;
  --paper:      #fbfaf7;
  --paper-alt:  #f2efe8;
  --rule:       #ddd8cd;
  --accent:     #1d6b4c;
  --accent-dk:  #12503a;
  --code-bg:    #16201c;
  --code-ink:   #e8efe9;
  --measure:    68ch;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "kern" 1;
}

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 10; }

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

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { display: block; border-radius: 6px; }
.brand-name { font-weight: 650; letter-spacing: 0.01em; font-size: 18px; }
.nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 550;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--accent-dk); border-bottom-color: var(--accent); }

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

main.wrap { padding-top: 44px; padding-bottom: 72px; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 40px; margin: 0 0 12px; }
h2 { font-size: 26px; margin: 44px 0 12px; }
h3 { font-size: 19px; margin: 28px 0 8px; }

p, ul, ol { max-width: var(--measure); }
li { margin: 4px 0; }

.page-head { border-bottom: 1px solid var(--rule); padding-bottom: 24px; margin-bottom: 8px; }
.standfirst { font-size: 20px; color: var(--ink-soft); margin: 0; max-width: var(--measure); }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px;
  font-weight: 700; color: var(--accent); margin: 0 0 10px;
}

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

.hero { padding: 8px 0 8px; }
.hero h1 { font-size: 46px; max-width: 20ch; }
.hero .standfirst { font-size: 21px; }

.claim {
  margin: 28px 0 0; padding: 20px 24px;
  background: var(--paper-alt); border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0; max-width: var(--measure);
}
.claim strong { color: var(--accent-dk); }

/* ---------- cards ---------- */

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 24px 0 0; }
.card {
  border: 1px solid var(--rule); border-radius: 8px; padding: 22px 24px;
  background: #fff; display: flex; flex-direction: column;
}
.card h3 { margin-top: 0; font-size: 20px; }
.card p { flex: 1; color: var(--ink-soft); max-width: none; }
.card .price { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.card-link { font-weight: 600; text-decoration: none; }
.card-link::after { content: " \2192"; }

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

pre, code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
code { font-size: 0.9em; background: var(--paper-alt); padding: 1px 5px; border-radius: 4px; }
/* Code is NOT held to the prose measure, for the same reason the tables below
   are not. The JQL examples are the most load-bearing content on both app pages
   and the longest runs to about 72 characters; at the 68ch prose measure they
   overflowed, and overflow-x meant a reader had to scroll sideways to find out
   what the app does. Widened to the table width so they simply fit. overflow-x
   stays as the backstop for a narrow viewport. */
pre {
  background: var(--code-bg); color: var(--code-ink); padding: 16px 20px;
  border-radius: 8px; overflow-x: auto; font-size: 14.5px; line-height: 1.55;
  max-width: 900px;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

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

/* Tables are NOT held to the prose measure: the security page's scope names
   (read:board-scope:jira-software) wrapped mid-token at 68ch, which reads as a
   typo in a document whose whole job is to be precise. */
/* Product screenshots. These are 1840x900 captures of the real product, so they
   scale to the column rather than forcing the page wide. The border is not
   decoration: Jira's UI is white on a near-white page and without an edge the
   screenshot bleeds into the article. */
figure.shot { margin: 30px 0; max-width: 100%; }
figure.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 6px; background: #fff;
}
figure.shot figcaption {
  font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; max-width: var(--measure);
}

table { border-collapse: collapse; margin: 20px 0; font-size: 15.5px; width: 100%; max-width: 900px; }
th, td { text-align: left; padding: 9px 18px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td code, th code { white-space: nowrap; }
th { font-weight: 650; color: var(--ink-soft); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- notes ---------- */

.note {
  border: 1px solid var(--rule); border-radius: 6px; padding: 16px 20px;
  background: #fff; max-width: var(--measure); margin: 20px 0;
}
.note p:last-child { margin-bottom: 0; }
.note p:first-child { margin-top: 0; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

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

.footer { border-top: 1px solid var(--rule); background: var(--paper-alt); padding: 40px 0 28px; }
.footer-inner { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-col h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin: 0 0 10px; }
.footer-col a { display: block; font-size: 15px; margin: 5px 0; text-decoration: none; color: var(--ink); }
.footer-col a:hover { text-decoration: underline; }
.footer-brand { font-weight: 650; font-size: 17px; }
.footer-note { font-size: 14.5px; color: var(--ink-soft); margin: 8px 0 0; }
.footer-legal { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); }
.footer-legal p { font-size: 13.5px; color: var(--ink-soft); margin: 0; max-width: none; }

@media (max-width: 640px) {
  h1 { font-size: 32px; }
  .hero h1 { font-size: 34px; }
  .nav { gap: 16px; }
}