/* ============================================================
   CONTENT.CSS - styles for SEO landing pages, articles and the
   articles index. Additive only; reuses site.css tokens and
   typographic roles (t-h1/t-h2/t-body/t-script/u-link/ph…).
   Linked ONLY from the new content pages.
   ============================================================ */

/* ---- shared readable column ---- */
.content-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--pad-x) clamp(24px, 4vw, 48px);
}
.content-wrap--wide { max-width: 1120px; }

/* small dateline / eyebrow row above article bodies */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: baseline;
  margin-bottom: clamp(22px, 3vw, 34px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.article-meta .t-label { color: var(--maroon); }
.article-meta time { font-size: 13px; letter-spacing: .05em; opacity: .8; }

/* ---- prose body (editorial reading rhythm) ---- */
.prose { font-family: var(--font-serif); color: var(--ink); }
.prose > p { font-size: 16.5px; line-height: 1.85; margin: 0 0 1.15em; }
.prose > p.lede {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.7;
  color: var(--maroon-dark);
  margin-bottom: 1.4em;
}
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  color: var(--maroon);
  margin: clamp(38px, 5vw, 58px) 0 .55em;
}
.prose h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(17px, 1.5vw, 20px);
  margin: 2em 0 .4em;
}
.prose h3 .hnum { color: var(--maroon); font-style: normal; margin-right: .5em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose li { font-size: 16px; line-height: 1.8; margin-bottom: .5em; }
.prose a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .5px; }
.prose a:hover { opacity: .6; }
.prose strong { font-weight: 400; color: var(--maroon-dark); font-style: italic; }

.prose blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.5;
  color: var(--maroon);
  text-align: center;
  margin: clamp(34px, 4.5vw, 56px) auto;
  max-width: 34ch;
}

/* rule / divider matching the site's dotted offer line spirit */
.content-rule {
  width: 46px; height: 1px; background: var(--maroon);
  margin: clamp(34px, 4.5vw, 56px) auto;
}

/* ---- pull note / tip card ---- */
.note-card {
  background: var(--cream-3);
  border-left: 2px solid var(--maroon);
  padding: 22px clamp(20px, 3vw, 30px);
  margin: clamp(28px, 3.5vw, 40px) 0;
}
.note-card .t-label { display: block; color: var(--maroon); margin-bottom: 10px; }
.note-card p { font-size: 15.5px; line-height: 1.8; margin: 0; }

/* ---- location list (landing pages / location article) ---- */
.loc-list { list-style: none; padding: 0; margin: 0; counter-reset: loc; }
.loc-list > li {
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.loc-list > li:last-child { border-bottom: 1px solid var(--line); }
.loc-list h3 {
  display: flex; align-items: baseline; gap: .6em;
  margin: 0 0 .5em;
}
.loc-list h3 .loc-num {
  font-family: var(--font-serif);
  color: var(--maroon);
  font-size: 15px; letter-spacing: .06em;
}
.loc-list h3 .loc-name {
  font-family: var(--font-serif);
  font-weight: 400; text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(18px, 1.7vw, 22px);
}
.loc-list p { font-size: 15.5px; line-height: 1.82; margin: 0 0 .8em; }
.loc-list .loc-tag {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--maroon); opacity: .85;
}

/* ---- optional inline figure with caption ---- */
.content-figure { margin: clamp(28px, 3.5vw, 44px) 0; }
.content-figure .ph { aspect-ratio: 3/2; }
.content-figure figcaption {
  font-family: var(--font-sans);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--maroon); opacity: .8;
  margin-top: 10px; text-align: center;
}

/* ---- "keep reading" related-links block ---- */
.keep-reading {
  background: var(--cream-2);
  padding: clamp(48px, 7vw, 90px) var(--pad-x);
  text-align: center;
}
.keep-reading .head .t-script { display: block; margin-bottom: 4px; }
.keep-reading .head .t-h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.kr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 38px);
  max-width: 1060px;
  margin: 0 auto;
  text-align: left;
}
.kr-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  transition: opacity .25s;
}
.kr-card:hover { opacity: .62; }
.kr-card .t-label { display: block; color: var(--maroon); margin-bottom: 8px; }
.kr-card .kr-title {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.kr-card .kr-sub { font-size: 13.5px; line-height: 1.6; margin-top: 8px; opacity: .85; }

/* ---- articles index grid ---- */
.article-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 52px);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 56px) var(--pad-x) clamp(60px, 8vw, 100px);
}
.article-index .entry { display: flex; flex-direction: column; }
.article-index .entry .ph { aspect-ratio: 4/3; margin-bottom: 18px; }
.article-index .entry .t-label { color: var(--maroon); display: block; margin-bottom: 8px; }
.article-index .entry h2 {
  font-family: var(--font-serif); font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25;
  margin: 0 0 .5em;
}
.article-index .entry h2 a { text-decoration: none; color: inherit; }
.article-index .entry h2 a:hover { color: var(--maroon); }
.article-index .entry p { font-size: 15px; line-height: 1.75; margin: 0 0 16px; }
.article-index .entry .u-link { margin-top: auto; align-self: flex-start; }

/* ---- local landing: quick-facts strip ---- */
.factstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  max-width: 1060px;
  margin: 0 auto;
}
.factstrip .fact { background: var(--cream); padding: 22px clamp(16px, 2vw, 24px); text-align: center; }
.factstrip .fact .t-label { display: block; color: var(--maroon); margin-bottom: 8px; }
.factstrip .fact p { font-size: 14.5px; line-height: 1.7; margin: 0; }

@media (max-width: 760px) {
  .prose blockquote { max-width: none; }
}