:root {
  --background: #FFFFFF; --surface: #F5F5F4;
  --ink: #20201D; --cobalt: #2454A4; --cobalt-deep: #1B3F7E;
  --bugambilia: #9B2F67; --turquoise: #007681; --carmine: #B6383C; --maize: #E3A900;
  --text: var(--ink); --text-muted: #5B5B57;
  --purple: var(--cobalt); --blue: var(--cobalt); --magenta: var(--bugambilia);
  --green: var(--turquoise); --terracotta: var(--carmine); --terracotta-text: var(--carmine);
  --bone: var(--background);
  --bone-deep: var(--surface);
  --clay: var(--text-muted);
  --earth: #3F3F3C;
  --soil: var(--ink);
  --milpa: var(--cobalt);
  --milpa-deep: var(--cobalt-deep);
  --cielo: var(--cobalt);
  --flor: var(--maize);
  --flor-text: var(--carmine);
  --verde: var(--turquoise);
  --marigold: var(--maize);
  --marigold-bright: #E3A900;
  --rosa: var(--bugambilia);
  --rosa-deep: var(--bugambilia);
  --maiz: var(--cobalt);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }
html[data-text-size="1"] { font-size: 14.5px; }
html[data-text-size="2"] { font-size: 16px; }
html[data-text-size="3"] { font-size: 18.5px; }
html[data-text-size="4"] { font-size: 21px; }

body {
  background: var(--bone);
  color: var(--soil);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-x: hidden;
  
}

/* Language visibility */
body[data-lang="en"] .lang.es { display: none; }
body[data-lang="es"] .lang.en { display: none; }
.lang { display: inline; }
.lang.block { display: block; }
body[data-lang="en"] .lang.block.es { display: none; }
body[data-lang="es"] .lang.block.en { display: none; }

/* Grain overlay */
body::before { content: none; }

@keyframes letterIn {
  to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}
@keyframes letterOut {
  to { opacity: 0; transform: translateY(-0.4em) rotateX(-80deg); }
}

.btn-primary {
  background: var(--milpa-deep);
  color: var(--bone);
}
.btn-primary:hover {
  background: var(--rosa-deep);
  transform: translateY(-2px);
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-18px) rotate(1deg); }
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes beltScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Sections */
section {
  padding: 6rem 2.5rem;
  position: relative;
}

h2 {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--soil);
  margin-bottom: 2rem;
  font-variation-settings: "SOFT" 50, "WONK" 0;
}

h2 em {
  font-style: normal;
  color: inherit;
}

/* Footer */
footer {
  background: var(--surface);
  color: var(--soil);
  border-top: 1px solid rgba(32,32,29,0.35);
  padding: 3rem 2.5rem 1.5rem;
}

.footer-mark {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 3rem;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.footer-mark .alt-word { color: inherit; }

.cc-link { color: var(--earth); text-decoration: underline; text-underline-offset: 3px; }

.cc-link:hover { opacity: 0.7; }

.cc-link span {
  border: 1px solid rgba(32,32,29,0.45);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  line-height: 1;
}

.cc-link .cc-mark {
  background: var(--marigold);
  color: var(--soil);
  border-color: var(--marigold);
  font-weight: 600;
}

.cc-link .cc-version {
  border-color: transparent;
  padding-left: 0.3rem;
  color: var(--clay);
}

/* Project page styles */
.project-hero {
  padding: 3rem 2.5rem 3.5rem;
  position: relative;
  background: var(--bone);
}

.project-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.project-tag {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--clay);
  margin-bottom: 1.25rem;
  letter-spacing: 0.04em;
}

.project-title {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--soil);
  margin-bottom: 1.5rem;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
}

.project-title em {
  font-style: normal;
  color: inherit;
}

.project-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--earth);
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(29, 29, 27, 0.15);
}

.project-meta-item strong {
  font-weight: 500;
  font-style: normal;
  color: var(--soil);
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.project-lede {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.35;
  color: var(--earth);
  max-width: 42rem;
  font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1;
}

/* Project theme accents */
.project-hero.theme-milpa { background: var(--bone); }
.project-hero.theme-clay { background: var(--bone); }
.project-hero.theme-marigold { background: var(--bone); }
.project-hero.theme-rosa { background: var(--bone); }

/* Blog body */
.project-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2.5rem;
}

.project-body .prose {
  max-width: 38rem;
  margin: 0 0 4rem;
}

.project-body .prose p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--earth);
  margin-bottom: 1.5rem;
}

.project-body .prose h2,
.project-body .prose h3 {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.85rem;
  margin: 3rem 0 1rem;
  color: var(--soil);
  font-variation-settings: "SOFT" 50;
  letter-spacing: -0.015em;
  line-height: 1.55;   /* h2 would otherwise pick up line-height 1 from the base rule */
}

.project-body .prose h3 em {
  font-style: normal;
  color: inherit;
}

.project-body .prose blockquote {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--milpa-deep);
  padding: 1rem 0 1rem 1.5rem;
  border-left: 3px solid var(--acc, var(--earth));
  margin: 2rem 0;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.photo-figure {
  margin: 0;
  position: relative;
}

.photo-figure img,
.photo-figure .photo-placeholder {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--bone-deep);
  box-shadow: 0 12px 32px rgba(29, 29, 27, 0.12);
}

.photo-figure figcaption {
  margin-top: 0.85rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--earth);
  line-height: 1.4;
  opacity: 0.85;
}

/* Slim prev/next bar at the top of the page, clearing the fixed header */
.project-nav-top {
  padding: 0.9rem 1.5rem 0.7rem;
}

/* ---- Semillas: materials pages ---- */
.project-body .prose ul,
.project-body .prose ol {
  padding-left: 1.4rem;
  margin: 0 0 1.5rem;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--earth);
}
.project-body .prose li { margin-bottom: 0.45rem; }
.project-body .prose li::marker { color: var(--clay); }

.bloque {
  border-top: 1px solid rgba(29, 29, 27, 0.18);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
}

.bloque-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--clay);
  margin: 0.75rem 0 1.5rem;
}

.print-note {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--earth);
  opacity: 0.75;
  margin-top: 1.5rem;
}

.living-note {
  border-left: 3px solid var(--acc, var(--earth));
  padding: 0.75rem 0 0.75rem 1.25rem;
  margin: 2rem 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--earth);
}

@media print {
  nav, .mobile-menu, footer, .skip-link, .project-nav, .semilla-block, .print-note { display: none !important; }
  body::before { display: none; }
  body { background: #fff; }
  .project-hero { padding: 1.5rem 0; }
  .project-body { padding: 0; }
  .lang.es { display: none; }
  body[data-lang="es"] .lang.es { display: inline; }
  body[data-lang="es"] .lang.block.es { display: block; }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 7rem;
    gap: 3rem;
  }
  section { padding: 4rem 1.5rem; }
  .project-hero { padding: 9rem 1.5rem 3.5rem; }
  .project-body { padding: 3rem 1.5rem; }
}

