/* ============================================================
   ShouldBeAutomatic — styles.css
   Concept: tangle → line. Warm gray is the mess, sunset
   orange is the resolved path. Keep those two roles separate
   everywhere.
   ============================================================ */

/* ------------------------------------------------------------
   1. Custom properties
   ------------------------------------------------------------ */
:root {
  --ink: #16191D;          /* near-black, primary text */
  --paper: #FFFFFF;        /* page background */
  --wash: #F6F0EA;         /* alternating section background, card fills */
  --tangle: #A39A92;       /* the "mess" — hairlines, diagram tangle only */
  --tangle-ink: #5C544D;   /* darker tangle for actual text (7.4:1 on white) */
  --line: #C2410C;         /* the resolved path — deep sunset orange;
                              accent, links, buttons (5.2:1 on white) */
  --line-bright: #CC4710;  /* hover / active only (4.7:1 both directions) */
  --error: #B42318;        /* form errors — always paired with text */

  --on-line: #FFFFFF;      /* text sitting on the accent (buttons, skip link) */
  --field-border: #82786F; /* input borders (≥3:1 non-text contrast) */
  --hairline: 1px solid rgba(163, 154, 146, 0.3);
  color-scheme: light;

  --font-display: 'Archivo', sans-serif;
  --font-body: 'Public Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --content-max: 1120px;
  --section-pad: 96px;
  --nav-height: 64px;
}

/* Dark mode — sunset after dark. Same two roles, deeper sky.
   The accent brightens so it reads on the dark ground, and
   text on the accent flips to ink (white would fail AA there). */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #ECE7E1;
    --paper: #1A1713;
    --wash: #221E19;
    --tangle: #6E675F;
    --tangle-ink: #BDB5AC;
    --line: #E8763C;         /* 6.0:1 on --paper */
    --line-bright: #F0824A;  /* hover / active only, 6.8:1 */
    --on-line: #1A1713;      /* 6.0:1 on --line */
    --error: #F2695C;        /* 5.9:1 on --paper */
    --field-border: #857B72;
    --hairline: 1px solid rgba(179, 170, 161, 0.22);
  }
}

/* ------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body { font-size: 19px; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }

p { margin: 0 0 1em; }

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

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

/* Visible keyboard focus — never removed, only replaced */
:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 2px;
}

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

/* Skip link — first focusable element */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--line);
  color: var(--on-line);
  padding: 10px 16px;
  border-radius: 0 0 4px 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--on-line); }

/* ------------------------------------------------------------
   3. Shared utilities
   ------------------------------------------------------------ */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow { max-width: 780px; }

/* Mono eyebrow — the "systems" voice, used sparingly */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tangle-ink);
  margin: 0 0 1.25em;
}

/* Buttons */
.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 12px 26px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}

.button-primary {
  background: var(--line);
  color: var(--on-line);
}
.button-primary:hover { background: var(--line-bright); color: var(--on-line); }
.button-primary:disabled { opacity: 0.7; cursor: default; }

