/* Minimal clean baseline */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,500;10..48,700&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap");

* {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 24px;
  font-family: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  color: #1f2933;
  background: #faf7f2;
}

header,
main,
footer {
  width: min(1000px, 100%);
  margin: 0 auto;
}

header,
footer {
  padding: 12px 0;
  text-align: center;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}

header nav a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* note: a boxed aside carrying a rule or caveat. Unlike .callout (a small
   annotation chip), this holds real paragraphs, so it reads at body size,
   left-aligned — centering wraps badly past one line — and pads equally
   above and below the text inside its border. */
.note {
  background: #eef3ee;
  color: #3c6e47;
  border: 1px solid #3c6e47;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 12px;
  font-style: italic;
  text-align: left;
}

.note p {
  margin: 0;
}

/* second nav sits under the primary one; spacing alone separates them, at
   the same type size */
header nav + nav {
  margin-top: 2px;
}

footer {
  text-align: center;
}

main {
  padding: 8px 0 24px;
}

/* h1 stands alone with a fluid size: defining it a second time inside a
   media query trips CSSLint's "headings defined once" rule, and clamp()
   scales it between narrow and wide screens without the duplicate. */
h1 {
  margin: 0 0 12px;
  line-height: 1.2;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 4vw, 2rem);
}

/* A heading belongs to what follows it, so it sits nearer that than to the
   paragraph it just left. Equal margins above and below made every heading
   look like it trailed the section it had finished rather than opening the
   next one. */
h2,
h3,
h5 {
  margin: 32px 0 10px;
  line-height: 1.2;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
}

h4 {
  margin: 32px 0 10px;
  text-align: center;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.1;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
}

/* display-name: the intro's centered, enlarged name/nickname/mascot line —
   a plain paragraph, not a heading, since students are told not to make it
   one; this mirrors h4's look without the semantics. */
.display-name {
  margin: 12px 0;
  text-align: center;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.1;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
}

p,
ul,
ol,
blockquote,
pre,
figure {
  margin: 0 0 12px;
}

figure,
blockquote {
  text-align: center;
}

/* a heading opening a container has nothing above it to separate from */
main > :first-child,
blockquote > :first-child,
.faq-item > :first-child {
  margin-top: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #0b5cab;
}

a:hover,
a:focus-visible {
  color: #083f77;
}

/* Browsers default monospace to 13px against a 16px body, which leaves code
   looking shrunken next to the prose around it. Naming the stack and the size
   puts it back in scale — just under 1em, since monospace reads wider than
   the body face at a matched size. */
pre,
code {
  font-family: "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;
  font-size: 0.95em;
}

pre {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid #d6d0c4;
  background: #fff; /* white, so code blocks stand out from the cream page */
}

hr {
  border: 0;
  border-top: 1px solid #d6d0c4;
  margin: 16px 0;
}

.mirrored {
  display: inline-block;
  transform: scaleX(-1);
}

h6 {
  font-size: 1.1em;
  margin: 24px 0 6px;
  line-height: 1.2;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
}

li > ul,
li > ol {
  margin-top: 4px;
  margin-bottom: 0;
}

.callout {
  display: inline-block;
  background: #eef3ee;
  color: #3c6e47;
  border: 1px solid #3c6e47;
  border-radius: 10px;
  padding: 1px 10px;
  font-size: 0.75em;
  margin: 0 0 12px;
}

/* "con" wordplay: italic with a dotted underline signal; click (focus)
   or hover pops the explanation tooltip */
.con-note {
  font-style: italic;
  border-bottom: 2px dotted currentColor;
  cursor: help;
  position: relative;
}