@media (max-width: 600px) {
  .footer-mark { font-size: 2.4rem; }
  footer { padding: 3rem 1.5rem 1.5rem; }
  .project-meta { gap: 1.25rem; }
  .project-body .prose p { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Headings carry no mixed italics */
h1 em, h2 em, h3 em, h4 em, .project-nav-name em, .shelf-title em { font-style: normal !important; }
/* raya de sección: hecha a mano, no perfecta */
.raya { border: none; height: 12px; margin: 2.5rem 0; background: none; }
/* semilla entry (seed library) */
.semilla { border-top: 2px solid var(--soil); padding: 1.2rem 0 1.5rem; }
.semilla .sem-id { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--verde); }
.semilla h2, .semilla h3 { font-size: 1.35rem; line-height: 1.2; margin: 0.25rem 0 0.4rem; color: var(--soil); font-weight: 700; }
.semilla .sem-desc { color: var(--earth); max-width: 44rem; margin: 0 0 0.6rem; }
.semilla .sem-meta { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--clay); margin-bottom: 0.7rem; }
.sem-verbos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.sem-verbos a { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--milpa-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--flor); text-decoration-thickness: 2px; padding: 6px 0; }
.sem-verbos a:hover, .sem-verbos a:focus-visible { color: var(--rosa-deep); }
/* infra annotations (page seams) */
.infra-notas { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--clay); line-height: 1.9; }
/* focus visible everywhere */
a:focus-visible, button:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* ===== shared: colores control, plain-language note, cómo funciona ===== */
.como-funciona { max-width: 72rem; margin: 0 auto 1rem; padding: 0 1.5rem; }
.como-funciona summary { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--earth); cursor: pointer; padding: 6px 0; }
.como-funciona summary:hover { color: #9E452B; }
.como-funciona summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.como-funciona .infra-notas { padding: 6px 0 0 1.1em; }
img[data-color] { background: #fff; }

/* la milpa: photographs, two-file low-bandwidth pairs */
.fotos-milpa { max-width: 72rem; margin: 2.5rem auto 0; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .fotos-milpa { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .fotos-milpa { grid-template-columns: 1fr; } }
.fotos-milpa figure { margin: 0; }
.fotos-milpa img { width: 100%; height: auto; display: block; border: 1px solid rgba(32,32,29,0.25); }

:root { --line: rgba(32,32,29,0.35); --s1: 8px; --s2: 16px; --s3: 24px; --s4: 48px; --s5: 96px; --col: 1180px; }

/* ===== end-of-project navigation: light, part of the site ===== */
.siembra-nav { width: 100%; max-width: var(--col); margin: 3rem auto 0; padding: 1.2rem 1.5rem 2.5rem; border-top: 1px solid rgba(32,32,29,0.4); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; }
.siembra-nav a { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 600; font-style: normal; font-size: 1rem; color: var(--soil); text-decoration: none; padding: 10px 0; display: inline-block; }
.siembra-nav a:hover { color: #9E452B; text-decoration: underline; text-underline-offset: 4px; }
.siembra-nav a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.siembra-nav .sn-all { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--earth); }
@media (max-width: 600px) { .siembra-nav { flex-direction: column; align-items: flex-start; gap: 0.2rem; } }

/* per-photo colour control */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.footer-row { position: relative; max-width: var(--col); margin: 0 auto; padding: 6px var(--s3) 34px; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 30%) minmax(0, 36%); align-items: baseline; column-gap: 0; }
.footer-row > .footer-link:last-of-type { justify-self: end; text-align: right; }
.footer-mark { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.6013rem; color: #F5F5F0; text-decoration: none; position: relative; z-index: 1; justify-self: start; }
.footer-mark:hover { color: #D9825F; }
.footer-mark:focus-visible { outline: 3px solid #F5F5F0; outline-offset: 3px; }
.footer-link { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.1287rem; color: #F5F5F0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245,245,240,0.45); padding: 6px 0; position: relative; z-index: 1; }
.footer-link:hover { color: #D9825F; text-decoration-color: #D9825F; }
.footer-link:focus-visible { outline: 3px solid #F5F5F0; outline-offset: 3px; }
.footer-row .traza { position: absolute; left: var(--s3); right: var(--s3); bottom: 6px; width: calc(100% - 2 * var(--s3)); height: 38px; z-index: 0; pointer-events: none; }
.traza path { fill: none; stroke: rgba(245,245,240,0.4); stroke-width: 1.1; stroke-linecap: round; }
.traza path.term { stroke-width: 2.2; }
.traza circle { fill: #1F1F1C; stroke: rgba(245,245,240,0.55); stroke-width: 1.1; }
.colofon { background: none; border-top: none; margin-top: 20px; }
.colofon-inner { max-width: var(--col); margin: 0 auto; padding: 0 var(--s3); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
.colofon-inner .cc-link { justify-self: end; align-self: start; }
.como-funciona { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }
.como-funciona summary { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8400rem; letter-spacing: 0.04em; color: #D7D7D2; cursor: pointer; padding: 2px 0; }
.como-funciona summary:hover { color: #9E452B; }
.como-funciona summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.como-funciona .infra-notas { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9450rem; letter-spacing: 0.05em; color: #D7D7D2; line-height: 1.85; }
.como-funciona[open] .infra-notas { padding: 8px 0 0 1.1em; }
footer { background: #1F1F1C; color: #F5F5F0; border-top: none; padding: 44px 0 36px; }
.cc-link { flex: 0 0 auto; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8400rem; letter-spacing: 0.04em; color: #D7D7D2; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(215,215,210,0.45); }
.cc-link:hover, .como-funciona summary:hover { color: #D9825F; text-decoration-color: #D9825F; }
.cc-link:focus-visible, .como-funciona summary:focus-visible { outline: 3px solid #F5F5F0; outline-offset: 3px; }
@media (max-width: 820px) {
    .footer-row { grid-template-columns: 1fr; row-gap: 6px; padding: 10px var(--s3) 16px; }
    .footer-row > .footer-link:last-of-type { justify-self: start; text-align: left; }
    .footer-row .traza { display: none; }
    .colofon { margin-top: 12px; }
    .colofon-inner { grid-template-columns: 1fr; row-gap: 8px; padding: 12px var(--s3); }
    .colofon-inner .cc-link { justify-self: start; }
  }

/* the footer sits at the bottom even when a page is short */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

.footer-mark { margin: 0; font-style: normal; letter-spacing: normal; }
.footer-link, .footer-mark, .cc-link { box-shadow: none; }

/* ==================== project page primitives ====================
   Prototyped on Hackeo Comunitario. Reusable, not universal: each
   siembra composes its own page from whichever of these it needs.
   All class names are new, so nothing already on the site changes.
   ================================================================= */

.proj { --proj-col: 1180px; --proj-read: 34rem; }
.proj > * { max-width: var(--proj-col); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---- opening: context, title, statement, and a document straight away ---- */
.project-opening { padding-top: 2.6rem; padding-bottom: 2.2rem; }
.project-context { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5; color: var(--clay); margin: 0 0 0.9rem; max-width: 34ch; }
.project-opening h1 { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.025em; color: var(--soil); margin: 0 0 1.4rem; }
.project-opening > .project-figure { margin-top: 1.7rem; }
.project-statement { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-size: clamp(1.25rem, 2.9vw, 1.9rem); line-height: 1.28; letter-spacing: -0.01em; color: var(--soil); margin: 0; max-width: 22ch; }
@media (min-width: 900px) {
  .project-opening { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: end; }
  .project-opening > .project-context { grid-column: 1 / 8; grid-row: 1; align-self: start; }
  .project-opening > h1 { grid-column: 1 / 8; grid-row: 2; }
  .project-opening > .project-statement { grid-column: 1 / 7; grid-row: 3; margin-top: 0.4rem; }
  .project-opening > .project-figure { grid-column: 8 / 13; grid-row: 1 / 4; align-self: start; margin-top: 0.4rem; }
}

/* ---- sections ---- */
.project-section { padding-top: 3.4rem; padding-bottom: 0.6rem; }
.project-section > h2 { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.9vw, 1.2rem); line-height: 1.3; letter-spacing: 0.01em; color: var(--soil); margin: 0 0 1.4rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }

/* ---- reading column ---- */
.project-text { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.05rem; line-height: 1.62; color: var(--earth); max-width: var(--proj-read); margin: 0 0 1.1rem; }
.project-text:last-child { margin-bottom: 0; }
.project-text b, .project-text strong { font-weight: 700; color: var(--soil); }
.project-text a { color: var(--soil); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(32,32,29,0.35); }
.project-text a:hover { color: #9E452B; text-decoration-color: #9E452B; text-decoration-thickness: 2px; }
.project-text a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.project-text--wide { max-width: none; font-size: clamp(1.05rem, 1.9vw, 1.32rem); line-height: 1.5; }

/* ---- a question, said out loud ---- */
.project-question { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 7.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; color: var(--soil); margin: 0 0 1.2rem; max-width: 14ch; text-wrap: balance; }
/* when a question is the section heading it keeps the question's scale, not the label's */
.project-section > h2.project-question {
  font-size: clamp(1.9rem, 7.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em;
  border-bottom: none; padding-bottom: 0; margin: 0 0 1.2rem; max-width: 14ch;
}
.project-question--wide { max-width: 20ch; font-size: clamp(1.7rem, 6.2vw, 3.6rem); }
.project-question-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; }
.project-question-sub li { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(1rem, 2.1vw, 1.35rem); line-height: 1.3; color: var(--clay); }

/* ---- documents from the workshop ---- */
.project-figure { margin: 0; }
.project-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--bone); }
.project-caption { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.66rem; letter-spacing: 0.06em; line-height: 1.6; color: var(--clay); margin-top: 0.55rem; max-width: 44ch; }

/* one document beside a short text */
.project-image-text { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
@media (min-width: 900px) {
  .project-image-text { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.6rem; }
  .project-image-text.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .project-image-text.is-flipped > .project-figure { order: 2; }
  .project-image-text.is-flipped > :not(.project-figure) { align-self: end; padding-bottom: 0.2rem; }
}

.project-aside { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.95rem; line-height: 1.55; color: var(--clay); margin: 1rem 0 0; }

/* a list of verbs, said at scale */
.project-verbs { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-size: clamp(1.2rem, 2.5vw, 1.65rem); line-height: 1.24; letter-spacing: -0.01em; color: var(--soil); margin: 0 0 1.2rem; max-width: 18ch; }

/* a document given the whole column, with its notes underneath */
.project-image-full { margin-top: 2rem; }
.project-image-full .project-figure img { width: 100%; }
.project-plate-foot { display: grid; grid-template-columns: 1fr; gap: 0.3rem 2.5rem; margin-top: 0.55rem; }
@media (min-width: 760px) {
  .project-plate-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: start; }
  .project-plate-foot .project-aside { margin: 0; text-align: right; }
}
.project-plate-foot .project-caption { margin-top: 0; }
.project-plate-foot .project-aside { margin: 0.4rem 0 0; }

/* a plate whose note sits beside the image rather than under it */
@media (min-width: 1000px) {
  .project-image-full.has-margin-note { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: end; }
  .project-image-full.has-margin-note > .project-figure { grid-column: 1 / 10; margin: 0; }
  .project-image-full.has-margin-note > .project-aside { grid-column: 10 / 13; margin: 0 0 2.6rem; text-align: left; }
}

/* a line given a whole breath of its own */
.project-pause { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-size: clamp(1.35rem, 3.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--soil); margin: 3.4rem 0 3rem; max-width: 20ch; }

/* ---- notes in the margin, not statistic cards ---- */
.project-tally { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 0.15rem; }

/* ---- a run of documents at different widths, in order ---- */
.project-sequence { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.8rem; align-items: end; }
@media (min-width: 860px) {
  .project-sequence { grid-template-columns: repeat(12, 1fr); column-gap: 2%; row-gap: 2.4rem; }
  .project-sequence > * { grid-column-start: auto; grid-column-end: span 4; }
  .project-sequence > .span-3 { grid-column-end: span 3; }
  .project-sequence > .span-5 { grid-column-end: span 5; }
  .project-sequence > .span-6 { grid-column-end: span 6; }
  .project-sequence > .span-7 { grid-column-end: span 7; }
  .project-sequence > .span-8 { grid-column-end: span 8; }
  .project-sequence > .push-1 { grid-column-start: 2; }
  .project-sequence > .push-2 { grid-column-start: 3; }
  .project-sequence > .push-5 { grid-column-start: 6; }
  .project-sequence > .push-6 { grid-column-start: 7; }
  .project-sequence > .push-8 { grid-column-start: 9; }
  .project-sequence > .drop { align-self: start; margin-top: 3.2rem; }
  .project-sequence > .lift { align-self: start; }
}
.project-sequence .project-text { font-size: 1rem; }

/* a question set that fills its column beside a tall image */
.project-ask { margin-top: 1.4rem; }
.project-ask > p { margin: 0; }
.project-ask .ask-lead { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5; color: var(--clay); margin-bottom: 1rem; }
.project-ask .ask-q { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-size: clamp(1.45rem, 3.3vw, 2.45rem); line-height: 1.14; letter-spacing: -0.02em; color: var(--ink); }
.project-ask .ask-q + .ask-q { margin-top: 0.85rem; }
@media (min-width: 860px) {
  .project-sequence > .project-ask { align-self: start; margin-top: 0.2rem; }
}

/* ---- objects seen one at a time, at the size each deserves ---- */
.project-object-group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.6rem 3%; margin-top: 1.8rem; }
.project-object-group > * { flex: 1 1 260px; min-width: 0; }
.project-object-group > .obj-lg { flex: 1 1 46%; }
.project-object-group > .obj-sm { flex: 0 1 22%; }
.project-object-group > .obj-note { flex: 1 1 20rem; align-self: flex-end; }
@media (max-width: 700px) { .project-object-group > .obj-sm { flex: 1 1 44%; } }

/* ---- the quiet passage ---- */
.project-reflection { padding-top: 3.4rem; }
.project-reflection h2 { border-bottom: none; margin-bottom: 1.1rem; }
.project-reflection .lines { list-style: none; margin: 0; padding: 0; max-width: 30rem; }
.project-reflection .lines li { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.45; color: var(--soil); margin: 0 0 0.3rem; }
.project-reflection .lines li.soft { color: var(--clay); }

/* ---- what the work turned into ---- */
.project-continuation { padding-top: 3.2rem; padding-bottom: 0.4rem; }

/* ---- one object, given room, with a line beside it ---- */
.project-object-plate { padding-top: 3.8rem; padding-bottom: 1.2rem; }
.project-object-plate > .project-figure { max-width: 30rem; }
.project-object-plate .plate-line { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-size: clamp(1.2rem, 2.6vw, 1.72rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--soil); max-width: 24ch; margin: 2rem 0 0; }
@media (min-width: 900px) {
  .project-object-plate { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: end; }
  .project-object-plate > .project-figure { grid-column: 1 / 7; max-width: none; }
  .project-object-plate > .plate-line { grid-column: 8 / 13; margin: 0 0 3.2rem; }
}
/* a statement that runs the full measure */
.project-statement--wide { max-width: none; }
@media (min-width: 900px) {
  .project-opening > .project-statement--wide { grid-column: 1 / 13; }
}

/* a cut-out object needs no frame */
.project-figure--cutout img { border: none; background: none; }
/* a smaller picture set into the right of the column */
.project-figure--note { max-width: 20rem; margin-top: 2.8rem; }
@media (min-width: 900px) { .project-section > .project-figure--note { margin-left: 58%; } }

.project-pause--wide { max-width: none; }

/* ---- Encuentro Comunitario: hosting, movement, media ---- */

/* a context line that runs the full measure */
.project-context--wide { max-width: none; }
@media (min-width: 900px) { .project-opening > .project-context--wide { grid-column: 1 / 13; } }

/* text that starts level with its image instead of hanging from the baseline */
@media (min-width: 900px) {
  .project-image-text.align-top > :not(.project-figure) { align-self: start; padding-bottom: 0; }
}

/* a single word as a beat between passages, not a heading and not a card */
.project-verb {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--soil);
  margin-top: 3.4rem; margin-bottom: 2.6rem;
}

/* media given most of the content width, at its own proportions */
.project-wide-media { padding-top: 2.6rem; padding-bottom: 0.6rem; }
.project-wide-media > .project-figure + .project-figure { margin-top: 1.6rem; }
@media (min-width: 900px) {
  .project-wide-media { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: start; }
  .project-wide-media > .project-figure { grid-column: 1 / 13; }
  .project-wide-media > .project-figure + .project-figure { margin-top: 2.2rem; }
  /* two upright films sit side by side rather than stacking full width */
  .project-wide-media > .project-video { grid-column: span 6; }
  .project-wide-media > .project-video + .project-video { margin-top: 0; }
}

/* a documentary aside set into the reading column, wider than the text */
.project-figure--note-wide { margin-top: 2.4rem; max-width: none; }
@media (min-width: 900px) { .project-section > .project-figure--note-wide { max-width: none; } }

/* two photographs side by side inside a wide media block */
@media (min-width: 900px) {
  .project-wide-media.two-up > .project-figure { grid-column: span 6; }
  .project-wide-media.two-up > .project-figure + .project-figure { margin-top: 0; }
}

/* ---- Seeds and Signals: a proposition before a workshop ---- */

/* the opening question, wider and quieter than Hackeo's shouted ones */
.project-question--wide {
  max-width: var(--proj-col); font-size: clamp(1.5rem, 4.4vw, 2.6rem); font-weight: 400; line-height: 1.12;
  margin: 1.6rem auto 3.2rem;
}
@media (min-width: 900px) { .project-question--wide { padding-right: 34%; } }

/* a plate that runs nearly the full page, for the map */
.project-plate { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.project-plate > .project-figure img { border: none; }

/* ---- Computadora comunitaria: parts becoming a computer ---- */

/* the assembly line: photographs of the parts, joined by plain plus signs */
.project-assembly {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 0.9rem; margin-top: 2.2rem;
}
.project-assembly .asm-step { flex: 1 1 8rem; min-width: 0; max-width: 15rem; margin: 0; }
.project-assembly .asm-plus {
  flex: 0 0 auto; align-self: center;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.25rem; line-height: 1; color: var(--clay);
}
.project-assembly .project-caption { margin-top: 0.45rem; max-width: none; }
.project-assembly .asm-result {
  flex: 1 1 9rem; align-self: center; margin: 0; padding-left: 0.6rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400; font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--soil);
}
@media (max-width: 620px) {
  .project-assembly { gap: 0.7rem; }
  .project-assembly .asm-step { flex: 1 1 40%; max-width: none; }
  .project-assembly .asm-result { flex: 1 1 100%; padding-left: 0; margin-top: 0.4rem; }
}

/* a sketch needs to stay readable, so it is never the widest thing on the page */
.project-wide-media > .project-figure--sketch { max-width: 42rem; }
/* one finished machine, given more room than the rest */
@media (min-width: 1000px) { .project-wide-media > .project-figure--hero { max-width: 44rem; } }
/* the beat between the machines, quieter than a section heading */
.project-verb--quiet {
  font-weight: 400; text-transform: none; letter-spacing: -0.015em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin-top: 2.6rem; margin-bottom: 2rem;
}

/* an upright photograph kept to a readable size inside a wide media block */
.project-wide-media > .project-figure--upright { max-width: 32rem; }

/* a film loads nothing until someone asks for it */
.project-video video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); background: var(--bone);
}

/* an ending that does not close */
.project-open { padding-top: 4.2rem; padding-bottom: 1rem; }

@media print {
  .project-figure img { max-height: 12cm; width: auto; }
}

/* ==================== nav accents: rosa mexicano + amarillo amazónico ====================
   White ground, black wordmark and black nav text. The two accents are kept for the
   functional controls only: selected text size and selected language, plus sostener.
   ========================================================================================= */
:root { --rosa-mexicano: #E4007C; --rosa-mexicano-deep: #C2006A; --amarillo-amazonico: #F2B705; --verde-amazonico: #0B6B3A; }

/* ==================== HEADER: the index of a small publication ==============
   THE ONLY navigation block in this file. Two lines on the same near-black as
   the footer. Line one: the mark, and the two utilities named out loud in
   monospace. Line two: the three sections, flush with the mark. No pills, no
   CTA, no balanced brand row. The accents are two small sparks: pink for the
   chosen text size, yellow for the chosen language, each also carried by case
   and weight, not colour alone.

   If you are changing the header, change it HERE. Earlier navigation designs
   used to sit further up this file and were removed in September 2026; there
   is nothing above this point that styles nav.top, .nav-links, .menu-toggle,
   .mobile-menu, .size-btn or .lang-btn.
   ========================================================================= */
:root {
  --rosa-header: #FF3D9A;
  /* the wordmark, in two tones. Contrast measured on the header ground #1F1F1C:
     forest 5.09:1, maize 7.36:1, both clear of AA at this weight and size. */
  --mark-forest: #4E9E74;
  --mark-milpa:  #D9A521;
}

.skip-link {
  position: absolute; top: -60px; left: 0; z-index: 200;
  background: var(--milpa-deep); color: var(--bone);
  padding: 10px 16px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 1.05rem;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

nav.top {
  position: sticky; top: 0; z-index: 50;
  background: #1F1F1C; border-bottom: none;
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  align-items: baseline; column-gap: 0; row-gap: 9px;
  padding: 14px max(var(--s3), calc((100% - var(--col)) / 2 + var(--s3))) 13px;
}
.nav-mark, .nav-mark:visited, a.nav-mark, a.nav-mark:visited {
  grid-column: 1; grid-row: 1;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700;
  font-size: 19px; letter-spacing: 0.005em; text-transform: lowercase;
  text-decoration: none; color: #F5F5F0; margin: 0;
}

/* The wordmark is two words in two tones: tecno in forest green, milpa in maize.
   It does not move or change colour, on hover or otherwise; the focus ring below is
   the only visible state change. */
.nav-mark .nav-tecno { color: var(--mark-forest); }
.nav-mark .nav-milpa { color: var(--mark-milpa); }

/* utilities, named */
.size-controls { grid-column: 3; grid-row: 1; margin-right: 22px; }
.lang-toggle   { grid-column: 4; grid-row: 1; margin-right: 0; padding-right: 0; border-right: none; }
.size-controls, .lang-toggle {
  display: flex; align-items: baseline; gap: 4px; background: none; padding: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: 0.04em; color: #A8A8A2;
}
.size-controls::before { content: "texto: "; margin-right: 3px; }
.lang-toggle::before   { content: "idioma: "; margin-right: 3px; }
body[data-lang="en"] .size-controls::before { content: "text: "; }
body[data-lang="en"] .lang-toggle::before   { content: "language: "; }

.size-btn, .lang-btn {
  background: none; border: none; border-bottom: none; border-radius: 0; cursor: pointer;
  color: #D7D7D2; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: 0.04em; line-height: 1; padding: 0; font-weight: 400;
  text-transform: lowercase;
}
/* each letter previews the size it sets; they share a baseline */
.size-btn-1 { font-size: 12px; }
.size-btn-2 { font-size: 14.5px; }
.size-btn-3 { font-size: 17px; }
.size-btn-4 { font-size: 21px; }
.size-btn:hover, .lang-btn:hover { background: none; color: #F5F5F0; }
.size-btn[aria-pressed="true"] {
  background: none; color: var(--rosa-header); font-weight: 700; text-transform: uppercase;
}
.lang-btn[aria-pressed="true"] {
  background: none; color: var(--amarillo-amazonico); font-weight: 700; text-transform: uppercase;
}

/* the three sections, on their own line, flush left with the mark */
.nav-links {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: baseline; gap: 22px; list-style: none; margin: 0; padding: 0;
  /* the row's own type scale; the links below set their own size */
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: lowercase;
}
.nav-links a, .nav-links a:visited,
.nav-links a:not(.support), .nav-links a:not(.support):visited,
.nav-links a.support, .nav-links a.support:visited {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: 0.02em; font-weight: 400; text-transform: none;
  color: #F5F5F0; text-decoration: none; background: none;
  padding: 0; border: none; border-radius: 0;
}
.nav-links a:not(.support):hover, .nav-links a:not(.support):focus-visible,
.nav-links a.support:hover, .nav-links a.support:focus-visible {
  color: var(--amarillo-amazonico); background: none; text-decoration: none;
}
.nav-links a:not(.support):active, .nav-links a.support:active { color: var(--rosa-header); }
.nav-links a[aria-current] { font-weight: 700; }

.nav-mark:focus-visible, .nav-links a:focus-visible, .size-btn:focus-visible,
.lang-btn:focus-visible, .menu-toggle:focus-visible { outline: 2px solid #F5F5F0; outline-offset: 3px; }

/* the hamburger, hidden until the links are */
.menu-toggle {
  grid-column: 5; grid-row: 1; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 2.4rem; height: 2.4rem;              /* keep the tap target */
  padding: 4px; margin-left: 18px;
  background: none; border: none; cursor: pointer; color: var(--earth);
}
.menu-toggle span { display: block; width: 20px; height: 2px; background: #F5F5F0; }

/* the full screen menu, hidden above the fold until opened */
.mobile-menu { display: none; }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  nav.top { row-gap: 0; }
  .mobile-menu {
    display: block; position: fixed; inset: 0; z-index: 40; overflow-y: auto;
    background: #1F1F1C; padding: 120px var(--s3) var(--s4);
    transform: translateY(-100%); transition: transform 0.35s ease, visibility 0.35s;
    visibility: hidden;
  }
  .mobile-menu.open { transform: translateY(0); visibility: visible; }
}
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); padding: 0; margin: 0; }
.mobile-menu a, .mobile-menu a:visited {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: #F5F5F0; text-decoration: none; font-size: 1.5rem;
  display: block; padding: 0.5rem 0;
  border-bottom: 1px solid rgba(29, 29, 27, 0.15);  /* carried over; sits invisible on the dark panel */
}
.mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--amarillo-amazonico); }
.mobile-menu a[aria-current] { font-weight: 700; }
@media (max-width: 1100px) { .nav-links { font-size: 0.8rem; } }
@media (max-width: 600px) { .menu-toggle { width: 2rem; height: 2rem; } }
@media (max-width: 560px) {
  /* two tidy rows: mark and menu, then the two utilities underneath */
  nav.top { grid-template-columns: auto 1fr auto; row-gap: 8px; }
  .nav-mark { grid-column: 1; grid-row: 1; }
  .menu-toggle { grid-column: 3; grid-row: 1; margin-left: 0; }
  .size-controls { grid-column: 1; grid-row: 2; margin-right: 16px; }
  .lang-toggle { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
}

/* navigation for readers without JavaScript: the hamburger cannot open without
   it, so the sections are listed in the header itself at small widths */
nav.top noscript { display: none; }
@media (max-width: 1024px) {
  nav.top noscript { display: block; grid-column: 1 / -1; grid-row: 3; }
  .nav-fallback {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
    list-style: none; margin: 6px 0 0; padding: 0;
  }
  .nav-fallback a, .nav-fallback a:visited {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px; letter-spacing: 0.02em; color: #F5F5F0; text-decoration: none;
  }
  .nav-fallback a:hover, .nav-fallback a:focus-visible { color: var(--amarillo-amazonico); }
}

/* the page starts close under the header */
.project-opening { padding-top: 1.6rem; }

/* ==================== Seeds and Signals: an atlas, not an essay ============
   Its own layout: a short proposition, a drawn map, one large node photograph
   with a small one beside it, the five radios dispersing, a cluster diagram
   with no centre, and a light ending. Both drawings are inline SVG, thin
   black line on white with a single accent, so they weigh nothing and carry
   the page's ambition without a dashboard aesthetic.
   ========================================================================== */
.ss { --seed: #1F7A8C; }
.ss > * { max-width: var(--proj-col); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---- proposition ---- */
.ss-open { padding-top: 2rem; padding-bottom: 0.6rem; }
.ss-open h1 {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.025em;
  color: var(--soil); margin: 0 0 1rem;
}
.ss-line {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.15rem, 2.5vw, 1.7rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--soil); margin: 0; max-width: 34ch;
}
.ss-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem; letter-spacing: 0.08em; color: var(--clay); margin: 1.1rem 0 0;
}

/* ---- the drawings ---- */
.ss-map, .ss-clusters { margin-left: auto; margin-right: auto; padding-top: 1.4rem; padding-bottom: 0.4rem; }
.ss-map svg, .ss-clusters svg { display: block; width: 100%; height: auto; overflow: visible; }
.ss-land { fill: none; stroke: var(--soil); stroke-width: 1.1; stroke-linejoin: round; }
.ss-route path, .ss-possible path {
  fill: none; stroke: var(--clay); stroke-width: 1; stroke-dasharray: 3 5; stroke-linecap: round;
}
.ss-possible path { stroke-dasharray: 2 7; }
.ss-mesh path { fill: none; stroke: var(--soil); stroke-width: 1; }
.ss-seeds circle { fill: var(--seed); }
.ss-labels text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; fill: var(--soil); letter-spacing: 0.02em;
}
.ss-labels .ss-sub { font-size: 10px; fill: var(--clay); }
.ss-cap {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.76rem; letter-spacing: 0.03em; line-height: 1.6; color: var(--clay);
  max-width: 44ch; margin: 0.9rem 0 0;
}

/* ---- the first five: one big photograph, one small, text around them ---- */
.ss-five { padding-top: 4.2rem; }
.ss-h {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--clay); font-weight: 400; margin: 0 0 1.4rem;
}
.ss-body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.5; color: var(--soil);
  max-width: 34rem; margin: 0 0 0.9rem;
}
.ss-body--quiet { font-size: 1.02rem; color: var(--earth); }
.ss-node-photo, .ss-phone { margin: 0; }
.ss-node-photo img, .ss-phone img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--bone);
}
.ss-caption {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.74rem; letter-spacing: 0.02em; line-height: 1.65; color: var(--clay);
  margin: 0.7rem 0 0;
}
@media (min-width: 900px) {
  .ss-five {
    display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: start;
  }
  .ss-five > .ss-h { grid-column: 1 / 13; }
  .ss-five > .ss-five-text { grid-column: 1 / 6; grid-row: 2; align-self: start; padding-top: 0.3rem; }
  .ss-five > .ss-node-photo { grid-column: 6 / 13; grid-row: 2; }
  .ss-five > .ss-aside { grid-column: 1 / 4; grid-row: 3; margin-top: -14rem; }
}
@media (max-width: 899px) {
  .ss-node-photo { margin-top: 1.6rem; }
  .ss-aside { margin-top: 1.6rem; max-width: 20rem; }
}

/* ---- dispersal ---- */
.ss-scatter { padding-top: 1.6rem; padding-bottom: 1rem; }
.ss-achtli { list-style: none; margin: 0; padding: 0; }
.ss-achtli li {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(0.9rem, 2.1vw, 1.25rem); letter-spacing: 0.04em; color: var(--soil);
  line-height: 1.9;
}
.ss-achtli li:nth-child(1) { margin-left: 0; }
.ss-achtli li:nth-child(2) { margin-left: 9%; }
.ss-achtli li:nth-child(3) { margin-left: 23%; }
.ss-achtli li:nth-child(4) { margin-left: 41%; }
.ss-achtli li:nth-child(5) { margin-left: 62%; }
.ss-achtli li .n::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 4rem; height: 1px; margin-left: 0.9rem;
  background: repeating-linear-gradient(to right, var(--clay) 0 2px, transparent 2px 7px);
}
.ss-leave {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.9rem); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--soil); max-width: 28ch; margin: 2.6rem 0 0; margin-left: auto;
}
@media (max-width: 720px) {
  .ss-achtli li:nth-child(2) { margin-left: 6%; }
  .ss-achtli li:nth-child(3) { margin-left: 14%; }
  .ss-achtli li:nth-child(4) { margin-left: 24%; }
  .ss-achtli li:nth-child(5) { margin-left: 36%; }
  .ss-achtli li .n::after { width: 2rem; }
  .ss-leave { margin-left: 0; }
}

.ss-clusters { padding-top: 4rem; }

/* ---- what comes next ---- */
.ss-next { padding-top: 4.4rem; padding-bottom: 1rem; }
.ss-terms {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem; letter-spacing: 0.04em; line-height: 2.1; color: var(--earth);
  max-width: 52ch; margin: 0 0 2.6rem;
}
.ss-end {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem); line-height: 1.18; letter-spacing: -0.015em;
  color: var(--soil); max-width: 26ch; margin: 0 0 1.6rem;
}

/* ==================== Meshwork Soton: one network, many hosts =============
   Distinct from Seeds and Signals: that page disperses outward from a map,
   this one accumulates along a street. A tall photograph of the node in
   place, then large statements with short concrete text set beside or under
   them, one line diagram of hosts along a line, and the map kept small as
   evidence rather than identity.
   ========================================================================== */
.mw { --node: #2F7D6E; }
.mw > * { max-width: var(--proj-col); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.mw-open { padding-top: 2rem; padding-bottom: 1.4rem; }
.mw-open h1 {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.025em;
  color: var(--soil); margin: 0 0 1rem;
}
.mw-line {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.15rem, 2.5vw, 1.7rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--soil); margin: 0; max-width: 36ch;
}
.mw-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem; letter-spacing: 0.08em; color: var(--clay); margin: 1.1rem 0 0;
}

.mw figure { margin-top: 0; margin-bottom: 0; }
.mw img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--bone); }

/* the node in place, before any explaining */
.mw-hero-photo { padding-top: 0.6rem; }
@media (min-width: 1000px) { .mw-hero-photo img { max-width: 78%; } }

/* statements at three scales */
.mw-big {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--soil); margin: 0 0 1.6rem; max-width: 20ch;
}
.mw-big--wide { max-width: 26ch; }
.mw-mid {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--soil); margin: 0 0 1rem; max-width: 22ch;
}
.mw-body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.05rem; line-height: 1.6; color: var(--earth); max-width: 34rem; margin: 0 0 0.9rem;
}
.mw-body--quiet { color: var(--clay); }