.text-link {
  font-weight: 500;
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* Sections */
.section {
  padding: var(--section-pad) 0;
}

.section-ruled { border-top: var(--hairline); }

.section-wash { background: var(--wash); }

.section-subhead {
  color: var(--tangle-ink);
  max-width: 46ch;
  margin-bottom: 2em;
}

/* Direct line above the contact form */
#contact .section-subhead { margin-bottom: 0.6em; }

.contact-direct {
  color: var(--tangle-ink);
  margin-bottom: 2.4em;
}
.contact-direct a { font-weight: 600; }

/* Anchor offset for the sticky nav */
section[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

@media (max-width: 720px) {
  :root { --section-pad: 64px; }
}

/* ------------------------------------------------------------
   4. Nav
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--hairline);
}

/* Barely-there shadow, only once scrolled */
.site-header.scrolled {
  box-shadow: 0 1px 6px rgba(22, 25, 29, 0.06);
}

.nav {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Wordmark — one text node; the color break separates the words */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark .wm-accent { color: var(--line); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}
.nav-links a:hover { color: var(--line); }

.nav-links .nav-cta {
  color: var(--on-line);
  font-size: 1rem;
  padding: 9px 20px;
}
.nav-links .nav-cta:hover { color: var(--on-line); }

/* Phone + email inside the mobile menu; hidden in the desktop row */
.nav-direct { display: none; }

/* Mobile: simple toggle, no theatrics */
.nav-toggle {
  display: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: none;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  padding: 8px 14px;
  color: var(--ink);
  cursor: pointer;
}

/* Collapse before the links + CTA stop fitting on one row (~880px) */
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
    padding: 8px 0 20px;
  }
  .nav-links.open { display: flex; }

  .nav-direct {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-top: 14px;
    border-top: var(--hairline);
  }
  .nav-links .nav-direct a {
    color: var(--line);
    font-weight: 600;
    font-size: 0.95rem;
  }
}

/* ------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------ */
.hero {
  padding: 80px 0 var(--section-pad);
}

.hero-lede {
  font-size: 1.35rem;
  font-weight: 600;
  max-width: 40ch;
  margin-top: 0.5em;
}

.hero-body {
  color: var(--tangle-ink);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 2em 0 0;
}

/* Direct contact — the fast lane past the form */
.hero-contact {
  margin: 1.6em 0 0;
  font-size: 0.95rem;
  color: var(--tangle-ink);
}
.hero-contact a { font-weight: 600; }

/* ------------------------------------------------------------
   6. Hero diagram — the one bold thing on the page
   ------------------------------------------------------------ */
.hero-diagram {
  margin: 64px 0 0;
}

.hero-diagram svg {
  display: block;
  width: 100%;
}

.diagram-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tangle-ink);
}

.tangle-path {
  fill: none;
  stroke: var(--tangle);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* finished state is the default */
}

.node {
  fill: var(--paper);
  stroke: var(--tangle);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.node-labels text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px; /* SVG user units — scales with the viewBox */
  letter-spacing: 0.08em;
  fill: var(--tangle-ink);
}

.line-path {
  stroke: var(--line);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* finished state is the default */
}

.line-node { fill: var(--line); }

.line-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  fill: var(--line);
}

/* Animation only when motion is welcome. Base styles above are
   the finished state, so reduced-motion users see it instantly. */
@media (prefers-reduced-motion: no-preference) {
  .tangle-path {
    animation: draw-in 0.35s steps(6, end) both;
  }
  .t1 { animation-delay: 0s; }
  .t2 { animation-delay: 0.04s; }
  .t3 { animation-delay: 0.08s; }
  .t4 { animation-delay: 0.12s; }
  .t5 { animation-delay: 0.16s; }
  .t6 { animation-delay: 0.2s; }
  .t7 { animation-delay: 0.24s; }
  .t8 { animation-delay: 0.27s; }

  .line-path {
    animation: draw-in 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.62s both;
  }

  .line-end {
    animation: fade-in 0.3s ease-out 1.6s both;
  }
}

@keyframes draw-in {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Narrow screens: bigger labels and a heavier line so the
   diagram simplifies instead of turning into unreadable fuzz. */
@media (max-width: 640px) {
  .node-labels text, .line-label {
    font-size: 24px;
    letter-spacing: 0.05em;
  }
  .line-path { stroke-width: 3; }
}

/* ------------------------------------------------------------
   7. Sound familiar? — quotes
   ------------------------------------------------------------ */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

@media (max-width: 900px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-card {
  margin: 0;
  background: var(--wash);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.quote-card blockquote { margin: 0; }
.quote-card blockquote p { margin: 0; font-size: 1.05rem; }

.quote-card figcaption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tangle-ink);
}

/* The pull quote — where the wordmark becomes a sentence.
   Give it room, don't decorate it. */
.pull-quote-block {
  margin-top: 88px;
  text-align: center;
}

.pull-quote {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  max-width: 24em;
  margin: 0 auto 1em;
}

.pull-quote .accent {
  font-style: normal;
  color: var(--line);
}

.pull-quote-note {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tangle-ink);
  margin: 0;
}

/* ------------------------------------------------------------
   8. What we build
   ------------------------------------------------------------ */
.build-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 8px;
}

@media (max-width: 980px) { .build-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .build-grid { grid-template-columns: 1fr; } }

.build-item h3 { margin-bottom: 0.4em; }
.build-item p { margin: 0; color: var(--tangle-ink); font-size: 1rem; }