.con-note:hover::after,
.con-note:focus::after {
  content: "\201Cwith\201D in Spanish, as in con queso\2026";
  position: absolute;
  left: 0;
  top: 110%;
  z-index: 10;
  background: #2f3e33;
  color: #f5f2e9;
  font-style: normal;
  font-size: 0.45em;
  letter-spacing: normal;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

/* centered-links: sample intro link rows are centered per the intro
   format; a class beats repeating an inline style on every sample */
.centered-links {
  text-align: center;
}

/* home-logo: clickable vicuña sits inline-left of the site name; header
   spacing tightened to keep the top of every page compact */
.home-logo img {
  vertical-align: -8px;
  margin-right: 6px;
  transform: scaleX(-1); /* face the site name, not the margin */
}

/* companion vicuña closing the h1: sits inline after the heading text and
   faces back toward it, so the pair looks inward like the footer camels.
   The source art already faces left, so it needs no flip here — unlike
   .home-logo, which does. */
.home-logo-end {
  vertical-align: -8px;
  margin-left: 6px;
}

header {
  padding: 6px 0;
}

/* tagline: the line under the site name in the header. It sits outside
   hgroup because older validators reject a <p> inside one. */
.tagline {
  margin: 0 0 6px;
}

/* subtitle: the small line under the site name in the header. It's a
   paragraph, not a heading: an h5 straight after the h1 skips three heading
   levels, which the W3C validator reports as an error. The h1 stays the plain
   site name the page title is built from. */
.subtitle {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* the con tooltip is sized for large text; in the subtitle it needs a
   readable size of its own */
.subtitle .con-note:hover::after,
.subtitle .con-note:focus::after {
  font-size: 0.85rem;
  letter-spacing: normal;
}

/* badge-demo: static copies of the Vicunadator's pass/fail states so the
   validation page can show students what to look for */
.badge-demo-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin: 12px 0 20px;
}

.badge-demo {
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
}

.badge-demo-pass {
  background: rgba(225, 245, 225, 0.9);
  box-shadow: 0 0 12px 6px rgba(40, 170, 60, 0.55);
}

.badge-demo-fail {
  transform: rotate(180deg);
  background: rgba(255, 220, 220, 0.9);
  animation: badge-demo-pulse 1.6s ease-in-out infinite,
    badge-demo-spin 2.2s linear infinite;
}

@keyframes badge-demo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes badge-demo-pulse {
  0%, 100% { box-shadow: 0 0 6px 3px rgba(220, 30, 30, 0.35); }
  50% { box-shadow: 0 0 16px 9px rgba(220, 30, 30, 0.75); }
}

/* ---- FAQ entries --------------------------------------------------------
   A long FAQ reads as one wall of text when only bold separates a question
   from its answer. Each entry becomes a card so the eye can find where one
   stops and the next begins, and the Q and A badges mark which is which
   without relying on weight alone. The heading itself is left to the shared
   heading rule — a second h3 rule here would trip CSSLint. */

/* jump list: every question as an anchor, so the page opens as an index
   rather than something you scroll to survey. Two columns where there is
   room, one where there isn't. */
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.faq-jump li {
  flex: 1 1 20rem;
}

.faq-item {
  background: #fff; /* white cards on the cream page */
  border: 1px solid #d6d0c4;
  border-left: 5px solid #3c6e47;
  border-radius: 10px;
  padding: 16px 18px 6px;
  margin: 0 0 18px;
}

/* Q: and A: labels. A real space follows the colon in the markup, and the
   margin adds a little more, so the label reads as a label rather than as
   the first letter of the sentence. */
.faq-mark {
  margin-right: 0.15em;
  color: #3c6e47;
  font-weight: 700;
}

/* the answer's label is the quieter half of the pair */
.faq-mark-answer {
  font-family: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  color: #6b6257;
}

/* ---- Responsive ---------------------------------------------------------
   Media queries live at the end of the stylesheet, per the Web Standards.
   The layout is fluid already (width: min(1000px, 100%)) and headings scale
   with clamp(), so these handle only what neither covers: cramped padding,
   nav rows that need to breathe, and code blocks that need to shrink. */

@media (max-width: 40rem) {
  body {
    padding: 14px;
  }

  header nav {
    gap: 8px 12px;
  }

  .home-logo img,
  .home-logo-end {
    width: 30px;
    height: 30px;
  }

  pre {
    font-size: 0.9em;
  }
}

@media (min-width: 90rem) {
  body {
    padding: 32px 24px;
  }
}