/* the first node: statement, short text, and the street beside it */
.mw-first { padding-top: 3.6rem; }
@media (min-width: 900px) {
  .mw-first { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: start; }
  .mw-first > .mw-big { grid-column: 1 / 9; }
  .mw-first > .mw-first-text { grid-column: 1 / 7; grid-row: 2; }
  .mw-first > .mw-street { grid-column: 8 / 13; grid-row: 1 / 3; margin-top: 0.4rem; }
}
@media (max-width: 899px) { .mw-street { margin-top: 1.6rem; } }

/* what hosting actually is */
.mw-host { padding-top: 4.4rem; }
.mw-what { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.mw-what li {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.05rem; line-height: 1.55; color: var(--earth);
  padding: 0.7rem 0 0.7rem 2.4rem; border-top: 1px solid var(--line); position: relative;
}
.mw-what li:last-child { border-bottom: 1px solid var(--line); }
.mw-what li::before {
  content: ""; position: absolute; left: 0.3rem; top: 1.25rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--node);
}

/* the node itself, with its terms alongside rather than in a table */
.mw-kit { padding-top: 4.2rem; }
@media (min-width: 900px) {
  .mw-kit { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: end; }
  .mw-kit > .mw-kit-photo { grid-column: 1 / 8; }
  .mw-kit > .mw-annot { grid-column: 9 / 13; padding-bottom: 1.2rem; }
}
@media (max-width: 899px) { .mw-annot { margin-top: 1.4rem; } }
.mw-annot-lead {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; line-height: 1.55; color: var(--earth); margin: 0 0 1.2rem;
}
.mw-terms { list-style: none; margin: 0; padding: 0; }
.mw-terms li {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--soil); line-height: 2.1;
}
.mw-terms li::before { content: "\2014\00a0\00a0"; color: var(--clay); }

