/* VistaType LP — site styles
   Design brief: the audience is people who make documents readable. The site has
   to practice that. Large base type, high contrast, real focus outlines, no text
   below 1rem anywhere, and everything sized in rem so browser zoom works. */

/* The colors come from Jerry's logo, sampled out of the artwork itself:
   the crimson of "VistaType" (#A62728), the warm near-black of the magnifying
   glass (#2C2C29), and the cream of the sheet of paper (#EFECE5). Every
   pairing below was measured against the WCAG contrast formula and clears the
   AA minimum with room to spare — see the table in CLAUDE.md. */

:root {
  color-scheme: light dark;

  --bg:          #FAF7F2;   /* a shade off the paper in the logo */
  --surface:     #FFFFFF;
  --ink:         #1F1F1C;   /* the magnifying glass, taken darker for text */
  --muted:       #55534D;
  --accent:      #A62728;   /* exactly the red of the wordmark */
  --accent-hover:#8E1F20;
  --accent-ink:  #FFFFFF;
  --accent-wash: #F7EBEA;
  --border:      #DFD8CA;
  --band:        #EFECE5;   /* exactly the paper in the logo */
  --shadow:      0 1px 2px rgba(44, 44, 41, .07), 0 6px 20px rgba(44, 44, 41, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #191714;
    --surface:     #221F1B;
    --ink:         #F3F0E9;
    --muted:       #B5AFA4;
    --accent:      #EE8078;  /* the same red, lifted to carry on a dark page */
    --accent-hover:#F59D95;
    --accent-ink:  #2A0E0C;
    --accent-wash: #2C2320;
    --border:      #38342E;
    --band:        #1E1C18;
    --shadow:      none;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* "What it does" and "Download" jump down the page. Leave room for the bar
     that now sits at the top, or they land underneath it. The bar is about
     4.8rem tall; the rest is clearance. Sections carry their own padding
     above the heading, so this does not need to be generous. */
  scroll-padding-top: 5.5rem;
}

/* Narrow enough that the navigation drops onto its own line and the bar gets
   taller. */
@media (max-width: 48rem) {
  html { scroll-padding-top: 8.5rem; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1875rem;      /* 19px — deliberately above the web default */
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* ---------- shared building blocks ---------- */

.wrap {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.prose { max-width: 40rem; }         /* ~66 characters */

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.05rem); margin-top: 0; }
h3 { font-size: 1.25rem; }

p, li { max-width: 40rem; }
p { margin: 0 0 1rem; }

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .75rem 1.25rem;
  z-index: 10;
}
.skip:focus { left: 0; }

section { padding-block: clamp(3rem, 6vw, 4.75rem); }
section + section { border-top: 1px solid var(--border); }
.band { background: var(--band); }

.lede {
  font-size: 1.25rem;
  color: var(--muted);
}

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

/* The bar stays at the top of the window while the page scrolls, so the name
   and the navigation are always in reach.

   It has to be opaque and it has to sit above the page, or text scrolls
   through it. The skip link is above it in turn, at z-index 10, so a keyboard
   user still meets that first. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

/* The name at the top left is Jerry's wordmark. Its height is in rem like
   everything else, so browser zoom enlarges it along with the text. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand img {
  display: block;
  width: auto;
  height: 2.8rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  /* Center them against each other. Without this the row stretches every link
     to the height of the tallest thing in it — the icon — and the words sit at
     the top of a box that is taller than they are, riding high next to it. */
  align-items: center;
  gap: 1.5rem;
  font-size: 1.0625rem;
}
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* The GitHub link is the mark on its own. Two things it needs that a word does
   not: a name a screen reader can announce, which is on the link itself in the
   HTML, and a target big enough to hit — the padding below takes it to about
   45px square, past the 44px a touch screen wants. */
.nav-icon {
  display: inline-flex;
  align-items: center;
  padding: .45rem;
  margin-inline: -.45rem;
  border-radius: .3rem;
}
.nav-icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;   /* follows the other links from muted to full ink */
}

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

.hero { padding-block: clamp(3.5rem, 8vw, 6rem); }
.hero p.lede { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); max-width: 36rem; }

/* The mark sits beside the headline on a wide screen, and drops below the
   words on a narrow one — a picture ahead of the opening sentence would only
   push the sentence off the screen. */
.hero .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.hero-words { flex: 1 1 26rem; }
.hero-mark {
  flex: 0 1 auto;
  width: clamp(7rem, 20vw, 13rem);
}
.hero-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: .85rem 1.6rem;
  border-radius: .4rem;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 2px solid var(--accent);
}
/* Hover moves to a measured color rather than brightening the red, which would
   have quietly thinned the contrast of the white lettering on top of it. */
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { color: var(--accent); background: transparent; }
.btn-secondary:hover { background: var(--accent-wash); }

.meta {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--muted);
}

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; color: var(--ink); }
.card p  { margin-bottom: 0; color: var(--muted); max-width: none; }

/* ---------- steps & lists ---------- */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  max-width: 44rem;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: 2rem;
  max-width: none;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 1.1rem;
}
.steps h3 { margin-bottom: .35rem; }

.plain { padding-left: 1.25rem; }
.plain li { margin-bottom: .6rem; }

.note {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 1.1rem 1.4rem;
  border-radius: 0 .4rem .4rem 0;
  margin: 1.75rem 0;
  max-width: 42rem;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

kbd {
  font: inherit;
  font-size: .95em;
  background: var(--band);
  border: 1px solid var(--border);
  border-radius: .25rem;
  padding: .05em .4em;
  white-space: nowrap;
}

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

.site-foot {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 2.5rem;
  color: var(--muted);
  font-size: 1rem;
}
.site-foot a { color: var(--accent); }
.site-foot p { max-width: 44rem; }

/* On a short window the bar stops sticking and scrolls away like anything
   else. This matters most for the reader this site is built for: zooming the
   page in a long way shortens the window in exactly the same manner, and a bar
   that never leaves would take a bigger and bigger bite out of the reading
   space it is there to serve. Below this height it would be about a fifth of
   the screen. */
@media (max-height: 30rem) {
  .site-head { position: static; }
  html { scroll-padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}