/* ─────────────────────────────────────────────────────────────
   threshold.css — styles for threshold-advisory.html
   Drop in alongside your existing styles.css. This file owns
   only the Threshold Advisory page; everything is namespaced
   under .ta-page so it doesn't bleed into index.html / about.html.

   Palette
     paper   #f4ede1   parchment
     ink     #231f1a   deep ink
     accent  #c9863b   amber
     muted   #5b4636   earth
   ───────────────────────────────────────────────────────────── */

:root {
  --ta-paper: #f4ede1;
  --ta-ink: #231f1a;
  --ta-accent: #c9863b;
  --ta-muted: #5b4636;

  /* derived */
  --ta-ink-12: rgba(35, 31, 26, 0.12);
  --ta-ink-14: rgba(35, 31, 26, 0.14);
  --ta-ink-55: rgba(35, 31, 26, 0.55);
  --ta-accent-04: rgba(201, 134, 59, 0.04);
  --ta-accent-12: rgba(201, 134, 59, 0.12);
  --ta-accent-40: rgba(201, 134, 59, 0.40);
  --ta-accent-55: rgba(201, 134, 59, 0.55);
  --ta-accent-60: rgba(201, 134, 59, 0.60);
}

/* page surface — radial wash from the top, parchment behind */
.ta-page {
  margin: 0;
  padding: 11rem 2rem 6rem;
  min-height: 100vh;
  color: var(--ta-ink);
  background:
    radial-gradient(ellipse at 50% 0%,
      var(--ta-accent-12) 0%,
      var(--ta-paper) 55%);
  font-family: "Lato", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

/* reading column */
.ta-page .ta-readable {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* eyebrow ("Tim Mansfield · Advisory") */
.ta-page .ta-eyebrow {
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ta-ink-55);
  margin: 0 0 1.6rem;
}

/* H1 — Baskervville, big, sat over the wash */
.ta-page h1 {
  font-family: "Baskervville", "Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 4.4rem;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ta-ink);
  margin: 0 0 2.2rem;
  padding-bottom: 0;
}

/* H2 — italic Baskervville for sectional voice */
.ta-page h2 {
  font-family: "Baskervville", "Baskerville", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ta-ink);
  margin: 0 0 1.4rem;
}

/* body paragraphs */
.ta-page p {
  margin: 0 0 1.15em;
}

/* lead paragraph (the resolve at the end of the opening section) */
.ta-page .ta-lead {
  font-size: 1.18rem;
  font-weight: 300;
}

/* drop cap on the opening paragraph */
.ta-page .ta-dropcap::first-letter {
  float: left;
  font-family: "Baskervville", "Baskerville", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 5.2rem;
  line-height: 0.85;
  margin: 0.06em 0.12em 0 0;
  color: var(--ta-accent);
}

/* the callout — "This is the work." — large amber italic, centered, with air */
.ta-page .ta-callout {
  font-family: "Baskervville", "Baskerville", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.25;
  color: var(--ta-accent);
  text-align: center;
  margin: 3.5rem 0;
}

/* hairline "crossing" between sections */
.ta-page .ta-rule {
  width: 100%;
  height: 1px;
  background: var(--ta-ink-12);
  border: 0;
  margin: 5rem auto;
}

.ta-page .ta-rule.ta-rule-minor {
  width: 5rem;
  height: 1px;
  background: var(--ta-accent-60);
  margin: 4rem auto;
}

/* links — amber, underlined with a soft amber rule */
.ta-page a {
  color: var(--ta-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--ta-accent-40);
  transition: border-color 0.2s;
}

.ta-page a:hover {
  border-bottom-color: var(--ta-accent);
}

/* testimonials */
.ta-page .ta-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  margin: 3rem 0;
  padding: 3rem 0;
  border-top: 1px solid var(--ta-ink-14);
  border-bottom: 1px solid var(--ta-ink-14);
}

.ta-page .ta-quote::before {
  content: "\201C";
  display: block;
  font-family: "Baskervville", "Baskerville", Georgia, serif;
  font-size: 3.2rem;
  line-height: 0.7;
  color: var(--ta-accent-55);
  margin-bottom: 0.4rem;
}

.ta-page .ta-quote blockquote {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
}

.ta-page .ta-quote blockquote em,
.ta-page .ta-quote blockquote p {
  font-style: italic;
}

.ta-page .ta-quote blockquote p {
  margin: 0 0 1em;
}

.ta-page .ta-quote .ta-author {
  display: block;
  margin-top: 1rem;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ta-ink-55);
}

.ta-page .ta-quote .ta-author a {
  color: inherit;
  border-bottom-color: var(--ta-ink-12);
}

.ta-page .ta-quote .ta-author .ta-author-role {
  text-transform: none;
  letter-spacing: 0.04em;
}

/* contact form */
.ta-page form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.ta-page form label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-muted);
  margin-top: 0.6rem;
}

.ta-page form input,
.ta-page form textarea {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ta-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ta-ink-12);
  padding: 0.4rem 0;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}

.ta-page form input:focus,
.ta-page form textarea:focus {
  border-bottom-color: var(--ta-accent);
}

.ta-page form button {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.55rem 1.4rem;
  font-family: "Lato", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-paper);
  background: var(--ta-accent);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.ta-page form button:hover {
  background: var(--ta-muted);
}

.ta-cta-link {
  font-family: "Baskervville", serif;
  font-style: italic;
  font-size: 1.2rem;
}

/* responsive — keep type readable on small screens without losing presence */
@media (max-width: 640px) {
  .ta-page {
    padding-top: 6rem;
  }

  .ta-page h1 {
    font-size: 2.8rem;
  }

  .ta-page .ta-callout {
    font-size: 1.5rem;
    margin: 2.5rem 0;
  }

  .ta-page .ta-dropcap::first-letter {
    font-size: 3.6rem;
  }

  .ta-page .ta-rule {
    margin: 3.5rem auto;
  }
}