/* the printed sheet, given its own moment */
.mw-sign { padding-top: 4.2rem; }
@media (min-width: 900px) {
  .mw-sign { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: center; }
  .mw-sign > .mw-sign-photo { grid-column: 1 / 7; }
  .mw-sign > .mw-sign-text { grid-column: 8 / 13; }
}
@media (max-width: 899px) { .mw-sign-text { margin-top: 1.4rem; } }

/* hosts along a line */
.mw-grow { padding-top: 4.6rem; }
.mw-grow svg { display: block; width: 100%; height: auto; overflow: visible; }
.mw-hop path { fill: none; stroke: var(--clay); stroke-width: 1; stroke-dasharray: 3 5; stroke-linecap: round; }
.mw-stem path { fill: none; stroke: var(--line); stroke-width: 1; }
.mw-dot circle { fill: var(--node); }
.mw-dot-open { fill: none; stroke: var(--clay); stroke-width: 1.2; stroke-dasharray: 2 3; }
.mw-place text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; fill: var(--soil); letter-spacing: 0.02em;
}
.mw-cap {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.76rem; letter-spacing: 0.03em; line-height: 1.6; color: var(--clay);
  max-width: 44ch; margin: 1rem 0 0;
}

/* the app map, small, as evidence */
.mw-evidence { padding-top: 3.6rem; }
.mw-map { max-width: 15rem; }
.mw-map .mw-cap { max-width: none; }