/* Worked example flow — same resolved-line language as the hero */
.flow-block { margin-top: 80px; }

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.flow li {
  position: relative;
  padding-top: 30px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--ink);
}

/* the resolved path */
.flow li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--line);
}
.flow li:first-child::before { left: 50%; }
.flow li:last-child::before { right: 50%; }

/* the nodes */
.flow li::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line);
}

/* Mobile: stack vertically, line runs down the left */
@media (max-width: 760px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 320px;
  }

  .flow li {
    padding: 0 0 0 32px;
    text-align: left;
  }

  .flow li::before {
    top: -24px;
    bottom: -1px;
    left: 5px;
    right: auto;
    width: 2.5px;
    height: auto;
  }
  .flow li:first-child::before { top: 8px; left: 5px; }
  .flow li:last-child::before { bottom: auto; height: 32px; }
  .flow li:first-child:last-child::before { display: none; }

  .flow li::after {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

.flow-caption {
  margin: 40px 0 0;
  color: var(--tangle-ink);
  font-size: 1rem;
}

/* ------------------------------------------------------------
   9. How it works
   ------------------------------------------------------------ */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
  max-width: 720px;
}

.step {
  counter-increment: step;
  position: relative;
  padding-left: 64px;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--line);
}

.step h3 { margin-bottom: 0.35em; }
.step p { margin: 0; color: var(--tangle-ink); }

.steps-closing {
  margin: 48px 0 0;
  font-weight: 600;
  max-width: 720px;
}

/* ------------------------------------------------------------
   10. Where we stand
   ------------------------------------------------------------ */
.mission-text {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 500;
  line-height: 1.55;
  max-width: 34em;
  margin-bottom: 1.2em;
}

/* ------------------------------------------------------------
   11. About
   ------------------------------------------------------------ */
.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 8px;
}

@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 220px; }
}

/* Photo slot — a wash block with the tangle-to-line mark
   until a real photo exists */
.portrait {
  aspect-ratio: 1;
  background: var(--wash);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait svg {
  width: 44%;
  height: auto;
}
.portrait .glyph-tangle { stroke: var(--tangle); }
.portrait .glyph-line { stroke: var(--line); }

.about-copy p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   12. Forms (shared)
   ------------------------------------------------------------ */
form { margin-top: 8px; }

.field { margin-bottom: 22px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

.field-half { max-width: 340px; }

/* Labels — mono, the systems voice */
.field label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 8px;
}

.label-note { color: var(--tangle-ink); text-transform: none; letter-spacing: 0.04em; }

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field-border);
  border-radius: 4px;
  padding: 11px 14px;
  line-height: 1.5;
}

.field textarea { resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--tangle-ink); opacity: 1; }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 1px;
}

/* Errors — text + border, never color alone */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border: 2px solid var(--error);
}

.field-error {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--error);
}

/* Status messages (aria-live region) */
.form-status:not(:empty) { margin: 8px 0 24px; }

.form-status .status-success {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.form-status .status-error {
  margin: 0;
  color: var(--error);
}

/* Honeypot — off-screen, not display:none, so bots still fill it */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------
   13. Feedback — visually lighter, clearly secondary
   ------------------------------------------------------------ */
.section-feedback { padding: 72px 0; }

.feedback-panel { max-width: 520px; }

.feedback-panel h2 { font-size: 1.5rem; }

.feedback-panel .section-subhead {
  font-size: 1rem;
  margin-bottom: 1.5em;
}

.feedback-panel .button { font-size: 1rem; padding: 10px 22px; }

.feedback-panel .field input,
.feedback-panel .field textarea,
.feedback-panel .field select { background: var(--paper); }

/* ------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------ */
.site-footer {
  border-top: var(--hairline);
  padding: 48px 0 56px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--tangle-ink);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.wordmark-small { font-size: 1rem; }

.footer-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-meta a { color: var(--line); text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; }

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--tangle-ink);
  text-decoration: none;
  text-transform: uppercase;
}
.footer-nav a:hover { color: var(--line); }

.footer-quip { margin: 0; }
.footer-copyright { margin: 0; }

/* ------------------------------------------------------------
   15. Reduced motion — no animation, no smooth scroll
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
}