/* Housing pages: Thompson Springs campaign look (from the 2026 "Homes for the Holidays" mailer).
   Navy and sea-glass teal, a classical wordmark, italic serif headlines, clean sans body. */
.ts {
  --ts-navy: #22386a;
  --ts-navy-dark: #172850;
  --ts-teal: #5b9a97;      /* large text and accents only */
  --ts-teal-text: #2c6b67; /* body-size teal text (passes AA) */
  --ts-mist: #e4ecf0;
  --ts-mist-2: #eef4f3;
  --ts-ink: #1f2a44;
  --ts-give: #c8102e;      /* bright holiday red for giving calls to action (white text passes AA) */
  --ts-give-dark: #9e0c24;
  --ts-wordmark: "Cinzel", "Trajan Pro", Georgia, serif;
  --ts-serif: "EB Garamond", Garamond, Georgia, serif;
  --ts-sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  font-family: var(--ts-sans);
  color: var(--ts-ink);
}
.ts h2, .ts h3 { color: var(--ts-navy); }
.ts a:not(.btn) { color: var(--ts-teal-text); }
.ts a:not(.btn):hover { color: var(--ts-navy); }

/* Wordmark: THOMPSON in navy, SPRINGS in teal */
.ts-wordmark {
  display: block; margin: 0; font-family: var(--ts-wordmark); font-weight: 500;
  line-height: 0.95; letter-spacing: 0.02em; color: var(--ts-navy);
  font-size: clamp(2.6rem, 8vw, 5rem);
}
.ts-wordmark span { display: block; color: var(--ts-teal); }
.ts-wordmark-inline span { display: inline; }
.ts-tagline { margin: 0.6rem 0 0; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ts-navy); }
.ts-tagline em { font-style: italic; }
.ts-tagline strong { font-weight: 700; }
.ts-script {
  font-family: var(--ts-serif); font-style: italic; font-weight: 600;
  color: var(--ts-navy); line-height: 1.15;
}
.ts-kicker {
  margin: 0 0 0.35rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ts-teal-text);
  font-size: 1rem;
}
.ts-kicker b { text-transform: uppercase; }