.mw-next { padding-top: 4.6rem; padding-bottom: 0.6rem; }

/* ---------- Meshwork Soton: walking the corridor, local making, three-stage growth ---------- */

/* testing where the mesh could live */
.mw-route { padding-top: 4.2rem; }
.mw-route .mw-body { max-width: 46rem; margin-top: 1.1rem; }
.mw-corridor { margin-top: 2.2rem; }
.mw-corridor svg { display: block; width: 100%; height: auto; overflow: visible; }
.mw-built path, .mw-built rect, .mw-built circle { fill: none; stroke: var(--line); stroke-width: 1; }
.mw-pred { fill: none; stroke: var(--clay); stroke-width: 1; stroke-dasharray: 2 4; }
.mw-walk { fill: none; stroke: var(--node); stroke-width: 1.6; stroke-linecap: round; }
.mw-mark circle { fill: var(--bone); stroke: var(--node); stroke-width: 1.2; }
.mw-node-fixed { fill: var(--node); }
.mw-node-open { fill: none; stroke: var(--clay); stroke-width: 1.2; stroke-dasharray: 2 3; }
.mw-legend text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; fill: var(--clay); letter-spacing: 0.03em;
}

/* the enclosure heading sits above the photograph and its terms */
.mw-kit > .mw-big { margin-bottom: 1.8rem; }
@media (min-width: 900px) {
  .mw-kit > .mw-big { grid-column: 1 / 10; grid-row: 1; }
  .mw-kit > .mw-kit-photo { grid-row: 2; }
  .mw-kit > .mw-annot { grid-row: 2; }
}

