/* Chip Route House — interior pages (about, contact, legal) */

.article { padding: var(--s-8) 0; }

.article__body { max-width: 72ch; }
.article__body h2 { margin-top: var(--s-7); }
.article__body h2:first-child { margin-top: 0; }
.article__body h3 { margin-top: var(--s-5); }
.article__body p,
.article__body li { color: var(--ink-soft); }
.article__body strong { color: var(--ink); font-weight: 600; }

.article__body ul,
.article__body ol { padding-left: 1.2em; }

.updated {
  font-size: 0.84rem;
  color: var(--ink-quiet);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}

.figure-block {
  margin: var(--s-6) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.figure-block img { width: 100%; }
.figure-block figcaption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--ink-quiet);
}

.figure-block--inset { max-width: 520px; }

.callout {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.callout h3 { margin-top: 0; font-size: 1.05rem; }
.callout p:last-child { margin-bottom: 0; }

.band {
  background: var(--surface-sunk) url("/assets/band-cream.jpg") center / cover no-repeat;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-8) 0;
}
.band h2 { margin-bottom: var(--s-5); }

.plain-table { margin: var(--s-5) 0; font-size: 0.93rem; }
.plain-table caption {
  text-align: left;
  font-size: 0.78rem;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.11em;
  color: var(--ink-quiet);
  padding-bottom: var(--s-3);
}
.plain-table th,
.plain-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px var(--s-4) 10px 0;
  border-bottom: 1px solid var(--line);
}
.plain-table thead th {
  font-size: 0.76rem;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.09em;
  color: var(--ink-quiet);
  font-weight: 600;
}
.plain-table tbody th { font-weight: 500; color: var(--ink); width: 34%; }
.plain-table td { color: var(--ink-soft); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.contact-grid > :last-child { grid-column: 1 / -1; }
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s-5);
}
.contact-card h3 { font-size: 1.02rem; margin-bottom: var(--s-2); }
.contact-card p { font-size: 0.93rem; color: var(--ink-soft); }
.contact-card a { font-weight: 500; }

.contact-form {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s-6);
  max-width: 620px;
}
.field { margin-bottom: var(--s-5); }
.field:last-of-type { margin-bottom: var(--s-6); }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px var(--s-3);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field .hint { display: block; font-size: 0.8rem; color: var(--ink-quiet); margin-top: var(--s-2); }

button.cta {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.svg-figure {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
}

.gap-top { margin-top: var(--s-5); }
.gap-top-lg { margin-top: var(--s-7); }

.form-note { font-size: 0.85rem; color: var(--ink-quiet); margin-top: var(--s-4); max-width: 60ch; }

@media (max-width: 720px) {
  .article { padding: var(--s-7) 0; }
  .contact-form { padding: var(--s-5); }
  .plain-table thead { display: none; }
  .plain-table tbody th,
  .plain-table tbody td { display: block; width: auto; padding-right: 0; }
  .plain-table tbody th { border-bottom: 0; padding-bottom: 2px; }
}