/* Buttons in campaign colors */
.ts .btn-ts { background: var(--ts-navy); color: #fff; }
.ts .btn-ts:hover { background: var(--ts-navy-dark); color: #fff; }
.ts .btn-ts-outline { background: #fff; color: var(--ts-navy); border-color: var(--ts-navy); }
.ts .btn-ts-outline:hover { background: var(--ts-mist); color: var(--ts-navy); }
.ts .btn-ts-light { background: #fff; color: var(--ts-navy); }
.ts .btn-ts-light:hover { background: var(--ts-mist); color: var(--ts-navy); }
.ts-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

/* Hero */
.ts-hero { background: linear-gradient(160deg, #fff 0%, var(--ts-mist-2) 55%, var(--ts-mist) 100%); }
.ts-hero-grid { display: grid; gap: 1.75rem; padding: clamp(1.75rem, 5vw, 3.5rem) 0; align-items: center; }
@media (min-width: 900px) { .ts-hero-grid { grid-template-columns: 5fr 6fr; } }
.ts-hero-lead { margin: 1.25rem 0 0; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.ts-hero-text p.ts-hero-sub { margin: 0.6rem 0 0; font-size: 1.15rem; max-width: 34rem; }
.ts-hero-photo { margin: 0; position: relative; }
.ts-hero-photo img { border-radius: 4px; box-shadow: 0 14px 34px rgba(23, 40, 80, 0.18); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.ts-hero-photo figcaption { margin-top: 0.45rem; font-size: 0.9rem; color: #4a5672; }
.ts-update {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
  background: var(--ts-navy); color: #fff; padding: 0.8rem 0;
}
.ts-update .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; }
.ts-update p { margin: 0; }
.ts-update a:not(.btn) { color: #fff; font-weight: 700; }
.ts-update a:not(.btn):hover { color: var(--ts-mist); }

/* Section on-page nav */
.ts-steps { background: #fff; border-bottom: 1px solid var(--ts-mist); }
.ts-steps ol { list-style: none; margin: 0; padding: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; counter-reset: tsstep; }
.ts-steps li { counter-increment: tsstep; }
.ts-steps a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 700; text-decoration: none; }
.ts-steps a::before {
  content: counter(tsstep); display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; background: var(--ts-navy); color: #fff; font-size: 0.95rem;
}
.ts-steps a:hover { text-decoration: underline; }

/* Blocks */
.ts-section { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.ts-section-mist { background: linear-gradient(180deg, var(--ts-mist-2), var(--ts-mist)); }
.ts-section-white { background: #fff; }
.ts-h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 0.75rem; }
.ts-intro { max-width: 44rem; font-size: 1.15rem; }

.ts-feature { display: grid; gap: 0; align-items: center; margin-top: 1.5rem; }
@media (min-width: 900px) { .ts-feature { grid-template-columns: 7fr 5fr; } }
.ts-feature img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; border-radius: 4px; }
.ts-panel {
  background: var(--ts-navy); color: #fff; padding: clamp(1.25rem, 3vw, 2rem);
  border: 3px solid #fff; box-shadow: 0 10px 28px rgba(23, 40, 80, 0.2); font-weight: 600; font-size: 1.1rem;
}
.ts-panel p { margin: 0 0 0.8rem; }
.ts-panel p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .ts-panel { margin-left: -4rem; position: relative; } }

.ts-homes { display: grid; gap: 1.75rem; margin-top: 2rem; align-items: start; }
@media (min-width: 900px) { .ts-homes { grid-template-columns: 1fr 1fr; } }
.ts-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0 1.25rem; }
.ts-stat { background: #fff; border-top: 5px solid var(--ts-teal); padding: 0.9rem 1rem; box-shadow: 0 2px 10px rgba(23, 40, 80, 0.06); }
.ts-stat strong { display: block; font-family: var(--ts-serif); font-size: 2.2rem; line-height: 1; color: var(--ts-navy); }
.ts-stat span { display: block; margin-top: 0.3rem; font-weight: 600; }
.ts-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ts-checks li { position: relative; padding-left: 1.7rem; }
.ts-checks li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.75rem; height: 0.75rem;
  border-radius: 50%; background: var(--ts-teal);
}
.ts-homes figure { margin: 0; }
.ts-homes figure img { border-radius: 4px; width: 100%; }

.ts-ud { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .ts-ud { grid-template-columns: 1fr 1fr; } }
.ts-ud article { background: var(--ts-navy); color: #fff; padding: 1.4rem 1.5rem; }
.ts-ud h3 { color: #cfe4e2; font-family: var(--ts-serif); font-style: italic; font-weight: 600; font-size: 1.85rem; margin: 0 0 0.4rem; }
.ts-ud p { margin: 0; }

/* HOA Advisory Board call-out */
.ts-hoa {
  margin-top: 2.5rem; background: #fff; border: 3px solid var(--ts-navy); border-radius: 6px;
  display: grid; gap: 0; overflow: hidden;
}
@media (min-width: 900px) { .ts-hoa { grid-template-columns: 2fr 3fr; } }
.ts-hoa-head { background: var(--ts-navy); color: #fff; padding: 1.5rem; }
.ts-hoa-head .ts-badge {
  display: inline-block; background: #cfe4e2; color: var(--ts-navy); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 999px;
}
.ts-hoa-head h3 { color: #fff; font-family: var(--ts-serif); font-style: italic; font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0.6rem 0 0.5rem; line-height: 1.15; }
.ts-hoa-head p { margin: 0; }
.ts-hoa-body { padding: 1.5rem; }
.ts-hoa-body h4 { margin: 0 0 0.3rem; color: var(--ts-navy); font-size: 1.1rem; }
.ts-hoa-body p { margin: 0 0 1rem; }
.ts-hoa-cols { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .ts-hoa-cols { grid-template-columns: 1fr 1fr; } }
.ts-hoa-cols ul { margin: 0; padding-left: 1.2rem; }
.ts-hoa .ts-btns { margin-top: 0.5rem; }

/* Media and news */
.ts-media { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .ts-media { grid-template-columns: 6fr 5fr; } }
.ts-video { position: relative; aspect-ratio: 16 / 9; background: var(--ts-navy); border-radius: 4px; overflow: hidden; }
.ts-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ts-downloads { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.ts-downloads a { font-weight: 700; }
.ts-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ts-news li { background: #fff; border-left: 5px solid var(--ts-teal); padding: 0.75rem 1rem; box-shadow: 0 2px 10px rgba(23, 40, 80, 0.06); }
.ts-news a { font-weight: 700; line-height: 1.35; display: inline-block; }
.ts-news span { display: block; font-size: 0.95rem; color: #4a5672; margin-top: 0.15rem; }
.ts-h3 { font-family: var(--ts-serif); font-style: italic; font-size: 1.7rem; margin: 0 0 0.75rem; }

/* Interest list band */
.ts-join {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(rgba(23, 40, 80, 0.86), rgba(23, 40, 80, 0.86)), url("/assets/housing/oregon-coast-beach-accessible.jpg") center / cover;
  padding: clamp(2.5rem, 6vw, 4.25rem) 0;
}
.ts-join h2 { color: #fff; font-family: var(--ts-serif); font-style: italic; font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 0 0 0.5rem; line-height: 1.1; }
.ts-join p { max-width: 40rem; margin: 0 0 0.6rem; font-size: 1.15rem; }
.ts-join .ts-small { font-size: 1rem; opacity: 0.92; }
.ts-join a:not(.btn) { color: #fff; }

/* Pathways (modeled on The Arc of Lincoln's programs page: bold title, short line, Learn more) */
.ts-paths { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .ts-paths { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ts-paths { grid-template-columns: repeat(4, 1fr); } }
.ts-path { background: #fff; padding: 1.25rem 1.25rem 1.1rem; border-top: 5px solid var(--ts-navy); display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(23, 40, 80, 0.06); }
.ts-path h3 { margin: 0 0 0.45rem; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-navy); line-height: 1.3; }
.ts-path p { margin: 0 0 0.9rem; flex: 1; font-size: 1.05rem; }
.ts-path a { font-weight: 700; }
.ts-path a::after { content: " →"; }
.ts-path-feature { border-top-color: var(--ts-teal); background: var(--ts-mist-2); }

.ts-funders { margin-top: 2rem; font-size: 1.05rem; max-width: 48rem; }
.ts .eho-note { margin-top: 1.25rem; }

/* Pathways landing page */
.ts-page-hero { background: var(--ts-navy); color: #fff; padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.ts-page-hero h1 { margin: 0 0 0.5rem; font-family: var(--ts-serif); font-style: italic; font-weight: 600; font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.1; color: #fff; }
.ts-page-hero p { margin: 0; max-width: 42rem; font-size: 1.15rem; }
.ts-page-hero .pathways-back a { color: #fff; }
.ts-program { padding: 1.75rem 0; border-top: 1px solid #d3dde4; scroll-margin-top: 7rem; }
.ts-program:first-of-type { border-top: 0; }
.ts-program h2 { margin: 0 0 0.5rem; font-size: clamp(1.3rem, 2.6vw, 1.6rem); letter-spacing: 0.06em; text-transform: uppercase; }
.ts-program > p { max-width: 46rem; margin: 0 0 0.9rem; }
.ts-program .res-list { margin-bottom: 0.5rem; }
@media (min-width: 900px) { .ts-program .res-list { grid-template-columns: 1fr 1fr; } }
.ts-program .res-list li { border-color: #d3dde4; }
.ts-program-ts { background: var(--ts-mist-2); border: 2px solid var(--ts-teal); border-radius: 6px; padding: 1.5rem; margin-bottom: 1rem; }
.ts-program-ts h2 { color: var(--ts-navy); }

/* Holiday giving pop-out */
.holiday-tab {
  position: fixed; right: 0; top: 50%; z-index: 90; transform: translateY(-50%);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 0.5rem;
  background: var(--ts-give); color: #fff; border: 2px solid #fff; border-right: 0; border-radius: 12px 0 0 12px;
  padding: 1.2rem 0.75rem; font: 800 1.15rem/1 var(--ts-sans); cursor: pointer;
  box-shadow: -4px 6px 22px rgba(200, 16, 46, 0.45); min-width: 48px;
  animation: holiday-glow 2.4s ease-in-out 3;
}
.holiday-tab svg { width: 1.4rem; height: 1.4rem; }
.holiday-tab:hover, .holiday-tab:focus-visible { background: var(--ts-give-dark); }
.ts .btn-give { background: var(--ts-give); color: #fff; border-color: var(--ts-give); box-shadow: 0 4px 14px rgba(200, 16, 46, 0.35); }
.ts .btn-give:hover { background: var(--ts-give-dark); border-color: var(--ts-give-dark); color: #fff; }
@keyframes holiday-glow {
  0%, 100% { box-shadow: -4px 6px 22px rgba(200, 16, 46, 0.45); }
  50% { box-shadow: -4px 6px 32px 6px rgba(200, 16, 46, 0.7); }
}
@media (prefers-reduced-motion: reduce) { .holiday-tab { animation: none; } }
.holiday-teaser {
  position: fixed; right: 3.6rem; top: 50%; z-index: 91; transform: translateY(-50%);
  width: min(19rem, calc(100vw - 5rem)); background: #fff; border: 3px solid var(--ts-navy);
  border-radius: 8px; padding: 1rem 1.1rem; box-shadow: 0 12px 30px rgba(23, 40, 80, 0.25);
  animation: holiday-in 0.35s ease-out;
}
.holiday-teaser[hidden] { display: none; }
.holiday-teaser p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.45; }
.holiday-teaser .ts-script { font-size: 1.5rem; margin: 0 2rem 0.4rem 0; }
.holiday-teaser .btn { min-height: 44px; font-size: 1rem; padding: 0.5rem 0.9rem; }
.holiday-close {
  position: absolute; top: 0.35rem; right: 0.35rem; width: 44px; height: 44px; border: 0;
  background: transparent; color: var(--ts-navy); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 6px;
}
.holiday-close:hover { background: var(--ts-mist); }
@keyframes holiday-in { from { opacity: 0; transform: translate(1rem, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@media (max-width: 640px) {
  .holiday-tab { top: auto; bottom: 5rem; transform: none; }
  .holiday-teaser { top: auto; bottom: 1rem; right: 3.6rem; transform: none; animation: none; }
}

.holiday-dialog {
  width: min(56rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0;
  border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); color: var(--ts-ink); font-family: var(--ts-sans);
}
.holiday-dialog::backdrop { background: rgba(23, 40, 80, 0.6); }
.holiday-dialog .holiday-close { top: 0.5rem; right: 0.5rem; background: rgba(255, 255, 255, 0.9); z-index: 1; }
.holiday-banner { position: relative; }
.holiday-banner img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; }
.holiday-body { display: grid; gap: 1.5rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 2rem; }
@media (min-width: 760px) { .holiday-body { grid-template-columns: 2fr 3fr; } }
.holiday-side { background: linear-gradient(170deg, var(--ts-mist), #d7e3ea); padding: 1.25rem; border-radius: 4px; position: relative; overflow: hidden; }
.holiday-side h2 { font-size: clamp(1.9rem, 3.5vw, 2.4rem); margin: 0 0 0.75rem; }
.holiday-side p { margin: 0 0 0.75rem; font-weight: 600; }
.holiday-side .ts-wordmark { font-size: 2rem; margin-bottom: 1rem; }
.holiday-badge {
  display: grid; place-items: center; text-align: center; width: 10rem; height: 10rem; border-radius: 50%;
  background: var(--ts-navy); color: #fff; font-family: var(--ts-serif); font-style: italic; font-weight: 600;
  font-size: 1.35rem; line-height: 1.15; padding: 1rem; margin: 1rem auto;
}
.holiday-houses { display: block; width: 100%; height: auto; margin-top: 0.5rem; }
.holiday-letter { font-size: 1.05rem; }
.holiday-letter p { margin: 0 0 0.9rem; }
.holiday-letter blockquote { margin: 0 0 1rem; padding: 0 0 0 1rem; border-left: 4px solid var(--ts-teal); font-family: var(--ts-serif); font-style: italic; font-size: 1.45rem; color: var(--ts-teal-text); line-height: 1.25; }
.holiday-sign { font-style: italic; font-weight: 700; margin-bottom: 0.2rem !important; }
.holiday-name { margin: 0 !important; }
.holiday-draft { font-size: 0.95rem; color: #4a5672; margin-top: 1rem !important; }
.holiday-give { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.25rem; }
.holiday-give .ts-script { font-size: 1.8rem; margin: 0; }
.snow { color: #9fb2c6; }
.ts-stat { margin: 0; }
.ts-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.ts-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.9rem; border-radius: 999px;
  background: #fff; border: 2px solid var(--ts-navy); color: var(--ts-navy) !important; font-weight: 700;
  text-decoration: none; font-size: 1rem;
}
.ts-jump a:hover { background: var(--ts-mist); }
.ts-program-intro { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .ts-program-intro { grid-template-columns: 3fr 2fr; } }
.ts-program-intro img { border-radius: 4px; width: 100%; }