/* three stages: mobile testing, one settled host, open growth */
.mw-stage text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; fill: var(--clay); letter-spacing: 0.08em; text-transform: lowercase;
}
.mw-div { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 6; }
.mw-drift { fill: none; stroke: var(--clay); stroke-width: 1.2; stroke-dasharray: 5 5; stroke-linecap: round; }
.mw-dot-move circle { fill: var(--bone); stroke: var(--node); stroke-width: 1.4; }
.mw-ground { fill: none; stroke: var(--line); stroke-width: 1; }
.mw-stem-open path { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }

/* diagram labels are drawn in svg user units, so they shrink with the drawing:
   step them up as the viewport narrows to keep them readable */
@media (max-width: 899px) {
  .mw-stage text, .mw-place text, .mw-legend text { font-size: 15px; }
}
@media (max-width: 599px) {
  .mw-corridor, .mw-grow { overflow-x: auto; }
  .mw-corridor svg, .mw-grow svg { min-width: 460px; }
  .mw-stage text, .mw-place text, .mw-legend text { font-size: 24px; }
}

/* ---------- Semillas y Señales: maize varieties as a dispersed visual system ---------- */
/* each ear is a distinct North American variety; they mark, anchor and disperse,
   they do not decorate. absolute ones sit inside the column so nothing overflows. */
.ss-open, .ss-map, .ss-five, .ss-clusters, .ss-next { position: relative; }
.mz {
  position: absolute; display: block; width: auto; height: auto;
  pointer-events: none; user-select: none; z-index: 1;
}
.mz--open   { top: 1.8rem;  right: 4%;  height: 5.6rem; }
.mz--map-a  { left: 5%;     bottom: 12%; height: 13%; }
.mz--map-b  { right: 7%;    top: 44%;    height: 22%; }
.mz--five   { left: 30%;    bottom: 0;   height: 7.5rem; }
.mz--cl-a   { right: 5%;    top: 4%;     height: 26%; }
.mz--cl-b   { left: 9%;     bottom: 14%; height: 17%; }
.mz--next   { right: 6%;    top: 0.4rem; height: 8.5rem; }

/* the five nodes that left the gathering, each a different variety */
.mz-mark {
  position: static; display: inline-block; height: 2.7rem; width: auto;
  vertical-align: -0.95em; margin-right: 0.9rem;
}
/* the five are not the same size any more than they are the same variety */
.ss-achtli li:nth-child(1) .mz-mark { height: 3.1rem; vertical-align: -1.1em; }
.ss-achtli li:nth-child(3) .mz-mark { height: 2.4rem; vertical-align: -0.8em; }
.ss-achtli li:nth-child(5) .mz-mark { height: 2.9rem; vertical-align: -1.05em; }

/* a hairline carrying a few kernels, used twice as a quiet divider */
.ss-seedrule { position: relative; padding-top: 3.2rem; padding-bottom: 0.4rem; }
.ss-seedrule--b { padding-top: 4rem; }
.ss-seedrule svg { display: block; width: 100%; height: 14px; }
.ss-seedrule path { fill: none; stroke: var(--line); stroke-width: 1; }
.ss-seedrule .k {
  position: absolute; bottom: 0.4rem; width: 9px; height: 11px; border-radius: 46% 46% 40% 40%;
  border: 1px solid var(--soil);
}
.ss-seedrule .k1 { left: 12%; background: #4A2851; }
.ss-seedrule .k2 { left: 41%; background: #D8A227; }
.ss-seedrule .k3 { left: 78%; background: #EFE6D2; }
.ss-seedrule .k4 { left: 24%; background: #8C2F27; }
.ss-seedrule .k5 { left: 63%; background: #33456F; }

@media (max-width: 899px) {
  /* keep only the markers and the dividers: the column has no margins to disperse into */
  .mz--open, .mz--five, .mz--next { display: none; }
  .mz--map-a { left: 3%; bottom: 16%; height: 12%; }
  .mz--map-b { right: 4%; top: 46%; height: 18%; }
  .mz--cl-a  { right: 3%; top: 2%; height: 22%; }
  .mz--cl-b  { left: 6%; bottom: 18%; height: 15%; }
  .mz-mark   { height: 1.9rem; margin-right: 0.6rem; vertical-align: -0.7em; }
  .ss-achtli li:nth-child(1) .mz-mark { height: 2.2rem; vertical-align: -0.8em; }
  .ss-achtli li:nth-child(3) .mz-mark { height: 1.7rem; vertical-align: -0.6em; }
  .ss-achtli li:nth-child(5) .mz-mark { height: 2.1rem; vertical-align: -0.78em; }
}

/* ================= Milpa y Minga: an exchange becoming material =================
   two scales: between places (Morelos and Maguaré) and inside the system
   (panel, controller, battery, household). distinct from .ss dispersion
   and .mw embedding: here the figure is a gap being crossed.            */
.mm { --morelos: #8A5A2B; --maguare: #2F6B4F; }
.mm > * { max-width: var(--proj-col); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.mm figure { margin-top: 0; margin-bottom: 0; }
.mm img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--bone); }
.mm svg { display: block; width: 100%; height: auto; overflow: visible; }

.mm-open { padding-top: 2rem; padding-bottom: 0.6rem; }
.mm-open h1 {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 6.4vw, 4.1rem); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--soil); margin: 0 0 1.1rem; max-width: 16ch;
}
.mm-line {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.15rem, 2.5vw, 1.6rem); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--soil); max-width: 34ch; margin: 0 0 1.6rem;
}
.mm-intro {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.05rem; line-height: 1.6; color: var(--earth); max-width: 46rem; margin: 0 0 1.6rem;
}
.mm-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.76rem; letter-spacing: 0.09em; text-transform: lowercase; color: var(--clay); margin: 0;
}

.mm-big {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.45rem, 3.6vw, 2.35rem); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--soil); margin: 0 0 1.2rem; max-width: 20ch;
}
.mm-big--wide { max-width: 28ch; }
.mm-huge {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400;
  font-size: clamp(1.9rem, 5.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.028em;
  color: var(--soil); margin: 0 0 1.4rem; max-width: 17ch;
}
.mm-mid {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.2rem, 2.7vw, 1.7rem); line-height: 1.3; letter-spacing: -0.014em;
  color: var(--soil); max-width: 34ch; margin: 0 0 1.4rem;
}
.mm-body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.05rem; line-height: 1.6; color: var(--soil); max-width: 42rem; margin: 0 0 0.9rem;
}
.mm-body--quiet { color: var(--earth); }

/* ---- between the two places: hairlines crossing the gap ---- */
.mm-between { padding-top: 4.6rem; }
.mm-poles { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.4rem; }
.mm-pole {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(0.86rem, 2vw, 1.05rem); letter-spacing: 0.08em; margin: 0;
}
.mm-pole--a { color: var(--morelos); }
.mm-pole--b { color: var(--maguare); }
.mm-carried { list-style: none; margin: 0; padding: 0; }
.mm-carried li {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(0.95rem, 2.1vw, 1.18rem); color: var(--soil);
  padding: 0.55rem 0;
}
.mm-carried li::before, .mm-carried li::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--line);
}
.mm-carried li::before { background: linear-gradient(to right, rgba(138,90,43,0.55), var(--line)); }
.mm-carried li::after  { background: linear-gradient(to left,  rgba(47,107,79,0.55), var(--line)); }
.mm-note {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.05rem; line-height: 1.6; color: var(--earth);
  max-width: 40rem; margin: 2.2rem 0 0; margin-left: auto;
}

/* ---- the fork: what was explored, what was prioritised ---- */
.mm-listen { padding-top: 5rem; }
.mm-listen .mm-body { margin-bottom: 1.8rem; }
.mm-stop { fill: none; stroke: var(--clay); stroke-width: 1; stroke-dasharray: 3 6; }
.mm-go { fill: none; stroke: var(--maguare); stroke-width: 1.7; }
.mm-open-dot { fill: none; stroke: var(--clay); stroke-width: 1.2; stroke-dasharray: 2 3; }
.mm-node { fill: var(--maguare); }
.mm-glabel text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px; fill: var(--clay); letter-spacing: 0.03em;
}

/* ---- what it became: counts and household marks ---- */
.mm-material { padding-top: 5rem; }
.mm-counts { list-style: none; margin: 0 0 2.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 2.6rem; }
.mm-counts li {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem; letter-spacing: 0.06em; color: var(--clay); line-height: 1.2;
}
.mm-counts .n {
  display: block; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.2rem); letter-spacing: -0.04em;
  color: var(--soil); line-height: 1;
}
.mm-houses { margin-bottom: 1.8rem; }
.mm-house path { fill: none; stroke: var(--soil); stroke-width: 1.3; stroke-linejoin: round; }
.mm-maloca path { fill: none; stroke: var(--maguare); stroke-width: 1.6; stroke-linejoin: round; }

/* ---- who decides ---- */
.mm-gov { padding-top: 5rem; }
.mm-decide { margin-top: 2.2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 1.1rem 1.4rem 1.4rem; max-width: 44rem; }
.mm-decide-who {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem; letter-spacing: 0.08em; color: var(--maguare); margin: 0 0 0.9rem;
}
.mm-decide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.mm-decide li {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.02rem; color: var(--soil);
}

/* ---- assembling: photograph and the chain inside the system ---- */
.mm-make { padding-top: 5.2rem; }
.mm-kit-photo { margin-top: 1.4rem; }
.mm-make-text { margin-top: 1.6rem; }
.mm-chain { margin-top: 3.2rem; }
.mm-flow path { fill: none; stroke: var(--clay); stroke-width: 1; }
.mm-part path, .mm-part rect, .mm-part circle {
  fill: none; stroke: var(--soil); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
}
.mm-verbs {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.76rem; letter-spacing: 0.08em; color: var(--clay); margin: 1.4rem 0 0;
}
@media (min-width: 900px) {
  .mm-make { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: start; }
  .mm-make > .mm-big { grid-column: 1 / 10; }
  .mm-make > .mm-kit-photo { grid-column: 1 / 8; grid-row: 2; }
  .mm-make > .mm-make-text { grid-column: 9 / 13; grid-row: 2; }
  .mm-make > .mm-chain { grid-column: 1 / 13; grid-row: 3; }
}

/* ---- what stays ---- */
.mm-stay { padding-top: 5.4rem; }
.mm-place-photo { margin-top: 2rem; max-width: 22rem; }
@media (min-width: 900px) {
  .mm-stay { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2%; align-items: end; }
  .mm-stay > .mm-huge { grid-column: 1 / 9; }
  .mm-stay > .mm-body { grid-column: 1 / 7; grid-row: 2; }
  .mm-stay > .mm-place-photo { grid-column: 9 / 13; grid-row: 1 / 3; max-width: none; align-self: end; }
}

.mm-meaning { padding-top: 5.4rem; }
.mm-meaning .mm-body { max-width: 40rem; margin-left: auto; }

/* ---- what can travel onwards ---- */
.mm-onward { padding-top: 5.4rem; padding-bottom: 1rem; }
.mm-seed { margin-top: 2.4rem; border-top: 2px solid var(--soil); padding-top: 1.1rem; max-width: 40rem; }
.mm-seed-id {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.74rem; letter-spacing: 0.12em; color: var(--clay); margin: 0 0 0.5rem;
}
.mm-seed-title {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700;
  font-size: 1.3rem; line-height: 1.2; color: var(--soil); margin: 0 0 0.5rem;
}
.mm-seed-desc {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; line-height: 1.55; color: var(--earth); margin: 0 0 1rem;
}
.mm-seed-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.mm-seed-links a {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8rem; letter-spacing: 0.03em; color: var(--soil); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.mm-seed-links a:hover, .mm-seed-links a:focus-visible { border-bottom-color: var(--maguare); color: var(--maguare); }

/* diagram labels are svg user units: step them up as the drawing shrinks */
@media (max-width: 899px) {
  .mm-glabel text { font-size: 17px; }
}
@media (max-width: 599px) {
  .mm-fork, .mm-houses, .mm-chain { overflow-x: auto; }
  .mm-fork svg, .mm-houses svg, .mm-chain svg { min-width: 480px; }
  .mm-glabel text { font-size: 22px; }
  .mm-poles { margin-bottom: 1rem; }
  .mm-carried li { gap: 0.6rem; }
}